@athenaintel/react 0.42.1 → 0.43.0

package/dist/chat/AthenaChat.js

@@ -47,7 +47,7 @@ import { useComposerKeyboardHint, ComposerKeyboardHint } from "./composer-keyboa
 import { usePrefersReducedMotion } from "../lib/use-prefers-reduced-motion.js";
 import { useStatewireSessionLane } from "../runtime/statewire-session-lane.js";
 import { AthenaAuthContext } from "../auth/AthenaAuthContext.js";
-import { useAuiState, ActionBarPrimitive, ActionBarMorePrimitive, MessagePrimitive, ThreadPrimitive, AuiIf, ErrorPrimitive, useAui } from "@assistant-ui/react";
+import { useAuiState, ActionBarPrimitive, ActionBarMorePrimitive, MessagePrimitive, AuiIf, ErrorPrimitive, ThreadPrimitive, useAui } from "@assistant-ui/react";
 import { MoreHorizontalIcon, DownloadIcon, ExternalLinkIcon, BrainIcon, ChevronRightIcon, CheckIcon, CopyIcon, RefreshCwIcon, AlertCircleIcon, ArrowUpIcon, PencilIcon } from "lucide-react";
 import { useMemo, useContext, useState, useRef, useEffect, createContext, useCallback } from "react";
 import { useAthenaThreadId, AthenaStatewireThreadIdContext, useAthenaStatewireThreadId } from "../threads/thread-id-context.js";
@@ -68,6 +68,10 @@ import { getToolkitDisplayInfo } from "../toolkits/index.js";
 import { runActivityKey, runActivityVerb, isToolCallInFlight, runActivityLabel, runProgressKey, runElapsedLabel, isRunActivityStalled } from "./run-activity.js";
 import { readMessageCreatedAt, parseMessageTime, isSameCalendarDay, formatDayLabel, formatMessageTime, formatMessageDateTime } from "./message-time.js";
 import { ThreadScrollToBottom } from "./thread-scroll-to-bottom.js";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { useCatalogQueryClient } from "../catalog/runtime-catalog.js";
+import { isStatewireChannelLive } from "../runtime/statewire-lifecycle.js";
+import { useComposerChatVoice, ChatVoiceButton, ChatVoiceStatus } from "./chat-voice-controls.js";
 import { TASK_TOOL_NAME } from "../agent-runtime/src/tool-names.js";
 import { useTurnToolCallsAwaitingApproval } from "../agent-runtime/src/subagents.js";
 import { isGithubWakeMessage } from "../agent-runtime/src/github-wake-event.js";
@@ -144,7 +148,11 @@ const withNestedPtcMessages = (ToolUI) => {
   };
   return ToolUIWithNestedPtcMessages;
 };
-const AthenaChat = ({
+const AthenaChat = (props) => {
+  const queryClient = useCatalogQueryClient();
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(AthenaChatContent, { ...props }) });
+};
+const AthenaChatContent = ({
   className,
   welcomeMessage = "Hello there!",
   welcomeSubtext = "What can I help you with?",
@@ -157,7 +165,8 @@ const AthenaChat = ({
   components,
   groupToolCalls = true,
   composer: composerSlots,
-  dictation = true
+  dictation = true,
+  voice = true
 }) => {
   var _a, _b, _c, _d, _e, _f;
   const athenaConfig = useAthenaConfig();
@@ -299,6 +308,7 @@ const AthenaChat = ({
               tools,
               slots: composerSlots,
               dictation,
+              voice: readOnly ? false : voice,
               welcomeSuggestionCount: welcomeSuggestions.length
             }
           )
@@ -357,7 +367,7 @@ const ATHENA_CHAT_MENTION_CATEGORIES = [
   "projects",
   "folders"
 ];
-const AthenaChatComposer = ({ tools, slots, dictation, welcomeSuggestionCount }) => {
+const AthenaChatComposer = ({ tools, slots, dictation, voice: voiceOptions, welcomeSuggestionCount }) => {
   const aui = useAui();
   const threadId = useAthenaStatewireThreadId();
   const { appUrl } = useAthenaConfig();
@@ -382,6 +392,7 @@ const AthenaChatComposer = ({ tools, slots, dictation, welcomeSuggestionCount })
     return ((_a = state.optional.thread) == null ? void 0 : _a.isRunning) ?? false;
   });
   const connection = useDeepAgentConnection();
+  const { voice, active: voiceActive, enabled: voiceEnabled, audioRef } = useComposerChatVoice({ options: voiceOptions });
   const runLive = useAuiState((state) => {
     const thread = state.optional.thread;
     return thread ? readRunLive(thread, connection) : false;
@@ -418,7 +429,7 @@ const AthenaChatComposer = ({ tools, slots, dictation, welcomeSuggestionCount })
     onAutoEnd: appendSpokenText
   });
   const recording = dictationEnabled && dictationCtl.isActive;
-  const showMic = dictationEnabled && dictationCtl.isSupported;
+  const showMic = dictationEnabled && dictationCtl.isSupported && !voiceActive;
   const { isActive: dictationActive, cancel: cancelDictation } = dictationCtl;
   useEffect(() => {
     if (!dictationEnabled && dictationActive) cancelDictation();
@@ -468,8 +479,13 @@ const AthenaChatComposer = ({ tools, slots, dictation, welcomeSuggestionCount })
     [appUrl, aui, clearAttachments, clearQuote, threadId]
   );
   const interceptSubmit = useCallback(
-    (text, draftMarkdown) => attachmentsRef.current.length > 0 || quoteRef.current !== null ? sendComposed({ text, draftMarkdown }) : false,
-    [sendComposed]
+    async (text, draftMarkdown) => {
+      if (attachmentsRef.current.length > 0 || quoteRef.current !== null) {
+        return sendComposed({ text, draftMarkdown });
+      }
+      return voice.phase === "live" && text.length > 0 ? voice.sendUserText(text) : false;
+    },
+    [sendComposed, voice.phase, voice.sendUserText]
   );
   const hasPendingExtras = useCallback(
     () => attachmentsRef.current.length > 0 || quoteRef.current !== null,
@@ -541,104 +557,110 @@ const AthenaChatComposer = ({ tools, slots, dictation, welcomeSuggestionCount })
     aui.composer.setText(send.text);
     aui.composer.send({ steer: false });
   }, [appendSpokenText, aui, dictationCtl, isRunning, sendComposed, sessionLane, slots, threadId]);
-  return /* @__PURE__ */ jsx(ComposerDropZone, { onDragActiveChange: setDragActive, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("aui-composer-entrance", entrance.className),
-      style: entrance.style,
-      onFocus: keyboardHint.onFocus,
-      children: /* @__PURE__ */ jsx(
-        ChatComposerDock,
-        {
-          appearance: "paper",
-          dragActive,
-          aboveSurface: /* @__PURE__ */ jsx(ThreadScrollToBottom, {}),
-          beforeEditor: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(ComposerQuotePreview, {}),
-            /* @__PURE__ */ jsx(ComposerAttachmentPreview, {})
-          ] }),
-          editor: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: cn(recording && "hidden"), children: /* @__PURE__ */ jsx(
-              TiptapComposer,
-              {
-                ref: composerRef,
-                threadId,
-                appearance: "paper",
-                placeholder: (runLive ? slots == null ? void 0 : slots.runningPlaceholder : void 0) ?? (slots == null ? void 0 : slots.placeholder) ?? DEFAULT_COMPOSER_PLACEHOLDER,
-                tools,
-                rootCategories,
-                onDraftStateChange,
-                waitForHostUploads,
-                interceptSubmit,
-                hasPendingExtras,
-                holdPendingExtras,
-                onAttachmentError: setComposerNotice,
-                fileIntake,
-                onSubmitted: keyboardHint.onSubmitted
-              }
-            ) }),
-            notice && /* @__PURE__ */ jsx("p", { className: "aui-composer-notice px-1.5 pb-1 text-destructive text-xs", role: "alert", children: notice }),
-            recording && /* @__PURE__ */ jsx(
-              DictationStrip,
-              {
-                status: dictationCtl.status,
-                transcript: dictationCtl.transcript,
-                stream: dictationCtl.stream,
-                stoppingLabel: dictationCtl.engine.stoppingLabel
-              }
-            ),
-            dictationEnabled && dictationCtl.status === DICTATION_STATUSES.error && dictationCtl.error && /* @__PURE__ */ jsx("p", { className: "aui-dictation-error px-1.5 pb-1 text-destructive text-xs", role: "alert", children: dictationCtl.error.message })
-          ] }),
-          toolbarStart: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: recording ? /* @__PURE__ */ jsx(DictationCancelButton, { onClick: dictationCtl.cancel }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(FileUploadButton, { className: "aui-composer-attach size-8 rounded-full p-0 disabled:opacity-30" }),
-            /* @__PURE__ */ jsx(
-              AthenaComposerMentionButton,
-              {
-                onClick: () => {
-                  var _a, _b;
-                  return (_b = (_a = composerRef.current) == null ? void 0 : _a.openMentionMenu) == null ? void 0 : _b.call(_a);
+  return /* @__PURE__ */ jsxs(ComposerDropZone, { onDragActiveChange: setDragActive, children: [
+    /* @__PURE__ */ jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("aui-composer-entrance", entrance.className),
+        style: entrance.style,
+        onFocus: keyboardHint.onFocus,
+        children: /* @__PURE__ */ jsx(
+          ChatComposerDock,
+          {
+            appearance: "paper",
+            dragActive,
+            aboveSurface: /* @__PURE__ */ jsx(ThreadScrollToBottom, {}),
+            beforeEditor: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(ChatVoiceStatus, { voice }),
+              /* @__PURE__ */ jsx(ComposerQuotePreview, {}),
+              /* @__PURE__ */ jsx(ComposerAttachmentPreview, {})
+            ] }),
+            editor: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: cn(recording && "hidden"), children: /* @__PURE__ */ jsx(
+                TiptapComposer,
+                {
+                  ref: composerRef,
+                  threadId,
+                  appearance: "paper",
+                  placeholder: (runLive ? slots == null ? void 0 : slots.runningPlaceholder : void 0) ?? (slots == null ? void 0 : slots.placeholder) ?? DEFAULT_COMPOSER_PLACEHOLDER,
+                  tools,
+                  rootCategories,
+                  onDraftStateChange,
+                  waitForHostUploads,
+                  interceptSubmit,
+                  hasPendingExtras,
+                  holdPendingExtras,
+                  onAttachmentError: setComposerNotice,
+                  fileIntake,
+                  onSubmitted: keyboardHint.onSubmitted
                 }
-              }
-            ),
-            /* @__PURE__ */ jsx(AthenaChatModeMenu, {}),
-            slots == null ? void 0 : slots.toolbarStart
-          ] }) }),
-          toolbarEnd: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: recording ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              DictationStopButton,
-              {
-                onClick: () => void stopDictation(),
-                disabled: dictationCtl.status === DICTATION_STATUSES.stopping
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              AthenaComposerSendButton,
-              {
-                action: isRunning ? "queue" : "send",
-                onSend: () => void sendDictation(),
-                disabled: dictationCtl.status !== DICTATION_STATUSES.listening || isUploading,
-                title: isUploading ? "Upload in progress..." : void 0
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            slots == null ? void 0 : slots.toolbarEnd,
-            showMic && /* @__PURE__ */ jsx(DictationMicButton, { onClick: dictationCtl.start, disabled: isUploading }),
-            /* @__PURE__ */ jsx(
-              ComposerSendOrStop,
-              {
-                composerRef,
-                hasDraft: hasText || hasExtras,
-                sendBlockedReason: isUploading ? "Upload in progress..." : null,
-                onBeforeSend: slots == null ? void 0 : slots.onBeforeSend,
-                components: ATHENA_COMPOSER_COMPONENTS
-              }
-            )
-          ] }) }),
-          belowSurface: /* @__PURE__ */ jsx(ComposerKeyboardHint, { visible: keyboardHint.visible })
-        }
-      )
-    }
-  ) });
+              ) }),
+              notice && /* @__PURE__ */ jsx("p", { className: "aui-composer-notice px-1.5 pb-1 text-destructive text-xs", role: "alert", children: notice }),
+              recording && /* @__PURE__ */ jsx(
+                DictationStrip,
+                {
+                  status: dictationCtl.status,
+                  transcript: dictationCtl.transcript,
+                  stream: dictationCtl.stream,
+                  stoppingLabel: dictationCtl.engine.stoppingLabel
+                }
+              ),
+              dictationEnabled && dictationCtl.status === DICTATION_STATUSES.error && dictationCtl.error && /* @__PURE__ */ jsx("p", { className: "aui-dictation-error px-1.5 pb-1 text-destructive text-xs", role: "alert", children: dictationCtl.error.message })
+            ] }),
+            toolbarStart: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: recording ? /* @__PURE__ */ jsx(DictationCancelButton, { onClick: dictationCtl.cancel }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(FileUploadButton, { className: "aui-composer-attach size-8 rounded-full p-0 disabled:opacity-30" }),
+              /* @__PURE__ */ jsx(
+                AthenaComposerMentionButton,
+                {
+                  onClick: () => {
+                    var _a, _b;
+                    return (_b = (_a = composerRef.current) == null ? void 0 : _a.openMentionMenu) == null ? void 0 : _b.call(_a);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(AthenaChatModeMenu, {}),
+              slots == null ? void 0 : slots.toolbarStart
+            ] }) }),
+            toolbarEnd: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: recording ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                DictationStopButton,
+                {
+                  onClick: () => void stopDictation(),
+                  disabled: dictationCtl.status === DICTATION_STATUSES.stopping
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AthenaComposerSendButton,
+                {
+                  action: isRunning ? "queue" : "send",
+                  onSend: () => void sendDictation(),
+                  disabled: dictationCtl.status !== DICTATION_STATUSES.listening || isUploading,
+                  title: isUploading ? "Upload in progress..." : void 0
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              slots == null ? void 0 : slots.toolbarEnd,
+              showMic && /* @__PURE__ */ jsx(DictationMicButton, { onClick: dictationCtl.start, disabled: isUploading }),
+              voiceEnabled && /* @__PURE__ */ jsx(ChatVoiceButton, { voice, disabled: isUploading || dictationCtl.isActive || !isStatewireChannelLive(connection) }),
+              /* @__PURE__ */ jsx(
+                ComposerSendOrStop,
+                {
+                  composerRef,
+                  hasDraft: hasText || hasExtras,
+                  liveVoice: voice.phase === "live" && !hasExtras,
+                  sendBlockedReason: isUploading ? "Upload in progress..." : null,
+                  onBeforeSend: slots == null ? void 0 : slots.onBeforeSend,
+                  components: ATHENA_COMPOSER_COMPONENTS
+                }
+              )
+            ] }) }),
+            belowSurface: /* @__PURE__ */ jsx(ComposerKeyboardHint, { visible: keyboardHint.visible })
+          }
+        )
+      }
+    )
+  ] });
 };
 const MessageError = () => /* @__PURE__ */ jsx(MessagePrimitive.Error, { children: /* @__PURE__ */ jsxs(ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 flex items-start gap-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200", children: [
   /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-4 shrink-0" }),