veryfront 0.0.67 → 0.0.69

package/dist/ai/react.js

@@ -47,12 +47,32 @@ function useChat(options) {
   const [error, setError] = useState(null);
   const [data, setData] = useState(null);
   const abortControllerRef = useRef(null);
-  const append = useCallback(
+  const pendingToolOutputsRef = useRef(/* @__PURE__ */ new Map());
+  const addToolOutput = useCallback((output) => {
+    pendingToolOutputsRef.current.set(output.toolCallId, output);
+    setMessages(
+      (prev) => prev.map((msg) => ({
+        ...msg,
+        parts: msg.parts.map((part) => {
+          if (part.type === "tool-call" && part.toolCallId === output.toolCallId) {
+            return {
+              ...part,
+              state: output.state || "output-available",
+              output: output.output,
+              errorText: output.errorText
+            };
+          }
+          return part;
+        })
+      }))
+    );
+  }, []);
+  const sendMessage = useCallback(
     async (message) => {
       const userMessage = {
-        ...message,
-        id: `msg_${Date.now()}`,
-        timestamp: Date.now()
+        id: generateClientId("msg"),
+        role: "user",
+        parts: [{ type: "text", text: message.text }]
       };
       setMessages((prev) => [...prev, userMessage]);
       setIsLoading(true);
@@ -79,62 +99,43 @@ function useChat(options) {
             message: `API error: ${response.status}`
           }));
         }
-        if (options.onResponse) {
-          options.onResponse(response);
-        }
+        options.onResponse?.(response);
         if (response.body) {
-          const streamingMessageId = `msg_${Date.now()}`;
+          const streamingMessageId = generateClientId("msg");
           let hasAddedStreamingMessage = false;
-          await handleStreamingResponse(
-            response.body,
-            // onMessage - when streaming is complete
-            (assistantMessage) => {
+          await handleStreamingResponse(response.body, {
+            onMessage: (assistantMessage) => {
               setMessages((prev) => {
                 if (hasAddedStreamingMessage) {
                   return prev.map((m) => m.id === streamingMessageId ? assistantMessage : m);
                 }
                 return [...prev, assistantMessage];
               });
-              if (options.onFinish) {
-                options.onFinish(assistantMessage);
-              }
-            },
-            // onData - for data events
-            (partialData) => {
-              setData(partialData);
+              options.onFinish?.(assistantMessage);
             },
-            // onUpdate - for real-time streaming updates
-            (partialContent, messageId) => {
+            onData: setData,
+            onUpdate: (parts, messageId) => {
+              const id = messageId || streamingMessageId;
               if (!hasAddedStreamingMessage) {
                 hasAddedStreamingMessage = true;
-                setMessages((prev) => [
-                  ...prev,
-                  {
-                    id: messageId || streamingMessageId,
-                    role: "assistant",
-                    content: partialContent,
-                    timestamp: Date.now()
-                  }
-                ]);
+                setMessages((prev) => [...prev, {
+                  id,
+                  role: "assistant",
+                  parts
+                }]);
               } else {
-                setMessages(
-                  (prev) => prev.map(
-                    (m) => m.id === (messageId || streamingMessageId) ? { ...m, content: partialContent } : m
-                  )
-                );
+                setMessages((prev) => prev.map((m) => m.id === id ? { ...m, parts } : m));
               }
-            }
-          );
+            },
+            onToolCall: options.onToolCall
+          });
         }
       } catch (err) {
-        if (err instanceof Error && err.name === "AbortError") {
+        if (err instanceof Error && err.name === "AbortError")
           return;
-        }
         const error2 = err instanceof Error ? err : new Error(String(err));
         setError(error2);
-        if (options.onError) {
-          options.onError(error2);
-        }
+        options.onError?.(error2);
       } finally {
         setIsLoading(false);
         abortControllerRef.current = null;
@@ -145,19 +146,18 @@ function useChat(options) {
   const reload = useCallback(async () => {
     if (messages.length === 0)
       return;
-    const lastUserMessageIndex = messages.findLastIndex((m) => m.role === "user");
-    if (lastUserMessageIndex === -1)
+    const lastUserIndex = messages.findLastIndex((m) => m.role === "user");
+    if (lastUserIndex === -1)
       return;
-    const messagesToKeep = messages.slice(0, lastUserMessageIndex);
-    const lastUserMessage = messages[lastUserMessageIndex];
+    const lastUserMessage = messages[lastUserIndex];
     if (!lastUserMessage)
       return;
-    setMessages(messagesToKeep);
-    await append({
-      role: lastUserMessage.role,
-      content: lastUserMessage.content
-    });
-  }, [messages, append]);
+    const textPart = lastUserMessage.parts.find((p) => p.type === "text");
+    if (!textPart)
+      return;
+    setMessages(messages.slice(0, lastUserIndex));
+    await sendMessage({ text: textPart.text });
+  }, [messages, sendMessage]);
   const stop = useCallback(() => {
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
@@ -176,14 +176,11 @@ function useChat(options) {
       e.preventDefault();
       if (!input.trim() || isLoading)
         return;
-      const messageContent = input;
+      const text = input;
       setInput("");
-      await append({
-        role: "user",
-        content: messageContent
-      });
+      await sendMessage({ text });
     },
-    [input, isLoading, append]
+    [input, isLoading, sendMessage]
   );
   return {
     messages,
@@ -191,20 +188,52 @@ function useChat(options) {
     isLoading,
     error,
     setInput,
-    append,
+    sendMessage,
     reload,
     stop,
     setMessages,
+    addToolOutput,
     data,
     handleInputChange,
     handleSubmit
   };
 }
-async function handleStreamingResponse(body, onMessage, onData, onUpdate) {
+async function handleStreamingResponse(body, callbacks) {
+  const { onMessage, onData, onUpdate, onToolCall } = callbacks;
   const reader = body.getReader();
   const decoder = new TextDecoder();
-  let accumulatedText = "";
-  let messageId = `msg_${Date.now()}`;
+  const textBlocks = /* @__PURE__ */ new Map();
+  let currentTextId = "";
+  let messageId = "";
+  const toolCalls = /* @__PURE__ */ new Map();
+  const reasoningBlocks = /* @__PURE__ */ new Map();
+  const messageParts = [];
+  const buildCurrentParts = () => {
+    const parts = [];
+    for (const [, block] of textBlocks) {
+      if (block.text) {
+        parts.push({ type: "text", text: block.text, state: block.state });
+      }
+    }
+    for (const [, reasoning] of reasoningBlocks) {
+      parts.push({
+        type: "reasoning",
+        text: reasoning.text,
+        state: reasoning.isComplete ? "done" : "streaming"
+      });
+    }
+    for (const [, tool] of toolCalls) {
+      parts.push({
+        type: "tool-call",
+        toolCallId: tool.toolCallId,
+        toolName: tool.toolName,
+        state: tool.state,
+        input: tool.input,
+        output: tool.output
+      });
+    }
+    return parts;
+  };
   while (true) {
     const { done, value } = await reader.read();
     if (done) {
@@ -215,40 +244,152 @@ async function handleStreamingResponse(body, onMessage, onData, onUpdate) {
     for (const line of lines) {
       if (line.startsWith("data: ")) {
         const data = line.slice(6);
-        if (data === "[DONE]") {
-          if (accumulatedText) {
-            const assistantMessage = {
-              id: messageId,
-              role: "assistant",
-              content: accumulatedText,
-              timestamp: Date.now()
-            };
-            onMessage(assistantMessage);
-          }
-          continue;
-        }
         try {
           const parsed = JSON.parse(data);
-          if (parsed.type === "data") {
-            onData(parsed.data);
-          } else if (parsed.type === "start") {
-            messageId = parsed.messageId || `msg_${Date.now()}`;
-            accumulatedText = "";
-          } else if (parsed.type === "text-delta") {
-            accumulatedText += parsed.textDelta || "";
-            if (onUpdate) {
-              onUpdate(accumulatedText, messageId);
+          switch (parsed.type) {
+            case "start":
+              messageId = parsed.messageId || generateClientId("msg");
+              textBlocks.clear();
+              toolCalls.clear();
+              reasoningBlocks.clear();
+              messageParts.length = 0;
+              break;
+            case "start-step":
+              break;
+            case "finish-step":
+              break;
+            case "text-start":
+              currentTextId = parsed.id || generateClientId("text");
+              textBlocks.set(currentTextId, { text: "", state: "streaming" });
+              break;
+            case "text-delta": {
+              const textId = parsed.id || currentTextId || "default";
+              const delta = parsed.delta || "";
+              if (!textBlocks.has(textId)) {
+                textBlocks.set(textId, { text: "", state: "streaming" });
+                currentTextId = textId;
+              }
+              const block = textBlocks.get(textId);
+              block.text += delta;
+              onUpdate?.(buildCurrentParts(), messageId);
+              break;
             }
-          } else if (parsed.type === "finish") {
-            if (accumulatedText) {
-              const assistantMessage = {
-                id: messageId,
-                role: "assistant",
-                content: accumulatedText,
-                timestamp: Date.now()
+            case "text-end": {
+              const textId = parsed.id || currentTextId;
+              const block = textBlocks.get(textId);
+              if (block) {
+                block.state = "done";
+                if (block.text) {
+                  messageParts.push({ type: "text", text: block.text, state: "done" });
+                }
+              }
+              break;
+            }
+            case "tool-input-start": {
+              const toolCallId = parsed.toolCallId || generateClientId("tool");
+              const toolCall = {
+                toolCallId,
+                toolName: parsed.toolName || "unknown",
+                inputText: "",
+                state: "input-streaming"
               };
-              onMessage(assistantMessage);
+              toolCalls.set(toolCallId, toolCall);
+              onUpdate?.(buildCurrentParts(), messageId);
+              break;
+            }
+            case "tool-input-delta": {
+              const toolCallId = parsed.toolCallId;
+              const toolCall = toolCalls.get(toolCallId);
+              if (toolCall) {
+                toolCall.inputText += parsed.inputTextDelta || parsed.delta || "";
+                onUpdate?.(buildCurrentParts(), messageId);
+              }
+              break;
+            }
+            case "tool-input-available": {
+              const toolCallId = parsed.toolCallId;
+              const toolCall = toolCalls.get(toolCallId);
+              if (toolCall) {
+                toolCall.input = parsed.input;
+                toolCall.toolName = parsed.toolName || toolCall.toolName;
+                toolCall.state = "input-available";
+                onToolCall?.({
+                  toolCall: {
+                    toolCallId,
+                    toolName: toolCall.toolName,
+                    input: toolCall.input
+                  }
+                });
+                messageParts.push({
+                  type: "tool-call",
+                  toolCallId,
+                  toolName: toolCall.toolName,
+                  state: "input-available",
+                  input: toolCall.input
+                });
+                onUpdate?.(buildCurrentParts(), messageId);
+              }
+              break;
+            }
+            case "tool-output-available": {
+              const toolCallId = parsed.toolCallId;
+              const toolCall = toolCalls.get(toolCallId);
+              if (toolCall) {
+                toolCall.output = parsed.output;
+                toolCall.state = "output-available";
+                messageParts.push({
+                  type: "tool-result",
+                  toolCallId,
+                  toolName: toolCall.toolName,
+                  result: toolCall.output
+                });
+                onUpdate?.(buildCurrentParts(), messageId);
+              }
+              break;
             }
+            case "reasoning-start": {
+              const reasoningId = parsed.id || generateClientId("reasoning");
+              const reasoning = {
+                id: reasoningId,
+                text: "",
+                isComplete: false
+              };
+              reasoningBlocks.set(reasoningId, reasoning);
+              onUpdate?.(buildCurrentParts(), messageId);
+              break;
+            }
+            case "reasoning-delta": {
+              const reasoningId = parsed.id;
+              const reasoning = reasoningBlocks.get(reasoningId);
+              if (reasoning) {
+                reasoning.text += parsed.delta || "";
+                onUpdate?.(buildCurrentParts(), messageId);
+              }
+              break;
+            }
+            case "reasoning-end": {
+              const reasoningId = parsed.id;
+              const reasoning = reasoningBlocks.get(reasoningId);
+              if (reasoning) {
+                reasoning.isComplete = true;
+                messageParts.push({
+                  type: "reasoning",
+                  text: reasoning.text,
+                  state: "done"
+                });
+                onUpdate?.(buildCurrentParts(), messageId);
+              }
+              break;
+            }
+            case "finish": {
+              if (messageParts.length > 0 || textBlocks.size > 0) {
+                onMessage(createAssistantMessage(messageId, messageParts));
+              }
+              break;
+            }
+            case "data":
+              onData(parsed.data || parsed.value);
+              break;
           }
         } catch {
         }
@@ -256,6 +397,16 @@ async function handleStreamingResponse(body, onMessage, onData, onUpdate) {
     }
   }
 }
+function createAssistantMessage(messageId, parts) {
+  return {
+    id: messageId || generateClientId("msg"),
+    role: "assistant",
+    parts
+  };
+}
+function generateClientId(prefix) {
+  return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
 
 // src/ai/react/hooks/use-agent.ts
 import { useCallback as useCallback2, useRef as useRef2, useState as useState2 } from "react";