@k2b/ui 0.25.0 → 0.27.0

package/dist/ssr/chat/ChatComposer.js

@@ -17,33 +17,41 @@ 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 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "</div></div>"],
-  _tmpl$12 = ["<div role=\"status\" class=\"k2b-chat-composer__loading\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><strong>", "</strong></div>"],
-  _tmpl$13 = ["<div role=\"status\"><i class=\"ti ti-alert-circle\"></i> ", "</div>"],
-  _tmpl$14 = ["<div role=\"status\">", "</div>"],
-  _tmpl$15 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "", "", "", "</div></div>"],
-  _tmpl$16 = ["<div class=\"k2b-chat-composer-slot\"", "><div style=\"", "\"", ">", "</div>", "", "</div>"],
-  _tmpl$17 = ["<div class=\"k2b-chat-composer__hint\" aria-live=\"polite\">", "</div>"],
-  _tmpl$18 = ["<div class=\"k2b-chat-composer__attachments\" role=\"list\"", " tabindex=\"0\">", "</div>"],
-  _tmpl$19 = ["<div class=\"k2b-chat-composer__error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</div>"],
-  _tmpl$20 = ["<div class=\"k2b-chat-composer__row\">", "", "<div class=\"k2b-chat-composer__field\">", "<div class=\"k2b-chat-composer__field-tools\">", "", "", "</div></div>", "</div>"],
-  _tmpl$21 = ["<div class=\"k2b-chat-composer-shell\">", "<section class=\"", "\"", " role=\"group\"", ">", "", "", "", "</section></div>"],
-  _tmpl$22 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><span class=\"k2b-chat-composer__emoji-glyph\" aria-hidden=\"true\">", "</span><strong>", "</strong>", "</button>"],
-  _tmpl$23 = ["<small>:", ":</small>"],
-  _tmpl$24 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><i", " aria-hidden=\"true\"></i><strong>", "</strong><small>", "</small></button>"],
-  _tmpl$25 = ["<span class=\"k2b-chat-composer__hint-text\">", "</span>"],
-  _tmpl$26 = ["<span class=\"k2b-chat-composer__dictation\"", "><i", " aria-hidden=\"true\"></i><span>", "</span></span>"],
-  _tmpl$27 = ["<button type=\"button\" class=\"k2b-chat-composer__hint-action\"", ">", "</button>"],
-  _tmpl$28 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
-  _tmpl$29 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
-  _tmpl$30 = ["<img", ">"],
-  _tmpl$31 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
-  _tmpl$32 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
-  _tmpl$33 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
-  _tmpl$34 = ["<footer class=\"k2b-chat-composer__footer\">", "</footer>"],
-  _tmpl$35 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "", "", "</div>"],
-  _tmpl$36 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "", "</div>"];
-import { children, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
+  _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>"];
+import { batch, children, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Dropdown } from "../actions/Dropdown";
 import { Tooltip } from "../feedback/Tooltip";
 import { replaceTextareaRange } from "../inputs/editor-dom";
@@ -57,14 +65,25 @@ import { useSelectMessages } from "../inputs/select-messages";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { ChatContextUsage as ContextUsage } from "./ChatPrimitives";
-import { conversationEnterAction, executeChatAction, nextChatCommandIndex, reportChatFailure, runChatSubmission } from "./chat-behavior";
+import { chatCommandKey, conversationEnterAction, executeChatAction, nextChatCommandIndex, reportChatFailure, runChatSubmission } from "./chat-behavior";
 import { useChatMessages } from "./chat-messages";
+import { chatCommandListModel, parseChatCommandQuery } from "./command-search";
 import { chatCommandQuery, chatMentionSegments, reconcileChatMentions } from "./composer-document";
 const composerMaxInputHeight = 309;
+const commandDoneMs = 3_000;
 /** Emoji suggestions for a `:shortcode`, as many as fit the list without scrolling on a phone. */
 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. */
+
+/** 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. */
+
+/** Passed as the third argument to `searchCommands`. */
+
 /** The row stays short: what a chat message needs. Other Markdown, typed by hand, keeps working. */
 const formatTools = [{
   id: "bold",
@@ -107,7 +126,36 @@ export function ChatComposer(props) {
   const selectMessages = useSelectMessages();
   const commandListId = `k2b-chat-commands-${createUniqueId().replace(/[^A-Za-z0-9_-]/g, "-")}`;
   const formatGroupId = `${commandListId}-format`;
+  // Emoji suggestions keep their index-based selection and ids.
   const [selectedCommandIndex, setSelectedCommandIndex] = createSignal(0);
+  const [activeCommandKey, setActiveCommandKey] = createSignal();
+  const [commandMoved, setCommandMoved] = createSignal(false);
+  const commandIds = new Map();
+  let commandIdCounter = 0;
+  const commandOptionId = command => {
+    const key = chatCommandKey(command);
+    if (!commandIds.has(key)) commandIds.set(key, commandIdCounter++);
+    return `${commandListId}-c${commandIds.get(key)}`;
+  };
+  const [closedAt, setClosedAt] = createSignal();
+  // Where the pending native edit starts; a selection replaced as a whole starts at its beginning.
+  let inputStart;
+  const [commandStatus, setCommandStatus] = createSignal();
+  const [announcement, setAnnouncement] = createSignal();
+  let statusTimer;
+  let disposed = false;
+  const showCommandStatus = status => {
+    if (disposed) return;
+    clearTimeout(statusTimer);
+    setCommandStatus(status);
+    if (status?.tone === "done") {
+      statusTimer = setTimeout(() => setCommandStatus(undefined), commandDoneMs);
+    }
+  };
+  onCleanup(() => {
+    disposed = true;
+    clearTimeout(statusTimer);
+  });
   const [addingFiles, setAddingFiles] = createSignal(false);
   const [submitting, setSubmitting] = createSignal(false);
   let composerRef;
@@ -131,6 +179,9 @@ export function ChatComposer(props) {
   const [dismissed, setDismissed] = createSignal(false);
   const [composing, setComposing] = createSignal(false);
   const [searchResults, setSearchResults] = createSignal([]);
+  const [searchResultsQuery, setSearchResultsQuery] = createSignal();
+  const [searchResultsScope, setSearchResultsScope] = createSignal();
+  const [suggestionAnnouncement, setSuggestionAnnouncement] = createSignal();
   const [searching, setSearching] = createSignal(false);
   const [searchError, setSearchError] = createSignal(false);
   const [executing, setExecuting] = createSignal(false);
@@ -150,13 +201,51 @@ export function ChatComposer(props) {
     return token && index ? suggestEmoji(index, token.query, emojiSuggestionLimit) : [];
   });
   const emojiOpen = () => emojiMatches().length > 0;
-  const commandQuery = createMemo(() => dismissed() || composing() ? null : chatCommandQuery(props.value, caret(), selectionEnd()));
-  const commandMatches = createMemo(() => {
-    const token = commandQuery();
-    if (!token) return [];
-    return [...(props.commands ?? []).filter(command => command.name.toLowerCase().includes(token.query.toLowerCase())), ...searchResults()];
+  const caretCommandToken = createMemo(() => chatCommandQuery(props.value, caret(), selectionEnd()));
+  const caretCommandStart = createMemo(() => caretCommandToken()?.start);
+  // Retained server rows belong to one `/`: they go when it does or when another `/` starts.
+  createEffect(() => {
+    caretCommandStart();
+    setSearchResults([]);
+    setSearchResultsQuery(undefined);
+  });
+  // Escape closes the list for one `/` character, wherever the caret or selection goes; only that `/` going away ends it.
+  createEffect(() => {
+    const closed = closedAt();
+    if (closed !== undefined && props.value[closed] !== "/") setClosedAt(undefined);
+  });
+  const commandQuery = createMemo(() => {
+    const token = caretCommandToken();
+    return dismissed() || composing() || token?.start === closedAt() ? null : token;
+  });
+  const parsedCommandQuery = createMemo(() => parseChatCommandQuery(commandQuery()?.query ?? "", props.commandScopes ?? []));
+  const currentCommandScope = createMemo(() => parsedCommandQuery().scope?.id);
+  createEffect(() => {
+    currentCommandScope();
+    setSearchResults([]);
+    setSearchResultsQuery(undefined);
+  });
+  const localCommands = createMemo(() => props.commands ?? []);
+  const commandModel = createMemo(() => chatCommandListModel({
+    query: commandQuery()?.query ?? "",
+    scopes: props.commandScopes,
+    sections: props.commandSections,
+    commands: localCommands(),
+    searchResults: searchResultsScope() === parsedCommandQuery().scope?.id ? searchResults() : [],
+    searchResultsFresh: searchResultsQuery() === commandQuery()?.query && searchResultsScope() === parsedCommandQuery().scope?.id,
+    searchSettled: searchResultsQuery() !== undefined && searchResultsScope() === parsedCommandQuery().scope?.id,
+    searching: searching()
+  }));
+  const commandMatches = createMemo(() => commandQuery() ? commandModel().rows.map(row => row.command) : []);
+  const currentCommandQuery = createMemo(() => caretCommandToken()?.query);
+  // Arrow marking belongs to one token in one draft; another draft or `/` starts at the top row again.
+  createEffect(() => {
+    props.draftKey;
+    caretCommandStart();
+    currentCommandQuery();
+    setCommandMoved(false);
   });
-  const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (props.commands?.length || props.searchCommands));
+  const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (localCommands().length || props.searchCommands));
   const suggestionsOpen = () => commandsOpen() || emojiOpen();
   createEffect(() => {
     if (!suggestionsOpen()) return;
@@ -184,20 +273,33 @@ export function ChatComposer(props) {
     });
   });
   createEffect(() => {
+    props.draftKey;
     const token = commandQuery();
-    setSearchResults([]);
     setSearchError(false);
     if (!token || !props.searchCommands) {
       setSearching(false);
       return;
     }
+    const parsed = parsedCommandQuery();
     const abort = new AbortController();
     setSearching(true);
     const timer = setTimeout(() => {
-      Promise.resolve(props.searchCommands(token.query, abort.signal)).then(results => {
-        if (!abort.signal.aborted) setSearchResults(results);
+      Promise.resolve().then(() => props.searchCommands(parsed.query, abort.signal, {
+        scope: parsed.scope?.id
+      })).then(results => {
+        if (!abort.signal.aborted) {
+          batch(() => {
+            setSearchResults(results);
+            setSearchResultsQuery(token.query);
+            setSearchResultsScope(parsed.scope?.id);
+          });
+        }
       }).catch(() => {
-        if (!abort.signal.aborted) setSearchError(true);
+        if (!abort.signal.aborted) {
+          setSearchResults([]);
+          setSearchResultsQuery(undefined);
+          setSearchError(true);
+        }
       }).finally(() => {
         if (!abort.signal.aborted) setSearching(false);
       });
@@ -207,6 +309,52 @@ export function ChatComposer(props) {
       abort.abort();
     });
   });
+  let settledEmpty;
+  createEffect(() => {
+    const token = commandQuery();
+    if (!token || parsedCommandQuery().scope || searchError()) {
+      settledEmpty = undefined;
+      return;
+    }
+    const previous = settledEmpty;
+    if (/\s$/.test(token.query) && previous?.start === token.start && previous.query.trimEnd() === token.query.trimEnd()) {
+      setClosedAt(token.start);
+      return;
+    }
+    const settled = !searching() && (!props.searchCommands || searchResultsQuery() === token.query);
+    if (settled && commandModel().empty) {
+      settledEmpty = {
+        start: token.start,
+        query: token.query
+      };
+      if (/\s$/.test(token.query)) setClosedAt(token.start);
+    } else if (!searching()) settledEmpty = undefined;
+  });
+  let lastSuggestion;
+  createEffect(() => {
+    const model = commandModel();
+    const query = commandQuery()?.query;
+    if (!commandsOpen()) {
+      setSuggestionAnnouncement(undefined);
+      lastSuggestion = undefined;
+      return;
+    }
+    if (searching() || searchError() || props.searchCommands && searchResultsQuery() !== query) return;
+    const text = chatMessages().commandSuggestions({
+      count: model.rows.length
+    });
+    const timer = setTimeout(() => {
+      if (lastSuggestion && lastSuggestion.query === query && lastSuggestion.text === text) return;
+      lastSuggestion = {
+        query: query ?? "",
+        text
+      };
+      setSuggestionAnnouncement({
+        text
+      });
+    }, 350);
+    onCleanup(() => clearTimeout(timer));
+  });
   const history = [];
   let historyIndex = -1;
   createEffect(() => {
@@ -215,6 +363,11 @@ export function ChatComposer(props) {
       history.length = 0;
       historyIndex = -1;
       setDismissed(true);
+      setClosedAt(undefined);
+      setSearchResults([]);
+      setSearchResultsQuery(undefined);
+      // A failure belongs to the draft it happened in; success notes may follow a command into the chat it opened.
+      if (commandStatus()?.tone === "error") showCommandStatus();
     });
   });
   const snapshot = () => ({
@@ -233,6 +386,15 @@ export function ChatComposer(props) {
     }
   };
   const edit = (value, nextMentions = reconcileChatMentions(props.value, value, mentions())) => {
+    if (commandStatus()?.tone === "error") showCommandStatus();
+    // 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) {
+      let same = 0;
+      while (same <= closed && props.value[same] === value[same]) same++;
+      if (Math.min(same, inputStart ?? same) <= closed) setClosedAt(undefined);
+    }
+    inputStart = undefined;
     record();
     props.onValueChange(value);
     props.onMentionsChange?.(nextMentions);
@@ -252,10 +414,25 @@ export function ChatComposer(props) {
     });
   };
   const syncCaret = () => {
-    setCaret(textareaRef?.selectionStart ?? props.value.length);
-    setSelectionEnd(textareaRef?.selectionEnd ?? props.value.length);
+    // One update, so no effect sees a half-moved selection (it would read as "no `/` here" and reopen a closed list).
+    batch(() => {
+      setCaret(textareaRef?.selectionStart ?? props.value.length);
+      setSelectionEnd(textareaRef?.selectionEnd ?? props.value.length);
+    });
   };
-  const selectedCommand = () => commandMatches()[selectedCommandIndex()];
+  const selectedCommand = createMemo(() => {
+    const rows = commandMatches();
+    return commandMoved() && rows.find(command => chatCommandKey(command) === activeCommandKey()) || rows[0];
+  });
+  const selectedCommandKey = createMemo(() => {
+    const command = selectedCommand();
+    return command ? chatCommandKey(command) : undefined;
+  });
+  createEffect(() => {
+    if (!commandsOpen()) commandIds.clear();
+    selectedCommandKey();
+    setAnnouncement(undefined);
+  });
   const busy = () => Boolean(props.disabled || stopping() || state() === "submitting" || executing() || addingFiles());
   const blocked = () => busy() || submitting();
   /** The conversation field stays editable while a message is sent, so it keeps the focus and a phone its keyboard. */
@@ -318,21 +495,23 @@ export function ChatComposer(props) {
     }
   });
   createEffect(() => {
-    commandMatches();
     emojiMatches();
     setSelectedCommandIndex(0);
   });
   createEffect(() => {
-    const index = selectedCommandIndex();
-    commandMatches();
-    emojiMatches();
+    const command = selectedCommand();
+    const id = emojiOpen() ? `${commandListId}-${selectedCommandIndex()}` : command ? commandOptionId(command) : undefined;
     queueMicrotask(() => {
       const list = commandListRef;
-      const item = list?.querySelector(`[id="${commandListId}-${index}"]`);
+      const item = id ? list?.querySelector(`[id="${id}"]`) : undefined;
       if (!list || !item?.isConnected) return;
-      if (item.offsetTop < list.scrollTop) list.scrollTop = item.offsetTop;else if (item.offsetTop + item.offsetHeight > list.scrollTop + list.clientHeight) {
-        list.scrollTop = item.offsetTop + item.offsetHeight - list.clientHeight;
-      }
+      // Measured against the visible part of the list: a sticky section heading covers the top of it.
+      const heading = item.closest(".k2b-chat-composer__command-group")?.querySelector(".k2b-chat-composer__command-heading");
+      const listTop = list.getBoundingClientRect().top + list.clientTop;
+      const box = item.getBoundingClientRect();
+      const top = box.top - listTop - (heading?.offsetHeight ?? 0);
+      const bottom = box.bottom - listTop - list.clientHeight;
+      if (top < 0) list.scrollTop += top;else if (bottom > 0) list.scrollTop += bottom;
     });
   });
   createEffect(() => {
@@ -422,9 +601,26 @@ export function ChatComposer(props) {
       });
     }
   };
-  const executeCommand = async command => {
+  const narrowCommand = command => {
+    const scope = props.commandScopes?.find(scope => scope.id === command.scope);
+    const word = scope?.words[0];
     const token = commandQuery();
-    if (!token || command.disabled || blocked()) return;
+    if (!word || !token || !textareaRef) return false;
+    replaceTextareaRange(textareaRef, token.start + 1, token.end, `${word} `);
+    syncCaret();
+    return true;
+  };
+  const executeCommand = async (command, tab = false) => {
+    const token = commandQuery();
+    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.
+      setAnnouncement(command.reason ? {
+        text: command.reason
+      } : undefined);
+      return;
+    }
+    if (command.scope && (tab || !command.action && !command.mention) && narrowCommand(command)) return;
     const previous = snapshot();
     const key = props.draftKey;
     const replacement = command.mention ? command.mention.name + " " : "";
@@ -435,32 +631,66 @@ export function ChatComposer(props) {
       end: token.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],
+      index: historyIndex
+    };
     edit(nextValue, nextMentions);
     setDismissed(true);
     setExecuting(true);
     let submitRequested = false;
+    let restored = false;
+    const restore = () => {
+      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;
+      restored = true;
+    };
+    showCommandStatus(command.busyLabel ? {
+      tone: "busy",
+      text: command.busyLabel
+    } : undefined);
     try {
-      await command.action?.({
+      const result = await command.action?.({
         setValue: value => edit(value),
         submit: () => {
           submitRequested = true;
         },
         focus
       });
+      if (result === "cancelled") {
+        submitRequested = false;
+        restore();
+        showCommandStatus();
+      } else if (result) {
+        showCommandStatus({
+          tone: "done",
+          text: result.done
+        });
+      }
     } catch (error) {
       submitRequested = false;
-      if (props.draftKey === key && props.value === nextValue) {
-        props.onValueChange(previous.value);
-        props.onMentionsChange?.(previous.mentions);
-      }
-      props.onError?.(error);
+      restore();
+      // An unmounted composer has no status line left; the app's error channel keeps the failure from going silent.
+      if (disposed) props.onError?.(error);else showCommandStatus({
+        tone: "error",
+        text: error instanceof Error && error.message ? error.message : chatMessages().commandFailed
+      });
     } finally {
+      if (commandStatus()?.tone === "busy") showCommandStatus();
       setExecuting(false);
     }
     if (submitRequested && props.draftKey === key) await submit();
     queueMicrotask(() => {
       if (props.draftKey !== key) return;
-      textareaRef?.setSelectionRange(token.start + replacement.length, token.start + replacement.length);
+      if (restored || props.value === nextValue) {
+        const position = restored ? token.end : token.start + replacement.length;
+        textareaRef?.setSelectionRange(position, position);
+      }
       syncCaret();
       autoResize();
       focus();
@@ -538,19 +768,28 @@ export function ChatComposer(props) {
     if (commandsOpen()) {
       if (event.key === "ArrowUp" || event.key === "ArrowDown") {
         event.preventDefault();
-        setSelectedCommandIndex(index => nextChatCommandIndex(index, matches.length, event.key === "ArrowUp" ? -1 : 1));
+        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.
-      if ((event.key === "Tab" || event.key === "Enter" && !event.ctrlKey && !event.metaKey) && matches.length > 0) {
+      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();
-        if (command) void executeCommand(command);
+        // 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();
-        setDismissed(true);
+        setClosedAt(commandQuery()?.start);
         return;
       }
     }
@@ -964,7 +1203,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() ? emojiMatches()[selectedCommandIndex()] : selectedCommand()) ? `${_$escape(commandListId, true)}-${_$escape(selectedCommandIndex(), 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(), 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, {
     get when() {
       return conversation();
     },
@@ -972,25 +1211,47 @@ export function ChatComposer(props) {
       return _$ssr(_tmpl$0);
     }
   })));
-  return _$ssr(_tmpl$21, _$escape(_$createComponent(Show, {
+  const commandRowMap = createMemo(() => new Map(commandModel().rows.map(row => [row.command, row])));
+  const commandGroupKey = group => group.scopeTitle ? "scope" : group.section ? `section:${group.section.id}` : "flat";
+  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, {
+      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])]
+    })), _$escape(_$createComponent(Show, {
+      get when() {
+        return 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$24, _$escape(_$createComponent(Show, {
     get when() {
       return suggestionsOpen() || hasAccessory();
     },
     get children() {
-      return _$ssr(_tmpl$16, _$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$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, {
         get when() {
           return emojiOpen();
         },
         get children() {
-          return _$ssr(_tmpl$11, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().emojiSuggestions, true), false), _$escape(_$createComponent(For, {
+          return _$ssr(_tmpl$14, _$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$22, `${_$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$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, {
               get when() {
                 return entry.shortcodes[0];
               },
-              children: code => _$ssr(_tmpl$23, _$escape(code()))
+              children: code => _$ssr(_tmpl$26, _$escape(code()))
             })))
           })));
         }
@@ -999,31 +1260,70 @@ export function ChatComposer(props) {
           return commandsOpen();
         },
         get children() {
-          return _$ssr(_tmpl$15, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().commands, true), false), _$escape(_$createComponent(For, {
+          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, {
             get each() {
-              return commandMatches();
+              return commandModel().groups.map(commandGroupKey);
             },
-            children: (command, index) => _$ssr(_tmpl$24, `${_$escape(commandListId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(selectedCommandIndex(), true), false) + _$ssrAttribute("aria-disabled", _$escape(command.disabled, true), false) + _$ssrAttribute("data-active", index() === selectedCommandIndex() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(command.icon ?? "ti ti-slash", true), false), _$escape(command.label ?? `/${command.name}`), _$escape(command.description))
+            children: key => {
+              const group = createMemo(() => commandModel().groups.find(group => commandGroupKey(group) === key));
+              const headingId = () => `${commandListId}-g-${key === "scope" ? "scope" : props.commandSections?.findIndex(section => section.id === group()?.section?.id)}`;
+              const rows = () => group()?.rows.map(row => row.command) ?? [];
+              return _$createComponent(Show, {
+                when: key !== "flat",
+                get fallback() {
+                  return _$createComponent(For, {
+                    get each() {
+                      return rows();
+                    },
+                    children: renderCommandRow
+                  });
+                },
+                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, {
+                    get when() {
+                      return group()?.loading;
+                    },
+                    get children() {
+                      return _$ssr(_tmpl$27);
+                    }
+                  })), _$escape(_$createComponent(For, {
+                    get each() {
+                      return rows();
+                    },
+                    children: renderCommandRow
+                  })), _$escape(_$createComponent(Show, {
+                    get when() {
+                      return group()?.placeholder;
+                    },
+                    get children() {
+                      return _$ssr(_tmpl$28);
+                    }
+                  })));
+                }
+              });
+            }
           })), _$escape(_$createComponent(Show, {
             get when() {
-              return searching();
+              return _$memo(() => !!(searching() && commandMatches().length === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
             },
             get children() {
-              return _$ssr(_tmpl$12, _$escape(messages().loading));
+              return _$ssr(_tmpl$15, _$escape(messages().loading));
             }
           })), _$escape(_$createComponent(Show, {
             get when() {
               return searchError();
             },
             get children() {
-              return _$ssr(_tmpl$13, _$escape(messages().error));
+              return _$ssr(_tmpl$16, _$escape(messages().error));
             }
           })), _$escape(_$createComponent(Show, {
             get when() {
               return _$memo(() => !!(!searching() && !searchError()))() && commandMatches().length === 0;
             },
             get children() {
-              return _$ssr(_tmpl$14, _$escape(messages().noResults));
+              return _$ssr(_tmpl$17, !parsedCommandQuery().query.trim() ? _$escape(messages().noResults) : _$escape(chatMessages().commandsNothingFound({
+                query: parsedCommandQuery().query.trim()
+              })));
             }
           })));
         }
@@ -1034,18 +1334,18 @@ export function ChatComposer(props) {
       return showHint();
     },
     get children() {
-      return _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$20, _$escape(_$createComponent(Show, {
         get when() {
           return dictationStatus();
         },
         get fallback() {
-          return _$ssr(_tmpl$25, _$escape(hint()));
+          return _$ssr(_tmpl$30, _$escape(hint()));
         },
-        children: status => [_$ssr(_tmpl$26, _$ssrAttribute("data-state", _$escape(dictation() ?? undefined, true), false), _$ssrAttribute("class", _$escape(status().icon, true), false), _$escape(status().text)), _$createComponent(Show, {
+        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, {
           get when() {
             return _$memo(() => dictation() === "refined")() ? props.microphone?.onRestoreOriginal : undefined;
           },
-          children: restore => _$ssr(_tmpl$27, _$ssrAttribute("disabled", microphoneDisabled(), true), _$escape(chatMessages().restoreOriginal))
+          children: restore => _$ssr(_tmpl$32, _$ssrAttribute("disabled", microphoneDisabled(), true), _$escape(chatMessages().restoreOriginal))
         })]
       })));
     }
@@ -1054,16 +1354,16 @@ export function ChatComposer(props) {
       return attachments().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$18, _$ssrAttribute("aria-label", _$escape(chatMessages().attachments, true), false), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$21, _$ssrAttribute("aria-label", _$escape(chatMessages().attachments, true), false), _$escape(_$createComponent(For, {
         get each() {
           return attachments();
         },
-        children: attachment => _$ssr(_tmpl$29, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
+        children: attachment => _$ssr(_tmpl$34, `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$31, _$escape(_$createComponent(Show, {
+            return _$ssr(_tmpl$36, _$escape(_$createComponent(Show, {
               get when() {
                 return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
               },
@@ -1071,11 +1371,11 @@ export function ChatComposer(props) {
                 return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
               },
               get children() {
-                return _$ssr(_tmpl$30, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+                return _$ssr(_tmpl$35, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
               }
             })), _$escape(renderAttachmentCopy(attachment)));
           },
-          children: href => _$ssr(_tmpl$32, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().openInNewTab({
+          children: href => _$ssr(_tmpl$37, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().openInNewTab({
             name: attachment.name
           }), true), false), _$escape(_$createComponent(Show, {
             get when() {
@@ -1085,14 +1385,14 @@ export function ChatComposer(props) {
               return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
             },
             get children() {
-              return _$ssr(_tmpl$30, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+              return _$ssr(_tmpl$35, _$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$33, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
+          children: action => _$ssr(_tmpl$38, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
             get when() {
               return action().icon;
             },
@@ -1103,7 +1403,7 @@ export function ChatComposer(props) {
             return props.onAttachmentsChange;
           },
           get children() {
-            return _$ssr(_tmpl$28, _$ssrAttribute("aria-label", _$escape(selectMessages().removeNamed({
+            return _$ssr(_tmpl$33, _$ssrAttribute("aria-label", _$escape(selectMessages().removeNamed({
               name: attachment.name
             }), true), false), _$ssrAttribute("disabled", blocked(), true));
           }
@@ -1120,14 +1420,14 @@ export function ChatComposer(props) {
           return props.error;
         },
         get children() {
-          return _$ssr(_tmpl$19, _$escape(props.error));
+          return _$ssr(_tmpl$22, _$escape(props.error));
         }
-      }), formatRow(), _$ssr(_tmpl$34, _$escape(_$createComponent(Show, {
+      }), formatRow(), _$ssr(_tmpl$39, _$escape(_$createComponent(Show, {
         get when() {
           return props.footerContent;
         },
         get fallback() {
-          return [_$ssr(_tmpl$35, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
+          return [_$ssr(_tmpl$40, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
             get when() {
               return hasAddMenu();
             },
@@ -1168,7 +1468,7 @@ export function ChatComposer(props) {
                 }
               });
             }
-          })), _$escape(props.modelDetails)), _$ssr(_tmpl$36, _$escape(_$createComponent(For, {
+          })), _$escape(props.modelDetails)), _$ssr(_tmpl$41, _$escape(_$createComponent(For, {
             get each() {
               return props.contextActions;
             },
@@ -1218,9 +1518,9 @@ export function ChatComposer(props) {
           return props.error;
         },
         get children() {
-          return _$ssr(_tmpl$19, _$escape(props.error));
+          return _$ssr(_tmpl$22, _$escape(props.error));
         }
-      }), formatRow(), _$ssr(_tmpl$20, _$escape(attachControl()), _$escape(fileInput()), _$escape(field()), _$escape(formatToggle()), _$escape(emojiButton()), _$escape(microphoneControl()), _$escape(sendControl()))];
+      }), formatRow(), _$ssr(_tmpl$23, _$escape(attachControl()), _$escape(fileInput()), _$escape(field()), _$escape(formatToggle()), _$escape(emojiButton()), _$escape(microphoneControl()), _$escape(sendControl()))];
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -1241,6 +1541,23 @@ export function ChatComposer(props) {
       },
       onDrop: files => void runFiles(files)
     })
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return suggestionAnnouncement();
+    },
+    keyed: true,
+    children: announced => _$ssr(_tmpl$42, _$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))
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!suggestionsOpen())() && announcement();
+    },
+    keyed: true,
+    children: announced => _$ssr(_tmpl$44, _$escape(announced.text))
   })));
 }
 //# sourceMappingURL=ChatComposer.js.map