@k2b/ui 0.28.0 → 0.29.0

package/dist/browser/chat/ChatComposer.js

@@ -33,7 +33,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span><strong>`),
   _tmpl$16 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
   _tmpl$17 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
   _tmpl$18 = /*#__PURE__*/_$template(`<div role=status>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory data-commands><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory data-commands><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
   _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/><!$><!/>`),
   _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__hint aria-live=polite>`),
   _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
@@ -85,7 +85,10 @@ const emojiSuggestionLimit = 8;
 // Keep editor undo text within approximately 2 MiB, plus the current edit.
 const composerUndoBudgetChars = 1_000_000;
 
-/** An action can cancel and restore its token, or report a short completion message. */
+/**
+ * An action can cancel and restore its token, report a short completion message, or hand back a reference chosen in a
+ * dialog: `mention` takes the token's place exactly as a `mention` row does, and Ctrl/⌘+Z brings the token back.
+ */
 
 /** A fixed place in the slash list. Sections keep the given order, also while searching. */
 
@@ -303,6 +306,14 @@ export function ChatComposer(props) {
     if (start !== undefined) setCommandOpening(opening => opening + 1);
   });
   const parsedCommandQuery = createMemo(() => parseChatCommandQuery(commandQuery()?.query ?? "", props.commandScopes ?? []));
+  const commandFallbackRow = createMemo(() => {
+    const parsed = parsedCommandQuery();
+    const query = parsed.query.trim();
+    return commandQuery() && (query || parsed.scope) ? props.commandFallback?.({
+      query,
+      scope: parsed.scope?.id
+    }) : undefined;
+  });
   const currentCommandScope = createMemo(() => parsedCommandQuery().scope?.id);
   createEffect(() => {
     currentCommandScope();
@@ -318,9 +329,12 @@ export function ChatComposer(props) {
     searchResults: searchResultsScope() === parsedCommandQuery().scope?.id ? searchResults() : [],
     searchResultsFresh: searchResultsQuery() === commandQuery()?.query && searchResultsScope() === parsedCommandQuery().scope?.id,
     searchSettled: searchResultsQuery() !== undefined && searchResultsScope() === parsedCommandQuery().scope?.id,
-    searching: searching()
+    searching: searching(),
+    fallback: commandFallbackRow()
   }));
   const commandMatches = createMemo(() => commandQuery() ? commandModel().rows.map(row => row.command) : []);
+  /** Rows that matched; an unscoped fallback row only follows them. */
+  const foundCommandCount = () => commandMatches().length - (commandModel().fallback ? 1 : 0);
   const currentCommandQuery = createMemo(() => caretCommandToken()?.query);
   // Arrow marking belongs to one token in one draft; another draft or `/` starts at the top row again.
   createEffect(() => {
@@ -329,7 +343,7 @@ export function ChatComposer(props) {
     currentCommandQuery();
     setCommandMoved(false);
   });
-  const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (localCommands().length || props.searchCommands));
+  const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (localCommands().length || props.searchCommands || commandFallbackRow()));
   const commandSheetHeld = createMemo(() => commandsOpen() && isTouchOnly());
   createEffect(() => {
     if (!commandSheetHeld()) return;
@@ -679,12 +693,78 @@ export function ChatComposer(props) {
     _$effect(() => _$setAttribute(_el$2, "title", attachment.name));
     return _el$;
   })();
-  const chooseFiles = () => {
+
+  /** `onNothing` runs when the person closes the selection without a file. */
+  const chooseFiles = onNothing => {
     const selection = props.fileSelection;
-    if (!selection?.choose) return fileInputRef?.click();
-    selection.choose().then(
+    if (!selection?.choose) {
+      const input = fileInputRef;
+      if (input && onNothing) {
+        const done = new AbortController();
+        input.addEventListener("cancel", () => {
+          done.abort();
+          onNothing();
+        }, {
+          signal: done.signal
+        });
+        input.addEventListener("change", () => done.abort(), {
+          signal: done.signal
+        });
+      }
+      return input?.click();
+    }
+    const failed = error => {
+      onNothing?.();
+      (props.fileSelection?.onError ?? props.onError)?.(error);
+    };
+    let chosen;
+    try {
+      chosen = selection.choose();
+    } catch (error) {
+      failed(error);
+      return;
+    }
+    chosen.then(
     // A single-file composer keeps the first chosen file, as its file dialog and drops do.
-    files => void runFiles(selection.multiple === false ? files.slice(0, 1) : files), error => (props.fileSelection?.onError ?? props.onError)?.(error));
+    files => {
+      if (files.length === 0) onNothing?.();else void runFiles(selection.multiple === false ? files.slice(0, 1) : files);
+    }, failed);
+  };
+
+  /**
+   * "Attach files" from the slash list: the token leaves as one edit, and the selection opens synchronously, inside the
+   * key or click that chose the row, because the device's file dialog needs that activation. Closing the selection
+   * without a file brings the token back, unless the draft changed meanwhile.
+   */
+  const attachFilesFromCommand = token => {
+    if (!canSelectFiles()) return;
+    const key = props.draftKey;
+    const previous = snapshot();
+    const previousHistory = {
+      entries: [...history],
+      index: historyIndex
+    };
+    const nextValue = props.value.slice(0, token.start) + props.value.slice(token.end);
+    edit(nextValue, reconcileChatMentions(props.value, nextValue, mentions()));
+    setDismissed(true);
+    chooseFiles(() => {
+      if (props.draftKey !== key || props.value !== nextValue) return;
+      setDismissed(true);
+      props.onValueChange(previous.value);
+      props.onMentionsChange?.(previous.mentions);
+      history.splice(0, history.length, ...previousHistory.entries);
+      historyIndex = previousHistory.index;
+      queueMicrotask(() => {
+        textareaRef?.setSelectionRange(token.end, token.end);
+        syncCaret();
+        focus();
+      });
+    });
+    queueMicrotask(() => {
+      if (props.draftKey !== key || props.value !== nextValue) return;
+      textareaRef?.setSelectionRange(token.start, token.start);
+      syncCaret();
+    });
   };
   const runFiles = async files => {
     if (!canSelectFiles()) return;
@@ -779,7 +859,11 @@ export function ChatComposer(props) {
       setCommandOpening(opening => opening + 1);
       return;
     }
-    if (command.scope && (tab || !command.action && !command.mention) && narrowCommand(command)) return;
+    if (command.scope && (tab || !command.action && !command.mention && !command.attachFiles) && narrowCommand(command)) return;
+    if (command.attachFiles) {
+      attachFilesFromCommand(token);
+      return;
+    }
     const previous = snapshot();
     const key = props.draftKey;
     const replacement = command.mention ? command.mention.name + " " : "";
@@ -800,6 +884,7 @@ export function ChatComposer(props) {
     setExecuting(true);
     let submitRequested = false;
     let restored = false;
+    let mentioned;
     const restore = () => {
       if (props.draftKey !== key || props.value !== nextValue) return;
       setDismissed(true);
@@ -832,6 +917,32 @@ export function ChatComposer(props) {
         submitRequested = false;
         restore();
         showCommandStatus();
+      } else if (result && "mention" in result) {
+        // One undo step from the token to the reference, as if the row had been a reference itself.
+        if (props.draftKey === key && props.value === nextValue) {
+          restore();
+          restored = false;
+          const name = result.mention.name;
+          const withMention = previous.value.slice(0, token.start) + name + " " + previous.value.slice(token.end);
+          edit(withMention, [...reconcileChatMentions(previous.value, withMention, previous.mentions), {
+            start: token.start,
+            end: token.start + name.length,
+            attachment: result.mention
+          }]);
+          setDismissed(true);
+          mentioned = {
+            value: withMention,
+            caret: token.start + name.length + 1
+          };
+          showCommandStatus();
+        } else {
+          // The pick is lost; say so, also when the draft moved to another key meanwhile (such as a new chat saved
+          // while the dialog was open), so it never ends in silence.
+          showCommandStatus({
+            tone: "error",
+            text: chatMessages().commandDraftChanged
+          });
+        }
       } else if (result) {
         showCommandStatus({
           tone: "done",
@@ -853,8 +964,8 @@ export function ChatComposer(props) {
     if (submitRequested && props.draftKey === key) await submit();
     queueMicrotask(() => {
       if (props.draftKey !== key) return;
-      if (restored || props.value === nextValue) {
-        const position = restored ? token.end : token.start + replacement.length;
+      if (restored || props.value === nextValue || mentioned && props.value === mentioned.value) {
+        const position = restored ? token.end : mentioned?.caret ?? token.start + replacement.length;
         textareaRef?.setSelectionRange(position, position);
       }
       syncCaret();
@@ -1124,7 +1235,7 @@ export function ChatComposer(props) {
           get disabled() {
             return !canSelectFiles();
           },
-          onClick: chooseFiles,
+          onClick: () => chooseFiles(),
           get children() {
             var _el$5 = _$getNextElement(_tmpl$3);
             _$effect(() => _$className(_el$5, addingFiles() ? "ti ti-loader-2 k2b-spin" : "ti ti-plus"));
@@ -1614,23 +1725,23 @@ export function ChatComposer(props) {
   };
   return (() => {
     var _el$42 = _$getNextElement(_tmpl$25),
-      _el$108 = _el$42.firstChild,
-      [_el$109, _co$27] = _$getNextMarker(_el$108.nextSibling),
-      _el$70 = _el$109.nextSibling,
-      _el$94 = _el$70.firstChild,
-      [_el$95, _co$21] = _$getNextMarker(_el$94.nextSibling),
-      _el$96 = _el$95.nextSibling,
+      _el$110 = _el$42.firstChild,
+      [_el$111, _co$28] = _$getNextMarker(_el$110.nextSibling),
+      _el$72 = _el$111.nextSibling,
+      _el$96 = _el$72.firstChild,
       [_el$97, _co$22] = _$getNextMarker(_el$96.nextSibling),
       _el$98 = _el$97.nextSibling,
       [_el$99, _co$23] = _$getNextMarker(_el$98.nextSibling),
       _el$100 = _el$99.nextSibling,
       [_el$101, _co$24] = _$getNextMarker(_el$100.nextSibling),
-      _el$102 = _el$70.nextSibling,
-      _el$103 = _el$102.nextSibling,
-      _el$104 = _el$103.firstChild,
-      [_el$105, _co$25] = _$getNextMarker(_el$104.nextSibling),
-      _el$106 = _el$105.nextSibling,
-      [_el$107, _co$26] = _$getNextMarker(_el$106.nextSibling);
+      _el$102 = _el$101.nextSibling,
+      [_el$103, _co$25] = _$getNextMarker(_el$102.nextSibling),
+      _el$104 = _el$72.nextSibling,
+      _el$105 = _el$104.nextSibling,
+      _el$106 = _el$105.firstChild,
+      [_el$107, _co$26] = _$getNextMarker(_el$106.nextSibling),
+      _el$108 = _el$107.nextSibling,
+      [_el$109, _co$27] = _$getNextMarker(_el$108.nextSibling);
     var _ref$6 = shellRef;
     typeof _ref$6 === "function" ? _$use(_ref$6, _el$42) : shellRef = _el$42;
     _$insert(_el$42, _$createComponent(Show, {
@@ -1640,10 +1751,10 @@ export function ChatComposer(props) {
       get children() {
         var _el$43 = _$getNextElement(_tmpl$20),
           _el$44 = _el$43.firstChild,
-          _el$66 = _el$44.nextSibling,
-          [_el$67, _co$11] = _$getNextMarker(_el$66.nextSibling),
-          _el$68 = _el$67.nextSibling,
-          [_el$69, _co$12] = _$getNextMarker(_el$68.nextSibling);
+          _el$68 = _el$44.nextSibling,
+          [_el$69, _co$12] = _$getNextMarker(_el$68.nextSibling),
+          _el$70 = _el$69.nextSibling,
+          [_el$71, _co$13] = _$getNextMarker(_el$70.nextSibling);
         _$insert(_el$44, accessory);
         _$insert(_el$43, _$createComponent(Show, {
           get when() {
@@ -1660,38 +1771,38 @@ export function ChatComposer(props) {
                 return emojiMatches();
               },
               children: (entry, index) => (() => {
-                var _el$110 = _$getNextElement(_tmpl$26),
-                  _el$111 = _el$110.firstChild,
-                  _el$112 = _el$111.nextSibling,
-                  _el$113 = _el$112.nextSibling,
-                  [_el$114, _co$28] = _$getNextMarker(_el$113.nextSibling);
-                _el$110.$$click = () => pickEmojiSuggestion(index());
-                _el$110.$$mousedown = keepFieldFocus;
-                _$insert(_el$111, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
-                _$insert(_el$112, () => emojiName(entry, locale()));
-                _$insert(_el$110, _$createComponent(Show, {
+                var _el$112 = _$getNextElement(_tmpl$26),
+                  _el$113 = _el$112.firstChild,
+                  _el$114 = _el$113.nextSibling,
+                  _el$115 = _el$114.nextSibling,
+                  [_el$116, _co$29] = _$getNextMarker(_el$115.nextSibling);
+                _el$112.$$click = () => pickEmojiSuggestion(index());
+                _el$112.$$mousedown = keepFieldFocus;
+                _$insert(_el$113, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
+                _$insert(_el$114, () => emojiName(entry, locale()));
+                _$insert(_el$112, _$createComponent(Show, {
                   get when() {
                     return entry.shortcodes[0];
                   },
                   children: code => (() => {
-                    var _el$115 = _$getNextElement(_tmpl$27),
-                      _el$116 = _el$115.firstChild,
-                      _el$118 = _el$116.nextSibling,
-                      [_el$119, _co$29] = _$getNextMarker(_el$118.nextSibling),
-                      _el$117 = _el$119.nextSibling;
-                    _$insert(_el$115, code, _el$119, _co$29);
-                    return _el$115;
+                    var _el$117 = _$getNextElement(_tmpl$27),
+                      _el$118 = _el$117.firstChild,
+                      _el$120 = _el$118.nextSibling,
+                      [_el$121, _co$30] = _$getNextMarker(_el$120.nextSibling),
+                      _el$119 = _el$121.nextSibling;
+                    _$insert(_el$117, code, _el$121, _co$30);
+                    return _el$117;
                   })()
-                }), _el$114, _co$28);
+                }), _el$116, _co$29);
                 _$effect(_p$ => {
                   var _v$28 = `${commandListId}-${index()}`,
                     _v$29 = index() === selectedCommandIndex(),
                     _v$30 = emojiName(entry, locale()),
                     _v$31 = index() === selectedCommandIndex() ? "true" : undefined;
-                  _v$28 !== _p$.e && _$setAttribute(_el$110, "id", _p$.e = _v$28);
-                  _v$29 !== _p$.t && _$setAttribute(_el$110, "aria-selected", _p$.t = _v$29);
-                  _v$30 !== _p$.a && _$setAttribute(_el$110, "aria-label", _p$.a = _v$30);
-                  _v$31 !== _p$.o && _$setAttribute(_el$110, "data-active", _p$.o = _v$31);
+                  _v$28 !== _p$.e && _$setAttribute(_el$112, "id", _p$.e = _v$28);
+                  _v$29 !== _p$.t && _$setAttribute(_el$112, "aria-selected", _p$.t = _v$29);
+                  _v$30 !== _p$.a && _$setAttribute(_el$112, "aria-label", _p$.a = _v$30);
+                  _v$31 !== _p$.o && _$setAttribute(_el$112, "data-active", _p$.o = _v$31);
                   return _p$;
                 }, {
                   e: undefined,
@@ -1700,13 +1811,13 @@ export function ChatComposer(props) {
                   o: undefined
                 });
                 _$runHydrationEvents();
-                return _el$110;
+                return _el$112;
               })()
             }));
             _$effect(() => _$setAttribute(_el$46, "aria-label", chatMessages().emojiSuggestions));
             return _el$45;
           }
-        }), _el$67, _co$11);
+        }), _el$69, _co$12);
         _$insert(_el$43, _$createComponent(Show, {
           get when() {
             return commandsOpen();
@@ -1721,7 +1832,9 @@ export function ChatComposer(props) {
               _el$62 = _el$61.nextSibling,
               [_el$63, _co$1] = _$getNextMarker(_el$62.nextSibling),
               _el$64 = _el$63.nextSibling,
-              [_el$65, _co$10] = _$getNextMarker(_el$64.nextSibling);
+              [_el$65, _co$10] = _$getNextMarker(_el$64.nextSibling),
+              _el$66 = _el$65.nextSibling,
+              [_el$67, _co$11] = _$getNextMarker(_el$66.nextSibling);
             var _ref$8 = commandListRef;
             typeof _ref$8 === "function" ? _$use(_ref$8, _el$48) : commandListRef = _el$48;
             _$setAttribute(_el$48, "id", commandListId);
@@ -1744,56 +1857,56 @@ export function ChatComposer(props) {
                     });
                   },
                   get children() {
-                    var _el$120 = _$getNextElement(_tmpl$30),
-                      _el$121 = _el$120.firstChild,
-                      _el$122 = _el$121.firstChild,
-                      _el$124 = _el$122.nextSibling,
-                      [_el$125, _co$30] = _$getNextMarker(_el$124.nextSibling),
-                      _el$127 = _el$121.nextSibling,
-                      [_el$128, _co$31] = _$getNextMarker(_el$127.nextSibling),
-                      _el$129 = _el$128.nextSibling,
-                      [_el$130, _co$32] = _$getNextMarker(_el$129.nextSibling);
-                    _$insert(_el$122, () => group()?.scopeTitle ?? group()?.section?.label);
-                    _$insert(_el$121, _$createComponent(Show, {
+                    var _el$122 = _$getNextElement(_tmpl$30),
+                      _el$123 = _el$122.firstChild,
+                      _el$124 = _el$123.firstChild,
+                      _el$126 = _el$124.nextSibling,
+                      [_el$127, _co$31] = _$getNextMarker(_el$126.nextSibling),
+                      _el$129 = _el$123.nextSibling,
+                      [_el$130, _co$32] = _$getNextMarker(_el$129.nextSibling),
+                      _el$131 = _el$130.nextSibling,
+                      [_el$132, _co$33] = _$getNextMarker(_el$131.nextSibling);
+                    _$insert(_el$124, () => group()?.scopeTitle ?? group()?.section?.label);
+                    _$insert(_el$123, _$createComponent(Show, {
                       get when() {
                         return group()?.loading;
                       },
                       get children() {
                         return _$getNextElement(_tmpl$28);
                       }
-                    }), _el$125, _co$30);
-                    _$insert(_el$120, _$createComponent(For, {
+                    }), _el$127, _co$31);
+                    _$insert(_el$122, _$createComponent(For, {
                       get each() {
                         return rows();
                       },
                       children: renderCommandRow
-                    }), _el$128, _co$31);
-                    _$insert(_el$120, _$createComponent(Show, {
+                    }), _el$130, _co$32);
+                    _$insert(_el$122, _$createComponent(Show, {
                       get when() {
                         return group()?.placeholder;
                       },
                       get children() {
                         return _$getNextElement(_tmpl$29);
                       }
-                    }), _el$130, _co$32);
+                    }), _el$132, _co$33);
                     _$effect(_p$ => {
                       var _v$32 = headingId(),
                         _v$33 = headingId();
-                      _v$32 !== _p$.e && _$setAttribute(_el$120, "aria-labelledby", _p$.e = _v$32);
-                      _v$33 !== _p$.t && _$setAttribute(_el$121, "id", _p$.t = _v$33);
+                      _v$32 !== _p$.e && _$setAttribute(_el$122, "aria-labelledby", _p$.e = _v$32);
+                      _v$33 !== _p$.t && _$setAttribute(_el$123, "id", _p$.t = _v$33);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$120;
+                    return _el$122;
                   }
                 });
               }
             }), _el$59, _co$9);
             _$insert(_el$48, _$createComponent(Show, {
               get when() {
-                return _$memo(() => !!(searching() && commandMatches().length === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
+                return _$memo(() => !!(searching() && foundCommandCount() === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
               },
               get children() {
                 var _el$49 = _$getNextElement(_tmpl$16),
@@ -1819,7 +1932,7 @@ export function ChatComposer(props) {
             }), _el$63, _co$1);
             _$insert(_el$48, _$createComponent(Show, {
               get when() {
-                return _$memo(() => !!(!searching() && !searchError()))() && commandMatches().length === 0;
+                return _$memo(() => !!(!searching() && !searchError()))() && foundCommandCount() === 0;
               },
               get children() {
                 var _el$57 = _$getNextElement(_tmpl$18);
@@ -1832,6 +1945,13 @@ export function ChatComposer(props) {
                 return _el$57;
               }
             }), _el$65, _co$10);
+            _$insert(_el$48, _$createComponent(Show, {
+              get when() {
+                return commandModel().fallback?.command;
+              },
+              keyed: true,
+              children: command => renderCommandRow(command)
+            }), _el$67, _co$11);
             _$effect(_p$ => {
               var _v$19 = chatMessages().commands,
                 _v$20 = searching() ? "true" : undefined;
@@ -1844,7 +1964,7 @@ export function ChatComposer(props) {
             });
             return _el$47;
           }
-        }), _el$69, _co$12);
+        }), _el$71, _co$13);
         _$effect(_p$ => {
           var _v$21 = hasAccessory() ? undefined : "true",
             _v$22 = suggestionsOpen() ? "hidden" : undefined,
@@ -1860,227 +1980,227 @@ export function ChatComposer(props) {
         });
         return _el$43;
       }
-    }), _el$109, _co$27);
+    }), _el$111, _co$28);
     var _ref$9 = composerRef;
-    typeof _ref$9 === "function" ? _$use(_ref$9, _el$70) : composerRef = _el$70;
-    _$insert(_el$70, _$createComponent(Show, {
+    typeof _ref$9 === "function" ? _$use(_ref$9, _el$72) : composerRef = _el$72;
+    _$insert(_el$72, _$createComponent(Show, {
       get when() {
         return showHint();
       },
       get children() {
-        var _el$71 = _$getNextElement(_tmpl$21);
-        _$insert(_el$71, _$createComponent(Show, {
+        var _el$73 = _$getNextElement(_tmpl$21);
+        _$insert(_el$73, _$createComponent(Show, {
           get when() {
             return dictationStatus();
           },
           get fallback() {
             return (() => {
-              var _el$131 = _$getNextElement(_tmpl$31);
-              _$insert(_el$131, hint);
-              return _el$131;
+              var _el$133 = _$getNextElement(_tmpl$31);
+              _$insert(_el$133, hint);
+              return _el$133;
             })();
           },
           children: status => [(() => {
-            var _el$132 = _$getNextElement(_tmpl$32),
-              _el$133 = _el$132.firstChild,
-              _el$134 = _el$133.nextSibling;
-            _$insert(_el$134, () => status().text);
+            var _el$134 = _$getNextElement(_tmpl$32),
+              _el$135 = _el$134.firstChild,
+              _el$136 = _el$135.nextSibling;
+            _$insert(_el$136, () => status().text);
             _$effect(_p$ => {
               var _v$34 = dictation() ?? undefined,
                 _v$35 = status().icon;
-              _v$34 !== _p$.e && _$setAttribute(_el$132, "data-state", _p$.e = _v$34);
-              _v$35 !== _p$.t && _$className(_el$133, _p$.t = _v$35);
+              _v$34 !== _p$.e && _$setAttribute(_el$134, "data-state", _p$.e = _v$34);
+              _v$35 !== _p$.t && _$className(_el$135, _p$.t = _v$35);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$132;
+            return _el$134;
           })(), _$createComponent(Show, {
             get when() {
               return _$memo(() => dictation() === "refined")() ? props.microphone?.onRestoreOriginal : undefined;
             },
             children: restore => (() => {
-              var _el$135 = _$getNextElement(_tmpl$33);
-              _el$135.$$click = () => reportChatFailure(restore(), props.onError);
-              _el$135.$$mousedown = keepFieldFocus;
-              _$insert(_el$135, () => chatMessages().restoreOriginal);
-              _$effect(() => _$setProperty(_el$135, "disabled", microphoneDisabled()));
+              var _el$137 = _$getNextElement(_tmpl$33);
+              _el$137.$$click = () => reportChatFailure(restore(), props.onError);
+              _el$137.$$mousedown = keepFieldFocus;
+              _$insert(_el$137, () => chatMessages().restoreOriginal);
+              _$effect(() => _$setProperty(_el$137, "disabled", microphoneDisabled()));
               _$runHydrationEvents();
-              return _el$135;
+              return _el$137;
             })()
           })]
         }));
-        return _el$71;
+        return _el$73;
       }
-    }), _el$95, _co$21);
-    _$insert(_el$70, _$createComponent(Show, {
+    }), _el$97, _co$22);
+    _$insert(_el$72, _$createComponent(Show, {
       get when() {
         return attachments().length > 0;
       },
       get children() {
-        var _el$72 = _$getNextElement(_tmpl$22);
-        _$insert(_el$72, _$createComponent(For, {
+        var _el$74 = _$getNextElement(_tmpl$22);
+        _$insert(_el$74, _$createComponent(For, {
           get each() {
             return attachments();
           },
           children: attachment => (() => {
-            var _el$136 = _$getNextElement(_tmpl$35),
-              _el$137 = _el$136.firstChild,
-              _el$138 = _el$137.firstChild,
-              [_el$139, _co$33] = _$getNextMarker(_el$138.nextSibling),
-              _el$140 = _el$139.nextSibling,
+            var _el$138 = _$getNextElement(_tmpl$35),
+              _el$139 = _el$138.firstChild,
+              _el$140 = _el$139.firstChild,
               [_el$141, _co$34] = _$getNextMarker(_el$140.nextSibling),
-              _el$143 = _el$137.nextSibling,
-              [_el$144, _co$35] = _$getNextMarker(_el$143.nextSibling);
-            _$insert(_el$137, _$createComponent(Show, {
+              _el$142 = _el$141.nextSibling,
+              [_el$143, _co$35] = _$getNextMarker(_el$142.nextSibling),
+              _el$145 = _el$139.nextSibling,
+              [_el$146, _co$36] = _$getNextMarker(_el$145.nextSibling);
+            _$insert(_el$139, _$createComponent(Show, {
               get when() {
                 return attachment.href;
               },
               get fallback() {
                 return (() => {
-                  var _el$145 = _$getNextElement(_tmpl$37),
-                    _el$147 = _el$145.firstChild,
-                    [_el$148, _co$36] = _$getNextMarker(_el$147.nextSibling),
-                    _el$149 = _el$148.nextSibling,
-                    [_el$150, _co$37] = _$getNextMarker(_el$149.nextSibling);
-                  _$insert(_el$145, _$createComponent(Show, {
+                  var _el$147 = _$getNextElement(_tmpl$37),
+                    _el$149 = _el$147.firstChild,
+                    [_el$150, _co$37] = _$getNextMarker(_el$149.nextSibling),
+                    _el$151 = _el$150.nextSibling,
+                    [_el$152, _co$38] = _$getNextMarker(_el$151.nextSibling);
+                  _$insert(_el$147, _$createComponent(Show, {
                     get when() {
                       return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                     },
                     get fallback() {
                       return (() => {
-                        var _el$151 = _$getNextElement(_tmpl$3);
-                        _$effect(() => _$className(_el$151, attachmentIcon(attachment)));
-                        return _el$151;
+                        var _el$153 = _$getNextElement(_tmpl$3);
+                        _$effect(() => _$className(_el$153, attachmentIcon(attachment)));
+                        return _el$153;
                       })();
                     },
                     get children() {
-                      var _el$146 = _$getNextElement(_tmpl$36);
+                      var _el$148 = _$getNextElement(_tmpl$36);
                       _$effect(_p$ => {
                         var _v$38 = attachment.previewUrl,
                           _v$39 = attachment.alt ?? "";
-                        _v$38 !== _p$.e && _$setAttribute(_el$146, "src", _p$.e = _v$38);
-                        _v$39 !== _p$.t && _$setAttribute(_el$146, "alt", _p$.t = _v$39);
+                        _v$38 !== _p$.e && _$setAttribute(_el$148, "src", _p$.e = _v$38);
+                        _v$39 !== _p$.t && _$setAttribute(_el$148, "alt", _p$.t = _v$39);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$146;
+                      return _el$148;
                     }
-                  }), _el$148, _co$36);
-                  _$insert(_el$145, () => renderAttachmentCopy(attachment), _el$150, _co$37);
-                  return _el$145;
+                  }), _el$150, _co$37);
+                  _$insert(_el$147, () => renderAttachmentCopy(attachment), _el$152, _co$38);
+                  return _el$147;
                 })();
               },
               children: href => (() => {
-                var _el$152 = _$getNextElement(_tmpl$38),
-                  _el$154 = _el$152.firstChild,
-                  [_el$155, _co$38] = _$getNextMarker(_el$154.nextSibling),
-                  _el$156 = _el$155.nextSibling,
-                  [_el$157, _co$39] = _$getNextMarker(_el$156.nextSibling);
-                _$insert(_el$152, _$createComponent(Show, {
+                var _el$154 = _$getNextElement(_tmpl$38),
+                  _el$156 = _el$154.firstChild,
+                  [_el$157, _co$39] = _$getNextMarker(_el$156.nextSibling),
+                  _el$158 = _el$157.nextSibling,
+                  [_el$159, _co$40] = _$getNextMarker(_el$158.nextSibling);
+                _$insert(_el$154, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                   },
                   get fallback() {
                     return (() => {
-                      var _el$158 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$158, attachmentIcon(attachment)));
-                      return _el$158;
+                      var _el$160 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$160, attachmentIcon(attachment)));
+                      return _el$160;
                     })();
                   },
                   get children() {
-                    var _el$153 = _$getNextElement(_tmpl$36);
+                    var _el$155 = _$getNextElement(_tmpl$36);
                     _$effect(_p$ => {
                       var _v$40 = attachment.previewUrl,
                         _v$41 = attachment.alt ?? "";
-                      _v$40 !== _p$.e && _$setAttribute(_el$153, "src", _p$.e = _v$40);
-                      _v$41 !== _p$.t && _$setAttribute(_el$153, "alt", _p$.t = _v$41);
+                      _v$40 !== _p$.e && _$setAttribute(_el$155, "src", _p$.e = _v$40);
+                      _v$41 !== _p$.t && _$setAttribute(_el$155, "alt", _p$.t = _v$41);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$153;
+                    return _el$155;
                   }
-                }), _el$155, _co$38);
-                _$insert(_el$152, () => renderAttachmentCopy(attachment), _el$157, _co$39);
+                }), _el$157, _co$39);
+                _$insert(_el$154, () => renderAttachmentCopy(attachment), _el$159, _co$40);
                 _$effect(_p$ => {
                   var _v$42 = href(),
                     _v$43 = chatMessages().openInNewTab({
                       name: attachment.name
                     });
-                  _v$42 !== _p$.e && _$setAttribute(_el$152, "href", _p$.e = _v$42);
-                  _v$43 !== _p$.t && _$setAttribute(_el$152, "aria-label", _p$.t = _v$43);
+                  _v$42 !== _p$.e && _$setAttribute(_el$154, "href", _p$.e = _v$42);
+                  _v$43 !== _p$.t && _$setAttribute(_el$154, "aria-label", _p$.t = _v$43);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$152;
+                return _el$154;
               })()
-            }), _el$139, _co$33);
-            _$insert(_el$137, _$createComponent(Show, {
+            }), _el$141, _co$34);
+            _$insert(_el$139, _$createComponent(Show, {
               get when() {
                 return attachment.action;
               },
               children: action => (() => {
-                var _el$159 = _$getNextElement(_tmpl$39),
-                  _el$160 = _el$159.firstChild,
-                  [_el$161, _co$40] = _$getNextMarker(_el$160.nextSibling),
-                  _el$162 = _el$161.nextSibling,
-                  [_el$163, _co$41] = _$getNextMarker(_el$162.nextSibling);
-                _el$159.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
-                _$insert(_el$159, _$createComponent(Show, {
+                var _el$161 = _$getNextElement(_tmpl$39),
+                  _el$162 = _el$161.firstChild,
+                  [_el$163, _co$41] = _$getNextMarker(_el$162.nextSibling),
+                  _el$164 = _el$163.nextSibling,
+                  [_el$165, _co$42] = _$getNextMarker(_el$164.nextSibling);
+                _el$161.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
+                _$insert(_el$161, _$createComponent(Show, {
                   get when() {
                     return action().icon;
                   },
                   children: icon => (() => {
-                    var _el$164 = _$getNextElement(_tmpl$3);
-                    _$effect(() => _$className(_el$164, icon()));
-                    return _el$164;
+                    var _el$166 = _$getNextElement(_tmpl$3);
+                    _$effect(() => _$className(_el$166, icon()));
+                    return _el$166;
                   })()
-                }), _el$161, _co$40);
-                _$insert(_el$159, () => action().label, _el$163, _co$41);
-                _$effect(() => _$setProperty(_el$159, "disabled", blocked() || action().disabled));
+                }), _el$163, _co$41);
+                _$insert(_el$161, () => action().label, _el$165, _co$42);
+                _$effect(() => _$setProperty(_el$161, "disabled", blocked() || action().disabled));
                 _$runHydrationEvents();
-                return _el$159;
+                return _el$161;
               })()
-            }), _el$141, _co$34);
-            _$insert(_el$136, _$createComponent(Show, {
+            }), _el$143, _co$35);
+            _$insert(_el$138, _$createComponent(Show, {
               get when() {
                 return props.onAttachmentsChange;
               },
               get children() {
-                var _el$142 = _$getNextElement(_tmpl$34);
-                _el$142.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
+                var _el$144 = _$getNextElement(_tmpl$34);
+                _el$144.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
                 _$effect(_p$ => {
                   var _v$36 = selectMessages().removeNamed({
                       name: attachment.name
                     }),
                     _v$37 = blocked();
-                  _v$36 !== _p$.e && _$setAttribute(_el$142, "aria-label", _p$.e = _v$36);
-                  _v$37 !== _p$.t && _$setProperty(_el$142, "disabled", _p$.t = _v$37);
+                  _v$36 !== _p$.e && _$setAttribute(_el$144, "aria-label", _p$.e = _v$36);
+                  _v$37 !== _p$.t && _$setProperty(_el$144, "disabled", _p$.t = _v$37);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
                 _$runHydrationEvents();
-                return _el$142;
+                return _el$144;
               }
-            }), _el$144, _co$35);
-            _$effect(() => _el$137.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
-            return _el$136;
+            }), _el$146, _co$36);
+            _$effect(() => _el$139.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
+            return _el$138;
           })()
         }));
-        _$effect(() => _$setAttribute(_el$72, "aria-label", chatMessages().attachments));
-        return _el$72;
+        _$effect(() => _$setAttribute(_el$74, "aria-label", chatMessages().attachments));
+        return _el$74;
       }
-    }), _el$97, _co$22);
-    _$insert(_el$70, _$createComponent(Show, {
+    }), _el$99, _co$23);
+    _$insert(_el$72, _$createComponent(Show, {
       get when() {
         return conversation();
       },
@@ -2090,25 +2210,23 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$165 = _$getNextElement(_tmpl$23),
-              _el$166 = _el$165.firstChild,
-              _el$167 = _el$166.nextSibling,
-              [_el$168, _co$42] = _$getNextMarker(_el$167.nextSibling);
-            _$insert(_el$165, () => props.error, _el$168, _co$42);
-            return _el$165;
+            var _el$167 = _$getNextElement(_tmpl$23),
+              _el$168 = _el$167.firstChild,
+              _el$169 = _el$168.nextSibling,
+              [_el$170, _co$43] = _$getNextMarker(_el$169.nextSibling);
+            _$insert(_el$167, () => props.error, _el$170, _co$43);
+            return _el$167;
           }
         }), _$memo(formatRow), (() => {
-          var _el$169 = _$getNextElement(_tmpl$40);
-          _$insert(_el$169, _$createComponent(Show, {
+          var _el$171 = _$getNextElement(_tmpl$40);
+          _$insert(_el$171, _$createComponent(Show, {
             get when() {
               return footer();
             },
             get fallback() {
               return [(() => {
-                var _el$170 = _$getNextElement(_tmpl$41),
-                  _el$171 = _el$170.firstChild,
-                  [_el$172, _co$43] = _$getNextMarker(_el$171.nextSibling),
-                  _el$173 = _el$172.nextSibling,
+                var _el$172 = _$getNextElement(_tmpl$41),
+                  _el$173 = _el$172.firstChild,
                   [_el$174, _co$44] = _$getNextMarker(_el$173.nextSibling),
                   _el$175 = _el$174.nextSibling,
                   [_el$176, _co$45] = _$getNextMarker(_el$175.nextSibling),
@@ -2119,20 +2237,22 @@ export function ChatComposer(props) {
                   _el$181 = _el$180.nextSibling,
                   [_el$182, _co$48] = _$getNextMarker(_el$181.nextSibling),
                   _el$183 = _el$182.nextSibling,
-                  [_el$184, _co$49] = _$getNextMarker(_el$183.nextSibling);
-                _$insert(_el$170, () => props.footerTools, _el$172, _co$43);
-                _$insert(_el$170, _$createComponent(Show, {
+                  [_el$184, _co$49] = _$getNextMarker(_el$183.nextSibling),
+                  _el$185 = _el$184.nextSibling,
+                  [_el$186, _co$50] = _$getNextMarker(_el$185.nextSibling);
+                _$insert(_el$172, () => props.footerTools, _el$174, _co$44);
+                _$insert(_el$172, _$createComponent(Show, {
                   get when() {
                     return hasAddMenu();
                   },
                   get children() {
                     return addMenu("ti ti-plus");
                   }
-                }), _el$174, _co$44);
-                _$insert(_el$170, fileInput, _el$176, _co$45);
-                _$insert(_el$170, formatToggle, _el$178, _co$46);
-                _$insert(_el$170, emojiButton, _el$180, _co$47);
-                _$insert(_el$170, _$createComponent(Show, {
+                }), _el$176, _co$45);
+                _$insert(_el$172, fileInput, _el$178, _co$46);
+                _$insert(_el$172, formatToggle, _el$180, _co$47);
+                _$insert(_el$172, emojiButton, _el$182, _co$48);
+                _$insert(_el$172, _$createComponent(Show, {
                   get when() {
                     return (props.models?.length ?? 0) > 0;
                   },
@@ -2178,22 +2298,22 @@ export function ChatComposer(props) {
                       }
                     });
                   }
-                }), _el$182, _co$48);
-                _$insert(_el$170, () => props.modelDetails, _el$184, _co$49);
-                return _el$170;
+                }), _el$184, _co$49);
+                _$insert(_el$172, () => props.modelDetails, _el$186, _co$50);
+                return _el$172;
               })(), (() => {
-                var _el$185 = _$getNextElement(_tmpl$42),
-                  _el$186 = _el$185.firstChild,
-                  [_el$187, _co$50] = _$getNextMarker(_el$186.nextSibling),
-                  _el$188 = _el$187.nextSibling,
+                var _el$187 = _$getNextElement(_tmpl$42),
+                  _el$188 = _el$187.firstChild,
                   [_el$189, _co$51] = _$getNextMarker(_el$188.nextSibling),
                   _el$190 = _el$189.nextSibling,
                   [_el$191, _co$52] = _$getNextMarker(_el$190.nextSibling),
                   _el$192 = _el$191.nextSibling,
                   [_el$193, _co$53] = _$getNextMarker(_el$192.nextSibling),
                   _el$194 = _el$193.nextSibling,
-                  [_el$195, _co$54] = _$getNextMarker(_el$194.nextSibling);
-                _$insert(_el$185, _$createComponent(For, {
+                  [_el$195, _co$54] = _$getNextMarker(_el$194.nextSibling),
+                  _el$196 = _el$195.nextSibling,
+                  [_el$197, _co$55] = _$getNextMarker(_el$196.nextSibling);
+                _$insert(_el$187, _$createComponent(For, {
                   get each() {
                     return props.contextActions;
                   },
@@ -2217,13 +2337,13 @@ export function ChatComposer(props) {
                     },
                     onClick: () => reportChatFailure(() => executeChatAction(action), props.onError),
                     get children() {
-                      var _el$196 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$196, action.icon ?? "ti ti-dots"));
-                      return _el$196;
+                      var _el$198 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$198, action.icon ?? "ti ti-dots"));
+                      return _el$198;
                     }
                   })
-                }), _el$187, _co$50);
-                _$insert(_el$185, _$createComponent(Show, {
+                }), _el$189, _co$51);
+                _$insert(_el$187, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => !!hasContextUsage())() ? props.contextUsage ?? {} : undefined;
                   },
@@ -2235,18 +2355,18 @@ export function ChatComposer(props) {
                       return props.onError;
                     }
                   }))
-                }), _el$189, _co$51);
-                _$insert(_el$185, () => props.submitTools, _el$191, _co$52);
-                _$insert(_el$185, microphoneControl, _el$193, _co$53);
-                _$insert(_el$185, sendControl, _el$195, _co$54);
-                return _el$185;
+                }), _el$191, _co$52);
+                _$insert(_el$187, () => props.submitTools, _el$193, _co$53);
+                _$insert(_el$187, microphoneControl, _el$195, _co$54);
+                _$insert(_el$187, sendControl, _el$197, _co$55);
+                return _el$187;
               })()];
             },
             get children() {
               return footer();
             }
           }));
-          return _el$169;
+          return _el$171;
         })()];
       },
       get children() {
@@ -2255,43 +2375,43 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$73 = _$getNextElement(_tmpl$23),
-              _el$74 = _el$73.firstChild,
-              _el$75 = _el$74.nextSibling,
-              [_el$76, _co$13] = _$getNextMarker(_el$75.nextSibling);
-            _$insert(_el$73, () => props.error, _el$76, _co$13);
-            return _el$73;
+            var _el$75 = _$getNextElement(_tmpl$23),
+              _el$76 = _el$75.firstChild,
+              _el$77 = _el$76.nextSibling,
+              [_el$78, _co$14] = _$getNextMarker(_el$77.nextSibling);
+            _$insert(_el$75, () => props.error, _el$78, _co$14);
+            return _el$75;
           }
         }), _$memo(() => formatRow()), (() => {
-          var _el$77 = _$getNextElement(_tmpl$24),
-            _el$88 = _el$77.firstChild,
-            [_el$89, _co$18] = _$getNextMarker(_el$88.nextSibling),
-            _el$90 = _el$89.nextSibling,
+          var _el$79 = _$getNextElement(_tmpl$24),
+            _el$90 = _el$79.firstChild,
             [_el$91, _co$19] = _$getNextMarker(_el$90.nextSibling),
-            _el$78 = _el$91.nextSibling,
-            _el$86 = _el$78.firstChild,
-            [_el$87, _co$17] = _$getNextMarker(_el$86.nextSibling),
-            _el$79 = _el$87.nextSibling,
-            _el$80 = _el$79.firstChild,
-            [_el$81, _co$14] = _$getNextMarker(_el$80.nextSibling),
-            _el$82 = _el$81.nextSibling,
+            _el$92 = _el$91.nextSibling,
+            [_el$93, _co$20] = _$getNextMarker(_el$92.nextSibling),
+            _el$80 = _el$93.nextSibling,
+            _el$88 = _el$80.firstChild,
+            [_el$89, _co$18] = _$getNextMarker(_el$88.nextSibling),
+            _el$81 = _el$89.nextSibling,
+            _el$82 = _el$81.firstChild,
             [_el$83, _co$15] = _$getNextMarker(_el$82.nextSibling),
             _el$84 = _el$83.nextSibling,
             [_el$85, _co$16] = _$getNextMarker(_el$84.nextSibling),
-            _el$92 = _el$78.nextSibling,
-            [_el$93, _co$20] = _$getNextMarker(_el$92.nextSibling);
-          _$insert(_el$77, attachControl, _el$89, _co$18);
-          _$insert(_el$77, fileInput, _el$91, _co$19);
-          _$insert(_el$78, field, _el$87, _co$17);
-          _$insert(_el$79, formatToggle, _el$81, _co$14);
-          _$insert(_el$79, emojiButton, _el$83, _co$15);
-          _$insert(_el$79, microphoneControl, _el$85, _co$16);
-          _$insert(_el$77, sendControl, _el$93, _co$20);
-          return _el$77;
+            _el$86 = _el$85.nextSibling,
+            [_el$87, _co$17] = _$getNextMarker(_el$86.nextSibling),
+            _el$94 = _el$80.nextSibling,
+            [_el$95, _co$21] = _$getNextMarker(_el$94.nextSibling);
+          _$insert(_el$79, attachControl, _el$91, _co$19);
+          _$insert(_el$79, fileInput, _el$93, _co$20);
+          _$insert(_el$80, field, _el$89, _co$18);
+          _$insert(_el$81, formatToggle, _el$83, _co$15);
+          _$insert(_el$81, emojiButton, _el$85, _co$16);
+          _$insert(_el$81, microphoneControl, _el$87, _co$17);
+          _$insert(_el$79, sendControl, _el$95, _co$21);
+          return _el$79;
         })()];
       }
-    }), _el$99, _co$23);
-    _$insert(_el$70, _$createComponent(Show, {
+    }), _el$101, _co$24);
+    _$insert(_el$72, _$createComponent(Show, {
       get when() {
         return props.fileSelection;
       },
@@ -2310,60 +2430,60 @@ export function ChatComposer(props) {
         },
         onDrop: files => void runFiles(files)
       })
-    }), _el$101, _co$24);
-    _$insert(_el$102, _$createComponent(Show, {
+    }), _el$103, _co$25);
+    _$insert(_el$104, _$createComponent(Show, {
       get when() {
         return suggestionAnnouncement();
       },
       keyed: true,
       children: announced => (() => {
-        var _el$197 = _$getNextElement(_tmpl$10);
-        _$insert(_el$197, () => announced.text);
-        return _el$197;
+        var _el$199 = _$getNextElement(_tmpl$10);
+        _$insert(_el$199, () => announced.text);
+        return _el$199;
       })()
     }));
-    _$insert(_el$103, _$createComponent(Show, {
+    _$insert(_el$105, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!!suggestionsOpen())() && commandStatus();
       },
       children: status => (() => {
-        var _el$198 = _$getNextElement(_tmpl$43),
-          _el$199 = _el$198.firstChild,
-          _el$200 = _el$199.nextSibling;
-        _$insert(_el$200, () => status().text);
+        var _el$200 = _$getNextElement(_tmpl$43),
+          _el$201 = _el$200.firstChild,
+          _el$202 = _el$201.nextSibling;
+        _$insert(_el$202, () => status().text);
         _$effect(_p$ => {
           var _v$44 = status().tone,
             _v$45 = status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle";
-          _v$44 !== _p$.e && _$setAttribute(_el$198, "data-tone", _p$.e = _v$44);
-          _v$45 !== _p$.t && _$className(_el$199, _p$.t = _v$45);
+          _v$44 !== _p$.e && _$setAttribute(_el$200, "data-tone", _p$.e = _v$44);
+          _v$45 !== _p$.t && _$className(_el$201, _p$.t = _v$45);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$198;
+        return _el$200;
       })()
-    }), _el$105, _co$25);
-    _$insert(_el$103, _$createComponent(Show, {
+    }), _el$107, _co$26);
+    _$insert(_el$105, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!suggestionsOpen())() && announcement();
       },
       keyed: true,
       children: announced => (() => {
-        var _el$201 = _$getNextElement(_tmpl$44);
-        _$insert(_el$201, () => announced.text);
-        return _el$201;
+        var _el$203 = _$getNextElement(_tmpl$44);
+        _$insert(_el$203, () => announced.text);
+        return _el$203;
       })()
-    }), _el$107, _co$26);
+    }), _el$109, _co$27);
     _$effect(_p$ => {
       var _v$24 = `k2b-chat-composer ${props.class ?? ""}`,
         _v$25 = running() ? "true" : undefined,
         _v$26 = conversation() ? "conversation" : undefined,
         _v$27 = props.label ?? chatMessages().messageComposer;
-      _v$24 !== _p$.e && _$className(_el$70, _p$.e = _v$24);
-      _v$25 !== _p$.t && _$setAttribute(_el$70, "data-running", _p$.t = _v$25);
-      _v$26 !== _p$.a && _$setAttribute(_el$70, "data-variant", _p$.a = _v$26);
-      _v$27 !== _p$.o && _$setAttribute(_el$70, "aria-label", _p$.o = _v$27);
+      _v$24 !== _p$.e && _$className(_el$72, _p$.e = _v$24);
+      _v$25 !== _p$.t && _$setAttribute(_el$72, "data-running", _p$.t = _v$25);
+      _v$26 !== _p$.a && _$setAttribute(_el$72, "data-variant", _p$.a = _v$26);
+      _v$27 !== _p$.o && _$setAttribute(_el$72, "aria-label", _p$.o = _v$27);
       return _p$;
     }, {
       e: undefined,