From c612017a20436b0414eca0f5fbd3044fd238baf4 Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Mon, 28 Apr 2025 22:59:23 -0700
Subject: [PATCH] Fix open in chat nav (#41)

---
 src/pages/app-details.tsx | 10 +++++++---
 src/pages/chat.tsx        | 21 +++++++++++++++++----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/pages/app-details.tsx b/src/pages/app-details.tsx
index 50ea570..bd4bb0a 100644
--- a/src/pages/app-details.tsx
+++ b/src/pages/app-details.tsx
@@ -253,9 +253,13 @@ export default function AppDetailsPage() {
         </div>
         <div className="mt-4 flex flex-col gap-2">
           <Button
-            onClick={() =>
-              appId && navigate({ to: "/chat", search: { id: appId } })
-            }
+            onClick={() => {
+              if (!appId) {
+                console.error("No app id found");
+                return;
+              }
+              navigate({ to: "/chat" });
+            }}
             className="cursor-pointer w-full py-5 flex justify-center items-center gap-2"
             size="lg"
           >
diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx
index c4ee185..4470ef0 100644
--- a/src/pages/chat.tsx
+++ b/src/pages/chat.tsx
@@ -7,15 +7,28 @@ import {
 } from "react-resizable-panels";
 import { ChatPanel } from "../components/ChatPanel";
 import { PreviewPanel } from "../components/preview_panel/PreviewPanel";
-import { useSearch } from "@tanstack/react-router";
+import { useNavigate, useSearch } from "@tanstack/react-router";
 import { cn } from "@/lib/utils";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { isPreviewOpenAtom } from "@/atoms/viewAtoms";
+import { useChats } from "@/hooks/useChats";
+import { selectedAppIdAtom } from "@/atoms/appAtoms";
 
 export default function ChatPage() {
-  const { id } = useSearch({ from: "/chat" });
+  let { id: chatId } = useSearch({ from: "/chat" });
+  const navigate = useNavigate();
   const [isPreviewOpen, setIsPreviewOpen] = useAtom(isPreviewOpenAtom);
   const [isResizing, setIsResizing] = useState(false);
+  const selectedAppId = useAtomValue(selectedAppIdAtom);
+  const { chats, loading } = useChats(selectedAppId);
+
+  useEffect(() => {
+    if (!chatId && chats.length && !loading) {
+      // Not a real navigation, just a redirect, when the user navigates to /chat
+      // without a chatId, we redirect to the first chat
+      navigate({ to: "/chat", search: { id: chats[0]?.id }, replace: true });
+    }
+  }, [chatId, chats, loading, navigate]);
 
   useEffect(() => {
     if (isPreviewOpen) {
@@ -31,7 +44,7 @@ export default function ChatPage() {
       <Panel id="chat-panel" minSize={30}>
         <div className="h-full w-full">
           <ChatPanel
-            chatId={id}
+            chatId={chatId}
             isPreviewOpen={isPreviewOpen}
             onTogglePreview={() => {
               setIsPreviewOpen(!isPreviewOpen);