chore(vscode-ide-companion): rm comment about claude

This commit is contained in:
yiliang114
2025-12-08 13:04:06 +08:00
parent e8b4ee111c
commit 96cd685b1b
16 changed files with 21 additions and 63 deletions

View File

@@ -5,7 +5,7 @@
*/ */
/** /**
* Loading messages from Claude Code CLI * Loading messages from Qwen Code CLI
* Source: packages/cli/src/ui/hooks/usePhraseCycler.ts * Source: packages/cli/src/ui/hooks/usePhraseCycler.ts
*/ */
export const WITTY_LOADING_PHRASES = [ export const WITTY_LOADING_PHRASES = [

View File

@@ -283,7 +283,7 @@ export class WebViewProvider {
data: { timestamp: Date.now(), reason: 'user_cancelled' }, data: { timestamp: Date.now(), reason: 'user_cancelled' },
}); });
// Synthesize a failed tool_call_update to match Claude/CLI UX // Synthesize a failed tool_call_update to match CLI UX
try { try {
const toolCallId = const toolCallId =
(request.toolCall as { toolCallId?: string } | undefined) (request.toolCall as { toolCallId?: string } | undefined)

View File

@@ -16,9 +16,6 @@ interface PermissionDrawerProps {
onClose?: () => void; onClose?: () => void;
} }
/**
* Permission drawer component - Claude Code style bottom sheet
*/
export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({ export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
isOpen, isOpen,
options, options,
@@ -131,7 +128,7 @@ export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({
} }
} }
// Escape to cancel permission and close (align with CLI/Claude behavior) // Escape to cancel permission and close (align with CLI behavior)
if (e.key === 'Escape') { if (e.key === 'Escape') {
e.preventDefault(); e.preventDefault();
const rejectOptionId = const rejectOptionId =

View File

@@ -16,10 +16,6 @@ interface CompletionMenuProps {
selectedIndex?: number; selectedIndex?: number;
} }
/**
* Claude Code-like anchored dropdown rendered above the input field.
* Keyboard: Up/Down to move, Enter to select, Esc to close.
*/
export const CompletionMenu: React.FC<CompletionMenuProps> = ({ export const CompletionMenu: React.FC<CompletionMenuProps> = ({
items, items,
onSelect, onSelect,

View File

@@ -113,7 +113,6 @@ export const InputForm: React.FC<InputFormProps> = ({
onShowCommandMenu, onShowCommandMenu,
onAttachContext, onAttachContext,
completionIsOpen, completionIsOpen,
// Claude-style completion dropdown (optional)
completionItems, completionItems,
onCompletionSelect, onCompletionSelect,
onCompletionClose, onCompletionClose,
@@ -139,7 +138,7 @@ export const InputForm: React.FC<InputFormProps> = ({
onKeyDown(e); onKeyDown(e);
}; };
// Selection label like "6 lines selected" (Claude-style); no line numbers // Selection label like "6 lines selected"; no line numbers
const selectedLinesCount = activeSelection const selectedLinesCount = activeSelection
? Math.max(1, activeSelection.endLine - activeSelection.startLine + 1) ? Math.max(1, activeSelection.endLine - activeSelection.startLine + 1)
: 0; : 0;
@@ -161,15 +160,12 @@ export const InputForm: React.FC<InputFormProps> = ({
{/* Banner area */} {/* Banner area */}
<div className="input-banner" /> <div className="input-banner" />
{/* Input wrapper (Claude-style anchor container) */}
<div className="relative flex z-[1]"> <div className="relative flex z-[1]">
{/* Claude-style anchored dropdown */}
{completionIsOpen && {completionIsOpen &&
completionItems && completionItems &&
completionItems.length > 0 && completionItems.length > 0 &&
onCompletionSelect && onCompletionSelect &&
onCompletionClose && ( onCompletionClose && (
// Render dropdown above the input, matching Claude Code
<CompletionMenu <CompletionMenu
items={completionItems} items={completionItems}
onSelect={onCompletionSelect} onSelect={onCompletionSelect}
@@ -200,7 +196,6 @@ export const InputForm: React.FC<InputFormProps> = ({
/> />
</div> </div>
{/* Actions row (compact, Claude-style) */}
<div className="composer-actions"> <div className="composer-actions">
{/* Edit mode button */} {/* Edit mode button */}
<button <button

View File

@@ -18,15 +18,8 @@ interface AssistantMessageProps {
} }
/** /**
* AssistantMessage component - renders AI responses with Claude Code styling * AssistantMessage component - renders AI responses with Qwen Code styling
* Supports different states: default, success, error, warning, loading * Supports different states: default, success, error, warning, loading
*
* Claude Code DOM structure:
* <div class="K o"><span class="i"><p>...</p></span></div>
*
* Styles:
* .o - outer container with padding-left: 30px and ::before for bullet
* .i - inner span wrapper
*/ */
export const AssistantMessage: React.FC<AssistantMessageProps> = ({ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
content, content,

View File

@@ -74,7 +74,7 @@ export const ExecuteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
status={containerStatus} status={containerStatus}
toolCallId={toolCallId} toolCallId={toolCallId}
> >
{/* Branch connector summary (Claude-like) */} {/* Branch connector summary */}
<div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1"> <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1">
<span className="flex-shrink-0 relative top-[-0.1em]"></span> <span className="flex-shrink-0 relative top-[-0.1em]"></span>
<span className="flex-shrink-0 w-full">{commandText}</span> <span className="flex-shrink-0 w-full">{commandText}</span>
@@ -121,7 +121,7 @@ export const ExecuteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
status={containerStatus} status={containerStatus}
toolCallId={toolCallId} toolCallId={toolCallId}
> >
{/* Branch connector summary (Claude-like) */} {/* Branch connector summary */}
<div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1"> <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1">
<span className="flex-shrink-0 relative top-[-0.1em]"></span> <span className="flex-shrink-0 relative top-[-0.1em]"></span>
<span className="flex-shrink-0 w-full">{commandText}</span> <span className="flex-shrink-0 w-full">{commandText}</span>

View File

@@ -83,7 +83,7 @@ export const ExecuteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
toolCallId={toolCallId} toolCallId={toolCallId}
className="execute-default-toolcall" className="execute-default-toolcall"
> >
{/* Branch connector summary (Claude-like) */} {/* Branch connector summary */}
<div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1"> <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1">
<span className="flex-shrink-0 relative top-[-0.1em]"></span> <span className="flex-shrink-0 relative top-[-0.1em]"></span>
<span className="flex-shrink-0 w-full">{commandText}</span> <span className="flex-shrink-0 w-full">{commandText}</span>
@@ -126,7 +126,7 @@ export const ExecuteToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
status={containerStatus} status={containerStatus}
toolCallId={toolCallId} toolCallId={toolCallId}
> >
{/* Branch connector summary (Claude-like) */} {/* Branch connector summary */}
<div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1"> <div className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1">
<span className="flex-shrink-0 relative top-[-0.1em]"></span> <span className="flex-shrink-0 relative top-[-0.1em]"></span>
<span className="flex-shrink-0 w-full">{commandText}</span> <span className="flex-shrink-0 w-full">{commandText}</span>

View File

@@ -71,7 +71,7 @@ export const ReadToolCall: React.FC<BaseToolCallProps> = ({ toolCall }) => {
[vscode], [vscode],
); );
// Auto-open diff (Claude-style) when a read call returns diff content. // Auto-open diff when a read call returns diff content.
// Only trigger once per toolCallId so we don't spam as in-progress updates stream in. // Only trigger once per toolCallId so we don't spam as in-progress updates stream in.
useEffect(() => { useEffect(() => {
if (diffs.length > 0) { if (diffs.length > 0) {

View File

@@ -4,7 +4,6 @@
* SPDX-License-Identifier: Apache-2.0 * SPDX-License-Identifier: Apache-2.0
* *
* Shared layout components for tool call UI * Shared layout components for tool call UI
* Uses Claude Code style: bullet point + label + content
*/ */
import type React from 'react'; import type React from 'react';
@@ -12,7 +11,7 @@ import { FileLink } from '../../../layout/FileLink.js';
import './LayoutComponents.css'; import './LayoutComponents.css';
/** /**
* Props for ToolCallContainer - Claude Code style layout * Props for ToolCallContainer
*/ */
export interface ToolCallContainerProps { export interface ToolCallContainerProps {
/** Operation label (e.g., "Read", "Write", "Search") */ /** Operation label (e.g., "Read", "Write", "Search") */
@@ -29,13 +28,6 @@ export interface ToolCallContainerProps {
className?: string; className?: string;
} }
// 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 and timeline
*/
export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({ export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
label, label,
status = 'success', status = 'success',
@@ -65,9 +57,6 @@ export const ToolCallContainer: React.FC<ToolCallContainerProps> = ({
</div> </div>
); );
/**
* Props for ToolCallCard wrapper (legacy - for complex layouts)
*/
interface ToolCallCardProps { interface ToolCallCardProps {
icon: string; icon: string;
children: React.ReactNode; children: React.ReactNode;
@@ -85,9 +74,6 @@ export const ToolCallCard: React.FC<ToolCallCardProps> = ({
</div> </div>
); );
/**
* Props for ToolCallRow
*/
interface ToolCallRowProps { interface ToolCallRowProps {
label: string; label: string;
children: React.ReactNode; children: React.ReactNode;
@@ -153,9 +139,6 @@ export const StatusIndicator: React.FC<StatusIndicatorProps> = ({
</div> </div>
); );
/**
* Props for CodeBlock
*/
interface CodeBlockProps { interface CodeBlockProps {
children: string; children: string;
} }

View File

@@ -544,7 +544,7 @@ export const useWebViewMessages = ({
} }
handlers.handleToolCallUpdate(toolCallData); handlers.handleToolCallUpdate(toolCallData);
// Split assistant stream at tool boundaries similar to Claude/GPT rhythm // Split assistant stream
const status = (toolCallData.status || '').toString(); const status = (toolCallData.status || '').toString();
const isStart = toolCallData.type === 'tool_call'; const isStart = toolCallData.type === 'tool_call';
const isFinalUpdate = const isFinalUpdate =

View File

@@ -2,8 +2,6 @@
* @license * @license
* Copyright 2025 Qwen Team * Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0 * SPDX-License-Identifier: Apache-2.0
*
* Styles inspired by Claude Code's UI design, adapted for Qwen
*/ */
/* =========================== /* ===========================
@@ -67,17 +65,17 @@
/* Border Transparency */ /* Border Transparency */
--app-transparent-inner-border: rgba(255, 255, 255, 0.1); --app-transparent-inner-border: rgba(255, 255, 255, 0.1);
/* Header (from Claude Code) */ /* Header */
--app-header-background: var(--vscode-sideBar-background); --app-header-background: var(--vscode-sideBar-background);
/* List Styles (from Claude Code) */ /* List Styles*/
--app-list-padding: 0px; --app-list-padding: 0px;
--app-list-item-padding: 4px 8px; --app-list-item-padding: 4px 8px;
--app-list-border-color: transparent; --app-list-border-color: transparent;
--app-list-border-radius: 4px; --app-list-border-radius: 4px;
--app-list-gap: 2px; --app-list-gap: 2px;
/* Menu Colors (from Claude Code) */ /* Menu Colors*/
--app-menu-background: var(--vscode-menu-background); --app-menu-background: var(--vscode-menu-background);
--app-menu-border: var(--vscode-menu-border); --app-menu-border: var(--vscode-menu-border);
--app-menu-foreground: var(--vscode-menu-foreground); --app-menu-foreground: var(--vscode-menu-foreground);

View File

@@ -2,9 +2,6 @@
* @license * @license
* Copyright 2025 Qwen Team * Copyright 2025 Qwen Team
* SPDX-License-Identifier: Apache-2.0 * SPDX-License-Identifier: Apache-2.0
*
* Styles extracted from Claude Code extension (v2.0.43)
* Path: /Users/jinjing/Downloads/Anthropic.claude-code-2.0.43/extension/webview/index.css
*/ */
/* Import component styles */ /* Import component styles */
@@ -13,7 +10,7 @@
@import '../components/messages/MarkdownRenderer/MarkdownRenderer.css'; @import '../components/messages/MarkdownRenderer/MarkdownRenderer.css';
/* =========================== /* ===========================
CSS Variables (from Claude Code root styles) CSS Variables
=========================== */ =========================== */
:root { :root {
/* Colors */ /* Colors */

View File

@@ -36,7 +36,7 @@
@apply w-4 h-4; @apply w-4 h-4;
} }
/* Composer: root container anchored to bottom (Claude-style) */ /* Composer: root container anchored to bottom*/
.composer-root { .composer-root {
@apply absolute bottom-4 left-4 right-4 flex flex-col z-20; @apply absolute bottom-4 left-4 right-4 flex flex-col z-20;
} }
@@ -89,12 +89,12 @@
/* Composer: actions row (more compact) */ /* Composer: actions row (more compact) */
.composer-actions { .composer-actions {
@apply flex items-center gap-1 min-w-0 z-[1]; @apply flex items-center gap-1 min-w-0 z-[1];
padding: 5px; /* Claude: padding: 5px */ padding: 5px;
color: var(--app-secondary-foreground); color: var(--app-secondary-foreground);
border-top: 0.5px solid var(--app-input-border); border-top: 0.5px solid var(--app-input-border);
} }
/* Text button (icon + label), compact like Claude `.s` */ /* Text button (icon + label) */
.btn-text-compact { .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; @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); color: var(--app-secondary-foreground);
@@ -151,7 +151,6 @@
fill: var(--app-qwen-ivory); fill: var(--app-qwen-ivory);
} }
/* Optional: overlay background layer matching Claude `.si` */
.composer-overlay { .composer-overlay {
@apply absolute inset-0 rounded-large z-0; @apply absolute inset-0 rounded-large z-0;
background: var(--app-input-background); background: var(--app-input-background);

View File

@@ -10,7 +10,7 @@ export interface SessionGroup {
} }
/** /**
* Group sessions by date (matching Claude Code) * Group sessions by date
* *
* @param sessions - Array of session objects * @param sessions - Array of session objects
* @returns Array of grouped sessions * @returns Array of grouped sessions

View File

@@ -5,7 +5,7 @@
*/ */
/** /**
* Time ago formatter (matching Claude Code) * Time ago formatter
* *
* @param timestamp - ISO timestamp string * @param timestamp - ISO timestamp string
* @returns Formatted time string * @returns Formatted time string