mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-19 09:33:53 +00:00
refactor(webview): Refactoring Input Form and Timeline Components
This commit is contained in:
yiliang114
@@ -123,20 +123,9 @@ export const InputForm: React.FC<InputFormProps> = ({
|
||||
style={{ backgroundColor: 'var(--app-primary-background)' }}
|
||||
>
|
||||
<div className="block">
|
||||
<form
|
||||
className="relative flex flex-col rounded-large border border-[var(--app-input-border)] shadow-sm transition-colors duration-200 focus-within:border-[var(--app-input-highlight)] focus-within:[box-shadow:0_1px_2px_color-mix(in_srgb,var(--app-input-highlight),transparent_80%)]"
|
||||
style={{
|
||||
backgroundColor:
|
||||
'var(--app-input-secondary-background, var(--app-input-background))',
|
||||
color: 'var(--app-input-foreground)',
|
||||
}}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
<form className="composer-form" onSubmit={onSubmit}>
|
||||
{/* Inner background layer */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-large z-0"
|
||||
style={{ backgroundColor: 'var(--app-input-background)' }}
|
||||
/>
|
||||
<div className="composer-overlay" />
|
||||
|
||||
{/* Banner area */}
|
||||
<div className="input-banner" />
|
||||
@@ -161,11 +150,7 @@ export const InputForm: React.FC<InputFormProps> = ({
|
||||
<div
|
||||
ref={inputFieldRef}
|
||||
contentEditable="plaintext-only"
|
||||
className="c flex-1 self-stretch p-2.5 px-3.5 outline-none font-inherit leading-relaxed overflow-y-auto relative select-text min-h-[1.5em] max-h-[200px] bg-transparent border-none rounded-none overflow-x-hidden break-words whitespace-pre-wrap empty:before:content-[attr(data-placeholder)] empty:before:absolute empty:before:pointer-events-none disabled:text-gray-400 disabled:cursor-not-allowed"
|
||||
style={{
|
||||
color: 'var(--app-input-foreground)',
|
||||
fontSize: 'var(--vscode-chat-font-size, 13px)',
|
||||
}}
|
||||
className="composer-input"
|
||||
role="textbox"
|
||||
aria-label="Message input"
|
||||
aria-multiline="true"
|
||||
@@ -181,41 +166,31 @@ export const InputForm: React.FC<InputFormProps> = ({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions row */}
|
||||
<div
|
||||
className="flex items-center p-1.5 gap-1.5 min-w-0 z-[1]"
|
||||
style={{
|
||||
color: 'var(--app-secondary-foreground)',
|
||||
borderTop: '0.5px solid var(--app-input-border)',
|
||||
}}
|
||||
>
|
||||
{/* Actions row (compact, Claude-style) */}
|
||||
<div className="composer-actions">
|
||||
{/* Edit mode button */}
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1.5 px-2.5 py-1.5 h-8 bg-transparent border border-transparent rounded-small cursor-pointer text-xs transition-colors duration-150 hover:bg-[var(--app-ghost-button-hover-background)] min-w-0 flex-shrink overflow-hidden [&>svg]:w-4 [&>svg]:h-4 [&>svg]:flex-shrink-0"
|
||||
style={{ color: 'var(--app-primary-foreground)' }}
|
||||
className="btn-text-compact btn-text-compact--primary"
|
||||
title={editModeInfo.title}
|
||||
onClick={onToggleEditMode}
|
||||
>
|
||||
{editModeInfo.icon}
|
||||
{/* Let the label truncate with ellipsis; hide on very small screens */}
|
||||
<span className="min-w-0 truncate hidden sm:inline">
|
||||
{editModeInfo.text}
|
||||
</span>
|
||||
<span className="hidden sm:inline">{editModeInfo.text}</span>
|
||||
</button>
|
||||
|
||||
{/* Active file indicator */}
|
||||
{activeFileName && (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1.5 px-2.5 py-1.5 h-8 bg-transparent border border-transparent rounded-small cursor-pointer text-xs transition-colors duration-150 hover:bg-[var(--app-ghost-button-hover-background)] [&>svg]:w-4 [&>svg]:h-4 [&>svg]:flex-shrink-0 max-w-[200px] flex-shrink min-w-0 overflow-hidden"
|
||||
style={{ color: 'var(--app-primary-foreground)' }}
|
||||
className="btn-text-compact btn-text-compact--primary"
|
||||
title={`Showing Qwen Code your current file selection: ${activeFileName}${activeSelection ? `#${activeSelection.startLine}-${activeSelection.endLine}` : ''}`}
|
||||
onClick={onFocusActiveEditor}
|
||||
>
|
||||
<CodeBracketsIcon />
|
||||
{/* Truncate file path/selection; hide label on very small screens */}
|
||||
<span className="min-w-0 truncate hidden sm:inline">
|
||||
<span className="hidden sm:inline">
|
||||
{activeFileName}
|
||||
{activeSelection &&
|
||||
` #${activeSelection.startLine}${activeSelection.startLine !== activeSelection.endLine ? `-${activeSelection.endLine}` : ''}`}
|
||||
@@ -225,7 +200,7 @@ export const InputForm: React.FC<InputFormProps> = ({
|
||||
|
||||
{/* Divider */}
|
||||
<div
|
||||
className="w-px h-6 mx-0.5 flex-shrink-0"
|
||||
className="w-px h-[26px] mx-0.5 flex-shrink-0"
|
||||
style={{
|
||||
backgroundColor: 'var(--app-transparent-inner-border)',
|
||||
}}
|
||||
@@ -237,19 +212,7 @@ export const InputForm: React.FC<InputFormProps> = ({
|
||||
{/* Thinking button */}
|
||||
<button
|
||||
type="button"
|
||||
className={`flex items-center justify-center w-8 h-8 p-0 bg-transparent border border-transparent rounded-small cursor-pointer transition-all duration-150 flex-shrink-0 hover:bg-[var(--app-ghost-button-hover-background)] [&>svg]:w-4 [&>svg]:h-4 ${
|
||||
thinkingEnabled
|
||||
? 'bg-qwen-clay-orange text-qwen-ivory [&>svg]:stroke-qwen-ivory [&>svg]:fill-qwen-ivory'
|
||||
: ''
|
||||
}`}
|
||||
style={{
|
||||
color: thinkingEnabled
|
||||
? 'var(--app-qwen-ivory)'
|
||||
: 'var(--app-secondary-foreground)',
|
||||
backgroundColor: thinkingEnabled
|
||||
? 'var(--app-qwen-clay-button-orange)'
|
||||
: undefined,
|
||||
}}
|
||||
className={`btn-icon-compact ${thinkingEnabled ? 'btn-icon-compact--active' : ''}`}
|
||||
title={thinkingEnabled ? 'Thinking on' : 'Thinking off'}
|
||||
onClick={onToggleThinking}
|
||||
>
|
||||
@@ -259,8 +222,7 @@ export const InputForm: React.FC<InputFormProps> = ({
|
||||
{/* Command button */}
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center justify-center w-8 h-8 p-0 bg-transparent border border-transparent rounded-small cursor-pointer transition-all duration-150 flex-shrink-0 hover:bg-[var(--app-ghost-button-hover-background)] hover:text-[var(--app-primary-foreground)] [&>svg]:w-4 [&>svg]:h-4"
|
||||
style={{ color: 'var(--app-secondary-foreground)' }}
|
||||
className="btn-icon-compact hover:text-[var(--app-primary-foreground)]"
|
||||
title="Show command menu (/)"
|
||||
onClick={onShowCommandMenu}
|
||||
>
|
||||
@@ -270,8 +232,7 @@ export const InputForm: React.FC<InputFormProps> = ({
|
||||
{/* Attach button */}
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center justify-center w-8 h-8 p-0 bg-transparent border border-transparent rounded-small cursor-pointer transition-all duration-150 flex-shrink-0 hover:bg-[var(--app-ghost-button-hover-background)] hover:text-[var(--app-primary-foreground)] [&>svg]:w-4 [&>svg]:h-4"
|
||||
style={{ color: 'var(--app-secondary-foreground)' }}
|
||||
className="btn-icon-compact hover:text-[var(--app-primary-foreground)]"
|
||||
title="Attach context (Cmd/Ctrl + /)"
|
||||
onClick={onAttachContext}
|
||||
>
|
||||
@@ -281,11 +242,7 @@ export const InputForm: React.FC<InputFormProps> = ({
|
||||
{/* Send button */}
|
||||
<button
|
||||
type="submit"
|
||||
className="flex items-center justify-center w-8 h-8 p-0 border border-transparent rounded-small cursor-pointer transition-all duration-150 ml-auto flex-shrink-0 hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed [&>svg]:w-5 [&>svg]:h-5"
|
||||
style={{
|
||||
backgroundColor: 'var(--app-qwen-clay-button-orange)',
|
||||
color: 'var(--app-qwen-ivory)',
|
||||
}}
|
||||
className="btn-send-compact [&>svg]:w-5 [&>svg]:h-5"
|
||||
disabled={isStreaming || !inputText.trim()}
|
||||
>
|
||||
<ArrowUpIcon />
|
||||
|
||||
@@ -1,217 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen Team
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Timeline.css - 时间线布局样式
|
||||
* 统一展示消息、工具调用、输出等
|
||||
*/
|
||||
|
||||
.timeline-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr;
|
||||
gap: 12px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.timeline-item.last {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* 时间线连接线 - 暂时禁用 */
|
||||
/*
|
||||
.timeline-line {
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 20px;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--app-transparent-inner-border);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.timeline-item.last .timeline-line {
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
|
||||
/* 状态圆点 */
|
||||
.timeline-dot {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dot-inner {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 不同类型的圆点颜色 */
|
||||
.timeline-dot.blue .dot-inner {
|
||||
background-color: var(--vscode-terminal-ansiBlue, #4fc3f7);
|
||||
}
|
||||
|
||||
.timeline-dot.gray .dot-inner {
|
||||
background-color: var(--app-secondary-foreground);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.timeline-dot.green .dot-inner {
|
||||
background-color: var(--app-qwen-green, #6bcf7f);
|
||||
}
|
||||
|
||||
.timeline-dot.purple .dot-inner {
|
||||
background-color: var(--vscode-terminal-ansiMagenta, #ba68c8);
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.timeline-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 标签 */
|
||||
.timeline-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--app-secondary-foreground);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 内容主体 */
|
||||
.timeline-body {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--app-primary-foreground);
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
/* 折叠/展开按钮 */
|
||||
.timeline-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px 4px 4px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--app-secondary-foreground);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.timeline-toggle:hover {
|
||||
background: var(--app-ghost-button-hover-background);
|
||||
}
|
||||
|
||||
.timeline-toggle-icon {
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
.timeline-toggle-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 工具输出的特殊样式 */
|
||||
.timeline-item.tool-output .timeline-body {
|
||||
background: var(--app-secondary-background);
|
||||
border: 1px solid var(--app-transparent-inner-border);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
font-family: var(
|
||||
--vscode-editor-font-family,
|
||||
'Monaco',
|
||||
'Courier New',
|
||||
monospace
|
||||
);
|
||||
font-size: 12px;
|
||||
color: var(--app-secondary-foreground);
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 工具调用的特殊样式 */
|
||||
.timeline-item.tool-call .timeline-body {
|
||||
background: var(--app-secondary-background);
|
||||
border: 1px solid var(--app-transparent-inner-border);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* 用户消息样式 */
|
||||
.timeline-item.user-message .timeline-body {
|
||||
background: var(--app-qwen-clay-button-orange);
|
||||
border: 1px solid var(--app-transparent-inner-border);
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
/* 思考消息样式 */
|
||||
.timeline-item.thinking .timeline-body {
|
||||
color: var(--app-secondary-foreground);
|
||||
opacity: 0.7;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.timeline-item.tool-output .timeline-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.timeline-item.tool-output .timeline-body::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.timeline-item.tool-output .timeline-body::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.timeline-item.tool-output .timeline-body::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes timelineFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
animation: timelineFadeIn 0.3s ease-out;
|
||||
}
|
||||
@@ -1,126 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen Team
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import type React from 'react';
|
||||
import { useState } from 'react';
|
||||
import './Timeline.css';
|
||||
|
||||
export type TimelineItemType =
|
||||
| 'user-message'
|
||||
| 'assistant-message'
|
||||
| 'tool-call'
|
||||
| 'tool-output'
|
||||
| 'thinking';
|
||||
|
||||
export interface TimelineItemProps {
|
||||
type: TimelineItemType;
|
||||
children: React.ReactNode;
|
||||
/** Whether collapsible (mainly for tool output) */
|
||||
collapsible?: boolean;
|
||||
/** Default expanded */
|
||||
defaultExpanded?: boolean;
|
||||
/** Custom title (used for display when collapsed) */
|
||||
title?: string;
|
||||
/** Whether it is the last item */
|
||||
isLast?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Timeline item component - Unified display of messages and tool calls
|
||||
*/
|
||||
export const TimelineItem: React.FC<TimelineItemProps> = ({
|
||||
type,
|
||||
children,
|
||||
collapsible = false,
|
||||
defaultExpanded = true,
|
||||
title,
|
||||
isLast = false,
|
||||
}) => {
|
||||
const [expanded, setExpanded] = useState(defaultExpanded);
|
||||
|
||||
const getDotColor = (): string => {
|
||||
switch (type) {
|
||||
case 'user-message':
|
||||
return 'blue'; // User message - Blue
|
||||
case 'assistant-message':
|
||||
return 'gray'; // LLM output - Gray
|
||||
case 'tool-call':
|
||||
return 'green'; // Tool call - Green
|
||||
case 'tool-output':
|
||||
return 'gray'; // Tool output - Gray
|
||||
case 'thinking':
|
||||
return 'purple'; // Thinking - Purple
|
||||
default:
|
||||
return 'gray';
|
||||
}
|
||||
};
|
||||
|
||||
const getItemLabel = (): string | null => {
|
||||
switch (type) {
|
||||
case 'user-message':
|
||||
return 'You';
|
||||
case 'assistant-message':
|
||||
return 'Qwen';
|
||||
case 'tool-call':
|
||||
return 'Tool Call';
|
||||
case 'tool-output':
|
||||
return 'Output';
|
||||
case 'thinking':
|
||||
return 'Thinking';
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const dotColor = getDotColor();
|
||||
const itemLabel = getItemLabel();
|
||||
|
||||
return (
|
||||
<div className={`timeline-item ${type} ${isLast ? 'last' : ''}`}>
|
||||
{/* Timeline connecting line - Temporarily disabled */}
|
||||
{/* {!isLast && <div className="timeline-line" />} */}
|
||||
|
||||
{/* Status dot */}
|
||||
<div className={`timeline-dot ${dotColor}`}>
|
||||
<span className="dot-inner" />
|
||||
</div>
|
||||
|
||||
{/* Content area */}
|
||||
<div className="timeline-content">
|
||||
{/* Label (optional) */}
|
||||
{itemLabel && <div className="timeline-label">{itemLabel}</div>}
|
||||
|
||||
{/* Collapsible content */}
|
||||
{collapsible ? (
|
||||
<>
|
||||
<button
|
||||
className="timeline-toggle"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
aria-expanded={expanded}
|
||||
>
|
||||
<span className="timeline-toggle-icon">
|
||||
{expanded ? '▼' : '▶'}
|
||||
</span>
|
||||
<span className="timeline-toggle-text">
|
||||
{title || (expanded ? 'Hide details' : 'Show details')}
|
||||
</span>
|
||||
</button>
|
||||
{expanded && <div className="timeline-body">{children}</div>}
|
||||
</>
|
||||
) : (
|
||||
<div className="timeline-body">{children}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Timeline container component
|
||||
*/
|
||||
export const Timeline: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => <div className="timeline-container">{children}</div>;
|
||||
@@ -18,27 +18,22 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
|
||||
onLoadSessions,
|
||||
onNewSession,
|
||||
}) => (
|
||||
<div
|
||||
className="chat-header flex items-center select-none py-1.5 px-2.5 w-full"
|
||||
style={{
|
||||
backgroundColor: 'var(--app-header-background)',
|
||||
}}
|
||||
>
|
||||
<div className="chat-header flex items-center select-none w-full border-b border-[var(--app-primary-border-color)] bg-[var(--app-header-background)] py-1.5 px-2">
|
||||
<button
|
||||
className="btn-ghost btn-md px-2 flex items-center outline-none font-medium max-w-[70%] min-w-0 overflow-hidden rounded hover:bg-[var(--app-ghost-button-hover-background)] h-6 leading-6"
|
||||
className="flex items-center gap-1.5 py-0.5 px-2 bg-transparent border-none rounded cursor-pointer outline-none min-w-0 max-w-[300px] overflow-hidden text-[var(--vscode-chat-font-size,13px)] font-[var(--vscode-chat-font-family)] hover:bg-[var(--app-ghost-button-hover-background)] focus:bg-[var(--app-ghost-button-hover-background)]"
|
||||
onClick={onLoadSessions}
|
||||
title="Past conversations"
|
||||
>
|
||||
<span className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0 mr-1">
|
||||
<span className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
|
||||
{currentSessionTitle}
|
||||
</span>
|
||||
<ChevronDownIcon className="w-4 h-4 flex-shrink-0 ml-1" />
|
||||
<ChevronDownIcon className="w-4 h-4 flex-shrink-0" />
|
||||
</button>
|
||||
|
||||
<div className="flex-1 min-w-2"></div>
|
||||
<div className="flex-1 min-w-1"></div>
|
||||
|
||||
<button
|
||||
className="btn-ghost btn-sm flex items-center justify-center outline-none rounded hover:bg-[var(--app-ghost-button-hover-background)] p-1 leading-6"
|
||||
className="flex items-center justify-center p-1.5 bg-transparent border-none rounded cursor-pointer outline-none hover:bg-[var(--app-ghost-button-hover-background)]"
|
||||
onClick={onNewSession}
|
||||
title="New Session"
|
||||
>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*
|
||||
* AssistantMessage Component Styles
|
||||
* Only pseudo-elements (::before) for bullet points
|
||||
* Pseudo-elements (::before) for bullet points and (::after) for timeline connectors
|
||||
*/
|
||||
|
||||
/* Bullet point indicator using ::before pseudo-element */
|
||||
@@ -58,3 +58,32 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Timeline connector line using ::after pseudo-element */
|
||||
/* Default: full height connector for middle items */
|
||||
.assistant-message-container::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background-color: var(--app-primary-border-color);
|
||||
opacity: 0.4;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* First item: connector starts from bullet point position */
|
||||
.assistant-message-container:first-child::after {
|
||||
top: 12px; /* Start from around the bullet point position (8px padding + 4px offset) */
|
||||
}
|
||||
|
||||
/* Last item: connector ends at bullet point position */
|
||||
.assistant-message-container:last-child::after {
|
||||
bottom: 12px; /* End at around the bullet point position */
|
||||
}
|
||||
|
||||
/* First and last are the same item (single item): no connector */
|
||||
.assistant-message-container:first-child:last-child::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
* Edit tool call component - specialized for file editing operations
|
||||
*/
|
||||
|
||||
import type React from 'react';
|
||||
import { useEffect, useCallback } from 'react';
|
||||
import type { BaseToolCallProps } from './shared/types.js';
|
||||
import { ToolCallContainer } from './shared/LayoutComponents.js';
|
||||
import { DiffDisplay } from './shared/DiffDisplay.js';
|
||||
@@ -45,22 +45,46 @@ export const EditToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
|
||||
// Group content by type
|
||||
const { errors, diffs } = groupContent(content);
|
||||
|
||||
const handleOpenDiff = (
|
||||
path: string | undefined,
|
||||
oldText: string | null | undefined,
|
||||
newText: string | undefined,
|
||||
) => {
|
||||
if (path) {
|
||||
vscode.postMessage({
|
||||
type: 'openDiff',
|
||||
data: { path, oldText: oldText || '', newText: newText || '' },
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleOpenDiff = useCallback(
|
||||
(
|
||||
path: string | undefined,
|
||||
oldText: string | null | undefined,
|
||||
newText: string | undefined,
|
||||
) => {
|
||||
if (path) {
|
||||
vscode.postMessage({
|
||||
type: 'openDiff',
|
||||
data: { path, oldText: oldText || '', newText: newText || '' },
|
||||
});
|
||||
}
|
||||
},
|
||||
[vscode],
|
||||
);
|
||||
|
||||
// Extract filename from path
|
||||
const getFileName = (path: string): string => path.split('/').pop() || path;
|
||||
|
||||
// Automatically trigger openDiff when diff content is detected (Claude Code style)
|
||||
useEffect(() => {
|
||||
// Only auto-open if there are diffs and we have the required data
|
||||
if (diffs.length > 0) {
|
||||
const firstDiff = diffs[0];
|
||||
const path = firstDiff.path || (locations && locations[0]?.path) || '';
|
||||
|
||||
if (
|
||||
path &&
|
||||
firstDiff.oldText !== undefined &&
|
||||
firstDiff.newText !== undefined
|
||||
) {
|
||||
// Add a small delay to ensure the component is fully rendered
|
||||
const timer = setTimeout(() => {
|
||||
handleOpenDiff(path, firstDiff.oldText, firstDiff.newText);
|
||||
}, 100);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}
|
||||
}, [diffs, locations, handleOpenDiff]);
|
||||
|
||||
// Error case: show error
|
||||
if (errors.length > 0) {
|
||||
const path = diffs[0]?.path || locations?.[0]?.path || '';
|
||||
@@ -98,14 +122,10 @@ export const EditToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className="relative py-2 select-text cursor-pointer hover:bg-[var(--app-input-background)]"
|
||||
className="relative py-2 select-text cursor-pointer hover:bg-[var(--app-input-background)] toolcall-container toolcall-status-success"
|
||||
onClick={openFirstDiff}
|
||||
title="Open diff in VS Code"
|
||||
>
|
||||
{/* Center the bullet vertically like the shared container */}
|
||||
<span className="absolute left-2 top-1/2 -translate-y-1/2 text-[10px] leading-none text-[#74c991]">
|
||||
●
|
||||
</span>
|
||||
{/* Keep content within overall width: pl-[30px] provides the bullet indent; */}
|
||||
{/* IMPORTANT: Always include min-w-0/max-w-full on inner wrappers to prevent overflow. */}
|
||||
<div className="toolcall-edit-content flex flex-col gap-1 pl-[30px] min-w-0 max-w-full">
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen Team
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*
|
||||
* LayoutComponents.css - Tool call layout styles with timeline support
|
||||
*/
|
||||
|
||||
/* ToolCallContainer with timeline support */
|
||||
.toolcall-container {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
user-select: text;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* Timeline connector line using ::after pseudo-element */
|
||||
/* Default: full height connector for middle items */
|
||||
.toolcall-container::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background-color: var(--app-primary-border-color);
|
||||
opacity: 0.4;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* First item: connector starts from bullet point position */
|
||||
.toolcall-container:first-child::after {
|
||||
top: 12px; /* Start from around the bullet point position (8px padding + 4px offset) */
|
||||
}
|
||||
|
||||
/* Last item: connector ends at bullet point position */
|
||||
.toolcall-container:last-child::after {
|
||||
bottom: 12px; /* End at around the bullet point position */
|
||||
}
|
||||
|
||||
/* First and last are the same item (single item): no connector */
|
||||
.toolcall-container:first-child:last-child::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Status-specific styles using ::before pseudo-element for bullet points */
|
||||
.toolcall-container.toolcall-status-default::before {
|
||||
content: "\25cf";
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
padding-top: 2px;
|
||||
font-size: 10px;
|
||||
color: var(--app-secondary-foreground);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.toolcall-container.toolcall-status-success::before {
|
||||
content: "\25cf";
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
padding-top: 2px;
|
||||
font-size: 10px;
|
||||
color: #74c991;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.toolcall-container.toolcall-status-error::before {
|
||||
content: "\25cf";
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
padding-top: 2px;
|
||||
font-size: 10px;
|
||||
color: #c74e39;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.toolcall-container.toolcall-status-warning::before {
|
||||
content: "\25cf";
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
padding-top: 2px;
|
||||
font-size: 10px;
|
||||
color: #e1c08d;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.toolcall-container.toolcall-status-loading::before {
|
||||
content: "\25cf";
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
padding-top: 2px;
|
||||
font-size: 10px;
|
||||
color: var(--app-secondary-foreground);
|
||||
background-color: var(--app-secondary-background);
|
||||
animation: toolcallPulse 1s linear infinite;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Loading animation */
|
||||
@keyframes toolcallPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Content wrapper */
|
||||
.toolcall-content-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Legacy card styles */
|
||||
.toolcall-card {
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: var(--spacing-medium);
|
||||
background: var(--app-input-background);
|
||||
border: 1px solid var(--app-input-border);
|
||||
border-radius: var(--border-radius-medium);
|
||||
padding: var(--spacing-large);
|
||||
margin: var(--spacing-medium) 0;
|
||||
align-items: start;
|
||||
animation: fadeIn 0.2s ease-in;
|
||||
}
|
||||
|
||||
/* Legacy row styles */
|
||||
.toolcall-row {
|
||||
grid-template-columns: 80px 1fr;
|
||||
gap: var(--spacing-medium);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.toolcall-row-label {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--app-secondary-foreground);
|
||||
font-weight: 500;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.toolcall-row-content {
|
||||
color: var(--app-primary-foreground);
|
||||
min-width: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Locations list */
|
||||
.toolcall-locations-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -9,6 +9,7 @@
|
||||
|
||||
import type React from 'react';
|
||||
import { FileLink } from '../../ui/FileLink.js';
|
||||
import './LayoutComponents.css';
|
||||
|
||||
/**
|
||||
* Props for ToolCallContainer - Claude Code style layout
|
||||
@@ -26,28 +27,12 @@ interface ToolCallContainerProps {
|
||||
labelSuffix?: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get bullet point color classes based on status
|
||||
*/
|
||||
const getBulletColorClass = (
|
||||
status: 'success' | 'error' | 'warning' | 'loading' | 'default',
|
||||
): string => {
|
||||
switch (status) {
|
||||
case 'success':
|
||||
return 'text-[#74c991]';
|
||||
case 'error':
|
||||
return 'text-[#c74e39]';
|
||||
case 'warning':
|
||||
return 'text-[#e1c08d]';
|
||||
case 'loading':
|
||||
return 'text-[var(--app-secondary-foreground)] animate-pulse';
|
||||
default:
|
||||
return 'text-[var(--app-secondary-foreground)]';
|
||||
}
|
||||
};
|
||||
// NOTE: We previously computed a bullet color class in JS, but the current
|
||||
// implementation uses CSS classes (e.g. `.toolcall-status-success`) with
|
||||
// pseudo-elements. Remove the unused helper to satisfy ESLint.
|
||||
|
||||
/**
|
||||
* Main container with Claude Code style bullet point
|
||||
* Main container with Claude Code style bullet point and timeline
|
||||
*/
|
||||
export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
|
||||
label,
|
||||
@@ -56,19 +41,12 @@ export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
|
||||
toolCallId: _toolCallId,
|
||||
labelSuffix,
|
||||
}) => (
|
||||
<div className="relative pl-[30px] py-2 select-text toolcall-container">
|
||||
<div
|
||||
className={`relative pl-[30px] py-2 select-text toolcall-container toolcall-status-${status}`}
|
||||
>
|
||||
{/* Timeline connector line using ::after pseudo-element */}
|
||||
<div className="toolcall-content-wrapper flex flex-col gap-1 min-w-0 max-w-full">
|
||||
<div className="flex items-center gap-2 relative min-w-0">
|
||||
{/* Status icon (bullet), vertically centered with header row */}
|
||||
<span
|
||||
aria-hidden
|
||||
className={`absolute -left-[20px] top-1/2 -translate-y-1/2 text-[10px] leading-none ${getBulletColorClass(
|
||||
status,
|
||||
)}`}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
|
||||
<span className="text-[14px] leading-none font-bold text-[var(--app-primary-foreground)]">
|
||||
{label}
|
||||
</span>
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
/* Import component styles */
|
||||
@import '../components/EmptyState.css';
|
||||
@import '../components/PlanDisplay.css';
|
||||
@import '../components/Timeline.css';
|
||||
@import '../components/toolcalls/shared/DiffDisplay.css';
|
||||
@import '../components/messages/AssistantMessage.css';
|
||||
|
||||
|
||||
@@ -35,4 +35,123 @@
|
||||
.icon-sm {
|
||||
@apply w-4 h-4;
|
||||
}
|
||||
}
|
||||
|
||||
/* Composer: root container anchored to bottom (Claude-style) */
|
||||
.composer-root {
|
||||
@apply absolute bottom-4 left-4 right-4 flex flex-col z-20;
|
||||
}
|
||||
|
||||
/* Composer: form wrapper */
|
||||
.composer-form {
|
||||
@apply relative flex flex-col max-w-[680px] mx-auto rounded-large border shadow-sm transition-colors duration-200;
|
||||
background: var(--app-input-secondary-background);
|
||||
border-color: var(--app-input-border);
|
||||
color: var(--app-input-foreground);
|
||||
}
|
||||
.composer-form:focus-within {
|
||||
/* match existing highlight behavior */
|
||||
border-color: var(--app-input-highlight);
|
||||
box-shadow: 0 1px 2px color-mix(in srgb, var(--app-input-highlight), transparent 80%);
|
||||
}
|
||||
|
||||
/* Composer: input editable area */
|
||||
.composer-input {
|
||||
/* Use plain CSS for font-family inheritance; Tailwind has no `font-inherit` utility */
|
||||
@apply flex-1 self-stretch py-2.5 px-3.5 outline-none overflow-y-auto relative select-text min-h-[1.5em] max-h-[200px] bg-transparent border-0 rounded-none overflow-x-hidden break-words whitespace-pre-wrap;
|
||||
font-family: inherit;
|
||||
font-size: var(--vscode-chat-font-size, 13px);
|
||||
color: var(--app-input-foreground);
|
||||
}
|
||||
.composer-input:empty:before {
|
||||
content: attr(data-placeholder);
|
||||
color: var(--app-input-placeholder-foreground);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(100% - 28px);
|
||||
}
|
||||
.composer-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
.composer-input:disabled,
|
||||
.composer-input[contenteditable="false"] {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Composer: actions row (more compact) */
|
||||
.composer-actions {
|
||||
@apply flex items-center gap-1 min-w-0 z-[1];
|
||||
padding: 5px; /* Claude: padding: 5px */
|
||||
color: var(--app-secondary-foreground);
|
||||
border-top: 0.5px solid var(--app-input-border);
|
||||
}
|
||||
|
||||
/* Text button (icon + label), compact like Claude `.s` */
|
||||
.btn-text-compact {
|
||||
@apply inline-flex items-center gap-1 px-1 py-0.5 rounded-[2px] cursor-pointer appearance-none bg-transparent border-0 min-w-0 shrink text-[0.85em] transition-colors duration-150;
|
||||
color: var(--app-secondary-foreground);
|
||||
}
|
||||
.btn-text-compact--primary {
|
||||
color: var(--app-primary-foreground);
|
||||
}
|
||||
.btn-text-compact:hover {
|
||||
background-color: var(--app-ghost-button-hover-background);
|
||||
}
|
||||
.btn-text-compact:active:not(:disabled) {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.btn-text-compact > svg {
|
||||
height: 1em; /* match font size */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-text-compact > span {
|
||||
display: inline-block;
|
||||
min-width: 0;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 300px) {
|
||||
.btn-text-compact > svg { display: none; }
|
||||
}
|
||||
|
||||
/* Icon-only button, compact square (26x26) */
|
||||
.btn-icon-compact {
|
||||
@apply inline-flex items-center justify-center w-[26px] h-[26px] p-0 rounded-small bg-transparent border border-transparent cursor-pointer shrink-0 transition-all duration-150;
|
||||
color: var(--app-secondary-foreground);
|
||||
}
|
||||
.btn-icon-compact:hover {
|
||||
background-color: var(--app-ghost-button-hover-background);
|
||||
}
|
||||
.btn-icon-compact > svg {
|
||||
@apply w-4 h-4;
|
||||
}
|
||||
/* Active/primary state for icon button (e.g., Thinking on) */
|
||||
.btn-icon-compact--active {
|
||||
background-color: var(--app-qwen-clay-button-orange);
|
||||
color: var(--app-qwen-ivory);
|
||||
}
|
||||
.btn-icon-compact--active > svg {
|
||||
stroke: var(--app-qwen-ivory);
|
||||
fill: var(--app-qwen-ivory);
|
||||
}
|
||||
|
||||
/* Optional: overlay background layer matching Claude `.si` */
|
||||
.composer-overlay {
|
||||
@apply absolute inset-0 rounded-large z-0;
|
||||
background: var(--app-input-background);
|
||||
}
|
||||
|
||||
/* Optional: send button variant */
|
||||
.btn-send-compact {
|
||||
@apply btn-icon-compact ml-auto hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed;
|
||||
background-color: var(--app-qwen-clay-button-orange);
|
||||
color: var(--app-qwen-ivory);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user