Update api

Author: nfcampos

backend/app/storage.py

@@ -105,7 +105,7 @@ async def get_thread_state(user_id: str, thread_id: str):
     state = await app.aget_state({"configurable": {"thread_id": thread_id}})
     return {
         "values": state.values,
-        "resumeable": bool(state.next),
+        "next": state.next,
     }
 
 
@@ -124,7 +124,7 @@ async def get_thread_history(user_id: str, thread_id: str):
     return [
         {
             "values": c.values,
-            "resumeable": bool(c.next),
+            "next": c.next,
             "config": c.config,
             "parent": c.parent_config,
         }

frontend/src/components/Chat.tsx

@@ -37,15 +37,15 @@ function usePrevious<T>(value: T): T | undefined {
 }
 
 export function Chat(props: ChatProps) {
-  const { messages: serverMessages, resumeable } = useChatMessages(
+  const { messages: serverMessages, next } = useChatMessages(
     props.chat.thread_id,
     props.stream,
     props.stopStream,
   );
   const { histories } = useHistories(props.chat.thread_id, props.stream);
   const displayHistories = [...(histories ?? [])]
     .reverse()
-    .filter((history) => history.resumeable)
+    .filter((history) => history.next.length)
     .filter(
       (history, i, self) => !deepEquals(history.values, self[i - 1]?.values),
     );
@@ -136,7 +136,7 @@ export function Chat(props: ChatProps) {
             "An error has occurred. Please try again."}
         </div>
       )}
-      {resumeable &&
+      {next.length > 0 &&
         activeDisplayedHistoryIndex === displayHistories.length - 1 &&
         props.stream?.status !== "inflight" && (
           <div

frontend/src/components/Message.tsx

@@ -9,7 +9,7 @@ import { cn } from "../utils/cn";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import {
-  // ArrowUturnLeftIcon,
+  ArrowUturnLeftIcon,
   CheckCircleIcon,
   ChevronDownIcon,
   PencilSquareIcon,
@@ -195,13 +195,15 @@ function initializeFunctionArgsEntries(definition: FunctionDefinition) {
 function initializeToolCallFunctionArgsEntries(
   toolCalls: { function?: FunctionDefinition }[],
 ) {
-  return toolCalls.map((toolCall) => {
-    if (toolCall.function !== undefined) {
-      return initializeFunctionArgsEntries(toolCall.function ?? "{}");
-    } else {
-      return [];
-    }
-  });
+  return toolCalls
+    .map((toolCall) => {
+      if (toolCall.function !== undefined) {
+        return initializeFunctionArgsEntries(toolCall.function ?? "{}");
+      } else {
+        return [];
+      }
+    })
+    .filter((args): args is [string, unknown][] => args !== undefined);
 }
 
 export const Message = memo(function Message(
@@ -211,7 +213,7 @@ export const Message = memo(function Message(
     editMode: boolean;
     setEditMode: (newValue: boolean) => void;
     onUpdate: (newValue: MessageType) => void;
-    // onRewindPressed: () => void;
+    onRewindPressed: () => void;
   },
 ) {
   const { runId, onUpdate, ...messageProps } = props;
@@ -485,11 +487,7 @@ export const Message = memo(function Message(
                   return newMessageData;
                 });
                 setToolCallFunctionArgsEntries((prev) => {
-                  let oldValues: any[] = [];
-                  if (prev) {
-                    oldValues = [...prev];
-                  }
-                  return [...oldValues, ["", ""]];
+                  return [...(prev || []), [["", ""]]];
                 });
               }}
             >
@@ -498,13 +496,13 @@ export const Message = memo(function Message(
             </div>
           )}
         </div>
-        {/* <ArrowUturnLeftIcon
+        <ArrowUturnLeftIcon
           className={cn(
             "w-6 h-6 ml-2 opacity-0 group-hover:opacity-50 transition-opacity cursor-pointer",
             props.editMode ? " invisible pointer-events-none" : "",
           )}
           onMouseUp={props.onRewindPressed}
-        /> */}
+        />
         {props.editMode ? (
           <CheckCircleIcon
             className="w-6 h-6 cursor-pointer ml-2 shrink-0 opacity-0 group-hover:opacity-50 transition-opacity duration-200"

frontend/src/hooks/useChatMessages.ts

@@ -3,12 +3,12 @@ import { Message } from "./useChatList";
 import { StreamState } from "./useStreamState";
 
 async function getState(threadId: string) {
-  const { values, resumeable } = await fetch(`/threads/${threadId}/state`, {
+  const { values, next } = await fetch(`/threads/${threadId}/state`, {
     headers: {
       Accept: "application/json",
     },
   }).then((r) => r.json());
-  return { values, resumeable };
+  return { values, next };
 }
 
 function usePrevious<T>(value: T): T | undefined {
@@ -26,18 +26,18 @@ export function useChatMessages(
 ): {
   messages: Message[] | null;
   setMessages: React.Dispatch<React.SetStateAction<Message[] | null>>;
-  resumeable: boolean;
+  next: string[];
 } {
   const [messages, setMessages] = useState<Message[] | null>(null);
-  const [resumeable, setResumeable] = useState(false);
+  const [next, setNext] = useState<string[]>([]);
   const prevStreamStatus = usePrevious(stream?.status);
 
   useEffect(() => {
     async function fetchMessages() {
       if (threadId) {
-        const { values, resumeable } = await getState(threadId);
+        const { values, next } = await getState(threadId);
         setMessages(values);
-        setResumeable(resumeable);
+        setNext(next);
       }
     }
 
@@ -51,15 +51,15 @@ export function useChatMessages(
   useEffect(() => {
     async function fetchMessages() {
       if (threadId) {
-        const { values, resumeable } = await getState(threadId);
+        const { values, next } = await getState(threadId);
         setMessages(values);
-        setResumeable(resumeable);
+        setNext(next);
         stopStream?.(true);
       }
     }
 
     if (prevStreamStatus === "inflight" && stream?.status !== "inflight") {
-      setResumeable(false);
+      setNext([]);
       fetchMessages();
     }
 
@@ -71,8 +71,8 @@ export function useChatMessages(
       messages: stream?.merge
         ? [...(messages ?? []), ...(stream.messages ?? [])]
         : stream?.messages ?? messages,
-      resumeable,
+      next,
     };
-  }, [messages, stream?.merge, stream?.messages, resumeable]);
+  }, [messages, stream?.merge, stream?.messages, next]);
   return { ...memoizedValues, setMessages };
 }

frontend/src/hooks/useHistories.ts

@@ -13,33 +13,29 @@ async function getHistories(threadId: string) {
 
 export interface History {
   values: MessageType[];
-  resumeable: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  config: Record<string, any>;
+  next: string[];
+  config: Record<string, unknown>;
 }
 
 export function useHistories(
   threadId: string | null,
   stream: StreamState | null,
 ): {
   histories: History[];
-  resumeable: boolean;
   setHistories: React.Dispatch<React.SetStateAction<History[]>>;
 } {
   const [histories, setHistories] = useState<History[]>([]);
-  const [resumeable, setResumeable] = useState(false);
 
   useEffect(() => {
     async function fetchHistories() {
       if (threadId) {
         const histories = await getHistories(threadId);
         setHistories(histories);
-        setResumeable(resumeable);
       }
     }
     fetchHistories();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [threadId, stream?.status]);
 
-  return { histories, resumeable, setHistories };
+  return { histories, setHistories };
 }