refactor(webview): Refactoring Input Form and Timeline Components

2025-12-20 16:57:46 +00:00 · 2025-12-02 01:29:33 +08:00
parent ed0d5f67db
commit 90fc53a9df
11 changed files with 380 additions and 463 deletions
--- a/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.css
+++ b/packages/vscode-ide-companion/src/webview/components/toolcalls/shared/LayoutComponents.css
@@ -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%;
+}