mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-19 09:33:53 +00:00
chore(vscode-ide-companion): rm comment about claude
This commit is contained in:
@@ -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 = [
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -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 =
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 =
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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 */
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user