URL based frontend state: React router

frontend/package.json

@@ -24,6 +24,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.22.3",
     "tailwind-merge": "^2.0.0",
     "uuid": "^9.0.1"
   },

frontend/src/App.tsx

@@ -1,58 +1,37 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
 import { Chat } from "./components/Chat";
 import { ChatList } from "./components/ChatList";
 import { Layout } from "./components/Layout";
 import { NewChat } from "./components/NewChat";
-import { Chat as ChatType, useChatList } from "./hooks/useChatList";
+import { useChatList } from "./hooks/useChatList";
 import { useSchemas } from "./hooks/useSchemas";
 import { useStreamState } from "./hooks/useStreamState";
-import { useConfigList } from "./hooks/useConfigList";
+import {
+  useConfigList,
+  Config as ConfigInterface,
+} from "./hooks/useConfigList";
 import { Config } from "./components/Config";
 import { MessageWithFiles } from "./utils/formTypes.ts";
-import { TYPE_NAME } from "./constants.ts";
+import { useNavigate } from "react-router-dom";
+import { useThreadAndAssistant } from "./hooks/useThreadAndAssistant.ts";
 
 function App() {
+  const navigate = useNavigate();
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const { configSchema, configDefaults } = useSchemas();
-  const { chats, currentChat, createChat, enterChat } = useChatList();
-  const { configs, currentConfig, saveConfig, enterConfig } = useConfigList();
+  const { chats, createChat } = useChatList();
+  const { configs, saveConfig } = useConfigList();
   const { startStream, stopStream, stream } = useStreamState();
-  const [isDocumentRetrievalActive, setIsDocumentRetrievalActive] =
-    useState(false);
+  const { configSchema, configDefaults } = useSchemas();
 
-  useEffect(() => {
-    let configurable = null;
-    if (currentConfig) {
-      configurable = currentConfig?.config?.configurable;
-    }
-    if (currentChat && configs) {
-      const conf = configs.find(
-        (c) => c.assistant_id === currentChat.assistant_id,
-      );
-      configurable = conf?.config?.configurable;
-    }
-    const agent_type = configurable?.["type"] as TYPE_NAME | null;
-    if (agent_type === null || agent_type === "chatbot") {
-      setIsDocumentRetrievalActive(false);
-      return;
-    }
-    if (agent_type === "chat_retrieval") {
-      setIsDocumentRetrievalActive(true);
-      return;
-    }
-    const tools =
-      (configurable?.["type==agent/tools"] as { name: string }[]) ?? [];
-    setIsDocumentRetrievalActive(tools.some((t) => t.name === "Retrieval"));
-  }, [currentConfig, currentChat, configs]);
+  const { currentChat, assistantConfig, isLoading } = useThreadAndAssistant();
 
   const startTurn = useCallback(
-    async (message?: MessageWithFiles, chat: ChatType | null = currentChat) => {
-      if (!chat) return;
-      const config = configs?.find(
-        (c) => c.assistant_id === chat.assistant_id,
-      )?.config;
-      if (!config) return;
+    async (
+      message: MessageWithFiles | null,
+      thread_id: string,
+      assistant_id: string,
+    ) => {
       const files = message?.files || [];
       if (files.length > 0) {
         const formData = files.reduce((formData, file) => {
@@ -61,7 +40,7 @@ function App() {
         }, new FormData());
         formData.append(
           "config",
-          JSON.stringify({ configurable: { thread_id: chat.thread_id } }),
+          JSON.stringify({ configurable: { thread_id } }),
         );
         await fetch(`/ingest`, {
           method: "POST",
@@ -79,93 +58,58 @@ function App() {
               },
             ]
           : null,
-        chat.assistant_id,
-        chat.thread_id,
+        assistant_id,
+        thread_id,
       );
     },
-    [currentChat, startStream, configs],
+    [startStream],
   );
 
   const startChat = useCallback(
-    async (message: MessageWithFiles) => {
-      if (!currentConfig) return;
-      const chat = await createChat(
-        message.message,
-        currentConfig.assistant_id,
-      );
-      return startTurn(message, chat);
+    async (config: ConfigInterface, message: MessageWithFiles) => {
+      const chat = await createChat(message.message, config.assistant_id);
+      navigate(`/thread/${chat.thread_id}`);
+      return startTurn(message, chat.thread_id, chat.assistant_id);
     },
-    [createChat, startTurn, currentConfig],
+    [createChat, navigate, startTurn],
   );
 
   const selectChat = useCallback(
     async (id: string | null) => {
       if (currentChat) {
         stopStream?.(true);
       }
-      enterChat(id);
       if (!id) {
-        enterConfig(configs?.[0]?.assistant_id ?? null);
+        const firstAssistant = configs?.[0]?.assistant_id ?? null;
+        navigate(firstAssistant ? `/assistant/${firstAssistant}` : "/");
         window.scrollTo({ top: 0 });
+      } else {
+        navigate(`/thread/${id}`);
       }
       if (sidebarOpen) {
         setSidebarOpen(false);
       }
     },
-    [enterChat, stopStream, sidebarOpen, currentChat, enterConfig, configs],
+    [currentChat, sidebarOpen, stopStream, configs, navigate],
   );
 
   const selectConfig = useCallback(
     (id: string | null) => {
-      enterConfig(id);
-      enterChat(null);
+      navigate(id ? `/assistant/${id}` : "/");
     },
-    [enterConfig, enterChat],
-  );
-
-  const content = currentChat ? (
-    <Chat
-      chat={currentChat}
-      startStream={startTurn}
-      stopStream={stopStream}
-      stream={stream}
-      isDocumentRetrievalActive={isDocumentRetrievalActive}
-    />
-  ) : currentConfig ? (
-    <NewChat
-      startChat={startChat}
-      configSchema={configSchema}
-      configDefaults={configDefaults}
-      configs={configs}
-      currentConfig={currentConfig}
-      saveConfig={saveConfig}
-      enterConfig={selectConfig}
-      isDocumentRetrievalActive={isDocumentRetrievalActive}
-    />
-  ) : (
-    <Config
-      className="mb-6"
-      config={currentConfig}
-      configSchema={configSchema}
-      configDefaults={configDefaults}
-      saveConfig={saveConfig}
-    />
-  );
-
-  const currentChatConfig = configs?.find(
-    (c) => c.assistant_id === currentChat?.assistant_id,
+    [navigate],
   );
 
   return (
     <Layout
       subtitle={
-        currentChatConfig ? (
+        assistantConfig ? (
           <span className="inline-flex gap-1 items-center">
-            {currentChatConfig.name}
+            {assistantConfig.name}
             <InformationCircleIcon
               className="h-5 w-5 cursor-pointer text-indigo-600"
               onClick={() => {
-                selectConfig(currentChatConfig.assistant_id);
+                selectConfig(assistantConfig.assistant_id);
               }}
             />
           </span>
@@ -175,20 +119,36 @@ function App() {
       setSidebarOpen={setSidebarOpen}
       sidebar={
         <ChatList
-          chats={useMemo(() => {
-            if (configs === null || chats === null) return null;
-            return chats.filter((c) =>
-              configs.some((config) => config.assistant_id === c.assistant_id),
-            );
-          }, [chats, configs])}
-          currentChat={currentChat}
+          chats={chats}
           enterChat={selectChat}
-          currentConfig={currentConfig}
           enterConfig={selectConfig}
         />
       }
     >
-      {configSchema ? content : null}
+      {currentChat && assistantConfig && (
+        <Chat startStream={startTurn} stopStream={stopStream} stream={stream} />
+      )}
+      {!currentChat && assistantConfig && (
+        <NewChat
+          startChat={startChat}
+          configSchema={configSchema}
+          configDefaults={configDefaults}
+          configs={configs}
+          saveConfig={saveConfig}
+          enterConfig={selectConfig}
+        />
+      )}
+      {!currentChat && !assistantConfig && !isLoading && (
+        <Config
+          className="mb-6"
+          config={null}
+          configSchema={configSchema}
+          configDefaults={configDefaults}
+          saveConfig={saveConfig}
+          enterConfig={selectConfig}
+        />
+      )}
+      {isLoading && <div>Loading...</div>}
     </Layout>
   );
 }

frontend/src/api/assistants.ts

@@ -0,0 +1,16 @@
+import { Config } from "../hooks/useConfigList";
+
+export async function getAssistant(
+  assistantId: string,
+): Promise<Config | null> {
+  try {
+    const response = await fetch(`/assistants/${assistantId}`);
+    if (!response.ok) {
+      return null;
+    }
+    return (await response.json()) as Config;
+  } catch (error) {
+    console.error("Failed to fetch assistant:", error);
+    return null;
+  }
+}

frontend/src/api/threads.ts

@@ -0,0 +1,14 @@
+import { Chat } from "../hooks/useChatList.ts";
+
+export async function getThread(threadId: string): Promise<Chat | null> {
+  try {
+    const response = await fetch(`/threads/${threadId}`);
+    if (!response.ok) {
+      return null;
+    }
+    return (await response.json()) as Chat;
+  } catch (error) {
+    console.error("Failed to fetch assistant:", error);
+    return null;
+  }
+}

frontend/src/components/Chat.tsx

@@ -1,16 +1,19 @@
 import { useEffect, useRef } from "react";
-import { Chat as ChatType } from "../hooks/useChatList";
 import { StreamStateProps } from "../hooks/useStreamState";
 import { useChatMessages } from "../hooks/useChatMessages";
 import TypingBox from "./TypingBox";
 import { Message } from "./Message";
 import { ArrowDownCircleIcon } from "@heroicons/react/24/outline";
 import { MessageWithFiles } from "../utils/formTypes.ts";
+import { useParams } from "react-router-dom";
+import { useThreadAndAssistant } from "../hooks/useThreadAndAssistant.ts";
 
 interface ChatProps extends Pick<StreamStateProps, "stream" | "stopStream"> {
-  chat: ChatType;
-  startStream: (message?: MessageWithFiles) => Promise<void>;
-  isDocumentRetrievalActive: boolean;
+  startStream: (
+    message: MessageWithFiles | null,
+    thread_id: string,
+    assistant_id: string,
+  ) => Promise<void>;
 }
 
 function usePrevious<T>(value: T): T | undefined {
@@ -22,11 +25,15 @@ function usePrevious<T>(value: T): T | undefined {
 }
 
 export function Chat(props: ChatProps) {
+  const { chatId } = useParams();
   const { messages, resumeable } = useChatMessages(
-    props.chat.thread_id,
+    chatId ?? null,
     props.stream,
     props.stopStream,
   );
+
+  const { currentChat, assistantConfig, isLoading } = useThreadAndAssistant();
+
   const prevMessages = usePrevious(messages);
   useEffect(() => {
     scrollTo({
@@ -38,12 +45,16 @@ export function Chat(props: ChatProps) {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messages]);
+
+  if (isLoading) return <div>Loading...</div>;
+  if (!currentChat || !assistantConfig) return <div>No data.</div>;
+
   return (
     <div className="flex-1 flex flex-col items-stretch pb-[76px] pt-2">
       {messages?.map((msg, i) => (
         <Message
           {...msg}
-          key={i}
+          key={`message-${i}`}
           runId={
             i === messages.length - 1 && props.stream?.status === "done"
               ? props.stream?.run_id
@@ -64,20 +75,33 @@ export function Chat(props: ChatProps) {
       {resumeable && props.stream?.status !== "inflight" && (
         <div
           className="flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-800 ring-1 ring-inset ring-yellow-600/20 cursor-pointer"
-          onClick={() => props.startStream()}
+          onClick={() =>
+            props.startStream(
+              null,
+              currentChat.thread_id,
+              currentChat.assistant_id,
+            )
+          }
         >
           <ArrowDownCircleIcon className="h-5 w-5 mr-1" />
           Click to continue.
         </div>
       )}
       <div className="fixed left-0 lg:left-72 bottom-0 right-0 p-4">
         <TypingBox
-          onSubmit={props.startStream}
+          onSubmit={(msg) =>
+            props.startStream(
+              msg,
+              currentChat.thread_id,
+              currentChat.assistant_id,
+            )
+          }
           onInterrupt={
             props.stream?.status === "inflight" ? props.stopStream : undefined
           }
           inflight={props.stream?.status === "inflight"}
-          isDocumentRetrievalActive={props.isDocumentRetrievalActive}
+          currentConfig={assistantConfig}
+          currentChat={currentChat}
         />
       </div>
     </div>