veryfront 0.0.70 → 0.0.71

package/dist/ai/components.js

@@ -337,7 +337,7 @@ function formatStatus(status) {
 // src/ai/react/primitives/tool-primitives.tsx
 import * as React5 from "react";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var ToolInvocation = React5.forwardRef(({ className, name, args, status, children, ...props }, ref) => {
+var ToolInvocation = React5.forwardRef(({ className, name, input, output: _output, state, errorText, dynamic, children, ...props }, ref) => {
   return /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -345,18 +345,21 @@ var ToolInvocation = React5.forwardRef(({ className, name, args, status, childre
       className,
       "data-tool-invocation": "",
       "data-tool-name": name,
-      "data-status": status,
+      "data-state": state,
+      "data-dynamic": dynamic || void 0,
       ...props,
       children: [
         /* @__PURE__ */ jsxs2("div", { "data-tool-header": "", children: [
           /* @__PURE__ */ jsx5("span", { "data-tool-name": "", children: name }),
-          status && /* @__PURE__ */ jsxs2("span", { "data-tool-status": "", children: [
+          state && /* @__PURE__ */ jsxs2("span", { "data-tool-state": "", children: [
             "(",
-            status,
+            state,
             ")"
-          ] })
+          ] }),
+          dynamic && /* @__PURE__ */ jsx5("span", { "data-tool-dynamic": "", children: "[dynamic]" })
         ] }),
-        args && /* @__PURE__ */ jsx5("div", { "data-tool-args": "", children: /* @__PURE__ */ jsx5("pre", { children: JSON.stringify(args, null, 2) }) }),
+        input && /* @__PURE__ */ jsx5("div", { "data-tool-input": "", children: /* @__PURE__ */ jsx5("pre", { children: JSON.stringify(input, null, 2) }) }),
+        errorText && /* @__PURE__ */ jsx5("div", { "data-tool-error": "", children: errorText }),
         children
       ]
     }
@@ -364,8 +367,8 @@ var ToolInvocation = React5.forwardRef(({ className, name, args, status, childre
 });
 ToolInvocation.displayName = "ToolInvocation";
 var ToolResult = React5.forwardRef(
-  ({ className, result, renderResult, ...props }, ref) => {
-    const content = renderResult ? renderResult(result) : JSON.stringify(result, null, 2);
+  ({ className, output, renderOutput, ...props }, ref) => {
+    const content = renderOutput ? renderOutput(output) : JSON.stringify(output, null, 2);
     return /* @__PURE__ */ jsx5(
       "div",
       {
@@ -380,7 +383,7 @@ var ToolResult = React5.forwardRef(
 );
 ToolResult.displayName = "ToolResult";
 var ToolList = React5.forwardRef(
-  ({ className, toolCalls, renderTool, ...props }, ref) => {
+  ({ className, tools, renderTool, ...props }, ref) => {
     return /* @__PURE__ */ jsx5(
       "div",
       {
@@ -388,16 +391,18 @@ var ToolList = React5.forwardRef(
         className,
         "data-tool-list": "",
         ...props,
-        children: toolCalls.map(
-          (tool) => renderTool ? /* @__PURE__ */ jsx5(React5.Fragment, { children: renderTool(tool) }, tool.id) : /* @__PURE__ */ jsx5(
+        children: tools.map(
+          (tool) => renderTool ? /* @__PURE__ */ jsx5(React5.Fragment, { children: renderTool(tool) }, tool.toolCallId) : /* @__PURE__ */ jsx5(
             ToolInvocation,
             {
-              name: tool.name,
-              args: tool.args,
-              status: tool.status,
-              children: tool.result !== void 0 && /* @__PURE__ */ jsx5(ToolResult, { result: tool.result })
+              name: tool.toolName,
+              input: tool.input,
+              state: tool.state,
+              errorText: tool.errorText,
+              dynamic: tool.type === "dynamic-tool",
+              children: tool.output !== void 0 && /* @__PURE__ */ jsx5(ToolResult, { output: tool.output })
             },
-            tool.id
+            tool.toolCallId
           )
         )
       }
@@ -731,6 +736,11 @@ import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function getTextContent(message) {
   return message.parts.filter((p) => p.type === "text").map((p) => p.text).join("");
 }
+function getToolParts(message) {
+  return message.parts.filter(
+    (p) => p.type === "tool-call" || p.type === "dynamic-tool"
+  );
+}
 var Chat = React8.forwardRef(
   ({
     messages,
@@ -750,7 +760,7 @@ var Chat = React8.forwardRef(
     className,
     theme: userTheme,
     renderMessage,
-    renderTool: _renderTool,
+    renderTool,
     multiline = false
   }, ref) => {
     const theme = mergeThemes(defaultChatTheme, userTheme);
@@ -786,6 +796,7 @@ var Chat = React8.forwardRef(
           /* @__PURE__ */ jsx7(MessageList, { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxs4("div", { className: "max-w-2xl mx-auto px-4 py-4 space-y-2", children: [
             messages.map((msg) => {
               const content = getTextContent(msg);
+              const toolParts = getToolParts(msg);
               return renderMessage ? /* @__PURE__ */ jsx7(React8.Fragment, { children: renderMessage(msg) }, msg.id) : /* @__PURE__ */ jsx7(
                 MessageItem,
                 {
@@ -794,7 +805,30 @@ var Chat = React8.forwardRef(
                     "flex",
                     msg.role === "user" ? "justify-end" : "justify-start"
                   ),
-                  children: /* @__PURE__ */ jsx7("div", { className: theme.message?.[msg.role] || theme.message?.assistant, children: msg.role === "user" ? /* @__PURE__ */ jsx7("p", { className: "whitespace-pre-wrap text-[15px] leading-relaxed", children: content }) : /* @__PURE__ */ jsx7(Markdown, { className: "text-[15px] leading-relaxed", children: content }) })
+                  children: /* @__PURE__ */ jsxs4("div", { className: theme.message?.[msg.role] || theme.message?.assistant, children: [
+                    msg.role === "user" ? /* @__PURE__ */ jsx7("p", { className: "whitespace-pre-wrap text-[15px] leading-relaxed", children: content }) : /* @__PURE__ */ jsx7(Markdown, { className: "text-[15px] leading-relaxed", children: content }),
+                    toolParts.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-2 space-y-1", children: toolParts.map(
+                      (tool) => renderTool ? /* @__PURE__ */ jsx7(React8.Fragment, { children: renderTool(tool) }, tool.toolCallId) : /* @__PURE__ */ jsxs4(
+                        "div",
+                        {
+                          className: cn(
+                            "text-xs rounded px-2 py-1",
+                            tool.type === "dynamic-tool" ? "bg-blue-50 dark:bg-blue-900/20" : "bg-neutral-100 dark:bg-neutral-800"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx7("span", { className: "font-mono", children: tool.toolName }),
+                            /* @__PURE__ */ jsxs4("span", { className: "ml-2 opacity-70", children: [
+                              "[",
+                              tool.state,
+                              "]"
+                            ] }),
+                            tool.errorText && /* @__PURE__ */ jsx7("div", { className: "text-red-600 dark:text-red-400 mt-1", children: tool.errorText })
+                          ]
+                        },
+                        tool.toolCallId
+                      )
+                    ) })
+                  ] })
                 },
                 msg.id
               );
@@ -992,8 +1026,20 @@ function getStatusColor(status) {
 // src/ai/react/components/message.tsx
 import * as React10 from "react";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function getTextFromParts(parts) {
+  return parts.filter((p) => p.type === "text").map((p) => p.text).join("");
+}
 var Message = React10.forwardRef(
-  ({ message, className, theme: userTheme, showRole = false, showTimestamp = false }, ref) => {
+  ({
+    message,
+    className,
+    theme: userTheme,
+    showRole = false,
+    showTimestamp = false,
+    renderToolCall,
+    renderDynamicTool,
+    renderReasoning
+  }, ref) => {
     const theme = mergeThemes(defaultChatTheme, userTheme);
     return /* @__PURE__ */ jsx9(
       MessageItem,
@@ -1007,16 +1053,56 @@ var Message = React10.forwardRef(
         ),
         children: /* @__PURE__ */ jsxs6("div", { className: theme.message?.[message.role] || theme.message?.assistant, children: [
           showRole && /* @__PURE__ */ jsx9(MessageRole, { className: "block text-xs font-semibold mb-1 opacity-75 uppercase", children: message.role }),
-          /* @__PURE__ */ jsx9(MessageContent, { children: message.content }),
-          showTimestamp && message.timestamp && /* @__PURE__ */ jsx9("div", { className: "text-xs opacity-60 mt-1", children: new Date(message.timestamp).toLocaleTimeString() })
+          message.parts.map((part, index) => {
+            const key = `${message.id}-part-${index}`;
+            switch (part.type) {
+              case "text":
+                return /* @__PURE__ */ jsx9(MessageContent, { children: part.text }, key);
+              case "reasoning":
+                if (renderReasoning) {
+                  return /* @__PURE__ */ jsx9(React10.Fragment, { children: renderReasoning(part) }, key);
+                }
+                return /* @__PURE__ */ jsx9("div", { className: "text-sm italic opacity-70 my-2 pl-2 border-l-2", children: part.text }, key);
+              case "tool-call":
+                if (renderToolCall) {
+                  return /* @__PURE__ */ jsx9(React10.Fragment, { children: renderToolCall(part) }, key);
+                }
+                return /* @__PURE__ */ jsxs6("div", { className: "text-xs bg-gray-100 rounded p-2 my-2", children: [
+                  /* @__PURE__ */ jsx9("span", { className: "font-mono", children: part.toolName }),
+                  /* @__PURE__ */ jsxs6("span", { className: "ml-2 text-gray-500", children: [
+                    "[",
+                    part.state,
+                    "]"
+                  ] }),
+                  part.errorText && /* @__PURE__ */ jsx9("div", { className: "text-red-600 mt-1", children: part.errorText })
+                ] }, key);
+              case "dynamic-tool":
+                if (renderDynamicTool) {
+                  return /* @__PURE__ */ jsx9(React10.Fragment, { children: renderDynamicTool(part) }, key);
+                }
+                return /* @__PURE__ */ jsxs6("div", { className: "text-xs bg-blue-50 rounded p-2 my-2", children: [
+                  /* @__PURE__ */ jsx9("span", { className: "font-mono", children: part.toolName }),
+                  /* @__PURE__ */ jsxs6("span", { className: "ml-2 text-blue-500", children: [
+                    "[dynamic: ",
+                    part.state,
+                    "]"
+                  ] }),
+                  part.errorText && /* @__PURE__ */ jsx9("div", { className: "text-red-600 mt-1", children: part.errorText })
+                ] }, key);
+              default:
+                return null;
+            }
+          }),
+          showTimestamp && message.createdAt && /* @__PURE__ */ jsx9("div", { className: "text-xs opacity-60 mt-1", children: new Date(message.createdAt).toLocaleTimeString() })
         ] })
       }
     );
   }
 );
 Message.displayName = "Message";
-var StreamingMessage = React10.forwardRef(({ content, showCursor = true, className, theme: userTheme }, ref) => {
+var StreamingMessage = React10.forwardRef(({ parts, showCursor = true, className, theme: userTheme }, ref) => {
   const theme = mergeThemes(defaultChatTheme, userTheme);
+  const textContent = getTextFromParts(parts);
   return /* @__PURE__ */ jsx9(
     MessageItem,
     {
@@ -1024,7 +1110,7 @@ var StreamingMessage = React10.forwardRef(({ content, showCursor = true, classNa
       role: "assistant",
       className: cn("flex justify-start", className),
       children: /* @__PURE__ */ jsx9("div", { className: theme.message?.assistant, children: /* @__PURE__ */ jsxs6(MessageContent, { children: [
-        content,
+        textContent,
         showCursor && /* @__PURE__ */ jsx9("span", { className: "inline-block w-1 h-4 bg-current ml-1 animate-pulse" })
       ] }) })
     }