Appearance tweaks, fix new message bug

web/src/App.tsx

@@ -21,6 +21,7 @@ import {
   type ChatDetail,
   type ChatSummary,
   type CompletionRequestMessage,
+  type Message,
   type SearchDetail,
   type SearchSummary,
 } from "@/lib/api";
@@ -113,6 +114,7 @@ export default function App() {
   const [isLoadingCollections, setIsLoadingCollections] = useState(false);
   const [isLoadingSelection, setIsLoadingSelection] = useState(false);
   const [isSending, setIsSending] = useState(false);
+  const [pendingChatState, setPendingChatState] = useState<{ chatId: string | null; messages: Message[] } | null>(null);
   const [composer, setComposer] = useState("");
   const [provider, setProvider] = useState<Provider>("openai");
   const [model, setModel] = useState(PROVIDER_DEFAULT_MODELS.openai);
@@ -132,6 +134,7 @@ export default function App() {
     setSelectedChat(null);
     setSelectedSearch(null);
     setDraftKind(null);
+    setPendingChatState(null);
     setComposer("");
     setError(null);
   };
@@ -251,6 +254,18 @@ export default function App() {
   }, []);
 
   const messages = selectedChat?.messages ?? [];
+  const isSearchMode = draftKind ? draftKind === "search" : selectedItem?.kind === "search";
+  const isSearchRunning = isSending && isSearchMode;
+  const displayMessages = useMemo(() => {
+    if (!pendingChatState) return messages;
+    if (pendingChatState.chatId) {
+      if (selectedItem?.kind === "chat" && selectedItem.id === pendingChatState.chatId) {
+        return pendingChatState.messages;
+      }
+      return messages;
+    }
+    return isSearchMode ? messages : pendingChatState.messages;
+  }, [isSearchMode, messages, pendingChatState, selectedItem]);
 
   const selectedChatSummary = useMemo(() => {
     if (!selectedItem || selectedItem.kind !== "chat") return null;
@@ -276,9 +291,6 @@ export default function App() {
     return "New search";
   }, [draftKind, selectedChat, selectedChatSummary, selectedItem, selectedSearch, selectedSearchSummary]);
 
-  const isSearchMode = draftKind ? draftKind === "search" : selectedItem?.kind === "search";
-  const isSearchRunning = isSending && isSearchMode;
-
   const handleCreateChat = () => {
     setError(null);
     setContextMenu(null);
@@ -347,6 +359,27 @@ export default function App() {
   }, [contextMenu]);
 
   const handleSendChat = async (content: string) => {
+    const optimisticUserMessage: Message = {
+      id: `temp-user-${Date.now()}`,
+      createdAt: new Date().toISOString(),
+      role: "user",
+      content,
+      name: null,
+    };
+
+    const optimisticAssistantMessage: Message = {
+      id: `temp-assistant-${Date.now()}`,
+      createdAt: new Date().toISOString(),
+      role: "assistant",
+      content: "",
+      name: null,
+    };
+
+    setPendingChatState({
+      chatId: selectedItem?.kind === "chat" ? selectedItem.id : null,
+      messages: (selectedChat?.messages ?? []).concat(optimisticUserMessage, optimisticAssistantMessage),
+    });
+
     let chatId = draftKind === "chat" ? null : selectedItem?.kind === "chat" ? selectedItem.id : null;
 
     if (!chatId) {
@@ -354,6 +387,7 @@ export default function App() {
       chatId = chat.id;
       setDraftKind(null);
       setSelectedItem({ kind: "chat", id: chatId });
+      setPendingChatState((current) => (current ? { ...current, chatId } : current));
       setSelectedChat({
         id: chat.id,
         title: chat.title,
@@ -373,30 +407,6 @@ export default function App() {
       baseChat = await getChat(chatId);
     }
 
-    const optimisticUserMessage = {
-      id: `temp-user-${Date.now()}`,
-      createdAt: new Date().toISOString(),
-      role: "user" as const,
-      content,
-      name: null,
-    };
-
-    const optimisticAssistantMessage = {
-      id: `temp-assistant-${Date.now()}`,
-      createdAt: new Date().toISOString(),
-      role: "assistant" as const,
-      content: "",
-      name: null,
-    };
-
-    setSelectedChat((current) => {
-      if (!current || current.id !== chatId) return current;
-      return {
-        ...current,
-        messages: [...current.messages, optimisticUserMessage, optimisticAssistantMessage],
-      };
-    });
-
     const requestMessages: CompletionRequestMessage[] = [
       ...baseChat.messages.map((message) => ({
         role: message.role,
@@ -417,6 +427,7 @@ export default function App() {
     });
 
     await Promise.all([refreshCollections({ kind: "chat", id: chatId }), refreshChat(chatId)]);
+    setPendingChatState(null);
   };
 
   const handleSendSearch = async (query: string) => {
@@ -569,6 +580,10 @@ export default function App() {
         setError(message);
       }
 
+      if (!isSearchMode) {
+        setPendingChatState(null);
+      }
+
       if (selectedItem?.kind === "chat") {
         await refreshChat(selectedItem.id);
       }
@@ -700,7 +715,7 @@ export default function App() {
 
           <div className="flex-1 overflow-y-auto px-3 py-6 md:px-10">
             {!isSearchMode ? (
-              <ChatMessagesPanel messages={messages} isLoading={isLoadingSelection} isSending={isSending} />
+              <ChatMessagesPanel messages={displayMessages} isLoading={isLoadingSelection} isSending={isSending} />
             ) : (
               <SearchResultsPanel search={selectedSearch} isLoading={isLoadingSelection} isRunning={isSearchRunning} />
             )}