@apteva/apteva-kit 0.1.23 → 0.1.25

package/dist/index.d.mts

@@ -20,6 +20,8 @@ interface Widget {
     id: string;
     props: Record<string, any>;
     actions?: Action[];
+    /** Additional data not displayed but captured via onWidgetRender */
+    meta?: Record<string, any>;
 }
 interface CardWidget extends Widget {
     type: 'card';

package/dist/index.d.ts

@@ -20,6 +20,8 @@ interface Widget {
     id: string;
     props: Record<string, any>;
     actions?: Action[];
+    /** Additional data not displayed but captured via onWidgetRender */
+    meta?: Record<string, any>;
 }
 interface CardWidget extends Widget {
     type: 'card';

package/dist/index.js

@@ -594,14 +594,16 @@ function parseWidgetsFromText(text) {
     }
     try {
       const trimmedJson = jsonContent.trim();
-      const props = JSON.parse(trimmedJson);
+      const parsed = JSON.parse(trimmedJson);
       const widgetId = `widget-${widgetType}-${simpleHash(trimmedJson)}`;
+      const { meta, ...props } = parsed;
       segments.push({
         type: "widget",
         widget: {
           type: widgetType,
           id: widgetId,
-          props
+          props,
+          ...meta && { meta }
         }
       });
       hasWidgets = true;
@@ -1275,12 +1277,12 @@ function MarkdownContent({ content, className = "" }) {
 
 function ToolCall({ name, status }) {
   if (status === "running") {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 !text-blue-700 dark:!text-blue-300 text-sm", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { className: "w-4 h-4 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-tool-card apteva-tool-card-running", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "apteva-tool-label", children: [
         "Calling ",
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: name }),
         "..."
@@ -1288,17 +1290,17 @@ function ToolCall({ name, status }) {
     ] });
   }
   if (status === "completed") {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 !text-green-700 dark:!text-green-300 text-sm", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-tool-card apteva-tool-card-completed", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "apteva-tool-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "apteva-tool-label", children: [
         "Tool completed: ",
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: name })
       ] })
     ] });
   }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 !text-red-700 dark:!text-red-300 text-sm", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-tool-card apteva-tool-card-error", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "apteva-tool-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "apteva-tool-label", children: [
       "Tool failed: ",
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: name })
     ] })
@@ -1363,10 +1365,10 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   };
   const renderContent = () => {
     if (isUser) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "whitespace-pre-wrap !text-sm leading-relaxed", children: message.content });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-message-text", children: message.content });
     }
     if (isStreaming && !hasContent) {
-      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-typing-indicator !text-gray-400", children: [
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-typing-indicator", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {})
@@ -1394,13 +1396,13 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
     "div",
     {
       className: cn(
-        "max-w-[80%] px-4 py-2.5 rounded-2xl",
-        isUser ? "bg-blue-600 !text-white rounded-br-md" : "bg-gray-100 dark:bg-gray-800 !text-gray-900 dark:!text-gray-100 rounded-bl-md"
+        "apteva-message-bubble",
+        isUser ? "apteva-message-user" : "apteva-message-assistant"
       ),
       children: [
-        renderContent(),
-        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn(isUser ? "mt-3" : "mt-2"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("!text-xs mt-1.5", isUser ? "!text-blue-200" : "!text-gray-500 dark:!text-gray-400"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: isUser ? "apteva-message-content-user" : "apteva-message-content-assistant", children: renderContent() }),
+        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-message-widgets", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("apteva-message-timestamp", isUser ? "apteva-message-timestamp-user" : "apteva-message-timestamp-assistant"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
       ]
     }
   );
@@ -1567,7 +1569,7 @@ function MessageList({
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
   }, [messages]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: listRef, className: "flex-1 overflow-y-auto px-4 py-4 space-y-3 apteva-scrollbar-hidden", children: messages.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: listRef, className: "apteva-message-list apteva-scrollbar-hidden", children: messages.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     WelcomeScreen,
     {
       title: welcomeTitle,
@@ -1578,7 +1580,7 @@ function MessageList({
       onPromptClick: onPromptClick || (() => {
       })
     }
-  ) : messages.map((message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Message, { message, onAction, enableWidgets, onWidgetRender }) }, message.id)) });
+  ) : messages.map((message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: message.role === "user" ? "apteva-message-row-user" : "apteva-message-row-assistant", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Message, { message, onAction, enableWidgets, onWidgetRender }) }, message.id)) });
 }
 
 // src/components/Chat/Composer.tsx