improving streaming

src/app/api/chatagent/[chatid]/route.ts

@@ -96,6 +96,8 @@ export async function POST(
     },
   );
 
+  let toolResponse = {};
+
   executor.call({ input: msgs[msgs.length - 1].content }, [
     {
       async handleToolStart(

src/components/inputBar.tsx

@@ -20,7 +20,7 @@ import { Loader2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 function isJSON(str: any) {
   try {
-    return JSON.parse(str) && !!str;
+    return JSON.parse(str);
   } catch (e) {
     return false;
   }
@@ -92,6 +92,7 @@ const InputBar = (props: InputBarProps) => {
         role: "assistant",
         content: "",
       };
+      let functionMessages: Message[] = [];
 
       if (res.body) {
         const reader = res?.body.getReader();
@@ -105,19 +106,26 @@ const InputBar = (props: InputBarProps) => {
 
           const text = new TextDecoder().decode(value);
           if (isJSON(text)) {
+            console.log("this is json", text);
             const functionMessage: Message = {
               id: nanoid(),
               role: "function",
               content: text,
             };
+            functionMessages.push(functionMessage);
 
-            props.setMessages([...props.messages, message, functionMessage]);
+            props.setMessages([
+              ...props.messages,
+              message,
+              ...functionMessages,
+            ]);
           } else {
+            console.log("non-json");
             content += text;
             props.setMessages([
               ...props.messages,
               message,
-              // ...intermediateStepMessages,
+              ...functionMessages,
               {
                 ...assistantMessage,
                 content: content,

src/components/intermediatesteps.tsx

@@ -2,12 +2,12 @@
 
 import { useState } from "react";
 import { Message } from "ai/react";
-import { AgentStep } from "langchain/schema";
+import { AgentAction, AgentStep } from "langchain/schema";
 
 export function IntermediateStep(props: { message: Message }) {
-  const parsedInput: AgentStep = JSON.parse(props.message.content);
-  const action = parsedInput.action;
-  const observation = parsedInput.observation;
+  const parsedInput: AgentAction = JSON.parse(props.message.content);
+  // const action = parsedInput.action;
+  // const observation = parsedInput.observation;
   const [expanded, setExpanded] = useState(false);
 
   return (
@@ -19,7 +19,7 @@ export function IntermediateStep(props: { message: Message }) {
         onClick={(e) => setExpanded(!expanded)}
       >
         <code className="mr-2 bg-slate-600 px-2 py-1 rounded hover:text-blue-600">
-          🛠️ <b>{action.tool}</b>
+          🛠️ <b>{parsedInput.tool}</b>
         </code>
         <span className={expanded ? "hidden" : ""}>🔽</span>
         <span className={expanded ? "" : "hidden"}>🔼</span>
@@ -42,7 +42,7 @@ export function IntermediateStep(props: { message: Message }) {
             Tool Input:
             <br></br>
             <br></br>
-            {JSON.stringify(action.toolInput)}
+            {JSON.stringify(parsedInput.toolInput)}
           </code>
         </div>
         <div
@@ -55,7 +55,7 @@ export function IntermediateStep(props: { message: Message }) {
               expanded ? "opacity-100" : ""
             }`}
           >
-            {observation}
+            {"loading"}
           </code>
         </div>
       </div>