From 3534dc7fca63c8629aa974d6dd6cb7750e09afa1 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Tue, 12 Aug 2025 19:29:32 -0700
Subject: [PATCH] hide the ChatBox instead of unmount it to prevent lose chat
 history.

---
 src/App.tsx                |  7 +++---
 src/components/ChatBox.tsx | 51 ++++++++++++++++++++++++++------------
 src/util/chatUtil.ts       |  4 +--
 3 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2567e69..3dfe826 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -61,15 +61,14 @@ function App() {
 
       {/* Main Display Area containing MainContent, ChatBox, and Settings */}
       <div className="main-display-area">
-        {showSettings ? (
-          <SettingsPanel onClose={() => setShowSettings(false)} />
-        ) : (
+        {showSettings && <SettingsPanel onClose={() => setShowSettings(false)} />}
+        {!showSettings && (
           <>
             {showInstrumentSelection && <InstrumentSelection />}
             <MainContent />
-            {showChatBox && <ChatBox />}
           </>
         )}
+        <ChatBox isVisible={showChatBox && !showSettings} />
       </div>
 
       {/* Track Control */}
diff --git a/src/components/ChatBox.tsx b/src/components/ChatBox.tsx
index fd389a9..9734855 100644
--- a/src/components/ChatBox.tsx
+++ b/src/components/ChatBox.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, memo } from 'react';
+import React, { useState, useRef, useEffect, memo, useCallback } from 'react';
 import { FaPlus, FaBan } from 'react-icons/fa';
 import { UserMessage, AssistantMessage } from './chat';
 import { AgentCore } from '../agent/core/AgentCore';
@@ -44,7 +44,11 @@ const createLLMProvider = (): LLMProvider => {
   }
 };
 
-const ChatBox: React.FC = () => {
+interface ChatBoxProps {
+  isVisible: boolean;
+}
+
+const ChatBox: React.FC<ChatBoxProps> = ({ isVisible }) => {
   const [inputValue, setInputValue] = useState('');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   
@@ -62,6 +66,33 @@ const ChatBox: React.FC = () => {
   // Track if this is the first message (for system prompt logging)
   const [isFirstMessage, setIsFirstMessage] = useState(true);
 
+  const generateMessageId = (): string => {
+    return `msg_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
+  };
+
+  const clearChatUI = useCallback(async () => {
+    // Clear UI state
+    setMessages([]);
+    
+    // Reset first message flag so system prompt will be logged again
+    setIsFirstMessage(true);
+    
+    // Auto-show welcome message after clearing (like on app startup)
+    try {
+      const result = await processUserMessage('/welcome');
+      if (result.pseudoAssistantResponse) {
+        const pseudoId = generateMessageId();
+        setMessages(prev => [...prev, {
+          id: pseudoId,
+          role: 'assistant',
+          content: result.pseudoAssistantResponse!,
+        }]);
+      }
+    } catch {
+      // ignore errors, just don't show welcome if it fails
+    }
+  }, []);
+
   // Initialize AgentCore with configured provider and register clear UI callback
   useEffect(() => {
     const initializeProvider = async () => {
@@ -103,11 +134,7 @@ const ChatBox: React.FC = () => {
         // ignore
       }
     })();
-  }, []);
-
-  const generateMessageId = (): string => {
-    return `msg_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
-  };
+  }, [clearChatUI]);
 
   const handleAbort = () => {
     if (abortController) {
@@ -128,14 +155,6 @@ const ChatBox: React.FC = () => {
     }
   };
 
-  const clearChatUI = () => {
-    // Clear UI state
-    setMessages([]);
-    
-    // Reset first message flag so system prompt will be logged again
-    setIsFirstMessage(true);
-  };
-
   const handleClearCommand = () => {
     const { setStatus } = useProjectStore.getState();
     clearChatHistoryAndUI(setStatus);
@@ -519,7 +538,7 @@ const ChatBox: React.FC = () => {
   }, [isProcessing, isExecutingTools]);
 
   return (
-    <div className="chatbox">
+    <div className="chatbox" style={{ display: isVisible ? 'flex' : 'none' }}>
       <div className="chatbox-header">
         <h3>K.G.Studio Musician Assistant</h3>
         <div className="chatbox-actions">
diff --git a/src/util/chatUtil.ts b/src/util/chatUtil.ts
index 3e8380e..1553417 100644
--- a/src/util/chatUtil.ts
+++ b/src/util/chatUtil.ts
@@ -25,13 +25,13 @@ export const clearChatHistoryWithStatus = (setStatus?: (message: string) => void
 };
 
 // Global callback for clearing UI state
-let globalClearChatUI: (() => void) | null = null;
+let globalClearChatUI: (() => void | Promise<void>) | null = null;
 
 /**
  * Register a callback to clear chat UI state
  * This allows external components to clear the ChatBox UI
  */
-export const registerClearChatUICallback = (callback: () => void) => {
+export const registerClearChatUICallback = (callback: () => void | Promise<void>) => {
   globalClearChatUI = callback;
 };