@athenaintel/react 0.23.1 → 0.23.3

package/README.md

@@ -459,6 +459,17 @@ Both use the same bearer / API key as session creation. The full recipe
 template skill `voice-session-guide.md`. `createAthenaVoiceSession` is also
 exported if you hold the bridge state yourself.
 
+## What's new in 0.23.3
+
+**Dictation in the composer.** `<AthenaChat>` now has a microphone left of Send. Click it and the editor row becomes a live waveform; Stop puts the spoken words into the draft for review, Send sends them (queued while a run is live). The default engine is the browser's Web Speech API (Chrome, Edge, Safari) — no backend, no extra dependency; the mic hides itself where the engine is missing (Firefox). Pass `dictation={false}` to remove it, or `dictation={{ lang, engine }}` to set the language or plug in another speech engine (`DictationEngine` interface, `useDictation()` hook, `DictationStrip` component are exported for custom composers).
+
+**Composer slots.** New `composer` prop on `<AthenaChat>`: `toolbarStart` renders after the attach button, `toolbarEnd` before the mic and Send, and `onBeforeSend` runs host bookkeeping before every submit (dictated sends included). Slot components render inside the chat's thread scope, so `useAthenaRunLive()` works in them; the template's model-picker portal is no longer needed.
+
+**Frontend tools bind reliably.** Two fixes to the `frontendTools` run config: (1) tools with an `execute()` no longer also ride `enabled_tools` — doing so switched on any backend toolkit owning a tool of the same name, and the backend won the collision, so the client tool was silently dropped (a frontend `notify_user` ran the backend notification cascade instead); (2) declaring executable frontend tools without a recognised `appId` now emits an `sdk.config.warning` error through diagnostics and `onError`, because the deep-agent runtime drops every client tool for an unknown `app_id` without telling the client.
+## What's new in 0.23.2
+
+- Assistant turns no longer draw the grey vertical rule down their left edge. `AthenaChat` renders the lead column only when the host passes an `AvatarComponent`; without one the reply sits flush with the thread column and is told apart from the right-aligned user bubbles by alignment alone.
+
 ## What's new in 0.23.1
 
 - Hotfix: 0.23.0 crashed `AthenaChat` on mount in published apps ("The chat hit an error", `Cannot read properties of undefined (reading 'status')`). The message-window hook shipped in 0.23.0 reads `connection` from the statewire extras, which exists in `@assistant-ui/react-statewire` 0.29 / `statewire` 0.19 — the versions the monorepo resolves and tests against — but the package still pinned 0.28.1 / 0.18.2 for consumers. The pins now match the tested versions, and a test fails the build if they drift again.
@@ -1151,7 +1162,7 @@ Hosts that already run **Tailwind v4** (like the athena-app template) may instea
 
 Importing `styles.css` alongside a host Tailwind build is harmless (utilities are identical and layered). One caveat for themed Tailwind hosts: token values set on the `.athena-sdk` element shadow values inherited from `:root`, so define your app's token overrides on `.athena-sdk` too (`:root, .athena-sdk { --primary: …; }`) — or use the `theme` prop below, which always wins.
 
-The thread's reading column defaults to a 46rem measure (set it with `<AthenaChat maxWidth>`; the chat passes that value to the thread, so the `threadMaxWidth` theme token does not reach it), 15px body text on a relaxed leading, and the `--font-sans` stack (`Inter, ui-sans-serif, system-ui, …` — a stack only, the SDK downloads no webfont). Override the face with `theme.fontFamily`, or `.athena-sdk { --font-sans: …; }`. Assistant turns carry a quiet 2px leading rule (replace it with `components.AssistantAvatar`); every message shows its time on hover beside its action bar, and a day separator marks the first message of a new calendar day.
+The thread's reading column defaults to a 46rem measure (set it with `<AthenaChat maxWidth>`; the chat passes that value to the thread, so the `threadMaxWidth` theme token does not reach it), 15px body text on a relaxed leading, and the `--font-sans` stack (`Inter, ui-sans-serif, system-ui, …` — a stack only, the SDK downloads no webfont). Override the face with `theme.fontFamily`, or `.athena-sdk { --font-sans: …; }`. Assistant turns sit flush with the column and carry no leading rule (pass `components.AssistantAvatar` to add a lead column); every message shows its time on hover beside its action bar, and a day separator marks the first message of a new calendar day.
 
 ## Theming
 
@@ -1201,8 +1212,40 @@ Dedicated tool UIs built on `ToolCard` follow the provider automatically; `useTo
 ## Composer Hooks
 
 Use `useAppendToComposer()` when you want to prefill a draft without sending it.
+Pass `{ focus: true }` to put the caret after the text once the editor shows it,
+so the user can finish the draft by typing or dictating (an agenda card that
+prefills "Here is what happened in this meeting:", for example):
+
+```tsx
+import { useAppendToComposer } from '@athenaintel/react';
+
+function MeetingCard({ block }: { block: string }) {
+  const append = useAppendToComposer();
+  return (
+    <button onClick={() => append(block, { replace: true, focus: true })}>
+      Brief the agent
+    </button>
+  );
+}
+```
 
-Use `useSendMessage()` for workflow buttons, sidebar shortcuts, and other UI that lives outside `<AthenaChat>` but still needs to submit a prompt.
+Both hooks are safe to call at any time. A write made before the chat is
+ready — with `enableThreadList`, while the list is still resolving the active
+thread, or while the thread's history is still loading — waits in the provider
+and lands once the composer is ready, instead of being lost with the mount it
+was written into (the provider keys its statewire subtree by thread). Readiness
+is not the socket: a never-started chat sits in `standby` until its first send
+and still takes a prefill. Early writes keep their order (two early sends both
+go out, first then second; adjacent plain appends fold into one draft), and
+each is bound to the thread it was made for: if the user switches threads, the
+identity changes, or the provider unmounts before it lands, it is dropped —
+`useSendMessage` rejects with an `AthenaSdkError` (`composer_write_dropped`)
+and a `composer.handoff` diagnostic says why — never written into another
+thread. `useComposerReady()` exposes the readiness for UI that wants to show a
+"loading" state; `composer.handoff` records each deferred, applied and dropped
+write.
+
+Use `useSendMessage()` for workflow buttons, sidebar shortcuts, and other UI that lives outside `<AthenaChat>` but still needs to submit a prompt. Its promise settles once the send has been dispatched, including a send that waited for the connection.
 
 ```tsx
 import { useSendMessage } from '@athenaintel/react';

package/dist/chat/AthenaChat.cjs

@@ -39,6 +39,12 @@ const chatThreadShell = require("../chat-ui/thread/chat-thread-shell.cjs");
 const statewireHistoryEdge = require("../chat-ui/thread/statewire-history-edge.cjs");
 const threadLoadingOverlay = require("../chat-ui/thread/thread-loading-overlay.cjs");
 const composerSendOrStop = require("../chat-ui/thread/composer-send-or-stop.cjs");
+const composerAction = require("../chat-ui/composer/composer-action.cjs");
+const athenaDiagnostics = require("../diagnostics/athena-diagnostics.cjs");
+const useDictation = require("../dictation/use-dictation.cjs");
+const DictationStrip = require("../dictation/DictationStrip.cjs");
+const dictationControls = require("../dictation/dictation-controls.cjs");
+const dictationState = require("../dictation/dictation-state.cjs");
 const tiptapComposer = require("../chat-ui/composer/tiptap-composer.cjs");
 const apiClient = require("../chat-ui/mentions/suggestions/data/api-client.cjs");
 const messageComponents = require("../chat-ui/messages/message-components.cjs");
@@ -144,7 +150,9 @@ const AthenaChat = ({
   mentionTools,
   welcomeSuggestions = athenaChatWelcome.DEFAULT_WELCOME_SUGGESTIONS,
   components,
-  groupToolCalls = true
+  groupToolCalls = true,
+  composer: composerSlots,
+  dictation = true
 }) => {
   var _a, _b, _c;
   const athenaConfig = AthenaContext.useAthenaConfig();
@@ -252,6 +260,8 @@ const AthenaChat = ({
             AthenaChatComposer,
             {
               tools,
+              slots: composerSlots,
+              dictation,
               welcomeSuggestionCount: welcomeSuggestions.length
             }
           ) })
@@ -310,7 +320,7 @@ const ATHENA_CHAT_MENTION_CATEGORIES = [
   "projects",
   "folders"
 ];
-const AthenaChatComposer = ({ tools, welcomeSuggestionCount }) => {
+const AthenaChatComposer = ({ tools, slots, dictation, welcomeSuggestionCount }) => {
   const aui = react.useAui();
   const threadId = threadIdContext.useAthenaStatewireThreadId();
   const { appUrl } = AthenaContext.useAthenaConfig();
@@ -319,6 +329,10 @@ const AthenaChatComposer = ({ tools, welcomeSuggestionCount }) => {
   const { attachFiles } = useAttachFiles.useAttachFiles();
   const composerRef = react$1.useRef(null);
   const [hasText, setHasText] = react$1.useState(false);
+  const isRunning = react.useAuiState((state) => {
+    var _a;
+    return ((_a = state.optional.thread) == null ? void 0 : _a.isRunning) ?? false;
+  });
   const [dragActive, setDragActive] = react$1.useState(false);
   const keyboardHint = composerKeyboardHint.useComposerKeyboardHint();
   const reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion();
@@ -328,6 +342,28 @@ const AthenaChatComposer = ({ tools, welcomeSuggestionCount }) => {
     athenaChatWelcome.welcomeComposerDelayMs(welcomeSuggestionCount),
     reducedMotion || !mountedEmpty
   );
+  const dictationEnabled = dictation !== false;
+  const dictationOptions = typeof dictation === "object" ? dictation : void 0;
+  const appendSpokenText = react$1.useCallback(
+    (spoken) => {
+      if (!spoken) return;
+      aui.composer.setText(dictationState.composeDictationDraft(aui.composer.getState().text ?? "", spoken));
+    },
+    [aui]
+  );
+  const dictationCtl = useDictation.useDictation({
+    engine: dictationOptions == null ? void 0 : dictationOptions.engine,
+    lang: dictationOptions == null ? void 0 : dictationOptions.lang,
+    // A recognizer that gives up on its own (silence window) still hands
+    // over what it heard instead of dropping the words with the session.
+    onAutoEnd: appendSpokenText
+  });
+  const recording = dictationEnabled && dictationCtl.isActive;
+  const showMic = dictationEnabled && dictationCtl.isSupported;
+  const { isActive: dictationActive, cancel: cancelDictation } = dictationCtl;
+  react$1.useEffect(() => {
+    if (!dictationEnabled && dictationActive) cancelDictation();
+  }, [cancelDictation, dictationActive, dictationEnabled]);
   const rootCategories = react$1.useMemo(() => {
     const categories = [...ATHENA_CHAT_MENTION_CATEGORIES];
     if (tools.some((tool) => tool.type === "toolkit")) categories.push("toolkits");
@@ -383,6 +419,36 @@ const AthenaChatComposer = ({ tools, welcomeSuggestionCount }) => {
     }),
     [attachFiles]
   );
+  const stopDictation = react$1.useCallback(async () => {
+    appendSpokenText(await dictationCtl.stop());
+  }, [appendSpokenText, dictationCtl]);
+  const sendDictation = react$1.useCallback(async () => {
+    var _a;
+    const spoken = await dictationCtl.stop();
+    const text = dictationState.composeDictationDraft(aui.composer.getState().text ?? "", spoken);
+    const extras = attachmentsRef.current.length > 0 || quoteRef.current !== null;
+    if (!text && !extras) return;
+    aui.composer.setText(text);
+    const action = composerAction.resolveComposerAction({ hasDraft: true, isRunning });
+    if (action === "stop") return;
+    try {
+      await ((_a = slots == null ? void 0 : slots.onBeforeSend) == null ? void 0 : _a.call(slots, { action }));
+    } catch (error) {
+      athenaDiagnostics.athenaDiagnostics.emit("composer.dictation", {
+        level: "warn",
+        data: {
+          phase: "before_send_rejected",
+          error: error instanceof Error ? error.message : String(error)
+        }
+      });
+      return;
+    }
+    if (extras) {
+      sendComposed(text);
+      return;
+    }
+    aui.composer.send({ steer: false });
+  }, [aui, dictationCtl, isRunning, sendComposed, slots]);
   return /* @__PURE__ */ jsxRuntime.jsx(ComposerDropZone.ComposerDropZone, { onDragActiveChange: setDragActive, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -399,23 +465,34 @@ const AthenaChatComposer = ({ tools, welcomeSuggestionCount }) => {
             /* @__PURE__ */ jsxRuntime.jsx(ComposerQuotePreview.ComposerQuotePreview, {}),
             /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachmentPreview.ComposerAttachmentPreview, {})
           ] }),
-          editor: /* @__PURE__ */ jsxRuntime.jsx(
-            tiptapComposer.TiptapComposer,
-            {
-              ref: composerRef,
-              threadId,
-              appearance: "paper",
-              placeholder: "Type @ to tag an asset",
-              tools,
-              rootCategories,
-              onDraftStateChange: setHasText,
-              waitForHostUploads,
-              interceptSubmit,
-              fileIntake,
-              onSubmitted: keyboardHint.onSubmitted
-            }
-          ),
-          toolbarStart: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          editor: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cnfast.cn(recording && "hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(
+              tiptapComposer.TiptapComposer,
+              {
+                ref: composerRef,
+                threadId,
+                appearance: "paper",
+                placeholder: "Type @ to tag an asset",
+                tools,
+                rootCategories,
+                onDraftStateChange: setHasText,
+                waitForHostUploads,
+                interceptSubmit,
+                fileIntake,
+                onSubmitted: keyboardHint.onSubmitted
+              }
+            ) }),
+            recording && /* @__PURE__ */ jsxRuntime.jsx(
+              DictationStrip.DictationStrip,
+              {
+                status: dictationCtl.status,
+                transcript: dictationCtl.transcript,
+                stream: dictationCtl.stream
+              }
+            ),
+            dictationEnabled && dictationCtl.status === dictationState.DICTATION_STATUSES.error && dictationCtl.error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "aui-dictation-error px-1.5 pb-1 text-destructive text-xs", role: "alert", children: dictationCtl.error.message })
+          ] }),
+          toolbarStart: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: recording ? /* @__PURE__ */ jsxRuntime.jsx(dictationControls.DictationCancelButton, { onClick: dictationCtl.cancel }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(FileUploadButton.FileUploadButton, { className: "aui-composer-attach size-8 rounded-full p-0 disabled:opacity-30" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               athenaComposerControls.AthenaComposerMentionButton,
@@ -425,17 +502,40 @@ const AthenaChatComposer = ({ tools, welcomeSuggestionCount }) => {
                   return (_b = (_a = composerRef.current) == null ? void 0 : _a.openMentionMenu) == null ? void 0 : _b.call(_a);
                 }
               }
+            ),
+            slots == null ? void 0 : slots.toolbarStart
+          ] }) }),
+          toolbarEnd: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: recording ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              dictationControls.DictationStopButton,
+              {
+                onClick: () => void stopDictation(),
+                disabled: dictationCtl.status === dictationState.DICTATION_STATUSES.stopping
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              athenaComposerControls.AthenaComposerSendButton,
+              {
+                action: isRunning ? "queue" : "send",
+                onSend: () => void sendDictation(),
+                disabled: dictationCtl.status !== dictationState.DICTATION_STATUSES.listening || isUploading,
+                title: isUploading ? "Upload in progress..." : void 0
+              }
             )
-          ] }),
-          toolbarEnd: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-            composerSendOrStop.ComposerSendOrStop,
-            {
-              composerRef,
-              hasDraft: hasText || hasExtras,
-              sendBlockedReason: isUploading ? "Upload in progress..." : null,
-              components: athenaComposerControls.ATHENA_COMPOSER_COMPONENTS
-            }
-          ) }),
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            slots == null ? void 0 : slots.toolbarEnd,
+            showMic && /* @__PURE__ */ jsxRuntime.jsx(dictationControls.DictationMicButton, { onClick: dictationCtl.start, disabled: isUploading }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              composerSendOrStop.ComposerSendOrStop,
+              {
+                composerRef,
+                hasDraft: hasText || hasExtras,
+                sendBlockedReason: isUploading ? "Upload in progress..." : null,
+                onBeforeSend: slots == null ? void 0 : slots.onBeforeSend,
+                components: athenaComposerControls.ATHENA_COMPOSER_COMPONENTS
+              }
+            )
+          ] }) }),
           belowSurface: /* @__PURE__ */ jsxRuntime.jsx(composerKeyboardHint.ComposerKeyboardHint, { visible: keyboardHint.visible })
         }
       )
@@ -706,21 +806,14 @@ const AthenaAssistantMessage = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(MessageDaySeparator, {}),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          AvatarComponent ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               "data-slot": "assistant-lead",
               className: "aui-assistant-message-lead flex shrink-0 justify-center",
-              children: AvatarComponent ? /* @__PURE__ */ jsxRuntime.jsx(AvatarComponent, {}) : /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  "data-slot": "assistant-rule",
-                  className: "aui-assistant-message-rule w-0.5 self-stretch rounded-full bg-border"
-                }
-              )
+              children: /* @__PURE__ */ jsxRuntime.jsx(AvatarComponent, {})
             }
-          ),
+          ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx(AthenaReasoningTextComponentContext.Provider, { value: TextComponent, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed", children: [
               /* @__PURE__ */ jsxRuntime.jsx(NestedPtcMessages.NestedPtcComponentsProvider, { components: nestedPtcComponents, children: groupToolCalls ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-2", children: [