@apteva/apteva-kit 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1190 @@
+"use client";
+
+// src/components/Chat/Chat.tsx
+import { useState as useState2, useEffect as useEffect3 } from "react";
+
+// src/components/Chat/MessageList.tsx
+import { useEffect as useEffect2, useRef } from "react";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/utils/mock-data.ts
+var mockMessages = [
+  {
+    id: "msg-1",
+    role: "assistant",
+    content: "Hello! I'm your AI assistant. How can I help you today?",
+    timestamp: new Date(Date.now() - 36e5)
+  },
+  {
+    id: "msg-2",
+    role: "user",
+    content: "I want to plan a trip to Europe",
+    timestamp: new Date(Date.now() - 35e5)
+  },
+  {
+    id: "msg-3",
+    role: "assistant",
+    content: "Great choice! Europe has amazing destinations. What's your budget and how many days do you have?",
+    timestamp: new Date(Date.now() - 34e5)
+  },
+  {
+    id: "msg-4",
+    role: "user",
+    content: "Around $2000 for 5 days",
+    timestamp: new Date(Date.now() - 33e5)
+  },
+  {
+    id: "msg-5",
+    role: "assistant",
+    content: "Perfect! I found some great destinations that fit your budget:",
+    widgets: [
+      {
+        type: "list",
+        id: "destinations-1",
+        props: {
+          items: [
+            {
+              id: "paris",
+              title: "Paris, France",
+              subtitle: "5 days \u2022 $1,850",
+              description: "The City of Light with iconic landmarks",
+              metadata: { city: "Paris", country: "France", lat: 48.8566, lng: 2.3522, price: 1850, days: 5 }
+            },
+            {
+              id: "rome",
+              title: "Rome, Italy",
+              subtitle: "5 days \u2022 $1,650",
+              description: "Ancient history meets modern culture",
+              metadata: { city: "Rome", country: "Italy", lat: 41.9028, lng: 12.4964, price: 1650, days: 5 }
+            },
+            {
+              id: "barcelona",
+              title: "Barcelona, Spain",
+              subtitle: "5 days \u2022 $1,450",
+              description: "Beautiful beaches and Gaud\xED architecture",
+              metadata: { city: "Barcelona", country: "Spain", lat: 41.3851, lng: 2.1734, price: 1450, days: 5 }
+            }
+          ]
+        },
+        actions: [
+          {
+            type: "select_destination",
+            label: "Select",
+            handler: "client",
+            payload: {}
+          },
+          {
+            type: "view_details",
+            label: "Details",
+            handler: "server",
+            payload: {}
+          }
+        ]
+      }
+    ],
+    timestamp: new Date(Date.now() - 32e5)
+  }
+];
+var mockThreads = [
+  {
+    id: "thread-1",
+    title: "Trip to Europe",
+    preview: "Planning a 5-day trip...",
+    createdAt: new Date(Date.now() - 864e5),
+    updatedAt: new Date(Date.now() - 36e5),
+    messageCount: 12
+  },
+  {
+    id: "thread-2",
+    title: "Restaurant Recommendations",
+    preview: "Looking for good places...",
+    createdAt: new Date(Date.now() - 1728e5),
+    updatedAt: new Date(Date.now() - 864e5),
+    messageCount: 8
+  },
+  {
+    id: "thread-3",
+    title: "Budget Planning",
+    preview: "Help with monthly budget",
+    createdAt: new Date(Date.now() - 2592e5),
+    updatedAt: new Date(Date.now() - 1728e5),
+    messageCount: 15
+  }
+];
+var mockWidgets = [
+  {
+    type: "card",
+    id: "card-1",
+    props: {
+      title: "Paris, France",
+      description: "5-day adventure in the City of Light",
+      image: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34",
+      footer: "Total: $1,850"
+    },
+    actions: [
+      {
+        type: "book_trip",
+        label: "Book Now",
+        handler: "client",
+        payload: { tripId: "trip-paris" }
+      }
+    ]
+  },
+  {
+    type: "card",
+    id: "card-2",
+    props: {
+      title: "Rome, Italy",
+      description: "Explore ancient wonders",
+      image: "https://images.unsplash.com/photo-1552832230-c0197dd311b5",
+      footer: "Total: $1,650"
+    },
+    actions: [
+      {
+        type: "book_trip",
+        label: "Book Now",
+        handler: "client",
+        payload: { tripId: "trip-rome" }
+      }
+    ]
+  }
+];
+function generateMockResponse(delay = 1e3) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        id: `msg-${Date.now()}`,
+        role: "assistant",
+        content: "This is a mock response. In production, this would come from your AI agent API.",
+        timestamp: /* @__PURE__ */ new Date()
+      });
+    }, delay);
+  });
+}
+function generateMockStreamingResponse(text, onChunk, typingSpeed = 30) {
+  return new Promise((resolve) => {
+    const words = text.split(" ");
+    let currentIndex = 0;
+    const interval = setInterval(() => {
+      if (currentIndex < words.length) {
+        onChunk(words[currentIndex] + " ");
+        currentIndex++;
+      } else {
+        clearInterval(interval);
+        resolve();
+      }
+    }, typingSpeed);
+  });
+}
+
+// src/components/Widgets/Widgets.tsx
+import { useEffect } from "react";
+
+// src/components/Widgets/widget-library/Card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Card({ widget, onAction }) {
+  const { title, description, image, footer } = widget.props;
+  return /* @__PURE__ */ jsxs("div", { className: "apteva-widget-card", children: [
+    image && /* @__PURE__ */ jsx("img", { src: image, alt: title, className: "w-full h-48 object-cover" }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400 mt-2", children: description })
+    ] }),
+    (footer || widget.actions && widget.actions.length > 0) && /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200 dark:border-gray-700 p-4 flex justify-between items-center", children: [
+      footer && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: footer }),
+      widget.actions && widget.actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onAction?.({
+            type: action.type,
+            payload: action.payload,
+            widgetId: widget.id,
+            timestamp: /* @__PURE__ */ new Date()
+          }),
+          className: "apteva-widget-button",
+          children: action.label
+        },
+        idx
+      )) })
+    ] })
+  ] });
+}
+
+// src/components/Widgets/widget-library/List.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function List({ widget, onAction }) {
+  const { items } = widget.props;
+  return /* @__PURE__ */ jsx2("div", { className: "apteva-widget-list", children: items.map((item) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors", children: [
+    item.image && /* @__PURE__ */ jsx2("img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 ml-4", children: [
+      /* @__PURE__ */ jsx2("h4", { className: "font-semibold text-gray-900 dark:text-white", children: item.title }),
+      item.subtitle && /* @__PURE__ */ jsx2("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: item.subtitle }),
+      item.description && /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 dark:text-gray-500 mt-1", children: item.description })
+    ] }),
+    widget.actions && widget.actions.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: () => onAction?.({
+          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
+      },
+      idx
+    )) })
+  ] }, item.id)) });
+}
+
+// src/components/Widgets/widget-library/Button.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Button({ widget, onAction }) {
+  const { label, variant = "primary", disabled = false } = widget.props;
+  const variantClasses = {
+    primary: "bg-apteva-500 text-white hover:bg-apteva-600",
+    secondary: "bg-gray-500 text-white hover:bg-gray-600",
+    outline: "border-2 border-apteva-500 text-apteva-500 hover:bg-apteva-50",
+    ghost: "text-apteva-500 hover:bg-apteva-50"
+  };
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      onClick: () => widget.actions?.[0] && onAction?.({
+        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
+      }),
+      children: label
+    }
+  );
+}
+
+// src/components/Widgets/WidgetRenderer.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function WidgetRenderer({ widget, onAction }) {
+  switch (widget.type) {
+    case "card":
+      return /* @__PURE__ */ jsx4(Card, { widget, onAction });
+    case "list":
+      return /* @__PURE__ */ jsx4(List, { widget, onAction });
+    case "button":
+      return /* @__PURE__ */ jsx4(Button, { widget, onAction });
+    default:
+      return /* @__PURE__ */ jsxs3("div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
+        /* @__PURE__ */ jsxs3("p", { className: "text-sm text-yellow-800", children: [
+          "Unknown widget type: ",
+          widget.type
+        ] }),
+        /* @__PURE__ */ jsx4("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
+      ] });
+  }
+}
+
+// src/components/Widgets/Widgets.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Widgets({
+  widgets,
+  onAction,
+  onWidgetMount,
+  layout = "stack",
+  spacing = "normal",
+  columns = 3,
+  className
+}) {
+  useEffect(() => {
+    widgets.forEach((widget) => {
+      onWidgetMount?.(widget.id);
+    });
+  }, [widgets, onWidgetMount]);
+  const layoutClasses = {
+    stack: "flex flex-col",
+    grid: `grid grid-cols-1 md:grid-cols-${columns}`,
+    masonry: "columns-1 md:columns-2 lg:columns-3"
+  };
+  const spacingClasses = {
+    tight: "gap-2",
+    normal: "gap-4",
+    loose: "gap-6"
+  };
+  return /* @__PURE__ */ jsx5("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ jsx5(WidgetRenderer, { widget, onAction }, widget.id)) });
+}
+
+// src/components/Chat/Message.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Message({ message, onAction }) {
+  const isUser = message.role === "user";
+  return /* @__PURE__ */ jsxs4("div", { className: cn("apteva-message", isUser ? "apteva-message-user" : "apteva-message-assistant"), children: [
+    /* @__PURE__ */ jsx6("div", { className: "whitespace-pre-wrap", children: message.content }),
+    message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx6("div", { className: "mt-4", children: /* @__PURE__ */ jsx6(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+    /* @__PURE__ */ jsx6("div", { className: "text-xs opacity-70 mt-2", children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+  ] });
+}
+
+// src/components/Chat/MessageList.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function MessageList({ messages, onAction }) {
+  const listRef = useRef(null);
+  useEffect2(() => {
+    if (listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [messages]);
+  return /* @__PURE__ */ jsx7("div", { ref: listRef, className: "apteva-message-list", children: messages.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center h-full text-gray-500", children: /* @__PURE__ */ jsxs5("div", { className: "text-center space-y-2", children: [
+    /* @__PURE__ */ jsx7("div", { className: "text-4xl", children: "\u{1F4AC}" }),
+    /* @__PURE__ */ jsx7("p", { children: "No messages yet. Start a conversation!" })
+  ] }) }) : messages.map((message) => /* @__PURE__ */ jsx7(Message, { message, onAction }, message.id)) });
+}
+
+// src/components/Chat/Composer.tsx
+import { useState, useRef as useRef2 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false }) {
+  const [text, setText] = useState("");
+  const textareaRef = useRef2(null);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const handleSend = () => {
+    if (text.trim() && !disabled) {
+      onSendMessage(text.trim());
+      setText("");
+      if (textareaRef.current) {
+        textareaRef.current.style.height = "auto";
+      }
+    }
+  };
+  const handleChange = (e) => {
+    setText(e.target.value);
+    e.target.style.height = "auto";
+    e.target.style.height = `${e.target.scrollHeight}px`;
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "apteva-composer", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx8(
+        "textarea",
+        {
+          ref: textareaRef,
+          value: text,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          disabled,
+          className: "apteva-composer-input",
+          rows: 1,
+          style: { maxHeight: "200px" }
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          onClick: handleSend,
+          disabled: !text.trim() || disabled,
+          className: "px-6 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium",
+          children: "Send"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "text-xs text-gray-500 mt-2", children: "Press Enter to send, Shift+Enter for new line" })
+  ] });
+}
+
+// src/components/Chat/Chat.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function Chat({
+  agentId,
+  threadId,
+  initialMessages = [],
+  onThreadChange,
+  onMessageSent,
+  onAction,
+  placeholder = "Type a message...",
+  showHeader = true,
+  headerTitle = "Chat",
+  className
+}) {
+  const [messages, setMessages] = useState2(initialMessages.length > 0 ? initialMessages : mockMessages);
+  const [isLoading, setIsLoading] = useState2(false);
+  useEffect3(() => {
+    if (threadId) {
+      console.log("Loading thread:", threadId);
+      onThreadChange?.(threadId);
+    }
+  }, [threadId, onThreadChange]);
+  const handleSendMessage = async (text) => {
+    const userMessage = {
+      id: `msg-${Date.now()}`,
+      role: "user",
+      content: text,
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    setMessages((prev) => [...prev, userMessage]);
+    onMessageSent?.(userMessage);
+    setIsLoading(true);
+    try {
+      const response = await generateMockResponse(1e3);
+      setMessages((prev) => [...prev, response]);
+    } catch (error) {
+      console.error("Error generating response:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: cn("apteva-chat-container", className), children: [
+    showHeader && /* @__PURE__ */ jsxs7("div", { className: "border-b border-gray-200 dark:border-gray-700 px-4 py-3", children: [
+      /* @__PURE__ */ jsx9("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: headerTitle }),
+      /* @__PURE__ */ jsxs7("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+        "Agent: ",
+        agentId
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9(MessageList, { messages, onAction }),
+    isLoading && /* @__PURE__ */ jsx9("div", { className: "px-4 py-2 text-sm text-gray-500 italic", children: "AI is thinking..." }),
+    /* @__PURE__ */ jsx9(Composer, { onSendMessage: handleSendMessage, placeholder, disabled: isLoading })
+  ] });
+}
+
+// src/components/Command/Command.tsx
+import { useState as useState3, useEffect as useEffect4 } from "react";
+import { Fragment, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function Command({
+  agentId,
+  command: initialCommand,
+  context,
+  autoExecute = false,
+  allowInput = true,
+  placeholder = "Enter your command...",
+  submitButtonText = "Execute",
+  variant = "default",
+  onStart,
+  onProgress,
+  onChunk,
+  onComplete,
+  onError,
+  loadingText = "Processing...",
+  showProgress = true,
+  enableStreaming = false,
+  resultRenderer,
+  className
+}) {
+  const [state, setState] = useState3("idle");
+  const [result, setResult] = useState3(null);
+  const [error, setError] = useState3(null);
+  const [progress, setProgress] = useState3(0);
+  const [command, setCommand] = useState3(initialCommand || "");
+  const [streamedContent, setStreamedContent] = useState3("");
+  useEffect4(() => {
+    if (autoExecute && state === "idle" && command) {
+      executeCommand();
+    }
+  }, [autoExecute]);
+  const executeCommand = async () => {
+    if (!command.trim()) {
+      setError(new Error("Please enter a command"));
+      setState("error");
+      return;
+    }
+    setState("loading");
+    setError(null);
+    setProgress(0);
+    setStreamedContent("");
+    onStart?.();
+    try {
+      if (enableStreaming) {
+        const mockStreamChunks = [
+          "Initializing...",
+          "Connecting to agent...",
+          "Processing your request...",
+          "Analyzing data sources...",
+          "Gathering information...",
+          "Generating response...",
+          "Finalizing results..."
+        ];
+        for (let i = 0; i < mockStreamChunks.length; i++) {
+          await new Promise((resolve) => setTimeout(resolve, 600 + Math.random() * 400));
+          const chunk = mockStreamChunks[i];
+          setStreamedContent(chunk);
+          onChunk?.(chunk);
+          setProgress(Math.round((i + 1) / mockStreamChunks.length * 100));
+          onProgress?.(Math.round((i + 1) / mockStreamChunks.length * 100));
+        }
+        const mockResult = {
+          success: true,
+          data: {
+            summary: `Successfully processed: "${command}"`,
+            agentId,
+            context,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          },
+          message: "Command executed successfully"
+        };
+        setResult(mockResult);
+        setState("success");
+        setProgress(100);
+        onComplete?.(mockResult);
+      } else {
+        const progressInterval = setInterval(() => {
+          setProgress((prev) => {
+            const next = Math.min(prev + 10, 90);
+            onProgress?.(next);
+            return next;
+          });
+        }, 200);
+        await new Promise((resolve) => setTimeout(resolve, 2e3));
+        clearInterval(progressInterval);
+        const mockResult = {
+          success: true,
+          data: {
+            summary: `Command "${command}" executed successfully`,
+            agentId,
+            context,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          },
+          message: "Execution complete"
+        };
+        setResult(mockResult);
+        setState("success");
+        setProgress(100);
+        onComplete?.(mockResult);
+      }
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Unknown error");
+      setError(error2);
+      setState("error");
+      onError?.(error2);
+    }
+  };
+  const resetCommand = () => {
+    setState("idle");
+    setResult(null);
+    setError(null);
+    setProgress(0);
+    setCommand("");
+  };
+  const isCompact = variant === "compact";
+  return /* @__PURE__ */ jsxs8(
+    "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 === "success" && "border-green-500",
+        state === "error" && "border-red-500",
+        className
+      ),
+      style: { minHeight: isCompact ? "auto" : "180px" },
+      children: [
+        /* @__PURE__ */ jsxs8("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__ */ jsx10(
+            "textarea",
+            {
+              value: command,
+              onChange: (e) => setCommand(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                  e.preventDefault();
+                  executeCommand();
+                }
+              },
+              placeholder,
+              className: "flex-1 w-full resize-none bg-transparent border-none focus:outline-none text-gray-900 dark:text-white placeholder-gray-400",
+              rows: 6
+            }
+          ),
+          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs8(Fragment, { children: [
+            /* @__PURE__ */ jsx10(
+              "input",
+              {
+                type: "text",
+                value: command,
+                onChange: (e) => setCommand(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    executeCommand();
+                  }
+                },
+                placeholder,
+                className: "flex-1 bg-transparent border-none focus:outline-none text-gray-900 dark:text-white placeholder-gray-400 py-1"
+              }
+            ),
+            /* @__PURE__ */ jsx10(
+              "button",
+              {
+                onClick: executeCommand,
+                disabled: !command.trim(),
+                className: cn(
+                  "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0",
+                  "border border-gray-300 dark:border-gray-600",
+                  "bg-white dark:bg-gray-800",
+                  "text-gray-700 dark:text-gray-300",
+                  "hover:bg-gray-50 dark:hover:bg-gray-700",
+                  "disabled:opacity-30 disabled:cursor-not-allowed",
+                  !command.trim() && "border-gray-200 dark:border-gray-700 text-gray-400 dark:text-gray-600"
+                ),
+                title: "Execute",
+                children: "\u2191"
+              }
+            )
+          ] }),
+          state === "loading" && !isCompact && /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
+            /* @__PURE__ */ jsx10("div", { className: "w-6 h-6 border-2 border-gray-300 border-t-apteva-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx10("div", { className: "text-gray-600 dark:text-gray-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
+            showProgress && /* @__PURE__ */ jsxs8("div", { className: "w-full max-w-sm", children: [
+              /* @__PURE__ */ jsx10("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  className: "bg-apteva-500 h-1.5 rounded-full transition-all duration-300",
+                  style: { width: `${progress}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxs8("p", { className: "text-xs text-gray-500 mt-2 text-center", children: [
+                progress,
+                "%"
+              ] })
+            ] })
+          ] }),
+          state === "loading" && isCompact && /* @__PURE__ */ jsxs8(Fragment, { children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
+              /* @__PURE__ */ jsx10("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-apteva-500 rounded-full animate-spin" }),
+              /* @__PURE__ */ jsx10("div", { className: "text-gray-600 dark:text-gray-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
+            ] }),
+            /* @__PURE__ */ jsx10(
+              "button",
+              {
+                disabled: true,
+                className: cn(
+                  "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0",
+                  "border border-gray-200 dark:border-gray-700",
+                  "bg-white dark:bg-gray-800",
+                  "text-gray-400 dark:text-gray-600",
+                  "opacity-30 cursor-not-allowed"
+                ),
+                children: "\u2191"
+              }
+            )
+          ] }),
+          state === "error" && /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex flex-col", children: [
+            /* @__PURE__ */ jsx10("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__ */ jsxs8("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx10("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__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ jsxs8("div", { children: [
+                /* @__PURE__ */ jsx10("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
+                /* @__PURE__ */ jsx10("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
+              ] })
+            ] }) }),
+            allowInput && /* @__PURE__ */ jsx10(
+              "textarea",
+              {
+                value: command,
+                onChange: (e) => setCommand(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                    e.preventDefault();
+                    executeCommand();
+                  }
+                },
+                placeholder,
+                className: "flex-1 w-full resize-none bg-transparent border-none focus:outline-none text-gray-900 dark:text-white placeholder-gray-400",
+                rows: 4
+              }
+            )
+          ] }),
+          state === "success" && result && !isCompact && /* @__PURE__ */ jsx10("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsxs8("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__ */ jsx10("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__ */ jsx10("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__ */ jsxs8("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx10("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
+                /* @__PURE__ */ jsx10("p", { className: "text-green-700 dark:text-green-300 text-sm", children: result.message || "Command executed successfully" })
+              ] })
+            ] }),
+            result.data?.summary && /* @__PURE__ */ jsx10("div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed", children: result.data.summary })
+          ] }) }),
+          state === "success" && result && isCompact && /* @__PURE__ */ jsxs8(Fragment, { children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex items-center gap-2 py-1", children: [
+              /* @__PURE__ */ jsx10("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx10("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__ */ jsx10("div", { className: "text-green-700 dark:text-green-300 text-sm truncate", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
+            ] }),
+            /* @__PURE__ */ jsx10(
+              "button",
+              {
+                disabled: true,
+                className: cn(
+                  "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0",
+                  "border border-gray-200 dark:border-gray-700",
+                  "bg-white dark:bg-gray-800",
+                  "text-gray-400 dark:text-gray-600",
+                  "opacity-30 cursor-not-allowed"
+                ),
+                children: "\u2191"
+              }
+            )
+          ] })
+        ] }),
+        !isCompact && /* @__PURE__ */ jsxs8("div", { className: "p-3 flex items-center justify-end gap-2", children: [
+          (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx10(
+            "button",
+            {
+              onClick: resetCommand,
+              className: "px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors",
+              children: "Reset"
+            }
+          ),
+          (state === "idle" || state === "error") && /* @__PURE__ */ jsx10(
+            "button",
+            {
+              onClick: executeCommand,
+              disabled: !command.trim(),
+              className: cn(
+                "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all",
+                "border border-gray-300 dark:border-gray-600",
+                "bg-white dark:bg-gray-800",
+                "text-gray-700 dark:text-gray-300",
+                "hover:bg-gray-50 dark:hover:bg-gray-700",
+                "disabled:opacity-30 disabled:cursor-not-allowed",
+                !command.trim() && "border-gray-200 dark:border-gray-700 text-gray-400 dark:text-gray-600"
+              ),
+              title: state === "error" ? "Retry" : "Execute",
+              children: state === "error" ? "\u21BB" : "\u2191"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx10("style", { dangerouslySetInnerHTML: {
+          __html: `
+          @keyframes pulse-border {
+            0%, 100% {
+              border-color: rgb(59, 130, 246);
+            }
+            50% {
+              border-color: rgb(147, 197, 253);
+            }
+          }
+          .animate-pulse-border {
+            animation: pulse-border 2s ease-in-out infinite;
+          }
+        `
+        } })
+      ]
+    }
+  );
+}
+
+// src/components/Prompt/Prompt.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function Prompt({
+  agentId,
+  placeholder = "Enter your prompt...",
+  initialValue = "",
+  submitOn = "button",
+  debounceMs = 0,
+  minLength = 0,
+  maxLength,
+  onSubmit,
+  onResult,
+  onChange,
+  variant = "inline",
+  showSuggestions = false,
+  className
+}) {
+  const [value, setValue] = useState4(initialValue);
+  const [isLoading, setIsLoading] = useState4(false);
+  const [suggestions] = useState4(["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);
+    }
+  };
+  const handleSubmit = async () => {
+    if (value.length < minLength) return;
+    onSubmit?.(value);
+    setIsLoading(true);
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 1500));
+      const mockResult = `Enhanced version: ${value} [AI-generated content]`;
+      onResult?.(mockResult);
+      setValue("");
+    } catch (error) {
+      console.error("Error processing prompt:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (submitOn === "enter" && e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const handleBlur = () => {
+    if (submitOn === "blur" && value.trim()) {
+      handleSubmit();
+    }
+  };
+  return /* @__PURE__ */ jsxs9("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx11(
+        "input",
+        {
+          type: "text",
+          value,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          onBlur: handleBlur,
+          placeholder,
+          disabled: isLoading,
+          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__ */ jsx11(
+        "button",
+        {
+          onClick: handleSubmit,
+          disabled: isLoading || value.length < minLength,
+          className: "px-6 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium",
+          children: isLoading ? "Processing..." : "Generate"
+        }
+      )
+    ] }),
+    maxLength && /* @__PURE__ */ jsxs9("p", { className: "text-xs text-gray-500", children: [
+      value.length,
+      " / ",
+      maxLength,
+      " characters"
+    ] }),
+    showSuggestions && !value && /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx11(
+      "button",
+      {
+        onClick: () => setValue(suggestion),
+        className: "px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full transition-colors",
+        children: suggestion
+      },
+      idx
+    )) }),
+    isLoading && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
+      /* @__PURE__ */ jsx11("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
+      /* @__PURE__ */ jsx11("span", { children: "AI is processing your request..." })
+    ] })
+  ] });
+}
+
+// src/components/Stream/Stream.tsx
+import { useState as useState5, useEffect as useEffect5 } from "react";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function Stream({
+  agentId,
+  prompt,
+  context,
+  autoStart = false,
+  onStart,
+  onChunk,
+  onComplete,
+  onError,
+  variant = "prose",
+  showCursor = true,
+  typingSpeed = 30,
+  className
+}) {
+  const [text, setText] = useState5("");
+  const [isStreaming, setIsStreaming] = useState5(false);
+  const [isComplete, setIsComplete] = useState5(false);
+  useEffect5(() => {
+    if (autoStart && !isStreaming && !isComplete) {
+      startStreaming();
+    }
+  }, [autoStart]);
+  const startStreaming = async () => {
+    setIsStreaming(true);
+    onStart?.();
+    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);
+        },
+        typingSpeed
+      );
+      setIsComplete(true);
+      setIsStreaming(false);
+      onComplete?.(text + mockText);
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error("Streaming error");
+      onError?.(err);
+      setIsStreaming(false);
+    }
+  };
+  const variantClasses = {
+    prose: "prose prose-sm max-w-none dark:prose-invert",
+    code: "font-mono text-sm bg-gray-900 text-green-400 p-4 rounded-lg",
+    plain: "text-gray-900 dark:text-gray-100"
+  };
+  if (!isStreaming && !isComplete) {
+    return /* @__PURE__ */ jsx12("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx12(
+      "button",
+      {
+        onClick: startStreaming,
+        className: "px-6 py-3 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 transition-colors font-medium",
+        children: "Start Streaming"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs10("div", { className: cn(variantClasses[variant], className), children: [
+    text,
+    isStreaming && showCursor && /* @__PURE__ */ jsx12("span", { className: "apteva-stream-cursor" })
+  ] });
+}
+
+// src/components/Threads/ThreadList.tsx
+import { useState as useState6 } from "react";
+
+// src/components/Threads/ThreadItem.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: cn("apteva-thread-item", {
+        "apteva-thread-item-active": isActive
+      }),
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx13("h4", { className: "font-semibold text-gray-900 dark:text-white truncate", children: thread.title }),
+          thread.preview && /* @__PURE__ */ jsx13("p", { className: "text-sm text-gray-600 dark:text-gray-400 truncate", children: thread.preview }),
+          /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-500", children: [
+            /* @__PURE__ */ jsxs11("span", { children: [
+              thread.messageCount,
+              " messages"
+            ] }),
+            /* @__PURE__ */ jsx13("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsx13("span", { children: formatRelativeTime(thread.updatedAt) })
+          ] })
+        ] }),
+        onDelete && /* @__PURE__ */ jsx13(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete();
+            },
+            className: "p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded transition-colors",
+            title: "Delete thread",
+            children: "\u{1F5D1}\uFE0F"
+          }
+        )
+      ]
+    }
+  );
+}
+function formatRelativeTime(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diff = now.getTime() - date.getTime();
+  const minutes = Math.floor(diff / 6e4);
+  const hours = Math.floor(diff / 36e5);
+  const days = Math.floor(diff / 864e5);
+  if (minutes < 1) return "Just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+  return date.toLocaleDateString();
+}
+
+// src/components/Threads/ThreadList.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function ThreadList({
+  threads,
+  currentThreadId,
+  onThreadSelect,
+  onThreadDelete,
+  showSearch = false,
+  groupBy = "none"
+}) {
+  const [searchQuery, setSearchQuery] = useState6("");
+  const filteredThreads = threads.filter(
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+  const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
+  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col h-full", children: [
+    showSearch && /* @__PURE__ */ jsx14("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx14(
+      "input",
+      {
+        type: "text",
+        placeholder: "Search conversations...",
+        value: searchQuery,
+        onChange: (e) => setSearchQuery(e.target.value),
+        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__ */ jsxs12("div", { className: "flex-1 overflow-y-auto", children: [
+      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs12("div", { children: [
+        groupBy !== "none" && /* @__PURE__ */ jsx14("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500 uppercase", children: group }),
+        groupThreads.map((thread) => /* @__PURE__ */ jsx14(
+          ThreadItem,
+          {
+            thread,
+            isActive: thread.id === currentThreadId,
+            onSelect: () => onThreadSelect?.(thread.id),
+            onDelete: () => onThreadDelete?.(thread.id)
+          },
+          thread.id
+        ))
+      ] }, group)),
+      filteredThreads.length === 0 && /* @__PURE__ */ jsxs12("div", { className: "p-8 text-center text-gray-500", children: [
+        /* @__PURE__ */ jsx14("div", { className: "text-4xl mb-2", children: "\u{1F4AC}" }),
+        /* @__PURE__ */ jsx14("p", { children: "No conversations found" })
+      ] })
+    ] })
+  ] });
+}
+function groupThreadsByDate(threads) {
+  const now = /* @__PURE__ */ new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const lastWeek = new Date(today);
+  lastWeek.setDate(lastWeek.getDate() - 7);
+  return threads.reduce(
+    (groups, thread) => {
+      const threadDate = new Date(thread.updatedAt);
+      let group = "Older";
+      if (threadDate >= today) {
+        group = "Today";
+      } else if (threadDate >= yesterday) {
+        group = "Yesterday";
+      } else if (threadDate >= lastWeek) {
+        group = "Last 7 Days";
+      }
+      if (!groups[group]) groups[group] = [];
+      groups[group].push(thread);
+      return groups;
+    },
+    {}
+  );
+}
+
+// src/components/Threads/Threads.tsx
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function Threads({
+  threads,
+  currentThreadId,
+  onThreadSelect,
+  onThreadDelete,
+  onNewThread,
+  variant = "sidebar",
+  showSearch = false,
+  showNewButton = true,
+  groupBy = "none",
+  className
+}) {
+  const variantClasses = {
+    sidebar: "h-full border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900",
+    dropdown: "absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-h-96 overflow-hidden",
+    tabs: "flex gap-2 border-b border-gray-200 dark:border-gray-700 overflow-x-auto"
+  };
+  if (variant === "tabs") {
+    return /* @__PURE__ */ jsxs13("div", { className: cn(variantClasses[variant], className), children: [
+      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx15(
+        "button",
+        {
+          onClick: () => onThreadSelect?.(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"
+          ),
+          children: thread.title
+        },
+        thread.id
+      )),
+      showNewButton && onNewThread && /* @__PURE__ */ jsx15(
+        "button",
+        {
+          onClick: onNewThread,
+          className: "px-4 py-2 text-gray-600 hover:text-apteva-500 transition-colors font-medium",
+          children: "+ New"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs13("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
+    showNewButton && onNewThread && /* @__PURE__ */ jsx15("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx15(
+      "button",
+      {
+        onClick: onNewThread,
+        className: "w-full px-4 py-2 bg-apteva-500 text-white rounded-lg hover:bg-apteva-600 transition-colors font-medium",
+        children: "+ New Conversation"
+      }
+    ) }),
+    /* @__PURE__ */ jsx15(
+      ThreadList,
+      {
+        threads,
+        currentThreadId,
+        onThreadSelect,
+        onThreadDelete,
+        showSearch,
+        groupBy
+      }
+    )
+  ] });
+}
+
+// src/utils/theme-script.ts
+var themeScript = `
+(function() {
+  try {
+    // Get system preference
+    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const colorMode = isDark ? 'dark' : 'light';
+
+    // Set attributes before render
+    document.documentElement.setAttribute('data-color-mode', colorMode);
+
+    // Add dark class for Tailwind
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    }
+  } catch (e) {
+    console.error('Failed to initialize theme:', e);
+  }
+})();
+`;
+function getThemeScript() {
+  return themeScript;
+}
+export {
+  Button,
+  Card,
+  Chat,
+  Command,
+  List,
+  Prompt,
+  Stream,
+  Threads,
+  Widgets,
+  cn,
+  getThemeScript,
+  mockMessages,
+  mockThreads,
+  mockWidgets
+};
+//# sourceMappingURL=index.mjs.map