@apteva/apteva-kit 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,54 +1,16 @@
-"use client";
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Button: () => Button,
-  Card: () => Card,
-  Chat: () => Chat,
-  Command: () => Command,
-  List: () => List,
-  Prompt: () => Prompt,
-  Stream: () => Stream,
-  Threads: () => Threads,
-  Widgets: () => Widgets,
-  cn: () => cn,
-  getThemeScript: () => getThemeScript,
-  mockMessages: () => mockMessages,
-  mockThreads: () => mockThreads,
-  mockWidgets: () => mockWidgets
-});
-module.exports = __toCommonJS(index_exports);
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 // src/components/Chat/Chat.tsx
-var import_react4 = require("react");
+var _react = require('react');
 
 // src/components/Chat/MessageList.tsx
-var import_react2 = require("react");
+
 
 // src/utils/cn.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
+var _clsx = require('clsx');
+var _tailwindmerge = require('tailwind-merge');
 function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+  return _tailwindmerge.twMerge.call(void 0, _clsx.clsx.call(void 0, inputs));
 }
 
 // src/utils/mock-data.ts
@@ -222,29 +184,29 @@ function generateMockStreamingResponse(text, onChunk, typingSpeed = 30) {
 }
 
 // src/components/Widgets/Widgets.tsx
-var import_react = require("react");
+
 
 // src/components/Widgets/widget-library/Card.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var _jsxruntime = require('react/jsx-runtime');
 function Card({ widget, onAction }) {
   const { title, description, image, footer } = widget.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "apteva-widget-card", children: [
-    image && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: image, alt: title, className: "w-full h-48 object-cover" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-gray-600 dark:text-gray-400 mt-2", children: description })
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-widget-card", children: [
+    image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: image, alt: title, className: "w-full h-48 object-cover" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }),
+      description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-gray-600 dark:text-gray-400 mt-2", children: description })
     ] }),
-    (footer || widget.actions && widget.actions.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border-t border-gray-200 dark:border-gray-700 p-4 flex justify-between items-center", children: [
-      footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: footer }),
-      widget.actions && widget.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    (footer || widget.actions && widget.actions.length > 0) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border-t border-gray-200 dark:border-gray-700 p-4 flex justify-between items-center", children: [
+      footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm text-gray-600 dark:text-gray-400", children: footer }),
+      widget.actions && widget.actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => onAction?.({
+          onClick: () => _optionalChain([onAction, 'optionalCall', _ => _({
             type: action.type,
             payload: action.payload,
             widgetId: widget.id,
             timestamp: /* @__PURE__ */ new Date()
-          }),
+          })]),
           className: "apteva-widget-button",
           children: action.label
         },
@@ -255,25 +217,25 @@ function Card({ widget, onAction }) {
 }
 
 // src/components/Widgets/widget-library/List.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+
 function List({ widget, onAction }) {
   const { items } = widget.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "apteva-widget-list", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors", children: [
-    item.image && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-1 ml-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "font-semibold text-gray-900 dark:text-white", children: item.title }),
-      item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: item.subtitle }),
-      item.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-500 mt-1", children: item.description })
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-widget-list", children: items.map((item) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors", children: [
+    item.image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 ml-4", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-semibold text-gray-900 dark:text-white", children: item.title }),
+      item.subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-gray-600 dark:text-gray-400", children: item.subtitle }),
+      item.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs text-gray-500 dark:text-gray-500 mt-1", children: item.description })
     ] }),
-    widget.actions && widget.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    widget.actions && widget.actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
-        onClick: () => onAction?.({
+        onClick: () => _optionalChain([onAction, 'optionalCall', _2 => _2({
           type: action.type,
           payload: item.metadata || item,
           widgetId: widget.id,
           timestamp: /* @__PURE__ */ new Date()
-        }),
+        })]),
         className: "px-3 py-1.5 text-sm rounded-lg font-medium transition-colors bg-apteva-500 text-white hover:bg-apteva-600",
         children: action.label
       },
@@ -283,7 +245,7 @@ function List({ widget, onAction }) {
 }
 
 // src/components/Widgets/widget-library/Button.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+
 function Button({ widget, onAction }) {
   const { label, variant = "primary", disabled = false } = widget.props;
   const variantClasses = {
@@ -292,15 +254,15 @@ function Button({ widget, onAction }) {
     outline: "border-2 border-apteva-500 text-apteva-500 hover:bg-apteva-50",
     ghost: "text-apteva-500 hover:bg-apteva-50"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "button",
     {
-      onClick: () => widget.actions?.[0] && onAction?.({
+      onClick: () => _optionalChain([widget, 'access', _3 => _3.actions, 'optionalAccess', _4 => _4[0]]) && _optionalChain([onAction, 'optionalCall', _5 => _5({
         type: widget.actions[0].type,
         payload: widget.actions[0].payload,
         widgetId: widget.id,
         timestamp: /* @__PURE__ */ new Date()
-      }),
+      })]),
       disabled,
       className: cn("px-4 py-2 rounded-lg font-medium transition-colors", variantClasses[variant], {
         "opacity-50 cursor-not-allowed": disabled
@@ -311,28 +273,28 @@ function Button({ widget, onAction }) {
 }
 
 // src/components/Widgets/WidgetRenderer.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+
 function WidgetRenderer({ widget, onAction }) {
   switch (widget.type) {
     case "card":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Card, { widget, onAction });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Card, { widget, onAction });
     case "list":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(List, { widget, onAction });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, List, { widget, onAction });
     case "button":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { widget, onAction });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { widget, onAction });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-sm text-yellow-800", children: [
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-sm text-yellow-800", children: [
           "Unknown widget type: ",
           widget.type
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
       ] });
   }
 }
 
 // src/components/Widgets/Widgets.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+
 function Widgets({
   widgets,
   onAction,
@@ -342,9 +304,9 @@ function Widgets({
   columns = 3,
   className
 }) {
-  (0, import_react.useEffect)(() => {
+  _react.useEffect.call(void 0, () => {
     widgets.forEach((widget) => {
-      onWidgetMount?.(widget.id);
+      _optionalChain([onWidgetMount, 'optionalCall', _6 => _6(widget.id)]);
     });
   }, [widgets, onWidgetMount]);
   const layoutClasses = {
@@ -357,41 +319,41 @@ function Widgets({
     normal: "gap-4",
     loose: "gap-6"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WidgetRenderer, { widget, onAction }, widget.id)) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WidgetRenderer, { widget, onAction }, widget.id)) });
 }
 
 // src/components/Chat/Message.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+
 function Message({ message, onAction }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("apteva-message", isUser ? "apteva-message-user" : "apteva-message-assistant"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "whitespace-pre-wrap", children: message.content }),
-    message.widgets && message.widgets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-xs opacity-70 mt-2", children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("apteva-message", isUser ? "apteva-message-user" : "apteva-message-assistant"), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "whitespace-pre-wrap", children: message.content }),
+    message.widgets && message.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-xs opacity-70 mt-2", children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
   ] });
 }
 
 // src/components/Chat/MessageList.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+
 function MessageList({ messages, onAction }) {
-  const listRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
+  const listRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
     if (listRef.current) {
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
   }, [messages]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: listRef, className: "apteva-message-list", children: messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center justify-center h-full text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "text-center space-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-4xl", children: "\u{1F4AC}" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "No messages yet. Start a conversation!" })
-  ] }) }) : messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Message, { message, onAction }, message.id)) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: listRef, className: "apteva-message-list", children: messages.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center h-full text-gray-500", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-center space-y-2", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-4xl", children: "\u{1F4AC}" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: "No messages yet. Start a conversation!" })
+  ] }) }) : messages.map((message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Message, { message, onAction }, message.id)) });
 }
 
 // src/components/Chat/Composer.tsx
-var import_react3 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+
+
 function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false }) {
-  const [text, setText] = (0, import_react3.useState)("");
-  const textareaRef = (0, import_react3.useRef)(null);
+  const [text, setText] = _react.useState.call(void 0, "");
+  const textareaRef = _react.useRef.call(void 0, null);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -412,9 +374,9 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
     e.target.style.height = "auto";
     e.target.style.height = `${e.target.scrollHeight}px`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "apteva-composer", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-composer", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "textarea",
         {
           ref: textareaRef,
@@ -428,7 +390,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
           style: { maxHeight: "200px" }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
           onClick: handleSend,
@@ -438,12 +400,12 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs text-gray-500 mt-2", children: "Press Enter to send, Shift+Enter for new line" })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-xs text-gray-500 mt-2", children: "Press Enter to send, Shift+Enter for new line" })
   ] });
 }
 
 // src/components/Chat/Chat.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+
 function Chat({
   agentId,
   threadId,
@@ -456,12 +418,12 @@ function Chat({
   headerTitle = "Chat",
   className
 }) {
-  const [messages, setMessages] = (0, import_react4.useState)(initialMessages.length > 0 ? initialMessages : mockMessages);
-  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
-  (0, import_react4.useEffect)(() => {
+  const [messages, setMessages] = _react.useState.call(void 0, initialMessages.length > 0 ? initialMessages : mockMessages);
+  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
     if (threadId) {
       console.log("Loading thread:", threadId);
-      onThreadChange?.(threadId);
+      _optionalChain([onThreadChange, 'optionalCall', _7 => _7(threadId)]);
     }
   }, [threadId, onThreadChange]);
   const handleSendMessage = async (text) => {
@@ -472,7 +434,7 @@ function Chat({
       timestamp: /* @__PURE__ */ new Date()
     };
     setMessages((prev) => [...prev, userMessage]);
-    onMessageSent?.(userMessage);
+    _optionalChain([onMessageSent, 'optionalCall', _8 => _8(userMessage)]);
     setIsLoading(true);
     try {
       const response = await generateMockResponse(1e3);
@@ -483,23 +445,23 @@ function Chat({
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("apteva-chat-container", className), children: [
-    showHeader && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "border-b border-gray-200 dark:border-gray-700 px-4 py-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: headerTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("apteva-chat-container", className), children: [
+    showHeader && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border-b border-gray-200 dark:border-gray-700 px-4 py-3", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: headerTitle }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
         "Agent: ",
         agentId
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MessageList, { messages, onAction }),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-4 py-2 text-sm text-gray-500 italic", children: "AI is thinking..." }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Composer, { onSendMessage: handleSendMessage, placeholder, disabled: isLoading })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MessageList, { messages, onAction }),
+    isLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 py-2 text-sm text-gray-500 italic", children: "AI is thinking..." }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Composer, { onSendMessage: handleSendMessage, placeholder, disabled: isLoading })
   ] });
 }
 
 // src/components/Command/Command.tsx
-var import_react5 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+
+
 function Command({
   agentId,
   command: initialCommand,
@@ -520,13 +482,13 @@ function Command({
   resultRenderer,
   className
 }) {
-  const [state, setState] = (0, import_react5.useState)("idle");
-  const [result, setResult] = (0, import_react5.useState)(null);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const [progress, setProgress] = (0, import_react5.useState)(0);
-  const [command, setCommand] = (0, import_react5.useState)(initialCommand || "");
-  const [streamedContent, setStreamedContent] = (0, import_react5.useState)("");
-  (0, import_react5.useEffect)(() => {
+  const [state, setState] = _react.useState.call(void 0, "idle");
+  const [result, setResult] = _react.useState.call(void 0, null);
+  const [error, setError] = _react.useState.call(void 0, null);
+  const [progress, setProgress] = _react.useState.call(void 0, 0);
+  const [command, setCommand] = _react.useState.call(void 0, initialCommand || "");
+  const [streamedContent, setStreamedContent] = _react.useState.call(void 0, "");
+  _react.useEffect.call(void 0, () => {
     if (autoExecute && state === "idle" && command) {
       executeCommand();
     }
@@ -541,7 +503,7 @@ function Command({
     setError(null);
     setProgress(0);
     setStreamedContent("");
-    onStart?.();
+    _optionalChain([onStart, 'optionalCall', _9 => _9()]);
     try {
       if (enableStreaming) {
         const mockStreamChunks = [
@@ -557,9 +519,9 @@ function Command({
           await new Promise((resolve) => setTimeout(resolve, 600 + Math.random() * 400));
           const chunk = mockStreamChunks[i];
           setStreamedContent(chunk);
-          onChunk?.(chunk);
+          _optionalChain([onChunk, 'optionalCall', _10 => _10(chunk)]);
           setProgress(Math.round((i + 1) / mockStreamChunks.length * 100));
-          onProgress?.(Math.round((i + 1) / mockStreamChunks.length * 100));
+          _optionalChain([onProgress, 'optionalCall', _11 => _11(Math.round((i + 1) / mockStreamChunks.length * 100))]);
         }
         const mockResult = {
           success: true,
@@ -574,12 +536,12 @@ function Command({
         setResult(mockResult);
         setState("success");
         setProgress(100);
-        onComplete?.(mockResult);
+        _optionalChain([onComplete, 'optionalCall', _12 => _12(mockResult)]);
       } else {
         const progressInterval = setInterval(() => {
           setProgress((prev) => {
             const next = Math.min(prev + 10, 90);
-            onProgress?.(next);
+            _optionalChain([onProgress, 'optionalCall', _13 => _13(next)]);
             return next;
           });
         }, 200);
@@ -598,13 +560,13 @@ function Command({
         setResult(mockResult);
         setState("success");
         setProgress(100);
-        onComplete?.(mockResult);
+        _optionalChain([onComplete, 'optionalCall', _14 => _14(mockResult)]);
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      onError?.(error2);
+      _optionalChain([onError, 'optionalCall', _15 => _15(error2)]);
     }
   };
   const resetCommand = () => {
@@ -615,22 +577,22 @@ function Command({
     setCommand("");
   };
   const isCompact = variant === "compact";
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
       className: cn(
         "relative border-2 rounded-xl bg-white dark:bg-gray-900 transition-all duration-300 flex flex-col",
         state === "loading" && "animate-pulse-border",
         state === "idle" && "border-gray-300 dark:border-gray-700",
-        state === "loading" && "border-apteva-500",
+        state === "loading" && "border-blue-500",
         state === "success" && "border-green-500",
         state === "error" && "border-red-500",
         className
       ),
       style: { minHeight: isCompact ? "auto" : "180px" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex-1 flex", isCompact ? "flex-row items-center p-3 gap-3" : "flex-col p-4"), children: [
-          state === "idle" && allowInput && !isCompact && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("flex-1 flex", isCompact ? "flex-row items-center p-3 gap-3" : "flex-col p-4"), children: [
+          state === "idle" && allowInput && !isCompact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "textarea",
             {
               value: command,
@@ -642,12 +604,12 @@ function Command({
                 }
               },
               placeholder,
-              className: "flex-1 w-full resize-none bg-transparent border-none focus:outline-none text-gray-900 dark:text-white placeholder-gray-400",
+              className: "flex-1 w-full resize-none bg-transparent border-none focus:outline-none text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500",
               rows: 6
             }
           ),
-          state === "idle" && allowInput && isCompact && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          state === "idle" && allowInput && isCompact && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "input",
               {
                 type: "text",
@@ -660,10 +622,10 @@ function Command({
                   }
                 },
                 placeholder,
-                className: "flex-1 bg-transparent border-none focus:outline-none text-gray-900 dark:text-white placeholder-gray-400 py-1"
+                className: "flex-1 bg-transparent border-none focus:outline-none text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 py-1"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
                 onClick: executeCommand,
@@ -682,29 +644,29 @@ function Command({
               }
             )
           ] }),
-          state === "loading" && !isCompact && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-6 h-6 border-2 border-gray-300 border-t-apteva-500 rounded-full animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-gray-600 dark:text-gray-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
-            showProgress && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full max-w-sm", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          state === "loading" && !isCompact && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-600 dark:text-gray-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
+            showProgress && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full max-w-sm", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "div",
                 {
-                  className: "bg-apteva-500 h-1.5 rounded-full transition-all duration-300",
+                  className: "bg-blue-500 h-1.5 rounded-full transition-all duration-300",
                   style: { width: `${progress}%` }
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-xs text-gray-500 mt-2 text-center", children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-xs text-gray-500 mt-2 text-center", children: [
                 progress,
                 "%"
               ] })
             ] })
           ] }),
-          state === "loading" && isCompact && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-apteva-500 rounded-full animate-spin" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-gray-600 dark:text-gray-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
+          state === "loading" && isCompact && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 flex items-center gap-3 py-1", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-600 dark:text-gray-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
                 disabled: true,
@@ -719,15 +681,15 @@ function Command({
               }
             )
           ] }),
-          state === "error" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
+          state === "error" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 flex flex-col", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _16 => _16.message]) })
               ] })
             ] }) }),
-            allowInput && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "textarea",
               {
                 value: command,
@@ -744,22 +706,22 @@ function Command({
               }
             )
           ] }),
-          state === "success" && result && !isCompact && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-start gap-3 mb-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-green-700 dark:text-green-300 text-sm", children: result.message || "Command executed successfully" })
+          state === "success" && result && !isCompact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3 mb-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-green-700 dark:text-green-300 text-sm", children: result.message || "Command executed successfully" })
               ] })
             ] }),
-            result.data?.summary && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed", children: result.data.summary })
+            _optionalChain([result, 'access', _17 => _17.data, 'optionalAccess', _18 => _18.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed", children: result.data.summary })
           ] }) }),
-          state === "success" && result && isCompact && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 flex items-center gap-2 py-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-green-700 dark:text-green-300 text-sm truncate", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
+          state === "success" && result && isCompact && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 flex items-center gap-2 py-1", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-green-700 dark:text-green-300 text-sm truncate", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
                 disabled: true,
@@ -775,8 +737,8 @@ function Command({
             )
           ] })
         ] }),
-        !isCompact && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "p-3 flex items-center justify-end gap-2", children: [
-          (state === "success" || state === "error") && allowInput && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        !isCompact && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-3 flex items-center justify-end gap-2", children: [
+          (state === "success" || state === "error") && allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
               onClick: resetCommand,
@@ -784,7 +746,7 @@ function Command({
               children: "Reset"
             }
           ),
-          (state === "idle" || state === "error") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          (state === "idle" || state === "error") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
               onClick: executeCommand,
@@ -803,7 +765,7 @@ function Command({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { dangerouslySetInnerHTML: {
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", { dangerouslySetInnerHTML: {
           __html: `
           @keyframes pulse-border {
             0%, 100% {
@@ -824,8 +786,8 @@ function Command({
 }
 
 // src/components/Prompt/Prompt.tsx
-var import_react6 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+
+
 function Prompt({
   agentId,
   placeholder = "Enter your prompt...",
@@ -841,24 +803,24 @@ function Prompt({
   showSuggestions = false,
   className
 }) {
-  const [value, setValue] = (0, import_react6.useState)(initialValue);
-  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
-  const [suggestions] = (0, import_react6.useState)(["Plan a trip", "Write a description", "Analyze data"]);
+  const [value, setValue] = _react.useState.call(void 0, initialValue);
+  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
+  const [suggestions] = _react.useState.call(void 0, ["Plan a trip", "Write a description", "Analyze data"]);
   const handleChange = (e) => {
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      onChange?.(newValue);
+      _optionalChain([onChange, 'optionalCall', _19 => _19(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    onSubmit?.(value);
+    _optionalChain([onSubmit, 'optionalCall', _20 => _20(value)]);
     setIsLoading(true);
     try {
       await new Promise((resolve) => setTimeout(resolve, 1500));
       const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-      onResult?.(mockResult);
+      _optionalChain([onResult, 'optionalCall', _21 => _21(mockResult)]);
       setValue("");
     } catch (error) {
       console.error("Error processing prompt:", error);
@@ -877,9 +839,9 @@ function Prompt({
       handleSubmit();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "input",
         {
           type: "text",
@@ -892,7 +854,7 @@ function Prompt({
           className: "flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white"
         }
       ),
-      submitOn === "button" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      submitOn === "button" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
           onClick: handleSubmit,
@@ -902,13 +864,13 @@ function Prompt({
         }
       )
     ] }),
-    maxLength && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "text-xs text-gray-500", children: [
+    maxLength && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-xs text-gray-500", children: [
       value.length,
       " / ",
       maxLength,
       " characters"
     ] }),
-    showSuggestions && !value && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    showSuggestions && !value && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
         onClick: () => setValue(suggestion),
@@ -917,16 +879,16 @@ function Prompt({
       },
       idx
     )) }),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "AI is processing your request..." })
+    isLoading && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "AI is processing your request..." })
     ] })
   ] });
 }
 
 // src/components/Stream/Stream.tsx
-var import_react7 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+
+
 function Stream({
   agentId,
   prompt,
@@ -941,33 +903,33 @@ function Stream({
   typingSpeed = 30,
   className
 }) {
-  const [text, setText] = (0, import_react7.useState)("");
-  const [isStreaming, setIsStreaming] = (0, import_react7.useState)(false);
-  const [isComplete, setIsComplete] = (0, import_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
+  const [text, setText] = _react.useState.call(void 0, "");
+  const [isStreaming, setIsStreaming] = _react.useState.call(void 0, false);
+  const [isComplete, setIsComplete] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
     if (autoStart && !isStreaming && !isComplete) {
       startStreaming();
     }
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    onStart?.();
+    _optionalChain([onStart, 'optionalCall', _22 => _22()]);
     const mockText = "This is a simulated streaming response from the AI agent. In a real implementation, this would stream data from your backend API. The text appears word by word to simulate the streaming effect. You can customize the typing speed and styling based on your needs.";
     try {
       await generateMockStreamingResponse(
         mockText,
         (chunk) => {
           setText((prev) => prev + chunk);
-          onChunk?.(chunk);
+          _optionalChain([onChunk, 'optionalCall', _23 => _23(chunk)]);
         },
         typingSpeed
       );
       setIsComplete(true);
       setIsStreaming(false);
-      onComplete?.(text + mockText);
+      _optionalChain([onComplete, 'optionalCall', _24 => _24(text + mockText)]);
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      onError?.(err);
+      _optionalChain([onError, 'optionalCall', _25 => _25(err)]);
       setIsStreaming(false);
     }
   };
@@ -977,7 +939,7 @@ function Stream({
     plain: "text-gray-900 dark:text-gray-100"
   };
   if (!isStreaming && !isComplete) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("p-4", className), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
         onClick: startStreaming,
@@ -986,19 +948,19 @@ function Stream({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn(variantClasses[variant], className), children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn(variantClasses[variant], className), children: [
     text,
-    isStreaming && showCursor && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "apteva-stream-cursor" })
+    isStreaming && showCursor && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-stream-cursor" })
   ] });
 }
 
 // src/components/Threads/ThreadList.tsx
-var import_react8 = require("react");
+
 
 // src/components/Threads/ThreadItem.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+
 function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
       className: cn("apteva-thread-item", {
@@ -1006,19 +968,19 @@ function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
       }),
       onClick: onSelect,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h4", { className: "font-semibold text-gray-900 dark:text-white truncate", children: thread.title }),
-          thread.preview && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-gray-600 dark:text-gray-400 truncate", children: thread.preview }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-500", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-semibold text-gray-900 dark:text-white truncate", children: thread.title }),
+          thread.preview && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-gray-600 dark:text-gray-400 truncate", children: thread.preview }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-500", children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
               thread.messageCount,
               " messages"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "\u2022" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: formatRelativeTime(thread.updatedAt) })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\u2022" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: formatRelativeTime(thread.updatedAt) })
           ] })
         ] }),
-        onDelete && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        onDelete && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "button",
           {
             onClick: (e) => {
@@ -1048,7 +1010,7 @@ function formatRelativeTime(date) {
 }
 
 // src/components/Threads/ThreadList.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+
 function ThreadList({
   threads,
   currentThreadId,
@@ -1057,13 +1019,13 @@ function ThreadList({
   showSearch = false,
   groupBy = "none"
 }) {
-  const [searchQuery, setSearchQuery] = (0, import_react8.useState)("");
+  const [searchQuery, setSearchQuery] = _react.useState.call(void 0, "");
   const filteredThreads = threads.filter(
-    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _26 => _26.preview, 'optionalAccess', _27 => _27.toLowerCase, 'call', _28 => _28(), 'access', _29 => _29.includes, 'call', _30 => _30(searchQuery.toLowerCase())])
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col h-full", children: [
-    showSearch && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col h-full", children: [
+    showSearch && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "input",
       {
         type: "text",
@@ -1073,23 +1035,23 @@ function ThreadList({
         className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-1 overflow-y-auto", children: [
-      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-        groupBy !== "none" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500 uppercase", children: group }),
-        groupThreads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 overflow-y-auto", children: [
+      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+        groupBy !== "none" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-2 text-xs font-semibold text-gray-500 uppercase", children: group }),
+        groupThreads.map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           ThreadItem,
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => onThreadSelect?.(thread.id),
-            onDelete: () => onThreadDelete?.(thread.id)
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _31 => _31(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _32 => _32(thread.id)])
           },
           thread.id
         ))
       ] }, group)),
-      filteredThreads.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "p-8 text-center text-gray-500", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-4xl mb-2", children: "\u{1F4AC}" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: "No conversations found" })
+      filteredThreads.length === 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-8 text-center text-gray-500", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-4xl mb-2", children: "\u{1F4AC}" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: "No conversations found" })
       ] })
     ] })
   ] });
@@ -1121,7 +1083,7 @@ function groupThreadsByDate(threads) {
 }
 
 // src/components/Threads/Threads.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+
 function Threads({
   threads,
   currentThreadId,
@@ -1140,11 +1102,11 @@ function Threads({
     tabs: "flex gap-2 border-b border-gray-200 dark:border-gray-700 overflow-x-auto"
   };
   if (variant === "tabs") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn(variantClasses[variant], className), children: [
-      threads.slice(0, 5).map((thread) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn(variantClasses[variant], className), children: [
+      threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => onThreadSelect?.(thread.id),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _33 => _33(thread.id)]),
           className: cn(
             "px-4 py-2 whitespace-nowrap font-medium transition-colors",
             thread.id === currentThreadId ? "border-b-2 border-apteva-500 text-apteva-500" : "text-gray-600 hover:text-gray-900"
@@ -1153,7 +1115,7 @@ function Threads({
         },
         thread.id
       )),
-      showNewButton && onNewThread && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      showNewButton && onNewThread && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
           onClick: onNewThread,
@@ -1163,8 +1125,8 @@ function Threads({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
-    showNewButton && onNewThread && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
+    showNewButton && onNewThread && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
         onClick: onNewThread,
@@ -1172,7 +1134,7 @@ function Threads({
         children: "+ New Conversation"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       ThreadList,
       {
         threads,
@@ -1209,21 +1171,20 @@ var themeScript = `
 function getThemeScript() {
   return themeScript;
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Button,
-  Card,
-  Chat,
-  Command,
-  List,
-  Prompt,
-  Stream,
-  Threads,
-  Widgets,
-  cn,
-  getThemeScript,
-  mockMessages,
-  mockThreads,
-  mockWidgets
-});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Button = Button; exports.Card = Card; exports.Chat = Chat; exports.Command = Command; exports.List = List; exports.Prompt = Prompt; exports.Stream = Stream; exports.Threads = Threads; exports.Widgets = Widgets; exports.cn = cn; exports.getThemeScript = getThemeScript; exports.mockMessages = mockMessages; exports.mockThreads = mockThreads; exports.mockWidgets = mockWidgets;
 //# sourceMappingURL=index.js.map