@k2b/ui 0.39.0 → 0.41.0

package/dist/browser/chat/ChatComposer.js

@@ -24,53 +24,58 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span><strong>`),
   _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__highlight aria-hidden=true><!$><!/>\n`),
   _tmpl$0 = /*#__PURE__*/_$template(`<textarea class=k2b-chat-composer__measure rows=1 tabindex=-1 aria-hidden=true readonly>`),
   _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__input role=group><!$><!/><textarea rows=1></textarea><!$><!/>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__command-detail><small></small><small><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><!$><!/>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__command-end><i class="ti ti-check"aria-hidden=true></i><span class=k2b-sr-only>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<button class=k2b-chat-composer__command type=button role=option tabindex=-1><i aria-hidden=true></i><span class=k2b-chat-composer__command-text><strong></strong><!$><!/></span><!$><!/>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<b>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<small>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-message-row__quote-author><span class=k2b-sr-only><!$><!/> </span><!$><!/>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-message-row__quote-text>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<label class=k2b-chat-composer__command-search><i class="ti ti-search"aria-hidden=true></i><input type=text role=combobox aria-autocomplete=list aria-expanded=true autocomplete=off autocapitalize=off>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<div role=status>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory data-commands><!$><!/><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__hint aria-live=polite>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__row><!$><!/><!$><!/><div class=k2b-chat-composer__field><!$><!/><div class=k2b-chat-composer__field-tools><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-shell><!$><!/><section role=group><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></section><div class=k2b-sr-only role=status aria-live=polite></div><div class=k2b-chat-composer__status role=status><!$><!/><!$><!/>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><span class=k2b-chat-composer__emoji-glyph aria-hidden=true></span><strong></strong><!$><!/>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<small>:<!$><!/>:`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><i aria-hidden=true></i><strong></strong><!$><!/>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
-  _tmpl$34 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-group role=group><div class=k2b-chat-composer__command-heading role=presentation><span></span><!$><!/></div><!$><!/><!$><!/>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-placeholder aria-hidden=true><span></span><span><span></span><span>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__hint-text>`),
-  _tmpl$37 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__dictation><i aria-hidden=true></i><span>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__hint-action>`),
-  _tmpl$39 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__reply><!$><!/><button type=button class="k2b-chat-composer__icon-action k2b-chat-composer__reply-cancel"><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$40 = /*#__PURE__*/_$template(`<div class=k2b-message-row__quote>`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<button type=button class=k2b-message-row__quote>`),
-  _tmpl$42 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$43 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$44 = /*#__PURE__*/_$template(`<img>`),
-  _tmpl$45 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
-  _tmpl$46 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
-  _tmpl$47 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
-  _tmpl$48 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
-  _tmpl$49 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$50 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$51 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__status-line><i aria-hidden=true></i><span>`),
-  _tmpl$52 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`);
+  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-dictation-mark>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__command-detail><small></small><small><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><!$><!/>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__command-end><i class="ti ti-check"aria-hidden=true></i><span class=k2b-sr-only>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<button class=k2b-chat-composer__command type=button role=option tabindex=-1><i aria-hidden=true></i><span class=k2b-chat-composer__command-text><strong></strong><!$><!/></span><!$><!/>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<b>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<small>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-message-row__quote-author><span class=k2b-sr-only><!$><!/> </span><!$><!/>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-message-row__quote-text>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<label class=k2b-chat-composer__command-search><i class="ti ti-search"aria-hidden=true></i><input type=text role=combobox aria-autocomplete=list aria-expanded=true autocomplete=off autocapitalize=off>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div role=status>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory data-commands><!$><!/><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__hint aria-live=polite>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__dictation>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__row><!$><!/><!$><!/><div class=k2b-chat-composer__field><!$><!/><div class=k2b-chat-composer__field-tools><!$><!/><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-shell><!$><!/><section role=group><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></section><div class=k2b-sr-only role=status aria-live=polite></div><div class=k2b-chat-composer__status role=status><!$><!/><!$><!/>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><span class=k2b-chat-composer__emoji-glyph aria-hidden=true></span><strong></strong><!$><!/>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<small>:<!$><!/>:`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><i aria-hidden=true></i><strong></strong><!$><!/>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-group role=group><div class=k2b-chat-composer__command-heading role=presentation><span></span><!$><!/></div><!$><!/><!$><!/>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-placeholder aria-hidden=true><span></span><span><span></span><span>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__hint-text>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__dictation><i aria-hidden=true></i><span>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__hint-action>`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__reply><!$><!/><button type=button class="k2b-chat-composer__icon-action k2b-chat-composer__reply-cancel"><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<div class=k2b-message-row__quote>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<button type=button class=k2b-message-row__quote>`),
+  _tmpl$44 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$45 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$46 = /*#__PURE__*/_$template(`<img>`),
+  _tmpl$47 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
+  _tmpl$48 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
+  _tmpl$49 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
+  _tmpl$50 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
+  _tmpl$51 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$52 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$53 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__status-line><i aria-hidden=true></i><span>`),
+  _tmpl$54 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`);
 import { batch, children, createEffect, createMemo, createSignal, createUniqueId, For, Index, on, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Dropdown } from "../actions/Dropdown";
 import { dialogHistorySettled, holdDialogHistory } from "../feedback/dialog-core";
 import { Tooltip } from "../feedback/Tooltip";
+import { createDictation } from "../inputs/dictation/create-dictation";
+import { DictationBar, DictationButton, dictationBarShown } from "../inputs/dictation/Dictation";
+import { beginTextDictation, discardTextDictation, insertTextDictation, mapTextDictation, mapTextOffset, splitDictationSegments } from "../inputs/dictation/text-dictation";
 import { replaceTextareaRange } from "../inputs/editor-dom";
 import { completedEmojiShortcode, emojiInTone, emojiName, emojiShortcodeQuery, loadEmojiIndex, suggestEmoji } from "../inputs/emoji/emoji-index";
 import { FileDropTarget } from "../inputs/FileDropTarget";
@@ -756,13 +761,126 @@ export function ChatComposer(props) {
       syncCaret();
     });
   };
+  /** Whether the person placed the caret in this field yet; before that, dictation starts at the end. */
+  let caretPlaced = false;
   const syncCaret = () => {
+    caretPlaced = true;
     // One update, so no effect sees a half-moved selection (it would read as "no `/` here" and reopen a closed list).
     batch(() => {
       setCaret(textareaRef?.selectionStart ?? props.value.length);
       setSelectionEnd(textareaRef?.selectionEnd ?? props.value.length);
     });
   };
+  // Live dictation writes at its own mark. Edits elsewhere move the mark and the dictated ranges along, and the
+  // person's own caret stays where it was while words arrive.
+  let dictated;
+  let dictatedValue = "";
+  const [dictationView, setDictationView] = createSignal();
+  let freshWords = [];
+  let freshTimer;
+  const freshMs = 1_500;
+  const showDictation = () => {
+    if (freshTimer) clearTimeout(freshTimer);
+    freshTimer = undefined;
+    if (!dictated) {
+      freshWords = [];
+      setDictationView(undefined);
+      return;
+    }
+    const now = performance.now();
+    freshWords = freshWords.filter(word => now - word.at < freshMs && word.to > word.from);
+    setDictationView({
+      mark: dictated.mark,
+      fresh: freshWords.map(word => [word.from, word.to])
+    });
+    if (freshWords.length) freshTimer = setTimeout(showDictation, Math.max(50, freshMs - (now - freshWords[0].at)));
+  };
+  createEffect(on(() => props.value, value => {
+    if (!dictated || value === dictatedValue) return;
+    const previous = dictatedValue;
+    dictated = mapTextDictation(dictated, previous, value);
+    freshWords = freshWords.map(word => ({
+      ...word,
+      from: mapTextOffset(previous, value, word.from, true),
+      to: mapTextOffset(previous, value, word.to, false)
+    }));
+    dictatedValue = value;
+    showDictation();
+  }));
+  const writeDictated = (value, mapSelection) => {
+    const field = textareaRef;
+    const focused = field && field.ownerDocument.activeElement === field;
+    const start = field ? mapSelection(field.selectionStart) : 0;
+    const end = field ? mapSelection(field.selectionEnd) : 0;
+    dictatedValue = value;
+    edit(value);
+    autoResize();
+    if (!field || !focused) return;
+    const restore = () => field.setSelectionRange(Math.min(start, field.value.length), Math.min(end, field.value.length));
+    restore();
+    queueMicrotask(restore);
+  };
+  const liveDictation = createDictation({
+    source: {
+      start: options => props.dictation.source.start(options),
+      devices: () => props.dictation?.source.devices() ?? Promise.resolve([])
+    },
+    get alternative() {
+      return props.dictation?.alternative;
+    },
+    disabled: () => !props.dictation || editBlocked(),
+    target: {
+      begin: () => {
+        if (dictated) {
+          dictated = {
+            ...dictated,
+            fresh: true
+          };
+          return;
+        }
+        const field = textareaRef;
+        dictated = beginTextDictation(field && caretPlaced ? Math.min(field.selectionEnd, props.value.length) : props.value.length);
+        dictatedValue = props.value;
+        freshWords = [];
+        showDictation();
+      },
+      insert: text => {
+        if (!dictated) return;
+        const before = dictated.mark;
+        const next = insertTextDictation(dictated, props.value, text);
+        const added = next.value.length - props.value.length;
+        if (!added) return;
+        dictated = next.state;
+        freshWords.push({
+          from: next.state.mark - added,
+          to: next.state.mark,
+          at: performance.now()
+        });
+        writeDictated(next.value, offset => offset >= before ? offset + added : offset);
+        showDictation();
+      },
+      discard: () => {
+        if (!dictated) return;
+        const state = dictated;
+        const next = discardTextDictation(state, props.value);
+        dictated = undefined;
+        writeDictated(next.value, offset => {
+          let moved = offset;
+          for (const [from, to] of state.ranges) if (offset >= to) moved -= to - from;else if (offset > from) moved -= offset - from;
+          return moved;
+        });
+        showDictation();
+      },
+      end: () => {
+        dictated = undefined;
+        showDictation();
+      }
+    }
+  });
+  onCleanup(() => {
+    if (freshTimer) clearTimeout(freshTimer);
+  });
+  const dictating = () => Boolean(props.dictation) && dictationBarShown(liveDictation);
   /** Closes the list opened from "+"; `refocus` gives the field its focus and the selection it had when "+" was pressed. */
   const endAddSearch = refocus => {
     const search = addSearch();
@@ -819,9 +937,17 @@ export function ChatComposer(props) {
   const blocked = () => busy() || submitting();
   /** The conversation field stays editable while a message is sent, so it keeps the focus and a phone its keyboard. */
   const editBlocked = () => conversation() ? busy() : blocked();
+  // Dictation belongs to one draft in one editable field: another draft, a field that turns read-only or a host that
+  // drops the source ends it; the words so far stay.
+  // Memos compare values, so typing and arriving words never end it.
+  const dictationField = createMemo(() => `${Boolean(props.dictation)}:${editBlocked()}`);
+  const dictationDraft = createMemo(() => props.draftKey);
+  createEffect(on([dictationField, dictationDraft], () => liveDictation.end(), {
+    defer: true
+  }));
   const hasDraft = () => Boolean(props.value.trim() || !running() && attachments().length > 0);
   /** The draft may go out now, apart from a submission that is already on its way. */
-  const submittable = () => !busy() && !props.submitDisabled && hasDraft() && !(running() && runningSubmitIntent() === "steer" && mentions().length);
+  const submittable = () => !busy() && !props.submitDisabled && hasDraft() && !(props.dictation && liveDictation.active()) && !(running() && runningSubmitIntent() === "steer" && mentions().length);
   const canSubmit = () => !submitting() && submittable();
   const canSelectFiles = () => Boolean(props.fileSelection && !props.fileSelection.disabled && !running() && !blocked());
   const hasAddMenu = () => Boolean(props.fileSelection || props.menuActions?.length);
@@ -1990,7 +2116,7 @@ export function ChatComposer(props) {
       [_el$28, _co$5] = _$getNextMarker(_el$27.nextSibling);
     _$insert(_el$18, _$createComponent(Show, {
       get when() {
-        return mentions().length > 0;
+        return mentions().length > 0 || dictationView();
       },
       get children() {
         var _el$19 = _$getNextElement(_tmpl$9),
@@ -2001,13 +2127,22 @@ export function ChatComposer(props) {
         typeof _ref$4 === "function" ? _$use(_ref$4, _el$19) : highlightRef = _el$19;
         _$insert(_el$19, _$createComponent(For, {
           get each() {
-            return chatMentionSegments(props.value, mentions());
+            return splitDictationSegments(chatMentionSegments(props.value, mentions()), dictationView()?.fresh ?? [], dictationView()?.mark);
           },
-          children: part => (() => {
-            var _el$29 = _$getNextElement(_tmpl$10);
-            _$insert(_el$29, () => part.text);
-            _$effect(() => _el$29.classList.toggle("k2b-chat-composer__mention", !!Boolean(part.mention)));
-            return _el$29;
+          children: part => part.mark ? _$getNextElement(_tmpl$10) : (() => {
+            var _el$30 = _$getNextElement(_tmpl$11);
+            _$insert(_el$30, () => part.text);
+            _$effect(_p$ => {
+              var _v$13 = !!Boolean(part.mention),
+                _v$14 = !!Boolean(part.fresh);
+              _v$13 !== _p$.e && _el$30.classList.toggle("k2b-chat-composer__mention", _p$.e = _v$13);
+              _v$14 !== _p$.t && _el$30.classList.toggle("k2b-dictation-fresh", _p$.t = _v$14);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$30;
           })()
         }), _el$22, _co$3);
         return _el$19;
@@ -2075,7 +2210,7 @@ export function ChatComposer(props) {
     }), _el$28, _co$5);
     _$effect(_p$ => {
       var _v$3 = chatMessages().messageInput,
-        _v$4 = !!(mentions().length > 0),
+        _v$4 = !!(mentions().length > 0 || Boolean(dictationView())),
         _v$5 = editBlocked() && openingRow() === undefined,
         _v$6 = openingRow() !== undefined,
         _v$7 = conversation() ? "enter" : undefined,
@@ -2154,28 +2289,28 @@ export function ChatComposer(props) {
     const opening = () => openingRow() === key;
     const failure = () => openFailures()[key];
     return (() => {
-      var _el$30 = _$getNextElement(_tmpl$13),
-        _el$31 = _el$30.firstChild,
-        _el$32 = _el$31.nextSibling,
-        _el$33 = _el$32.firstChild,
-        _el$40 = _el$33.nextSibling,
-        [_el$41, _co$7] = _$getNextMarker(_el$40.nextSibling),
-        _el$45 = _el$32.nextSibling,
-        [_el$46, _co$8] = _$getNextMarker(_el$45.nextSibling);
-      _el$30.$$click = event => {
+      var _el$31 = _$getNextElement(_tmpl$14),
+        _el$32 = _el$31.firstChild,
+        _el$33 = _el$32.nextSibling,
+        _el$34 = _el$33.firstChild,
+        _el$41 = _el$34.nextSibling,
+        [_el$42, _co$7] = _$getNextMarker(_el$41.nextSibling),
+        _el$46 = _el$33.nextSibling,
+        [_el$47, _co$8] = _$getNextMarker(_el$46.nextSibling);
+      _el$31.$$click = event => {
         event.preventDefault();
         void executeCommand(command());
       };
-      _el$30.$$mousedown = keepFieldFocus;
-      _el$30.$$pointerdown = event => {
+      _el$31.$$mousedown = keepFieldFocus;
+      _el$31.$$pointerdown = event => {
         pressedCommand = {
           key,
           row: event.currentTarget
         };
         setHoldingRows(true);
       };
-      _$setAttribute(_el$30, "data-command-key", key);
-      _$insert(_el$33, _$createComponent(Show, {
+      _$setAttribute(_el$31, "data-command-key", key);
+      _$insert(_el$34, _$createComponent(Show, {
         get when() {
           return highlight();
         },
@@ -2183,12 +2318,12 @@ export function ChatComposer(props) {
           return title();
         },
         children: range => [_$memo(() => title().slice(0, range()[0])), (() => {
-          var _el$47 = _$getNextElement(_tmpl$14);
-          _$insert(_el$47, () => title().slice(range()[0], range()[1]));
-          return _el$47;
+          var _el$48 = _$getNextElement(_tmpl$15);
+          _$insert(_el$48, () => title().slice(range()[0], range()[1]));
+          return _el$48;
         })(), _$memo(() => title().slice(range()[1]))]
       }));
-      _$insert(_el$32, _$createComponent(Show, {
+      _$insert(_el$33, _$createComponent(Show, {
         get when() {
           return _$memo(() => !!command().open)() && !command().reason;
         },
@@ -2198,67 +2333,67 @@ export function ChatComposer(props) {
               return command().reason ?? command().description;
             },
             get children() {
-              var _el$48 = _$getNextElement(_tmpl$15);
-              _$insert(_el$48, () => command().reason ?? command().description);
-              _$effect(() => _$setAttribute(_el$48, "id", command().reason ? `${commandOptionId(command())}-reason` : undefined));
-              return _el$48;
+              var _el$49 = _$getNextElement(_tmpl$16);
+              _$insert(_el$49, () => command().reason ?? command().description);
+              _$effect(() => _$setAttribute(_el$49, "id", command().reason ? `${commandOptionId(command())}-reason` : undefined));
+              return _el$49;
             }
           });
         },
         get children() {
-          var _el$34 = _$getNextElement(_tmpl$11),
-            _el$35 = _el$34.firstChild,
-            _el$36 = _el$35.nextSibling,
-            _el$37 = _el$36.firstChild,
-            _el$38 = _el$37.nextSibling,
-            [_el$39, _co$6] = _$getNextMarker(_el$38.nextSibling);
-          _$insert(_el$35, () => failure() ?? command().description);
-          _$insert(_el$36, () => command().busyLabel ?? chatMessages().commandOpening, _el$39, _co$6);
+          var _el$35 = _$getNextElement(_tmpl$12),
+            _el$36 = _el$35.firstChild,
+            _el$37 = _el$36.nextSibling,
+            _el$38 = _el$37.firstChild,
+            _el$39 = _el$38.nextSibling,
+            [_el$40, _co$6] = _$getNextMarker(_el$39.nextSibling);
+          _$insert(_el$36, () => failure() ?? command().description);
+          _$insert(_el$37, () => command().busyLabel ?? chatMessages().commandOpening, _el$40, _co$6);
           _$effect(_p$ => {
-            var _v$13 = opening() ? "busy" : failure() ? "failed" : undefined,
-              _v$14 = opening() ? "true" : undefined,
-              _v$15 = opening() ? undefined : "true";
-            _v$13 !== _p$.e && _$setAttribute(_el$34, "data-state", _p$.e = _v$13);
-            _v$14 !== _p$.t && _$setAttribute(_el$35, "aria-hidden", _p$.t = _v$14);
-            _v$15 !== _p$.a && _$setAttribute(_el$36, "aria-hidden", _p$.a = _v$15);
+            var _v$15 = opening() ? "busy" : failure() ? "failed" : undefined,
+              _v$16 = opening() ? "true" : undefined,
+              _v$17 = opening() ? undefined : "true";
+            _v$15 !== _p$.e && _$setAttribute(_el$35, "data-state", _p$.e = _v$15);
+            _v$16 !== _p$.t && _$setAttribute(_el$36, "aria-hidden", _p$.t = _v$16);
+            _v$17 !== _p$.a && _$setAttribute(_el$37, "aria-hidden", _p$.a = _v$17);
             return _p$;
           }, {
             e: undefined,
             t: undefined,
             a: undefined
           });
-          return _el$34;
+          return _el$35;
         }
-      }), _el$41, _co$7);
-      _$insert(_el$30, _$createComponent(Show, {
+      }), _el$42, _co$7);
+      _$insert(_el$31, _$createComponent(Show, {
         get when() {
           return command().selected;
         },
         get children() {
-          var _el$42 = _$getNextElement(_tmpl$12),
-            _el$43 = _el$42.firstChild,
-            _el$44 = _el$43.nextSibling;
-          _$insert(_el$44, () => chatMessages().commandSelected);
-          return _el$42;
+          var _el$43 = _$getNextElement(_tmpl$13),
+            _el$44 = _el$43.firstChild,
+            _el$45 = _el$44.nextSibling;
+          _$insert(_el$45, () => chatMessages().commandSelected);
+          return _el$43;
         }
-      }), _el$46, _co$8);
+      }), _el$47, _co$8);
       _$effect(_p$ => {
-        var _v$16 = commandOptionId(command()),
-          _v$17 = selectedCommandKey() === key,
-          _v$18 = Boolean(command().disabled || command().reason),
-          _v$19 = opening() ? "true" : undefined,
-          _v$20 = command().reason ? `${commandOptionId(command())}-reason` : undefined,
-          _v$21 = command().reason ? "true" : undefined,
-          _v$22 = selectedCommandKey() === key ? "true" : undefined,
-          _v$23 = command().icon ?? "ti ti-slash";
-        _v$16 !== _p$.e && _$setAttribute(_el$30, "id", _p$.e = _v$16);
-        _v$17 !== _p$.t && _$setAttribute(_el$30, "aria-selected", _p$.t = _v$17);
-        _v$18 !== _p$.a && _$setAttribute(_el$30, "aria-disabled", _p$.a = _v$18);
-        _v$19 !== _p$.o && _$setAttribute(_el$30, "aria-busy", _p$.o = _v$19);
-        _v$20 !== _p$.i && _$setAttribute(_el$30, "aria-describedby", _p$.i = _v$20);
-        _v$21 !== _p$.n && _$setAttribute(_el$30, "data-reason", _p$.n = _v$21);
-        _v$22 !== _p$.s && _$setAttribute(_el$30, "data-active", _p$.s = _v$22);
-        _v$23 !== _p$.h && _$className(_el$31, _p$.h = _v$23);
+        var _v$18 = commandOptionId(command()),
+          _v$19 = selectedCommandKey() === key,
+          _v$20 = Boolean(command().disabled || command().reason),
+          _v$21 = opening() ? "true" : undefined,
+          _v$22 = command().reason ? `${commandOptionId(command())}-reason` : undefined,
+          _v$23 = command().reason ? "true" : undefined,
+          _v$24 = selectedCommandKey() === key ? "true" : undefined,
+          _v$25 = command().icon ?? "ti ti-slash";
+        _v$18 !== _p$.e && _$setAttribute(_el$31, "id", _p$.e = _v$18);
+        _v$19 !== _p$.t && _$setAttribute(_el$31, "aria-selected", _p$.t = _v$19);
+        _v$20 !== _p$.a && _$setAttribute(_el$31, "aria-disabled", _p$.a = _v$20);
+        _v$21 !== _p$.o && _$setAttribute(_el$31, "aria-busy", _p$.o = _v$21);
+        _v$22 !== _p$.i && _$setAttribute(_el$31, "aria-describedby", _p$.i = _v$22);
+        _v$23 !== _p$.n && _$setAttribute(_el$31, "data-reason", _p$.n = _v$23);
+        _v$24 !== _p$.s && _$setAttribute(_el$31, "data-active", _p$.s = _v$24);
+        _v$25 !== _p$.h && _$className(_el$32, _p$.h = _v$25);
         return _p$;
       }, {
         e: undefined,
@@ -2271,109 +2406,109 @@ export function ChatComposer(props) {
         h: undefined
       });
       _$runHydrationEvents();
-      return _el$30;
+      return _el$31;
     })();
   };
   const replyQuote = reply => [(() => {
-    var _el$49 = _$getNextElement(_tmpl$16),
-      _el$50 = _el$49.firstChild,
-      _el$52 = _el$50.firstChild,
-      [_el$53, _co$9] = _$getNextMarker(_el$52.nextSibling),
-      _el$51 = _el$53.nextSibling,
-      _el$54 = _el$50.nextSibling,
-      [_el$55, _co$0] = _$getNextMarker(_el$54.nextSibling);
-    _$insert(_el$50, () => chatMessages().replyingTo, _el$53, _co$9);
-    _$insert(_el$49, () => reply.author, _el$55, _co$0);
-    return _el$49;
+    var _el$50 = _$getNextElement(_tmpl$17),
+      _el$51 = _el$50.firstChild,
+      _el$53 = _el$51.firstChild,
+      [_el$54, _co$9] = _$getNextMarker(_el$53.nextSibling),
+      _el$52 = _el$54.nextSibling,
+      _el$55 = _el$51.nextSibling,
+      [_el$56, _co$0] = _$getNextMarker(_el$55.nextSibling);
+    _$insert(_el$51, () => chatMessages().replyingTo, _el$54, _co$9);
+    _$insert(_el$50, () => reply.author, _el$56, _co$0);
+    return _el$50;
   })(), (() => {
-    var _el$56 = _$getNextElement(_tmpl$17);
-    _$insert(_el$56, () => reply.text);
-    return _el$56;
+    var _el$57 = _$getNextElement(_tmpl$18);
+    _$insert(_el$57, () => reply.text);
+    return _el$57;
   })()];
   return (() => {
-    var _el$57 = _$getNextElement(_tmpl$29),
-      _el$136 = _el$57.firstChild,
-      [_el$137, _co$34] = _$getNextMarker(_el$136.nextSibling),
-      _el$96 = _el$137.nextSibling,
-      _el$120 = _el$96.firstChild,
-      [_el$121, _co$27] = _$getNextMarker(_el$120.nextSibling),
-      _el$122 = _el$121.nextSibling,
-      [_el$123, _co$28] = _$getNextMarker(_el$122.nextSibling),
-      _el$124 = _el$123.nextSibling,
-      [_el$125, _co$29] = _$getNextMarker(_el$124.nextSibling),
+    var _el$58 = _$getNextElement(_tmpl$31),
+      _el$140 = _el$58.firstChild,
+      [_el$141, _co$35] = _$getNextMarker(_el$140.nextSibling),
+      _el$97 = _el$141.nextSibling,
+      _el$124 = _el$97.firstChild,
+      [_el$125, _co$28] = _$getNextMarker(_el$124.nextSibling),
       _el$126 = _el$125.nextSibling,
-      [_el$127, _co$30] = _$getNextMarker(_el$126.nextSibling),
+      [_el$127, _co$29] = _$getNextMarker(_el$126.nextSibling),
       _el$128 = _el$127.nextSibling,
-      [_el$129, _co$31] = _$getNextMarker(_el$128.nextSibling),
-      _el$130 = _el$96.nextSibling,
-      _el$131 = _el$130.nextSibling,
-      _el$132 = _el$131.firstChild,
+      [_el$129, _co$30] = _$getNextMarker(_el$128.nextSibling),
+      _el$130 = _el$129.nextSibling,
+      [_el$131, _co$31] = _$getNextMarker(_el$130.nextSibling),
+      _el$132 = _el$131.nextSibling,
       [_el$133, _co$32] = _$getNextMarker(_el$132.nextSibling),
-      _el$134 = _el$133.nextSibling,
-      [_el$135, _co$33] = _$getNextMarker(_el$134.nextSibling);
+      _el$134 = _el$97.nextSibling,
+      _el$135 = _el$134.nextSibling,
+      _el$136 = _el$135.firstChild,
+      [_el$137, _co$33] = _$getNextMarker(_el$136.nextSibling),
+      _el$138 = _el$137.nextSibling,
+      [_el$139, _co$34] = _$getNextMarker(_el$138.nextSibling);
     var _ref$7 = shellRef;
-    typeof _ref$7 === "function" ? _$use(_ref$7, _el$57) : shellRef = _el$57;
-    _$insert(_el$57, _$createComponent(Show, {
+    typeof _ref$7 === "function" ? _$use(_ref$7, _el$58) : shellRef = _el$58;
+    _$insert(_el$58, _$createComponent(Show, {
       get when() {
         return suggestionsOpen() || hasAccessory();
       },
       get children() {
-        var _el$58 = _$getNextElement(_tmpl$24),
-          _el$59 = _el$58.firstChild,
-          _el$90 = _el$59.nextSibling,
-          [_el$91, _co$16] = _$getNextMarker(_el$90.nextSibling),
-          _el$92 = _el$91.nextSibling,
-          [_el$93, _co$17] = _$getNextMarker(_el$92.nextSibling),
-          _el$94 = _el$93.nextSibling,
-          [_el$95, _co$18] = _$getNextMarker(_el$94.nextSibling);
-        _$insert(_el$59, accessory);
-        _$insert(_el$58, _$createComponent(Show, {
+        var _el$59 = _$getNextElement(_tmpl$25),
+          _el$60 = _el$59.firstChild,
+          _el$91 = _el$60.nextSibling,
+          [_el$92, _co$16] = _$getNextMarker(_el$91.nextSibling),
+          _el$93 = _el$92.nextSibling,
+          [_el$94, _co$17] = _$getNextMarker(_el$93.nextSibling),
+          _el$95 = _el$94.nextSibling,
+          [_el$96, _co$18] = _$getNextMarker(_el$95.nextSibling);
+        _$insert(_el$60, accessory);
+        _$insert(_el$59, _$createComponent(Show, {
           get when() {
             return emojiOpen();
           },
           get children() {
-            var _el$60 = _$getNextElement(_tmpl$18),
-              _el$61 = _el$60.firstChild;
+            var _el$61 = _$getNextElement(_tmpl$19),
+              _el$62 = _el$61.firstChild;
             var _ref$8 = commandListRef;
-            typeof _ref$8 === "function" ? _$use(_ref$8, _el$61) : commandListRef = _el$61;
-            _$setAttribute(_el$61, "id", commandListId);
-            _$insert(_el$61, _$createComponent(For, {
+            typeof _ref$8 === "function" ? _$use(_ref$8, _el$62) : commandListRef = _el$62;
+            _$setAttribute(_el$62, "id", commandListId);
+            _$insert(_el$62, _$createComponent(For, {
               get each() {
                 return emojiMatches();
               },
               children: (entry, index) => (() => {
-                var _el$138 = _$getNextElement(_tmpl$30),
-                  _el$139 = _el$138.firstChild,
-                  _el$140 = _el$139.nextSibling,
-                  _el$141 = _el$140.nextSibling,
-                  [_el$142, _co$35] = _$getNextMarker(_el$141.nextSibling);
-                _el$138.$$click = () => pickEmojiSuggestion(index());
-                _el$138.$$mousedown = keepFieldFocus;
-                _$insert(_el$139, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
-                _$insert(_el$140, () => emojiName(entry, locale()));
-                _$insert(_el$138, _$createComponent(Show, {
+                var _el$142 = _$getNextElement(_tmpl$32),
+                  _el$143 = _el$142.firstChild,
+                  _el$144 = _el$143.nextSibling,
+                  _el$145 = _el$144.nextSibling,
+                  [_el$146, _co$36] = _$getNextMarker(_el$145.nextSibling);
+                _el$142.$$click = () => pickEmojiSuggestion(index());
+                _el$142.$$mousedown = keepFieldFocus;
+                _$insert(_el$143, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
+                _$insert(_el$144, () => emojiName(entry, locale()));
+                _$insert(_el$142, _$createComponent(Show, {
                   get when() {
                     return entry.shortcodes[0];
                   },
                   children: code => (() => {
-                    var _el$143 = _$getNextElement(_tmpl$31),
-                      _el$144 = _el$143.firstChild,
-                      _el$146 = _el$144.nextSibling,
-                      [_el$147, _co$36] = _$getNextMarker(_el$146.nextSibling),
-                      _el$145 = _el$147.nextSibling;
-                    _$insert(_el$143, code, _el$147, _co$36);
-                    return _el$143;
+                    var _el$147 = _$getNextElement(_tmpl$33),
+                      _el$148 = _el$147.firstChild,
+                      _el$150 = _el$148.nextSibling,
+                      [_el$151, _co$37] = _$getNextMarker(_el$150.nextSibling),
+                      _el$149 = _el$151.nextSibling;
+                    _$insert(_el$147, code, _el$151, _co$37);
+                    return _el$147;
                   })()
-                }), _el$142, _co$35);
+                }), _el$146, _co$36);
                 _$effect(_p$ => {
-                  var _v$38 = `${commandListId}-${index()}`,
-                    _v$39 = index() === selectedCommandIndex(),
-                    _v$40 = emojiName(entry, locale()),
-                    _v$41 = index() === selectedCommandIndex() ? "true" : undefined;
-                  _v$38 !== _p$.e && _$setAttribute(_el$138, "id", _p$.e = _v$38);
-                  _v$39 !== _p$.t && _$setAttribute(_el$138, "aria-selected", _p$.t = _v$39);
-                  _v$40 !== _p$.a && _$setAttribute(_el$138, "aria-label", _p$.a = _v$40);
-                  _v$41 !== _p$.o && _$setAttribute(_el$138, "data-active", _p$.o = _v$41);
+                  var _v$40 = `${commandListId}-${index()}`,
+                    _v$41 = index() === selectedCommandIndex(),
+                    _v$42 = emojiName(entry, locale()),
+                    _v$43 = index() === selectedCommandIndex() ? "true" : undefined;
+                  _v$40 !== _p$.e && _$setAttribute(_el$142, "id", _p$.e = _v$40);
+                  _v$41 !== _p$.t && _$setAttribute(_el$142, "aria-selected", _p$.t = _v$41);
+                  _v$42 !== _p$.a && _$setAttribute(_el$142, "aria-label", _p$.a = _v$42);
+                  _v$43 !== _p$.o && _$setAttribute(_el$142, "data-active", _p$.o = _v$43);
                   return _p$;
                 }, {
                   e: undefined,
@@ -2382,55 +2517,55 @@ export function ChatComposer(props) {
                   o: undefined
                 });
                 _$runHydrationEvents();
-                return _el$138;
+                return _el$142;
               })()
             }));
-            _$effect(() => _$setAttribute(_el$61, "aria-label", chatMessages().emojiSuggestions));
-            return _el$60;
+            _$effect(() => _$setAttribute(_el$62, "aria-label", chatMessages().emojiSuggestions));
+            return _el$61;
           }
-        }), _el$91, _co$16);
-        _$insert(_el$58, _$createComponent(Show, {
+        }), _el$92, _co$16);
+        _$insert(_el$59, _$createComponent(Show, {
           get when() {
             return peopleOpen();
           },
           get children() {
-            var _el$62 = _$getNextElement(_tmpl$18),
-              _el$63 = _el$62.firstChild;
+            var _el$63 = _$getNextElement(_tmpl$19),
+              _el$64 = _el$63.firstChild;
             var _ref$9 = commandListRef;
-            typeof _ref$9 === "function" ? _$use(_ref$9, _el$63) : commandListRef = _el$63;
-            _$setAttribute(_el$63, "id", commandListId);
-            _$insert(_el$63, _$createComponent(For, {
+            typeof _ref$9 === "function" ? _$use(_ref$9, _el$64) : commandListRef = _el$64;
+            _$setAttribute(_el$64, "id", commandListId);
+            _$insert(_el$64, _$createComponent(For, {
               get each() {
                 return peopleMatches();
               },
               children: (person, index) => (() => {
-                var _el$148 = _$getNextElement(_tmpl$32),
-                  _el$149 = _el$148.firstChild,
-                  _el$150 = _el$149.nextSibling,
-                  _el$152 = _el$150.nextSibling,
-                  [_el$153, _co$37] = _$getNextMarker(_el$152.nextSibling);
-                _el$148.$$click = () => pickPersonSuggestion(index());
-                _el$148.$$mousedown = keepFieldFocus;
-                _$insert(_el$150, () => person.name);
-                _$insert(_el$148, _$createComponent(Show, {
+                var _el$152 = _$getNextElement(_tmpl$34),
+                  _el$153 = _el$152.firstChild,
+                  _el$154 = _el$153.nextSibling,
+                  _el$156 = _el$154.nextSibling,
+                  [_el$157, _co$38] = _$getNextMarker(_el$156.nextSibling);
+                _el$152.$$click = () => pickPersonSuggestion(index());
+                _el$152.$$mousedown = keepFieldFocus;
+                _$insert(_el$154, () => person.name);
+                _$insert(_el$152, _$createComponent(Show, {
                   get when() {
                     return person.agent;
                   },
                   get children() {
-                    var _el$151 = _$getNextElement(_tmpl$15);
-                    _$insert(_el$151, () => chatMessages().agentLabel);
-                    return _el$151;
+                    var _el$155 = _$getNextElement(_tmpl$16);
+                    _$insert(_el$155, () => chatMessages().agentLabel);
+                    return _el$155;
                   }
-                }), _el$153, _co$37);
+                }), _el$157, _co$38);
                 _$effect(_p$ => {
-                  var _v$42 = `${commandListId}-${index()}`,
-                    _v$43 = index() === selectedCommandIndex(),
-                    _v$44 = index() === selectedCommandIndex() ? "true" : undefined,
-                    _v$45 = person.agent ? "ti ti-robot" : "ti ti-user";
-                  _v$42 !== _p$.e && _$setAttribute(_el$148, "id", _p$.e = _v$42);
-                  _v$43 !== _p$.t && _$setAttribute(_el$148, "aria-selected", _p$.t = _v$43);
-                  _v$44 !== _p$.a && _$setAttribute(_el$148, "data-active", _p$.a = _v$44);
-                  _v$45 !== _p$.o && _$className(_el$149, _p$.o = _v$45);
+                  var _v$44 = `${commandListId}-${index()}`,
+                    _v$45 = index() === selectedCommandIndex(),
+                    _v$46 = index() === selectedCommandIndex() ? "true" : undefined,
+                    _v$47 = person.agent ? "ti ti-robot" : "ti ti-user";
+                  _v$44 !== _p$.e && _$setAttribute(_el$152, "id", _p$.e = _v$44);
+                  _v$45 !== _p$.t && _$setAttribute(_el$152, "aria-selected", _p$.t = _v$45);
+                  _v$46 !== _p$.a && _$setAttribute(_el$152, "data-active", _p$.a = _v$46);
+                  _v$47 !== _p$.o && _$className(_el$153, _p$.o = _v$47);
                   return _p$;
                 }, {
                   e: undefined,
@@ -2439,44 +2574,44 @@ export function ChatComposer(props) {
                   o: undefined
                 });
                 _$runHydrationEvents();
-                return _el$148;
+                return _el$152;
               })()
             }));
-            _$effect(() => _$setAttribute(_el$63, "aria-label", chatMessages().peopleSuggestions));
-            return _el$62;
+            _$effect(() => _$setAttribute(_el$64, "aria-label", chatMessages().peopleSuggestions));
+            return _el$63;
           }
-        }), _el$93, _co$17);
-        _$insert(_el$58, _$createComponent(Show, {
+        }), _el$94, _co$17);
+        _$insert(_el$59, _$createComponent(Show, {
           get when() {
             return commandsOpen();
           },
           get children() {
-            var _el$64 = _$getNextElement(_tmpl$23),
-              _el$88 = _el$64.firstChild,
-              [_el$89, _co$15] = _$getNextMarker(_el$88.nextSibling),
-              _el$68 = _el$89.nextSibling,
-              _el$78 = _el$68.firstChild,
-              [_el$79, _co$10] = _$getNextMarker(_el$78.nextSibling),
-              _el$80 = _el$79.nextSibling,
-              [_el$81, _co$11] = _$getNextMarker(_el$80.nextSibling),
-              _el$82 = _el$81.nextSibling,
-              [_el$83, _co$12] = _$getNextMarker(_el$82.nextSibling),
-              _el$84 = _el$83.nextSibling,
-              [_el$85, _co$13] = _$getNextMarker(_el$84.nextSibling),
-              _el$86 = _el$85.nextSibling,
-              [_el$87, _co$14] = _$getNextMarker(_el$86.nextSibling);
-            _el$64.$$mousedown = event => {
+            var _el$65 = _$getNextElement(_tmpl$24),
+              _el$89 = _el$65.firstChild,
+              [_el$90, _co$15] = _$getNextMarker(_el$89.nextSibling),
+              _el$69 = _el$90.nextSibling,
+              _el$79 = _el$69.firstChild,
+              [_el$80, _co$10] = _$getNextMarker(_el$79.nextSibling),
+              _el$81 = _el$80.nextSibling,
+              [_el$82, _co$11] = _$getNextMarker(_el$81.nextSibling),
+              _el$83 = _el$82.nextSibling,
+              [_el$84, _co$12] = _$getNextMarker(_el$83.nextSibling),
+              _el$85 = _el$84.nextSibling,
+              [_el$86, _co$13] = _$getNextMarker(_el$85.nextSibling),
+              _el$87 = _el$86.nextSibling,
+              [_el$88, _co$14] = _$getNextMarker(_el$87.nextSibling);
+            _el$65.$$mousedown = event => {
               if (addSearch() && event.target !== addSearchRef) event.preventDefault();
             };
-            _$insert(_el$64, _$createComponent(Show, {
+            _$insert(_el$65, _$createComponent(Show, {
               get when() {
                 return addSearch();
               },
               get children() {
-                var _el$65 = _$getNextElement(_tmpl$19),
-                  _el$66 = _el$65.firstChild,
-                  _el$67 = _el$66.nextSibling;
-                _el$67.$$focusout = event => {
+                var _el$66 = _$getNextElement(_tmpl$20),
+                  _el$67 = _el$66.firstChild,
+                  _el$68 = _el$67.nextSibling;
+                _el$68.$$focusout = event => {
                   const next = event.relatedTarget;
                   if (next instanceof Node && commandListRef?.parentElement?.contains(next)) return;
                   // Focus that leaves another way, such as with Shift+Tab, closes the list and stays where it went.
@@ -2484,27 +2619,27 @@ export function ChatComposer(props) {
                     if (addSearch() && document.activeElement !== addSearchRef) endAddSearch(false);
                   });
                 };
-                _el$67.addEventListener("compositionend", () => {
+                _el$68.addEventListener("compositionend", () => {
                   addComposing = false;
                 });
-                _el$67.addEventListener("compositionstart", () => {
+                _el$68.addEventListener("compositionstart", () => {
                   addComposing = true;
                 });
-                _el$67.$$keydown = onAddSearchKeyDown;
-                _el$67.$$input = event => setAddQuery(event.currentTarget.value);
+                _el$68.$$keydown = onAddSearchKeyDown;
+                _el$68.$$input = event => setAddQuery(event.currentTarget.value);
                 var _ref$0 = addSearchRef;
-                typeof _ref$0 === "function" ? _$use(_ref$0, _el$67) : addSearchRef = _el$67;
-                _$setAttribute(_el$67, "aria-controls", commandListId);
-                _$setAttribute(_el$67, "spellcheck", false);
+                typeof _ref$0 === "function" ? _$use(_ref$0, _el$68) : addSearchRef = _el$68;
+                _$setAttribute(_el$68, "aria-controls", commandListId);
+                _$setAttribute(_el$68, "spellcheck", false);
                 _$effect(_p$ => {
-                  var _v$24 = chatMessages().commandSearch,
-                    _v$25 = chatMessages().commandSearchLabel,
-                    _v$26 = selectedCommand() ? commandOptionId(selectedCommand()) : undefined,
-                    _v$27 = openingRow() !== undefined;
-                  _v$24 !== _p$.e && _$setAttribute(_el$67, "placeholder", _p$.e = _v$24);
-                  _v$25 !== _p$.t && _$setAttribute(_el$67, "aria-label", _p$.t = _v$25);
-                  _v$26 !== _p$.a && _$setAttribute(_el$67, "aria-activedescendant", _p$.a = _v$26);
-                  _v$27 !== _p$.o && _$setProperty(_el$67, "readOnly", _p$.o = _v$27);
+                  var _v$26 = chatMessages().commandSearch,
+                    _v$27 = chatMessages().commandSearchLabel,
+                    _v$28 = selectedCommand() ? commandOptionId(selectedCommand()) : undefined,
+                    _v$29 = openingRow() !== undefined;
+                  _v$26 !== _p$.e && _$setAttribute(_el$68, "placeholder", _p$.e = _v$26);
+                  _v$27 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$27);
+                  _v$28 !== _p$.a && _$setAttribute(_el$68, "aria-activedescendant", _p$.a = _v$28);
+                  _v$29 !== _p$.o && _$setProperty(_el$68, "readOnly", _p$.o = _v$29);
                   return _p$;
                 }, {
                   e: undefined,
@@ -2512,15 +2647,15 @@ export function ChatComposer(props) {
                   a: undefined,
                   o: undefined
                 });
-                _$effect(() => _$setProperty(_el$67, "value", addQuery()));
+                _$effect(() => _$setProperty(_el$68, "value", addQuery()));
                 _$runHydrationEvents();
-                return _el$65;
+                return _el$66;
               }
-            }), _el$89, _co$15);
+            }), _el$90, _co$15);
             var _ref$1 = commandListRef;
-            typeof _ref$1 === "function" ? _$use(_ref$1, _el$68) : commandListRef = _el$68;
-            _$setAttribute(_el$68, "id", commandListId);
-            _$insert(_el$68, _$createComponent(For, {
+            typeof _ref$1 === "function" ? _$use(_ref$1, _el$69) : commandListRef = _el$69;
+            _$setAttribute(_el$69, "id", commandListId);
+            _$insert(_el$69, _$createComponent(For, {
               get each() {
                 return commandModel().groups.map(commandGroupKey);
               },
@@ -2540,108 +2675,108 @@ export function ChatComposer(props) {
                     });
                   },
                   get children() {
-                    var _el$154 = _$getNextElement(_tmpl$34),
-                      _el$155 = _el$154.firstChild,
-                      _el$156 = _el$155.firstChild,
-                      _el$158 = _el$156.nextSibling,
-                      [_el$159, _co$38] = _$getNextMarker(_el$158.nextSibling),
-                      _el$160 = _el$155.nextSibling,
-                      [_el$161, _co$39] = _$getNextMarker(_el$160.nextSibling),
-                      _el$162 = _el$161.nextSibling,
-                      [_el$163, _co$40] = _$getNextMarker(_el$162.nextSibling);
-                    _$insert(_el$156, () => group()?.scopeTitle ?? group()?.section?.label);
-                    _$insert(_el$155, _$createComponent(Show, {
+                    var _el$158 = _$getNextElement(_tmpl$36),
+                      _el$159 = _el$158.firstChild,
+                      _el$160 = _el$159.firstChild,
+                      _el$162 = _el$160.nextSibling,
+                      [_el$163, _co$39] = _$getNextMarker(_el$162.nextSibling),
+                      _el$164 = _el$159.nextSibling,
+                      [_el$165, _co$40] = _$getNextMarker(_el$164.nextSibling),
+                      _el$166 = _el$165.nextSibling,
+                      [_el$167, _co$41] = _$getNextMarker(_el$166.nextSibling);
+                    _$insert(_el$160, () => group()?.scopeTitle ?? group()?.section?.label);
+                    _$insert(_el$159, _$createComponent(Show, {
                       get when() {
                         return group()?.loading;
                       },
                       get children() {
-                        return _$getNextElement(_tmpl$33);
+                        return _$getNextElement(_tmpl$35);
                       }
-                    }), _el$159, _co$38);
-                    _$insert(_el$154, _$createComponent(For, {
+                    }), _el$163, _co$39);
+                    _$insert(_el$158, _$createComponent(For, {
                       get each() {
                         return rows();
                       },
                       children: key => renderCommandRow(row(key))
-                    }), _el$161, _co$39);
-                    _$insert(_el$154, _$createComponent(Index, {
+                    }), _el$165, _co$40);
+                    _$insert(_el$158, _$createComponent(Index, {
                       get each() {
                         return Array.from({
                           length: Math.max(group()?.placeholder ? 1 : 0, group()?.pendingRows ?? 0)
                         });
                       },
-                      children: () => _$getNextElement(_tmpl$35)
-                    }), _el$163, _co$40);
+                      children: () => _$getNextElement(_tmpl$37)
+                    }), _el$167, _co$41);
                     _$effect(_p$ => {
-                      var _v$46 = headingId(),
-                        _v$47 = headingId();
-                      _v$46 !== _p$.e && _$setAttribute(_el$154, "aria-labelledby", _p$.e = _v$46);
-                      _v$47 !== _p$.t && _$setAttribute(_el$155, "id", _p$.t = _v$47);
+                      var _v$48 = headingId(),
+                        _v$49 = headingId();
+                      _v$48 !== _p$.e && _$setAttribute(_el$158, "aria-labelledby", _p$.e = _v$48);
+                      _v$49 !== _p$.t && _$setAttribute(_el$159, "id", _p$.t = _v$49);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$154;
+                    return _el$158;
                   }
                 });
               }
-            }), _el$79, _co$10);
-            _$insert(_el$68, _$createComponent(Show, {
+            }), _el$80, _co$10);
+            _$insert(_el$69, _$createComponent(Show, {
               get when() {
                 return _$memo(() => !!(searching() && foundCommandCount() === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
               },
               get children() {
-                var _el$69 = _$getNextElement(_tmpl$20),
-                  _el$70 = _el$69.firstChild,
-                  _el$71 = _el$70.nextSibling;
-                _$insert(_el$71, () => messages().loading);
-                return _el$69;
+                var _el$70 = _$getNextElement(_tmpl$21),
+                  _el$71 = _el$70.firstChild,
+                  _el$72 = _el$71.nextSibling;
+                _$insert(_el$72, () => messages().loading);
+                return _el$70;
               }
-            }), _el$81, _co$11);
-            _$insert(_el$68, _$createComponent(Show, {
+            }), _el$82, _co$11);
+            _$insert(_el$69, _$createComponent(Show, {
               get when() {
                 return searchError();
               },
               get children() {
-                var _el$72 = _$getNextElement(_tmpl$21),
-                  _el$73 = _el$72.firstChild,
-                  _el$74 = _el$73.nextSibling,
+                var _el$73 = _$getNextElement(_tmpl$22),
+                  _el$74 = _el$73.firstChild,
                   _el$75 = _el$74.nextSibling,
-                  [_el$76, _co$1] = _$getNextMarker(_el$75.nextSibling);
-                _$insert(_el$72, () => messages().error, _el$76, _co$1);
-                return _el$72;
+                  _el$76 = _el$75.nextSibling,
+                  [_el$77, _co$1] = _$getNextMarker(_el$76.nextSibling);
+                _$insert(_el$73, () => messages().error, _el$77, _co$1);
+                return _el$73;
               }
-            }), _el$83, _co$12);
-            _$insert(_el$68, _$createComponent(Show, {
+            }), _el$84, _co$12);
+            _$insert(_el$69, _$createComponent(Show, {
               get when() {
                 return _$memo(() => !!(!searching() && !searchError() && foundCommandCount() === 0))() && !commandModel().groups.some(group => group.pendingRows);
               },
               get children() {
-                var _el$77 = _$getNextElement(_tmpl$22);
-                _$insert(_el$77, (() => {
+                var _el$78 = _$getNextElement(_tmpl$23);
+                _$insert(_el$78, (() => {
                   var _c$ = _$memo(() => !!!parsedCommandQuery().query.trim());
                   return () => _c$() ? messages().noResults : chatMessages().commandsNothingFound({
                     query: parsedCommandQuery().query.trim()
                   });
                 })());
-                return _el$77;
+                return _el$78;
               }
-            }), _el$85, _co$13);
-            _$insert(_el$68, _$createComponent(Show, {
+            }), _el$86, _co$13);
+            _$insert(_el$69, _$createComponent(Show, {
               get when() {
                 return commandModel().fallback?.command;
               },
               keyed: true,
               children: command => renderCommandRow(command)
-            }), _el$87, _co$14);
+            }), _el$88, _co$14);
             _$effect(_p$ => {
-              var _v$28 = addSearch() ? "" : undefined,
-                _v$29 = chatMessages().commands,
-                _v$30 = searching() ? "true" : undefined;
-              _v$28 !== _p$.e && _$setAttribute(_el$64, "data-search", _p$.e = _v$28);
-              _v$29 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$29);
-              _v$30 !== _p$.a && _$setAttribute(_el$68, "aria-busy", _p$.a = _v$30);
+              var _v$30 = addSearch() ? "" : undefined,
+                _v$31 = chatMessages().commands,
+                _v$32 = searching() ? "true" : undefined;
+              _v$30 !== _p$.e && _$setAttribute(_el$65, "data-search", _p$.e = _v$30);
+              _v$31 !== _p$.t && _$setAttribute(_el$69, "aria-label", _p$.t = _v$31);
+              _v$32 !== _p$.a && _$setAttribute(_el$69, "aria-busy", _p$.a = _v$32);
               return _p$;
             }, {
               e: undefined,
@@ -2649,289 +2784,289 @@ export function ChatComposer(props) {
               a: undefined
             });
             _$runHydrationEvents();
-            return _el$64;
+            return _el$65;
           }
-        }), _el$95, _co$18);
+        }), _el$96, _co$18);
         _$effect(_p$ => {
-          var _v$31 = hasAccessory() ? undefined : "true",
-            _v$32 = suggestionsOpen() ? "hidden" : undefined,
-            _v$33 = suggestionsOpen();
-          _v$31 !== _p$.e && _$setAttribute(_el$58, "data-overlay", _p$.e = _v$31);
-          _v$32 !== _p$.t && _$setStyleProperty(_el$59, "visibility", _p$.t = _v$32);
-          _v$33 !== _p$.a && _$setProperty(_el$59, "inert", _p$.a = _v$33);
+          var _v$33 = hasAccessory() ? undefined : "true",
+            _v$34 = suggestionsOpen() ? "hidden" : undefined,
+            _v$35 = suggestionsOpen();
+          _v$33 !== _p$.e && _$setAttribute(_el$59, "data-overlay", _p$.e = _v$33);
+          _v$34 !== _p$.t && _$setStyleProperty(_el$60, "visibility", _p$.t = _v$34);
+          _v$35 !== _p$.a && _$setProperty(_el$60, "inert", _p$.a = _v$35);
           return _p$;
         }, {
           e: undefined,
           t: undefined,
           a: undefined
         });
-        return _el$58;
+        return _el$59;
       }
-    }), _el$137, _co$34);
+    }), _el$141, _co$35);
     var _ref$10 = composerRef;
-    typeof _ref$10 === "function" ? _$use(_ref$10, _el$96) : composerRef = _el$96;
-    _$insert(_el$96, _$createComponent(Show, {
+    typeof _ref$10 === "function" ? _$use(_ref$10, _el$97) : composerRef = _el$97;
+    _$insert(_el$97, _$createComponent(Show, {
       get when() {
         return showHint();
       },
       get children() {
-        var _el$97 = _$getNextElement(_tmpl$25);
-        _$insert(_el$97, _$createComponent(Show, {
+        var _el$98 = _$getNextElement(_tmpl$26);
+        _$insert(_el$98, _$createComponent(Show, {
           get when() {
             return dictationStatus();
           },
           get fallback() {
             return (() => {
-              var _el$165 = _$getNextElement(_tmpl$36);
-              _$insert(_el$165, hint);
-              return _el$165;
+              var _el$169 = _$getNextElement(_tmpl$38);
+              _$insert(_el$169, hint);
+              return _el$169;
             })();
           },
           children: status => [(() => {
-            var _el$166 = _$getNextElement(_tmpl$37),
-              _el$167 = _el$166.firstChild,
-              _el$168 = _el$167.nextSibling;
-            _$insert(_el$168, () => status().text);
+            var _el$170 = _$getNextElement(_tmpl$39),
+              _el$171 = _el$170.firstChild,
+              _el$172 = _el$171.nextSibling;
+            _$insert(_el$172, () => status().text);
             _$effect(_p$ => {
-              var _v$48 = dictation() ?? undefined,
-                _v$49 = status().icon;
-              _v$48 !== _p$.e && _$setAttribute(_el$166, "data-state", _p$.e = _v$48);
-              _v$49 !== _p$.t && _$className(_el$167, _p$.t = _v$49);
+              var _v$50 = dictation() ?? undefined,
+                _v$51 = status().icon;
+              _v$50 !== _p$.e && _$setAttribute(_el$170, "data-state", _p$.e = _v$50);
+              _v$51 !== _p$.t && _$className(_el$171, _p$.t = _v$51);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$166;
+            return _el$170;
           })(), _$createComponent(Show, {
             get when() {
               return _$memo(() => dictation() === "refined")() ? props.microphone?.onRestoreOriginal : undefined;
             },
             children: restore => (() => {
-              var _el$169 = _$getNextElement(_tmpl$38);
-              _el$169.$$click = () => reportChatFailure(restore(), props.onError);
-              _el$169.$$mousedown = keepFieldFocus;
-              _$insert(_el$169, () => chatMessages().restoreOriginal);
-              _$effect(() => _$setProperty(_el$169, "disabled", microphoneDisabled()));
+              var _el$173 = _$getNextElement(_tmpl$40);
+              _el$173.$$click = () => reportChatFailure(restore(), props.onError);
+              _el$173.$$mousedown = keepFieldFocus;
+              _$insert(_el$173, () => chatMessages().restoreOriginal);
+              _$effect(() => _$setProperty(_el$173, "disabled", microphoneDisabled()));
               _$runHydrationEvents();
-              return _el$169;
+              return _el$173;
             })()
           })]
         }));
-        return _el$97;
+        return _el$98;
       }
-    }), _el$121, _co$27);
-    _$insert(_el$96, _$createComponent(Show, {
+    }), _el$125, _co$28);
+    _$insert(_el$97, _$createComponent(Show, {
       get when() {
         return props.reply;
       },
       children: reply => (() => {
-        var _el$170 = _$getNextElement(_tmpl$39),
-          _el$172 = _el$170.firstChild,
-          [_el$173, _co$41] = _$getNextMarker(_el$172.nextSibling),
-          _el$171 = _el$173.nextSibling;
-        _$insert(_el$170, _$createComponent(Show, {
+        var _el$174 = _$getNextElement(_tmpl$41),
+          _el$176 = _el$174.firstChild,
+          [_el$177, _co$42] = _$getNextMarker(_el$176.nextSibling),
+          _el$175 = _el$177.nextSibling;
+        _$insert(_el$174, _$createComponent(Show, {
           get when() {
             return reply().onSelect;
           },
           get fallback() {
             return (() => {
-              var _el$174 = _$getNextElement(_tmpl$40);
-              _$insert(_el$174, () => replyQuote(reply()));
-              return _el$174;
+              var _el$178 = _$getNextElement(_tmpl$42);
+              _$insert(_el$178, () => replyQuote(reply()));
+              return _el$178;
             })();
           },
           children: select => (() => {
-            var _el$175 = _$getNextElement(_tmpl$41);
-            _el$175.$$click = () => select()();
-            _$insert(_el$175, () => replyQuote(reply()));
+            var _el$179 = _$getNextElement(_tmpl$43);
+            _el$179.$$click = () => select()();
+            _$insert(_el$179, () => replyQuote(reply()));
             _$runHydrationEvents();
-            return _el$175;
+            return _el$179;
           })()
-        }), _el$173, _co$41);
-        _el$171.$$click = () => reply().onCancel();
-        _el$171.$$mousedown = keepFieldFocus;
+        }), _el$177, _co$42);
+        _el$175.$$click = () => reply().onCancel();
+        _el$175.$$mousedown = keepFieldFocus;
         _$effect(_p$ => {
-          var _v$50 = chatMessages().cancelReply,
-            _v$51 = chatMessages().cancelReply;
-          _v$50 !== _p$.e && _$setAttribute(_el$171, "aria-label", _p$.e = _v$50);
-          _v$51 !== _p$.t && _$setAttribute(_el$171, "title", _p$.t = _v$51);
+          var _v$52 = chatMessages().cancelReply,
+            _v$53 = chatMessages().cancelReply;
+          _v$52 !== _p$.e && _$setAttribute(_el$175, "aria-label", _p$.e = _v$52);
+          _v$53 !== _p$.t && _$setAttribute(_el$175, "title", _p$.t = _v$53);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
         _$runHydrationEvents();
-        return _el$170;
+        return _el$174;
       })()
-    }), _el$123, _co$28);
-    _$insert(_el$96, _$createComponent(Show, {
+    }), _el$127, _co$29);
+    _$insert(_el$97, _$createComponent(Show, {
       get when() {
         return attachments().length > 0;
       },
       get children() {
-        var _el$98 = _$getNextElement(_tmpl$26);
-        _$insert(_el$98, _$createComponent(For, {
+        var _el$99 = _$getNextElement(_tmpl$27);
+        _$insert(_el$99, _$createComponent(For, {
           get each() {
             return attachments();
           },
           children: attachment => (() => {
-            var _el$176 = _$getNextElement(_tmpl$43),
-              _el$177 = _el$176.firstChild,
-              _el$178 = _el$177.firstChild,
-              [_el$179, _co$42] = _$getNextMarker(_el$178.nextSibling),
-              _el$180 = _el$179.nextSibling,
-              [_el$181, _co$43] = _$getNextMarker(_el$180.nextSibling),
-              _el$183 = _el$177.nextSibling,
-              [_el$184, _co$44] = _$getNextMarker(_el$183.nextSibling);
-            _$insert(_el$177, _$createComponent(Show, {
+            var _el$180 = _$getNextElement(_tmpl$45),
+              _el$181 = _el$180.firstChild,
+              _el$182 = _el$181.firstChild,
+              [_el$183, _co$43] = _$getNextMarker(_el$182.nextSibling),
+              _el$184 = _el$183.nextSibling,
+              [_el$185, _co$44] = _$getNextMarker(_el$184.nextSibling),
+              _el$187 = _el$181.nextSibling,
+              [_el$188, _co$45] = _$getNextMarker(_el$187.nextSibling);
+            _$insert(_el$181, _$createComponent(Show, {
               get when() {
                 return attachment.href;
               },
               get fallback() {
                 return (() => {
-                  var _el$185 = _$getNextElement(_tmpl$45),
-                    _el$187 = _el$185.firstChild,
-                    [_el$188, _co$45] = _$getNextMarker(_el$187.nextSibling),
-                    _el$189 = _el$188.nextSibling,
-                    [_el$190, _co$46] = _$getNextMarker(_el$189.nextSibling);
-                  _$insert(_el$185, _$createComponent(Show, {
+                  var _el$189 = _$getNextElement(_tmpl$47),
+                    _el$191 = _el$189.firstChild,
+                    [_el$192, _co$46] = _$getNextMarker(_el$191.nextSibling),
+                    _el$193 = _el$192.nextSibling,
+                    [_el$194, _co$47] = _$getNextMarker(_el$193.nextSibling);
+                  _$insert(_el$189, _$createComponent(Show, {
                     get when() {
                       return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                     },
                     get fallback() {
                       return (() => {
-                        var _el$191 = _$getNextElement(_tmpl$3);
-                        _$effect(() => _$className(_el$191, attachmentIcon(attachment)));
-                        return _el$191;
+                        var _el$195 = _$getNextElement(_tmpl$3);
+                        _$effect(() => _$className(_el$195, attachmentIcon(attachment)));
+                        return _el$195;
                       })();
                     },
                     get children() {
-                      var _el$186 = _$getNextElement(_tmpl$44);
+                      var _el$190 = _$getNextElement(_tmpl$46);
                       _$effect(_p$ => {
-                        var _v$54 = attachment.previewUrl,
-                          _v$55 = attachment.alt ?? "";
-                        _v$54 !== _p$.e && _$setAttribute(_el$186, "src", _p$.e = _v$54);
-                        _v$55 !== _p$.t && _$setAttribute(_el$186, "alt", _p$.t = _v$55);
+                        var _v$56 = attachment.previewUrl,
+                          _v$57 = attachment.alt ?? "";
+                        _v$56 !== _p$.e && _$setAttribute(_el$190, "src", _p$.e = _v$56);
+                        _v$57 !== _p$.t && _$setAttribute(_el$190, "alt", _p$.t = _v$57);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$186;
+                      return _el$190;
                     }
-                  }), _el$188, _co$45);
-                  _$insert(_el$185, () => renderAttachmentCopy(attachment), _el$190, _co$46);
-                  return _el$185;
+                  }), _el$192, _co$46);
+                  _$insert(_el$189, () => renderAttachmentCopy(attachment), _el$194, _co$47);
+                  return _el$189;
                 })();
               },
               children: href => (() => {
-                var _el$192 = _$getNextElement(_tmpl$46),
-                  _el$194 = _el$192.firstChild,
-                  [_el$195, _co$47] = _$getNextMarker(_el$194.nextSibling),
-                  _el$196 = _el$195.nextSibling,
-                  [_el$197, _co$48] = _$getNextMarker(_el$196.nextSibling);
-                _$insert(_el$192, _$createComponent(Show, {
+                var _el$196 = _$getNextElement(_tmpl$48),
+                  _el$198 = _el$196.firstChild,
+                  [_el$199, _co$48] = _$getNextMarker(_el$198.nextSibling),
+                  _el$200 = _el$199.nextSibling,
+                  [_el$201, _co$49] = _$getNextMarker(_el$200.nextSibling);
+                _$insert(_el$196, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                   },
                   get fallback() {
                     return (() => {
-                      var _el$198 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$198, attachmentIcon(attachment)));
-                      return _el$198;
+                      var _el$202 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$202, attachmentIcon(attachment)));
+                      return _el$202;
                     })();
                   },
                   get children() {
-                    var _el$193 = _$getNextElement(_tmpl$44);
+                    var _el$197 = _$getNextElement(_tmpl$46);
                     _$effect(_p$ => {
-                      var _v$56 = attachment.previewUrl,
-                        _v$57 = attachment.alt ?? "";
-                      _v$56 !== _p$.e && _$setAttribute(_el$193, "src", _p$.e = _v$56);
-                      _v$57 !== _p$.t && _$setAttribute(_el$193, "alt", _p$.t = _v$57);
+                      var _v$58 = attachment.previewUrl,
+                        _v$59 = attachment.alt ?? "";
+                      _v$58 !== _p$.e && _$setAttribute(_el$197, "src", _p$.e = _v$58);
+                      _v$59 !== _p$.t && _$setAttribute(_el$197, "alt", _p$.t = _v$59);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$193;
+                    return _el$197;
                   }
-                }), _el$195, _co$47);
-                _$insert(_el$192, () => renderAttachmentCopy(attachment), _el$197, _co$48);
+                }), _el$199, _co$48);
+                _$insert(_el$196, () => renderAttachmentCopy(attachment), _el$201, _co$49);
                 _$effect(_p$ => {
-                  var _v$58 = href(),
-                    _v$59 = chatMessages().openInNewTab({
+                  var _v$60 = href(),
+                    _v$61 = chatMessages().openInNewTab({
                       name: attachment.name
                     });
-                  _v$58 !== _p$.e && _$setAttribute(_el$192, "href", _p$.e = _v$58);
-                  _v$59 !== _p$.t && _$setAttribute(_el$192, "aria-label", _p$.t = _v$59);
+                  _v$60 !== _p$.e && _$setAttribute(_el$196, "href", _p$.e = _v$60);
+                  _v$61 !== _p$.t && _$setAttribute(_el$196, "aria-label", _p$.t = _v$61);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$192;
+                return _el$196;
               })()
-            }), _el$179, _co$42);
-            _$insert(_el$177, _$createComponent(Show, {
+            }), _el$183, _co$43);
+            _$insert(_el$181, _$createComponent(Show, {
               get when() {
                 return attachment.action;
               },
               children: action => (() => {
-                var _el$199 = _$getNextElement(_tmpl$47),
-                  _el$200 = _el$199.firstChild,
-                  [_el$201, _co$49] = _$getNextMarker(_el$200.nextSibling),
-                  _el$202 = _el$201.nextSibling,
-                  [_el$203, _co$50] = _$getNextMarker(_el$202.nextSibling);
-                _el$199.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
-                _$insert(_el$199, _$createComponent(Show, {
+                var _el$203 = _$getNextElement(_tmpl$49),
+                  _el$204 = _el$203.firstChild,
+                  [_el$205, _co$50] = _$getNextMarker(_el$204.nextSibling),
+                  _el$206 = _el$205.nextSibling,
+                  [_el$207, _co$51] = _$getNextMarker(_el$206.nextSibling);
+                _el$203.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
+                _$insert(_el$203, _$createComponent(Show, {
                   get when() {
                     return action().icon;
                   },
                   children: icon => (() => {
-                    var _el$204 = _$getNextElement(_tmpl$3);
-                    _$effect(() => _$className(_el$204, icon()));
-                    return _el$204;
+                    var _el$208 = _$getNextElement(_tmpl$3);
+                    _$effect(() => _$className(_el$208, icon()));
+                    return _el$208;
                   })()
-                }), _el$201, _co$49);
-                _$insert(_el$199, () => action().label, _el$203, _co$50);
-                _$effect(() => _$setProperty(_el$199, "disabled", blocked() || action().disabled));
+                }), _el$205, _co$50);
+                _$insert(_el$203, () => action().label, _el$207, _co$51);
+                _$effect(() => _$setProperty(_el$203, "disabled", blocked() || action().disabled));
                 _$runHydrationEvents();
-                return _el$199;
+                return _el$203;
               })()
-            }), _el$181, _co$43);
-            _$insert(_el$176, _$createComponent(Show, {
+            }), _el$185, _co$44);
+            _$insert(_el$180, _$createComponent(Show, {
               get when() {
                 return props.onAttachmentsChange;
               },
               get children() {
-                var _el$182 = _$getNextElement(_tmpl$42);
-                _el$182.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
+                var _el$186 = _$getNextElement(_tmpl$44);
+                _el$186.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
                 _$effect(_p$ => {
-                  var _v$52 = selectMessages().removeNamed({
+                  var _v$54 = selectMessages().removeNamed({
                       name: attachment.name
                     }),
-                    _v$53 = blocked();
-                  _v$52 !== _p$.e && _$setAttribute(_el$182, "aria-label", _p$.e = _v$52);
-                  _v$53 !== _p$.t && _$setProperty(_el$182, "disabled", _p$.t = _v$53);
+                    _v$55 = blocked();
+                  _v$54 !== _p$.e && _$setAttribute(_el$186, "aria-label", _p$.e = _v$54);
+                  _v$55 !== _p$.t && _$setProperty(_el$186, "disabled", _p$.t = _v$55);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
                 _$runHydrationEvents();
-                return _el$182;
+                return _el$186;
               }
-            }), _el$184, _co$44);
-            _$effect(() => _el$177.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
-            return _el$176;
+            }), _el$188, _co$45);
+            _$effect(() => _el$181.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
+            return _el$180;
           })()
         }));
-        _$effect(() => _$setAttribute(_el$98, "aria-label", chatMessages().attachments));
-        return _el$98;
+        _$effect(() => _$setAttribute(_el$99, "aria-label", chatMessages().attachments));
+        return _el$99;
       }
-    }), _el$125, _co$29);
-    _$insert(_el$96, _$createComponent(Show, {
+    }), _el$129, _co$30);
+    _$insert(_el$97, _$createComponent(Show, {
       get when() {
         return conversation();
       },
@@ -2941,38 +3076,38 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$205 = _$getNextElement(_tmpl$27),
-              _el$206 = _el$205.firstChild,
-              _el$207 = _el$206.nextSibling,
-              [_el$208, _co$51] = _$getNextMarker(_el$207.nextSibling);
-            _$insert(_el$205, () => props.error, _el$208, _co$51);
-            return _el$205;
+            var _el$209 = _$getNextElement(_tmpl$28),
+              _el$210 = _el$209.firstChild,
+              _el$211 = _el$210.nextSibling,
+              [_el$212, _co$52] = _$getNextMarker(_el$211.nextSibling);
+            _$insert(_el$209, () => props.error, _el$212, _co$52);
+            return _el$209;
           }
         }), _$memo(formatRow), (() => {
-          var _el$209 = _$getNextElement(_tmpl$48);
-          _$insert(_el$209, _$createComponent(Show, {
+          var _el$213 = _$getNextElement(_tmpl$50);
+          _$insert(_el$213, _$createComponent(Show, {
             get when() {
-              return footer();
+              return dictating() || footer();
             },
             get fallback() {
               return [(() => {
-                var _el$210 = _$getNextElement(_tmpl$49),
-                  _el$211 = _el$210.firstChild,
-                  [_el$212, _co$52] = _$getNextMarker(_el$211.nextSibling),
-                  _el$213 = _el$212.nextSibling,
-                  [_el$214, _co$53] = _$getNextMarker(_el$213.nextSibling),
-                  _el$215 = _el$214.nextSibling,
-                  [_el$216, _co$54] = _$getNextMarker(_el$215.nextSibling),
+                var _el$214 = _$getNextElement(_tmpl$51),
+                  _el$215 = _el$214.firstChild,
+                  [_el$216, _co$53] = _$getNextMarker(_el$215.nextSibling),
                   _el$217 = _el$216.nextSibling,
-                  [_el$218, _co$55] = _$getNextMarker(_el$217.nextSibling),
+                  [_el$218, _co$54] = _$getNextMarker(_el$217.nextSibling),
                   _el$219 = _el$218.nextSibling,
-                  [_el$220, _co$56] = _$getNextMarker(_el$219.nextSibling),
+                  [_el$220, _co$55] = _$getNextMarker(_el$219.nextSibling),
                   _el$221 = _el$220.nextSibling,
-                  [_el$222, _co$57] = _$getNextMarker(_el$221.nextSibling),
+                  [_el$222, _co$56] = _$getNextMarker(_el$221.nextSibling),
                   _el$223 = _el$222.nextSibling,
-                  [_el$224, _co$58] = _$getNextMarker(_el$223.nextSibling);
-                _$insert(_el$210, () => props.footerTools, _el$212, _co$52);
-                _$insert(_el$210, _$createComponent(Show, {
+                  [_el$224, _co$57] = _$getNextMarker(_el$223.nextSibling),
+                  _el$225 = _el$224.nextSibling,
+                  [_el$226, _co$58] = _$getNextMarker(_el$225.nextSibling),
+                  _el$227 = _el$226.nextSibling,
+                  [_el$228, _co$59] = _$getNextMarker(_el$227.nextSibling);
+                _$insert(_el$214, () => props.footerTools, _el$216, _co$53);
+                _$insert(_el$214, _$createComponent(Show, {
                   get when() {
                     return addOpensCommands();
                   },
@@ -2989,11 +3124,11 @@ export function ChatComposer(props) {
                   get children() {
                     return addSearchButton();
                   }
-                }), _el$214, _co$53);
-                _$insert(_el$210, fileInput, _el$216, _co$54);
-                _$insert(_el$210, formatToggle, _el$218, _co$55);
-                _$insert(_el$210, emojiButton, _el$220, _co$56);
-                _$insert(_el$210, _$createComponent(Show, {
+                }), _el$218, _co$54);
+                _$insert(_el$214, fileInput, _el$220, _co$55);
+                _$insert(_el$214, formatToggle, _el$222, _co$56);
+                _$insert(_el$214, emojiButton, _el$224, _co$57);
+                _$insert(_el$214, _$createComponent(Show, {
                   get when() {
                     return (props.models?.length ?? 0) > 0;
                   },
@@ -3039,22 +3174,24 @@ export function ChatComposer(props) {
                       }
                     });
                   }
-                }), _el$222, _co$57);
-                _$insert(_el$210, () => props.modelDetails, _el$224, _co$58);
-                return _el$210;
+                }), _el$226, _co$58);
+                _$insert(_el$214, () => props.modelDetails, _el$228, _co$59);
+                return _el$214;
               })(), (() => {
-                var _el$225 = _$getNextElement(_tmpl$50),
-                  _el$226 = _el$225.firstChild,
-                  [_el$227, _co$59] = _$getNextMarker(_el$226.nextSibling),
-                  _el$228 = _el$227.nextSibling,
-                  [_el$229, _co$60] = _$getNextMarker(_el$228.nextSibling),
-                  _el$230 = _el$229.nextSibling,
-                  [_el$231, _co$61] = _$getNextMarker(_el$230.nextSibling),
+                var _el$229 = _$getNextElement(_tmpl$52),
+                  _el$230 = _el$229.firstChild,
+                  [_el$231, _co$60] = _$getNextMarker(_el$230.nextSibling),
                   _el$232 = _el$231.nextSibling,
-                  [_el$233, _co$62] = _$getNextMarker(_el$232.nextSibling),
+                  [_el$233, _co$61] = _$getNextMarker(_el$232.nextSibling),
                   _el$234 = _el$233.nextSibling,
-                  [_el$235, _co$63] = _$getNextMarker(_el$234.nextSibling);
-                _$insert(_el$225, _$createComponent(For, {
+                  [_el$235, _co$62] = _$getNextMarker(_el$234.nextSibling),
+                  _el$236 = _el$235.nextSibling,
+                  [_el$237, _co$63] = _$getNextMarker(_el$236.nextSibling),
+                  _el$238 = _el$237.nextSibling,
+                  [_el$239, _co$64] = _$getNextMarker(_el$238.nextSibling),
+                  _el$240 = _el$239.nextSibling,
+                  [_el$241, _co$65] = _$getNextMarker(_el$240.nextSibling);
+                _$insert(_el$229, _$createComponent(For, {
                   get each() {
                     return props.contextActions;
                   },
@@ -3078,13 +3215,13 @@ export function ChatComposer(props) {
                     },
                     onClick: () => reportChatFailure(() => executeChatAction(action), props.onError),
                     get children() {
-                      var _el$236 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$236, action.icon ?? "ti ti-dots"));
-                      return _el$236;
+                      var _el$242 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$242, action.icon ?? "ti ti-dots"));
+                      return _el$242;
                     }
                   })
-                }), _el$227, _co$59);
-                _$insert(_el$225, _$createComponent(Show, {
+                }), _el$231, _co$60);
+                _$insert(_el$229, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => !!hasContextUsage())() ? props.contextUsage ?? {} : undefined;
                   },
@@ -3096,18 +3233,42 @@ export function ChatComposer(props) {
                       return props.onError;
                     }
                   }))
-                }), _el$229, _co$60);
-                _$insert(_el$225, () => props.submitTools, _el$231, _co$61);
-                _$insert(_el$225, microphoneControl, _el$233, _co$62);
-                _$insert(_el$225, sendControl, _el$235, _co$63);
-                return _el$225;
+                }), _el$233, _co$61);
+                _$insert(_el$229, () => props.submitTools, _el$235, _co$62);
+                _$insert(_el$229, _$createComponent(Show, {
+                  get when() {
+                    return props.dictation;
+                  },
+                  get children() {
+                    return _$createComponent(DictationButton, {
+                      dictation: liveDictation,
+                      "class": "k2b-chat-composer__icon-action",
+                      cardAnchor: () => shellRef
+                    });
+                  }
+                }), _el$237, _co$63);
+                _$insert(_el$229, microphoneControl, _el$239, _co$64);
+                _$insert(_el$229, sendControl, _el$241, _co$65);
+                return _el$229;
               })()];
             },
             get children() {
-              return footer();
+              return _$createComponent(Show, {
+                get when() {
+                  return dictating();
+                },
+                get fallback() {
+                  return footer();
+                },
+                get children() {
+                  return _$createComponent(DictationBar, {
+                    dictation: liveDictation
+                  });
+                }
+              });
             }
           }));
-          return _el$209;
+          return _el$213;
         })()];
       },
       get children() {
@@ -3116,43 +3277,71 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$99 = _$getNextElement(_tmpl$27),
-              _el$100 = _el$99.firstChild,
-              _el$101 = _el$100.nextSibling,
-              [_el$102, _co$19] = _$getNextMarker(_el$101.nextSibling);
-            _$insert(_el$99, () => props.error, _el$102, _co$19);
-            return _el$99;
+            var _el$100 = _$getNextElement(_tmpl$28),
+              _el$101 = _el$100.firstChild,
+              _el$102 = _el$101.nextSibling,
+              [_el$103, _co$19] = _$getNextMarker(_el$102.nextSibling);
+            _$insert(_el$100, () => props.error, _el$103, _co$19);
+            return _el$100;
+          }
+        }), _$createComponent(Show, {
+          get when() {
+            return dictating();
+          },
+          get fallback() {
+            return formatRow();
+          },
+          get children() {
+            var _el$104 = _$getNextElement(_tmpl$29);
+            _$insert(_el$104, _$createComponent(DictationBar, {
+              dictation: liveDictation
+            }));
+            return _el$104;
           }
-        }), _$memo(() => formatRow()), (() => {
-          var _el$103 = _$getNextElement(_tmpl$28),
-            _el$114 = _el$103.firstChild,
-            [_el$115, _co$24] = _$getNextMarker(_el$114.nextSibling),
-            _el$116 = _el$115.nextSibling,
-            [_el$117, _co$25] = _$getNextMarker(_el$116.nextSibling),
-            _el$104 = _el$117.nextSibling,
-            _el$112 = _el$104.firstChild,
-            [_el$113, _co$23] = _$getNextMarker(_el$112.nextSibling),
-            _el$105 = _el$113.nextSibling,
-            _el$106 = _el$105.firstChild,
-            [_el$107, _co$20] = _$getNextMarker(_el$106.nextSibling),
-            _el$108 = _el$107.nextSibling,
-            [_el$109, _co$21] = _$getNextMarker(_el$108.nextSibling),
+        }), (() => {
+          var _el$105 = _$getNextElement(_tmpl$30),
+            _el$118 = _el$105.firstChild,
+            [_el$119, _co$25] = _$getNextMarker(_el$118.nextSibling),
+            _el$120 = _el$119.nextSibling,
+            [_el$121, _co$26] = _$getNextMarker(_el$120.nextSibling),
+            _el$106 = _el$121.nextSibling,
+            _el$116 = _el$106.firstChild,
+            [_el$117, _co$24] = _$getNextMarker(_el$116.nextSibling),
+            _el$107 = _el$117.nextSibling,
+            _el$108 = _el$107.firstChild,
+            [_el$109, _co$20] = _$getNextMarker(_el$108.nextSibling),
             _el$110 = _el$109.nextSibling,
-            [_el$111, _co$22] = _$getNextMarker(_el$110.nextSibling),
-            _el$118 = _el$104.nextSibling,
-            [_el$119, _co$26] = _$getNextMarker(_el$118.nextSibling);
-          _$insert(_el$103, attachControl, _el$115, _co$24);
-          _$insert(_el$103, fileInput, _el$117, _co$25);
-          _$insert(_el$104, field, _el$113, _co$23);
-          _$insert(_el$105, formatToggle, _el$107, _co$20);
-          _$insert(_el$105, emojiButton, _el$109, _co$21);
-          _$insert(_el$105, microphoneControl, _el$111, _co$22);
-          _$insert(_el$103, sendControl, _el$119, _co$26);
-          return _el$103;
+            [_el$111, _co$21] = _$getNextMarker(_el$110.nextSibling),
+            _el$112 = _el$111.nextSibling,
+            [_el$113, _co$22] = _$getNextMarker(_el$112.nextSibling),
+            _el$114 = _el$113.nextSibling,
+            [_el$115, _co$23] = _$getNextMarker(_el$114.nextSibling),
+            _el$122 = _el$106.nextSibling,
+            [_el$123, _co$27] = _$getNextMarker(_el$122.nextSibling);
+          _$insert(_el$105, attachControl, _el$119, _co$25);
+          _$insert(_el$105, fileInput, _el$121, _co$26);
+          _$insert(_el$106, field, _el$117, _co$24);
+          _$insert(_el$107, formatToggle, _el$109, _co$20);
+          _$insert(_el$107, emojiButton, _el$111, _co$21);
+          _$insert(_el$107, _$createComponent(Show, {
+            get when() {
+              return props.dictation;
+            },
+            get children() {
+              return _$createComponent(DictationButton, {
+                dictation: liveDictation,
+                "class": "k2b-chat-composer__icon-action",
+                cardAnchor: () => shellRef
+              });
+            }
+          }), _el$113, _co$22);
+          _$insert(_el$107, microphoneControl, _el$115, _co$23);
+          _$insert(_el$105, sendControl, _el$123, _co$27);
+          return _el$105;
         })()];
       }
-    }), _el$127, _co$30);
-    _$insert(_el$96, _$createComponent(Show, {
+    }), _el$131, _co$31);
+    _$insert(_el$97, _$createComponent(Show, {
       get when() {
         return props.fileSelection;
       },
@@ -3171,60 +3360,60 @@ export function ChatComposer(props) {
         },
         onDrop: files => void runFiles(files)
       })
-    }), _el$129, _co$31);
-    _$insert(_el$130, _$createComponent(Show, {
+    }), _el$133, _co$32);
+    _$insert(_el$134, _$createComponent(Show, {
       get when() {
         return suggestionAnnouncement();
       },
       keyed: true,
       children: announced => (() => {
-        var _el$237 = _$getNextElement(_tmpl$10);
-        _$insert(_el$237, () => announced.text);
-        return _el$237;
+        var _el$243 = _$getNextElement(_tmpl$11);
+        _$insert(_el$243, () => announced.text);
+        return _el$243;
       })()
     }));
-    _$insert(_el$131, _$createComponent(Show, {
+    _$insert(_el$135, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!!suggestionsOpen())() && commandStatus();
       },
       children: status => (() => {
-        var _el$238 = _$getNextElement(_tmpl$51),
-          _el$239 = _el$238.firstChild,
-          _el$240 = _el$239.nextSibling;
-        _$insert(_el$240, () => status().text);
+        var _el$244 = _$getNextElement(_tmpl$53),
+          _el$245 = _el$244.firstChild,
+          _el$246 = _el$245.nextSibling;
+        _$insert(_el$246, () => status().text);
         _$effect(_p$ => {
-          var _v$60 = status().tone,
-            _v$61 = status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle";
-          _v$60 !== _p$.e && _$setAttribute(_el$238, "data-tone", _p$.e = _v$60);
-          _v$61 !== _p$.t && _$className(_el$239, _p$.t = _v$61);
+          var _v$62 = status().tone,
+            _v$63 = status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle";
+          _v$62 !== _p$.e && _$setAttribute(_el$244, "data-tone", _p$.e = _v$62);
+          _v$63 !== _p$.t && _$className(_el$245, _p$.t = _v$63);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$238;
+        return _el$244;
       })()
-    }), _el$133, _co$32);
-    _$insert(_el$131, _$createComponent(Show, {
+    }), _el$137, _co$33);
+    _$insert(_el$135, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!suggestionsOpen())() && announcement();
       },
       keyed: true,
       children: announced => (() => {
-        var _el$241 = _$getNextElement(_tmpl$52);
-        _$insert(_el$241, () => announced.text);
-        return _el$241;
+        var _el$247 = _$getNextElement(_tmpl$54);
+        _$insert(_el$247, () => announced.text);
+        return _el$247;
       })()
-    }), _el$135, _co$33);
+    }), _el$139, _co$34);
     _$effect(_p$ => {
-      var _v$34 = `k2b-chat-composer ${props.class ?? ""}`,
-        _v$35 = running() ? "true" : undefined,
-        _v$36 = conversation() ? "conversation" : undefined,
-        _v$37 = props.label ?? chatMessages().messageComposer;
-      _v$34 !== _p$.e && _$className(_el$96, _p$.e = _v$34);
-      _v$35 !== _p$.t && _$setAttribute(_el$96, "data-running", _p$.t = _v$35);
-      _v$36 !== _p$.a && _$setAttribute(_el$96, "data-variant", _p$.a = _v$36);
-      _v$37 !== _p$.o && _$setAttribute(_el$96, "aria-label", _p$.o = _v$37);
+      var _v$36 = `k2b-chat-composer ${props.class ?? ""}`,
+        _v$37 = running() ? "true" : undefined,
+        _v$38 = conversation() ? "conversation" : undefined,
+        _v$39 = props.label ?? chatMessages().messageComposer;
+      _v$36 !== _p$.e && _$className(_el$97, _p$.e = _v$36);
+      _v$37 !== _p$.t && _$setAttribute(_el$97, "data-running", _p$.t = _v$37);
+      _v$38 !== _p$.a && _$setAttribute(_el$97, "data-variant", _p$.a = _v$38);
+      _v$39 !== _p$.o && _$setAttribute(_el$97, "aria-label", _p$.o = _v$39);
       return _p$;
     }, {
       e: undefined,
@@ -3232,7 +3421,7 @@ export function ChatComposer(props) {
       a: undefined,
       o: undefined
     });
-    return _el$57;
+    return _el$58;
   })();
 }
 _$delegateEvents(["input", "click", "keyup", "beforeinput", "keydown", "pointerdown", "mousedown", "focusout"]);