@k2b/ui 0.27.0 → 0.28.0

package/dist/browser/chat/ChatComposer.js

@@ -26,40 +26,42 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span><strong>`),
   _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(`<small>`),
-  _tmpl$12 = /*#__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><!$><!/>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<b>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<div role=status>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/><!$><!/>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__hint aria-live=polite>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__row><!$><!/><!$><!/><div class=k2b-chat-composer__field><!$><!/><div class=k2b-chat-composer__field-tools><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
-  _tmpl$24 = /*#__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$25 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><span class=k2b-chat-composer__emoji-glyph aria-hidden=true></span><strong></strong><!$><!/>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<small>:<!$><!/>:`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-placeholder aria-hidden=true><span></span><span><span></span><span>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-group role=group><div class=k2b-chat-composer__command-heading role=presentation><span></span><!$><!/></div><!$><!/><!$><!/>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__hint-text>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__dictation><i aria-hidden=true></i><span>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__hint-action>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$34 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<img>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
-  _tmpl$37 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
-  _tmpl$39 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
-  _tmpl$40 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$42 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__status-line><i aria-hidden=true></i><span>`),
-  _tmpl$43 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`);
+  _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(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<div role=status>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory data-commands><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/><!$><!/>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__hint aria-live=polite>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__row><!$><!/><!$><!/><div class=k2b-chat-composer__field><!$><!/><div class=k2b-chat-composer__field-tools><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
+  _tmpl$25 = /*#__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$26 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><span class=k2b-chat-composer__emoji-glyph aria-hidden=true></span><strong></strong><!$><!/>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<small>:<!$><!/>:`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-placeholder aria-hidden=true><span></span><span><span></span><span>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-group role=group><div class=k2b-chat-composer__command-heading role=presentation><span></span><!$><!/></div><!$><!/><!$><!/>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__hint-text>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__dictation><i aria-hidden=true></i><span>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__hint-action>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<img>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__status-line><i aria-hidden=true></i><span>`),
+  _tmpl$44 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`);
 import { batch, children, createEffect, createMemo, createSignal, createUniqueId, For, 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 { replaceTextareaRange } from "../inputs/editor-dom";
 import { completedEmojiShortcode, emojiInTone, emojiName, emojiShortcodeQuery, loadEmojiIndex, suggestEmoji } from "../inputs/emoji/emoji-index";
@@ -121,12 +123,40 @@ const isTouchOnly = () => typeof matchMedia === "function" && matchMedia(touchOn
 const microphoneHoldMs = 500;
 /** Keeps the field focused (and a phone's keyboard open) when a composer button is pressed with a mouse or finger. */
 const keepFieldFocus = event => event.preventDefault();
+/**
+ * Keeps one tap from reaching the page: its pointer, touch and mouse events stop at the window, and neither focus nor a
+ * click happens. A finger's tap ends with `touchend`, a scroll with `pointercancel`, a mouse's press with `click`.
+ */
+const swallowTap = down => {
+  const blocked = ["pointerup", "pointercancel", "touchstart", "touchend", "mousedown", "mouseup", "click", "contextmenu"];
+  const stop = () => {
+    window.removeEventListener("pointerdown", next, true);
+    for (const type of blocked) window.removeEventListener(type, block, true);
+  };
+  const block = event => {
+    event.stopPropagation();
+    if (event.type !== "pointercancel" && event.type !== "touchstart" && event.type !== "pointerup") event.preventDefault();
+    if (event.type === "click" || event.type === "touchend" || event.type === "pointercancel") stop();
+  };
+  // The next press is a new gesture, whatever became of this one.
+  const next = event => {
+    if (event !== down) stop();
+  };
+  down.stopPropagation();
+  down.preventDefault();
+  window.addEventListener("pointerdown", next, true);
+  for (const type of blocked) window.addEventListener(type, block, {
+    capture: true,
+    passive: false
+  });
+};
 const attachmentIcon = attachment => attachment.icon ?? (attachment.kind === "image" ? "ti ti-photo" : attachment.kind === "resource" ? "ti ti-link" : "ti ti-file");
 const hasContent = items => items.some(item => item != null && typeof item !== "boolean" && item !== "");
 export function ChatComposer(props) {
   const accessory = children(() => props.accessory);
   const hasAccessory = () => hasContent(accessory.toArray());
   const hint = children(() => props.hint);
+  const footer = children(() => props.footerContent);
   const messages = useUiMessages();
   const markdownToolbarMessages = useMarkdownToolbarMessages();
   const chatMessages = useChatMessages();
@@ -147,6 +177,7 @@ export function ChatComposer(props) {
   const [closedAt, setClosedAt] = createSignal();
   // Where the pending native edit starts; a selection replaced as a whole starts at its beginning.
   let inputStart;
+  let inputEnd;
   const [commandStatus, setCommandStatus] = createSignal();
   const [announcement, setAnnouncement] = createSignal();
   let statusTimer;
@@ -165,6 +196,7 @@ export function ChatComposer(props) {
   });
   const [addingFiles, setAddingFiles] = createSignal(false);
   const [submitting, setSubmitting] = createSignal(false);
+  let shellRef;
   let composerRef;
   let textareaRef;
   let fileInputRef;
@@ -192,6 +224,45 @@ export function ChatComposer(props) {
   const [searching, setSearching] = createSignal(false);
   const [searchError, setSearchError] = createSignal(false);
   const [executing, setExecuting] = createSignal(false);
+  const [modelOpen, setModelOpen] = createSignal();
+  const [choosingModel, setChoosingModel] = createSignal(false);
+  let resolveModel;
+  const finishModelSelection = id => {
+    const resolve = resolveModel;
+    resolveModel = undefined;
+    if (choosingModel()) {
+      setModelOpen(false);
+      // Let the controlled close reach Dropdown before returning normal clicks to its own state.
+      queueMicrotask(() => {
+        if (!choosingModel()) setModelOpen(undefined);
+      });
+    }
+    setChoosingModel(false);
+    resolve?.(id);
+  };
+  const blockedBesidesCommand = () => Boolean(props.disabled || stopping() || state() === "submitting" || addingFiles() || submitting());
+  const usableModelControl = () => !conversation() && !footer() && !blockedBesidesCommand() && !running() && Boolean(props.models?.length && props.onModelChange);
+  const openModelSelection = () => {
+    if (!usableModelControl()) return Promise.resolve(null);
+    finishModelSelection(null);
+    return new Promise(resolve => {
+      resolveModel = resolve;
+      setChoosingModel(true);
+      setModelOpen(true);
+      queueMicrotask(() => {
+        if (!choosingModel() || !modelOpen()) return;
+        // Start on the current model, as a click on the chip would show it checked.
+        const menu = composerRef?.querySelector(".k2b-chat-composer__model");
+        (menu?.querySelector('[role="menuitemradio"][aria-checked="true"]:not(:disabled)') ?? menu?.querySelector('[role="menuitemradio"]:not(:disabled)'))?.focus();
+      });
+    });
+  };
+  createEffect(() => {
+    if (!usableModelControl()) finishModelSelection(null);
+  });
+  onCleanup(() => finishModelSelection(null));
+  const [commandOpening, setCommandOpening] = createSignal(0);
+  let retrySearch = false;
   let highlightRef;
   let commandListRef;
   const mentions = () => props.mentions ?? [];
@@ -225,6 +296,12 @@ export function ChatComposer(props) {
     const token = caretCommandToken();
     return dismissed() || composing() || token?.start === closedAt() ? null : token;
   });
+  const openingStart = createMemo(() => commandQuery()?.start);
+  createEffect(() => {
+    props.draftKey;
+    const start = openingStart();
+    if (start !== undefined) setCommandOpening(opening => opening + 1);
+  });
   const parsedCommandQuery = createMemo(() => parseChatCommandQuery(commandQuery()?.query ?? "", props.commandScopes ?? []));
   const currentCommandScope = createMemo(() => parsedCommandQuery().scope?.id);
   createEffect(() => {
@@ -253,20 +330,45 @@ export function ChatComposer(props) {
     setCommandMoved(false);
   });
   const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (localCommands().length || props.searchCommands));
+  const commandSheetHeld = createMemo(() => commandsOpen() && isTouchOnly());
+  createEffect(() => {
+    if (!commandSheetHeld()) return;
+    onCleanup(holdDialogHistory(() => setClosedAt(commandQuery()?.start)));
+  });
   const suggestionsOpen = () => commandsOpen() || emojiOpen();
   createEffect(() => {
     if (!suggestionsOpen()) return;
     let disposed = false;
     const measure = () => {
       if (disposed || !commandListRef) return;
-      let top = window.visualViewport?.offsetTop ?? 0;
-      for (let parent = commandListRef.parentElement; parent; parent = parent.parentElement) {
-        if (/(auto|scroll|hidden|clip)/.test(window.getComputedStyle(parent).overflowY)) {
+      const accessory = commandListRef.parentElement;
+      const viewportTop = window.visualViewport?.offsetTop ?? 0;
+      let top = viewportTop;
+      // The column a phone sheet spans: the nearest ancestor that clips sideways, or the page.
+      let column;
+      for (let parent = accessory.parentElement; parent; parent = parent.parentElement) {
+        const style = window.getComputedStyle(parent);
+        if (/(auto|scroll|hidden|clip)/.test(style.overflowY)) {
           top = Math.max(top, parent.getBoundingClientRect().top);
         }
+        if (!column && /(auto|scroll|hidden|clip)/.test(style.overflowX)) {
+          const left = parent.getBoundingClientRect().left + parent.clientLeft;
+          column = {
+            left,
+            right: left + parent.clientWidth
+          };
+        }
       }
-      const bottom = commandListRef.parentElement.getBoundingClientRect().bottom;
+      const page = document.documentElement.clientWidth;
+      const left = Math.max(0, column?.left ?? 0);
+      const right = Math.min(page, column?.right ?? page);
+      const slot = accessory.parentElement.getBoundingClientRect();
+      const bottom = accessory.getBoundingClientRect().bottom;
       commandListRef.style.setProperty("--k2b-chat-command-space", `${Math.max(40, bottom - top - 8)}px`);
+      // Only a list that reaches the screen's top edge keeps clear of a notch or the status bar.
+      commandListRef.style.setProperty("--k2b-chat-command-safe-top", top === viewportTop ? "env(safe-area-inset-top, 0px)" : "0px");
+      accessory.style.setProperty("--k2b-chat-command-reach-left", `${Math.max(0, slot.left - left)}px`);
+      accessory.style.setProperty("--k2b-chat-command-reach-right", `${Math.max(0, right - slot.right)}px`);
     };
     queueMicrotask(measure);
     window.addEventListener("resize", measure);
@@ -279,6 +381,20 @@ export function ChatComposer(props) {
       window.visualViewport?.removeEventListener("resize", measure);
     });
   });
+  // A press outside the command list and the field closes the list, as Escape does; the text stays. With a mouse or a
+  // trackpad the press then acts as usual. On a touch-only device a tap outside the composer closes only the list: it
+  // reaches nothing beneath, and the field keeps focus, so the keyboard stays open.
+  createEffect(() => {
+    if (!commandsOpen()) return;
+    const onPointerDown = event => {
+      const target = event.target;
+      if (!(target instanceof Node) || commandListRef?.contains(target) || textareaRef?.parentElement?.contains(target)) return;
+      setClosedAt(commandQuery()?.start);
+      if (isTouchOnly() && !shellRef?.contains(target)) swallowTap(event);
+    };
+    window.addEventListener("pointerdown", onPointerDown, true);
+    onCleanup(() => window.removeEventListener("pointerdown", onPointerDown, true));
+  });
   createEffect(() => {
     props.draftKey;
     const token = commandQuery();
@@ -287,12 +403,17 @@ export function ChatComposer(props) {
       setSearching(false);
       return;
     }
+    running();
     const parsed = parsedCommandQuery();
+    const opening = commandOpening();
     const abort = new AbortController();
     setSearching(true);
+    const delay = retrySearch ? 0 : 120;
+    retrySearch = false;
     const timer = setTimeout(() => {
       Promise.resolve().then(() => props.searchCommands(parsed.query, abort.signal, {
-        scope: parsed.scope?.id
+        scope: parsed.scope?.id,
+        opening
       })).then(results => {
         if (!abort.signal.aborted) {
           batch(() => {
@@ -310,7 +431,7 @@ export function ChatComposer(props) {
       }).finally(() => {
         if (!abort.signal.aborted) setSearching(false);
       });
-    }, 120);
+    }, delay);
     onCleanup(() => {
       clearTimeout(timer);
       abort.abort();
@@ -369,6 +490,7 @@ export function ChatComposer(props) {
     untrack(() => {
       history.length = 0;
       historyIndex = -1;
+      finishModelSelection(null);
       setDismissed(true);
       setClosedAt(undefined);
       setSearchResults([]);
@@ -394,6 +516,13 @@ export function ChatComposer(props) {
   };
   const edit = (value, nextMentions = reconcileChatMentions(props.value, value, mentions())) => {
     if (commandStatus()?.tone === "error") showCommandStatus();
+    // Replacing `/` can leave its position and query identical, but starts a new opening.
+    if (inputStart !== undefined && inputEnd !== undefined && props.value.slice(inputStart, inputEnd).includes("/")) {
+      setCommandOpening(opening => opening + 1);
+      setSearchResults([]);
+      setSearchResultsQuery(undefined);
+      setCommandMoved(false);
+    }
     // An edit that starts at or before the closed `/` (select all, then type `/`) replaces it; the new `/` may open again.
     const closed = closedAt();
     if (closed !== undefined) {
@@ -402,6 +531,7 @@ export function ChatComposer(props) {
       if (Math.min(same, inputStart ?? same) <= closed) setClosedAt(undefined);
     }
     inputStart = undefined;
+    inputEnd = undefined;
     record();
     props.onValueChange(value);
     props.onMentionsChange?.(nextMentions);
@@ -445,7 +575,9 @@ export function ChatComposer(props) {
   /** 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();
   const hasDraft = () => Boolean(props.value.trim() || !running() && attachments().length > 0);
-  const canSubmit = () => !blocked() && hasDraft() && !(running() && runningSubmitIntent() === "steer" && mentions().length);
+  /** The draft may go out now, apart from a submission that is already on its way. */
+  const submittable = () => !busy() && hasDraft() && !(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);
   const hasContextUsage = () => {
@@ -571,18 +703,26 @@ export function ChatComposer(props) {
   };
   const submit = async () => {
     if (!canSubmit()) return;
-    const intent = running() ? runningSubmitIntent() : "send";
-    const previousValue = props.value;
-    const previousAttachments = attachments();
-    const previousMentions = mentions();
-    const input = {
-      intent,
-      text: previousValue,
-      mentions: previousMentions,
-      attachments: intent !== "steer" ? previousAttachments : []
-    };
+    const key = props.draftKey;
     setSubmitting(true);
     try {
+      if (isTouchOnly()) {
+        if (commandSheetHeld()) setClosedAt(commandQuery()?.start);
+        // The sheet's Back entry leaves first, so a submit handler that navigates finds the history settled.
+        await dialogHistorySettled();
+        // A draft that another one replaced, or that may no longer go out, is not sent and keeps its text.
+        if (disposed || props.draftKey !== key || !submittable()) return;
+      }
+      const intent = running() ? runningSubmitIntent() : "send";
+      const previousValue = props.value;
+      const previousAttachments = attachments();
+      const previousMentions = mentions();
+      const input = {
+        intent,
+        text: previousValue,
+        mentions: previousMentions,
+        attachments: intent !== "steer" ? previousAttachments : []
+      };
       await runChatSubmission({
         clear: () => {
           props.onValueChange("");
@@ -625,6 +765,7 @@ export function ChatComposer(props) {
   };
   const executeCommand = async (command, tab = false) => {
     const token = commandQuery();
+    const heldHistory = commandSheetHeld();
     if (!token || blocked()) return;
     if (command.disabled || command.reason) {
       // A new object each time, so choosing the same row again inserts and announces its reason again.
@@ -633,6 +774,11 @@ export function ChatComposer(props) {
       } : undefined);
       return;
     }
+    if (command.searchAgain) {
+      retrySearch = true;
+      setCommandOpening(opening => opening + 1);
+      return;
+    }
     if (command.scope && (tab || !command.action && !command.mention) && narrowCommand(command)) return;
     const previous = snapshot();
     const key = props.draftKey;
@@ -668,12 +814,19 @@ export function ChatComposer(props) {
       text: command.busyLabel
     } : undefined);
     try {
+      // The sheet's Back entry leaves first, so an action that navigates or opens a dialog finds the history settled.
+      if (heldHistory && command.action) {
+        await dialogHistorySettled();
+        // Another draft or no composer any more: the command does not run against it.
+        if (disposed || props.draftKey !== key) return;
+      }
       const result = await command.action?.({
         setValue: value => edit(value),
         submit: () => {
           submitRequested = true;
         },
-        focus
+        focus,
+        openModelSelection
       });
       if (result === "cancelled") {
         submitRequested = false;
@@ -1282,6 +1435,7 @@ export function ChatComposer(props) {
     _el$22.$$keydown = onKeyDown;
     _el$22.$$beforeinput = event => {
       inputStart = event.currentTarget.selectionStart;
+      inputEnd = event.currentTarget.selectionEnd;
       if (event.inputType === "historyUndo" || event.inputType === "historyRedo") {
         event.preventDefault();
         restoreHistory(event.inputType === "historyUndo" ? -1 : 1);
@@ -1380,17 +1534,19 @@ export function ChatComposer(props) {
     const highlight = () => commandRowMap().get(command)?.highlight;
     const title = () => command.label ?? command.name;
     return (() => {
-      var _el$29 = _$getNextElement(_tmpl$12),
+      var _el$29 = _$getNextElement(_tmpl$13),
         _el$30 = _el$29.firstChild,
         _el$31 = _el$30.nextSibling,
         _el$32 = _el$31.firstChild,
         _el$34 = _el$32.nextSibling,
-        [_el$35, _co$6] = _$getNextMarker(_el$34.nextSibling);
+        [_el$35, _co$6] = _$getNextMarker(_el$34.nextSibling),
+        _el$39 = _el$31.nextSibling,
+        [_el$40, _co$7] = _$getNextMarker(_el$39.nextSibling);
       _el$29.$$click = event => {
         event.preventDefault();
         void executeCommand(command);
       };
-      _el$29.$$pointerdown = event => event.preventDefault();
+      _el$29.$$mousedown = keepFieldFocus;
       _$insert(_el$32, _$createComponent(Show, {
         get when() {
           return highlight();
@@ -1399,9 +1555,9 @@ export function ChatComposer(props) {
           return title();
         },
         children: range => [_$memo(() => title().slice(0, range()[0])), (() => {
-          var _el$36 = _$getNextElement(_tmpl$13);
-          _$insert(_el$36, () => title().slice(range()[0], range()[1]));
-          return _el$36;
+          var _el$41 = _$getNextElement(_tmpl$14);
+          _$insert(_el$41, () => title().slice(range()[0], range()[1]));
+          return _el$41;
         })(), _$memo(() => title().slice(range()[1]))]
       }));
       _$insert(_el$31, _$createComponent(Show, {
@@ -1415,6 +1571,18 @@ export function ChatComposer(props) {
           return _el$33;
         }
       }), _el$35, _co$6);
+      _$insert(_el$29, _$createComponent(Show, {
+        get when() {
+          return command.selected;
+        },
+        get children() {
+          var _el$36 = _$getNextElement(_tmpl$12),
+            _el$37 = _el$36.firstChild,
+            _el$38 = _el$37.nextSibling;
+          _$insert(_el$38, () => chatMessages().commandSelected);
+          return _el$36;
+        }
+      }), _el$40, _co$7);
       _$effect(_p$ => {
         var _v$12 = commandOptionId(command),
           _v$13 = selectedCommand() === command,
@@ -1445,83 +1613,85 @@ export function ChatComposer(props) {
     })();
   };
   return (() => {
-    var _el$37 = _$getNextElement(_tmpl$24),
-      _el$103 = _el$37.firstChild,
-      [_el$104, _co$26] = _$getNextMarker(_el$103.nextSibling),
-      _el$65 = _el$104.nextSibling,
-      _el$89 = _el$65.firstChild,
-      [_el$90, _co$20] = _$getNextMarker(_el$89.nextSibling),
-      _el$91 = _el$90.nextSibling,
-      [_el$92, _co$21] = _$getNextMarker(_el$91.nextSibling),
-      _el$93 = _el$92.nextSibling,
-      [_el$94, _co$22] = _$getNextMarker(_el$93.nextSibling),
-      _el$95 = _el$94.nextSibling,
-      [_el$96, _co$23] = _$getNextMarker(_el$95.nextSibling),
-      _el$97 = _el$65.nextSibling,
+    var _el$42 = _$getNextElement(_tmpl$25),
+      _el$108 = _el$42.firstChild,
+      [_el$109, _co$27] = _$getNextMarker(_el$108.nextSibling),
+      _el$70 = _el$109.nextSibling,
+      _el$94 = _el$70.firstChild,
+      [_el$95, _co$21] = _$getNextMarker(_el$94.nextSibling),
+      _el$96 = _el$95.nextSibling,
+      [_el$97, _co$22] = _$getNextMarker(_el$96.nextSibling),
       _el$98 = _el$97.nextSibling,
-      _el$99 = _el$98.firstChild,
-      [_el$100, _co$24] = _$getNextMarker(_el$99.nextSibling),
-      _el$101 = _el$100.nextSibling,
-      [_el$102, _co$25] = _$getNextMarker(_el$101.nextSibling);
-    _$insert(_el$37, _$createComponent(Show, {
+      [_el$99, _co$23] = _$getNextMarker(_el$98.nextSibling),
+      _el$100 = _el$99.nextSibling,
+      [_el$101, _co$24] = _$getNextMarker(_el$100.nextSibling),
+      _el$102 = _el$70.nextSibling,
+      _el$103 = _el$102.nextSibling,
+      _el$104 = _el$103.firstChild,
+      [_el$105, _co$25] = _$getNextMarker(_el$104.nextSibling),
+      _el$106 = _el$105.nextSibling,
+      [_el$107, _co$26] = _$getNextMarker(_el$106.nextSibling);
+    var _ref$6 = shellRef;
+    typeof _ref$6 === "function" ? _$use(_ref$6, _el$42) : shellRef = _el$42;
+    _$insert(_el$42, _$createComponent(Show, {
       get when() {
         return suggestionsOpen() || hasAccessory();
       },
       get children() {
-        var _el$38 = _$getNextElement(_tmpl$19),
-          _el$39 = _el$38.firstChild,
-          _el$61 = _el$39.nextSibling,
-          [_el$62, _co$10] = _$getNextMarker(_el$61.nextSibling),
-          _el$63 = _el$62.nextSibling,
-          [_el$64, _co$11] = _$getNextMarker(_el$63.nextSibling);
-        _$insert(_el$39, accessory);
-        _$insert(_el$38, _$createComponent(Show, {
+        var _el$43 = _$getNextElement(_tmpl$20),
+          _el$44 = _el$43.firstChild,
+          _el$66 = _el$44.nextSibling,
+          [_el$67, _co$11] = _$getNextMarker(_el$66.nextSibling),
+          _el$68 = _el$67.nextSibling,
+          [_el$69, _co$12] = _$getNextMarker(_el$68.nextSibling);
+        _$insert(_el$44, accessory);
+        _$insert(_el$43, _$createComponent(Show, {
           get when() {
             return emojiOpen();
           },
           get children() {
-            var _el$40 = _$getNextElement(_tmpl$14),
-              _el$41 = _el$40.firstChild;
-            var _ref$6 = commandListRef;
-            typeof _ref$6 === "function" ? _$use(_ref$6, _el$41) : commandListRef = _el$41;
-            _$setAttribute(_el$41, "id", commandListId);
-            _$insert(_el$41, _$createComponent(For, {
+            var _el$45 = _$getNextElement(_tmpl$15),
+              _el$46 = _el$45.firstChild;
+            var _ref$7 = commandListRef;
+            typeof _ref$7 === "function" ? _$use(_ref$7, _el$46) : commandListRef = _el$46;
+            _$setAttribute(_el$46, "id", commandListId);
+            _$insert(_el$46, _$createComponent(For, {
               get each() {
                 return emojiMatches();
               },
               children: (entry, index) => (() => {
-                var _el$105 = _$getNextElement(_tmpl$25),
-                  _el$106 = _el$105.firstChild,
-                  _el$107 = _el$106.nextSibling,
-                  _el$108 = _el$107.nextSibling,
-                  [_el$109, _co$27] = _$getNextMarker(_el$108.nextSibling);
-                _el$105.$$click = () => pickEmojiSuggestion(index());
-                _el$105.$$pointerdown = event => event.preventDefault();
-                _$insert(_el$106, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
-                _$insert(_el$107, () => emojiName(entry, locale()));
-                _$insert(_el$105, _$createComponent(Show, {
+                var _el$110 = _$getNextElement(_tmpl$26),
+                  _el$111 = _el$110.firstChild,
+                  _el$112 = _el$111.nextSibling,
+                  _el$113 = _el$112.nextSibling,
+                  [_el$114, _co$28] = _$getNextMarker(_el$113.nextSibling);
+                _el$110.$$click = () => pickEmojiSuggestion(index());
+                _el$110.$$mousedown = keepFieldFocus;
+                _$insert(_el$111, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
+                _$insert(_el$112, () => emojiName(entry, locale()));
+                _$insert(_el$110, _$createComponent(Show, {
                   get when() {
                     return entry.shortcodes[0];
                   },
                   children: code => (() => {
-                    var _el$110 = _$getNextElement(_tmpl$26),
-                      _el$111 = _el$110.firstChild,
-                      _el$113 = _el$111.nextSibling,
-                      [_el$114, _co$28] = _$getNextMarker(_el$113.nextSibling),
-                      _el$112 = _el$114.nextSibling;
-                    _$insert(_el$110, code, _el$114, _co$28);
-                    return _el$110;
+                    var _el$115 = _$getNextElement(_tmpl$27),
+                      _el$116 = _el$115.firstChild,
+                      _el$118 = _el$116.nextSibling,
+                      [_el$119, _co$29] = _$getNextMarker(_el$118.nextSibling),
+                      _el$117 = _el$119.nextSibling;
+                    _$insert(_el$115, code, _el$119, _co$29);
+                    return _el$115;
                   })()
-                }), _el$109, _co$27);
+                }), _el$114, _co$28);
                 _$effect(_p$ => {
                   var _v$28 = `${commandListId}-${index()}`,
                     _v$29 = index() === selectedCommandIndex(),
                     _v$30 = emojiName(entry, locale()),
                     _v$31 = index() === selectedCommandIndex() ? "true" : undefined;
-                  _v$28 !== _p$.e && _$setAttribute(_el$105, "id", _p$.e = _v$28);
-                  _v$29 !== _p$.t && _$setAttribute(_el$105, "aria-selected", _p$.t = _v$29);
-                  _v$30 !== _p$.a && _$setAttribute(_el$105, "aria-label", _p$.a = _v$30);
-                  _v$31 !== _p$.o && _$setAttribute(_el$105, "data-active", _p$.o = _v$31);
+                  _v$28 !== _p$.e && _$setAttribute(_el$110, "id", _p$.e = _v$28);
+                  _v$29 !== _p$.t && _$setAttribute(_el$110, "aria-selected", _p$.t = _v$29);
+                  _v$30 !== _p$.a && _$setAttribute(_el$110, "aria-label", _p$.a = _v$30);
+                  _v$31 !== _p$.o && _$setAttribute(_el$110, "data-active", _p$.o = _v$31);
                   return _p$;
                 }, {
                   e: undefined,
@@ -1530,32 +1700,32 @@ export function ChatComposer(props) {
                   o: undefined
                 });
                 _$runHydrationEvents();
-                return _el$105;
+                return _el$110;
               })()
             }));
-            _$effect(() => _$setAttribute(_el$41, "aria-label", chatMessages().emojiSuggestions));
-            return _el$40;
+            _$effect(() => _$setAttribute(_el$46, "aria-label", chatMessages().emojiSuggestions));
+            return _el$45;
           }
-        }), _el$62, _co$10);
-        _$insert(_el$38, _$createComponent(Show, {
+        }), _el$67, _co$11);
+        _$insert(_el$43, _$createComponent(Show, {
           get when() {
             return commandsOpen();
           },
           get children() {
-            var _el$42 = _$getNextElement(_tmpl$18),
-              _el$43 = _el$42.firstChild,
-              _el$53 = _el$43.firstChild,
-              [_el$54, _co$8] = _$getNextMarker(_el$53.nextSibling),
-              _el$55 = _el$54.nextSibling,
-              [_el$56, _co$9] = _$getNextMarker(_el$55.nextSibling),
-              _el$57 = _el$56.nextSibling,
-              [_el$58, _co$0] = _$getNextMarker(_el$57.nextSibling),
-              _el$59 = _el$58.nextSibling,
-              [_el$60, _co$1] = _$getNextMarker(_el$59.nextSibling);
-            var _ref$7 = commandListRef;
-            typeof _ref$7 === "function" ? _$use(_ref$7, _el$43) : commandListRef = _el$43;
-            _$setAttribute(_el$43, "id", commandListId);
-            _$insert(_el$43, _$createComponent(For, {
+            var _el$47 = _$getNextElement(_tmpl$19),
+              _el$48 = _el$47.firstChild,
+              _el$58 = _el$48.firstChild,
+              [_el$59, _co$9] = _$getNextMarker(_el$58.nextSibling),
+              _el$60 = _el$59.nextSibling,
+              [_el$61, _co$0] = _$getNextMarker(_el$60.nextSibling),
+              _el$62 = _el$61.nextSibling,
+              [_el$63, _co$1] = _$getNextMarker(_el$62.nextSibling),
+              _el$64 = _el$63.nextSibling,
+              [_el$65, _co$10] = _$getNextMarker(_el$64.nextSibling);
+            var _ref$8 = commandListRef;
+            typeof _ref$8 === "function" ? _$use(_ref$8, _el$48) : commandListRef = _el$48;
+            _$setAttribute(_el$48, "id", commandListId);
+            _$insert(_el$48, _$createComponent(For, {
               get each() {
                 return commandModel().groups.map(commandGroupKey);
               },
@@ -1574,343 +1744,343 @@ export function ChatComposer(props) {
                     });
                   },
                   get children() {
-                    var _el$115 = _$getNextElement(_tmpl$29),
-                      _el$116 = _el$115.firstChild,
-                      _el$117 = _el$116.firstChild,
-                      _el$119 = _el$117.nextSibling,
-                      [_el$120, _co$29] = _$getNextMarker(_el$119.nextSibling),
-                      _el$122 = _el$116.nextSibling,
-                      [_el$123, _co$30] = _$getNextMarker(_el$122.nextSibling),
-                      _el$124 = _el$123.nextSibling,
-                      [_el$125, _co$31] = _$getNextMarker(_el$124.nextSibling);
-                    _$insert(_el$117, () => group()?.scopeTitle ?? group()?.section?.label);
-                    _$insert(_el$116, _$createComponent(Show, {
+                    var _el$120 = _$getNextElement(_tmpl$30),
+                      _el$121 = _el$120.firstChild,
+                      _el$122 = _el$121.firstChild,
+                      _el$124 = _el$122.nextSibling,
+                      [_el$125, _co$30] = _$getNextMarker(_el$124.nextSibling),
+                      _el$127 = _el$121.nextSibling,
+                      [_el$128, _co$31] = _$getNextMarker(_el$127.nextSibling),
+                      _el$129 = _el$128.nextSibling,
+                      [_el$130, _co$32] = _$getNextMarker(_el$129.nextSibling);
+                    _$insert(_el$122, () => group()?.scopeTitle ?? group()?.section?.label);
+                    _$insert(_el$121, _$createComponent(Show, {
                       get when() {
                         return group()?.loading;
                       },
                       get children() {
-                        return _$getNextElement(_tmpl$27);
+                        return _$getNextElement(_tmpl$28);
                       }
-                    }), _el$120, _co$29);
-                    _$insert(_el$115, _$createComponent(For, {
+                    }), _el$125, _co$30);
+                    _$insert(_el$120, _$createComponent(For, {
                       get each() {
                         return rows();
                       },
                       children: renderCommandRow
-                    }), _el$123, _co$30);
-                    _$insert(_el$115, _$createComponent(Show, {
+                    }), _el$128, _co$31);
+                    _$insert(_el$120, _$createComponent(Show, {
                       get when() {
                         return group()?.placeholder;
                       },
                       get children() {
-                        return _$getNextElement(_tmpl$28);
+                        return _$getNextElement(_tmpl$29);
                       }
-                    }), _el$125, _co$31);
+                    }), _el$130, _co$32);
                     _$effect(_p$ => {
                       var _v$32 = headingId(),
                         _v$33 = headingId();
-                      _v$32 !== _p$.e && _$setAttribute(_el$115, "aria-labelledby", _p$.e = _v$32);
-                      _v$33 !== _p$.t && _$setAttribute(_el$116, "id", _p$.t = _v$33);
+                      _v$32 !== _p$.e && _$setAttribute(_el$120, "aria-labelledby", _p$.e = _v$32);
+                      _v$33 !== _p$.t && _$setAttribute(_el$121, "id", _p$.t = _v$33);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$115;
+                    return _el$120;
                   }
                 });
               }
-            }), _el$54, _co$8);
-            _$insert(_el$43, _$createComponent(Show, {
+            }), _el$59, _co$9);
+            _$insert(_el$48, _$createComponent(Show, {
               get when() {
                 return _$memo(() => !!(searching() && commandMatches().length === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
               },
               get children() {
-                var _el$44 = _$getNextElement(_tmpl$15),
-                  _el$45 = _el$44.firstChild,
-                  _el$46 = _el$45.nextSibling;
-                _$insert(_el$46, () => messages().loading);
-                return _el$44;
+                var _el$49 = _$getNextElement(_tmpl$16),
+                  _el$50 = _el$49.firstChild,
+                  _el$51 = _el$50.nextSibling;
+                _$insert(_el$51, () => messages().loading);
+                return _el$49;
               }
-            }), _el$56, _co$9);
-            _$insert(_el$43, _$createComponent(Show, {
+            }), _el$61, _co$0);
+            _$insert(_el$48, _$createComponent(Show, {
               get when() {
                 return searchError();
               },
               get children() {
-                var _el$47 = _$getNextElement(_tmpl$16),
-                  _el$48 = _el$47.firstChild,
-                  _el$49 = _el$48.nextSibling,
-                  _el$50 = _el$49.nextSibling,
-                  [_el$51, _co$7] = _$getNextMarker(_el$50.nextSibling);
-                _$insert(_el$47, () => messages().error, _el$51, _co$7);
-                return _el$47;
+                var _el$52 = _$getNextElement(_tmpl$17),
+                  _el$53 = _el$52.firstChild,
+                  _el$54 = _el$53.nextSibling,
+                  _el$55 = _el$54.nextSibling,
+                  [_el$56, _co$8] = _$getNextMarker(_el$55.nextSibling);
+                _$insert(_el$52, () => messages().error, _el$56, _co$8);
+                return _el$52;
               }
-            }), _el$58, _co$0);
-            _$insert(_el$43, _$createComponent(Show, {
+            }), _el$63, _co$1);
+            _$insert(_el$48, _$createComponent(Show, {
               get when() {
                 return _$memo(() => !!(!searching() && !searchError()))() && commandMatches().length === 0;
               },
               get children() {
-                var _el$52 = _$getNextElement(_tmpl$17);
-                _$insert(_el$52, (() => {
+                var _el$57 = _$getNextElement(_tmpl$18);
+                _$insert(_el$57, (() => {
                   var _c$ = _$memo(() => !!!parsedCommandQuery().query.trim());
                   return () => _c$() ? messages().noResults : chatMessages().commandsNothingFound({
                     query: parsedCommandQuery().query.trim()
                   });
                 })());
-                return _el$52;
+                return _el$57;
               }
-            }), _el$60, _co$1);
+            }), _el$65, _co$10);
             _$effect(_p$ => {
               var _v$19 = chatMessages().commands,
                 _v$20 = searching() ? "true" : undefined;
-              _v$19 !== _p$.e && _$setAttribute(_el$43, "aria-label", _p$.e = _v$19);
-              _v$20 !== _p$.t && _$setAttribute(_el$43, "aria-busy", _p$.t = _v$20);
+              _v$19 !== _p$.e && _$setAttribute(_el$48, "aria-label", _p$.e = _v$19);
+              _v$20 !== _p$.t && _$setAttribute(_el$48, "aria-busy", _p$.t = _v$20);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$42;
+            return _el$47;
           }
-        }), _el$64, _co$11);
+        }), _el$69, _co$12);
         _$effect(_p$ => {
           var _v$21 = hasAccessory() ? undefined : "true",
             _v$22 = suggestionsOpen() ? "hidden" : undefined,
             _v$23 = suggestionsOpen();
-          _v$21 !== _p$.e && _$setAttribute(_el$38, "data-overlay", _p$.e = _v$21);
-          _v$22 !== _p$.t && _$setStyleProperty(_el$39, "visibility", _p$.t = _v$22);
-          _v$23 !== _p$.a && _$setProperty(_el$39, "inert", _p$.a = _v$23);
+          _v$21 !== _p$.e && _$setAttribute(_el$43, "data-overlay", _p$.e = _v$21);
+          _v$22 !== _p$.t && _$setStyleProperty(_el$44, "visibility", _p$.t = _v$22);
+          _v$23 !== _p$.a && _$setProperty(_el$44, "inert", _p$.a = _v$23);
           return _p$;
         }, {
           e: undefined,
           t: undefined,
           a: undefined
         });
-        return _el$38;
+        return _el$43;
       }
-    }), _el$104, _co$26);
-    var _ref$8 = composerRef;
-    typeof _ref$8 === "function" ? _$use(_ref$8, _el$65) : composerRef = _el$65;
-    _$insert(_el$65, _$createComponent(Show, {
+    }), _el$109, _co$27);
+    var _ref$9 = composerRef;
+    typeof _ref$9 === "function" ? _$use(_ref$9, _el$70) : composerRef = _el$70;
+    _$insert(_el$70, _$createComponent(Show, {
       get when() {
         return showHint();
       },
       get children() {
-        var _el$66 = _$getNextElement(_tmpl$20);
-        _$insert(_el$66, _$createComponent(Show, {
+        var _el$71 = _$getNextElement(_tmpl$21);
+        _$insert(_el$71, _$createComponent(Show, {
           get when() {
             return dictationStatus();
           },
           get fallback() {
             return (() => {
-              var _el$126 = _$getNextElement(_tmpl$30);
-              _$insert(_el$126, hint);
-              return _el$126;
+              var _el$131 = _$getNextElement(_tmpl$31);
+              _$insert(_el$131, hint);
+              return _el$131;
             })();
           },
           children: status => [(() => {
-            var _el$127 = _$getNextElement(_tmpl$31),
-              _el$128 = _el$127.firstChild,
-              _el$129 = _el$128.nextSibling;
-            _$insert(_el$129, () => status().text);
+            var _el$132 = _$getNextElement(_tmpl$32),
+              _el$133 = _el$132.firstChild,
+              _el$134 = _el$133.nextSibling;
+            _$insert(_el$134, () => status().text);
             _$effect(_p$ => {
               var _v$34 = dictation() ?? undefined,
                 _v$35 = status().icon;
-              _v$34 !== _p$.e && _$setAttribute(_el$127, "data-state", _p$.e = _v$34);
-              _v$35 !== _p$.t && _$className(_el$128, _p$.t = _v$35);
+              _v$34 !== _p$.e && _$setAttribute(_el$132, "data-state", _p$.e = _v$34);
+              _v$35 !== _p$.t && _$className(_el$133, _p$.t = _v$35);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$127;
+            return _el$132;
           })(), _$createComponent(Show, {
             get when() {
               return _$memo(() => dictation() === "refined")() ? props.microphone?.onRestoreOriginal : undefined;
             },
             children: restore => (() => {
-              var _el$130 = _$getNextElement(_tmpl$32);
-              _el$130.$$click = () => reportChatFailure(restore(), props.onError);
-              _el$130.$$mousedown = keepFieldFocus;
-              _$insert(_el$130, () => chatMessages().restoreOriginal);
-              _$effect(() => _$setProperty(_el$130, "disabled", microphoneDisabled()));
+              var _el$135 = _$getNextElement(_tmpl$33);
+              _el$135.$$click = () => reportChatFailure(restore(), props.onError);
+              _el$135.$$mousedown = keepFieldFocus;
+              _$insert(_el$135, () => chatMessages().restoreOriginal);
+              _$effect(() => _$setProperty(_el$135, "disabled", microphoneDisabled()));
               _$runHydrationEvents();
-              return _el$130;
+              return _el$135;
             })()
           })]
         }));
-        return _el$66;
+        return _el$71;
       }
-    }), _el$90, _co$20);
-    _$insert(_el$65, _$createComponent(Show, {
+    }), _el$95, _co$21);
+    _$insert(_el$70, _$createComponent(Show, {
       get when() {
         return attachments().length > 0;
       },
       get children() {
-        var _el$67 = _$getNextElement(_tmpl$21);
-        _$insert(_el$67, _$createComponent(For, {
+        var _el$72 = _$getNextElement(_tmpl$22);
+        _$insert(_el$72, _$createComponent(For, {
           get each() {
             return attachments();
           },
           children: attachment => (() => {
-            var _el$131 = _$getNextElement(_tmpl$34),
-              _el$132 = _el$131.firstChild,
-              _el$133 = _el$132.firstChild,
-              [_el$134, _co$32] = _$getNextMarker(_el$133.nextSibling),
-              _el$135 = _el$134.nextSibling,
-              [_el$136, _co$33] = _$getNextMarker(_el$135.nextSibling),
-              _el$138 = _el$132.nextSibling,
-              [_el$139, _co$34] = _$getNextMarker(_el$138.nextSibling);
-            _$insert(_el$132, _$createComponent(Show, {
+            var _el$136 = _$getNextElement(_tmpl$35),
+              _el$137 = _el$136.firstChild,
+              _el$138 = _el$137.firstChild,
+              [_el$139, _co$33] = _$getNextMarker(_el$138.nextSibling),
+              _el$140 = _el$139.nextSibling,
+              [_el$141, _co$34] = _$getNextMarker(_el$140.nextSibling),
+              _el$143 = _el$137.nextSibling,
+              [_el$144, _co$35] = _$getNextMarker(_el$143.nextSibling);
+            _$insert(_el$137, _$createComponent(Show, {
               get when() {
                 return attachment.href;
               },
               get fallback() {
                 return (() => {
-                  var _el$140 = _$getNextElement(_tmpl$36),
-                    _el$142 = _el$140.firstChild,
-                    [_el$143, _co$35] = _$getNextMarker(_el$142.nextSibling),
-                    _el$144 = _el$143.nextSibling,
-                    [_el$145, _co$36] = _$getNextMarker(_el$144.nextSibling);
-                  _$insert(_el$140, _$createComponent(Show, {
+                  var _el$145 = _$getNextElement(_tmpl$37),
+                    _el$147 = _el$145.firstChild,
+                    [_el$148, _co$36] = _$getNextMarker(_el$147.nextSibling),
+                    _el$149 = _el$148.nextSibling,
+                    [_el$150, _co$37] = _$getNextMarker(_el$149.nextSibling);
+                  _$insert(_el$145, _$createComponent(Show, {
                     get when() {
                       return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                     },
                     get fallback() {
                       return (() => {
-                        var _el$146 = _$getNextElement(_tmpl$3);
-                        _$effect(() => _$className(_el$146, attachmentIcon(attachment)));
-                        return _el$146;
+                        var _el$151 = _$getNextElement(_tmpl$3);
+                        _$effect(() => _$className(_el$151, attachmentIcon(attachment)));
+                        return _el$151;
                       })();
                     },
                     get children() {
-                      var _el$141 = _$getNextElement(_tmpl$35);
+                      var _el$146 = _$getNextElement(_tmpl$36);
                       _$effect(_p$ => {
                         var _v$38 = attachment.previewUrl,
                           _v$39 = attachment.alt ?? "";
-                        _v$38 !== _p$.e && _$setAttribute(_el$141, "src", _p$.e = _v$38);
-                        _v$39 !== _p$.t && _$setAttribute(_el$141, "alt", _p$.t = _v$39);
+                        _v$38 !== _p$.e && _$setAttribute(_el$146, "src", _p$.e = _v$38);
+                        _v$39 !== _p$.t && _$setAttribute(_el$146, "alt", _p$.t = _v$39);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$141;
+                      return _el$146;
                     }
-                  }), _el$143, _co$35);
-                  _$insert(_el$140, () => renderAttachmentCopy(attachment), _el$145, _co$36);
-                  return _el$140;
+                  }), _el$148, _co$36);
+                  _$insert(_el$145, () => renderAttachmentCopy(attachment), _el$150, _co$37);
+                  return _el$145;
                 })();
               },
               children: href => (() => {
-                var _el$147 = _$getNextElement(_tmpl$37),
-                  _el$149 = _el$147.firstChild,
-                  [_el$150, _co$37] = _$getNextMarker(_el$149.nextSibling),
-                  _el$151 = _el$150.nextSibling,
-                  [_el$152, _co$38] = _$getNextMarker(_el$151.nextSibling);
-                _$insert(_el$147, _$createComponent(Show, {
+                var _el$152 = _$getNextElement(_tmpl$38),
+                  _el$154 = _el$152.firstChild,
+                  [_el$155, _co$38] = _$getNextMarker(_el$154.nextSibling),
+                  _el$156 = _el$155.nextSibling,
+                  [_el$157, _co$39] = _$getNextMarker(_el$156.nextSibling);
+                _$insert(_el$152, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                   },
                   get fallback() {
                     return (() => {
-                      var _el$153 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$153, attachmentIcon(attachment)));
-                      return _el$153;
+                      var _el$158 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$158, attachmentIcon(attachment)));
+                      return _el$158;
                     })();
                   },
                   get children() {
-                    var _el$148 = _$getNextElement(_tmpl$35);
+                    var _el$153 = _$getNextElement(_tmpl$36);
                     _$effect(_p$ => {
                       var _v$40 = attachment.previewUrl,
                         _v$41 = attachment.alt ?? "";
-                      _v$40 !== _p$.e && _$setAttribute(_el$148, "src", _p$.e = _v$40);
-                      _v$41 !== _p$.t && _$setAttribute(_el$148, "alt", _p$.t = _v$41);
+                      _v$40 !== _p$.e && _$setAttribute(_el$153, "src", _p$.e = _v$40);
+                      _v$41 !== _p$.t && _$setAttribute(_el$153, "alt", _p$.t = _v$41);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$148;
+                    return _el$153;
                   }
-                }), _el$150, _co$37);
-                _$insert(_el$147, () => renderAttachmentCopy(attachment), _el$152, _co$38);
+                }), _el$155, _co$38);
+                _$insert(_el$152, () => renderAttachmentCopy(attachment), _el$157, _co$39);
                 _$effect(_p$ => {
                   var _v$42 = href(),
                     _v$43 = chatMessages().openInNewTab({
                       name: attachment.name
                     });
-                  _v$42 !== _p$.e && _$setAttribute(_el$147, "href", _p$.e = _v$42);
-                  _v$43 !== _p$.t && _$setAttribute(_el$147, "aria-label", _p$.t = _v$43);
+                  _v$42 !== _p$.e && _$setAttribute(_el$152, "href", _p$.e = _v$42);
+                  _v$43 !== _p$.t && _$setAttribute(_el$152, "aria-label", _p$.t = _v$43);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$147;
+                return _el$152;
               })()
-            }), _el$134, _co$32);
-            _$insert(_el$132, _$createComponent(Show, {
+            }), _el$139, _co$33);
+            _$insert(_el$137, _$createComponent(Show, {
               get when() {
                 return attachment.action;
               },
               children: action => (() => {
-                var _el$154 = _$getNextElement(_tmpl$38),
-                  _el$155 = _el$154.firstChild,
-                  [_el$156, _co$39] = _$getNextMarker(_el$155.nextSibling),
-                  _el$157 = _el$156.nextSibling,
-                  [_el$158, _co$40] = _$getNextMarker(_el$157.nextSibling);
-                _el$154.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
-                _$insert(_el$154, _$createComponent(Show, {
+                var _el$159 = _$getNextElement(_tmpl$39),
+                  _el$160 = _el$159.firstChild,
+                  [_el$161, _co$40] = _$getNextMarker(_el$160.nextSibling),
+                  _el$162 = _el$161.nextSibling,
+                  [_el$163, _co$41] = _$getNextMarker(_el$162.nextSibling);
+                _el$159.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
+                _$insert(_el$159, _$createComponent(Show, {
                   get when() {
                     return action().icon;
                   },
                   children: icon => (() => {
-                    var _el$159 = _$getNextElement(_tmpl$3);
-                    _$effect(() => _$className(_el$159, icon()));
-                    return _el$159;
+                    var _el$164 = _$getNextElement(_tmpl$3);
+                    _$effect(() => _$className(_el$164, icon()));
+                    return _el$164;
                   })()
-                }), _el$156, _co$39);
-                _$insert(_el$154, () => action().label, _el$158, _co$40);
-                _$effect(() => _$setProperty(_el$154, "disabled", blocked() || action().disabled));
+                }), _el$161, _co$40);
+                _$insert(_el$159, () => action().label, _el$163, _co$41);
+                _$effect(() => _$setProperty(_el$159, "disabled", blocked() || action().disabled));
                 _$runHydrationEvents();
-                return _el$154;
+                return _el$159;
               })()
-            }), _el$136, _co$33);
-            _$insert(_el$131, _$createComponent(Show, {
+            }), _el$141, _co$34);
+            _$insert(_el$136, _$createComponent(Show, {
               get when() {
                 return props.onAttachmentsChange;
               },
               get children() {
-                var _el$137 = _$getNextElement(_tmpl$33);
-                _el$137.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
+                var _el$142 = _$getNextElement(_tmpl$34);
+                _el$142.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
                 _$effect(_p$ => {
                   var _v$36 = selectMessages().removeNamed({
                       name: attachment.name
                     }),
                     _v$37 = blocked();
-                  _v$36 !== _p$.e && _$setAttribute(_el$137, "aria-label", _p$.e = _v$36);
-                  _v$37 !== _p$.t && _$setProperty(_el$137, "disabled", _p$.t = _v$37);
+                  _v$36 !== _p$.e && _$setAttribute(_el$142, "aria-label", _p$.e = _v$36);
+                  _v$37 !== _p$.t && _$setProperty(_el$142, "disabled", _p$.t = _v$37);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
                 _$runHydrationEvents();
-                return _el$137;
+                return _el$142;
               }
-            }), _el$139, _co$34);
-            _$effect(() => _el$132.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
-            return _el$131;
+            }), _el$144, _co$35);
+            _$effect(() => _el$137.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
+            return _el$136;
           })()
         }));
-        _$effect(() => _$setAttribute(_el$67, "aria-label", chatMessages().attachments));
-        return _el$67;
+        _$effect(() => _$setAttribute(_el$72, "aria-label", chatMessages().attachments));
+        return _el$72;
       }
-    }), _el$92, _co$21);
-    _$insert(_el$65, _$createComponent(Show, {
+    }), _el$97, _co$22);
+    _$insert(_el$70, _$createComponent(Show, {
       get when() {
         return conversation();
       },
@@ -1920,49 +2090,49 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$160 = _$getNextElement(_tmpl$22),
-              _el$161 = _el$160.firstChild,
-              _el$162 = _el$161.nextSibling,
-              [_el$163, _co$41] = _$getNextMarker(_el$162.nextSibling);
-            _$insert(_el$160, () => props.error, _el$163, _co$41);
-            return _el$160;
+            var _el$165 = _$getNextElement(_tmpl$23),
+              _el$166 = _el$165.firstChild,
+              _el$167 = _el$166.nextSibling,
+              [_el$168, _co$42] = _$getNextMarker(_el$167.nextSibling);
+            _$insert(_el$165, () => props.error, _el$168, _co$42);
+            return _el$165;
           }
         }), _$memo(formatRow), (() => {
-          var _el$164 = _$getNextElement(_tmpl$39);
-          _$insert(_el$164, _$createComponent(Show, {
+          var _el$169 = _$getNextElement(_tmpl$40);
+          _$insert(_el$169, _$createComponent(Show, {
             get when() {
-              return props.footerContent;
+              return footer();
             },
             get fallback() {
               return [(() => {
-                var _el$165 = _$getNextElement(_tmpl$40),
-                  _el$166 = _el$165.firstChild,
-                  [_el$167, _co$42] = _$getNextMarker(_el$166.nextSibling),
-                  _el$168 = _el$167.nextSibling,
-                  [_el$169, _co$43] = _$getNextMarker(_el$168.nextSibling),
-                  _el$170 = _el$169.nextSibling,
-                  [_el$171, _co$44] = _$getNextMarker(_el$170.nextSibling),
-                  _el$172 = _el$171.nextSibling,
-                  [_el$173, _co$45] = _$getNextMarker(_el$172.nextSibling),
-                  _el$174 = _el$173.nextSibling,
-                  [_el$175, _co$46] = _$getNextMarker(_el$174.nextSibling),
-                  _el$176 = _el$175.nextSibling,
-                  [_el$177, _co$47] = _$getNextMarker(_el$176.nextSibling),
-                  _el$178 = _el$177.nextSibling,
-                  [_el$179, _co$48] = _$getNextMarker(_el$178.nextSibling);
-                _$insert(_el$165, () => props.footerTools, _el$167, _co$42);
-                _$insert(_el$165, _$createComponent(Show, {
+                var _el$170 = _$getNextElement(_tmpl$41),
+                  _el$171 = _el$170.firstChild,
+                  [_el$172, _co$43] = _$getNextMarker(_el$171.nextSibling),
+                  _el$173 = _el$172.nextSibling,
+                  [_el$174, _co$44] = _$getNextMarker(_el$173.nextSibling),
+                  _el$175 = _el$174.nextSibling,
+                  [_el$176, _co$45] = _$getNextMarker(_el$175.nextSibling),
+                  _el$177 = _el$176.nextSibling,
+                  [_el$178, _co$46] = _$getNextMarker(_el$177.nextSibling),
+                  _el$179 = _el$178.nextSibling,
+                  [_el$180, _co$47] = _$getNextMarker(_el$179.nextSibling),
+                  _el$181 = _el$180.nextSibling,
+                  [_el$182, _co$48] = _$getNextMarker(_el$181.nextSibling),
+                  _el$183 = _el$182.nextSibling,
+                  [_el$184, _co$49] = _$getNextMarker(_el$183.nextSibling);
+                _$insert(_el$170, () => props.footerTools, _el$172, _co$43);
+                _$insert(_el$170, _$createComponent(Show, {
                   get when() {
                     return hasAddMenu();
                   },
                   get children() {
                     return addMenu("ti ti-plus");
                   }
-                }), _el$169, _co$43);
-                _$insert(_el$165, fileInput, _el$171, _co$44);
-                _$insert(_el$165, formatToggle, _el$173, _co$45);
-                _$insert(_el$165, emojiButton, _el$175, _co$46);
-                _$insert(_el$165, _$createComponent(Show, {
+                }), _el$174, _co$44);
+                _$insert(_el$170, fileInput, _el$176, _co$45);
+                _$insert(_el$170, formatToggle, _el$178, _co$46);
+                _$insert(_el$170, emojiButton, _el$180, _co$47);
+                _$insert(_el$170, _$createComponent(Show, {
                   get when() {
                     return (props.models?.length ?? 0) > 0;
                   },
@@ -1987,31 +2157,43 @@ export function ChatComposer(props) {
                           image: model.image
                         }));
                       },
+                      get open() {
+                        return modelOpen();
+                      },
+                      onOpenChange: open => {
+                        if (!choosingModel()) return;
+                        setModelOpen(open);
+                        // Dropdown closes before committing the choice; let onValueChange settle it first.
+                        if (!open) queueMicrotask(() => {
+                          if (!modelOpen()) finishModelSelection(null);
+                        });
+                      },
                       get disabled() {
-                        return blocked() || running() || !props.onModelChange;
+                        return (choosingModel() ? blockedBesidesCommand() : blocked()) || running() || !props.onModelChange;
                       },
                       onValueChange: modelId => {
                         props.onModelChange?.(modelId);
+                        finishModelSelection(modelId);
                         queueMicrotask(focus);
                       }
                     });
                   }
-                }), _el$177, _co$47);
-                _$insert(_el$165, () => props.modelDetails, _el$179, _co$48);
-                return _el$165;
+                }), _el$182, _co$48);
+                _$insert(_el$170, () => props.modelDetails, _el$184, _co$49);
+                return _el$170;
               })(), (() => {
-                var _el$180 = _$getNextElement(_tmpl$41),
-                  _el$181 = _el$180.firstChild,
-                  [_el$182, _co$49] = _$getNextMarker(_el$181.nextSibling),
-                  _el$183 = _el$182.nextSibling,
-                  [_el$184, _co$50] = _$getNextMarker(_el$183.nextSibling),
-                  _el$185 = _el$184.nextSibling,
-                  [_el$186, _co$51] = _$getNextMarker(_el$185.nextSibling),
-                  _el$187 = _el$186.nextSibling,
-                  [_el$188, _co$52] = _$getNextMarker(_el$187.nextSibling),
-                  _el$189 = _el$188.nextSibling,
-                  [_el$190, _co$53] = _$getNextMarker(_el$189.nextSibling);
-                _$insert(_el$180, _$createComponent(For, {
+                var _el$185 = _$getNextElement(_tmpl$42),
+                  _el$186 = _el$185.firstChild,
+                  [_el$187, _co$50] = _$getNextMarker(_el$186.nextSibling),
+                  _el$188 = _el$187.nextSibling,
+                  [_el$189, _co$51] = _$getNextMarker(_el$188.nextSibling),
+                  _el$190 = _el$189.nextSibling,
+                  [_el$191, _co$52] = _$getNextMarker(_el$190.nextSibling),
+                  _el$192 = _el$191.nextSibling,
+                  [_el$193, _co$53] = _$getNextMarker(_el$192.nextSibling),
+                  _el$194 = _el$193.nextSibling,
+                  [_el$195, _co$54] = _$getNextMarker(_el$194.nextSibling);
+                _$insert(_el$185, _$createComponent(For, {
                   get each() {
                     return props.contextActions;
                   },
@@ -2035,13 +2217,13 @@ export function ChatComposer(props) {
                     },
                     onClick: () => reportChatFailure(() => executeChatAction(action), props.onError),
                     get children() {
-                      var _el$191 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$191, action.icon ?? "ti ti-dots"));
-                      return _el$191;
+                      var _el$196 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$196, action.icon ?? "ti ti-dots"));
+                      return _el$196;
                     }
                   })
-                }), _el$182, _co$49);
-                _$insert(_el$180, _$createComponent(Show, {
+                }), _el$187, _co$50);
+                _$insert(_el$185, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => !!hasContextUsage())() ? props.contextUsage ?? {} : undefined;
                   },
@@ -2053,16 +2235,18 @@ export function ChatComposer(props) {
                       return props.onError;
                     }
                   }))
-                }), _el$184, _co$50);
-                _$insert(_el$180, () => props.submitTools, _el$186, _co$51);
-                _$insert(_el$180, microphoneControl, _el$188, _co$52);
-                _$insert(_el$180, sendControl, _el$190, _co$53);
-                return _el$180;
+                }), _el$189, _co$51);
+                _$insert(_el$185, () => props.submitTools, _el$191, _co$52);
+                _$insert(_el$185, microphoneControl, _el$193, _co$53);
+                _$insert(_el$185, sendControl, _el$195, _co$54);
+                return _el$185;
               })()];
             },
-            children: content => content()
+            get children() {
+              return footer();
+            }
           }));
-          return _el$164;
+          return _el$169;
         })()];
       },
       get children() {
@@ -2071,43 +2255,43 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$68 = _$getNextElement(_tmpl$22),
-              _el$69 = _el$68.firstChild,
-              _el$70 = _el$69.nextSibling,
-              [_el$71, _co$12] = _$getNextMarker(_el$70.nextSibling);
-            _$insert(_el$68, () => props.error, _el$71, _co$12);
-            return _el$68;
+            var _el$73 = _$getNextElement(_tmpl$23),
+              _el$74 = _el$73.firstChild,
+              _el$75 = _el$74.nextSibling,
+              [_el$76, _co$13] = _$getNextMarker(_el$75.nextSibling);
+            _$insert(_el$73, () => props.error, _el$76, _co$13);
+            return _el$73;
           }
         }), _$memo(() => formatRow()), (() => {
-          var _el$72 = _$getNextElement(_tmpl$23),
-            _el$83 = _el$72.firstChild,
-            [_el$84, _co$17] = _$getNextMarker(_el$83.nextSibling),
-            _el$85 = _el$84.nextSibling,
-            [_el$86, _co$18] = _$getNextMarker(_el$85.nextSibling),
-            _el$73 = _el$86.nextSibling,
-            _el$81 = _el$73.firstChild,
-            [_el$82, _co$16] = _$getNextMarker(_el$81.nextSibling),
-            _el$74 = _el$82.nextSibling,
-            _el$75 = _el$74.firstChild,
-            [_el$76, _co$13] = _$getNextMarker(_el$75.nextSibling),
-            _el$77 = _el$76.nextSibling,
-            [_el$78, _co$14] = _$getNextMarker(_el$77.nextSibling),
-            _el$79 = _el$78.nextSibling,
-            [_el$80, _co$15] = _$getNextMarker(_el$79.nextSibling),
-            _el$87 = _el$73.nextSibling,
-            [_el$88, _co$19] = _$getNextMarker(_el$87.nextSibling);
-          _$insert(_el$72, attachControl, _el$84, _co$17);
-          _$insert(_el$72, fileInput, _el$86, _co$18);
-          _$insert(_el$73, field, _el$82, _co$16);
-          _$insert(_el$74, formatToggle, _el$76, _co$13);
-          _$insert(_el$74, emojiButton, _el$78, _co$14);
-          _$insert(_el$74, microphoneControl, _el$80, _co$15);
-          _$insert(_el$72, sendControl, _el$88, _co$19);
-          return _el$72;
+          var _el$77 = _$getNextElement(_tmpl$24),
+            _el$88 = _el$77.firstChild,
+            [_el$89, _co$18] = _$getNextMarker(_el$88.nextSibling),
+            _el$90 = _el$89.nextSibling,
+            [_el$91, _co$19] = _$getNextMarker(_el$90.nextSibling),
+            _el$78 = _el$91.nextSibling,
+            _el$86 = _el$78.firstChild,
+            [_el$87, _co$17] = _$getNextMarker(_el$86.nextSibling),
+            _el$79 = _el$87.nextSibling,
+            _el$80 = _el$79.firstChild,
+            [_el$81, _co$14] = _$getNextMarker(_el$80.nextSibling),
+            _el$82 = _el$81.nextSibling,
+            [_el$83, _co$15] = _$getNextMarker(_el$82.nextSibling),
+            _el$84 = _el$83.nextSibling,
+            [_el$85, _co$16] = _$getNextMarker(_el$84.nextSibling),
+            _el$92 = _el$78.nextSibling,
+            [_el$93, _co$20] = _$getNextMarker(_el$92.nextSibling);
+          _$insert(_el$77, attachControl, _el$89, _co$18);
+          _$insert(_el$77, fileInput, _el$91, _co$19);
+          _$insert(_el$78, field, _el$87, _co$17);
+          _$insert(_el$79, formatToggle, _el$81, _co$14);
+          _$insert(_el$79, emojiButton, _el$83, _co$15);
+          _$insert(_el$79, microphoneControl, _el$85, _co$16);
+          _$insert(_el$77, sendControl, _el$93, _co$20);
+          return _el$77;
         })()];
       }
-    }), _el$94, _co$22);
-    _$insert(_el$65, _$createComponent(Show, {
+    }), _el$99, _co$23);
+    _$insert(_el$70, _$createComponent(Show, {
       get when() {
         return props.fileSelection;
       },
@@ -2126,60 +2310,60 @@ export function ChatComposer(props) {
         },
         onDrop: files => void runFiles(files)
       })
-    }), _el$96, _co$23);
-    _$insert(_el$97, _$createComponent(Show, {
+    }), _el$101, _co$24);
+    _$insert(_el$102, _$createComponent(Show, {
       get when() {
         return suggestionAnnouncement();
       },
       keyed: true,
       children: announced => (() => {
-        var _el$192 = _$getNextElement(_tmpl$10);
-        _$insert(_el$192, () => announced.text);
-        return _el$192;
+        var _el$197 = _$getNextElement(_tmpl$10);
+        _$insert(_el$197, () => announced.text);
+        return _el$197;
       })()
     }));
-    _$insert(_el$98, _$createComponent(Show, {
+    _$insert(_el$103, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!!suggestionsOpen())() && commandStatus();
       },
       children: status => (() => {
-        var _el$193 = _$getNextElement(_tmpl$42),
-          _el$194 = _el$193.firstChild,
-          _el$195 = _el$194.nextSibling;
-        _$insert(_el$195, () => status().text);
+        var _el$198 = _$getNextElement(_tmpl$43),
+          _el$199 = _el$198.firstChild,
+          _el$200 = _el$199.nextSibling;
+        _$insert(_el$200, () => status().text);
         _$effect(_p$ => {
           var _v$44 = status().tone,
             _v$45 = status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle";
-          _v$44 !== _p$.e && _$setAttribute(_el$193, "data-tone", _p$.e = _v$44);
-          _v$45 !== _p$.t && _$className(_el$194, _p$.t = _v$45);
+          _v$44 !== _p$.e && _$setAttribute(_el$198, "data-tone", _p$.e = _v$44);
+          _v$45 !== _p$.t && _$className(_el$199, _p$.t = _v$45);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$193;
+        return _el$198;
       })()
-    }), _el$100, _co$24);
-    _$insert(_el$98, _$createComponent(Show, {
+    }), _el$105, _co$25);
+    _$insert(_el$103, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!suggestionsOpen())() && announcement();
       },
       keyed: true,
       children: announced => (() => {
-        var _el$196 = _$getNextElement(_tmpl$43);
-        _$insert(_el$196, () => announced.text);
-        return _el$196;
+        var _el$201 = _$getNextElement(_tmpl$44);
+        _$insert(_el$201, () => announced.text);
+        return _el$201;
       })()
-    }), _el$102, _co$25);
+    }), _el$107, _co$26);
     _$effect(_p$ => {
       var _v$24 = `k2b-chat-composer ${props.class ?? ""}`,
         _v$25 = running() ? "true" : undefined,
         _v$26 = conversation() ? "conversation" : undefined,
         _v$27 = props.label ?? chatMessages().messageComposer;
-      _v$24 !== _p$.e && _$className(_el$65, _p$.e = _v$24);
-      _v$25 !== _p$.t && _$setAttribute(_el$65, "data-running", _p$.t = _v$25);
-      _v$26 !== _p$.a && _$setAttribute(_el$65, "data-variant", _p$.a = _v$26);
-      _v$27 !== _p$.o && _$setAttribute(_el$65, "aria-label", _p$.o = _v$27);
+      _v$24 !== _p$.e && _$className(_el$70, _p$.e = _v$24);
+      _v$25 !== _p$.t && _$setAttribute(_el$70, "data-running", _p$.t = _v$25);
+      _v$26 !== _p$.a && _$setAttribute(_el$70, "data-variant", _p$.a = _v$26);
+      _v$27 !== _p$.o && _$setAttribute(_el$70, "aria-label", _p$.o = _v$27);
       return _p$;
     }, {
       e: undefined,
@@ -2187,8 +2371,8 @@ export function ChatComposer(props) {
       a: undefined,
       o: undefined
     });
-    return _el$37;
+    return _el$42;
   })();
 }
-_$delegateEvents(["input", "click", "keyup", "beforeinput", "keydown", "pointerdown", "mousedown"]);
+_$delegateEvents(["input", "click", "keyup", "beforeinput", "keydown", "mousedown"]);
 //# sourceMappingURL=ChatComposer.js.map