@yourgpt/copilot-sdk 0.1.0 → 0.1.1

package/dist/ui/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkW6KQT7YZ_cjs = require('../chunk-W6KQT7YZ.cjs');
-require('../chunk-2ZCWVAAK.cjs');
+var chunkR452HH3J_cjs = require('../chunk-R452HH3J.cjs');
+require('../chunk-IH7WXWX4.cjs');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -3055,6 +3055,7 @@ function DefaultMessage({
   size = "sm",
   isLastMessage = false,
   isLoading = false,
+  registeredTools,
   toolRenderers,
   onApproveToolExecution,
   onRejectToolExecution,
@@ -3114,13 +3115,19 @@ function DefaultMessage({
   const completedTools = message.toolExecutions?.filter(
     (exec) => exec.approvalStatus !== "required"
   );
-  const toolsWithCustomRenderer = completedTools?.filter(
-    (exec) => toolRenderers && toolRenderers[exec.name]
+  const hasCustomRender = (toolName) => {
+    if (toolRenderers?.[toolName]) return true;
+    const toolDef = registeredTools?.find((t) => t.name === toolName);
+    if (toolDef?.render) return true;
+    return false;
+  };
+  const toolsWithCustomRender = completedTools?.filter(
+    (exec) => hasCustomRender(exec.name)
   );
-  const toolsWithoutCustomRenderer = completedTools?.filter(
-    (exec) => !toolRenderers || !toolRenderers[exec.name]
+  const toolsWithoutCustomRender = completedTools?.filter(
+    (exec) => !hasCustomRender(exec.name)
   );
-  const toolSteps = toolsWithoutCustomRenderer?.map((exec) => ({
+  const toolSteps = toolsWithoutCustomRender?.map((exec) => ({
     id: exec.id,
     name: exec.name,
     args: exec.args,
@@ -3159,36 +3166,97 @@ function DefaultMessage({
           children: cleanContent
         }
       ),
-      toolsWithCustomRenderer && toolsWithCustomRenderer.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 space-y-2", children: toolsWithCustomRenderer.map((exec) => {
-        const Renderer = toolRenderers[exec.name];
+      toolsWithCustomRender && toolsWithCustomRender.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 space-y-2", children: toolsWithCustomRender.map((exec) => {
+        const Renderer = toolRenderers?.[exec.name];
+        if (Renderer) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Renderer,
+            {
+              execution: {
+                id: exec.id,
+                name: exec.name,
+                args: exec.args,
+                status: exec.status,
+                result: exec.result,
+                error: exec.error,
+                approvalStatus: exec.approvalStatus
+              }
+            },
+            exec.id
+          );
+        }
+        const toolDef = registeredTools?.find(
+          (t) => t.name === exec.name
+        );
+        if (toolDef?.render) {
+          let status = "pending";
+          if (exec.status === "executing") status = "executing";
+          else if (exec.status === "completed") status = "completed";
+          else if (exec.status === "error" || exec.status === "failed" || exec.status === "rejected")
+            status = "error";
+          const renderProps = {
+            status,
+            args: exec.args,
+            result: exec.result,
+            error: exec.error,
+            toolCallId: exec.id,
+            toolName: exec.name
+          };
+          const output = toolDef.render(renderProps);
+          return /* @__PURE__ */ jsxRuntime.jsx(React8__namespace.Fragment, { children: output }, exec.id);
+        }
+        return null;
+      }) }),
+      toolSteps && toolSteps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 rounded-lg bg-muted/50 px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(ToolSteps, { steps: toolSteps }) }),
+      pendingApprovalTools && pendingApprovalTools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 space-y-2", children: pendingApprovalTools.map((tool) => {
+        const approvalCallbacks = {
+          onApprove: (extraData) => onApproveToolExecution?.(tool.id, extraData),
+          onReject: (reason) => onRejectToolExecution?.(tool.id, reason),
+          message: tool.approvalMessage
+        };
+        const CustomRenderer = toolRenderers?.[tool.name];
+        if (CustomRenderer) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            CustomRenderer,
+            {
+              execution: tool,
+              approval: approvalCallbacks
+            },
+            tool.id
+          );
+        }
+        const toolDef = registeredTools?.find(
+          (t) => t.name === tool.name
+        );
+        if (toolDef?.render) {
+          const renderProps = {
+            status: "approval-required",
+            args: tool.args,
+            result: tool.result,
+            error: tool.error,
+            toolCallId: tool.id,
+            toolName: tool.name,
+            approval: approvalCallbacks
+          };
+          const output = toolDef.render(renderProps);
+          return /* @__PURE__ */ jsxRuntime.jsx(React8__namespace.Fragment, { children: output }, tool.id);
+        }
         return /* @__PURE__ */ jsxRuntime.jsx(
-          Renderer,
+          PermissionConfirmation,
           {
-            execution: {
-              id: exec.id,
-              name: exec.name,
-              args: exec.args,
-              status: exec.status,
-              result: exec.result,
-              error: exec.error,
-              approvalStatus: exec.approvalStatus
-            }
+            state: "pending",
+            toolName: tool.name,
+            message: tool.approvalMessage || `This tool wants to execute. Do you approve?`,
+            onApprove: (permissionLevel) => onApproveToolExecution?.(
+              tool.id,
+              void 0,
+              permissionLevel
+            ),
+            onReject: (permissionLevel) => onRejectToolExecution?.(tool.id, void 0, permissionLevel)
           },
-          exec.id
+          tool.id
         );
       }) }),
-      toolSteps && toolSteps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 rounded-lg bg-muted/50 px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(ToolSteps, { steps: toolSteps }) }),
-      pendingApprovalTools && pendingApprovalTools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 space-y-2", children: pendingApprovalTools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(
-        PermissionConfirmation,
-        {
-          state: "pending",
-          toolName: tool.name,
-          message: tool.approvalMessage || `This tool wants to execute. Do you approve?`,
-          onApprove: (permissionLevel) => onApproveToolExecution?.(tool.id, permissionLevel),
-          onReject: (permissionLevel) => onRejectToolExecution?.(tool.id, void 0, permissionLevel)
-        },
-        tool.id
-      )) }),
       message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, { attachment }, index)) }),
       shouldShowFollowUps && /* @__PURE__ */ jsxRuntime.jsx(
         FollowUpQuestions,
@@ -3339,6 +3407,7 @@ function Chat({
   onSuggestionClick,
   // Tool Executions
   isProcessing = false,
+  registeredTools,
   toolRenderers,
   onApproveToolExecution,
   onRejectToolExecution,
@@ -3583,6 +3652,7 @@ function Chat({
                           size: fontSize,
                           isLastMessage,
                           isLoading,
+                          registeredTools,
                           toolRenderers,
                           onApproveToolExecution,
                           onRejectToolExecution,
@@ -3761,6 +3831,7 @@ function ToolExecutionMessage({
   assistantAvatar = { fallback: "AI" },
   onApprove,
   onReject,
+  toolRenderers,
   className
 }) {
   if (!executions || executions.length === 0) return null;
@@ -3844,17 +3915,34 @@ function ToolExecutionMessage({
         ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground", children: hasExecuting ? "Running tools..." : allCompleted ? `${executions.length} tool${executions.length > 1 ? "s" : ""} completed` : "Tools" })
       ] }) }),
-      pendingApprovals.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 space-y-2", children: pendingApprovals.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(
-        PermissionConfirmation,
-        {
-          state: "pending",
-          toolName: tool.name,
-          message: tool.approvalMessage || `This tool wants to execute. Do you approve?`,
-          onApprove: (permissionLevel) => onApprove?.(tool.id, permissionLevel),
-          onReject: (permissionLevel) => onReject?.(tool.id, void 0, permissionLevel)
-        },
-        tool.id
-      )) }),
+      pendingApprovals.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 space-y-2", children: pendingApprovals.map((tool) => {
+        const CustomRenderer = toolRenderers?.[tool.name];
+        if (CustomRenderer) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            CustomRenderer,
+            {
+              execution: tool,
+              approval: {
+                onApprove: (extraData) => onApprove?.(tool.id, extraData),
+                onReject: (reason) => onReject?.(tool.id, reason),
+                message: tool.approvalMessage
+              }
+            },
+            tool.id
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          PermissionConfirmation,
+          {
+            state: "pending",
+            toolName: tool.name,
+            message: tool.approvalMessage || `This tool wants to execute. Do you approve?`,
+            onApprove: (permissionLevel) => onApprove?.(tool.id, void 0, permissionLevel),
+            onReject: (permissionLevel) => onReject?.(tool.id, void 0, permissionLevel)
+          },
+          tool.id
+        );
+      }) }),
       toolSteps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-card px-3 py-2.5 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ToolSteps, { steps: toolSteps }) })
     ] })
   ] });
@@ -3867,8 +3955,9 @@ function CopilotChat(props) {
     stop,
     toolExecutions: rawToolExecutions,
     approveToolExecution,
-    rejectToolExecution
-  } = chunkW6KQT7YZ_cjs.useCopilot();
+    rejectToolExecution,
+    registeredTools
+  } = chunkR452HH3J_cjs.useCopilot();
   const toolExecutions = rawToolExecutions.map(
     (exec) => ({
       id: exec.id,
@@ -3991,7 +4080,8 @@ function CopilotChat(props) {
       suggestions,
       isProcessing: isProcessingToolResults,
       onApproveToolExecution: approveToolExecution,
-      onRejectToolExecution: rejectToolExecution
+      onRejectToolExecution: rejectToolExecution,
+      registeredTools
     }
   );
 }