@k2b/ui 0.27.0 → 0.29.0

package/dist/ssr/chat/ChatComposer.js

@@ -18,41 +18,43 @@ var _tmpl$ = ["<span><strong", ">", "</strong></span>"],
   _tmpl$1 = ["<div class=\"k2b-chat-composer__input\" role=\"group\"", ">", "<textarea class=\"", "\" rows=\"1\"", "", "></textarea>", "</div>"],
   _tmpl$10 = ["<span class=\"", "\">", "</span>"],
   _tmpl$11 = ["<small", ">", "</small>"],
-  _tmpl$12 = ["<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$13 = ["<b>", "</b>"],
-  _tmpl$14 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "</div></div>"],
-  _tmpl$15 = ["<div role=\"status\" class=\"k2b-chat-composer__loading\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><strong>", "</strong></div>"],
-  _tmpl$16 = ["<div role=\"status\"><i class=\"ti ti-alert-circle\"></i> ", "</div>"],
-  _tmpl$17 = ["<div role=\"status\">", "</div>"],
-  _tmpl$18 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "", "", "", "</div></div>"],
-  _tmpl$19 = ["<div class=\"k2b-chat-composer-slot\"", "><div style=\"", "\"", ">", "</div>", "", "</div>"],
-  _tmpl$20 = ["<div class=\"k2b-chat-composer__hint\" aria-live=\"polite\">", "</div>"],
-  _tmpl$21 = ["<div class=\"k2b-chat-composer__attachments\" role=\"list\"", " tabindex=\"0\">", "</div>"],
-  _tmpl$22 = ["<div class=\"k2b-chat-composer__error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</div>"],
-  _tmpl$23 = ["<div class=\"k2b-chat-composer__row\">", "", "<div class=\"k2b-chat-composer__field\">", "<div class=\"k2b-chat-composer__field-tools\">", "", "", "</div></div>", "</div>"],
-  _tmpl$24 = ["<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$25 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><span class=\"k2b-chat-composer__emoji-glyph\" aria-hidden=\"true\">", "</span><strong>", "</strong>", "</button>"],
-  _tmpl$26 = ["<small>:", ":</small>"],
-  _tmpl$27 = "<i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>",
-  _tmpl$28 = "<div class=\"k2b-chat-composer__command-placeholder\" aria-hidden=\"true\"><span></span><span><span></span><span></span></span></div>",
-  _tmpl$29 = ["<div class=\"k2b-chat-composer__command-group\" role=\"group\"", "><div class=\"k2b-chat-composer__command-heading\"", " role=\"presentation\"><span>", "</span>", "</div>", "", "</div>"],
-  _tmpl$30 = ["<span class=\"k2b-chat-composer__hint-text\">", "</span>"],
-  _tmpl$31 = ["<span class=\"k2b-chat-composer__dictation\"", "><i", " aria-hidden=\"true\"></i><span>", "</span></span>"],
-  _tmpl$32 = ["<button type=\"button\" class=\"k2b-chat-composer__hint-action\"", ">", "</button>"],
-  _tmpl$33 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
-  _tmpl$34 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
-  _tmpl$35 = ["<img", ">"],
-  _tmpl$36 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
-  _tmpl$37 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
-  _tmpl$38 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
-  _tmpl$39 = ["<footer class=\"k2b-chat-composer__footer\">", "</footer>"],
-  _tmpl$40 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "", "", "</div>"],
-  _tmpl$41 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "", "</div>"],
-  _tmpl$42 = ["<span>", "</span>"],
-  _tmpl$43 = ["<div class=\"k2b-chat-composer__status-line\"", "><i aria-hidden=\"true\"", "></i><span>", "</span></div>"],
-  _tmpl$44 = ["<span class=\"k2b-sr-only\">", "</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 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "</div></div>"],
+  _tmpl$16 = ["<div role=\"status\" class=\"k2b-chat-composer__loading\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><strong>", "</strong></div>"],
+  _tmpl$17 = ["<div role=\"status\"><i class=\"ti ti-alert-circle\"></i> ", "</div>"],
+  _tmpl$18 = ["<div role=\"status\">", "</div>"],
+  _tmpl$19 = ["<div class=\"k2b-chat-composer-accessory\" data-commands><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "", "", "", "", "</div></div>"],
+  _tmpl$20 = ["<div class=\"k2b-chat-composer-slot\"", "><div style=\"", "\"", ">", "</div>", "", "</div>"],
+  _tmpl$21 = ["<div class=\"k2b-chat-composer__hint\" aria-live=\"polite\">", "</div>"],
+  _tmpl$22 = ["<div class=\"k2b-chat-composer__attachments\" role=\"list\"", " tabindex=\"0\">", "</div>"],
+  _tmpl$23 = ["<div class=\"k2b-chat-composer__error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</div>"],
+  _tmpl$24 = ["<div class=\"k2b-chat-composer__row\">", "", "<div class=\"k2b-chat-composer__field\">", "<div class=\"k2b-chat-composer__field-tools\">", "", "", "</div></div>", "</div>"],
+  _tmpl$25 = ["<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$26 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><span class=\"k2b-chat-composer__emoji-glyph\" aria-hidden=\"true\">", "</span><strong>", "</strong>", "</button>"],
+  _tmpl$27 = ["<small>:", ":</small>"],
+  _tmpl$28 = "<i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>",
+  _tmpl$29 = "<div class=\"k2b-chat-composer__command-placeholder\" aria-hidden=\"true\"><span></span><span><span></span><span></span></span></div>",
+  _tmpl$30 = ["<div class=\"k2b-chat-composer__command-group\" role=\"group\"", "><div class=\"k2b-chat-composer__command-heading\"", " role=\"presentation\"><span>", "</span>", "</div>", "", "</div>"],
+  _tmpl$31 = ["<span class=\"k2b-chat-composer__hint-text\">", "</span>"],
+  _tmpl$32 = ["<span class=\"k2b-chat-composer__dictation\"", "><i", " aria-hidden=\"true\"></i><span>", "</span></span>"],
+  _tmpl$33 = ["<button type=\"button\" class=\"k2b-chat-composer__hint-action\"", ">", "</button>"],
+  _tmpl$34 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$35 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
+  _tmpl$36 = ["<img", ">"],
+  _tmpl$37 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
+  _tmpl$38 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
+  _tmpl$39 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
+  _tmpl$40 = ["<footer class=\"k2b-chat-composer__footer\">", "</footer>"],
+  _tmpl$41 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "", "", "</div>"],
+  _tmpl$42 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "", "</div>"],
+  _tmpl$43 = ["<span>", "</span>"],
+  _tmpl$44 = ["<div class=\"k2b-chat-composer__status-line\"", "><i aria-hidden=\"true\"", "></i><span>", "</span></div>"],
+  _tmpl$45 = ["<span class=\"k2b-sr-only\">", "</span>"];
 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";
@@ -76,7 +78,10 @@ const emojiSuggestionLimit = 8;
 // Keep editor undo text within approximately 2 MiB, plus the current edit.
 const composerUndoBudgetChars = 1_000_000;
 
-/** An action can cancel and restore its token, or report a short completion message. */
+/**
+ * An action can cancel and restore its token, report a short completion message, or hand back a reference chosen in a
+ * dialog: `mention` takes the token's place exactly as a `mention` row does, and Ctrl/⌘+Z brings the token back.
+ */
 
 /** A fixed place in the slash list. Sections keep the given order, also while searching. */
 
@@ -114,12 +119,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();
@@ -140,6 +173,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;
@@ -158,6 +192,7 @@ export function ChatComposer(props) {
   });
   const [addingFiles, setAddingFiles] = createSignal(false);
   const [submitting, setSubmitting] = createSignal(false);
+  let shellRef;
   let composerRef;
   let textareaRef;
   let fileInputRef;
@@ -185,6 +220,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 ?? [];
@@ -218,7 +292,21 @@ 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 commandFallbackRow = createMemo(() => {
+    const parsed = parsedCommandQuery();
+    const query = parsed.query.trim();
+    return commandQuery() && (query || parsed.scope) ? props.commandFallback?.({
+      query,
+      scope: parsed.scope?.id
+    }) : undefined;
+  });
   const currentCommandScope = createMemo(() => parsedCommandQuery().scope?.id);
   createEffect(() => {
     currentCommandScope();
@@ -234,9 +322,12 @@ export function ChatComposer(props) {
     searchResults: searchResultsScope() === parsedCommandQuery().scope?.id ? searchResults() : [],
     searchResultsFresh: searchResultsQuery() === commandQuery()?.query && searchResultsScope() === parsedCommandQuery().scope?.id,
     searchSettled: searchResultsQuery() !== undefined && searchResultsScope() === parsedCommandQuery().scope?.id,
-    searching: searching()
+    searching: searching(),
+    fallback: commandFallbackRow()
   }));
   const commandMatches = createMemo(() => commandQuery() ? commandModel().rows.map(row => row.command) : []);
+  /** Rows that matched; an unscoped fallback row only follows them. */
+  const foundCommandCount = () => commandMatches().length - (commandModel().fallback ? 1 : 0);
   const currentCommandQuery = createMemo(() => caretCommandToken()?.query);
   // Arrow marking belongs to one token in one draft; another draft or `/` starts at the top row again.
   createEffect(() => {
@@ -245,21 +336,46 @@ export function ChatComposer(props) {
     currentCommandQuery();
     setCommandMoved(false);
   });
-  const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (localCommands().length || props.searchCommands));
+  const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (localCommands().length || props.searchCommands || commandFallbackRow()));
+  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);
@@ -272,6 +388,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();
@@ -280,12 +410,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(() => {
@@ -303,7 +438,7 @@ export function ChatComposer(props) {
       }).finally(() => {
         if (!abort.signal.aborted) setSearching(false);
       });
-    }, 120);
+    }, delay);
     onCleanup(() => {
       clearTimeout(timer);
       abort.abort();
@@ -362,6 +497,7 @@ export function ChatComposer(props) {
     untrack(() => {
       history.length = 0;
       historyIndex = -1;
+      finishModelSelection(null);
       setDismissed(true);
       setClosedAt(undefined);
       setSearchResults([]);
@@ -387,6 +523,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) {
@@ -395,6 +538,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);
@@ -438,7 +582,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 = () => {
@@ -534,12 +680,78 @@ export function ChatComposer(props) {
   });
   const setAttachments = next => props.onAttachmentsChange?.(next);
   const renderAttachmentCopy = attachment => _$ssr(_tmpl$, _$ssrAttribute("title", _$escape(attachment.name, true), false), _$escape(attachment.name));
-  const chooseFiles = () => {
+
+  /** `onNothing` runs when the person closes the selection without a file. */
+  const chooseFiles = onNothing => {
     const selection = props.fileSelection;
-    if (!selection?.choose) return fileInputRef?.click();
-    selection.choose().then(
+    if (!selection?.choose) {
+      const input = fileInputRef;
+      if (input && onNothing) {
+        const done = new AbortController();
+        input.addEventListener("cancel", () => {
+          done.abort();
+          onNothing();
+        }, {
+          signal: done.signal
+        });
+        input.addEventListener("change", () => done.abort(), {
+          signal: done.signal
+        });
+      }
+      return input?.click();
+    }
+    const failed = error => {
+      onNothing?.();
+      (props.fileSelection?.onError ?? props.onError)?.(error);
+    };
+    let chosen;
+    try {
+      chosen = selection.choose();
+    } catch (error) {
+      failed(error);
+      return;
+    }
+    chosen.then(
     // A single-file composer keeps the first chosen file, as its file dialog and drops do.
-    files => void runFiles(selection.multiple === false ? files.slice(0, 1) : files), error => (props.fileSelection?.onError ?? props.onError)?.(error));
+    files => {
+      if (files.length === 0) onNothing?.();else void runFiles(selection.multiple === false ? files.slice(0, 1) : files);
+    }, failed);
+  };
+
+  /**
+   * "Attach files" from the slash list: the token leaves as one edit, and the selection opens synchronously, inside the
+   * key or click that chose the row, because the device's file dialog needs that activation. Closing the selection
+   * without a file brings the token back, unless the draft changed meanwhile.
+   */
+  const attachFilesFromCommand = token => {
+    if (!canSelectFiles()) return;
+    const key = props.draftKey;
+    const previous = snapshot();
+    const previousHistory = {
+      entries: [...history],
+      index: historyIndex
+    };
+    const nextValue = props.value.slice(0, token.start) + props.value.slice(token.end);
+    edit(nextValue, reconcileChatMentions(props.value, nextValue, mentions()));
+    setDismissed(true);
+    chooseFiles(() => {
+      if (props.draftKey !== key || props.value !== nextValue) return;
+      setDismissed(true);
+      props.onValueChange(previous.value);
+      props.onMentionsChange?.(previous.mentions);
+      history.splice(0, history.length, ...previousHistory.entries);
+      historyIndex = previousHistory.index;
+      queueMicrotask(() => {
+        textareaRef?.setSelectionRange(token.end, token.end);
+        syncCaret();
+        focus();
+      });
+    });
+    queueMicrotask(() => {
+      if (props.draftKey !== key || props.value !== nextValue) return;
+      textareaRef?.setSelectionRange(token.start, token.start);
+      syncCaret();
+    });
   };
   const runFiles = async files => {
     if (!canSelectFiles()) return;
@@ -558,18 +770,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("");
@@ -612,6 +832,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.
@@ -620,7 +841,16 @@ export function ChatComposer(props) {
       } : undefined);
       return;
     }
-    if (command.scope && (tab || !command.action && !command.mention) && narrowCommand(command)) return;
+    if (command.searchAgain) {
+      retrySearch = true;
+      setCommandOpening(opening => opening + 1);
+      return;
+    }
+    if (command.scope && (tab || !command.action && !command.mention && !command.attachFiles) && narrowCommand(command)) return;
+    if (command.attachFiles) {
+      attachFilesFromCommand(token);
+      return;
+    }
     const previous = snapshot();
     const key = props.draftKey;
     const replacement = command.mention ? command.mention.name + " " : "";
@@ -641,6 +871,7 @@ export function ChatComposer(props) {
     setExecuting(true);
     let submitRequested = false;
     let restored = false;
+    let mentioned;
     const restore = () => {
       if (props.draftKey !== key || props.value !== nextValue) return;
       setDismissed(true);
@@ -655,17 +886,50 @@ 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;
         restore();
         showCommandStatus();
+      } else if (result && "mention" in result) {
+        // One undo step from the token to the reference, as if the row had been a reference itself.
+        if (props.draftKey === key && props.value === nextValue) {
+          restore();
+          restored = false;
+          const name = result.mention.name;
+          const withMention = previous.value.slice(0, token.start) + name + " " + previous.value.slice(token.end);
+          edit(withMention, [...reconcileChatMentions(previous.value, withMention, previous.mentions), {
+            start: token.start,
+            end: token.start + name.length,
+            attachment: result.mention
+          }]);
+          setDismissed(true);
+          mentioned = {
+            value: withMention,
+            caret: token.start + name.length + 1
+          };
+          showCommandStatus();
+        } else {
+          // The pick is lost; say so, also when the draft moved to another key meanwhile (such as a new chat saved
+          // while the dialog was open), so it never ends in silence.
+          showCommandStatus({
+            tone: "error",
+            text: chatMessages().commandDraftChanged
+          });
+        }
       } else if (result) {
         showCommandStatus({
           tone: "done",
@@ -687,8 +951,8 @@ export function ChatComposer(props) {
     if (submitRequested && props.draftKey === key) await submit();
     queueMicrotask(() => {
       if (props.draftKey !== key) return;
-      if (restored || props.value === nextValue) {
-        const position = restored ? token.end : token.start + replacement.length;
+      if (restored || props.value === nextValue || mentioned && props.value === mentioned.value) {
+        const position = restored ? token.end : mentioned?.caret ?? token.start + replacement.length;
         textareaRef?.setSelectionRange(position, position);
       }
       syncCaret();
@@ -940,7 +1204,7 @@ export function ChatComposer(props) {
           get disabled() {
             return !canSelectFiles();
           },
-          onClick: chooseFiles,
+          onClick: () => chooseFiles(),
           get children() {
             return _$ssr(_tmpl$3, _$ssrAttribute("class", addingFiles() ? "ti ti-loader-2 k2b-spin" : "ti ti-plus", false));
           }
@@ -1216,14 +1480,14 @@ export function ChatComposer(props) {
   const renderCommandRow = command => {
     const highlight = () => commandRowMap().get(command)?.highlight;
     const title = () => command.label ?? command.name;
-    return _$ssr(_tmpl$12, _$ssrAttribute("id", _$escape(commandOptionId(command), true), false), _$ssrAttribute("aria-selected", _$escape(selectedCommand(), true) === _$escape(command, true), false) + _$ssrAttribute("aria-disabled", _$escape(Boolean(command.disabled || command.reason), 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", selectedCommand() === command ? "true" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(command.icon ?? "ti ti-slash", true), false), _$escape(_$createComponent(Show, {
+    return _$ssr(_tmpl$13, _$ssrAttribute("id", _$escape(commandOptionId(command), true), false), _$ssrAttribute("aria-selected", _$escape(selectedCommand(), true) === _$escape(command, true), false) + _$ssrAttribute("aria-disabled", _$escape(Boolean(command.disabled || command.reason), 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", selectedCommand() === command ? "true" : _$escape(undefined, 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$13, _$escape(title().slice(range()[0], range()[1]))), title().slice(range()[1])]
+      children: range => [title().slice(0, range()[0]), _$ssr(_tmpl$14, _$escape(title().slice(range()[0], range()[1]))), title().slice(range()[1])]
     })), _$escape(_$createComponent(Show, {
       get when() {
         return command.reason ?? command.description;
@@ -1231,27 +1495,34 @@ export function ChatComposer(props) {
       get children() {
         return _$ssr(_tmpl$11, _$ssrAttribute("id", command.reason ? `${_$escape(commandOptionId(command), true)}-reason` : _$escape(undefined, true), false), _$escape(command.reason ?? command.description));
       }
+    })), _$escape(_$createComponent(Show, {
+      get when() {
+        return command.selected;
+      },
+      get children() {
+        return _$ssr(_tmpl$12, _$escape(chatMessages().commandSelected));
+      }
     })));
   };
-  return _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$25, _$escape(_$createComponent(Show, {
     get when() {
       return suggestionsOpen() || hasAccessory();
     },
     get children() {
-      return _$ssr(_tmpl$19, _$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$20, _$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$14, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().emojiSuggestions, true), false), _$escape(_$createComponent(For, {
+          return _$ssr(_tmpl$15, _$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$25, `${_$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$26, `${_$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$26, _$escape(code()))
+              children: code => _$ssr(_tmpl$27, _$escape(code()))
             })))
           })));
         }
@@ -1260,7 +1531,7 @@ export function ChatComposer(props) {
           return commandsOpen();
         },
         get children() {
-          return _$ssr(_tmpl$18, _$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, {
+          return _$ssr(_tmpl$19, _$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() {
               return commandModel().groups.map(commandGroupKey);
             },
@@ -1279,12 +1550,12 @@ export function ChatComposer(props) {
                   });
                 },
                 get children() {
-                  return _$ssr(_tmpl$29, _$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$30, _$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$27);
+                      return _$ssr(_tmpl$28);
                     }
                   })), _$escape(_$createComponent(For, {
                     get each() {
@@ -1296,7 +1567,7 @@ export function ChatComposer(props) {
                       return group()?.placeholder;
                     },
                     get children() {
-                      return _$ssr(_tmpl$28);
+                      return _$ssr(_tmpl$29);
                     }
                   })));
                 }
@@ -1304,27 +1575,33 @@ export function ChatComposer(props) {
             }
           })), _$escape(_$createComponent(Show, {
             get when() {
-              return _$memo(() => !!(searching() && commandMatches().length === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
+              return _$memo(() => !!(searching() && foundCommandCount() === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
             },
             get children() {
-              return _$ssr(_tmpl$15, _$escape(messages().loading));
+              return _$ssr(_tmpl$16, _$escape(messages().loading));
             }
           })), _$escape(_$createComponent(Show, {
             get when() {
               return searchError();
             },
             get children() {
-              return _$ssr(_tmpl$16, _$escape(messages().error));
+              return _$ssr(_tmpl$17, _$escape(messages().error));
             }
           })), _$escape(_$createComponent(Show, {
             get when() {
-              return _$memo(() => !!(!searching() && !searchError()))() && commandMatches().length === 0;
+              return _$memo(() => !!(!searching() && !searchError()))() && foundCommandCount() === 0;
             },
             get children() {
-              return _$ssr(_tmpl$17, !parsedCommandQuery().query.trim() ? _$escape(messages().noResults) : _$escape(chatMessages().commandsNothingFound({
+              return _$ssr(_tmpl$18, !parsedCommandQuery().query.trim() ? _$escape(messages().noResults) : _$escape(chatMessages().commandsNothingFound({
                 query: parsedCommandQuery().query.trim()
               })));
             }
+          })), _$escape(_$createComponent(Show, {
+            get when() {
+              return commandModel().fallback?.command;
+            },
+            keyed: true,
+            children: command => renderCommandRow(command)
           })));
         }
       })));
@@ -1334,18 +1611,18 @@ export function ChatComposer(props) {
       return showHint();
     },
     get children() {
-      return _$ssr(_tmpl$20, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$21, _$escape(_$createComponent(Show, {
         get when() {
           return dictationStatus();
         },
         get fallback() {
-          return _$ssr(_tmpl$30, _$escape(hint()));
+          return _$ssr(_tmpl$31, _$escape(hint()));
         },
-        children: status => [_$ssr(_tmpl$31, _$ssrAttribute("data-state", _$escape(dictation() ?? undefined, true), false), _$ssrAttribute("class", _$escape(status().icon, true), false), _$escape(status().text)), _$createComponent(Show, {
+        children: status => [_$ssr(_tmpl$32, _$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$32, _$ssrAttribute("disabled", microphoneDisabled(), true), _$escape(chatMessages().restoreOriginal))
+          children: restore => _$ssr(_tmpl$33, _$ssrAttribute("disabled", microphoneDisabled(), true), _$escape(chatMessages().restoreOriginal))
         })]
       })));
     }
@@ -1354,16 +1631,16 @@ export function ChatComposer(props) {
       return attachments().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$21, _$ssrAttribute("aria-label", _$escape(chatMessages().attachments, true), false), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$22, _$ssrAttribute("aria-label", _$escape(chatMessages().attachments, true), false), _$escape(_$createComponent(For, {
         get each() {
           return attachments();
         },
-        children: attachment => _$ssr(_tmpl$34, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
+        children: attachment => _$ssr(_tmpl$35, `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$36, _$escape(_$createComponent(Show, {
+            return _$ssr(_tmpl$37, _$escape(_$createComponent(Show, {
               get when() {
                 return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
               },
@@ -1371,11 +1648,11 @@ export function ChatComposer(props) {
                 return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
               },
               get children() {
-                return _$ssr(_tmpl$35, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+                return _$ssr(_tmpl$36, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
               }
             })), _$escape(renderAttachmentCopy(attachment)));
           },
-          children: href => _$ssr(_tmpl$37, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().openInNewTab({
+          children: href => _$ssr(_tmpl$38, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().openInNewTab({
             name: attachment.name
           }), true), false), _$escape(_$createComponent(Show, {
             get when() {
@@ -1385,14 +1662,14 @@ export function ChatComposer(props) {
               return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
             },
             get children() {
-              return _$ssr(_tmpl$35, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+              return _$ssr(_tmpl$36, _$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$38, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
+          children: action => _$ssr(_tmpl$39, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
             get when() {
               return action().icon;
             },
@@ -1403,7 +1680,7 @@ export function ChatComposer(props) {
             return props.onAttachmentsChange;
           },
           get children() {
-            return _$ssr(_tmpl$33, _$ssrAttribute("aria-label", _$escape(selectMessages().removeNamed({
+            return _$ssr(_tmpl$34, _$ssrAttribute("aria-label", _$escape(selectMessages().removeNamed({
               name: attachment.name
             }), true), false), _$ssrAttribute("disabled", blocked(), true));
           }
@@ -1420,14 +1697,14 @@ export function ChatComposer(props) {
           return props.error;
         },
         get children() {
-          return _$ssr(_tmpl$22, _$escape(props.error));
+          return _$ssr(_tmpl$23, _$escape(props.error));
         }
-      }), formatRow(), _$ssr(_tmpl$39, _$escape(_$createComponent(Show, {
+      }), formatRow(), _$ssr(_tmpl$40, _$escape(_$createComponent(Show, {
         get when() {
-          return props.footerContent;
+          return footer();
         },
         get fallback() {
-          return [_$ssr(_tmpl$40, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
+          return [_$ssr(_tmpl$41, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
             get when() {
               return hasAddMenu();
             },
@@ -1459,16 +1736,28 @@ 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);
                 }
               });
             }
-          })), _$escape(props.modelDetails)), _$ssr(_tmpl$41, _$escape(_$createComponent(For, {
+          })), _$escape(props.modelDetails)), _$ssr(_tmpl$42, _$escape(_$createComponent(For, {
             get each() {
               return props.contextActions;
             },
@@ -1509,7 +1798,9 @@ export function ChatComposer(props) {
             }))
           })), _$escape(props.submitTools), _$escape(microphoneControl()), _$escape(sendControl()))];
         },
-        children: content => content()
+        get children() {
+          return footer();
+        }
       })))];
     },
     get children() {
@@ -1518,9 +1809,9 @@ export function ChatComposer(props) {
           return props.error;
         },
         get children() {
-          return _$ssr(_tmpl$22, _$escape(props.error));
+          return _$ssr(_tmpl$23, _$escape(props.error));
         }
-      }), formatRow(), _$ssr(_tmpl$23, _$escape(attachControl()), _$escape(fileInput()), _$escape(field()), _$escape(formatToggle()), _$escape(emojiButton()), _$escape(microphoneControl()), _$escape(sendControl()))];
+      }), formatRow(), _$ssr(_tmpl$24, _$escape(attachControl()), _$escape(fileInput()), _$escape(field()), _$escape(formatToggle()), _$escape(emojiButton()), _$escape(microphoneControl()), _$escape(sendControl()))];
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -1546,18 +1837,18 @@ export function ChatComposer(props) {
       return suggestionAnnouncement();
     },
     keyed: true,
-    children: announced => _$ssr(_tmpl$42, _$escape(announced.text))
+    children: announced => _$ssr(_tmpl$43, _$escape(announced.text))
   })), _$escape(_$createComponent(Show, {
     get when() {
       return _$memo(() => !!!suggestionsOpen())() && commandStatus();
     },
-    children: status => _$ssr(_tmpl$43, _$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$44, _$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$44, _$escape(announced.text))
+    children: announced => _$ssr(_tmpl$45, _$escape(announced.text))
   })));
 }
 //# sourceMappingURL=ChatComposer.js.map