@k2b/ui 0.29.0 → 0.30.0

package/dist/ssr/chat/ChatComposer.js

@@ -17,42 +17,44 @@ var _tmpl$ = ["<span><strong", ">", "</strong></span>"],
   _tmpl$0 = "<textarea class=\"k2b-chat-composer__measure\" rows=\"1\" tabindex=\"-1\" aria-hidden=\"true\" readonly></textarea>",
   _tmpl$1 = ["<div class=\"k2b-chat-composer__input\" role=\"group\"", ">", "<textarea class=\"", "\" rows=\"1\"", "", "></textarea>", "</div>"],
   _tmpl$10 = ["<span class=\"", "\">", "</span>"],
-  _tmpl$11 = ["<small", ">", "</small>"],
+  _tmpl$11 = ["<span class=\"k2b-chat-composer__command-detail\"", "><small", ">", "</small><small", "><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>", "</small></span>"],
   _tmpl$12 = ["<span class=\"k2b-chat-composer__command-end\"><i class=\"ti ti-check\" aria-hidden=\"true\"></i><span class=\"k2b-sr-only\">", "</span></span>"],
   _tmpl$13 = ["<button class=\"k2b-chat-composer__command\"", " type=\"button\" role=\"option\" tabindex=\"-1\"", "><i", " aria-hidden=\"true\"></i><span class=\"k2b-chat-composer__command-text\"><strong>", "</strong>", "</span>", "</button>"],
   _tmpl$14 = ["<b>", "</b>"],
-  _tmpl$15 = ["<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";
+  _tmpl$15 = ["<small", ">", "</small>"],
+  _tmpl$16 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "</div></div>"],
+  _tmpl$17 = ["<label class=\"k2b-chat-composer__command-search\"><i class=\"ti ti-search\" aria-hidden=\"true\"></i><input type=\"text\" role=\"combobox\"", " aria-autocomplete=\"list\"", " aria-expanded=\"true\"", " autocomplete=\"off\" autocapitalize=\"off\" spellcheck=\"false\"", "></label>"],
+  _tmpl$18 = ["<div role=\"status\" class=\"k2b-chat-composer__loading\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><strong>", "</strong></div>"],
+  _tmpl$19 = ["<div role=\"status\"><i class=\"ti ti-alert-circle\"></i> ", "</div>"],
+  _tmpl$20 = ["<div role=\"status\">", "</div>"],
+  _tmpl$21 = ["<div class=\"k2b-chat-composer-accessory\" data-commands", ">", "<div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "", "", "", "", "</div></div>"],
+  _tmpl$22 = ["<div class=\"k2b-chat-composer-slot\"", "><div style=\"", "\"", ">", "</div>", "", "</div>"],
+  _tmpl$23 = ["<div class=\"k2b-chat-composer__hint\" aria-live=\"polite\">", "</div>"],
+  _tmpl$24 = ["<div class=\"k2b-chat-composer__attachments\" role=\"list\"", " tabindex=\"0\">", "</div>"],
+  _tmpl$25 = ["<div class=\"k2b-chat-composer__error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</div>"],
+  _tmpl$26 = ["<div class=\"k2b-chat-composer__row\">", "", "<div class=\"k2b-chat-composer__field\">", "<div class=\"k2b-chat-composer__field-tools\">", "", "", "</div></div>", "</div>"],
+  _tmpl$27 = ["<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$28 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><span class=\"k2b-chat-composer__emoji-glyph\" aria-hidden=\"true\">", "</span><strong>", "</strong>", "</button>"],
+  _tmpl$29 = ["<small>:", ":</small>"],
+  _tmpl$30 = "<i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i>",
+  _tmpl$31 = ["<div class=\"k2b-chat-composer__command-group\" role=\"group\"", "><div class=\"k2b-chat-composer__command-heading\"", " role=\"presentation\"><span>", "</span>", "</div>", "", "</div>"],
+  _tmpl$32 = "<div class=\"k2b-chat-composer__command-placeholder\" aria-hidden=\"true\"><span></span><span><span></span><span></span></span></div>",
+  _tmpl$33 = ["<span class=\"k2b-chat-composer__hint-text\">", "</span>"],
+  _tmpl$34 = ["<span class=\"k2b-chat-composer__dictation\"", "><i", " aria-hidden=\"true\"></i><span>", "</span></span>"],
+  _tmpl$35 = ["<button type=\"button\" class=\"k2b-chat-composer__hint-action\"", ">", "</button>"],
+  _tmpl$36 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$37 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
+  _tmpl$38 = ["<img", ">"],
+  _tmpl$39 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
+  _tmpl$40 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
+  _tmpl$41 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
+  _tmpl$42 = ["<footer class=\"k2b-chat-composer__footer\">", "</footer>"],
+  _tmpl$43 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "", "", "</div>"],
+  _tmpl$44 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "", "</div>"],
+  _tmpl$45 = ["<span>", "</span>"],
+  _tmpl$46 = ["<div class=\"k2b-chat-composer__status-line\"", "><i aria-hidden=\"true\"", "></i><span>", "</span></div>"],
+  _tmpl$47 = ["<span class=\"k2b-sr-only\">", "</span>"];
+import { batch, children, createEffect, createMemo, createSignal, createUniqueId, For, Index, on, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Dropdown } from "../actions/Dropdown";
 import { dialogHistorySettled, holdDialogHistory } from "../feedback/dialog-core";
 import { Tooltip } from "../feedback/Tooltip";
@@ -83,6 +85,13 @@ const composerUndoBudgetChars = 1_000_000;
  * dialog: `mention` takes the token's place exactly as a `mention` row does, and Ctrl/⌘+Z brings the token back.
  */
 
+/** The draft as a successful `open` leaves it: without the `/…` token, with its references moved along. Save this one. */
+
+/**
+ * How an `open` row ends: on success (`void`) the token leaves as for an action; `"cancelled"` changes nothing; `failed`
+ * keeps the list open and the draft unchanged, and its text replaces the row's description until the row runs again.
+ */
+
 /** A fixed place in the slash list. Sections keep the given order, also while searching. */
 
 /** First-word narrowing; Tab writes `words[0]` followed by a space. */
@@ -171,6 +180,17 @@ export function ChatComposer(props) {
     return `${commandListId}-c${commandIds.get(key)}`;
   };
   const [closedAt, setClosedAt] = createSignal();
+  /** The list opened from "+": the field's selection when "+" was pressed, and the search field's text. */
+  const [addSearch, setAddSearch] = createSignal();
+  const [addQuery, setAddQuery] = createSignal("");
+  let addSearchRef;
+  let addButtonRef;
+  let addComposing = false;
+  /** The `open` row running now, and why `open` rows failed in this opening, by row key. */
+  const [openingRow, setOpeningRow] = createSignal();
+  const [openFailures, setOpenFailures] = createSignal({});
+  /** Cancels the `open` row running now; `key` follows announced draft moves, `label` is its busy line. */
+  let openingRun;
   // Where the pending native edit starts; a selection replaced as a whole starts at its beginning.
   let inputStart;
   let inputEnd;
@@ -275,7 +295,17 @@ export function ChatComposer(props) {
     return token && index ? suggestEmoji(index, token.query, emojiSuggestionLimit) : [];
   });
   const emojiOpen = () => emojiMatches().length > 0;
-  const caretCommandToken = createMemo(() => chatCommandQuery(props.value, caret(), selectionEnd()));
+  // From "+", the search field's text is the query of an empty token at the field's stored caret.
+  const caretCommandToken = createMemo(() => {
+    const search = addSearch();
+    if (!search) return chatCommandQuery(props.value, caret(), selectionEnd());
+    const at = Math.min(search.end, props.value.length);
+    return {
+      start: at,
+      end: at,
+      query: addQuery()
+    };
+  });
   const caretCommandStart = createMemo(() => caretCommandToken()?.start);
   // Retained server rows belong to one `/`: they go when it does or when another `/` starts.
   createEffect(() => {
@@ -290,6 +320,7 @@ export function ChatComposer(props) {
   });
   const commandQuery = createMemo(() => {
     const token = caretCommandToken();
+    if (addSearch()) return token;
     return dismissed() || composing() || token?.start === closedAt() ? null : token;
   });
   const openingStart = createMemo(() => commandQuery()?.start);
@@ -298,6 +329,12 @@ export function ChatComposer(props) {
     const start = openingStart();
     if (start !== undefined) setCommandOpening(opening => opening + 1);
   });
+  // A failed `open` row says so for the rest of its list opening.
+  createEffect(() => {
+    props.draftKey;
+    commandOpening();
+    setOpenFailures({});
+  });
   const parsedCommandQuery = createMemo(() => parseChatCommandQuery(commandQuery()?.query ?? "", props.commandScopes ?? []));
   const commandFallbackRow = createMemo(() => {
     const parsed = parsedCommandQuery();
@@ -313,7 +350,23 @@ export function ChatComposer(props) {
     setSearchResults([]);
     setSearchResultsQuery(undefined);
   });
-  const localCommands = createMemo(() => props.commands ?? []);
+  // Rows of a `fixedWhileOpen` section are the ones it had when this `/` opened the list; later ones wait for the next
+  // `/`. A retry row starts another opening in the same open list, so it does not count.
+  const fixedCommandKeys = createMemo(() => {
+    props.draftKey;
+    if (openingStart() === undefined) return undefined;
+    return untrack(() => {
+      const fixed = new Set((props.commandSections ?? []).filter(section => section.fixedWhileOpen).map(section => section.id));
+      return fixed.size ? new Set((props.commands ?? []).filter(command => fixed.has(command.section ?? "")).map(chatCommandKey)) : undefined;
+    });
+  });
+  const localCommands = createMemo(() => {
+    const commands = props.commands ?? [];
+    const keys = fixedCommandKeys();
+    if (!keys) return commands;
+    const fixed = new Set((props.commandSections ?? []).filter(section => section.fixedWhileOpen).map(section => section.id));
+    return commands.filter(command => !fixed.has(command.section ?? "") || keys.has(chatCommandKey(command)));
+  });
   const commandModel = createMemo(() => chatCommandListModel({
     query: commandQuery()?.query ?? "",
     scopes: props.commandScopes,
@@ -337,12 +390,86 @@ export function ChatComposer(props) {
     setCommandMoved(false);
   });
   const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (localCommands().length || props.searchCommands || commandFallbackRow()));
-  const commandSheetHeld = createMemo(() => commandsOpen() && isTouchOnly());
+  // Rows that arrive for a pending section never move a visible row of the overview: until the person types, the list
+  // keeps the height it had with its placeholders and scrolls what does not fit. A list below its maximum height grows
+  // upward from the field, so a change of height alone would move its first row. While searching, the rows arrive
+  // with the search's own answer, which changes the list anyway.
+  // From "+", the whole panel keeps the height it opened with instead.
+  const commandsPending = createMemo(() => commandsOpen() && !addSearch() && !parsedCommandQuery().scope && !parsedCommandQuery().query.trim() && commandModel().groups.some(group => group.pendingRows > 0));
+  // Typing, another opening or closing the list lets it size itself again.
+  const commandListSizeKey = createMemo(() => commandsOpen() ? `${commandOpening()}\u0000${caretCommandToken()?.query}` : undefined);
+  // The list's height with its placeholders, for the size key it was measured under.
+  let pendingList;
+  createEffect(() => {
+    const list = commandListRef;
+    if (!commandsPending() || !list || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      pendingList = {
+        height: list.getBoundingClientRect().height,
+        key: untrack(commandListSizeKey)
+      };
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(list);
+    onCleanup(() => observer.disconnect());
+  });
+  createEffect(on(commandsPending, (pending, wasPending) => {
+    const held = pendingList;
+    pendingList = undefined;
+    // Only rows arriving hold the list; the person's typing or closing it does not.
+    if (pending || !wasPending || !held || held.key !== commandListSizeKey() || !commandListRef?.isConnected) return;
+    commandListRef.style.height = `${held.height}px`;
+    commandListRef.setAttribute("data-held", "");
+  }));
+  createEffect(on(commandListSizeKey, () => {
+    commandListRef?.style.removeProperty("height");
+    commandListRef?.removeAttribute("data-held");
+  }, {
+    defer: true
+  }));
+  // Escape, a press outside, or moving the caret away closes the list; while an `open` row runs, that cancels it, so
+  // nothing opens after the person backed out. Success ends the opening and closes the list in one step. A new draft
+  // cancels too, unless the opener announced that next move with `follow()`: its busy line moves to the status line,
+  // and Escape still cancels there. Any later unannounced draft change cancels.
+  createEffect(() => {
+    const draftKey = props.draftKey;
+    const open = commandsOpen();
+    const row = openingRow();
+    const run = openingRun;
+    if (!run || row === undefined) return;
+    if (draftKey !== run.key) {
+      if (run.follow) {
+        run.follow = false;
+        run.key = draftKey;
+        run.moved = true;
+        showCommandStatus({
+          tone: "busy",
+          text: run.label
+        });
+      } else run.controller.abort();
+      return;
+    }
+    if (!open && !run.moved) run.controller.abort();
+  });
+  onCleanup(() => openingRun?.controller.abort());
+  // An `open` row gives the sheet's Back entry up first, so it never races the navigation it starts.
+  const commandSheetHeld = createMemo(() => commandsOpen() && isTouchOnly() && openingRow() === undefined);
   createEffect(() => {
     if (!commandSheetHeld()) return;
-    onCleanup(holdDialogHistory(() => setClosedAt(commandQuery()?.start)));
+    onCleanup(holdDialogHistory(() => closeCommandList()));
   });
   const suggestionsOpen = () => commandsOpen() || emojiOpen();
+  const fieldOwnsList = () => suggestionsOpen() && !addSearch();
+  // From "+", the panel keeps the height it opened with while the person types or rows arrive, so neither the search
+  // field nor the first row moves; what does not fit scrolls. The space above the field still bounds it.
+  const addPanelOpen = createMemo(() => addSearch() !== undefined && commandsOpen());
+  createEffect(() => {
+    const accessory = addPanelOpen() ? commandListRef?.parentElement : undefined;
+    if (!accessory) return;
+    const frame = requestAnimationFrame(() => accessory.style.setProperty("--k2b-chat-command-held", `${accessory.getBoundingClientRect().height}px`));
+    onCleanup(() => cancelAnimationFrame(frame));
+  });
   createEffect(() => {
     if (!suggestionsOpen()) return;
     let disposed = false;
@@ -370,10 +497,13 @@ export function ChatComposer(props) {
       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`);
+      // From its place in the slot, not its box: the sheet opened from "+" rises into place, and a box measured during
+      // that animation would include its offset.
+      const bottom = slot.bottom - (Number.parseFloat(window.getComputedStyle(accessory).bottom) || 0);
+      // On the accessory, so a panel opened from "+" is bounded as a whole, with its search field.
+      accessory.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-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`);
     };
@@ -391,11 +521,29 @@ export function ChatComposer(props) {
   // 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.
+  // A list opened from "+" is a menu: any press outside it closes only the list, with every pointer, and the field gets
+  // its focus back. "+" itself toggles with its click; a press in the field closes the list and lands there as usual.
   createEffect(() => {
     if (!commandsOpen()) return;
     const onPointerDown = event => {
       const target = event.target;
-      if (!(target instanceof Node) || commandListRef?.contains(target) || textareaRef?.parentElement?.contains(target)) return;
+      if (!(target instanceof Node) || commandListRef?.parentElement?.contains(target)) return;
+      if (addSearch()) {
+        if (addButtonRef?.contains(target) && !addButtonRef.disabled) return;
+        if (textareaRef?.parentElement?.contains(target)) {
+          // The field takes the focus before the search field goes, so a phone keeps its keyboard; the press itself
+          // then places the caret.
+          textareaRef.focus({
+            preventScroll: true
+          });
+          endAddSearch(false);
+          return;
+        }
+        swallowTap(event);
+        endAddSearch(true);
+        return;
+      }
+      if (textareaRef?.parentElement?.contains(target)) return;
       setClosedAt(commandQuery()?.start);
       if (isTouchOnly() && !shellRef?.contains(target)) swallowTap(event);
     };
@@ -445,9 +593,10 @@ export function ChatComposer(props) {
     });
   });
   let settledEmpty;
+  // A space after "Nothing found" ends the `/…` as plain text; a search field opened from "+" just keeps its text.
   createEffect(() => {
     const token = commandQuery();
-    if (!token || parsedCommandQuery().scope || searchError()) {
+    if (!token || addSearch() || parsedCommandQuery().scope || searchError()) {
       settledEmpty = undefined;
       return;
     }
@@ -498,6 +647,7 @@ export function ChatComposer(props) {
       history.length = 0;
       historyIndex = -1;
       finishModelSelection(null);
+      endAddSearch(false);
       setDismissed(true);
       setClosedAt(undefined);
       setSearchResults([]);
@@ -546,6 +696,8 @@ export function ChatComposer(props) {
     setDismissed(false);
   };
   const restoreHistory = direction => {
+    // A field that only stays enabled to keep focus, while an `open` row runs, is not edited by undo either.
+    if (editBlocked()) return;
     record();
     const next = history[historyIndex + direction];
     if (!next) return;
@@ -564,6 +716,45 @@ export function ChatComposer(props) {
       setSelectionEnd(textareaRef?.selectionEnd ?? props.value.length);
     });
   };
+  /** Closes the list opened from "+"; `refocus` gives the field its focus and the selection it had when "+" was pressed. */
+  const endAddSearch = refocus => {
+    const search = addSearch();
+    if (!search) return;
+    addComposing = false;
+    batch(() => {
+      setAddSearch(undefined);
+      setAddQuery("");
+    });
+    if (!refocus || !textareaRef) return;
+    const length = textareaRef.value.length;
+    textareaRef.focus();
+    textareaRef.setSelectionRange(Math.min(search.start, length), Math.min(search.end, length));
+    syncCaret();
+  };
+  /** Escape, Back, a press outside: the list closes and the text stays. */
+  const closeCommandList = (refocus = true) => {
+    if (addSearch()) endAddSearch(refocus);else setClosedAt(commandQuery()?.start);
+  };
+  const toggleAddSearch = () => {
+    if (addSearch()) {
+      endAddSearch(true);
+      return;
+    }
+    if (blocked() || !textareaRef) return;
+    const start = textareaRef.selectionStart;
+    const end = textareaRef.selectionEnd;
+    batch(() => {
+      // Emoji suggestions for a `:shortcode` at the caret give way; they would hold the list closed.
+      setDismissed(true);
+      setAddQuery("");
+      setAddSearch({
+        start,
+        end
+      });
+    });
+    // Within the press, so a phone opens its keyboard for the search field.
+    addSearchRef?.focus();
+  };
   const selectedCommand = createMemo(() => {
     const rows = commandMatches();
     return commandMoved() && rows.find(command => chatCommandKey(command) === activeCommandKey()) || rows[0];
@@ -587,6 +778,8 @@ export function ChatComposer(props) {
   const canSubmit = () => !submitting() && submittable();
   const canSelectFiles = () => Boolean(props.fileSelection && !props.fileSelection.disabled && !running() && !blocked());
   const hasAddMenu = () => Boolean(props.fileSelection || props.menuActions?.length);
+  /** "+" opens the slash list, as long as there is one; otherwise it stays the add menu. */
+  const addOpensCommands = () => Boolean(props.addOpensCommands && (props.commands?.length || props.searchCommands));
   const hasContextUsage = () => {
     if (props.contextPopupAction) return true;
     const context = props.contextUsage;
@@ -723,7 +916,7 @@ export function ChatComposer(props) {
    * 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 => {
+  const attachFilesFromCommand = (token, selection) => {
     if (!canSelectFiles()) return;
     const key = props.draftKey;
     const previous = snapshot();
@@ -742,7 +935,7 @@ export function ChatComposer(props) {
       history.splice(0, history.length, ...previousHistory.entries);
       historyIndex = previousHistory.index;
       queueMicrotask(() => {
-        textareaRef?.setSelectionRange(token.end, token.end);
+        textareaRef?.setSelectionRange(selection?.start ?? token.end, selection?.end ?? token.end);
         syncCaret();
         focus();
       });
@@ -774,7 +967,7 @@ export function ChatComposer(props) {
     setSubmitting(true);
     try {
       if (isTouchOnly()) {
-        if (commandSheetHeld()) setClosedAt(commandQuery()?.start);
+        if (commandSheetHeld()) closeCommandList(false);
         // 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.
@@ -826,6 +1019,10 @@ export function ChatComposer(props) {
     const word = scope?.words[0];
     const token = commandQuery();
     if (!word || !token || !textareaRef) return false;
+    if (addSearch()) {
+      setAddQuery(`${word} `);
+      return true;
+    }
     replaceTextareaRange(textareaRef, token.start + 1, token.end, `${word} `);
     syncCaret();
     return true;
@@ -833,6 +1030,8 @@ export function ChatComposer(props) {
   const executeCommand = async (command, tab = false) => {
     const token = commandQuery();
     const heldHistory = commandSheetHeld();
+    const addSelection = addSearch();
+    const fromAdd = addSelection !== undefined;
     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.
@@ -848,19 +1047,33 @@ export function ChatComposer(props) {
     }
     if (command.scope && (tab || !command.action && !command.mention && !command.attachFiles) && narrowCommand(command)) return;
     if (command.attachFiles) {
-      attachFilesFromCommand(token);
+      if (!canSelectFiles()) return;
+      // The field has the focus before the selection opens, so closing it without a file comes back there.
+      endAddSearch(true);
+      attachFilesFromCommand(token, addSelection);
       return;
     }
+    if (command.open) {
+      await openFromCommand(command, command.open, token);
+      return;
+    }
+    // The field has the focus again before an action opens a dialog, so the dialog gives it back there.
+    endAddSearch(true);
+    // From "+" a reference joins the text at the caret, apart from a word right before it.
+    const lead = value => fromAdd && token.start > 0 && !/\s/.test(value[token.start - 1] ?? "") ? " " : "";
     const previous = snapshot();
     const key = props.draftKey;
-    const replacement = command.mention ? command.mention.name + " " : "";
+    const replacement = command.mention ? lead(props.value) + command.mention.name + " " : "";
     const nextValue = props.value.slice(0, token.start) + replacement + props.value.slice(token.end);
     const nextMentions = reconcileChatMentions(props.value, nextValue, mentions());
-    if (command.mention) nextMentions.push({
-      start: token.start,
-      end: token.start + command.mention.name.length,
-      attachment: command.mention
-    });
+    if (command.mention) {
+      const start = token.start + lead(props.value).length;
+      nextMentions.push({
+        start,
+        end: start + command.mention.name.length,
+        attachment: command.mention
+      });
+    }
     // A cancelled or failed command leaves no undo step behind: restoring puts the history back as well.
     const previousHistory = {
       entries: [...history],
@@ -910,16 +1123,17 @@ export function ChatComposer(props) {
           restore();
           restored = false;
           const name = result.mention.name;
-          const withMention = previous.value.slice(0, token.start) + name + " " + previous.value.slice(token.end);
+          const start = token.start + lead(previous.value).length;
+          const withMention = previous.value.slice(0, token.start) + lead(previous.value) + name + " " + previous.value.slice(token.end);
           edit(withMention, [...reconcileChatMentions(previous.value, withMention, previous.mentions), {
-            start: token.start,
-            end: token.start + name.length,
+            start,
+            end: start + name.length,
             attachment: result.mention
           }]);
           setDismissed(true);
           mentioned = {
             value: withMention,
-            caret: token.start + name.length + 1
+            caret: start + name.length + 1
           };
           showCommandStatus();
         } else {
@@ -953,7 +1167,7 @@ export function ChatComposer(props) {
       if (props.draftKey !== key) return;
       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);
+        textareaRef?.setSelectionRange(restored && addSelection ? addSelection.start : position, restored && addSelection ? addSelection.end : position);
       }
       syncCaret();
       autoResize();
@@ -961,6 +1175,110 @@ export function ChatComposer(props) {
     });
   };
 
+  /**
+   * Runs an `open` row with the token and the list in place. Success removes the token in one undo step; `failed`
+   * stays in the row while the list is still there, otherwise the status line says it, so it never ends in silence.
+   */
+  const openFromCommand = async (command, open, token) => {
+    const key = props.draftKey;
+    const row = chatCommandKey(command);
+    const value = props.value;
+    const nextValue = value.slice(0, token.start) + value.slice(token.end);
+    const nextMentions = reconcileChatMentions(value, nextValue, mentions());
+    // Still the same draft and `/…`, so the row is where the person chose it.
+    const inPlace = () => !disposed && props.draftKey === key && props.value === value && commandQuery()?.start === token.start;
+    const heldHistory = commandSheetHeld();
+    // Closing the list or leaving the composer cancels the opening; the row ends at once, without waiting for it.
+    const controller = new AbortController();
+    const run = {
+      controller,
+      key,
+      label: command.busyLabel ?? chatMessages().commandOpening,
+      follow: false,
+      moved: false
+    };
+    openingRun = run;
+    const cancelled = new Promise(resolve => controller.signal.addEventListener("abort", () => resolve("cancelled"), {
+      once: true
+    }));
+    setOpenFailures(({
+      [row]: _,
+      ...rest
+    }) => rest);
+    setOpeningRow(row);
+    setExecuting(true);
+    // An opening that ends without leaving, by failure, rejection or cancelling, also aborts `signal`, so the opener
+    // can put back what it saved without the token.
+    const finish = (left = false) => {
+      if (!left) controller.abort();
+      if (openingRun === run) openingRun = undefined;
+      if (commandStatus()?.tone === "busy") showCommandStatus();
+      setOpeningRow(undefined);
+      setExecuting(false);
+    };
+    let result;
+    try {
+      if (heldHistory) {
+        await dialogHistorySettled();
+        if (!inPlace()) {
+          finish();
+          return;
+        }
+      }
+      result = await Promise.race([open({
+        value: nextValue,
+        mentions: nextMentions
+      }, controller.signal, () => {
+        run.follow = true;
+      }), cancelled]);
+    } catch (error) {
+      finish();
+      if (disposed) {
+        props.onError?.(error);
+        return;
+      }
+      if (inPlace()) closeCommandList();
+      showCommandStatus({
+        tone: "error",
+        text: error instanceof Error && error.message ? error.message : chatMessages().commandFailed
+      });
+      return;
+    }
+    if (!result) {
+      // Success: the token leaves and the list closes in the same step that ends the opening, so a phone sheet never
+      // takes its Back entry again while the page navigates.
+      batch(() => {
+        if (!disposed && props.draftKey === key && props.value === value) {
+          edit(nextValue, nextMentions);
+          setDismissed(true);
+        }
+        endAddSearch(!disposed && props.draftKey === key);
+        finish(true);
+      });
+      queueMicrotask(() => {
+        if (disposed || props.draftKey !== key || props.value !== nextValue) return;
+        textareaRef?.setSelectionRange(token.start, token.start);
+        syncCaret();
+        autoResize();
+      });
+      return;
+    }
+    finish();
+    if (result === "cancelled") return;
+    if (inPlace()) {
+      setOpenFailures(failures => ({
+        ...failures,
+        [row]: result.failed
+      }));
+      setAnnouncement({
+        text: result.failed
+      });
+    } else if (disposed) props.onError?.(new Error(result.failed));else showCommandStatus({
+      tone: "error",
+      text: result.failed
+    });
+  };
+
   /** Replaces `start`–`end` with the emoji through the editing path, so the browser's undo restores the shortcode. */
   const insertEmoji = (start, end, emoji) => {
     if (!textareaRef || editBlocked()) return;
@@ -1001,9 +1319,66 @@ export function ChatComposer(props) {
       if (untouched && textarea.matches(":focus")) convert(loaded);
     }, () => undefined);
   };
+
+  /** Moving through and choosing in the command list, from the field or from the search field opened by "+". */
+  const commandListKey = event => {
+    if (!commandsOpen()) return false;
+    const matches = commandMatches();
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      const index = matches.indexOf(selectedCommand());
+      const next = matches[nextChatCommandIndex(index, matches.length, event.key === "ArrowUp" ? -1 : 1)];
+      setActiveCommandKey(next ? chatCommandKey(next) : undefined);
+      setCommandMoved(true);
+      setAnnouncement(undefined);
+      return true;
+    }
+    // Ctrl/⌘+Enter sends, also while suggestions are open.
+    const plain = !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey;
+    if (plain && (event.key === "Tab" || event.key === "Enter") && matches.length > 0) {
+      event.preventDefault();
+      const command = selectedCommand();
+      // A server row answering an earlier query may no longer match; wait for fresh results. Local rows match now.
+      const row = commandModel().rows.find(row => chatCommandKey(row.command) === selectedCommandKey());
+      const staleServerRow = row?.server && (searchResultsQuery() !== commandQuery()?.query || searchResultsScope() !== parsedCommandQuery().scope?.id);
+      if (staleServerRow) return true;
+      if (command) void executeCommand(command, event.key === "Tab");
+      return true;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeCommandList();
+      return true;
+    }
+    return false;
+  };
+  const onAddSearchKeyDown = event => {
+    // Nothing chooses while an input method composes, as in the field.
+    if (event.isComposing || event.keyCode === 229 || addComposing) return;
+    if (event.key === "Escape" && openingRun) {
+      event.preventDefault();
+      openingRun.controller.abort();
+      endAddSearch(true);
+      return;
+    }
+    if (commandListKey(event)) return;
+    // Ctrl/⌘+Enter sends from the search field as from the field, with the list closed first.
+    if (event.key === "Enter" && (event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey) {
+      event.preventDefault();
+      endAddSearch(true);
+      void submit();
+    }
+  };
   const onKeyDown = event => {
     // WebKit ends the composition before the keydown of the Enter that confirms it; that keydown keeps keyCode 229.
     if (event.isComposing || event.keyCode === 229 || composing()) return;
+    // Escape cancels a running `open` row, also once its list is gone because the draft moved to a new chat.
+    if (event.key === "Escape" && openingRun) {
+      event.preventDefault();
+      openingRun.controller.abort();
+      if (commandsOpen()) closeCommandList();
+      return;
+    }
     if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
       event.preventDefault();
       restoreHistory(event.shiftKey ? 1 : -1);
@@ -1028,38 +1403,11 @@ export function ChatComposer(props) {
         return;
       }
     }
-    const matches = commandMatches();
-    if (commandsOpen()) {
-      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-        event.preventDefault();
-        const index = matches.indexOf(selectedCommand());
-        const next = matches[nextChatCommandIndex(index, matches.length, event.key === "ArrowUp" ? -1 : 1)];
-        setActiveCommandKey(next ? chatCommandKey(next) : undefined);
-        setCommandMoved(true);
-        setAnnouncement(undefined);
-        return;
-      }
-      // Ctrl/⌘+Enter sends, also while suggestions are open.
-      const plain = !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey;
-      if (plain && (event.key === "Tab" || event.key === "Enter") && matches.length > 0) {
-        event.preventDefault();
-        const command = selectedCommand();
-        // A server row answering an earlier query may no longer match; wait for fresh results. Local rows match now.
-        const row = commandModel().rows.find(row => chatCommandKey(row.command) === selectedCommandKey());
-        const staleServerRow = row?.server && (searchResultsQuery() !== commandQuery()?.query || searchResultsScope() !== parsedCommandQuery().scope?.id);
-        if (staleServerRow) return;
-        if (command) void executeCommand(command, event.key === "Tab");
-        return;
-      }
-      if (event.key === "Escape") {
-        event.preventDefault();
-        setClosedAt(commandQuery()?.start);
-        return;
-      }
-    }
+    if (commandListKey(event)) return;
     const format = props.formatting && textareaRef ? formatShortcut(event) : undefined;
     if (format && textareaRef) {
       event.preventDefault();
+      if (editBlocked()) return;
       format.run(textareaRef);
       return;
     }
@@ -1182,8 +1530,46 @@ export function ChatComposer(props) {
     }
   });
 
+  /** "+" as the way to the slash list on keyboards without a handy "/". */
+  const addSearchButton = (extraClass = "") => _$createComponent(Tooltip.Trigger, {
+    type: "button",
+    "class": `k2b-chat-composer__icon-action${extraClass}`,
+    get ["aria-label"]() {
+      return chatMessages().addMenu;
+    },
+    "aria-haspopup": "listbox",
+    get ["aria-expanded"]() {
+      return addSearch() !== undefined;
+    },
+    get ["aria-controls"]() {
+      return addSearch() ? commandListId : undefined;
+    },
+    get content() {
+      return chatMessages().addMenu;
+    },
+    get disabled() {
+      return blocked();
+    },
+    onMouseDown: keepFieldFocus,
+    onClick: toggleAddSearch,
+    get children() {
+      return _$ssr(_tmpl$3, _$ssrAttribute("class", addingFiles() ? "ti ti-loader-2 k2b-spin" : "ti ti-plus", false));
+    }
+  });
+
   /** The conversation's attach button opens the file choice directly; other actions turn it into the add menu. */
   const attachControl = () => _$createComponent(Show, {
+    get when() {
+      return !addOpensCommands();
+    },
+    get fallback() {
+      return addSearchButton(" k2b-chat-composer__attach");
+    },
+    get children() {
+      return attachChoice();
+    }
+  });
+  const attachChoice = () => _$createComponent(Show, {
     get when() {
       return props.menuActions?.length;
     },
@@ -1467,7 +1853,7 @@ export function ChatComposer(props) {
         children: part => _$ssr(_tmpl$10, Boolean(part.mention) ? "k2b-chat-composer__mention" : "", _$escape(part.text))
       })));
     }
-  })), mentions().length > 0 ? "k2b-chat-composer__textarea--highlighted" : "", _$ssrAttribute("value", _$escape(props.value, true), false), _$ssrAttribute("disabled", editBlocked(), true) + _$ssrAttribute("enterkeyhint", conversation() ? "enter" : _$escape(undefined, true), false) + _$ssrAttribute("placeholder", _$escape(props.placeholder ?? (running() ? chatMessages().addGuidance : conversation() ? chatMessages().writeConversationMessage : chatMessages().writeMessage), true), false) + _$ssrAttribute("aria-label", _$escape(props.inputLabel ?? messages().message, true), false) + _$ssrAttribute("role", suggestionsOpen() ? "combobox" : _$escape(undefined, true), false) + _$ssrAttribute("aria-autocomplete", suggestionsOpen() ? "list" : _$escape(undefined, true), false) + _$ssrAttribute("aria-controls", suggestionsOpen() ? _$escape(commandListId, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-expanded", suggestionsOpen() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-activedescendant", emojiOpen() ? `${_$escape(commandListId, true)}-${_$escape(selectedCommandIndex(), true)}` : selectedCommand() ? _$escape(commandOptionId(selectedCommand()), true) : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+  })), mentions().length > 0 ? "k2b-chat-composer__textarea--highlighted" : "", _$ssrAttribute("value", _$escape(props.value, true), false), _$ssrAttribute("disabled", editBlocked() && openingRow() === undefined, true) + _$ssrAttribute("readonly", _$escape(openingRow(), true) !== _$escape(undefined, true), false) + _$ssrAttribute("enterkeyhint", conversation() ? "enter" : _$escape(undefined, true), false) + _$ssrAttribute("placeholder", _$escape(props.placeholder ?? (running() ? chatMessages().addGuidance : conversation() ? chatMessages().writeConversationMessage : chatMessages().writeMessage), true), false) + _$ssrAttribute("aria-label", _$escape(props.inputLabel ?? messages().message, true), false) + _$ssrAttribute("role", fieldOwnsList() ? "combobox" : _$escape(undefined, true), false) + _$ssrAttribute("aria-autocomplete", fieldOwnsList() ? "list" : _$escape(undefined, true), false) + _$ssrAttribute("aria-controls", fieldOwnsList() ? _$escape(commandListId, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-expanded", fieldOwnsList() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-activedescendant", !fieldOwnsList() ? _$escape(undefined, true) : emojiOpen() ? `${_$escape(commandListId, true)}-${_$escape(selectedCommandIndex(), true)}` : selectedCommand() ? _$escape(commandOptionId(selectedCommand()), true) : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return conversation();
     },
@@ -1480,7 +1866,9 @@ export function ChatComposer(props) {
   const renderCommandRow = command => {
     const highlight = () => commandRowMap().get(command)?.highlight;
     const title = () => command.label ?? command.name;
-    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, {
+    const opening = () => openingRow() === chatCommandKey(command);
+    const failure = () => openFailures()[chatCommandKey(command)];
+    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-busy", opening() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-describedby", command.reason ? `${_$escape(commandOptionId(command), true)}-reason` : _$escape(undefined, true), false) + _$ssrAttribute("data-reason", command.reason ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-active", selectedCommand() === command ? "true" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(command.icon ?? "ti ti-slash", true), false), _$escape(_$createComponent(Show, {
       get when() {
         return highlight();
       },
@@ -1490,10 +1878,20 @@ export function ChatComposer(props) {
       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;
+        return _$memo(() => !!command.open)() && !command.reason;
+      },
+      get fallback() {
+        return _$createComponent(Show, {
+          get when() {
+            return command.reason ?? command.description;
+          },
+          get children() {
+            return _$ssr(_tmpl$15, _$ssrAttribute("id", command.reason ? `${_$escape(commandOptionId(command), true)}-reason` : _$escape(undefined, true), false), _$escape(command.reason ?? command.description));
+          }
+        });
       },
       get children() {
-        return _$ssr(_tmpl$11, _$ssrAttribute("id", command.reason ? `${_$escape(commandOptionId(command), true)}-reason` : _$escape(undefined, true), false), _$escape(command.reason ?? command.description));
+        return _$ssr(_tmpl$11, _$ssrAttribute("data-state", opening() ? "busy" : failure() ? "failed" : _$escape(undefined, true), false), _$ssrAttribute("aria-hidden", opening() ? "true" : _$escape(undefined, true), false), _$escape(failure() ?? command.description), _$ssrAttribute("aria-hidden", opening() ? _$escape(undefined, true) : "true", false), _$escape(command.busyLabel ?? chatMessages().commandOpening));
       }
     })), _$escape(_$createComponent(Show, {
       get when() {
@@ -1504,25 +1902,25 @@ export function ChatComposer(props) {
       }
     })));
   };
-  return _$ssr(_tmpl$25, _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$27, _$escape(_$createComponent(Show, {
     get when() {
       return suggestionsOpen() || hasAccessory();
     },
     get children() {
-      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, {
+      return _$ssr(_tmpl$22, _$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$15, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().emojiSuggestions, true), false), _$escape(_$createComponent(For, {
+          return _$ssr(_tmpl$16, _$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$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, {
+            children: (entry, index) => _$ssr(_tmpl$28, `${_$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$27, _$escape(code()))
+              children: code => _$ssr(_tmpl$29, _$escape(code()))
             })))
           })));
         }
@@ -1531,7 +1929,14 @@ export function ChatComposer(props) {
           return commandsOpen();
         },
         get children() {
-          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, {
+          return _$ssr(_tmpl$21, _$ssrAttribute("data-search", addSearch() ? "" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+            get when() {
+              return addSearch();
+            },
+            get children() {
+              return _$ssr(_tmpl$17, _$ssrAttribute("value", _$escape(addQuery(), true), false) + _$ssrAttribute("placeholder", _$escape(chatMessages().commandSearch, true), false) + _$ssrAttribute("aria-label", _$escape(chatMessages().commandSearchLabel, true), false), _$ssrAttribute("aria-controls", _$escape(commandListId, true), false), _$ssrAttribute("aria-activedescendant", selectedCommand() ? _$escape(commandOptionId(selectedCommand()), true) : _$escape(undefined, true), false), _$ssrAttribute("readonly", _$escape(openingRow(), true) !== _$escape(undefined, true), false));
+            }
+          })), _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().commands, true), false) + _$ssrAttribute("aria-busy", searching() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
             get each() {
               return commandModel().groups.map(commandGroupKey);
             },
@@ -1550,25 +1955,25 @@ export function ChatComposer(props) {
                   });
                 },
                 get children() {
-                  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, {
+                  return _$ssr(_tmpl$31, _$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$28);
+                      return _$ssr(_tmpl$30);
                     }
                   })), _$escape(_$createComponent(For, {
                     get each() {
                       return rows();
                     },
                     children: renderCommandRow
-                  })), _$escape(_$createComponent(Show, {
-                    get when() {
-                      return group()?.placeholder;
+                  })), _$escape(_$createComponent(Index, {
+                    get each() {
+                      return Array.from({
+                        length: Math.max(group()?.placeholder ? 1 : 0, group()?.pendingRows ?? 0)
+                      });
                     },
-                    get children() {
-                      return _$ssr(_tmpl$29);
-                    }
+                    children: () => _$ssr(_tmpl$32)
                   })));
                 }
               });
@@ -1578,21 +1983,21 @@ export function ChatComposer(props) {
               return _$memo(() => !!(searching() && foundCommandCount() === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
             },
             get children() {
-              return _$ssr(_tmpl$16, _$escape(messages().loading));
+              return _$ssr(_tmpl$18, _$escape(messages().loading));
             }
           })), _$escape(_$createComponent(Show, {
             get when() {
               return searchError();
             },
             get children() {
-              return _$ssr(_tmpl$17, _$escape(messages().error));
+              return _$ssr(_tmpl$19, _$escape(messages().error));
             }
           })), _$escape(_$createComponent(Show, {
             get when() {
-              return _$memo(() => !!(!searching() && !searchError()))() && foundCommandCount() === 0;
+              return _$memo(() => !!(!searching() && !searchError() && foundCommandCount() === 0))() && !commandModel().groups.some(group => group.pendingRows);
             },
             get children() {
-              return _$ssr(_tmpl$18, !parsedCommandQuery().query.trim() ? _$escape(messages().noResults) : _$escape(chatMessages().commandsNothingFound({
+              return _$ssr(_tmpl$20, !parsedCommandQuery().query.trim() ? _$escape(messages().noResults) : _$escape(chatMessages().commandsNothingFound({
                 query: parsedCommandQuery().query.trim()
               })));
             }
@@ -1611,18 +2016,18 @@ export function ChatComposer(props) {
       return showHint();
     },
     get children() {
-      return _$ssr(_tmpl$21, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$23, _$escape(_$createComponent(Show, {
         get when() {
           return dictationStatus();
         },
         get fallback() {
-          return _$ssr(_tmpl$31, _$escape(hint()));
+          return _$ssr(_tmpl$33, _$escape(hint()));
         },
-        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, {
+        children: status => [_$ssr(_tmpl$34, _$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$33, _$ssrAttribute("disabled", microphoneDisabled(), true), _$escape(chatMessages().restoreOriginal))
+          children: restore => _$ssr(_tmpl$35, _$ssrAttribute("disabled", microphoneDisabled(), true), _$escape(chatMessages().restoreOriginal))
         })]
       })));
     }
@@ -1631,16 +2036,16 @@ export function ChatComposer(props) {
       return attachments().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$22, _$ssrAttribute("aria-label", _$escape(chatMessages().attachments, true), false), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$24, _$ssrAttribute("aria-label", _$escape(chatMessages().attachments, true), false), _$escape(_$createComponent(For, {
         get each() {
           return attachments();
         },
-        children: attachment => _$ssr(_tmpl$35, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
+        children: attachment => _$ssr(_tmpl$37, `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$37, _$escape(_$createComponent(Show, {
+            return _$ssr(_tmpl$39, _$escape(_$createComponent(Show, {
               get when() {
                 return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
               },
@@ -1648,11 +2053,11 @@ export function ChatComposer(props) {
                 return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
               },
               get children() {
-                return _$ssr(_tmpl$36, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+                return _$ssr(_tmpl$38, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
               }
             })), _$escape(renderAttachmentCopy(attachment)));
           },
-          children: href => _$ssr(_tmpl$38, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().openInNewTab({
+          children: href => _$ssr(_tmpl$40, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().openInNewTab({
             name: attachment.name
           }), true), false), _$escape(_$createComponent(Show, {
             get when() {
@@ -1662,14 +2067,14 @@ export function ChatComposer(props) {
               return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
             },
             get children() {
-              return _$ssr(_tmpl$36, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+              return _$ssr(_tmpl$38, _$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$39, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
+          children: action => _$ssr(_tmpl$41, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
             get when() {
               return action().icon;
             },
@@ -1680,7 +2085,7 @@ export function ChatComposer(props) {
             return props.onAttachmentsChange;
           },
           get children() {
-            return _$ssr(_tmpl$34, _$ssrAttribute("aria-label", _$escape(selectMessages().removeNamed({
+            return _$ssr(_tmpl$36, _$ssrAttribute("aria-label", _$escape(selectMessages().removeNamed({
               name: attachment.name
             }), true), false), _$ssrAttribute("disabled", blocked(), true));
           }
@@ -1697,19 +2102,29 @@ export function ChatComposer(props) {
           return props.error;
         },
         get children() {
-          return _$ssr(_tmpl$23, _$escape(props.error));
+          return _$ssr(_tmpl$25, _$escape(props.error));
         }
-      }), formatRow(), _$ssr(_tmpl$40, _$escape(_$createComponent(Show, {
+      }), formatRow(), _$ssr(_tmpl$42, _$escape(_$createComponent(Show, {
         get when() {
           return footer();
         },
         get fallback() {
-          return [_$ssr(_tmpl$41, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
+          return [_$ssr(_tmpl$43, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
             get when() {
-              return hasAddMenu();
+              return addOpensCommands();
+            },
+            get fallback() {
+              return _$createComponent(Show, {
+                get when() {
+                  return hasAddMenu();
+                },
+                get children() {
+                  return addMenu("ti ti-plus");
+                }
+              });
             },
             get children() {
-              return addMenu("ti ti-plus");
+              return addSearchButton();
             }
           })), _$escape(fileInput()), _$escape(formatToggle()), _$escape(emojiButton()), _$escape(_$createComponent(Show, {
             get when() {
@@ -1757,7 +2172,7 @@ export function ChatComposer(props) {
                 }
               });
             }
-          })), _$escape(props.modelDetails)), _$ssr(_tmpl$42, _$escape(_$createComponent(For, {
+          })), _$escape(props.modelDetails)), _$ssr(_tmpl$44, _$escape(_$createComponent(For, {
             get each() {
               return props.contextActions;
             },
@@ -1809,9 +2224,9 @@ export function ChatComposer(props) {
           return props.error;
         },
         get children() {
-          return _$ssr(_tmpl$23, _$escape(props.error));
+          return _$ssr(_tmpl$25, _$escape(props.error));
         }
-      }), formatRow(), _$ssr(_tmpl$24, _$escape(attachControl()), _$escape(fileInput()), _$escape(field()), _$escape(formatToggle()), _$escape(emojiButton()), _$escape(microphoneControl()), _$escape(sendControl()))];
+      }), formatRow(), _$ssr(_tmpl$26, _$escape(attachControl()), _$escape(fileInput()), _$escape(field()), _$escape(formatToggle()), _$escape(emojiButton()), _$escape(microphoneControl()), _$escape(sendControl()))];
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -1837,18 +2252,18 @@ export function ChatComposer(props) {
       return suggestionAnnouncement();
     },
     keyed: true,
-    children: announced => _$ssr(_tmpl$43, _$escape(announced.text))
+    children: announced => _$ssr(_tmpl$45, _$escape(announced.text))
   })), _$escape(_$createComponent(Show, {
     get when() {
       return _$memo(() => !!!suggestionsOpen())() && commandStatus();
     },
-    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))
+    children: status => _$ssr(_tmpl$46, _$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$45, _$escape(announced.text))
+    children: announced => _$ssr(_tmpl$47, _$escape(announced.text))
   })));
 }
 //# sourceMappingURL=ChatComposer.js.map