From 2e449f4d459c9936b1c9e9f41af4b43bd606cc85 Mon Sep 17 00:00:00 2001 From: yiliang114 <1204183885@qq.com> Date: Tue, 2 Dec 2025 13:41:24 +0800 Subject: [PATCH] wip(vscode-ide-companion): timelint --- .../vscode-ide-companion/src/webview/App.tsx | 2 +- .../webview/components/InProgressToolCall.tsx | 9 +--- .../components/messages/AssistantMessage.css | 29 ----------- .../components/messages/AssistantMessage.tsx | 3 +- .../components/messages/SimpleTimeline.css | 50 +++++++++++++++++++ .../toolcalls/shared/LayoutComponents.css | 41 ++++++++------- .../toolcalls/shared/LayoutComponents.tsx | 3 +- .../toolcalls/shared/SimpleTimeline.css | 50 +++++++++++++++++++ .../src/webview/styles/ClaudeCodeStyles.css | 2 + .../src/webview/styles/SelectorTest.css | 35 +++++++++++++ .../vscode-ide-companion/tailwind.config.js | 6 +++ 11 files changed, 169 insertions(+), 61 deletions(-) create mode 100644 packages/vscode-ide-companion/src/webview/components/messages/SimpleTimeline.css create mode 100644 packages/vscode-ide-companion/src/webview/components/toolcalls/shared/SimpleTimeline.css create mode 100644 packages/vscode-ide-companion/src/webview/styles/SelectorTest.css diff --git a/packages/vscode-ide-companion/src/webview/App.tsx b/packages/vscode-ide-companion/src/webview/App.tsx index 557b510e..258b0d06 100644 --- a/packages/vscode-ide-companion/src/webview/App.tsx +++ b/packages/vscode-ide-companion/src/webview/App.tsx @@ -477,7 +477,7 @@ export const App: React.FC = () => {
{!hasContent ? ( diff --git a/packages/vscode-ide-companion/src/webview/components/InProgressToolCall.tsx b/packages/vscode-ide-companion/src/webview/components/InProgressToolCall.tsx index d300c099..da25fc02 100644 --- a/packages/vscode-ide-companion/src/webview/components/InProgressToolCall.tsx +++ b/packages/vscode-ide-companion/src/webview/components/InProgressToolCall.tsx @@ -155,14 +155,7 @@ export const InProgressToolCall: React.FC = ({ return (
-
- {/* Pulsing bullet dot (Claude-style), vertically centered with header row */} - - ● - +
{kindLabel} diff --git a/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.css b/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.css index 9f485804..db9901c7 100644 --- a/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.css +++ b/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.css @@ -58,32 +58,3 @@ 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; -} diff --git a/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.tsx b/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.tsx index 479e2ab8..cb6fe5e1 100644 --- a/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.tsx +++ b/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.tsx @@ -7,6 +7,7 @@ import type React from 'react'; import { MessageContent } from '../MessageContent.js'; import './AssistantMessage.css'; +import './SimpleTimeline.css'; interface AssistantMessageProps { content: string; @@ -55,7 +56,7 @@ export const AssistantMessage: React.FC = ({ return (
= ({ > {/* Timeline connector line using ::after pseudo-element */}
-
+
{label} diff --git a/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/SimpleTimeline.css b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/SimpleTimeline.css new file mode 100644 index 00000000..62b3ef3d --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/SimpleTimeline.css @@ -0,0 +1,50 @@ +/** + * @license + * Copyright 2025 Qwen Team + * SPDX-License-Identifier: Apache-2.0 + * + * Simplified timeline styles for tool calls + */ + +/* Basic timeline container */ +.simple-toolcall-container { + position: relative; + padding-left: 30px; + padding-top: 8px; + padding-bottom: 8px; +} + +/* Timeline connector - simple version */ +.simple-toolcall-container::after { + content: ''; + position: absolute; + left: 12px; + top: 0; + bottom: 0; + width: 1px; + background-color: var(--app-primary-border-color); + z-index: 1; +} + +/* First item connector starts lower */ +.simple-toolcall-container:first-child::after { + top: 24px; +} + +/* Last item connector ends higher */ +.simple-toolcall-container:last-child::after { + height: calc(100% - 24px); + top: 0; + bottom: auto; +} + +/* Bullet point */ +.simple-toolcall-container::before { + content: '\25cf'; + position: absolute; + left: 8px; + padding-top: 2px; + font-size: 10px; + color: var(--app-secondary-foreground); + z-index: 2; +} diff --git a/packages/vscode-ide-companion/src/webview/styles/ClaudeCodeStyles.css b/packages/vscode-ide-companion/src/webview/styles/ClaudeCodeStyles.css index 21876a1f..752e3172 100644 --- a/packages/vscode-ide-companion/src/webview/styles/ClaudeCodeStyles.css +++ b/packages/vscode-ide-companion/src/webview/styles/ClaudeCodeStyles.css @@ -12,6 +12,8 @@ @import '../components/PlanDisplay.css'; @import '../components/toolcalls/shared/DiffDisplay.css'; @import '../components/messages/AssistantMessage.css'; +@import '../components/messages/SimpleTimeline.css'; +@import '../components/toolcalls/shared/SimpleTimeline.css'; /* =========================== diff --git a/packages/vscode-ide-companion/src/webview/styles/SelectorTest.css b/packages/vscode-ide-companion/src/webview/styles/SelectorTest.css new file mode 100644 index 00000000..844af6b0 --- /dev/null +++ b/packages/vscode-ide-companion/src/webview/styles/SelectorTest.css @@ -0,0 +1,35 @@ +/** + * @license + * Copyright 2025 Qwen Team + * SPDX-License-Identifier: Apache-2.0 + * + * CSS Selector Compatibility Test + */ + +/* Test 1: Basic first-child and last-child selectors */ +.test-container:first-child::after { + content: "FIRST"; + color: red; +} + +.test-container:last-child::after { + content: "LAST"; + color: blue; +} + +.test-container:first-child:last-child::after { + content: "ONLY"; + color: green; +} + +/* Test 2: Simple sibling selectors */ +.test-container + .test-container::before { + content: "SIBLING"; + color: orange; +} + +/* Test 3: Not selector */ +.test-container:not(.special)::after { + content: "NOT SPECIAL"; + color: purple; +} \ No newline at end of file diff --git a/packages/vscode-ide-companion/tailwind.config.js b/packages/vscode-ide-companion/tailwind.config.js index 055eb369..a6994918 100644 --- a/packages/vscode-ide-companion/tailwind.config.js +++ b/packages/vscode-ide-companion/tailwind.config.js @@ -29,9 +29,15 @@ export default { '0%': { opacity: '0', transform: 'translateY(4px)' }, '100%': { opacity: '1', transform: 'translateY(0)' }, }, + // Pulse animation for in-progress tool calls + 'pulse-slow': { + '0%, 100%': { opacity: '1' }, + '50%': { opacity: '0.5' }, + }, }, animation: { 'completion-menu-enter': 'completion-menu-enter 150ms ease-out both', + 'pulse-slow': 'pulse-slow 1.5s ease-in-out infinite', }, colors: { qwen: {