fix: chat UX and message handling (#206)

* fix: redirect first message

* feat: update createNewChat optimistic

* fix: reset message when navigation to /

Author: ibelick

app/components/chat/chat.tsx

@@ -99,6 +99,7 @@ export function Chat() {
   )
 
   const hasSentFirstMessageRef = useRef(false)
+  const prevChatIdRef = useRef<string | null>(chatId)
   const isAuthenticated = useMemo(() => !!user?.id, [user?.id])
 
   const { draftValue, clearDraft } = useChatDraft(chatId)
@@ -137,6 +138,16 @@ export function Chat() {
     onError: handleError,
   })
 
+  // Reset messages when navigating from a chat to home (not on every render)
+  if (
+    prevChatIdRef.current !== null &&
+    chatId === null &&
+    messages.length > 0
+  ) {
+    setMessages([])
+  }
+  prevChatIdRef.current = chatId
+
   const { checkLimitsAndNotify, ensureChatExists } = useChatUtils({
     isAuthenticated,
     chatId,
@@ -199,9 +210,6 @@ export function Chat() {
         return
       }
 
-      // refresh the chat history (in sidebar+command/drawer)
-      bumpChat(currentChatId)
-
       if (input.length > MESSAGE_MAX_LENGTH) {
         toast({
           title: `The message you submitted was too long, please submit something shorter. (Max ${MESSAGE_MAX_LENGTH} characters)`,
@@ -243,6 +251,12 @@ export function Chat() {
       cacheAndAddMessage(optimisticMessage)
       clearDraft()
       hasSentFirstMessageRef.current = true
+
+      // Bump existing chats to top (non-blocking, after submit)
+      // If messages.length === 0, this is a new chat that was just created
+      if (messages.length > 0) {
+        bumpChat(currentChatId)
+      }
     } catch (submitError) {
       setMessages((prev) => prev.filter((msg) => msg.id !== optimisticId))
       cleanupOptimisticAttachments(optimisticMessage.experimental_attachments)
@@ -270,6 +284,8 @@ export function Chat() {
     handleSubmit,
     cacheAndAddMessage,
     clearDraft,
+    messages.length,
+    bumpChat,
   ])
 
   const handleSuggestion = useCallback(
@@ -422,8 +438,17 @@ export function Chat() {
     ]
   )
 
-  // Check for redirect condition - removed hydrated dependency
-  if (chatId && !isChatsLoading && !currentChat) {
+  // Handle redirect for invalid chatId - only redirect if we're certain the chat doesn't exist
+  // and we're not in a transient state during chat creation
+  if (
+    chatId &&
+    !isChatsLoading &&
+    !currentChat &&
+    !isSubmitting &&
+    status === "ready" &&
+    messages.length === 0 &&
+    !hasSentFirstMessageRef.current // Don't redirect if we've already sent a message in this session
+  ) {
     return redirect("/")
   }
 

app/components/layout/button-new-chat.tsx

@@ -6,7 +6,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { NotePencil } from "@phosphor-icons/react/dist/ssr"
+import { NotePencilIcon } from "@phosphor-icons/react/dist/ssr"
 import Link from "next/link"
 import { usePathname, useRouter } from "next/navigation"
 
@@ -29,7 +29,7 @@ export function ButtonNewChat() {
           prefetch
           aria-label="New Chat"
         >
-          <NotePencil size={24} />
+          <NotePencilIcon size={24} />
         </Link>
       </TooltipTrigger>
       <TooltipContent>New Chat ⌘⇧U</TooltipContent>

app/components/layout/sidebar/app-sidebar.tsx

@@ -30,7 +30,10 @@ export function AppSidebar() {
   const params = useParams<{ chatId: string }>()
   const currentChatId = params.chatId
 
-  const groupedChats = useMemo(() => groupChatsByDate(chats, ""), [chats])
+  const groupedChats = useMemo(() => {
+    const result = groupChatsByDate(chats, "")
+    return result
+  }, [chats])
   const hasChats = chats.length > 0
   const router = useRouter()
 

lib/chat-store/chats/provider.tsx

@@ -145,7 +145,7 @@ export function ChatsProvider({
       public: true,
       updated_at: new Date().toISOString(),
     }
-    setChats((prev) => [...prev, optimisticChat])
+    setChats((prev) => [optimisticChat, ...prev])
 
     try {
       const newChat = await createNewChatFromDb(
@@ -155,14 +155,12 @@ export function ChatsProvider({
         isAuthenticated,
         agentId
       )
-      setChats((prev) =>
-        prev
-          .map((c) => (c.id === optimisticId ? newChat : c))
-          .sort(
-            (a, b) =>
-              +new Date(b.created_at || "") - +new Date(a.created_at || "")
-          )
-      )
+
+      setChats((prev) => [
+        newChat,
+        ...prev.filter((c) => c.id !== optimisticId),
+      ])
+
       return newChat
     } catch {
       setChats(prev)