@k2b/ui 0.32.0 → 0.33.0

package/dist/browser/chat/ChatComposer.js

@@ -30,37 +30,42 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span><strong>`),
   _tmpl$13 = /*#__PURE__*/_$template(`<button class=k2b-chat-composer__command type=button role=option tabindex=-1><i aria-hidden=true></i><span class=k2b-chat-composer__command-text><strong></strong><!$><!/></span><!$><!/>`),
   _tmpl$14 = /*#__PURE__*/_$template(`<b>`),
   _tmpl$15 = /*#__PURE__*/_$template(`<small>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<label class=k2b-chat-composer__command-search><i class="ti ti-search"aria-hidden=true></i><input type=text role=combobox aria-autocomplete=list aria-expanded=true autocomplete=off autocapitalize=off>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<div role=status>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory data-commands><!$><!/><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/><!$><!/>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__hint aria-live=polite>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__row><!$><!/><!$><!/><div class=k2b-chat-composer__field><!$><!/><div class=k2b-chat-composer__field-tools><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-shell><!$><!/><section role=group><!$><!/><!$><!/><!$><!/><!$><!/></section><div class=k2b-sr-only role=status aria-live=polite></div><div class=k2b-chat-composer__status role=status><!$><!/><!$><!/>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><span class=k2b-chat-composer__emoji-glyph aria-hidden=true></span><strong></strong><!$><!/>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<small>:<!$><!/>:`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-group role=group><div class=k2b-chat-composer__command-heading role=presentation><span></span><!$><!/></div><!$><!/><!$><!/>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-placeholder aria-hidden=true><span></span><span><span></span><span>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__hint-text>`),
-  _tmpl$34 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__dictation><i aria-hidden=true></i><span>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__hint-action>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<img>`),
-  _tmpl$39 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
-  _tmpl$40 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
-  _tmpl$42 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
-  _tmpl$43 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$44 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$45 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__status-line><i aria-hidden=true></i><span>`),
-  _tmpl$46 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`);
+  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-message-row__quote-author><span class=k2b-sr-only><!$><!/> </span><!$><!/>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-message-row__quote-text>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<label class=k2b-chat-composer__command-search><i class="ti ti-search"aria-hidden=true></i><input type=text role=combobox aria-autocomplete=list aria-expanded=true autocomplete=off autocapitalize=off>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div role=status>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory data-commands><!$><!/><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/><!$><!/>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__hint aria-live=polite>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__row><!$><!/><!$><!/><div class=k2b-chat-composer__field><!$><!/><div class=k2b-chat-composer__field-tools><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-shell><!$><!/><section role=group><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></section><div class=k2b-sr-only role=status aria-live=polite></div><div class=k2b-chat-composer__status role=status><!$><!/><!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><span class=k2b-chat-composer__emoji-glyph aria-hidden=true></span><strong></strong><!$><!/>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<small>:<!$><!/>:`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-group role=group><div class=k2b-chat-composer__command-heading role=presentation><span></span><!$><!/></div><!$><!/><!$><!/>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__command-placeholder aria-hidden=true><span></span><span><span></span><span>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__hint-text>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__dictation><i aria-hidden=true></i><span>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__hint-action>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__reply><!$><!/><button type=button class="k2b-chat-composer__icon-action k2b-chat-composer__reply-cancel"><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<div class=k2b-message-row__quote>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<button type=button class=k2b-message-row__quote>`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<img>`),
+  _tmpl$44 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
+  _tmpl$45 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
+  _tmpl$46 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
+  _tmpl$47 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
+  _tmpl$48 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$49 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$50 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__status-line><i aria-hidden=true></i><span>`),
+  _tmpl$51 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`);
 import { batch, children, createEffect, createMemo, createSignal, createUniqueId, For, Index, on, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Dropdown } from "../actions/Dropdown";
 import { dialogHistorySettled, holdDialogHistory } from "../feedback/dialog-core";
@@ -811,7 +816,16 @@ export function ChatComposer(props) {
         label: action.label,
         variant: action.variant,
         disabled: action.disabled,
-        action: () => reportChatFailure(() => executeChatAction(action), props.onError)
+        action: () => reportChatFailure(async () => {
+          await executeChatAction(action);
+          // Like attaching files, an add action returns to the field when the focus is still on this composer's add
+          // button or nowhere; focus the action moved somewhere on purpose stays there.
+          queueMicrotask(() => {
+            const active = textareaRef?.ownerDocument.activeElement;
+            const root = textareaRef?.closest(".k2b-chat-composer");
+            if (!active || active === active.ownerDocument.body || root?.contains(active) && active.matches("[data-chat-composer-add]")) focus();
+          });
+        }, props.onError)
       });
     }
     return items;
@@ -1546,6 +1560,7 @@ export function ChatComposer(props) {
       return _$createComponent(Dropdown.Trigger, {
         appearance: "plain",
         "class": `k2b-chat-composer__icon-action${extraClass}`,
+        "data-chat-composer-add": "",
         get label() {
           return chatMessages().addToChat;
         },
@@ -2159,86 +2174,104 @@ export function ChatComposer(props) {
       return _el$30;
     })();
   };
+  const replyQuote = reply => [(() => {
+    var _el$49 = _$getNextElement(_tmpl$16),
+      _el$50 = _el$49.firstChild,
+      _el$52 = _el$50.firstChild,
+      [_el$53, _co$9] = _$getNextMarker(_el$52.nextSibling),
+      _el$51 = _el$53.nextSibling,
+      _el$54 = _el$50.nextSibling,
+      [_el$55, _co$0] = _$getNextMarker(_el$54.nextSibling);
+    _$insert(_el$50, () => chatMessages().replyingTo, _el$53, _co$9);
+    _$insert(_el$49, () => reply.author, _el$55, _co$0);
+    return _el$49;
+  })(), (() => {
+    var _el$56 = _$getNextElement(_tmpl$17);
+    _$insert(_el$56, () => reply.text);
+    return _el$56;
+  })()];
   return (() => {
-    var _el$49 = _$getNextElement(_tmpl$27),
-      _el$122 = _el$49.firstChild,
-      [_el$123, _co$30] = _$getNextMarker(_el$122.nextSibling),
-      _el$84 = _el$123.nextSibling,
-      _el$108 = _el$84.firstChild,
-      [_el$109, _co$24] = _$getNextMarker(_el$108.nextSibling),
-      _el$110 = _el$109.nextSibling,
-      [_el$111, _co$25] = _$getNextMarker(_el$110.nextSibling),
-      _el$112 = _el$111.nextSibling,
-      [_el$113, _co$26] = _$getNextMarker(_el$112.nextSibling),
-      _el$114 = _el$113.nextSibling,
-      [_el$115, _co$27] = _$getNextMarker(_el$114.nextSibling),
-      _el$116 = _el$84.nextSibling,
-      _el$117 = _el$116.nextSibling,
-      _el$118 = _el$117.firstChild,
-      [_el$119, _co$28] = _$getNextMarker(_el$118.nextSibling),
+    var _el$57 = _$getNextElement(_tmpl$29),
+      _el$132 = _el$57.firstChild,
+      [_el$133, _co$33] = _$getNextMarker(_el$132.nextSibling),
+      _el$92 = _el$133.nextSibling,
+      _el$116 = _el$92.firstChild,
+      [_el$117, _co$26] = _$getNextMarker(_el$116.nextSibling),
+      _el$118 = _el$117.nextSibling,
+      [_el$119, _co$27] = _$getNextMarker(_el$118.nextSibling),
       _el$120 = _el$119.nextSibling,
-      [_el$121, _co$29] = _$getNextMarker(_el$120.nextSibling);
+      [_el$121, _co$28] = _$getNextMarker(_el$120.nextSibling),
+      _el$122 = _el$121.nextSibling,
+      [_el$123, _co$29] = _$getNextMarker(_el$122.nextSibling),
+      _el$124 = _el$123.nextSibling,
+      [_el$125, _co$30] = _$getNextMarker(_el$124.nextSibling),
+      _el$126 = _el$92.nextSibling,
+      _el$127 = _el$126.nextSibling,
+      _el$128 = _el$127.firstChild,
+      [_el$129, _co$31] = _$getNextMarker(_el$128.nextSibling),
+      _el$130 = _el$129.nextSibling,
+      [_el$131, _co$32] = _$getNextMarker(_el$130.nextSibling);
     var _ref$7 = shellRef;
-    typeof _ref$7 === "function" ? _$use(_ref$7, _el$49) : shellRef = _el$49;
-    _$insert(_el$49, _$createComponent(Show, {
+    typeof _ref$7 === "function" ? _$use(_ref$7, _el$57) : shellRef = _el$57;
+    _$insert(_el$57, _$createComponent(Show, {
       get when() {
         return suggestionsOpen() || hasAccessory();
       },
       get children() {
-        var _el$50 = _$getNextElement(_tmpl$22),
-          _el$51 = _el$50.firstChild,
-          _el$80 = _el$51.nextSibling,
-          [_el$81, _co$14] = _$getNextMarker(_el$80.nextSibling),
-          _el$82 = _el$81.nextSibling,
-          [_el$83, _co$15] = _$getNextMarker(_el$82.nextSibling);
-        _$insert(_el$51, accessory);
-        _$insert(_el$50, _$createComponent(Show, {
+        var _el$58 = _$getNextElement(_tmpl$24),
+          _el$59 = _el$58.firstChild,
+          _el$88 = _el$59.nextSibling,
+          [_el$89, _co$16] = _$getNextMarker(_el$88.nextSibling),
+          _el$90 = _el$89.nextSibling,
+          [_el$91, _co$17] = _$getNextMarker(_el$90.nextSibling);
+        _$insert(_el$59, accessory);
+        _$insert(_el$58, _$createComponent(Show, {
           get when() {
             return emojiOpen();
           },
           get children() {
-            var _el$52 = _$getNextElement(_tmpl$16),
-              _el$53 = _el$52.firstChild;
+            var _el$60 = _$getNextElement(_tmpl$18),
+              _el$61 = _el$60.firstChild;
             var _ref$8 = commandListRef;
-            typeof _ref$8 === "function" ? _$use(_ref$8, _el$53) : commandListRef = _el$53;
-            _$setAttribute(_el$53, "id", commandListId);
-            _$insert(_el$53, _$createComponent(For, {
+            typeof _ref$8 === "function" ? _$use(_ref$8, _el$61) : commandListRef = _el$61;
+            _$setAttribute(_el$61, "id", commandListId);
+            _$insert(_el$61, _$createComponent(For, {
               get each() {
                 return emojiMatches();
               },
               children: (entry, index) => (() => {
-                var _el$124 = _$getNextElement(_tmpl$28),
-                  _el$125 = _el$124.firstChild,
-                  _el$126 = _el$125.nextSibling,
-                  _el$127 = _el$126.nextSibling,
-                  [_el$128, _co$31] = _$getNextMarker(_el$127.nextSibling);
-                _el$124.$$click = () => pickEmojiSuggestion(index());
-                _el$124.$$mousedown = keepFieldFocus;
-                _$insert(_el$125, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
-                _$insert(_el$126, () => emojiName(entry, locale()));
-                _$insert(_el$124, _$createComponent(Show, {
+                var _el$134 = _$getNextElement(_tmpl$30),
+                  _el$135 = _el$134.firstChild,
+                  _el$136 = _el$135.nextSibling,
+                  _el$137 = _el$136.nextSibling,
+                  [_el$138, _co$34] = _$getNextMarker(_el$137.nextSibling);
+                _el$134.$$click = () => pickEmojiSuggestion(index());
+                _el$134.$$mousedown = keepFieldFocus;
+                _$insert(_el$135, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
+                _$insert(_el$136, () => emojiName(entry, locale()));
+                _$insert(_el$134, _$createComponent(Show, {
                   get when() {
                     return entry.shortcodes[0];
                   },
                   children: code => (() => {
-                    var _el$129 = _$getNextElement(_tmpl$29),
-                      _el$130 = _el$129.firstChild,
-                      _el$132 = _el$130.nextSibling,
-                      [_el$133, _co$32] = _$getNextMarker(_el$132.nextSibling),
-                      _el$131 = _el$133.nextSibling;
-                    _$insert(_el$129, code, _el$133, _co$32);
-                    return _el$129;
+                    var _el$139 = _$getNextElement(_tmpl$31),
+                      _el$140 = _el$139.firstChild,
+                      _el$142 = _el$140.nextSibling,
+                      [_el$143, _co$35] = _$getNextMarker(_el$142.nextSibling),
+                      _el$141 = _el$143.nextSibling;
+                    _$insert(_el$139, code, _el$143, _co$35);
+                    return _el$139;
                   })()
-                }), _el$128, _co$31);
+                }), _el$138, _co$34);
                 _$effect(_p$ => {
                   var _v$38 = `${commandListId}-${index()}`,
                     _v$39 = index() === selectedCommandIndex(),
                     _v$40 = emojiName(entry, locale()),
                     _v$41 = index() === selectedCommandIndex() ? "true" : undefined;
-                  _v$38 !== _p$.e && _$setAttribute(_el$124, "id", _p$.e = _v$38);
-                  _v$39 !== _p$.t && _$setAttribute(_el$124, "aria-selected", _p$.t = _v$39);
-                  _v$40 !== _p$.a && _$setAttribute(_el$124, "aria-label", _p$.a = _v$40);
-                  _v$41 !== _p$.o && _$setAttribute(_el$124, "data-active", _p$.o = _v$41);
+                  _v$38 !== _p$.e && _$setAttribute(_el$134, "id", _p$.e = _v$38);
+                  _v$39 !== _p$.t && _$setAttribute(_el$134, "aria-selected", _p$.t = _v$39);
+                  _v$40 !== _p$.a && _$setAttribute(_el$134, "aria-label", _p$.a = _v$40);
+                  _v$41 !== _p$.o && _$setAttribute(_el$134, "data-active", _p$.o = _v$41);
                   return _p$;
                 }, {
                   e: undefined,
@@ -2247,44 +2280,44 @@ export function ChatComposer(props) {
                   o: undefined
                 });
                 _$runHydrationEvents();
-                return _el$124;
+                return _el$134;
               })()
             }));
-            _$effect(() => _$setAttribute(_el$53, "aria-label", chatMessages().emojiSuggestions));
-            return _el$52;
+            _$effect(() => _$setAttribute(_el$61, "aria-label", chatMessages().emojiSuggestions));
+            return _el$60;
           }
-        }), _el$81, _co$14);
-        _$insert(_el$50, _$createComponent(Show, {
+        }), _el$89, _co$16);
+        _$insert(_el$58, _$createComponent(Show, {
           get when() {
             return commandsOpen();
           },
           get children() {
-            var _el$54 = _$getNextElement(_tmpl$21),
-              _el$78 = _el$54.firstChild,
-              [_el$79, _co$13] = _$getNextMarker(_el$78.nextSibling),
-              _el$58 = _el$79.nextSibling,
-              _el$68 = _el$58.firstChild,
-              [_el$69, _co$0] = _$getNextMarker(_el$68.nextSibling),
-              _el$70 = _el$69.nextSibling,
-              [_el$71, _co$1] = _$getNextMarker(_el$70.nextSibling),
-              _el$72 = _el$71.nextSibling,
-              [_el$73, _co$10] = _$getNextMarker(_el$72.nextSibling),
-              _el$74 = _el$73.nextSibling,
-              [_el$75, _co$11] = _$getNextMarker(_el$74.nextSibling),
-              _el$76 = _el$75.nextSibling,
-              [_el$77, _co$12] = _$getNextMarker(_el$76.nextSibling);
-            _el$54.$$mousedown = event => {
+            var _el$62 = _$getNextElement(_tmpl$23),
+              _el$86 = _el$62.firstChild,
+              [_el$87, _co$15] = _$getNextMarker(_el$86.nextSibling),
+              _el$66 = _el$87.nextSibling,
+              _el$76 = _el$66.firstChild,
+              [_el$77, _co$10] = _$getNextMarker(_el$76.nextSibling),
+              _el$78 = _el$77.nextSibling,
+              [_el$79, _co$11] = _$getNextMarker(_el$78.nextSibling),
+              _el$80 = _el$79.nextSibling,
+              [_el$81, _co$12] = _$getNextMarker(_el$80.nextSibling),
+              _el$82 = _el$81.nextSibling,
+              [_el$83, _co$13] = _$getNextMarker(_el$82.nextSibling),
+              _el$84 = _el$83.nextSibling,
+              [_el$85, _co$14] = _$getNextMarker(_el$84.nextSibling);
+            _el$62.$$mousedown = event => {
               if (addSearch() && event.target !== addSearchRef) event.preventDefault();
             };
-            _$insert(_el$54, _$createComponent(Show, {
+            _$insert(_el$62, _$createComponent(Show, {
               get when() {
                 return addSearch();
               },
               get children() {
-                var _el$55 = _$getNextElement(_tmpl$17),
-                  _el$56 = _el$55.firstChild,
-                  _el$57 = _el$56.nextSibling;
-                _el$57.$$focusout = event => {
+                var _el$63 = _$getNextElement(_tmpl$19),
+                  _el$64 = _el$63.firstChild,
+                  _el$65 = _el$64.nextSibling;
+                _el$65.$$focusout = event => {
                   const next = event.relatedTarget;
                   if (next instanceof Node && commandListRef?.parentElement?.contains(next)) return;
                   // Focus that leaves another way, such as with Shift+Tab, closes the list and stays where it went.
@@ -2292,27 +2325,27 @@ export function ChatComposer(props) {
                     if (addSearch() && document.activeElement !== addSearchRef) endAddSearch(false);
                   });
                 };
-                _el$57.addEventListener("compositionend", () => {
+                _el$65.addEventListener("compositionend", () => {
                   addComposing = false;
                 });
-                _el$57.addEventListener("compositionstart", () => {
+                _el$65.addEventListener("compositionstart", () => {
                   addComposing = true;
                 });
-                _el$57.$$keydown = onAddSearchKeyDown;
-                _el$57.$$input = event => setAddQuery(event.currentTarget.value);
+                _el$65.$$keydown = onAddSearchKeyDown;
+                _el$65.$$input = event => setAddQuery(event.currentTarget.value);
                 var _ref$9 = addSearchRef;
-                typeof _ref$9 === "function" ? _$use(_ref$9, _el$57) : addSearchRef = _el$57;
-                _$setAttribute(_el$57, "aria-controls", commandListId);
-                _$setAttribute(_el$57, "spellcheck", false);
+                typeof _ref$9 === "function" ? _$use(_ref$9, _el$65) : addSearchRef = _el$65;
+                _$setAttribute(_el$65, "aria-controls", commandListId);
+                _$setAttribute(_el$65, "spellcheck", false);
                 _$effect(_p$ => {
                   var _v$24 = chatMessages().commandSearch,
                     _v$25 = chatMessages().commandSearchLabel,
                     _v$26 = selectedCommand() ? commandOptionId(selectedCommand()) : undefined,
                     _v$27 = openingRow() !== undefined;
-                  _v$24 !== _p$.e && _$setAttribute(_el$57, "placeholder", _p$.e = _v$24);
-                  _v$25 !== _p$.t && _$setAttribute(_el$57, "aria-label", _p$.t = _v$25);
-                  _v$26 !== _p$.a && _$setAttribute(_el$57, "aria-activedescendant", _p$.a = _v$26);
-                  _v$27 !== _p$.o && _$setProperty(_el$57, "readOnly", _p$.o = _v$27);
+                  _v$24 !== _p$.e && _$setAttribute(_el$65, "placeholder", _p$.e = _v$24);
+                  _v$25 !== _p$.t && _$setAttribute(_el$65, "aria-label", _p$.t = _v$25);
+                  _v$26 !== _p$.a && _$setAttribute(_el$65, "aria-activedescendant", _p$.a = _v$26);
+                  _v$27 !== _p$.o && _$setProperty(_el$65, "readOnly", _p$.o = _v$27);
                   return _p$;
                 }, {
                   e: undefined,
@@ -2320,15 +2353,15 @@ export function ChatComposer(props) {
                   a: undefined,
                   o: undefined
                 });
-                _$effect(() => _$setProperty(_el$57, "value", addQuery()));
+                _$effect(() => _$setProperty(_el$65, "value", addQuery()));
                 _$runHydrationEvents();
-                return _el$55;
+                return _el$63;
               }
-            }), _el$79, _co$13);
+            }), _el$87, _co$15);
             var _ref$0 = commandListRef;
-            typeof _ref$0 === "function" ? _$use(_ref$0, _el$58) : commandListRef = _el$58;
-            _$setAttribute(_el$58, "id", commandListId);
-            _$insert(_el$58, _$createComponent(For, {
+            typeof _ref$0 === "function" ? _$use(_ref$0, _el$66) : commandListRef = _el$66;
+            _$setAttribute(_el$66, "id", commandListId);
+            _$insert(_el$66, _$createComponent(For, {
               get each() {
                 return commandModel().groups.map(commandGroupKey);
               },
@@ -2347,108 +2380,108 @@ export function ChatComposer(props) {
                     });
                   },
                   get children() {
-                    var _el$134 = _$getNextElement(_tmpl$31),
-                      _el$135 = _el$134.firstChild,
-                      _el$136 = _el$135.firstChild,
-                      _el$138 = _el$136.nextSibling,
-                      [_el$139, _co$33] = _$getNextMarker(_el$138.nextSibling),
-                      _el$140 = _el$135.nextSibling,
-                      [_el$141, _co$34] = _$getNextMarker(_el$140.nextSibling),
-                      _el$142 = _el$141.nextSibling,
-                      [_el$143, _co$35] = _$getNextMarker(_el$142.nextSibling);
-                    _$insert(_el$136, () => group()?.scopeTitle ?? group()?.section?.label);
-                    _$insert(_el$135, _$createComponent(Show, {
+                    var _el$144 = _$getNextElement(_tmpl$33),
+                      _el$145 = _el$144.firstChild,
+                      _el$146 = _el$145.firstChild,
+                      _el$148 = _el$146.nextSibling,
+                      [_el$149, _co$36] = _$getNextMarker(_el$148.nextSibling),
+                      _el$150 = _el$145.nextSibling,
+                      [_el$151, _co$37] = _$getNextMarker(_el$150.nextSibling),
+                      _el$152 = _el$151.nextSibling,
+                      [_el$153, _co$38] = _$getNextMarker(_el$152.nextSibling);
+                    _$insert(_el$146, () => group()?.scopeTitle ?? group()?.section?.label);
+                    _$insert(_el$145, _$createComponent(Show, {
                       get when() {
                         return group()?.loading;
                       },
                       get children() {
-                        return _$getNextElement(_tmpl$30);
+                        return _$getNextElement(_tmpl$32);
                       }
-                    }), _el$139, _co$33);
-                    _$insert(_el$134, _$createComponent(For, {
+                    }), _el$149, _co$36);
+                    _$insert(_el$144, _$createComponent(For, {
                       get each() {
                         return rows();
                       },
                       children: renderCommandRow
-                    }), _el$141, _co$34);
-                    _$insert(_el$134, _$createComponent(Index, {
+                    }), _el$151, _co$37);
+                    _$insert(_el$144, _$createComponent(Index, {
                       get each() {
                         return Array.from({
                           length: Math.max(group()?.placeholder ? 1 : 0, group()?.pendingRows ?? 0)
                         });
                       },
-                      children: () => _$getNextElement(_tmpl$32)
-                    }), _el$143, _co$35);
+                      children: () => _$getNextElement(_tmpl$34)
+                    }), _el$153, _co$38);
                     _$effect(_p$ => {
                       var _v$42 = headingId(),
                         _v$43 = headingId();
-                      _v$42 !== _p$.e && _$setAttribute(_el$134, "aria-labelledby", _p$.e = _v$42);
-                      _v$43 !== _p$.t && _$setAttribute(_el$135, "id", _p$.t = _v$43);
+                      _v$42 !== _p$.e && _$setAttribute(_el$144, "aria-labelledby", _p$.e = _v$42);
+                      _v$43 !== _p$.t && _$setAttribute(_el$145, "id", _p$.t = _v$43);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$134;
+                    return _el$144;
                   }
                 });
               }
-            }), _el$69, _co$0);
-            _$insert(_el$58, _$createComponent(Show, {
+            }), _el$77, _co$10);
+            _$insert(_el$66, _$createComponent(Show, {
               get when() {
                 return _$memo(() => !!(searching() && foundCommandCount() === 0))() && !commandModel().groups.some(group => group.section || group.scopeTitle);
               },
               get children() {
-                var _el$59 = _$getNextElement(_tmpl$18),
-                  _el$60 = _el$59.firstChild,
-                  _el$61 = _el$60.nextSibling;
-                _$insert(_el$61, () => messages().loading);
-                return _el$59;
+                var _el$67 = _$getNextElement(_tmpl$20),
+                  _el$68 = _el$67.firstChild,
+                  _el$69 = _el$68.nextSibling;
+                _$insert(_el$69, () => messages().loading);
+                return _el$67;
               }
-            }), _el$71, _co$1);
-            _$insert(_el$58, _$createComponent(Show, {
+            }), _el$79, _co$11);
+            _$insert(_el$66, _$createComponent(Show, {
               get when() {
                 return searchError();
               },
               get children() {
-                var _el$62 = _$getNextElement(_tmpl$19),
-                  _el$63 = _el$62.firstChild,
-                  _el$64 = _el$63.nextSibling,
-                  _el$65 = _el$64.nextSibling,
-                  [_el$66, _co$9] = _$getNextMarker(_el$65.nextSibling);
-                _$insert(_el$62, () => messages().error, _el$66, _co$9);
-                return _el$62;
+                var _el$70 = _$getNextElement(_tmpl$21),
+                  _el$71 = _el$70.firstChild,
+                  _el$72 = _el$71.nextSibling,
+                  _el$73 = _el$72.nextSibling,
+                  [_el$74, _co$1] = _$getNextMarker(_el$73.nextSibling);
+                _$insert(_el$70, () => messages().error, _el$74, _co$1);
+                return _el$70;
               }
-            }), _el$73, _co$10);
-            _$insert(_el$58, _$createComponent(Show, {
+            }), _el$81, _co$12);
+            _$insert(_el$66, _$createComponent(Show, {
               get when() {
                 return _$memo(() => !!(!searching() && !searchError() && foundCommandCount() === 0))() && !commandModel().groups.some(group => group.pendingRows);
               },
               get children() {
-                var _el$67 = _$getNextElement(_tmpl$20);
-                _$insert(_el$67, (() => {
+                var _el$75 = _$getNextElement(_tmpl$22);
+                _$insert(_el$75, (() => {
                   var _c$ = _$memo(() => !!!parsedCommandQuery().query.trim());
                   return () => _c$() ? messages().noResults : chatMessages().commandsNothingFound({
                     query: parsedCommandQuery().query.trim()
                   });
                 })());
-                return _el$67;
+                return _el$75;
               }
-            }), _el$75, _co$11);
-            _$insert(_el$58, _$createComponent(Show, {
+            }), _el$83, _co$13);
+            _$insert(_el$66, _$createComponent(Show, {
               get when() {
                 return commandModel().fallback?.command;
               },
               keyed: true,
               children: command => renderCommandRow(command)
-            }), _el$77, _co$12);
+            }), _el$85, _co$14);
             _$effect(_p$ => {
               var _v$28 = addSearch() ? "" : undefined,
                 _v$29 = chatMessages().commands,
                 _v$30 = searching() ? "true" : undefined;
-              _v$28 !== _p$.e && _$setAttribute(_el$54, "data-search", _p$.e = _v$28);
-              _v$29 !== _p$.t && _$setAttribute(_el$58, "aria-label", _p$.t = _v$29);
-              _v$30 !== _p$.a && _$setAttribute(_el$58, "aria-busy", _p$.a = _v$30);
+              _v$28 !== _p$.e && _$setAttribute(_el$62, "data-search", _p$.e = _v$28);
+              _v$29 !== _p$.t && _$setAttribute(_el$66, "aria-label", _p$.t = _v$29);
+              _v$30 !== _p$.a && _$setAttribute(_el$66, "aria-busy", _p$.a = _v$30);
               return _p$;
             }, {
               e: undefined,
@@ -2456,245 +2489,289 @@ export function ChatComposer(props) {
               a: undefined
             });
             _$runHydrationEvents();
-            return _el$54;
+            return _el$62;
           }
-        }), _el$83, _co$15);
+        }), _el$91, _co$17);
         _$effect(_p$ => {
           var _v$31 = hasAccessory() ? undefined : "true",
             _v$32 = suggestionsOpen() ? "hidden" : undefined,
             _v$33 = suggestionsOpen();
-          _v$31 !== _p$.e && _$setAttribute(_el$50, "data-overlay", _p$.e = _v$31);
-          _v$32 !== _p$.t && _$setStyleProperty(_el$51, "visibility", _p$.t = _v$32);
-          _v$33 !== _p$.a && _$setProperty(_el$51, "inert", _p$.a = _v$33);
+          _v$31 !== _p$.e && _$setAttribute(_el$58, "data-overlay", _p$.e = _v$31);
+          _v$32 !== _p$.t && _$setStyleProperty(_el$59, "visibility", _p$.t = _v$32);
+          _v$33 !== _p$.a && _$setProperty(_el$59, "inert", _p$.a = _v$33);
           return _p$;
         }, {
           e: undefined,
           t: undefined,
           a: undefined
         });
-        return _el$50;
+        return _el$58;
       }
-    }), _el$123, _co$30);
+    }), _el$133, _co$33);
     var _ref$1 = composerRef;
-    typeof _ref$1 === "function" ? _$use(_ref$1, _el$84) : composerRef = _el$84;
-    _$insert(_el$84, _$createComponent(Show, {
+    typeof _ref$1 === "function" ? _$use(_ref$1, _el$92) : composerRef = _el$92;
+    _$insert(_el$92, _$createComponent(Show, {
       get when() {
         return showHint();
       },
       get children() {
-        var _el$85 = _$getNextElement(_tmpl$23);
-        _$insert(_el$85, _$createComponent(Show, {
+        var _el$93 = _$getNextElement(_tmpl$25);
+        _$insert(_el$93, _$createComponent(Show, {
           get when() {
             return dictationStatus();
           },
           get fallback() {
             return (() => {
-              var _el$145 = _$getNextElement(_tmpl$33);
-              _$insert(_el$145, hint);
-              return _el$145;
+              var _el$155 = _$getNextElement(_tmpl$35);
+              _$insert(_el$155, hint);
+              return _el$155;
             })();
           },
           children: status => [(() => {
-            var _el$146 = _$getNextElement(_tmpl$34),
-              _el$147 = _el$146.firstChild,
-              _el$148 = _el$147.nextSibling;
-            _$insert(_el$148, () => status().text);
+            var _el$156 = _$getNextElement(_tmpl$36),
+              _el$157 = _el$156.firstChild,
+              _el$158 = _el$157.nextSibling;
+            _$insert(_el$158, () => status().text);
             _$effect(_p$ => {
               var _v$44 = dictation() ?? undefined,
                 _v$45 = status().icon;
-              _v$44 !== _p$.e && _$setAttribute(_el$146, "data-state", _p$.e = _v$44);
-              _v$45 !== _p$.t && _$className(_el$147, _p$.t = _v$45);
+              _v$44 !== _p$.e && _$setAttribute(_el$156, "data-state", _p$.e = _v$44);
+              _v$45 !== _p$.t && _$className(_el$157, _p$.t = _v$45);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$146;
+            return _el$156;
           })(), _$createComponent(Show, {
             get when() {
               return _$memo(() => dictation() === "refined")() ? props.microphone?.onRestoreOriginal : undefined;
             },
             children: restore => (() => {
-              var _el$149 = _$getNextElement(_tmpl$35);
-              _el$149.$$click = () => reportChatFailure(restore(), props.onError);
-              _el$149.$$mousedown = keepFieldFocus;
-              _$insert(_el$149, () => chatMessages().restoreOriginal);
-              _$effect(() => _$setProperty(_el$149, "disabled", microphoneDisabled()));
+              var _el$159 = _$getNextElement(_tmpl$37);
+              _el$159.$$click = () => reportChatFailure(restore(), props.onError);
+              _el$159.$$mousedown = keepFieldFocus;
+              _$insert(_el$159, () => chatMessages().restoreOriginal);
+              _$effect(() => _$setProperty(_el$159, "disabled", microphoneDisabled()));
               _$runHydrationEvents();
-              return _el$149;
+              return _el$159;
             })()
           })]
         }));
-        return _el$85;
+        return _el$93;
       }
-    }), _el$109, _co$24);
-    _$insert(_el$84, _$createComponent(Show, {
+    }), _el$117, _co$26);
+    _$insert(_el$92, _$createComponent(Show, {
+      get when() {
+        return props.reply;
+      },
+      children: reply => (() => {
+        var _el$160 = _$getNextElement(_tmpl$38),
+          _el$162 = _el$160.firstChild,
+          [_el$163, _co$39] = _$getNextMarker(_el$162.nextSibling),
+          _el$161 = _el$163.nextSibling;
+        _$insert(_el$160, _$createComponent(Show, {
+          get when() {
+            return reply().onSelect;
+          },
+          get fallback() {
+            return (() => {
+              var _el$164 = _$getNextElement(_tmpl$39);
+              _$insert(_el$164, () => replyQuote(reply()));
+              return _el$164;
+            })();
+          },
+          children: select => (() => {
+            var _el$165 = _$getNextElement(_tmpl$40);
+            _el$165.$$click = () => select()();
+            _$insert(_el$165, () => replyQuote(reply()));
+            _$runHydrationEvents();
+            return _el$165;
+          })()
+        }), _el$163, _co$39);
+        _el$161.$$click = () => reply().onCancel();
+        _el$161.$$mousedown = keepFieldFocus;
+        _$effect(_p$ => {
+          var _v$46 = chatMessages().cancelReply,
+            _v$47 = chatMessages().cancelReply;
+          _v$46 !== _p$.e && _$setAttribute(_el$161, "aria-label", _p$.e = _v$46);
+          _v$47 !== _p$.t && _$setAttribute(_el$161, "title", _p$.t = _v$47);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        _$runHydrationEvents();
+        return _el$160;
+      })()
+    }), _el$119, _co$27);
+    _$insert(_el$92, _$createComponent(Show, {
       get when() {
         return attachments().length > 0;
       },
       get children() {
-        var _el$86 = _$getNextElement(_tmpl$24);
-        _$insert(_el$86, _$createComponent(For, {
+        var _el$94 = _$getNextElement(_tmpl$26);
+        _$insert(_el$94, _$createComponent(For, {
           get each() {
             return attachments();
           },
           children: attachment => (() => {
-            var _el$150 = _$getNextElement(_tmpl$37),
-              _el$151 = _el$150.firstChild,
-              _el$152 = _el$151.firstChild,
-              [_el$153, _co$36] = _$getNextMarker(_el$152.nextSibling),
-              _el$154 = _el$153.nextSibling,
-              [_el$155, _co$37] = _$getNextMarker(_el$154.nextSibling),
-              _el$157 = _el$151.nextSibling,
-              [_el$158, _co$38] = _$getNextMarker(_el$157.nextSibling);
-            _$insert(_el$151, _$createComponent(Show, {
+            var _el$166 = _$getNextElement(_tmpl$42),
+              _el$167 = _el$166.firstChild,
+              _el$168 = _el$167.firstChild,
+              [_el$169, _co$40] = _$getNextMarker(_el$168.nextSibling),
+              _el$170 = _el$169.nextSibling,
+              [_el$171, _co$41] = _$getNextMarker(_el$170.nextSibling),
+              _el$173 = _el$167.nextSibling,
+              [_el$174, _co$42] = _$getNextMarker(_el$173.nextSibling);
+            _$insert(_el$167, _$createComponent(Show, {
               get when() {
                 return attachment.href;
               },
               get fallback() {
                 return (() => {
-                  var _el$159 = _$getNextElement(_tmpl$39),
-                    _el$161 = _el$159.firstChild,
-                    [_el$162, _co$39] = _$getNextMarker(_el$161.nextSibling),
-                    _el$163 = _el$162.nextSibling,
-                    [_el$164, _co$40] = _$getNextMarker(_el$163.nextSibling);
-                  _$insert(_el$159, _$createComponent(Show, {
+                  var _el$175 = _$getNextElement(_tmpl$44),
+                    _el$177 = _el$175.firstChild,
+                    [_el$178, _co$43] = _$getNextMarker(_el$177.nextSibling),
+                    _el$179 = _el$178.nextSibling,
+                    [_el$180, _co$44] = _$getNextMarker(_el$179.nextSibling);
+                  _$insert(_el$175, _$createComponent(Show, {
                     get when() {
                       return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                     },
                     get fallback() {
                       return (() => {
-                        var _el$165 = _$getNextElement(_tmpl$3);
-                        _$effect(() => _$className(_el$165, attachmentIcon(attachment)));
-                        return _el$165;
+                        var _el$181 = _$getNextElement(_tmpl$3);
+                        _$effect(() => _$className(_el$181, attachmentIcon(attachment)));
+                        return _el$181;
                       })();
                     },
                     get children() {
-                      var _el$160 = _$getNextElement(_tmpl$38);
+                      var _el$176 = _$getNextElement(_tmpl$43);
                       _$effect(_p$ => {
-                        var _v$48 = attachment.previewUrl,
-                          _v$49 = attachment.alt ?? "";
-                        _v$48 !== _p$.e && _$setAttribute(_el$160, "src", _p$.e = _v$48);
-                        _v$49 !== _p$.t && _$setAttribute(_el$160, "alt", _p$.t = _v$49);
+                        var _v$50 = attachment.previewUrl,
+                          _v$51 = attachment.alt ?? "";
+                        _v$50 !== _p$.e && _$setAttribute(_el$176, "src", _p$.e = _v$50);
+                        _v$51 !== _p$.t && _$setAttribute(_el$176, "alt", _p$.t = _v$51);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$160;
+                      return _el$176;
                     }
-                  }), _el$162, _co$39);
-                  _$insert(_el$159, () => renderAttachmentCopy(attachment), _el$164, _co$40);
-                  return _el$159;
+                  }), _el$178, _co$43);
+                  _$insert(_el$175, () => renderAttachmentCopy(attachment), _el$180, _co$44);
+                  return _el$175;
                 })();
               },
               children: href => (() => {
-                var _el$166 = _$getNextElement(_tmpl$40),
-                  _el$168 = _el$166.firstChild,
-                  [_el$169, _co$41] = _$getNextMarker(_el$168.nextSibling),
-                  _el$170 = _el$169.nextSibling,
-                  [_el$171, _co$42] = _$getNextMarker(_el$170.nextSibling);
-                _$insert(_el$166, _$createComponent(Show, {
+                var _el$182 = _$getNextElement(_tmpl$45),
+                  _el$184 = _el$182.firstChild,
+                  [_el$185, _co$45] = _$getNextMarker(_el$184.nextSibling),
+                  _el$186 = _el$185.nextSibling,
+                  [_el$187, _co$46] = _$getNextMarker(_el$186.nextSibling);
+                _$insert(_el$182, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                   },
                   get fallback() {
                     return (() => {
-                      var _el$172 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$172, attachmentIcon(attachment)));
-                      return _el$172;
+                      var _el$188 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$188, attachmentIcon(attachment)));
+                      return _el$188;
                     })();
                   },
                   get children() {
-                    var _el$167 = _$getNextElement(_tmpl$38);
+                    var _el$183 = _$getNextElement(_tmpl$43);
                     _$effect(_p$ => {
-                      var _v$50 = attachment.previewUrl,
-                        _v$51 = attachment.alt ?? "";
-                      _v$50 !== _p$.e && _$setAttribute(_el$167, "src", _p$.e = _v$50);
-                      _v$51 !== _p$.t && _$setAttribute(_el$167, "alt", _p$.t = _v$51);
+                      var _v$52 = attachment.previewUrl,
+                        _v$53 = attachment.alt ?? "";
+                      _v$52 !== _p$.e && _$setAttribute(_el$183, "src", _p$.e = _v$52);
+                      _v$53 !== _p$.t && _$setAttribute(_el$183, "alt", _p$.t = _v$53);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$167;
+                    return _el$183;
                   }
-                }), _el$169, _co$41);
-                _$insert(_el$166, () => renderAttachmentCopy(attachment), _el$171, _co$42);
+                }), _el$185, _co$45);
+                _$insert(_el$182, () => renderAttachmentCopy(attachment), _el$187, _co$46);
                 _$effect(_p$ => {
-                  var _v$52 = href(),
-                    _v$53 = chatMessages().openInNewTab({
+                  var _v$54 = href(),
+                    _v$55 = chatMessages().openInNewTab({
                       name: attachment.name
                     });
-                  _v$52 !== _p$.e && _$setAttribute(_el$166, "href", _p$.e = _v$52);
-                  _v$53 !== _p$.t && _$setAttribute(_el$166, "aria-label", _p$.t = _v$53);
+                  _v$54 !== _p$.e && _$setAttribute(_el$182, "href", _p$.e = _v$54);
+                  _v$55 !== _p$.t && _$setAttribute(_el$182, "aria-label", _p$.t = _v$55);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$166;
+                return _el$182;
               })()
-            }), _el$153, _co$36);
-            _$insert(_el$151, _$createComponent(Show, {
+            }), _el$169, _co$40);
+            _$insert(_el$167, _$createComponent(Show, {
               get when() {
                 return attachment.action;
               },
               children: action => (() => {
-                var _el$173 = _$getNextElement(_tmpl$41),
-                  _el$174 = _el$173.firstChild,
-                  [_el$175, _co$43] = _$getNextMarker(_el$174.nextSibling),
-                  _el$176 = _el$175.nextSibling,
-                  [_el$177, _co$44] = _$getNextMarker(_el$176.nextSibling);
-                _el$173.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
-                _$insert(_el$173, _$createComponent(Show, {
+                var _el$189 = _$getNextElement(_tmpl$46),
+                  _el$190 = _el$189.firstChild,
+                  [_el$191, _co$47] = _$getNextMarker(_el$190.nextSibling),
+                  _el$192 = _el$191.nextSibling,
+                  [_el$193, _co$48] = _$getNextMarker(_el$192.nextSibling);
+                _el$189.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
+                _$insert(_el$189, _$createComponent(Show, {
                   get when() {
                     return action().icon;
                   },
                   children: icon => (() => {
-                    var _el$178 = _$getNextElement(_tmpl$3);
-                    _$effect(() => _$className(_el$178, icon()));
-                    return _el$178;
+                    var _el$194 = _$getNextElement(_tmpl$3);
+                    _$effect(() => _$className(_el$194, icon()));
+                    return _el$194;
                   })()
-                }), _el$175, _co$43);
-                _$insert(_el$173, () => action().label, _el$177, _co$44);
-                _$effect(() => _$setProperty(_el$173, "disabled", blocked() || action().disabled));
+                }), _el$191, _co$47);
+                _$insert(_el$189, () => action().label, _el$193, _co$48);
+                _$effect(() => _$setProperty(_el$189, "disabled", blocked() || action().disabled));
                 _$runHydrationEvents();
-                return _el$173;
+                return _el$189;
               })()
-            }), _el$155, _co$37);
-            _$insert(_el$150, _$createComponent(Show, {
+            }), _el$171, _co$41);
+            _$insert(_el$166, _$createComponent(Show, {
               get when() {
                 return props.onAttachmentsChange;
               },
               get children() {
-                var _el$156 = _$getNextElement(_tmpl$36);
-                _el$156.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
+                var _el$172 = _$getNextElement(_tmpl$41);
+                _el$172.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
                 _$effect(_p$ => {
-                  var _v$46 = selectMessages().removeNamed({
+                  var _v$48 = selectMessages().removeNamed({
                       name: attachment.name
                     }),
-                    _v$47 = blocked();
-                  _v$46 !== _p$.e && _$setAttribute(_el$156, "aria-label", _p$.e = _v$46);
-                  _v$47 !== _p$.t && _$setProperty(_el$156, "disabled", _p$.t = _v$47);
+                    _v$49 = blocked();
+                  _v$48 !== _p$.e && _$setAttribute(_el$172, "aria-label", _p$.e = _v$48);
+                  _v$49 !== _p$.t && _$setProperty(_el$172, "disabled", _p$.t = _v$49);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
                 _$runHydrationEvents();
-                return _el$156;
+                return _el$172;
               }
-            }), _el$158, _co$38);
-            _$effect(() => _el$151.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
-            return _el$150;
+            }), _el$174, _co$42);
+            _$effect(() => _el$167.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
+            return _el$166;
           })()
         }));
-        _$effect(() => _$setAttribute(_el$86, "aria-label", chatMessages().attachments));
-        return _el$86;
+        _$effect(() => _$setAttribute(_el$94, "aria-label", chatMessages().attachments));
+        return _el$94;
       }
-    }), _el$111, _co$25);
-    _$insert(_el$84, _$createComponent(Show, {
+    }), _el$121, _co$28);
+    _$insert(_el$92, _$createComponent(Show, {
       get when() {
         return conversation();
       },
@@ -2704,38 +2781,38 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$179 = _$getNextElement(_tmpl$25),
-              _el$180 = _el$179.firstChild,
-              _el$181 = _el$180.nextSibling,
-              [_el$182, _co$45] = _$getNextMarker(_el$181.nextSibling);
-            _$insert(_el$179, () => props.error, _el$182, _co$45);
-            return _el$179;
+            var _el$195 = _$getNextElement(_tmpl$27),
+              _el$196 = _el$195.firstChild,
+              _el$197 = _el$196.nextSibling,
+              [_el$198, _co$49] = _$getNextMarker(_el$197.nextSibling);
+            _$insert(_el$195, () => props.error, _el$198, _co$49);
+            return _el$195;
           }
         }), _$memo(formatRow), (() => {
-          var _el$183 = _$getNextElement(_tmpl$42);
-          _$insert(_el$183, _$createComponent(Show, {
+          var _el$199 = _$getNextElement(_tmpl$47);
+          _$insert(_el$199, _$createComponent(Show, {
             get when() {
               return footer();
             },
             get fallback() {
               return [(() => {
-                var _el$184 = _$getNextElement(_tmpl$43),
-                  _el$185 = _el$184.firstChild,
-                  [_el$186, _co$46] = _$getNextMarker(_el$185.nextSibling),
-                  _el$187 = _el$186.nextSibling,
-                  [_el$188, _co$47] = _$getNextMarker(_el$187.nextSibling),
-                  _el$189 = _el$188.nextSibling,
-                  [_el$190, _co$48] = _$getNextMarker(_el$189.nextSibling),
-                  _el$191 = _el$190.nextSibling,
-                  [_el$192, _co$49] = _$getNextMarker(_el$191.nextSibling),
-                  _el$193 = _el$192.nextSibling,
-                  [_el$194, _co$50] = _$getNextMarker(_el$193.nextSibling),
-                  _el$195 = _el$194.nextSibling,
-                  [_el$196, _co$51] = _$getNextMarker(_el$195.nextSibling),
-                  _el$197 = _el$196.nextSibling,
-                  [_el$198, _co$52] = _$getNextMarker(_el$197.nextSibling);
-                _$insert(_el$184, () => props.footerTools, _el$186, _co$46);
-                _$insert(_el$184, _$createComponent(Show, {
+                var _el$200 = _$getNextElement(_tmpl$48),
+                  _el$201 = _el$200.firstChild,
+                  [_el$202, _co$50] = _$getNextMarker(_el$201.nextSibling),
+                  _el$203 = _el$202.nextSibling,
+                  [_el$204, _co$51] = _$getNextMarker(_el$203.nextSibling),
+                  _el$205 = _el$204.nextSibling,
+                  [_el$206, _co$52] = _$getNextMarker(_el$205.nextSibling),
+                  _el$207 = _el$206.nextSibling,
+                  [_el$208, _co$53] = _$getNextMarker(_el$207.nextSibling),
+                  _el$209 = _el$208.nextSibling,
+                  [_el$210, _co$54] = _$getNextMarker(_el$209.nextSibling),
+                  _el$211 = _el$210.nextSibling,
+                  [_el$212, _co$55] = _$getNextMarker(_el$211.nextSibling),
+                  _el$213 = _el$212.nextSibling,
+                  [_el$214, _co$56] = _$getNextMarker(_el$213.nextSibling);
+                _$insert(_el$200, () => props.footerTools, _el$202, _co$50);
+                _$insert(_el$200, _$createComponent(Show, {
                   get when() {
                     return addOpensCommands();
                   },
@@ -2752,11 +2829,11 @@ export function ChatComposer(props) {
                   get children() {
                     return addSearchButton();
                   }
-                }), _el$188, _co$47);
-                _$insert(_el$184, fileInput, _el$190, _co$48);
-                _$insert(_el$184, formatToggle, _el$192, _co$49);
-                _$insert(_el$184, emojiButton, _el$194, _co$50);
-                _$insert(_el$184, _$createComponent(Show, {
+                }), _el$204, _co$51);
+                _$insert(_el$200, fileInput, _el$206, _co$52);
+                _$insert(_el$200, formatToggle, _el$208, _co$53);
+                _$insert(_el$200, emojiButton, _el$210, _co$54);
+                _$insert(_el$200, _$createComponent(Show, {
                   get when() {
                     return (props.models?.length ?? 0) > 0;
                   },
@@ -2802,22 +2879,22 @@ export function ChatComposer(props) {
                       }
                     });
                   }
-                }), _el$196, _co$51);
-                _$insert(_el$184, () => props.modelDetails, _el$198, _co$52);
-                return _el$184;
+                }), _el$212, _co$55);
+                _$insert(_el$200, () => props.modelDetails, _el$214, _co$56);
+                return _el$200;
               })(), (() => {
-                var _el$199 = _$getNextElement(_tmpl$44),
-                  _el$200 = _el$199.firstChild,
-                  [_el$201, _co$53] = _$getNextMarker(_el$200.nextSibling),
-                  _el$202 = _el$201.nextSibling,
-                  [_el$203, _co$54] = _$getNextMarker(_el$202.nextSibling),
-                  _el$204 = _el$203.nextSibling,
-                  [_el$205, _co$55] = _$getNextMarker(_el$204.nextSibling),
-                  _el$206 = _el$205.nextSibling,
-                  [_el$207, _co$56] = _$getNextMarker(_el$206.nextSibling),
-                  _el$208 = _el$207.nextSibling,
-                  [_el$209, _co$57] = _$getNextMarker(_el$208.nextSibling);
-                _$insert(_el$199, _$createComponent(For, {
+                var _el$215 = _$getNextElement(_tmpl$49),
+                  _el$216 = _el$215.firstChild,
+                  [_el$217, _co$57] = _$getNextMarker(_el$216.nextSibling),
+                  _el$218 = _el$217.nextSibling,
+                  [_el$219, _co$58] = _$getNextMarker(_el$218.nextSibling),
+                  _el$220 = _el$219.nextSibling,
+                  [_el$221, _co$59] = _$getNextMarker(_el$220.nextSibling),
+                  _el$222 = _el$221.nextSibling,
+                  [_el$223, _co$60] = _$getNextMarker(_el$222.nextSibling),
+                  _el$224 = _el$223.nextSibling,
+                  [_el$225, _co$61] = _$getNextMarker(_el$224.nextSibling);
+                _$insert(_el$215, _$createComponent(For, {
                   get each() {
                     return props.contextActions;
                   },
@@ -2841,13 +2918,13 @@ export function ChatComposer(props) {
                     },
                     onClick: () => reportChatFailure(() => executeChatAction(action), props.onError),
                     get children() {
-                      var _el$210 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$210, action.icon ?? "ti ti-dots"));
-                      return _el$210;
+                      var _el$226 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$226, action.icon ?? "ti ti-dots"));
+                      return _el$226;
                     }
                   })
-                }), _el$201, _co$53);
-                _$insert(_el$199, _$createComponent(Show, {
+                }), _el$217, _co$57);
+                _$insert(_el$215, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => !!hasContextUsage())() ? props.contextUsage ?? {} : undefined;
                   },
@@ -2859,18 +2936,18 @@ export function ChatComposer(props) {
                       return props.onError;
                     }
                   }))
-                }), _el$203, _co$54);
-                _$insert(_el$199, () => props.submitTools, _el$205, _co$55);
-                _$insert(_el$199, microphoneControl, _el$207, _co$56);
-                _$insert(_el$199, sendControl, _el$209, _co$57);
-                return _el$199;
+                }), _el$219, _co$58);
+                _$insert(_el$215, () => props.submitTools, _el$221, _co$59);
+                _$insert(_el$215, microphoneControl, _el$223, _co$60);
+                _$insert(_el$215, sendControl, _el$225, _co$61);
+                return _el$215;
               })()];
             },
             get children() {
               return footer();
             }
           }));
-          return _el$183;
+          return _el$199;
         })()];
       },
       get children() {
@@ -2879,43 +2956,43 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$87 = _$getNextElement(_tmpl$25),
-              _el$88 = _el$87.firstChild,
-              _el$89 = _el$88.nextSibling,
-              [_el$90, _co$16] = _$getNextMarker(_el$89.nextSibling);
-            _$insert(_el$87, () => props.error, _el$90, _co$16);
-            return _el$87;
+            var _el$95 = _$getNextElement(_tmpl$27),
+              _el$96 = _el$95.firstChild,
+              _el$97 = _el$96.nextSibling,
+              [_el$98, _co$18] = _$getNextMarker(_el$97.nextSibling);
+            _$insert(_el$95, () => props.error, _el$98, _co$18);
+            return _el$95;
           }
         }), _$memo(() => formatRow()), (() => {
-          var _el$91 = _$getNextElement(_tmpl$26),
-            _el$102 = _el$91.firstChild,
-            [_el$103, _co$21] = _$getNextMarker(_el$102.nextSibling),
+          var _el$99 = _$getNextElement(_tmpl$28),
+            _el$110 = _el$99.firstChild,
+            [_el$111, _co$23] = _$getNextMarker(_el$110.nextSibling),
+            _el$112 = _el$111.nextSibling,
+            [_el$113, _co$24] = _$getNextMarker(_el$112.nextSibling),
+            _el$100 = _el$113.nextSibling,
+            _el$108 = _el$100.firstChild,
+            [_el$109, _co$22] = _$getNextMarker(_el$108.nextSibling),
+            _el$101 = _el$109.nextSibling,
+            _el$102 = _el$101.firstChild,
+            [_el$103, _co$19] = _$getNextMarker(_el$102.nextSibling),
             _el$104 = _el$103.nextSibling,
-            [_el$105, _co$22] = _$getNextMarker(_el$104.nextSibling),
-            _el$92 = _el$105.nextSibling,
-            _el$100 = _el$92.firstChild,
-            [_el$101, _co$20] = _$getNextMarker(_el$100.nextSibling),
-            _el$93 = _el$101.nextSibling,
-            _el$94 = _el$93.firstChild,
-            [_el$95, _co$17] = _$getNextMarker(_el$94.nextSibling),
-            _el$96 = _el$95.nextSibling,
-            [_el$97, _co$18] = _$getNextMarker(_el$96.nextSibling),
-            _el$98 = _el$97.nextSibling,
-            [_el$99, _co$19] = _$getNextMarker(_el$98.nextSibling),
-            _el$106 = _el$92.nextSibling,
-            [_el$107, _co$23] = _$getNextMarker(_el$106.nextSibling);
-          _$insert(_el$91, attachControl, _el$103, _co$21);
-          _$insert(_el$91, fileInput, _el$105, _co$22);
-          _$insert(_el$92, field, _el$101, _co$20);
-          _$insert(_el$93, formatToggle, _el$95, _co$17);
-          _$insert(_el$93, emojiButton, _el$97, _co$18);
-          _$insert(_el$93, microphoneControl, _el$99, _co$19);
-          _$insert(_el$91, sendControl, _el$107, _co$23);
-          return _el$91;
+            [_el$105, _co$20] = _$getNextMarker(_el$104.nextSibling),
+            _el$106 = _el$105.nextSibling,
+            [_el$107, _co$21] = _$getNextMarker(_el$106.nextSibling),
+            _el$114 = _el$100.nextSibling,
+            [_el$115, _co$25] = _$getNextMarker(_el$114.nextSibling);
+          _$insert(_el$99, attachControl, _el$111, _co$23);
+          _$insert(_el$99, fileInput, _el$113, _co$24);
+          _$insert(_el$100, field, _el$109, _co$22);
+          _$insert(_el$101, formatToggle, _el$103, _co$19);
+          _$insert(_el$101, emojiButton, _el$105, _co$20);
+          _$insert(_el$101, microphoneControl, _el$107, _co$21);
+          _$insert(_el$99, sendControl, _el$115, _co$25);
+          return _el$99;
         })()];
       }
-    }), _el$113, _co$26);
-    _$insert(_el$84, _$createComponent(Show, {
+    }), _el$123, _co$29);
+    _$insert(_el$92, _$createComponent(Show, {
       get when() {
         return props.fileSelection;
       },
@@ -2934,60 +3011,60 @@ export function ChatComposer(props) {
         },
         onDrop: files => void runFiles(files)
       })
-    }), _el$115, _co$27);
-    _$insert(_el$116, _$createComponent(Show, {
+    }), _el$125, _co$30);
+    _$insert(_el$126, _$createComponent(Show, {
       get when() {
         return suggestionAnnouncement();
       },
       keyed: true,
       children: announced => (() => {
-        var _el$211 = _$getNextElement(_tmpl$10);
-        _$insert(_el$211, () => announced.text);
-        return _el$211;
+        var _el$227 = _$getNextElement(_tmpl$10);
+        _$insert(_el$227, () => announced.text);
+        return _el$227;
       })()
     }));
-    _$insert(_el$117, _$createComponent(Show, {
+    _$insert(_el$127, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!!suggestionsOpen())() && commandStatus();
       },
       children: status => (() => {
-        var _el$212 = _$getNextElement(_tmpl$45),
-          _el$213 = _el$212.firstChild,
-          _el$214 = _el$213.nextSibling;
-        _$insert(_el$214, () => status().text);
+        var _el$228 = _$getNextElement(_tmpl$50),
+          _el$229 = _el$228.firstChild,
+          _el$230 = _el$229.nextSibling;
+        _$insert(_el$230, () => status().text);
         _$effect(_p$ => {
-          var _v$54 = status().tone,
-            _v$55 = status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle";
-          _v$54 !== _p$.e && _$setAttribute(_el$212, "data-tone", _p$.e = _v$54);
-          _v$55 !== _p$.t && _$className(_el$213, _p$.t = _v$55);
+          var _v$56 = status().tone,
+            _v$57 = status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle";
+          _v$56 !== _p$.e && _$setAttribute(_el$228, "data-tone", _p$.e = _v$56);
+          _v$57 !== _p$.t && _$className(_el$229, _p$.t = _v$57);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$212;
+        return _el$228;
       })()
-    }), _el$119, _co$28);
-    _$insert(_el$117, _$createComponent(Show, {
+    }), _el$129, _co$31);
+    _$insert(_el$127, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!suggestionsOpen())() && announcement();
       },
       keyed: true,
       children: announced => (() => {
-        var _el$215 = _$getNextElement(_tmpl$46);
-        _$insert(_el$215, () => announced.text);
-        return _el$215;
+        var _el$231 = _$getNextElement(_tmpl$51);
+        _$insert(_el$231, () => announced.text);
+        return _el$231;
       })()
-    }), _el$121, _co$29);
+    }), _el$131, _co$32);
     _$effect(_p$ => {
       var _v$34 = `k2b-chat-composer ${props.class ?? ""}`,
         _v$35 = running() ? "true" : undefined,
         _v$36 = conversation() ? "conversation" : undefined,
         _v$37 = props.label ?? chatMessages().messageComposer;
-      _v$34 !== _p$.e && _$className(_el$84, _p$.e = _v$34);
-      _v$35 !== _p$.t && _$setAttribute(_el$84, "data-running", _p$.t = _v$35);
-      _v$36 !== _p$.a && _$setAttribute(_el$84, "data-variant", _p$.a = _v$36);
-      _v$37 !== _p$.o && _$setAttribute(_el$84, "aria-label", _p$.o = _v$37);
+      _v$34 !== _p$.e && _$className(_el$92, _p$.e = _v$34);
+      _v$35 !== _p$.t && _$setAttribute(_el$92, "data-running", _p$.t = _v$35);
+      _v$36 !== _p$.a && _$setAttribute(_el$92, "data-variant", _p$.a = _v$36);
+      _v$37 !== _p$.o && _$setAttribute(_el$92, "aria-label", _p$.o = _v$37);
       return _p$;
     }, {
       e: undefined,
@@ -2995,7 +3072,7 @@ export function ChatComposer(props) {
       a: undefined,
       o: undefined
     });
-    return _el$49;
+    return _el$57;
   })();
 }
 _$delegateEvents(["input", "click", "keyup", "beforeinput", "keydown", "mousedown", "focusout"]);