feat(ui): 实现输入框历史消息导航功能并添加轮播组件

- 在 InputPrompt 组件中添加 messages 属性以支持历史消息导航
- 实现历史消息的存储、索引管理及键盘上下箭头导航功能
- 支持从传入的 messages 中加载用户消息作为历史记录
- 在历史消息浏览模式下输入非方向键时退出浏览
- 完善历史消息导航的边界处理及草稿恢复机制
- 添加 InputPrompt 组件相关单元测试覆盖历史消息导航逻辑
- 新增通用 Carousel 轮播组件及其相关子组件和按钮控件
- 在 package.json 中添加 embla-carousel-react 依赖支持轮播实现

Author: hqwlkj

package-lock.json

@@ -101,6 +101,7 @@
     "@webview-rpc/host": "^1.0.17",
     "@webview-rpc/react-query": "^1.0.17",
     "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.42.2",
     "highlight.js": "^11.11.1",
     "lucide-react": "^1.21.0",

packages/vscode-ide-companion/package.json

@@ -51,6 +51,7 @@ export default function App() {
         tokenTelemetry={state.tokenTelemetry}
         activeEditor={state.activeEditor}
         editingMessage={state.editingMessage}
+        messages={state.messages}
         onSendPrompt={actions.sendPrompt}
         onInterrupt={actions.interrupt}
         onSelectSkills={actions.setSelectedSkills}

packages/vscode-ide-companion/src/webview/App.tsx

@@ -106,12 +106,14 @@ vi.mock("lucide-react", () => ({
   StopCircle: vi.fn(() => <span data-testid="stop-icon" />),
   ChevronDown: vi.fn(() => <span data-testid="chevron" />),
   Send: vi.fn(() => <span data-testid="send-icon" />),
+  Reply: vi.fn(() => <span data-testid="reply-icon" />),
   FileCodeIcon: vi.fn(() => <span data-testid="file-icon" />),
   GraduationCap: vi.fn(() => <span data-testid="graduation-icon" />),
   X: vi.fn(() => <span data-testid="x-icon" />),
   AlertCircle: vi.fn(() => <span data-testid="alert-icon" />),
   CheckCircle: vi.fn(() => <span data-testid="check-icon" />),
   Loader2: vi.fn(() => <span data-testid="loader-icon" />),
+  Loader2Icon: vi.fn(() => <span data-testid="loader-icon" />),
   Settings: vi.fn(() => <span data-testid="settings-icon" />),
   Info: vi.fn(() => <span data-testid="info-icon" />),
 }));
@@ -146,6 +148,7 @@ const defaultProps: InputPromptProps = {
   },
   activeEditor: null,
   editingMessage: null,
+  messages: [],
   onSendPrompt: mockOnSendPrompt,
   onInterrupt: mockOnInterrupt,
   onSelectSkills: mockOnSelectSkills,
@@ -208,6 +211,274 @@ describe("InputPrompt", () => {
     });
   });
 
+  describe("History navigation", () => {
+    it("adds sent messages to history", async () => {
+      render(<InputPrompt {...defaultProps} />);
+      const textarea = screen.getByRole("textbox");
+
+      fireEvent.change(textarea, { target: { value: "First message" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+      expect(mockOnSendPrompt).toHaveBeenCalledWith("First message", [], [], undefined);
+
+      fireEvent.change(textarea, { target: { value: "Second message" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+      expect(mockOnSendPrompt).toHaveBeenCalledWith("Second message", [], [], undefined);
+    });
+
+    it("navigates to previous history with ArrowUp when at start", async () => {
+      render(<InputPrompt {...defaultProps} />);
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      // Add two messages to history
+      fireEvent.change(textarea, { target: { value: "First message" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+      fireEvent.change(textarea, { target: { value: "Second message" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+
+      // Clear and navigate with ArrowUp
+      fireEvent.change(textarea, { target: { value: "" } });
+      // Simulate cursor at start (selectionStart === 0)
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+
+      // Should show "Second message" (most recent)
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("Second message");
+      });
+    });
+
+    it("navigates through history with multiple ArrowUp presses", async () => {
+      render(<InputPrompt {...defaultProps} />);
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      // Add three messages to history
+      fireEvent.change(textarea, { target: { value: "First" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+      fireEvent.change(textarea, { target: { value: "Second" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+      fireEvent.change(textarea, { target: { value: "Third" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+
+      // Navigate with ArrowUp twice
+      fireEvent.change(textarea, { target: { value: "" } });
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("Third");
+      });
+
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("Second");
+      });
+    });
+
+    it("navigates to next history with ArrowDown", async () => {
+      render(<InputPrompt {...defaultProps} />);
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      // Add messages to history
+      fireEvent.change(textarea, { target: { value: "First" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+      fireEvent.change(textarea, { target: { value: "Second" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+      fireEvent.change(textarea, { target: { value: "Third" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+
+      // Navigate to history - shows most recent
+      fireEvent.change(textarea, { target: { value: "" } });
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("Third");
+      });
+
+      // ArrowUp again - goes to older
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("Second");
+      });
+
+      // ArrowDown - goes back to newer
+      fireEvent.keyDown(textarea, { key: "ArrowDown" });
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("Third");
+      });
+
+      // ArrowDown again - exits and restores draft (empty)
+      fireEvent.keyDown(textarea, { key: "ArrowDown" });
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("");
+      });
+    });
+
+    it("restores draft when navigating past the end of history", async () => {
+      render(<InputPrompt {...defaultProps} />);
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      // Add messages to history
+      fireEvent.change(textarea, { target: { value: "First" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+      fireEvent.change(textarea, { target: { value: "Second" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+
+      // Navigate to history (entering with empty value preserves no draft)
+      fireEvent.change(textarea, { target: { value: "" } });
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("Second");
+      });
+
+      // Navigate back with ArrowDown (goes forward to end of history)
+      fireEvent.keyDown(textarea, { key: "ArrowDown" });
+      await waitFor(() => {
+        // Reached end of history, restores empty draft
+        expect((textarea as HTMLTextAreaElement).value).toBe("");
+      });
+    });
+
+    it("exits history browsing when typing", async () => {
+      render(<InputPrompt {...defaultProps} />);
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      // Add message to history
+      fireEvent.change(textarea, { target: { value: "History message" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+
+      // Navigate to history
+      fireEvent.change(textarea, { target: { value: "" } });
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("History message");
+      });
+
+      // Type something - should exit history browsing
+      fireEvent.change(textarea, { target: { value: "New input" } });
+
+      // Next ArrowUp should start from beginning, not from history position
+      fireEvent.change(textarea, { target: { value: "" } });
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("History message");
+      });
+    });
+
+    it("exits history browsing when pressing non-arrow keys", async () => {
+      render(<InputPrompt {...defaultProps} />);
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      // Add message to history
+      fireEvent.change(textarea, { target: { value: "History message" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+
+      // Navigate to history
+      fireEvent.change(textarea, { target: { value: "" } });
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("History message");
+      });
+
+      // Press Escape - should exit history browsing but not change value
+      fireEvent.keyDown(textarea, { key: "Escape" });
+      expect((textarea as HTMLTextAreaElement).value).toBe("History message");
+    });
+
+    it("does not navigate history when no history exists", () => {
+      render(<InputPrompt {...defaultProps} />);
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      fireEvent.change(textarea, { target: { value: "" } });
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+
+      // Value should remain empty
+      expect((textarea as HTMLTextAreaElement).value).toBe("");
+    });
+
+    it("does not navigate history when caret is not at start/end", async () => {
+      render(<InputPrompt {...defaultProps} />);
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      // Add message to history
+      fireEvent.change(textarea, { target: { value: "History message" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+
+      // Type content with caret in the middle
+      fireEvent.change(textarea, { target: { value: "Hello World" } });
+      // Set cursor to middle (after "Hello")
+      textarea.setSelectionRange(5, 5);
+
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+
+      // Value should remain unchanged since caret is not at start
+      expect((textarea as HTMLTextAreaElement).value).toBe("Hello World");
+    });
+  });
+
+  describe("Loading history from messages", () => {
+    it("loads user messages from messages prop into history", async () => {
+      const messages = [
+        { role: "user", content: "First message from history" },
+        { role: "assistant", content: "Assistant response" },
+        { role: "user", content: "Second message from history" },
+      ];
+      render(<InputPrompt {...defaultProps} messages={messages} />);
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      // Navigate to history
+      fireEvent.change(textarea, { target: { value: "" } });
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("Second message from history");
+      });
+
+      // Navigate to older message
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("First message from history");
+      });
+    });
+
+    it("clears history when messages is empty", async () => {
+      const { rerender } = render(<InputPrompt {...defaultProps} messages={[]} />);
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      // Add a message first
+      fireEvent.change(textarea, { target: { value: "New message" } });
+      fireEvent.keyDown(textarea, { key: "Enter" });
+
+      // Rerender with empty messages
+      rerender(<InputPrompt {...defaultProps} messages={[]} />);
+
+      // Try to navigate history - should not work since history is empty
+      fireEvent.change(textarea, { target: { value: "" } });
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+
+      // Value should remain empty
+      expect((textarea as HTMLTextAreaElement).value).toBe("");
+    });
+
+    it("ignores non-user messages when building history", async () => {
+      const messages = [
+        { role: "user", content: "User message" },
+        { role: "assistant", content: "Should be ignored" },
+        { role: "tool", content: "Should also be ignored" },
+        { role: "system", content: "Ignored" },
+      ];
+      render(<InputPrompt {...defaultProps} messages={messages} />);
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      // Navigate to history
+      fireEvent.change(textarea, { target: { value: "" } });
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+
+      await waitFor(() => {
+        expect((textarea as HTMLTextAreaElement).value).toBe("User message");
+      });
+
+      // Second ArrowUp should stay at the same message (already at oldest)
+      fireEvent.keyDown(textarea, { key: "ArrowUp" });
+      expect((textarea as HTMLTextAreaElement).value).toBe("User message");
+    });
+  });
+
   describe("Loading state", () => {
     it("renders interrupt button when loading", () => {
       render(<InputPrompt {...defaultProps} loading={true} />);