mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-04-28 11:41:04 +00:00
ff43a278dc
- Introduce WebviewContainer component for style isolation in VSCode webviews - Rename CSS variables from --app-* to --qwen-app-* to prevent conflicts - Add dedicated webview.css with isolated styles - Update exports to include webview.css in package - Modify all components to use new CSS variable names - Update VSCode IDE companion to use new webview container - Add style isolation to prevent conflicts with VSCode environment Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Fixes webview UI issues in VSCode IDE Companion by providing proper style encapsulation.
41 lines
1.8 KiB
TypeScript
41 lines
1.8 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2025 Qwen Team
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import type { FC } from 'react';
|
|
import { MessageContent } from './MessageContent.js';
|
|
|
|
export interface ThinkingMessageProps {
|
|
content: string;
|
|
timestamp: number;
|
|
onFileClick?: (path: string) => void;
|
|
}
|
|
|
|
export const ThinkingMessage: FC<ThinkingMessageProps> = ({
|
|
content,
|
|
timestamp: _timestamp,
|
|
onFileClick,
|
|
}) => (
|
|
<div className="qwen-message thinking-message flex gap-0 items-start text-left py-2 flex-col relative opacity-80 italic pl-6 animate-[fadeIn_0.2s_ease-in]">
|
|
<div
|
|
className="inline-block my-1 relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
|
|
style={{
|
|
backgroundColor:
|
|
'var(--app-list-hover-background, rgba(100, 100, 255, 0.1))',
|
|
border: '1px solid rgba(100, 100, 255, 0.3)',
|
|
borderRadius: 'var(--corner-radius-medium)',
|
|
padding: 'var(--app-spacing-medium)',
|
|
color: 'var(--app-primary-foreground)',
|
|
}}
|
|
>
|
|
<span className="inline-flex items-center gap-1 mr-2" aria-hidden="true">
|
|
<span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0s]"></span>
|
|
<span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.2s]"></span>
|
|
<span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.4s]"></span>
|
|
</span>
|
|
<MessageContent content={content} onFileClick={onFileClick} />
|
|
</div>
|
|
</div>
|
|
);
|