feat: improve new chat button UX with loading state

- Add isCreatingChat state to track new chat creation progress
- Update New Chat button to show "Creating..." text and disabled state during creation
- Pass loading state through component hierarchy (App -> Chatbox -> ChatMessagesDisplay)
- Prevent multiple simultaneous new chat creation attempts

This provides better user feedback when creating new conversations and prevents
accidental duplicate clicks during the async creation process.

Author: heimoshuiyu

src/components/ChatMessagesDisplay.tsx

@@ -55,6 +55,7 @@ interface ChatMessagesDisplayProps {
   onCompletion: () => Promise<void>;
   onRegenerate: () => Promise<void>;
   onClearSystem: () => void;
+  isCreatingChat: boolean;
 }
 
 export function ChatMessagesDisplay({
@@ -66,6 +67,7 @@ export function ChatMessagesDisplay({
   onCompletion,
   onRegenerate,
   onClearSystem,
+  isCreatingChat,
 }: ChatMessagesDisplayProps) {
   return (
     <ChatMessageList>
@@ -153,10 +155,10 @@ export function ChatMessagesDisplay({
             variant="secondary"
             size="sm"
             className="m-2"
-            disabled={showGenerating}
+            disabled={showGenerating || isCreatingChat}
             onClick={onNewChat}
           >
-            <Tr>New Chat</Tr>
+            {isCreatingChat ? "Creating..." : <Tr>New Chat</Tr>}
           </Button>
         )}
         {chatStore.develop_mode && chatStore.history.length > 0 && (

src/pages/App.tsx

@@ -61,6 +61,7 @@ interface AppContextType {
   ) => void;
   handleNewChatStore: () => Promise<void>;
   handleNewChatStoreWithOldOne: (chatStore: ChatStore) => Promise<void>;
+  isCreatingChat: boolean;
 }
 
 interface AppChatStoreContextType {
@@ -164,13 +165,20 @@ export function App() {
   );
 
   const handleNewChatStoreWithOldOne = async (chatStore: ChatStore) => {
-    const newKey = await (await db).add(STORAGE_NAME, newChatStore(chatStore));
-    setSelectedChatIndex(newKey as number);
-    setAllChatStoreIndexes(await (await db).getAllKeys(STORAGE_NAME));
-    toast({
-      title: "New chat created",
-      description: `Current API Endpoint: ${chatStore.apiEndpoint}`,
-    });
+    setIsCreatingChat(true);
+    try {
+      const newKey = await (
+        await db
+      ).add(STORAGE_NAME, newChatStore(chatStore));
+      setSelectedChatIndex(newKey as number);
+      setAllChatStoreIndexes(await (await db).getAllKeys(STORAGE_NAME));
+      toast({
+        title: "New chat created",
+        description: `Current API Endpoint: ${chatStore.apiEndpoint}`,
+      });
+    } finally {
+      setIsCreatingChat(false);
+    }
   };
   const handleNewChatStore = async () => {
     let currentChatStore = await getChatStoreByIndex(selectedChatIndex);
@@ -210,6 +218,7 @@ export function App() {
   };
 
   const [showImportDialog, setShowImportDialog] = useState(false);
+  const [isCreatingChat, setIsCreatingChat] = useState(false);
   // if there are any params in URL, show the alert dialog to import configure
   useEffect(() => {
     const run = async () => {
@@ -421,15 +430,14 @@ export function App() {
         setCallingTools,
         handleNewChatStore,
         handleNewChatStoreWithOldOne,
+        isCreatingChat,
       }}
     >
       <SidebarProvider defaultOpen={true}>
         <Sidebar>
           <SidebarHeader>
-            <Button onClick={handleNewChatStore}>
-              <span>
-                <Tr>New Chat</Tr>
-              </span>
+            <Button onClick={handleNewChatStore} disabled={isCreatingChat}>
+              <span>{isCreatingChat ? "Creating..." : <Tr>New Chat</Tr>}</span>
             </Button>
           </SidebarHeader>
           <SidebarContent>

src/pages/Chatbox.tsx

@@ -18,6 +18,7 @@ export default function ChatBOX() {
     handleNewChatStore,
     callingTools,
     setCallingTools,
+    isCreatingChat,
   } = useContext(AppContext);
   const { langCode, setLangCode } = useContext(langCodeContext);
   const { chatStore, setChatStore } = useContext(AppChatStoreContext);
@@ -169,6 +170,7 @@ export default function ChatBOX() {
           onCompletion={handleComplete}
           onRegenerate={handleRegenerate}
           onClearSystem={handleClearSystem}
+          isCreatingChat={isCreatingChat}
         />
         <div id="message-end" ref={messagesEndRef as any}></div>
       </div>