@k2b/ui 0.40.0 → 0.42.0

package/dist/ssr/chat/ChatComposer.js

@@ -16,55 +16,60 @@ var _tmpl$ = ["<span><strong", ">", "</strong></span>"],
   _tmpl$9 = ["<div class=\"k2b-chat-composer__highlight\" aria-hidden=\"true\">", "\n</div>"],
   _tmpl$0 = "<textarea class=\"k2b-chat-composer__measure\" rows=\"1\" tabindex=\"-1\" aria-hidden=\"true\" readonly></textarea>",
   _tmpl$1 = ["<div class=\"k2b-chat-composer__input\" role=\"group\"", ">", "<textarea class=\"", "\" rows=\"1\"", "", "></textarea>", "</div>"],
-  _tmpl$10 = ["<span class=\"", "\">", "</span>"],
-  _tmpl$11 = ["<span class=\"k2b-chat-composer__command-detail\"", "><small", ">", "</small><small", "><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>", "</small></span>"],
-  _tmpl$12 = ["<span class=\"k2b-chat-composer__command-end\"><i class=\"ti ti-check\" aria-hidden=\"true\"></i><span class=\"k2b-sr-only\">", "</span></span>"],
-  _tmpl$13 = ["<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>", "</button>"],
-  _tmpl$14 = ["<b>", "</b>"],
-  _tmpl$15 = ["<small", ">", "</small>"],
-  _tmpl$16 = ["<span class=\"k2b-message-row__quote-author\"><span class=\"k2b-sr-only\">", " </span>", "</span>"],
-  _tmpl$17 = ["<span class=\"k2b-message-row__quote-text\">", "</span>"],
-  _tmpl$18 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "</div></div>"],
-  _tmpl$19 = ["<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\" spellcheck=\"false\"", "></label>"],
-  _tmpl$20 = ["<div role=\"status\" class=\"k2b-chat-composer__loading\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><strong>", "</strong></div>"],
-  _tmpl$21 = ["<div role=\"status\"><i class=\"ti ti-alert-circle\"></i> ", "</div>"],
-  _tmpl$22 = ["<div role=\"status\">", "</div>"],
-  _tmpl$23 = ["<div class=\"k2b-chat-composer-accessory\" data-commands", ">", "<div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "", "", "", "", "</div></div>"],
-  _tmpl$24 = ["<div class=\"k2b-chat-composer-slot\"", "><div style=\"", "\"", ">", "</div>", "", "", "</div>"],
-  _tmpl$25 = ["<div class=\"k2b-chat-composer__hint\" aria-live=\"polite\">", "</div>"],
-  _tmpl$26 = ["<div class=\"k2b-chat-composer__attachments\" role=\"list\"", " tabindex=\"0\">", "</div>"],
-  _tmpl$27 = ["<div class=\"k2b-chat-composer__error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</div>"],
-  _tmpl$28 = ["<div class=\"k2b-chat-composer__row\">", "", "<div class=\"k2b-chat-composer__field\">", "<div class=\"k2b-chat-composer__field-tools\">", "", "", "</div></div>", "</div>"],
-  _tmpl$29 = ["<div class=\"k2b-chat-composer-shell\">", "<section class=\"", "\"", " role=\"group\"", ">", "", "", "", "", "</section><div class=\"k2b-sr-only\" role=\"status\" aria-live=\"polite\">", "</div><div class=\"k2b-chat-composer__status\" role=\"status\">", "", "</div></div>"],
-  _tmpl$30 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><span class=\"k2b-chat-composer__emoji-glyph\" aria-hidden=\"true\">", "</span><strong>", "</strong>", "</button>"],
-  _tmpl$31 = ["<small>:", ":</small>"],
-  _tmpl$32 = ["<small>", "</small>"],
-  _tmpl$33 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><i", " aria-hidden=\"true\"></i><strong>", "</strong>", "</button>"],
-  _tmpl$34 = "<i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>",
-  _tmpl$35 = ["<div class=\"k2b-chat-composer__command-group\" role=\"group\"", "><div class=\"k2b-chat-composer__command-heading\"", " role=\"presentation\"><span>", "</span>", "</div>", "", "</div>"],
-  _tmpl$36 = "<div class=\"k2b-chat-composer__command-placeholder\" aria-hidden=\"true\"><span></span><span><span></span><span></span></span></div>",
-  _tmpl$37 = ["<span class=\"k2b-chat-composer__hint-text\">", "</span>"],
-  _tmpl$38 = ["<span class=\"k2b-chat-composer__dictation\"", "><i", " aria-hidden=\"true\"></i><span>", "</span></span>"],
-  _tmpl$39 = ["<button type=\"button\" class=\"k2b-chat-composer__hint-action\"", ">", "</button>"],
-  _tmpl$40 = ["<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\"></i></button></div>"],
-  _tmpl$41 = ["<div class=\"k2b-message-row__quote\">", "</div>"],
-  _tmpl$42 = ["<button type=\"button\" class=\"k2b-message-row__quote\">", "</button>"],
-  _tmpl$43 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
-  _tmpl$44 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
-  _tmpl$45 = ["<img", ">"],
-  _tmpl$46 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
-  _tmpl$47 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
-  _tmpl$48 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
-  _tmpl$49 = ["<footer class=\"k2b-chat-composer__footer\">", "</footer>"],
-  _tmpl$50 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "", "", "</div>"],
-  _tmpl$51 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "", "</div>"],
-  _tmpl$52 = ["<span>", "</span>"],
-  _tmpl$53 = ["<div class=\"k2b-chat-composer__status-line\"", "><i aria-hidden=\"true\"", "></i><span>", "</span></div>"],
-  _tmpl$54 = ["<span class=\"k2b-sr-only\">", "</span>"];
+  _tmpl$10 = "<span class=\"k2b-dictation-mark\"></span>",
+  _tmpl$11 = ["<span class=\"", "\">", "</span>"],
+  _tmpl$12 = ["<span class=\"k2b-chat-composer__command-detail\"", "><small", ">", "</small><small", "><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>", "</small></span>"],
+  _tmpl$13 = ["<span class=\"k2b-chat-composer__command-end\"><i class=\"ti ti-check\" aria-hidden=\"true\"></i><span class=\"k2b-sr-only\">", "</span></span>"],
+  _tmpl$14 = ["<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>", "</button>"],
+  _tmpl$15 = ["<b>", "</b>"],
+  _tmpl$16 = ["<small", ">", "</small>"],
+  _tmpl$17 = ["<span class=\"k2b-message-row__quote-author\"><span class=\"k2b-sr-only\">", " </span>", "</span>"],
+  _tmpl$18 = ["<span class=\"k2b-message-row__quote-text\">", "</span>"],
+  _tmpl$19 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "</div></div>"],
+  _tmpl$20 = ["<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\" spellcheck=\"false\"", "></label>"],
+  _tmpl$21 = ["<div role=\"status\" class=\"k2b-chat-composer__loading\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><strong>", "</strong></div>"],
+  _tmpl$22 = ["<div role=\"status\"><i class=\"ti ti-alert-circle\"></i> ", "</div>"],
+  _tmpl$23 = ["<div role=\"status\">", "</div>"],
+  _tmpl$24 = ["<div class=\"k2b-chat-composer-accessory\" data-commands", ">", "<div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "", "", "", "", "</div></div>"],
+  _tmpl$25 = ["<div class=\"k2b-chat-composer-slot\"", "><div style=\"", "\"", ">", "</div>", "", "", "</div>"],
+  _tmpl$26 = ["<div class=\"k2b-chat-composer__hint\" aria-live=\"polite\">", "</div>"],
+  _tmpl$27 = ["<div class=\"k2b-chat-composer__attachments\" role=\"list\"", " tabindex=\"0\">", "</div>"],
+  _tmpl$28 = ["<div class=\"k2b-chat-composer__error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</div>"],
+  _tmpl$29 = ["<div class=\"k2b-chat-composer__dictation\">", "</div>"],
+  _tmpl$30 = ["<div class=\"k2b-chat-composer__row\">", "", "<div class=\"k2b-chat-composer__field\">", "<div class=\"k2b-chat-composer__field-tools\">", "", "", "", "</div></div>", "</div>"],
+  _tmpl$31 = ["<div class=\"k2b-chat-composer-shell\">", "<section class=\"", "\"", " role=\"group\"", ">", "", "", "", "", "</section><div class=\"k2b-sr-only\" role=\"status\" aria-live=\"polite\">", "</div><div class=\"k2b-chat-composer__status\" role=\"status\">", "", "</div></div>"],
+  _tmpl$32 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><span class=\"k2b-chat-composer__emoji-glyph\" aria-hidden=\"true\">", "</span><strong>", "</strong>", "</button>"],
+  _tmpl$33 = ["<small>:", ":</small>"],
+  _tmpl$34 = ["<small>", "</small>"],
+  _tmpl$35 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><i", " aria-hidden=\"true\"></i><strong>", "</strong>", "</button>"],
+  _tmpl$36 = "<i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>",
+  _tmpl$37 = ["<div class=\"k2b-chat-composer__command-group\" role=\"group\"", "><div class=\"k2b-chat-composer__command-heading\"", " role=\"presentation\"><span>", "</span>", "</div>", "", "</div>"],
+  _tmpl$38 = "<div class=\"k2b-chat-composer__command-placeholder\" aria-hidden=\"true\"><span></span><span><span></span><span></span></span></div>",
+  _tmpl$39 = ["<span class=\"k2b-chat-composer__hint-text\">", "</span>"],
+  _tmpl$40 = ["<span class=\"k2b-chat-composer__dictation\"", "><i", " aria-hidden=\"true\"></i><span>", "</span></span>"],
+  _tmpl$41 = ["<button type=\"button\" class=\"k2b-chat-composer__hint-action\"", ">", "</button>"],
+  _tmpl$42 = ["<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\"></i></button></div>"],
+  _tmpl$43 = ["<div class=\"k2b-message-row__quote\">", "</div>"],
+  _tmpl$44 = ["<button type=\"button\" class=\"k2b-message-row__quote\">", "</button>"],
+  _tmpl$45 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$46 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
+  _tmpl$47 = ["<img", ">"],
+  _tmpl$48 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
+  _tmpl$49 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
+  _tmpl$50 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
+  _tmpl$51 = ["<footer class=\"k2b-chat-composer__footer\">", "</footer>"],
+  _tmpl$52 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "", "", "</div>"],
+  _tmpl$53 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "", "", "</div>"],
+  _tmpl$54 = ["<span>", "</span>"],
+  _tmpl$55 = ["<div class=\"k2b-chat-composer__status-line\"", "><i aria-hidden=\"true\"", "></i><span>", "</span></div>"],
+  _tmpl$56 = ["<span class=\"k2b-sr-only\">", "</span>"];
 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";
@@ -750,13 +755,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();
@@ -813,9 +931,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);
@@ -1922,17 +2048,17 @@ export function ChatComposer(props) {
   });
   const field = () => _$ssr(_tmpl$1, _$ssrAttribute("aria-label", _$escape(chatMessages().messageInput, true), false), _$escape(_$createComponent(Show, {
     get when() {
-      return mentions().length > 0;
+      return mentions().length > 0 || dictationView();
     },
     get children() {
       return _$ssr(_tmpl$9, _$escape(_$createComponent(For, {
         get each() {
-          return chatMentionSegments(props.value, mentions());
+          return splitDictationSegments(chatMentionSegments(props.value, mentions()), dictationView()?.fresh ?? [], dictationView()?.mark);
         },
-        children: part => _$ssr(_tmpl$10, Boolean(part.mention) ? "k2b-chat-composer__mention" : "", _$escape(part.text))
+        children: part => part.mark ? _$ssr(_tmpl$10) : _$ssr(_tmpl$11, `${Boolean(part.mention) ? "k2b-chat-composer__mention" : ""} ${Boolean(part.fresh) ? "k2b-dictation-fresh" : ""}`, _$escape(part.text))
       })));
     }
-  })), mentions().length > 0 ? "k2b-chat-composer__textarea--highlighted" : "", _$ssrAttribute("value", _$escape(props.value, true), false), _$ssrAttribute("disabled", editBlocked() && openingRow() === undefined, true) + _$ssrAttribute("readonly", _$escape(openingRow(), true) !== _$escape(undefined, true), false) + _$ssrAttribute("enterkeyhint", conversation() ? "enter" : _$escape(undefined, true), false) + _$ssrAttribute("placeholder", _$escape(props.placeholder ?? (running() ? chatMessages().addGuidance : conversation() ? chatMessages().writeConversationMessage : chatMessages().writeMessage), true), false) + _$ssrAttribute("aria-label", _$escape(props.inputLabel ?? messages().message, true), false) + _$ssrAttribute("role", fieldOwnsList() ? "combobox" : _$escape(undefined, true), false) + _$ssrAttribute("aria-autocomplete", fieldOwnsList() ? "list" : _$escape(undefined, true), false) + _$ssrAttribute("aria-controls", fieldOwnsList() ? _$escape(commandListId, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-expanded", fieldOwnsList() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-activedescendant", !fieldOwnsList() ? _$escape(undefined, true) : emojiOpen() || peopleOpen() ? `${_$escape(commandListId, true)}-${_$escape(selectedCommandIndex(), true)}` : selectedCommand() ? _$escape(commandOptionId(selectedCommand()), true) : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+  })), mentions().length > 0 || Boolean(dictationView()) ? "k2b-chat-composer__textarea--highlighted" : "", _$ssrAttribute("value", _$escape(props.value, true), false), _$ssrAttribute("disabled", editBlocked() && openingRow() === undefined, true) + _$ssrAttribute("readonly", _$escape(openingRow(), true) !== _$escape(undefined, true), false) + _$ssrAttribute("enterkeyhint", conversation() ? "enter" : _$escape(undefined, true), false) + _$ssrAttribute("placeholder", _$escape(props.placeholder ?? (running() ? chatMessages().addGuidance : conversation() ? chatMessages().writeConversationMessage : chatMessages().writeMessage), true), false) + _$ssrAttribute("aria-label", _$escape(props.inputLabel ?? messages().message, true), false) + _$ssrAttribute("role", fieldOwnsList() ? "combobox" : _$escape(undefined, true), false) + _$ssrAttribute("aria-autocomplete", fieldOwnsList() ? "list" : _$escape(undefined, true), false) + _$ssrAttribute("aria-controls", fieldOwnsList() ? _$escape(commandListId, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-expanded", fieldOwnsList() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-activedescendant", !fieldOwnsList() ? _$escape(undefined, true) : emojiOpen() || peopleOpen() ? `${_$escape(commandListId, true)}-${_$escape(selectedCommandIndex(), true)}` : selectedCommand() ? _$escape(commandOptionId(selectedCommand()), true) : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return conversation();
     },
@@ -1976,14 +2102,14 @@ export function ChatComposer(props) {
     const title = () => command().label ?? command().name;
     const opening = () => openingRow() === key;
     const failure = () => openFailures()[key];
-    return _$ssr(_tmpl$13, _$ssrAttribute("id", _$escape(commandOptionId(command()), true), false), _$ssrAttribute("aria-selected", _$escape(selectedCommandKey(), true) === _$escape(key, true), false) + _$ssrAttribute("aria-disabled", _$escape(Boolean(command().disabled || command().reason), true), false) + _$ssrAttribute("aria-busy", opening() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-describedby", command().reason ? `${_$escape(commandOptionId(command()), true)}-reason` : _$escape(undefined, true), false) + _$ssrAttribute("data-reason", command().reason ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-active", selectedCommandKey() === key ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-command-key", _$escape(key, true), false), _$ssrAttribute("class", _$escape(command().icon ?? "ti ti-slash", true), false), _$escape(_$createComponent(Show, {
+    return _$ssr(_tmpl$14, _$ssrAttribute("id", _$escape(commandOptionId(command()), true), false), _$ssrAttribute("aria-selected", _$escape(selectedCommandKey(), true) === _$escape(key, true), false) + _$ssrAttribute("aria-disabled", _$escape(Boolean(command().disabled || command().reason), true), false) + _$ssrAttribute("aria-busy", opening() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-describedby", command().reason ? `${_$escape(commandOptionId(command()), true)}-reason` : _$escape(undefined, true), false) + _$ssrAttribute("data-reason", command().reason ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-active", selectedCommandKey() === key ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-command-key", _$escape(key, true), false), _$ssrAttribute("class", _$escape(command().icon ?? "ti ti-slash", true), false), _$escape(_$createComponent(Show, {
       get when() {
         return highlight();
       },
       get fallback() {
         return title();
       },
-      children: range => [title().slice(0, range()[0]), _$ssr(_tmpl$14, _$escape(title().slice(range()[0], range()[1]))), title().slice(range()[1])]
+      children: range => [title().slice(0, range()[0]), _$ssr(_tmpl$15, _$escape(title().slice(range()[0], range()[1]))), title().slice(range()[1])]
     })), _$escape(_$createComponent(Show, {
       get when() {
         return _$memo(() => !!command().open)() && !command().reason;
@@ -1994,42 +2120,42 @@ export function ChatComposer(props) {
             return command().reason ?? command().description;
           },
           get children() {
-            return _$ssr(_tmpl$15, _$ssrAttribute("id", command().reason ? `${_$escape(commandOptionId(command()), true)}-reason` : _$escape(undefined, true), false), _$escape(command().reason ?? command().description));
+            return _$ssr(_tmpl$16, _$ssrAttribute("id", command().reason ? `${_$escape(commandOptionId(command()), true)}-reason` : _$escape(undefined, true), false), _$escape(command().reason ?? command().description));
           }
         });
       },
       get children() {
-        return _$ssr(_tmpl$11, _$ssrAttribute("data-state", opening() ? "busy" : failure() ? "failed" : _$escape(undefined, true), false), _$ssrAttribute("aria-hidden", opening() ? "true" : _$escape(undefined, true), false), _$escape(failure() ?? command().description), _$ssrAttribute("aria-hidden", opening() ? _$escape(undefined, true) : "true", false), _$escape(command().busyLabel ?? chatMessages().commandOpening));
+        return _$ssr(_tmpl$12, _$ssrAttribute("data-state", opening() ? "busy" : failure() ? "failed" : _$escape(undefined, true), false), _$ssrAttribute("aria-hidden", opening() ? "true" : _$escape(undefined, true), false), _$escape(failure() ?? command().description), _$ssrAttribute("aria-hidden", opening() ? _$escape(undefined, true) : "true", false), _$escape(command().busyLabel ?? chatMessages().commandOpening));
       }
     })), _$escape(_$createComponent(Show, {
       get when() {
         return command().selected;
       },
       get children() {
-        return _$ssr(_tmpl$12, _$escape(chatMessages().commandSelected));
+        return _$ssr(_tmpl$13, _$escape(chatMessages().commandSelected));
       }
     })));
   };
-  const replyQuote = reply => [_$ssr(_tmpl$16, _$escape(chatMessages().replyingTo), _$escape(reply.author)), _$ssr(_tmpl$17, _$escape(reply.text))];
-  return _$ssr(_tmpl$29, _$escape(_$createComponent(Show, {
+  const replyQuote = reply => [_$ssr(_tmpl$17, _$escape(chatMessages().replyingTo), _$escape(reply.author)), _$ssr(_tmpl$18, _$escape(reply.text))];
+  return _$ssr(_tmpl$31, _$escape(_$createComponent(Show, {
     get when() {
       return suggestionsOpen() || hasAccessory();
     },
     get children() {
-      return _$ssr(_tmpl$24, _$ssrAttribute("data-overlay", hasAccessory() ? _$escape(undefined, true) : "true", false), _$ssrStyleProperty("visibility:", suggestionsOpen() ? "hidden" : _$escape(undefined, true)), _$ssrAttribute("inert", suggestionsOpen(), true), _$escape(accessory()), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$25, _$ssrAttribute("data-overlay", hasAccessory() ? _$escape(undefined, true) : "true", false), _$ssrStyleProperty("visibility:", suggestionsOpen() ? "hidden" : _$escape(undefined, true)), _$ssrAttribute("inert", suggestionsOpen(), true), _$escape(accessory()), _$escape(_$createComponent(Show, {
         get when() {
           return emojiOpen();
         },
         get children() {
-          return _$ssr(_tmpl$18, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().emojiSuggestions, true), false), _$escape(_$createComponent(For, {
+          return _$ssr(_tmpl$19, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().emojiSuggestions, true), false), _$escape(_$createComponent(For, {
             get each() {
               return emojiMatches();
             },
-            children: (entry, index) => _$ssr(_tmpl$30, `${_$escape(commandListId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(selectedCommandIndex(), true), false) + _$ssrAttribute("aria-label", _$escape(emojiName(entry, locale()), true), false) + _$ssrAttribute("data-active", index() === selectedCommandIndex() ? "true" : _$escape(undefined, true), false), _$escape(emojiInTone(entry, props.emoji?.skinTone ?? 0)), _$escape(emojiName(entry, locale())), _$escape(_$createComponent(Show, {
+            children: (entry, index) => _$ssr(_tmpl$32, `${_$escape(commandListId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(selectedCommandIndex(), true), false) + _$ssrAttribute("aria-label", _$escape(emojiName(entry, locale()), true), false) + _$ssrAttribute("data-active", index() === selectedCommandIndex() ? "true" : _$escape(undefined, true), false), _$escape(emojiInTone(entry, props.emoji?.skinTone ?? 0)), _$escape(emojiName(entry, locale())), _$escape(_$createComponent(Show, {
               get when() {
                 return entry.shortcodes[0];
               },
-              children: code => _$ssr(_tmpl$31, _$escape(code()))
+              children: code => _$ssr(_tmpl$33, _$escape(code()))
             })))
           })));
         }
@@ -2038,16 +2164,16 @@ export function ChatComposer(props) {
           return peopleOpen();
         },
         get children() {
-          return _$ssr(_tmpl$18, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().peopleSuggestions, true), false), _$escape(_$createComponent(For, {
+          return _$ssr(_tmpl$19, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().peopleSuggestions, true), false), _$escape(_$createComponent(For, {
             get each() {
               return peopleMatches();
             },
-            children: (person, index) => _$ssr(_tmpl$33, `${_$escape(commandListId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(selectedCommandIndex(), true), false) + _$ssrAttribute("data-active", index() === selectedCommandIndex() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("class", person.agent ? "ti ti-robot" : "ti ti-user", false), _$escape(person.name), _$escape(_$createComponent(Show, {
+            children: (person, index) => _$ssr(_tmpl$35, `${_$escape(commandListId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(selectedCommandIndex(), true), false) + _$ssrAttribute("data-active", index() === selectedCommandIndex() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("class", person.agent ? "ti ti-robot" : "ti ti-user", false), _$escape(person.name), _$escape(_$createComponent(Show, {
               get when() {
                 return person.agent;
               },
               get children() {
-                return _$ssr(_tmpl$32, _$escape(chatMessages().agentLabel));
+                return _$ssr(_tmpl$34, _$escape(chatMessages().agentLabel));
               }
             })))
           })));
@@ -2057,12 +2183,12 @@ export function ChatComposer(props) {
           return commandsOpen();
         },
         get children() {
-          return _$ssr(_tmpl$23, _$ssrAttribute("data-search", addSearch() ? "" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+          return _$ssr(_tmpl$24, _$ssrAttribute("data-search", addSearch() ? "" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
             get when() {
               return addSearch();
             },
             get children() {
-              return _$ssr(_tmpl$19, _$ssrAttribute("value", _$escape(addQuery(), true), false) + _$ssrAttribute("placeholder", _$escape(chatMessages().commandSearch, true), false) + _$ssrAttribute("aria-label", _$escape(chatMessages().commandSearchLabel, true), false), _$ssrAttribute("aria-controls", _$escape(commandListId, true), false), _$ssrAttribute("aria-activedescendant", selectedCommand() ? _$escape(commandOptionId(selectedCommand()), true) : _$escape(undefined, true), false), _$ssrAttribute("readonly", _$escape(openingRow(), true) !== _$escape(undefined, true), false));
+              return _$ssr(_tmpl$20, _$ssrAttribute("value", _$escape(addQuery(), true), false) + _$ssrAttribute("placeholder", _$escape(chatMessages().commandSearch, true), false) + _$ssrAttribute("aria-label", _$escape(chatMessages().commandSearchLabel, true), false), _$ssrAttribute("aria-controls", _$escape(commandListId, true), false), _$ssrAttribute("aria-activedescendant", selectedCommand() ? _$escape(commandOptionId(selectedCommand()), true) : _$escape(undefined, true), false), _$ssrAttribute("readonly", _$escape(openingRow(), true) !== _$escape(undefined, true), false));
             }
           })), _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().commands, true), false) + _$ssrAttribute("aria-busy", searching() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
             get each() {
@@ -2084,12 +2210,12 @@ export function ChatComposer(props) {
                   });
                 },
                 get children() {
-                  return _$ssr(_tmpl$35, _$ssrAttribute("aria-labelledby", _$escape(headingId(), true), false), _$ssrAttribute("id", _$escape(headingId(), true), false), _$escape(group()?.scopeTitle ?? group()?.section?.label), _$escape(_$createComponent(Show, {
+                  return _$ssr(_tmpl$37, _$ssrAttribute("aria-labelledby", _$escape(headingId(), true), false), _$ssrAttribute("id", _$escape(headingId(), true), false), _$escape(group()?.scopeTitle ?? group()?.section?.label), _$escape(_$createComponent(Show, {
                     get when() {
                       return group()?.loading;
                     },
                     get children() {
-                      return _$ssr(_tmpl$34);
+                      return _$ssr(_tmpl$36);
                     }
                   })), _$escape(_$createComponent(For, {
                     get each() {
@@ -2102,7 +2228,7 @@ export function ChatComposer(props) {
                         length: Math.max(group()?.placeholder ? 1 : 0, group()?.pendingRows ?? 0)
                       });
                     },
-                    children: () => _$ssr(_tmpl$36)
+                    children: () => _$ssr(_tmpl$38)
                   })));
                 }
               });
@@ -2112,21 +2238,21 @@ export function ChatComposer(props) {
               return _$memo(() => !!(searching() && foundCommandCount() === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
             },
             get children() {
-              return _$ssr(_tmpl$20, _$escape(messages().loading));
+              return _$ssr(_tmpl$21, _$escape(messages().loading));
             }
           })), _$escape(_$createComponent(Show, {
             get when() {
               return searchError();
             },
             get children() {
-              return _$ssr(_tmpl$21, _$escape(messages().error));
+              return _$ssr(_tmpl$22, _$escape(messages().error));
             }
           })), _$escape(_$createComponent(Show, {
             get when() {
               return _$memo(() => !!(!searching() && !searchError() && foundCommandCount() === 0))() && !commandModel().groups.some(group => group.pendingRows);
             },
             get children() {
-              return _$ssr(_tmpl$22, !parsedCommandQuery().query.trim() ? _$escape(messages().noResults) : _$escape(chatMessages().commandsNothingFound({
+              return _$ssr(_tmpl$23, !parsedCommandQuery().query.trim() ? _$escape(messages().noResults) : _$escape(chatMessages().commandsNothingFound({
                 query: parsedCommandQuery().query.trim()
               })));
             }
@@ -2145,18 +2271,18 @@ export function ChatComposer(props) {
       return showHint();
     },
     get children() {
-      return _$ssr(_tmpl$25, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$26, _$escape(_$createComponent(Show, {
         get when() {
           return dictationStatus();
         },
         get fallback() {
-          return _$ssr(_tmpl$37, _$escape(hint()));
+          return _$ssr(_tmpl$39, _$escape(hint()));
         },
-        children: status => [_$ssr(_tmpl$38, _$ssrAttribute("data-state", _$escape(dictation() ?? undefined, true), false), _$ssrAttribute("class", _$escape(status().icon, true), false), _$escape(status().text)), _$createComponent(Show, {
+        children: status => [_$ssr(_tmpl$40, _$ssrAttribute("data-state", _$escape(dictation() ?? undefined, true), false), _$ssrAttribute("class", _$escape(status().icon, true), false), _$escape(status().text)), _$createComponent(Show, {
           get when() {
             return _$memo(() => dictation() === "refined")() ? props.microphone?.onRestoreOriginal : undefined;
           },
-          children: restore => _$ssr(_tmpl$39, _$ssrAttribute("disabled", microphoneDisabled(), true), _$escape(chatMessages().restoreOriginal))
+          children: restore => _$ssr(_tmpl$41, _$ssrAttribute("disabled", microphoneDisabled(), true), _$escape(chatMessages().restoreOriginal))
         })]
       })));
     }
@@ -2164,30 +2290,30 @@ export function ChatComposer(props) {
     get when() {
       return props.reply;
     },
-    children: reply => _$ssr(_tmpl$40, _$escape(_$createComponent(Show, {
+    children: reply => _$ssr(_tmpl$42, _$escape(_$createComponent(Show, {
       get when() {
         return reply().onSelect;
       },
       get fallback() {
-        return _$ssr(_tmpl$41, _$escape(replyQuote(reply())));
+        return _$ssr(_tmpl$43, _$escape(replyQuote(reply())));
       },
-      children: select => _$ssr(_tmpl$42, _$escape(replyQuote(reply())))
+      children: select => _$ssr(_tmpl$44, _$escape(replyQuote(reply())))
     })), _$ssrAttribute("aria-label", _$escape(chatMessages().cancelReply, true), false) + _$ssrAttribute("title", _$escape(chatMessages().cancelReply, true), false))
   })), _$escape(_$createComponent(Show, {
     get when() {
       return attachments().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$26, _$ssrAttribute("aria-label", _$escape(chatMessages().attachments, true), false), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$27, _$ssrAttribute("aria-label", _$escape(chatMessages().attachments, true), false), _$escape(_$createComponent(For, {
         get each() {
           return attachments();
         },
-        children: attachment => _$ssr(_tmpl$44, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
+        children: attachment => _$ssr(_tmpl$46, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
           get when() {
             return attachment.href;
           },
           get fallback() {
-            return _$ssr(_tmpl$46, _$escape(_$createComponent(Show, {
+            return _$ssr(_tmpl$48, _$escape(_$createComponent(Show, {
               get when() {
                 return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
               },
@@ -2195,11 +2321,11 @@ export function ChatComposer(props) {
                 return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
               },
               get children() {
-                return _$ssr(_tmpl$45, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+                return _$ssr(_tmpl$47, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
               }
             })), _$escape(renderAttachmentCopy(attachment)));
           },
-          children: href => _$ssr(_tmpl$47, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().openInNewTab({
+          children: href => _$ssr(_tmpl$49, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().openInNewTab({
             name: attachment.name
           }), true), false), _$escape(_$createComponent(Show, {
             get when() {
@@ -2209,14 +2335,14 @@ export function ChatComposer(props) {
               return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
             },
             get children() {
-              return _$ssr(_tmpl$45, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+              return _$ssr(_tmpl$47, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
             }
           })), _$escape(renderAttachmentCopy(attachment)))
         })), _$escape(_$createComponent(Show, {
           get when() {
             return attachment.action;
           },
-          children: action => _$ssr(_tmpl$48, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
+          children: action => _$ssr(_tmpl$50, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
             get when() {
               return action().icon;
             },
@@ -2227,7 +2353,7 @@ export function ChatComposer(props) {
             return props.onAttachmentsChange;
           },
           get children() {
-            return _$ssr(_tmpl$43, _$ssrAttribute("aria-label", _$escape(selectMessages().removeNamed({
+            return _$ssr(_tmpl$45, _$ssrAttribute("aria-label", _$escape(selectMessages().removeNamed({
               name: attachment.name
             }), true), false), _$ssrAttribute("disabled", blocked(), true));
           }
@@ -2244,14 +2370,14 @@ export function ChatComposer(props) {
           return props.error;
         },
         get children() {
-          return _$ssr(_tmpl$27, _$escape(props.error));
+          return _$ssr(_tmpl$28, _$escape(props.error));
         }
-      }), formatRow(), _$ssr(_tmpl$49, _$escape(_$createComponent(Show, {
+      }), formatRow(), _$ssr(_tmpl$51, _$escape(_$createComponent(Show, {
         get when() {
-          return footer();
+          return dictating() || footer();
         },
         get fallback() {
-          return [_$ssr(_tmpl$50, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
+          return [_$ssr(_tmpl$52, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
             get when() {
               return addOpensCommands();
             },
@@ -2314,7 +2440,7 @@ export function ChatComposer(props) {
                 }
               });
             }
-          })), _$escape(props.modelDetails)), _$ssr(_tmpl$51, _$escape(_$createComponent(For, {
+          })), _$escape(props.modelDetails)), _$ssr(_tmpl$53, _$escape(_$createComponent(For, {
             get each() {
               return props.contextActions;
             },
@@ -2353,10 +2479,33 @@ export function ChatComposer(props) {
                 return props.onError;
               }
             }))
-          })), _$escape(props.submitTools), _$escape(microphoneControl()), _$escape(sendControl()))];
+          })), _$escape(props.submitTools), _$escape(_$createComponent(Show, {
+            get when() {
+              return props.dictation;
+            },
+            get children() {
+              return _$createComponent(DictationButton, {
+                dictation: liveDictation,
+                "class": "k2b-chat-composer__icon-action",
+                cardAnchor: () => shellRef
+              });
+            }
+          })), _$escape(microphoneControl()), _$escape(sendControl()))];
         },
         get children() {
-          return footer();
+          return _$createComponent(Show, {
+            get when() {
+              return dictating();
+            },
+            get fallback() {
+              return footer();
+            },
+            get children() {
+              return _$createComponent(DictationBar, {
+                dictation: liveDictation
+              });
+            }
+          });
         }
       })))];
     },
@@ -2366,9 +2515,32 @@ export function ChatComposer(props) {
           return props.error;
         },
         get children() {
-          return _$ssr(_tmpl$27, _$escape(props.error));
+          return _$ssr(_tmpl$28, _$escape(props.error));
+        }
+      }), _$createComponent(Show, {
+        get when() {
+          return dictating();
+        },
+        get fallback() {
+          return formatRow();
+        },
+        get children() {
+          return _$ssr(_tmpl$29, _$escape(_$createComponent(DictationBar, {
+            dictation: liveDictation
+          })));
         }
-      }), formatRow(), _$ssr(_tmpl$28, _$escape(attachControl()), _$escape(fileInput()), _$escape(field()), _$escape(formatToggle()), _$escape(emojiButton()), _$escape(microphoneControl()), _$escape(sendControl()))];
+      }), _$ssr(_tmpl$30, _$escape(attachControl()), _$escape(fileInput()), _$escape(field()), _$escape(formatToggle()), _$escape(emojiButton()), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.dictation;
+        },
+        get children() {
+          return _$createComponent(DictationButton, {
+            dictation: liveDictation,
+            "class": "k2b-chat-composer__icon-action",
+            cardAnchor: () => shellRef
+          });
+        }
+      })), _$escape(microphoneControl()), _$escape(sendControl()))];
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -2394,18 +2566,18 @@ export function ChatComposer(props) {
       return suggestionAnnouncement();
     },
     keyed: true,
-    children: announced => _$ssr(_tmpl$52, _$escape(announced.text))
+    children: announced => _$ssr(_tmpl$54, _$escape(announced.text))
   })), _$escape(_$createComponent(Show, {
     get when() {
       return _$memo(() => !!!suggestionsOpen())() && commandStatus();
     },
-    children: status => _$ssr(_tmpl$53, _$ssrAttribute("data-tone", _$escape(status().tone, true), false), _$ssrAttribute("class", status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle", false), _$escape(status().text))
+    children: status => _$ssr(_tmpl$55, _$ssrAttribute("data-tone", _$escape(status().tone, true), false), _$ssrAttribute("class", status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle", false), _$escape(status().text))
   })), _$escape(_$createComponent(Show, {
     get when() {
       return _$memo(() => !!suggestionsOpen())() && announcement();
     },
     keyed: true,
-    children: announced => _$ssr(_tmpl$54, _$escape(announced.text))
+    children: announced => _$ssr(_tmpl$56, _$escape(announced.text))
   })));
 }
 //# sourceMappingURL=ChatComposer.js.map