@apteva/apteva-kit 0.1.131 → 0.1.133

package/dist/index.js

@@ -4479,6 +4479,7 @@ function useVoiceSession(config) {
   const [state, setState] = _react.useState.call(void 0, "idle");
   const [partialTranscript, setPartialTranscript] = _react.useState.call(void 0, "");
   const [duration, setDuration] = _react.useState.call(void 0, 0);
+  const [muted, setMuted] = _react.useState.call(void 0, false);
   const wsRef = _react.useRef.call(void 0, null);
   const captureCtxRef = _react.useRef.call(void 0, null);
   const playbackCtxRef = _react.useRef.call(void 0, null);
@@ -4487,6 +4488,7 @@ function useVoiceSession(config) {
   const nextPlayTimeRef = _react.useRef.call(void 0, 0);
   const durationIntervalRef = _react.useRef.call(void 0, null);
   const startTimeRef = _react.useRef.call(void 0, 0);
+  const mutedRef = _react.useRef.call(void 0, false);
   const configRef = _react.useRef.call(void 0, config);
   configRef.current = config;
   const cleanup = _react.useCallback.call(void 0, () => {
@@ -4524,6 +4526,8 @@ function useVoiceSession(config) {
       wsRef.current = null;
     }
     nextPlayTimeRef.current = 0;
+    mutedRef.current = false;
+    setMuted(false);
     setPartialTranscript("");
     setDuration(0);
   }, []);
@@ -4551,6 +4555,8 @@ function useVoiceSession(config) {
     source.start(startTime);
     nextPlayTimeRef.current = startTime + audioBuffer.duration;
   }, []);
+  const startCaptureRef = _react.useRef.call(void 0, () => {
+  });
   const handleMessage = _react.useCallback.call(void 0, (msg) => {
     const cfg = configRef.current;
     switch (msg.type) {
@@ -4560,6 +4566,7 @@ function useVoiceSession(config) {
         durationIntervalRef.current = setInterval(() => {
           setDuration(Math.floor((Date.now() - startTimeRef.current) / 1e3));
         }, 1e3);
+        startCaptureRef.current();
         break;
       case "audio_delta":
         if (_optionalChain([msg, 'access', _93 => _93.data, 'optionalAccess', _94 => _94.chunk])) {
@@ -4616,6 +4623,7 @@ function useVoiceSession(config) {
       processorRef.current = captureCtxRef.current.createScriptProcessor(2048, 1, 1);
       processorRef.current.onaudioprocess = (e) => {
         if (!ws || ws.readyState !== WebSocket.OPEN) return;
+        if (mutedRef.current) return;
         const inputData = e.inputBuffer.getChannelData(0);
         const resampledData = resampleAudio(inputData, nativeSampleRate, 16e3);
         const int16Data = float32ToInt16(resampledData);
@@ -4628,16 +4636,24 @@ function useVoiceSession(config) {
       source.connect(processorRef.current);
       processorRef.current.connect(captureCtxRef.current.destination);
     } catch (e) {
+      console.warn("Microphone access denied:", e);
       _optionalChain([configRef, 'access', _103 => _103.current, 'access', _104 => _104.onError, 'optionalCall', _105 => _105(new Error("Microphone access denied"))]);
-      cleanup();
-      setState("idle");
     }
   }, [cleanup]);
+  startCaptureRef.current = startCapture;
   const start = _react.useCallback.call(void 0, () => {
     if (state !== "idle") return;
     setState("connecting");
-    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const wsUrl = `${protocol}//${window.location.host}${config.apiUrl}/voice`;
+    let wsUrl;
+    if (/^https?:\/\//.test(config.apiUrl)) {
+      wsUrl = config.apiUrl.replace(/^http/, "ws") + "/voice";
+    } else {
+      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      wsUrl = `${protocol}//${window.location.host}${config.apiUrl}/voice`;
+    }
+    if (config.apiKey) {
+      wsUrl += `${wsUrl.includes("?") ? "&" : "?"}token=${encodeURIComponent(config.apiKey)}`;
+    }
     const ws = new WebSocket(wsUrl);
     wsRef.current = ws;
     ws.onopen = () => {
@@ -4647,7 +4663,6 @@ function useVoiceSession(config) {
         type: "start",
         data: { provider, voice }
       }));
-      startCapture();
     };
     ws.onmessage = (event) => {
       try {
@@ -4664,11 +4679,20 @@ function useVoiceSession(config) {
       cleanup();
       setState("idle");
     };
-  }, [state, config.apiUrl, startCapture, handleMessage, cleanup]);
+  }, [state, config.apiUrl, handleMessage, cleanup]);
   const stop = _react.useCallback.call(void 0, () => {
     cleanup();
     setState("idle");
   }, [cleanup]);
+  const toggleMute = _react.useCallback.call(void 0, () => {
+    const next = !mutedRef.current;
+    mutedRef.current = next;
+    setMuted(next);
+    if (mediaStreamRef.current) {
+      const track = mediaStreamRef.current.getAudioTracks()[0];
+      if (track) track.enabled = !next;
+    }
+  }, []);
   const sendText = _react.useCallback.call(void 0, (text) => {
     const ws = wsRef.current;
     if (!ws || ws.readyState !== WebSocket.OPEN) return;
@@ -4677,7 +4701,7 @@ function useVoiceSession(config) {
       data: { content: text }
     }));
   }, []);
-  return { state, partialTranscript, duration, start, stop, sendText };
+  return { state, partialTranscript, duration, muted, start, stop, sendText, toggleMute };
 }
 
 // src/components/Chat/Chat.tsx
@@ -4768,6 +4792,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   }, []);
   const voice = useVoiceSession({
     apiUrl: apiUrl || "",
+    apiKey,
     provider: voiceProvider,
     voice: voiceId,
     onTranscript: handleVoiceTranscript,
@@ -5461,6 +5486,211 @@ ${planToExecute}`;
 
 
 
+// src/components/Call/Call.tsx
+
+
+// src/components/Call/CallStatus.tsx
+
+function formatDuration(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+}
+function CallStatus({ agentName = "Agent", agentAvatarUrl, state, duration }) {
+  const initial = agentName.charAt(0).toUpperCase();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-call-agent", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-call-avatar-wrap", children: [
+      agentAvatarUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: agentAvatarUrl, alt: agentName, className: "apteva-call-avatar" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-call-avatar-placeholder", children: initial }),
+      state === "active" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-call-pulse-ring" })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-call-agent-name", children: agentName }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `apteva-call-status ${state === "active" ? "apteva-call-status-active" : state === "connecting" ? "apteva-call-status-connecting" : state === "error" ? "apteva-call-status-error" : ""}`, children: [
+      state === "idle" && "Ready",
+      state === "connecting" && "Connecting...",
+      state === "active" && "Connected",
+      state === "error" && "Error"
+    ] }),
+    (state === "active" || state === "connecting") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-call-duration", children: formatDuration(duration) })
+  ] });
+}
+
+// src/components/Call/CallTranscript.tsx
+
+
+function CallTranscript({ entries, partialTranscript }) {
+  const scrollRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [entries.length, partialTranscript]);
+  if (entries.length === 0 && !partialTranscript) return null;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-call-transcript", ref: scrollRef, children: [
+    entries.map((entry) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-call-transcript-entry", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `apteva-call-transcript-role apteva-call-transcript-role-${entry.role}`, children: entry.role === "user" ? "You" : entry.role === "assistant" ? "Agent" : "System" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-call-transcript-content", children: entry.content })
+    ] }, entry.id)),
+    partialTranscript && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-call-transcript-entry", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-call-transcript-role apteva-call-transcript-role-user", children: "You" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-call-transcript-partial", children: partialTranscript })
+    ] })
+  ] });
+}
+
+// src/components/Call/CallControls.tsx
+
+function CallControls({ state, muted, mediaMode, onStart, onEnd, onToggleMute }) {
+  const isLive = state === "active" || state === "connecting";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-call-controls", children: isLive ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        onClick: onToggleMute,
+        className: `apteva-call-btn apteva-call-btn-mute ${muted ? "apteva-call-btn-mute-active" : ""}`,
+        title: muted ? "Unmute" : "Mute",
+        children: muted ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "1", y1: "1", x2: "23", y2: "23" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M17 16.95A7 7 0 0 1 5 12v-2m14 0v2c0 .76-.13 1.49-.35 2.17" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+        ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        onClick: onEnd,
+        className: "apteva-call-btn apteva-call-btn-end",
+        title: "End call",
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "23", y1: "1", x2: "1", y2: "23" })
+        ] })
+      }
+    )
+  ] }) : (
+    /* Start call button */
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        onClick: onStart,
+        className: "apteva-call-btn apteva-call-btn-start",
+        title: "Start call",
+        disabled: state === "error",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) })
+      }
+    )
+  ) });
+}
+
+// src/components/Call/Call.tsx
+
+function Call({
+  agentName = "Agent",
+  agentAvatarUrl,
+  apiUrl,
+  apiKey,
+  voiceProvider,
+  voiceId,
+  mediaMode = "voice",
+  autoStart = false,
+  showTranscript = true,
+  maxTranscriptEntries = 50,
+  onCallStart,
+  onCallEnd,
+  onTranscript,
+  onError,
+  onMuteChange,
+  variant = "default",
+  theme,
+  className
+}) {
+  const [transcripts, setTranscripts] = _react.useState.call(void 0, []);
+  const prevStateRef = _react.useRef.call(void 0, "idle");
+  const durationRef = _react.useRef.call(void 0, 0);
+  const autoStartedRef = _react.useRef.call(void 0, false);
+  const handleTranscript = _react.useCallback.call(void 0, (entry) => {
+    setTranscripts((prev) => {
+      const next = [...prev, entry];
+      return next.length > maxTranscriptEntries ? next.slice(next.length - maxTranscriptEntries) : next;
+    });
+    _optionalChain([onTranscript, 'optionalCall', _136 => _136(entry)]);
+  }, [maxTranscriptEntries, onTranscript]);
+  const voice = useVoiceSession({
+    apiUrl,
+    apiKey,
+    provider: voiceProvider,
+    voice: voiceId,
+    onTranscript: handleTranscript,
+    onError
+  });
+  _react.useEffect.call(void 0, () => {
+    durationRef.current = voice.duration;
+  }, [voice.duration]);
+  _react.useEffect.call(void 0, () => {
+    const prev = prevStateRef.current;
+    if (prev !== "active" && voice.state === "active") {
+      _optionalChain([onCallStart, 'optionalCall', _137 => _137()]);
+    }
+    if (prev === "active" && voice.state === "idle") {
+      _optionalChain([onCallEnd, 'optionalCall', _138 => _138({ duration: durationRef.current, transcripts })]);
+    }
+    prevStateRef.current = voice.state;
+  }, [voice.state, onCallStart, onCallEnd, transcripts]);
+  _react.useEffect.call(void 0, () => {
+    if (autoStart && !autoStartedRef.current && voice.state === "idle") {
+      autoStartedRef.current = true;
+      voice.start();
+    }
+  }, [autoStart, voice.state, voice.start]);
+  _react.useEffect.call(void 0, () => {
+    _optionalChain([onMuteChange, 'optionalCall', _139 => _139(voice.muted)]);
+  }, [voice.muted, onMuteChange]);
+  const cn2 = [
+    "apteva-call",
+    variant !== "default" && `apteva-call-${variant}`,
+    theme === "dark" && "apteva-force-dark",
+    theme === "light" && "apteva-force-light",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn2, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      CallStatus,
+      {
+        agentName,
+        agentAvatarUrl,
+        state: voice.state,
+        duration: voice.duration
+      }
+    ),
+    mediaMode === "video" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-call-video-area", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", opacity: "0.4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14" }) }) }),
+    showTranscript && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      CallTranscript,
+      {
+        entries: transcripts,
+        partialTranscript: voice.partialTranscript
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      CallControls,
+      {
+        state: voice.state,
+        muted: voice.muted,
+        mediaMode,
+        onStart: voice.start,
+        onEnd: voice.stop,
+        onToggleMute: voice.toggleMute
+      }
+    )
+  ] });
+}
+
 // src/components/Command/Command.tsx
 
 
@@ -5596,13 +5826,13 @@ ${planningInstruction}` : planningInstruction;
             const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
             setError(error2);
             setState("error");
-            _optionalChain([onError, 'optionalCall', _136 => _136(error2)]);
+            _optionalChain([onError, 'optionalCall', _140 => _140(error2)]);
           });
         } catch (err) {
           const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
           setError(error2);
           setState("error");
-          _optionalChain([onError, 'optionalCall', _137 => _137(error2)]);
+          _optionalChain([onError, 'optionalCall', _141 => _141(error2)]);
         }
       }
       return;
@@ -5613,7 +5843,7 @@ ${planningInstruction}` : planningInstruction;
     setStreamedContent("");
     setCommand("");
     setUploadedFiles([]);
-    _optionalChain([onStart, 'optionalCall', _138 => _138()]);
+    _optionalChain([onStart, 'optionalCall', _142 => _142()]);
     try {
       if (useMock) {
         if (enableStreaming) {
@@ -5624,16 +5854,16 @@ ${planningInstruction}` : planningInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _139 => _139(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _143 => _143(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _140 => _140(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _144 => _144(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _141 => _141.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _142 => _142.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _145 => _145.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _146 => _146.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -5653,19 +5883,19 @@ ${planningInstruction}` : planningInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _143 => _143(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _147 => _147(result2)]);
             },
             (error2) => {
               setError(error2);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _144 => _144(error2)]);
+              _optionalChain([onError, 'optionalCall', _148 => _148(error2)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _145 => _145(next)]);
+              _optionalChain([onProgress, 'optionalCall', _149 => _149(next)]);
               return next;
             });
           }, 200);
@@ -5689,7 +5919,7 @@ ${planningInstruction}` : planningInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _146 => _146(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _150 => _150(result2)]);
         }
       } else {
         if (enableStreaming) {
@@ -5735,16 +5965,16 @@ ${commandInstruction}` : commandInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _147 => _147(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _151 => _151(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _148 => _148(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _152 => _152(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _149 => _149.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _150 => _150.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _153 => _153.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _154 => _154.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -5764,20 +5994,20 @@ ${commandInstruction}` : commandInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _151 => _151(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _155 => _155(result2)]);
             },
             (error2) => {
               const err = error2 instanceof Error ? error2 : new Error("Unknown error");
               setError(err);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _152 => _152(err)]);
+              _optionalChain([onError, 'optionalCall', _156 => _156(err)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _153 => _153(next)]);
+              _optionalChain([onProgress, 'optionalCall', _157 => _157(next)]);
               return next;
             });
           }, 200);
@@ -5833,14 +6063,14 @@ ${commandInstruction}` : commandInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _154 => _154(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _158 => _158(result2)]);
         }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _155 => _155(error2)]);
+      _optionalChain([onError, 'optionalCall', _159 => _159(error2)]);
     }
   };
   const resetCommand = () => {
@@ -5873,14 +6103,14 @@ ${planToExecute}`;
   };
   const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _156 => _156(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _160 => _160(e.target.files)]);
       const files = [];
       for (let i = 0; i < e.target.files.length; i++) {
         const file = e.target.files[i];
         const reader = new FileReader();
         await new Promise((resolve) => {
           reader.onload = (event) => {
-            if (_optionalChain([event, 'access', _157 => _157.target, 'optionalAccess', _158 => _158.result])) {
+            if (_optionalChain([event, 'access', _161 => _161.target, 'optionalAccess', _162 => _162.result])) {
               const fullDataUrl = event.target.result;
               const base64Data = fullDataUrl.split(",")[1];
               if (file.type.startsWith("image/")) {
@@ -5974,7 +6204,7 @@ ${planToExecute}`;
               enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
-                  onClick: () => _optionalChain([fileInputRef, 'access', _159 => _159.current, 'optionalAccess', _160 => _160.click, 'call', _161 => _161()]),
+                  onClick: () => _optionalChain([fileInputRef, 'access', _163 => _163.current, 'optionalAccess', _164 => _164.click, 'call', _165 => _165()]),
                   className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                   title: "Attach file",
                   children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
@@ -6193,7 +6423,7 @@ ${planToExecute}`;
               /* @__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', _162 => _162.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _166 => _166.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -6221,7 +6451,7 @@ ${planToExecute}`;
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            _optionalChain([result, 'access', _163 => _163.data, 'optionalAccess', _164 => _164.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
+            _optionalChain([result, 'access', _167 => _167.data, 'optionalAccess', _168 => _168.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
             result.widgets && result.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               WidgetRenderer,
               {
@@ -6272,7 +6502,7 @@ ${planToExecute}`;
             enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                onClick: () => _optionalChain([fileInputRef, 'access', _165 => _165.current, 'optionalAccess', _166 => _166.click, 'call', _167 => _167()]),
+                onClick: () => _optionalChain([fileInputRef, 'access', _169 => _169.current, 'optionalAccess', _170 => _170.click, 'call', _171 => _171()]),
                 className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                 title: "Attach file",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
@@ -6458,25 +6688,25 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _168 => _168(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _172 => _172(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _169 => _169(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _173 => _173(value)]);
     setIsLoading(true);
     try {
       if (useMock) {
         await new Promise((resolve) => setTimeout(resolve, 1500));
         const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-        _optionalChain([onResult, 'optionalCall', _170 => _170(mockResult)]);
+        _optionalChain([onResult, 'optionalCall', _174 => _174(mockResult)]);
         setValue("");
       } else {
         const response = await aptevaClient.chat({
           agent_id: agentId,
           message: value
         });
-        _optionalChain([onResult, 'optionalCall', _171 => _171(response.message)]);
+        _optionalChain([onResult, 'optionalCall', _175 => _175(response.message)]);
         setValue("");
       }
     } catch (error) {
@@ -6571,7 +6801,7 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _172 => _172()]);
+    _optionalChain([onStart, 'optionalCall', _176 => _176()]);
     try {
       if (useMock) {
         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.";
@@ -6579,13 +6809,13 @@ function Stream({
           mockText,
           (chunk) => {
             setText((prev) => prev + chunk);
-            _optionalChain([onChunk, 'optionalCall', _173 => _173(chunk)]);
+            _optionalChain([onChunk, 'optionalCall', _177 => _177(chunk)]);
           },
           typingSpeed
         );
         setIsComplete(true);
         setIsStreaming(false);
-        _optionalChain([onComplete, 'optionalCall', _174 => _174(text + mockText)]);
+        _optionalChain([onComplete, 'optionalCall', _178 => _178(text + mockText)]);
       } else {
         let accumulatedText = "";
         await aptevaClient.chatStream(
@@ -6598,24 +6828,24 @@ function Stream({
             if (chunk.type === "token" && chunk.content) {
               accumulatedText += chunk.content;
               setText(accumulatedText);
-              _optionalChain([onChunk, 'optionalCall', _175 => _175(chunk.content)]);
+              _optionalChain([onChunk, 'optionalCall', _179 => _179(chunk.content)]);
             }
           },
           () => {
             setIsComplete(true);
             setIsStreaming(false);
-            _optionalChain([onComplete, 'optionalCall', _176 => _176(accumulatedText)]);
+            _optionalChain([onComplete, 'optionalCall', _180 => _180(accumulatedText)]);
           },
           (error) => {
             const err = error instanceof Error ? error : new Error("Streaming error");
-            _optionalChain([onError, 'optionalCall', _177 => _177(err)]);
+            _optionalChain([onError, 'optionalCall', _181 => _181(err)]);
             setIsStreaming(false);
           }
         );
       }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _178 => _178(err)]);
+      _optionalChain([onError, 'optionalCall', _182 => _182(err)]);
       setIsStreaming(false);
     }
   };
@@ -6707,7 +6937,7 @@ function ThreadList({
 }) {
   const [searchQuery, setSearchQuery] = _react.useState.call(void 0, "");
   const filteredThreads = threads.filter(
-    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _179 => _179.preview, 'optionalAccess', _180 => _180.toLowerCase, 'call', _181 => _181(), 'access', _182 => _182.includes, 'call', _183 => _183(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _183 => _183.preview, 'optionalAccess', _184 => _184.toLowerCase, 'call', _185 => _185(), 'access', _186 => _186.includes, 'call', _187 => _187(searchQuery.toLowerCase())])
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col h-full", children: [
@@ -6729,8 +6959,8 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _184 => _184(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _185 => _185(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _188 => _188(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _189 => _189(thread.id)])
           },
           thread.id
         ))
@@ -6792,7 +7022,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _186 => _186(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _190 => _190(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-neutral-600 hover:text-neutral-900"
@@ -6977,7 +7207,7 @@ function TabsLayout({ node, renderNode }) {
 var STRUCTURAL_KEYS = /* @__PURE__ */ new Set(["type", "id", "layout", "props", "children", "actions", "metadata", "isStreaming"]);
 function normalizeNode(n) {
   let node = { ...n };
-  if (node.type === "widget" && _optionalChain([node, 'access', _187 => _187.props, 'optionalAccess', _188 => _188.widget])) {
+  if (node.type === "widget" && _optionalChain([node, 'access', _191 => _191.props, 'optionalAccess', _192 => _192.widget])) {
     node.type = node.props.widget;
     const { widget: _, ...rest } = node.props;
     node.props = rest;
@@ -7115,10 +7345,10 @@ function AutoInterface({
   ].filter(Boolean).join("\n\n");
   const updateInterface = _react.useCallback.call(void 0, (newSpec) => {
     setInterfaceSpec(newSpec);
-    _optionalChain([onInterfaceChange, 'optionalCall', _189 => _189(newSpec)]);
+    _optionalChain([onInterfaceChange, 'optionalCall', _193 => _193(newSpec)]);
   }, [onInterfaceChange]);
   const handleAction = _react.useCallback.call(void 0, (action) => {
-    _optionalChain([onAction, 'optionalCall', _190 => _190(action)]);
+    _optionalChain([onAction, 'optionalCall', _194 => _194(action)]);
     if (chatRef.current) {
       chatRef.current.sendMessage(
         `[Action: ${action.type} on widget ${action.widgetId || "unknown"}. Payload: ${JSON.stringify(action.payload)}]`
@@ -7126,7 +7356,7 @@ function AutoInterface({
     }
   }, [onAction]);
   const handleMessageComplete = _react.useCallback.call(void 0, (result) => {
-    if (!_optionalChain([result, 'optionalAccess', _191 => _191.data])) return;
+    if (!_optionalChain([result, 'optionalAccess', _195 => _195.data])) return;
     const text = typeof result.data === "string" ? result.data : result.data.message || "";
     console.log("[AutoInterface] Chat message complete, text (" + text.length + " chars):", text.substring(0, 300));
     const parsed = parseInterfaceFromText(text);
@@ -7166,7 +7396,7 @@ function AutoInterface({
     }).catch((err) => {
       if (cancelled) return;
       console.error("[AutoInterface] Initial generation failed:", err);
-      _optionalChain([onError, 'optionalCall', _192 => _192(err instanceof Error ? err : new Error(String(err)))]);
+      _optionalChain([onError, 'optionalCall', _196 => _196(err instanceof Error ? err : new Error(String(err)))]);
       setIsGenerating(false);
     });
     return () => {
@@ -7332,7 +7562,7 @@ function useInterfaceAI({
   }
   const sendMessage = _react.useCallback.call(void 0, async (message) => {
     accumulatedTextRef.current = "";
-    _optionalChain([onStreamStart, 'optionalCall', _193 => _193()]);
+    _optionalChain([onStreamStart, 'optionalCall', _197 => _197()]);
     const systemPrompt = [
       generateInterfaceContext(),
       context || ""
@@ -7355,27 +7585,27 @@ function useInterfaceAI({
             accumulatedTextRef.current += chunk.content || "";
             const parsed = parseInterfaceFromText(accumulatedTextRef.current);
             if (parsed) {
-              _optionalChain([onInterface, 'optionalCall', _194 => _194(parsed)]);
+              _optionalChain([onInterface, 'optionalCall', _198 => _198(parsed)]);
             }
             const updates = parseUpdatesFromText(accumulatedTextRef.current);
             if (updates.length > 0) {
-              _optionalChain([onUpdates, 'optionalCall', _195 => _195(updates)]);
+              _optionalChain([onUpdates, 'optionalCall', _199 => _199(updates)]);
             }
           }
         },
         // onComplete
         () => {
-          _optionalChain([onStreamEnd, 'optionalCall', _196 => _196()]);
+          _optionalChain([onStreamEnd, 'optionalCall', _200 => _200()]);
         },
         // onError
         (error) => {
-          _optionalChain([onError, 'optionalCall', _197 => _197(error)]);
-          _optionalChain([onStreamEnd, 'optionalCall', _198 => _198()]);
+          _optionalChain([onError, 'optionalCall', _201 => _201(error)]);
+          _optionalChain([onStreamEnd, 'optionalCall', _202 => _202()]);
         }
       );
     } catch (error) {
-      _optionalChain([onError, 'optionalCall', _199 => _199(error instanceof Error ? error : new Error("Unknown error"))]);
-      _optionalChain([onStreamEnd, 'optionalCall', _200 => _200()]);
+      _optionalChain([onError, 'optionalCall', _203 => _203(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onStreamEnd, 'optionalCall', _204 => _204()]);
     }
   }, [agentId, context, onInterface, onUpdates, onError, onStreamStart, onStreamEnd]);
   return {
@@ -7421,5 +7651,6 @@ function useInterfaceAI({
 
 
 
-exports.AptevaClient = AptevaClient; exports.AutoInterface = AutoInterface; exports.Button = Button; exports.Card = Card; exports.Chat = Chat; exports.Command = Command; exports.InterfaceRenderer = InterfaceRenderer; exports.InterfaceSkeleton = InterfaceSkeleton; exports.Kpi = Kpi; exports.LayoutRenderer = LayoutRenderer; exports.List = List; exports.LiveView = LiveView; exports.PersistentWidgetPanel = PersistentWidgetPanel; exports.Prompt = Prompt; exports.Spacer = Spacer; exports.Stream = Stream; exports.TextBlock = TextBlock; exports.Threads = Threads; exports.Widgets = Widgets; exports.applyUpdate = applyUpdate; exports.applyUpdates = applyUpdates; exports.aptevaClient = aptevaClient; exports.cn = cn; exports.containsInterface = containsInterface; exports.convertApiMessages = convertApiMessages; exports.findNode = findNode; exports.generateCompactInterfaceContext = generateCompactInterfaceContext; exports.generateInterfaceContext = generateInterfaceContext; exports.getThemeScript = getThemeScript; exports.mockMessages = mockMessages; exports.mockThreads = mockThreads; exports.mockWidgets = mockWidgets; exports.parseInterfaceFromText = parseInterfaceFromText; exports.parseUpdatesFromText = parseUpdatesFromText; exports.stripInterface = stripInterface; exports.useInterfaceAI = useInterfaceAI; exports.useInterfaceState = useInterfaceState;
+
+exports.AptevaClient = AptevaClient; exports.AutoInterface = AutoInterface; exports.Button = Button; exports.Call = Call; exports.Card = Card; exports.Chat = Chat; exports.Command = Command; exports.InterfaceRenderer = InterfaceRenderer; exports.InterfaceSkeleton = InterfaceSkeleton; exports.Kpi = Kpi; exports.LayoutRenderer = LayoutRenderer; exports.List = List; exports.LiveView = LiveView; exports.PersistentWidgetPanel = PersistentWidgetPanel; exports.Prompt = Prompt; exports.Spacer = Spacer; exports.Stream = Stream; exports.TextBlock = TextBlock; exports.Threads = Threads; exports.Widgets = Widgets; exports.applyUpdate = applyUpdate; exports.applyUpdates = applyUpdates; exports.aptevaClient = aptevaClient; exports.cn = cn; exports.containsInterface = containsInterface; exports.convertApiMessages = convertApiMessages; exports.findNode = findNode; exports.generateCompactInterfaceContext = generateCompactInterfaceContext; exports.generateInterfaceContext = generateInterfaceContext; exports.getThemeScript = getThemeScript; exports.mockMessages = mockMessages; exports.mockThreads = mockThreads; exports.mockWidgets = mockWidgets; exports.parseInterfaceFromText = parseInterfaceFromText; exports.parseUpdatesFromText = parseUpdatesFromText; exports.stripInterface = stripInterface; exports.useInterfaceAI = useInterfaceAI; exports.useInterfaceState = useInterfaceState;
 //# sourceMappingURL=index.js.map