feat(vscode-ide-companion): refactor message components with modular architecture

Refactor UI message rendering by extracting message types into dedicated components. Add ChatHeader component for better session management interface. - Extract message components: UserMessage, AssistantMessage, ThinkingMessage, StreamingMessage, WaitingMessage - Add ChatHeader component with session selector and action buttons - Delete MessageContent.css and consolidate styles into App.scss - Update Tailwind config for component styling - Improve message rendering with proper TypeScript typing
2025-12-22 01:37:50 +00:00 · 2025-11-23 20:52:08 +08:00
parent c4bcd178a4
commit de8ea0678d
17 changed files with 901 additions and 535 deletions
--- a/packages/vscode-ide-companion/src/webview/components/MessageContent.css
+++ b/packages/vscode-ide-companion/src/webview/components/MessageContent.css
@@ -1,61 +0,0 @@
-/**
- * @license
- * Copyright 2025 Qwen Team
- * SPDX-License-Identifier: Apache-2.0
- *
- * MessageContent styles
- */
-
-/* Code block styles */
-.message-code-block {
-  background-color: var(--app-code-background, rgba(0, 0, 0, 0.05));
-  border: 1px solid var(--app-primary-border-color);
-  border-radius: var(--corner-radius-small, 4px);
-  padding: 12px;
-  margin: 8px 0;
-  overflow-x: auto;
-  font-family: var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.message-code-block code {
-  background: none;
-  padding: 0;
-  font-family: inherit;
-  color: var(--app-primary-foreground);
-}
-
-/* Inline code styles */
-.message-inline-code {
-  background-color: var(--app-code-background, rgba(0, 0, 0, 0.05));
-  border: 1px solid var(--app-primary-border-color);
-  border-radius: 3px;
-  padding: 2px 6px;
-  font-family: var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace);
-  font-size: 0.9em;
-  color: var(--app-primary-foreground);
-  white-space: nowrap;
-}
-
-/* File path link styles */
-.message-file-path {
-  background: none;
-  border: none;
-  padding: 0;
-  font-family: var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace);
-  font-size: 0.95em;
-  color: var(--app-link-foreground, #007ACC);
-  text-decoration: underline;
-  cursor: pointer;
-  transition: color 0.15s;
-}
-
-.message-file-path:hover {
-  color: var(--app-link-active-foreground, #005A9E);
-  text-decoration: underline;
-}
-
-.message-file-path:active {
-  color: var(--app-link-active-foreground, #005A9E);
-}
--- a/packages/vscode-ide-companion/src/webview/components/MessageContent.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/MessageContent.tsx
@@ -7,7 +7,6 @@
 */

 import type React from 'react';
-import './MessageContent.css';

 interface MessageContentProps {
  content: string;
@@ -19,6 +18,9 @@ interface MessageContentProps {
 */
 const FILE_PATH_REGEX =
  /([a-zA-Z]:)?([/\\][\w\-. ]+)+\.(tsx?|jsx?|css|scss|json|md|py|java|go|rs|c|cpp|h|hpp|sh|yaml|yml|toml|xml|html|vue|svelte)/gi;
+// Match file paths with optional line numbers like: path/file.ts#7-14 or path/file.ts#7
+const FILE_PATH_WITH_LINES_REGEX =
+  /([a-zA-Z]:)?([/\\][\w\-. ]+)+\.(tsx?|jsx?|css|scss|json|md|py|java|go|rs|c|cpp|h|hpp|sh|yaml|yml|toml|xml|html|vue|svelte)#(\d+)(?:-(\d+))?/gi;
 const CODE_BLOCK_REGEX = /```(\w+)?\n([\s\S]*?)```/g;
 const INLINE_CODE_REGEX = /`([^`]+)`/g;

@@ -51,10 +53,31 @@ export const MessageContent: React.FC<MessageContentProps> = ({
        matchIndex++;
      }

-      // Add code block
+      // Add code block with Tailwind CSS
      parts.push(
-        <pre key={`code-${matchIndex}`} className="message-code-block">
-          <code className={`language-${language || 'plaintext'}`}>{code}</code>
+        <pre
+          key={`code-${matchIndex}`}
+          className="my-2 overflow-x-auto rounded p-3 leading-[1.5]"
+          style={{
+            backgroundColor: 'var(--app-code-background, rgba(0, 0, 0, 0.05))',
+            border: '1px solid var(--app-primary-border-color)',
+            borderRadius: 'var(--corner-radius-small, 4px)',
+            fontFamily:
+              "var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace)",
+            fontSize: '13px',
+          }}
+        >
+          <code
+            className={`language-${language || 'plaintext'}`}
+            style={{
+              background: 'none',
+              padding: 0,
+              fontFamily: 'inherit',
+              color: 'var(--app-primary-foreground)',
+            }}
+          >
+            {code}
+          </code>
        </pre>,
      );
      matchIndex++;
@@ -107,9 +130,19 @@ export const MessageContent: React.FC<MessageContentProps> = ({
        matchIndex++;
      }

-      // Add inline code
+      // Add inline code with Tailwind CSS
      parts.push(
-        <code key={`inline-${matchIndex}`} className="message-inline-code">
+        <code
+          key={`inline-${matchIndex}`}
+          className="rounded px-1.5 py-0.5 whitespace-nowrap text-[0.9em]"
+          style={{
+            backgroundColor: 'var(--app-code-background, rgba(0, 0, 0, 0.05))',
+            border: '1px solid var(--app-primary-border-color)',
+            fontFamily:
+              "var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace)",
+            color: 'var(--app-primary-foreground)',
+          }}
+        >
          {code}
        </code>,
      );
@@ -134,22 +167,99 @@ export const MessageContent: React.FC<MessageContentProps> = ({
    let lastIndex = 0;
    let matchIndex = startIndex;

-    const filePathMatches = Array.from(text.matchAll(FILE_PATH_REGEX));
+    // First, try to match file paths with line numbers
+    const filePathWithLinesMatches = Array.from(
+      text.matchAll(FILE_PATH_WITH_LINES_REGEX),
+    );
+    const processedRanges: Array<{ start: number; end: number }> = [];

-    filePathMatches.forEach((match) => {
+    filePathWithLinesMatches.forEach((match) => {
      const fullMatch = match[0];
      const startIdx = match.index!;
+      const filePath = fullMatch.split('#')[0]; // Get path without line numbers
+      const startLine = match[4]; // Capture group 4 is the start line
+      const endLine = match[5]; // Capture group 5 is the end line (optional)
+
+      processedRanges.push({
+        start: startIdx,
+        end: startIdx + fullMatch.length,
+      });

      // Add text before file path
      if (startIdx > lastIndex) {
        parts.push(text.slice(lastIndex, startIdx));
      }

-      // Add file path link
+      // Display text with line numbers
+      const displayText = endLine
+        ? `${filePath}#${startLine}-${endLine}`
+        : `${filePath}#${startLine}`;
+
+      // Add file path link with line numbers
      parts.push(
        <button
          key={`path-${matchIndex}`}
-          className="message-file-path"
+          className="bg-transparent border-0 p-0 underline cursor-pointer transition-colors text-[0.95em]"
+          style={{
+            fontFamily:
+              "var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace)",
+            color: 'var(--app-link-foreground, #007ACC)',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color =
+              'var(--app-link-active-foreground, #005A9E)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--app-link-foreground, #007ACC)';
+          }}
+          onClick={() => onFileClick?.(filePath)}
+          title={`Open ${displayText}`}
+        >
+          {displayText}
+        </button>,
+      );
+
+      matchIndex++;
+      lastIndex = startIdx + fullMatch.length;
+    });
+
+    // Now match regular file paths (without line numbers) that weren't already matched
+    const filePathMatches = Array.from(text.matchAll(FILE_PATH_REGEX));
+
+    filePathMatches.forEach((match) => {
+      const fullMatch = match[0];
+      const startIdx = match.index!;
+
+      // Skip if this range was already processed as a path with line numbers
+      const isProcessed = processedRanges.some(
+        (range) => startIdx >= range.start && startIdx < range.end,
+      );
+      if (isProcessed) {
+        return;
+      }
+
+      // Add text before file path
+      if (startIdx > lastIndex) {
+        parts.push(text.slice(lastIndex, startIdx));
+      }
+
+      // Add file path link with Tailwind CSS
+      parts.push(
+        <button
+          key={`path-${matchIndex}`}
+          className="bg-transparent border-0 p-0 underline cursor-pointer transition-colors text-[0.95em]"
+          style={{
+            fontFamily:
+              "var(--app-monospace-font-family, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace)",
+            color: 'var(--app-link-foreground, #007ACC)',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color =
+              'var(--app-link-active-foreground, #005A9E)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--app-link-foreground, #007ACC)';
+          }}
          onClick={() => onFileClick?.(fullMatch)}
          title={`Open ${fullMatch}`}
        >
--- a/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/AssistantMessage.tsx
@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from '../MessageContent.js';
+
+interface AssistantMessageProps {
+  content: string;
+  timestamp: number;
+  onFileClick?: (path: string) => void;
+}
+
+export const AssistantMessage: React.FC<AssistantMessageProps> = ({
+  content,
+  timestamp: _timestamp,
+  onFileClick,
+}) => (
+  <div className="flex gap-0 items-start text-left py-2 flex-col relative animate-[fadeIn_0.2s_ease-in]">
+    <div
+      className="inline-block my-1 relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
+      style={{
+        border: '1px solid var(--app-input-border)',
+        borderRadius: 'var(--corner-radius-medium)',
+        backgroundColor: 'var(--app-input-background)',
+        padding: '4px 6px',
+        color: 'var(--app-primary-foreground)',
+      }}
+    >
+      <MessageContent content={content} onFileClick={onFileClick} />
+    </div>
+    {/* Timestamp - temporarily hidden */}
+    {/* <div
+        className="text-xs opacity-60"
+        style={{ color: 'var(--app-secondary-foreground)' }}
+      >
+        {new Date(timestamp).toLocaleTimeString()}
+      </div> */}
+  </div>
+);
--- a/packages/vscode-ide-companion/src/webview/components/messages/StreamingMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/StreamingMessage.tsx
@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from '../MessageContent.js';
+
+interface StreamingMessageProps {
+  content: string;
+  onFileClick?: (path: string) => void;
+}
+
+export const StreamingMessage: React.FC<StreamingMessageProps> = ({
+  content,
+  onFileClick,
+}) => (
+  <div className="flex gap-0 items-start text-left py-2 flex-col relative animate-[fadeIn_0.2s_ease-in]">
+    <div
+      className="inline-block my-1 relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
+      style={{
+        border: '1px solid var(--app-input-border)',
+        borderRadius: 'var(--corner-radius-medium)',
+        backgroundColor: 'var(--app-input-background)',
+        padding: '4px 6px',
+        color: 'var(--app-primary-foreground)',
+      }}
+    >
+      <MessageContent content={content} onFileClick={onFileClick} />
+    </div>
+    <div
+      className="absolute right-3 bottom-3 animate-[pulse_1.5s_ease-in-out_infinite]"
+      style={{ color: 'var(--app-primary-foreground)' }}
+    >
+      ●
+    </div>
+  </div>
+);
--- a/packages/vscode-ide-companion/src/webview/components/messages/ThinkingMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/ThinkingMessage.tsx
@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from '../MessageContent.js';
+
+interface ThinkingMessageProps {
+  content: string;
+  timestamp: number;
+  onFileClick?: (path: string) => void;
+}
+
+export const ThinkingMessage: React.FC<ThinkingMessageProps> = ({
+  content,
+  timestamp: _timestamp,
+  onFileClick,
+}) => (
+  <div className="flex gap-0 items-start text-left py-2 flex-col relative opacity-80 italic pl-6 animate-[fadeIn_0.2s_ease-in]">
+    <div
+      className="inline-block my-1 relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
+      style={{
+        backgroundColor:
+          'var(--app-list-hover-background, rgba(100, 100, 255, 0.1))',
+        border: '1px solid rgba(100, 100, 255, 0.3)',
+        borderRadius: 'var(--corner-radius-medium)',
+        padding: 'var(--app-spacing-medium)',
+        color: 'var(--app-primary-foreground)',
+      }}
+    >
+      <span className="inline-flex items-center gap-1 mr-2">
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0s]"></span>
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.2s]"></span>
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.4s]"></span>
+      </span>
+      <MessageContent content={content} onFileClick={onFileClick} />
+    </div>
+    {/* Timestamp - temporarily hidden */}
+    {/* <div
+        className="text-xs opacity-60"
+        style={{ color: 'var(--app-secondary-foreground)' }}
+      >
+        {new Date(timestamp).toLocaleTimeString()}
+      </div> */}
+  </div>
+);
--- a/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx
@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { MessageContent } from '../MessageContent.js';
+
+interface FileContext {
+  fileName: string;
+  filePath: string;
+  startLine?: number;
+  endLine?: number;
+}
+
+interface UserMessageProps {
+  content: string;
+  timestamp: number;
+  onFileClick?: (path: string) => void;
+  fileContext?: FileContext;
+}
+
+export const UserMessage: React.FC<UserMessageProps> = ({
+  content,
+  timestamp: _timestamp,
+  onFileClick,
+  fileContext,
+}) => {
+  // Generate display text for file context
+  const getFileContextDisplay = () => {
+    if (!fileContext) return null;
+    const { fileName, startLine, endLine } = fileContext;
+    if (startLine && endLine) {
+      return startLine === endLine
+        ? `${fileName}#${startLine}`
+        : `${fileName}#${startLine}-${endLine}`;
+    }
+    return fileName;
+  };
+
+  const fileContextDisplay = getFileContextDisplay();
+
+  return (
+    <div className="flex gap-0 items-start text-left py-2 flex-col relative animate-[fadeIn_0.2s_ease-in]">
+      <div
+        className="inline-block my-1 relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
+        style={{
+          border: '1px solid var(--app-input-border)',
+          borderRadius: 'var(--corner-radius-medium)',
+          backgroundColor: 'var(--app-input-background)',
+          padding: '4px 6px',
+          color: 'var(--app-primary-foreground)',
+        }}
+      >
+        <MessageContent content={content} onFileClick={onFileClick} />
+      </div>
+      {/* File context indicator */}
+      {fileContextDisplay && (
+        <div>
+          <div
+            role="button"
+            tabIndex={0}
+            className="mr"
+            onClick={() => fileContext && onFileClick?.(fileContext.filePath)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                fileContext && onFileClick?.(fileContext.filePath);
+              }
+            }}
+            style={{ cursor: 'pointer' }}
+          >
+            <div
+              className="gr"
+              title={fileContextDisplay}
+              style={{
+                fontSize: '12px',
+                color: 'var(--app-secondary-foreground)',
+                opacity: 0.8,
+              }}
+            >
+              {fileContextDisplay}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
--- a/packages/vscode-ide-companion/src/webview/components/messages/WaitingMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/WaitingMessage.tsx
@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+
+interface WaitingMessageProps {
+  loadingMessage: string;
+}
+
+export const WaitingMessage: React.FC<WaitingMessageProps> = ({
+  loadingMessage,
+}) => (
+  <div className="flex gap-0 items-start text-left py-2 flex-col relative opacity-85 animate-[fadeIn_0.2s_ease-in]">
+    <div className="bg-transparent border-0 py-2 flex items-center gap-2">
+      <span className="inline-flex items-center gap-1 mr-0">
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full mr-0 opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0s]"></span>
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full mr-0 opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.2s]"></span>
+        <span className="inline-block w-1.5 h-1.5 bg-[var(--app-secondary-foreground)] rounded-full mr-0 opacity-60 animate-[typingPulse_1.4s_infinite_ease-in-out] [animation-delay:0.4s]"></span>
+      </span>
+      <span
+        className="opacity-70 italic"
+        style={{ color: 'var(--app-secondary-foreground)' }}
+      >
+        {loadingMessage}
+      </span>
+    </div>
+  </div>
+);
--- a/packages/vscode-ide-companion/src/webview/components/messages/index.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/index.tsx
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { UserMessage } from './UserMessage.js';
+export { AssistantMessage } from './AssistantMessage.js';
+export { ThinkingMessage } from './ThinkingMessage.js';
+export { StreamingMessage } from './StreamingMessage.js';
+export { WaitingMessage } from './WaitingMessage.js';
--- a/packages/vscode-ide-companion/src/webview/components/ui/ChatHeader.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/ui/ChatHeader.tsx
@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+
+interface ChatHeaderProps {
+  currentSessionTitle: string;
+  onLoadSessions: () => void;
+  onSaveSession: () => void;
+  onNewSession: () => void;
+}
+
+export const ChatHeader: React.FC<ChatHeaderProps> = ({
+  currentSessionTitle,
+  onLoadSessions,
+  onSaveSession: _onSaveSession,
+  onNewSession,
+}) => (
+  <div
+    className="flex gap-1 select-none py-1.5 px-2.5"
+    style={{
+      borderBottom: '1px solid var(--app-primary-border-color)',
+      backgroundColor: 'var(--app-header-background)',
+    }}
+  >
+    {/* Past Conversations Button */}
+    <button
+      className="flex-none py-1 px-2 bg-transparent border border-transparent rounded cursor-pointer flex items-center justify-center outline-none font-medium transition-colors duration-200 hover:bg-[var(--app-ghost-button-hover-background)] focus:bg-[var(--app-ghost-button-hover-background)]"
+      style={{
+        borderRadius: 'var(--corner-radius-small)',
+        color: 'var(--app-primary-foreground)',
+        fontSize: 'var(--vscode-chat-font-size, 13px)',
+      }}
+      onClick={onLoadSessions}
+      title="Past conversations"
+    >
+      <span className="flex items-center gap-1">
+        <span style={{ fontSize: 'var(--vscode-chat-font-size, 13px)' }}>
+          {currentSessionTitle}
+        </span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          className="w-3.5 h-3.5"
+        >
+          <path
+            fillRule="evenodd"
+            d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </span>
+    </button>
+
+    {/* Spacer */}
+    <div className="flex-1"></div>
+
+    {/* Save Session Button */}
+    {/* <button
+        className="flex-none p-0 bg-transparent border border-transparent rounded cursor-pointer flex items-center justify-center outline-none w-6 h-6 hover:bg-[var(--app-ghost-button-hover-background)] focus:bg-[var(--app-ghost-button-hover-background)]"
+        style={{
+          color: 'var(--app-primary-foreground)',
+        }}
+        onClick={onSaveSession}
+        title="Save Conversation"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          data-slot="icon"
+          className="w-4 h-4"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4.25 2A2.25 2.25 0 0 0 2 4.25v11.5A2.25 2.25 0 0 0 4.25 18h11.5A2.25 2.25 0 0 0 18 15.75V8.25a.75.75 0 0 1 .217-.517l.083-.083a.75.75 0 0 1 1.061 0l2.239 2.239A.75.75 0 0 1 22 10.5v5.25a4.75 4.75 0 0 1-4.75 4.75H4.75A4.75 4.75 0 0 1 0 15.75V4.25A4.75 4.75 0 0 1 4.75 0h5a.75.75 0 0 1 0 1.5h-5ZM9.017 6.5a1.5 1.5 0 0 1 2.072.58l.43.862a1 1 0 0 0 .895.558h3.272a1.5 1.5 0 0 1 1.5 1.5v6.75a1.5 1.5 0 0 1-1.5 1.5h-7.5a1.5 1.5 0 0 1-1.5-1.5v-6.75a1.5 1.5 0 0 1 1.5-1.5h1.25a1 1 0 0 0 .895-.558l.43-.862a1.5 1.5 0 0 1 .511-.732ZM11.78 8.47a.75.75 0 0 0-1.06-1.06L8.75 9.379 7.78 8.41a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06 0l2.5-2.5Z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </button> */}
+
+    {/* New Session Button */}
+    <button
+      className="flex-none p-0 bg-transparent border border-transparent rounded cursor-pointer flex items-center justify-center outline-none w-6 h-6 hover:bg-[var(--app-ghost-button-hover-background)] focus:bg-[var(--app-ghost-button-hover-background)]"
+      style={{
+        color: 'var(--app-primary-foreground)',
+      }}
+      onClick={onNewSession}
+      title="New Session"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+        data-slot="icon"
+        className="w-4 h-4"
+      >
+        <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"></path>
+      </svg>
+    </button>
+  </div>
+);