@contractspec/module.ai-chat 3.2.0 → 4.0.0

package/dist/browser/presentation/components/index.js

@@ -84,7 +84,15 @@ import * as React3 from "react";
 import { cn as cn3 } from "@contractspec/lib.ui-kit-web/ui/utils";
 import { Avatar, AvatarFallback } from "@contractspec/lib.ui-kit-web/ui/avatar";
 import { Skeleton } from "@contractspec/lib.ui-kit-web/ui/skeleton";
-import { Bot, User, AlertCircle, Copy as Copy2, Check as Check2 } from "lucide-react";
+import {
+  Bot,
+  User,
+  AlertCircle,
+  Copy as Copy2,
+  Check as Check2,
+  ExternalLink,
+  Wrench
+} from "lucide-react";
 import { Button as Button2 } from "@contractspec/lib.design-system";
 
 // src/presentation/components/CodePreview.tsx
@@ -246,12 +254,40 @@ function extractCodeBlocks(content) {
   }
   return blocks;
 }
+function renderInlineMarkdown(text) {
+  const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+  let key = 0;
+  while ((match = linkRegex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(/* @__PURE__ */ jsxDEV3("span", {
+        children: text.slice(lastIndex, match.index)
+      }, key++, false, undefined, this));
+    }
+    parts.push(/* @__PURE__ */ jsxDEV3("a", {
+      href: match[2],
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "text-primary underline hover:no-underline",
+      children: match[1]
+    }, key++, false, undefined, this));
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    parts.push(/* @__PURE__ */ jsxDEV3("span", {
+      children: text.slice(lastIndex)
+    }, key++, false, undefined, this));
+  }
+  return parts.length > 0 ? parts : [text];
+}
 function MessageContent({ content }) {
   const codeBlocks = extractCodeBlocks(content);
   if (codeBlocks.length === 0) {
     return /* @__PURE__ */ jsxDEV3("p", {
       className: "whitespace-pre-wrap",
-      children: content
+      children: renderInlineMarkdown(content)
     }, undefined, false, undefined, this);
   }
   let remaining = content;
@@ -262,7 +298,7 @@ function MessageContent({ content }) {
     if (before) {
       parts.push(/* @__PURE__ */ jsxDEV3("p", {
         className: "whitespace-pre-wrap",
-        children: before.trim()
+        children: renderInlineMarkdown(before.trim())
       }, key++, false, undefined, this));
     }
     parts.push(/* @__PURE__ */ jsxDEV3(CodePreview, {
@@ -275,7 +311,7 @@ function MessageContent({ content }) {
   if (remaining.trim()) {
     parts.push(/* @__PURE__ */ jsxDEV3("p", {
       className: "whitespace-pre-wrap",
-      children: remaining.trim()
+      children: renderInlineMarkdown(remaining.trim())
     }, key++, false, undefined, this));
   }
   return /* @__PURE__ */ jsxDEV3(Fragment, {
@@ -393,7 +429,77 @@ function ChatMessage({
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
             ]
-          }, undefined, true, undefined, this)
+          }, undefined, true, undefined, this),
+          message.sources && message.sources.length > 0 && /* @__PURE__ */ jsxDEV3("div", {
+            className: "mt-2 flex flex-wrap gap-2",
+            children: message.sources.map((source) => /* @__PURE__ */ jsxDEV3("a", {
+              href: source.url ?? "#",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-muted-foreground hover:text-foreground bg-muted inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors",
+              children: [
+                /* @__PURE__ */ jsxDEV3(ExternalLink, {
+                  className: "h-3 w-3"
+                }, undefined, false, undefined, this),
+                source.title || source.url || source.id
+              ]
+            }, source.id, true, undefined, this))
+          }, undefined, false, undefined, this),
+          message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsxDEV3("div", {
+            className: "mt-2 space-y-2",
+            children: message.toolCalls.map((tc) => /* @__PURE__ */ jsxDEV3("details", {
+              className: "bg-muted border-border rounded-md border",
+              children: [
+                /* @__PURE__ */ jsxDEV3("summary", {
+                  className: "flex cursor-pointer items-center gap-2 px-3 py-2 text-sm font-medium",
+                  children: [
+                    /* @__PURE__ */ jsxDEV3(Wrench, {
+                      className: "text-muted-foreground h-4 w-4"
+                    }, undefined, false, undefined, this),
+                    tc.name,
+                    /* @__PURE__ */ jsxDEV3("span", {
+                      className: cn3("ml-auto rounded px-1.5 py-0.5 text-xs", tc.status === "completed" && "bg-green-500/20 text-green-700 dark:text-green-400", tc.status === "error" && "bg-destructive/20 text-destructive", tc.status === "running" && "bg-blue-500/20 text-blue-700 dark:text-blue-400"),
+                      children: tc.status
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV3("div", {
+                  className: "border-border border-t px-3 py-2 text-xs",
+                  children: [
+                    Object.keys(tc.args).length > 0 && /* @__PURE__ */ jsxDEV3("div", {
+                      className: "mb-2",
+                      children: [
+                        /* @__PURE__ */ jsxDEV3("span", {
+                          className: "text-muted-foreground font-medium",
+                          children: "Input:"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("pre", {
+                          className: "bg-background mt-1 overflow-x-auto rounded p-2",
+                          children: JSON.stringify(tc.args, null, 2)
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    tc.result !== undefined && /* @__PURE__ */ jsxDEV3("div", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV3("span", {
+                          className: "text-muted-foreground font-medium",
+                          children: "Output:"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV3("pre", {
+                          className: "bg-background mt-1 overflow-x-auto rounded p-2",
+                          children: typeof tc.result === "object" ? JSON.stringify(tc.result, null, 2) : String(tc.result)
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this),
+                    tc.error && /* @__PURE__ */ jsxDEV3("p", {
+                      className: "text-destructive mt-1",
+                      children: tc.error
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, tc.id, true, undefined, this))
+          }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
     ]

package/dist/browser/presentation/hooks/index.js

@@ -8,6 +8,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 
 // src/presentation/hooks/useChat.tsx
 import * as React from "react";
+import { tool } from "ai";
+import { z } from "zod";
 
 // src/core/chat-service.ts
 import { generateText, streamText } from "ai";
@@ -142,6 +144,9 @@ class ChatService {
   systemPrompt;
   maxHistoryMessages;
   onUsage;
+  tools;
+  sendReasoning;
+  sendSources;
   constructor(config) {
     this.provider = config.provider;
     this.context = config.context;
@@ -149,6 +154,9 @@ class ChatService {
     this.systemPrompt = config.systemPrompt ?? DEFAULT_SYSTEM_PROMPT;
     this.maxHistoryMessages = config.maxHistoryMessages ?? 20;
     this.onUsage = config.onUsage;
+    this.tools = config.tools;
+    this.sendReasoning = config.sendReasoning ?? false;
+    this.sendSources = config.sendSources ?? false;
   }
   async send(options) {
     let conversation;
@@ -173,13 +181,14 @@ class ChatService {
       status: "completed",
       attachments: options.attachments
     });
-    const prompt = this.buildPrompt(conversation, options);
+    const messages = this.buildMessages(conversation, options);
     const model = this.provider.getModel();
     try {
       const result = await generateText({
         model,
-        prompt,
-        system: this.systemPrompt
+        messages,
+        system: this.systemPrompt,
+        tools: this.tools
       });
       const assistantMessage = await this.store.appendMessage(conversation.id, {
         role: "assistant",
@@ -235,33 +244,106 @@ class ChatService {
       content: "",
       status: "streaming"
     });
-    const prompt = this.buildPrompt(conversation, options);
+    const messages = this.buildMessages(conversation, options);
     const model = this.provider.getModel();
-    const self = {
-      systemPrompt: this.systemPrompt,
-      store: this.store
-    };
+    const systemPrompt = this.systemPrompt;
+    const tools = this.tools;
+    const store = this.store;
+    const onUsage = this.onUsage;
     async function* streamGenerator() {
       let fullContent = "";
+      let fullReasoning = "";
+      const toolCallsMap = new Map;
+      const sources = [];
       try {
         const result = streamText({
           model,
-          prompt,
-          system: self.systemPrompt
+          messages,
+          system: systemPrompt,
+          tools
         });
-        for await (const chunk of result.textStream) {
-          fullContent += chunk;
-          yield { type: "text", content: chunk };
+        for await (const part of result.fullStream) {
+          if (part.type === "text-delta") {
+            const text = part.text ?? "";
+            if (text) {
+              fullContent += text;
+              yield { type: "text", content: text };
+            }
+          } else if (part.type === "reasoning-delta") {
+            const text = part.text ?? "";
+            if (text) {
+              fullReasoning += text;
+              yield { type: "reasoning", content: text };
+            }
+          } else if (part.type === "source") {
+            const src = part;
+            const source = {
+              id: src.id,
+              title: src.title ?? "",
+              url: src.url,
+              type: "web"
+            };
+            sources.push(source);
+            yield { type: "source", source };
+          } else if (part.type === "tool-call") {
+            const toolCall = {
+              id: part.toolCallId,
+              name: part.toolName,
+              args: part.input ?? {},
+              status: "running"
+            };
+            toolCallsMap.set(part.toolCallId, toolCall);
+            yield { type: "tool_call", toolCall };
+          } else if (part.type === "tool-result") {
+            const tc = toolCallsMap.get(part.toolCallId);
+            if (tc) {
+              tc.result = part.output;
+              tc.status = "completed";
+            }
+            yield {
+              type: "tool_result",
+              toolResult: {
+                toolCallId: part.toolCallId,
+                toolName: part.toolName,
+                result: part.output
+              }
+            };
+          } else if (part.type === "tool-error") {
+            const tc = toolCallsMap.get(part.toolCallId);
+            if (tc) {
+              tc.status = "error";
+              tc.error = part.error ?? "Tool execution failed";
+            }
+          } else if (part.type === "finish") {
+            const usage = part.usage;
+            const inputTokens = usage?.inputTokens ?? 0;
+            const outputTokens = usage?.completionTokens ?? 0;
+            await store.updateMessage(conversation.id, assistantMessage.id, {
+              content: fullContent,
+              status: "completed",
+              reasoning: fullReasoning || undefined,
+              sources: sources.length > 0 ? sources : undefined,
+              toolCalls: toolCallsMap.size > 0 ? Array.from(toolCallsMap.values()) : undefined,
+              usage: usage ? { inputTokens, outputTokens } : undefined
+            });
+            onUsage?.({ inputTokens, outputTokens });
+            yield {
+              type: "done",
+              usage: usage ? { inputTokens, outputTokens } : undefined
+            };
+            return;
+          }
         }
-        await self.store.updateMessage(conversation.id, assistantMessage.id, {
+        await store.updateMessage(conversation.id, assistantMessage.id, {
           content: fullContent,
-          status: "completed"
+          status: "completed",
+          reasoning: fullReasoning || undefined,
+          sources: sources.length > 0 ? sources : undefined,
+          toolCalls: toolCallsMap.size > 0 ? Array.from(toolCallsMap.values()) : undefined
         });
-        yield {
-          type: "done"
-        };
+        yield { type: "done" };
       } catch (error) {
-        await self.store.updateMessage(conversation.id, assistantMessage.id, {
+        await store.updateMessage(conversation.id, assistantMessage.id, {
           content: fullContent,
           status: "error",
           error: {
@@ -296,40 +378,59 @@ class ChatService {
   async deleteConversation(conversationId) {
     return this.store.delete(conversationId);
   }
-  buildPrompt(conversation, options) {
-    let prompt = "";
+  buildMessages(conversation, _options) {
     const historyStart = Math.max(0, conversation.messages.length - this.maxHistoryMessages);
+    const messages = [];
     for (let i = historyStart;i < conversation.messages.length; i++) {
       const msg = conversation.messages[i];
       if (!msg)
         continue;
-      if (msg.role === "user" || msg.role === "assistant") {
-        prompt += `${msg.role === "user" ? "User" : "Assistant"}: ${msg.content}
-
-`;
-      }
-    }
-    let content = options.content;
-    if (options.attachments?.length) {
-      const attachmentInfo = options.attachments.map((a) => {
-        if (a.type === "file" || a.type === "code") {
-          return `
+      if (msg.role === "user") {
+        let content = msg.content;
+        if (msg.attachments?.length) {
+          const attachmentInfo = msg.attachments.map((a) => {
+            if (a.type === "file" || a.type === "code") {
+              return `
 
 ### ${a.name}
 \`\`\`
-${a.content}
+${a.content ?? ""}
 \`\`\``;
-        }
-        return `
+            }
+            return `
 
 [Attachment: ${a.name}]`;
-      }).join("");
-      content += attachmentInfo;
+          }).join("");
+          content += attachmentInfo;
+        }
+        messages.push({ role: "user", content });
+      } else if (msg.role === "assistant") {
+        if (msg.toolCalls?.length) {
+          messages.push({
+            role: "assistant",
+            content: msg.content || "",
+            toolCalls: msg.toolCalls.map((tc) => ({
+              type: "tool-call",
+              toolCallId: tc.id,
+              toolName: tc.name,
+              args: tc.args
+            }))
+          });
+          messages.push({
+            role: "tool",
+            content: msg.toolCalls.map((tc) => ({
+              type: "tool-result",
+              toolCallId: tc.id,
+              toolName: tc.name,
+              output: tc.result
+            }))
+          });
+        } else {
+          messages.push({ role: "assistant", content: msg.content });
+        }
+      }
     }
-    prompt += `User: ${content}
-
-Assistant:`;
-    return prompt;
+    return messages;
   }
 }
 function createChatService(config) {
@@ -341,6 +442,17 @@ import {
   createProvider
 } from "@contractspec/lib.ai-providers";
 "use client";
+function toolsToToolSet(defs) {
+  const result = {};
+  for (const def of defs) {
+    result[def.name] = tool({
+      description: def.description ?? def.name,
+      inputSchema: z.object({}).passthrough(),
+      execute: async () => ({})
+    });
+  }
+  return result;
+}
 function useChat(options = {}) {
   const {
     provider = "openai",
@@ -354,7 +466,8 @@ function useChat(options = {}) {
     onSend,
     onResponse,
     onError,
-    onUsage
+    onUsage,
+    tools: toolsDefs
   } = options;
   const [messages, setMessages] = React.useState([]);
   const [conversation, setConversation] = React.useState(null);
@@ -373,9 +486,19 @@ function useChat(options = {}) {
     chatServiceRef.current = new ChatService({
       provider: chatProvider,
       systemPrompt,
-      onUsage
+      onUsage,
+      tools: toolsDefs?.length ? toolsToToolSet(toolsDefs) : undefined
     });
-  }, [provider, mode, model, apiKey, proxyUrl, systemPrompt, onUsage]);
+  }, [
+    provider,
+    mode,
+    model,
+    apiKey,
+    proxyUrl,
+    systemPrompt,
+    onUsage,
+    toolsDefs
+  ]);
   React.useEffect(() => {
     if (!conversationId || !chatServiceRef.current)
       return;
@@ -430,13 +553,50 @@ function useChat(options = {}) {
         };
         setMessages((prev) => [...prev, assistantMessage]);
         let fullContent = "";
+        let fullReasoning = "";
+        const toolCallsMap = new Map;
+        const sources = [];
         for await (const chunk of result.stream) {
           if (chunk.type === "text" && chunk.content) {
             fullContent += chunk.content;
-            setMessages((prev) => prev.map((m) => m.id === result.messageId ? { ...m, content: fullContent } : m));
+            setMessages((prev) => prev.map((m) => m.id === result.messageId ? {
+              ...m,
+              content: fullContent,
+              reasoning: fullReasoning || undefined,
+              sources: sources.length ? sources : undefined,
+              toolCalls: toolCallsMap.size ? Array.from(toolCallsMap.values()) : undefined
+            } : m));
+          } else if (chunk.type === "reasoning" && chunk.content) {
+            fullReasoning += chunk.content;
+            setMessages((prev) => prev.map((m) => m.id === result.messageId ? { ...m, reasoning: fullReasoning } : m));
+          } else if (chunk.type === "source" && chunk.source) {
+            sources.push(chunk.source);
+            setMessages((prev) => prev.map((m) => m.id === result.messageId ? { ...m, sources: [...sources] } : m));
+          } else if (chunk.type === "tool_call" && chunk.toolCall) {
+            const tc = chunk.toolCall;
+            const chatTc = {
+              id: tc.id,
+              name: tc.name,
+              args: tc.args,
+              status: "running"
+            };
+            toolCallsMap.set(tc.id, chatTc);
+            setMessages((prev) => prev.map((m) => m.id === result.messageId ? { ...m, toolCalls: Array.from(toolCallsMap.values()) } : m));
+          } else if (chunk.type === "tool_result" && chunk.toolResult) {
+            const tr = chunk.toolResult;
+            const tc = toolCallsMap.get(tr.toolCallId);
+            if (tc) {
+              tc.result = tr.result;
+              tc.status = "completed";
+            }
+            setMessages((prev) => prev.map((m) => m.id === result.messageId ? { ...m, toolCalls: Array.from(toolCallsMap.values()) } : m));
           } else if (chunk.type === "done") {
             setMessages((prev) => prev.map((m) => m.id === result.messageId ? {
               ...m,
+              content: fullContent,
+              reasoning: fullReasoning || undefined,
+              sources: sources.length ? sources : undefined,
+              toolCalls: toolCallsMap.size ? Array.from(toolCallsMap.values()) : undefined,
               status: "completed",
               usage: chunk.usage,
               updatedAt: new Date
@@ -498,6 +658,10 @@ function useChat(options = {}) {
     abortControllerRef.current?.abort();
     setIsLoading(false);
   }, []);
+  const addToolApprovalResponse = React.useCallback((_toolCallId, _result) => {
+    throw new Error(`addToolApprovalResponse: Tool approval requires server route with toUIMessageStreamResponse. ` + `Use createChatRoute and @ai-sdk/react useChat for tools with requireApproval.`);
+  }, []);
+  const hasApprovalTools = toolsDefs?.some((t) => t.requireApproval) ?? false;
   return {
     messages,
     conversation,
@@ -507,7 +671,8 @@ function useChat(options = {}) {
     clearConversation,
     setConversationId,
     regenerate,
-    stop
+    stop,
+    ...hasApprovalTools && { addToolApprovalResponse }
   };
 }
 // src/presentation/hooks/useProviders.tsx
@@ -550,7 +715,11 @@ function useProviders() {
     refresh: loadProviders
   };
 }
+
+// src/presentation/hooks/index.ts
+import { useCompletion } from "@ai-sdk/react";
 export {
   useProviders,
+  useCompletion,
   useChat
 };