@k2b/ui 0.46.0 → 0.48.0

package/dist/browser/chat/ChatComposer.js

@@ -58,17 +58,18 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span><strong>`),
   _tmpl$41 = /*#__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$42 = /*#__PURE__*/_$template(`<div class=k2b-message-row__quote>`),
   _tmpl$43 = /*#__PURE__*/_$template(`<button type=button class=k2b-message-row__quote>`),
-  _tmpl$44 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$45 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$46 = /*#__PURE__*/_$template(`<img>`),
-  _tmpl$47 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
-  _tmpl$48 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
-  _tmpl$49 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
-  _tmpl$50 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
-  _tmpl$51 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$52 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$53 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__status-line><i aria-hidden=true></i><span>`),
-  _tmpl$54 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`);
+  _tmpl$44 = /*#__PURE__*/_$template(`<span class="k2b-chat-composer__attachment-action k2b-chat-composer__attachment-progress"><!$><!/><!$><!/>`),
+  _tmpl$45 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$46 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$47 = /*#__PURE__*/_$template(`<img>`),
+  _tmpl$48 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
+  _tmpl$49 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
+  _tmpl$50 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
+  _tmpl$51 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
+  _tmpl$52 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$53 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$54 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__status-line><i aria-hidden=true></i><span>`),
+  _tmpl$55 = /*#__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";
@@ -86,6 +87,7 @@ import { SelectChip } from "../inputs/SelectChip";
 import { useSelectMessages } from "../inputs/select-messages";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
+import { ProgressRing } from "../surfaces/ProgressRing";
 import { ChatContextUsage as ContextUsage } from "./ChatPrimitives";
 import { chatCommandKey, conversationEnterAction, executeChatAction, nextChatCommandIndex, reportChatFailure, runChatSubmission } from "./chat-behavior";
 import { useChatMessages } from "./chat-messages";
@@ -246,7 +248,10 @@ export function ChatComposer(props) {
   const [microphoneMenuOpen, setMicrophoneMenuOpen] = createSignal(false);
   const dictation = () => props.microphone?.dictation ?? null;
   const showHint = () => conversation() || dictation() !== null || hasContent(hint.toArray());
-  const state = () => props.state ?? "idle";
+
+  // Handlers such as sending read these outside any owner. A host's conditional prop is a getter that creates a
+  // computation on each read, which would never be disposed there; memos read it inside the composer's owner.
+  const state = createMemo(() => props.state ?? "idle");
   const running = () => state() === "running";
   const stopping = () => state() === "stopping";
   const runningSubmitIntent = () => props.runningSubmitIntent ?? "steer";
@@ -933,7 +938,7 @@ export function ChatComposer(props) {
     selectedCommandKey();
     setAnnouncement(undefined);
   });
-  const busy = () => Boolean(props.disabled || stopping() || state() === "submitting" || executing() || addingFiles());
+  const busy = createMemo(() => Boolean(props.disabled || stopping() || state() === "submitting" || executing() || addingFiles()));
   const blocked = () => busy() || submitting();
   /** The conversation field stays editable while a message is sent, so it keeps the focus and a phone its keyboard. */
   const editBlocked = () => conversation() ? busy() : blocked();
@@ -947,7 +952,7 @@ export function ChatComposer(props) {
   }));
   const hasDraft = () => Boolean(props.value.trim() || !running() && attachments().length > 0);
   /** The draft may go out now, apart from a submission that is already on its way. */
-  const submittable = () => !busy() && !props.submitDisabled && hasDraft() && !(props.dictation && liveDictation.active()) && !(running() && runningSubmitIntent() === "steer" && mentions().length);
+  const submittable = createMemo(() => !busy() && !props.submitDisabled && hasDraft() && !(props.dictation && liveDictation.active()) && !(running() && runningSubmitIntent() === "steer" && mentions().length));
   const canSubmit = () => !submitting() && submittable();
   const canSelectFiles = () => Boolean(props.fileSelection && !props.fileSelection.disabled && !running() && !blocked());
   const hasAddMenu = () => Boolean(props.fileSelection || props.menuActions?.length);
@@ -2501,14 +2506,14 @@ export function ChatComposer(props) {
                   })()
                 }), _el$146, _co$36);
                 _$effect(_p$ => {
-                  var _v$40 = `${commandListId}-${index()}`,
-                    _v$41 = index() === selectedCommandIndex(),
-                    _v$42 = emojiName(entry, locale()),
-                    _v$43 = index() === selectedCommandIndex() ? "true" : undefined;
-                  _v$40 !== _p$.e && _$setAttribute(_el$142, "id", _p$.e = _v$40);
-                  _v$41 !== _p$.t && _$setAttribute(_el$142, "aria-selected", _p$.t = _v$41);
-                  _v$42 !== _p$.a && _$setAttribute(_el$142, "aria-label", _p$.a = _v$42);
-                  _v$43 !== _p$.o && _$setAttribute(_el$142, "data-active", _p$.o = _v$43);
+                  var _v$42 = `${commandListId}-${index()}`,
+                    _v$43 = index() === selectedCommandIndex(),
+                    _v$44 = emojiName(entry, locale()),
+                    _v$45 = index() === selectedCommandIndex() ? "true" : undefined;
+                  _v$42 !== _p$.e && _$setAttribute(_el$142, "id", _p$.e = _v$42);
+                  _v$43 !== _p$.t && _$setAttribute(_el$142, "aria-selected", _p$.t = _v$43);
+                  _v$44 !== _p$.a && _$setAttribute(_el$142, "aria-label", _p$.a = _v$44);
+                  _v$45 !== _p$.o && _$setAttribute(_el$142, "data-active", _p$.o = _v$45);
                   return _p$;
                 }, {
                   e: undefined,
@@ -2558,14 +2563,14 @@ export function ChatComposer(props) {
                   }
                 }), _el$157, _co$38);
                 _$effect(_p$ => {
-                  var _v$44 = `${commandListId}-${index()}`,
-                    _v$45 = index() === selectedCommandIndex(),
-                    _v$46 = index() === selectedCommandIndex() ? "true" : undefined,
-                    _v$47 = person.agent ? "ti ti-robot" : "ti ti-user";
-                  _v$44 !== _p$.e && _$setAttribute(_el$152, "id", _p$.e = _v$44);
-                  _v$45 !== _p$.t && _$setAttribute(_el$152, "aria-selected", _p$.t = _v$45);
-                  _v$46 !== _p$.a && _$setAttribute(_el$152, "data-active", _p$.a = _v$46);
-                  _v$47 !== _p$.o && _$className(_el$153, _p$.o = _v$47);
+                  var _v$46 = `${commandListId}-${index()}`,
+                    _v$47 = index() === selectedCommandIndex(),
+                    _v$48 = index() === selectedCommandIndex() ? "true" : undefined,
+                    _v$49 = person.agent ? "ti ti-robot" : "ti ti-user";
+                  _v$46 !== _p$.e && _$setAttribute(_el$152, "id", _p$.e = _v$46);
+                  _v$47 !== _p$.t && _$setAttribute(_el$152, "aria-selected", _p$.t = _v$47);
+                  _v$48 !== _p$.a && _$setAttribute(_el$152, "data-active", _p$.a = _v$48);
+                  _v$49 !== _p$.o && _$className(_el$153, _p$.o = _v$49);
                   return _p$;
                 }, {
                   e: undefined,
@@ -2708,10 +2713,10 @@ export function ChatComposer(props) {
                       children: () => _$getNextElement(_tmpl$37)
                     }), _el$167, _co$41);
                     _$effect(_p$ => {
-                      var _v$48 = headingId(),
-                        _v$49 = headingId();
-                      _v$48 !== _p$.e && _$setAttribute(_el$158, "aria-labelledby", _p$.e = _v$48);
-                      _v$49 !== _p$.t && _$setAttribute(_el$159, "id", _p$.t = _v$49);
+                      var _v$50 = headingId(),
+                        _v$51 = headingId();
+                      _v$50 !== _p$.e && _$setAttribute(_el$158, "aria-labelledby", _p$.e = _v$50);
+                      _v$51 !== _p$.t && _$setAttribute(_el$159, "id", _p$.t = _v$51);
                       return _p$;
                     }, {
                       e: undefined,
@@ -2828,10 +2833,10 @@ export function ChatComposer(props) {
               _el$172 = _el$171.nextSibling;
             _$insert(_el$172, () => status().text);
             _$effect(_p$ => {
-              var _v$50 = dictation() ?? undefined,
-                _v$51 = status().icon;
-              _v$50 !== _p$.e && _$setAttribute(_el$170, "data-state", _p$.e = _v$50);
-              _v$51 !== _p$.t && _$className(_el$171, _p$.t = _v$51);
+              var _v$52 = dictation() ?? undefined,
+                _v$53 = status().icon;
+              _v$52 !== _p$.e && _$setAttribute(_el$170, "data-state", _p$.e = _v$52);
+              _v$53 !== _p$.t && _$className(_el$171, _p$.t = _v$53);
               return _p$;
             }, {
               e: undefined,
@@ -2887,10 +2892,10 @@ export function ChatComposer(props) {
         _el$175.$$click = () => reply().onCancel();
         _el$175.$$mousedown = keepFieldFocus;
         _$effect(_p$ => {
-          var _v$52 = chatMessages().cancelReply,
-            _v$53 = chatMessages().cancelReply;
-          _v$52 !== _p$.e && _$setAttribute(_el$175, "aria-label", _p$.e = _v$52);
-          _v$53 !== _p$.t && _$setAttribute(_el$175, "title", _p$.t = _v$53);
+          var _v$54 = chatMessages().cancelReply,
+            _v$55 = chatMessages().cancelReply;
+          _v$54 !== _p$.e && _$setAttribute(_el$175, "aria-label", _p$.e = _v$54);
+          _v$55 !== _p$.t && _$setAttribute(_el$175, "title", _p$.t = _v$55);
           return _p$;
         }, {
           e: undefined,
@@ -2911,154 +2916,194 @@ export function ChatComposer(props) {
             return attachments();
           },
           children: attachment => (() => {
-            var _el$180 = _$getNextElement(_tmpl$45),
+            var _el$180 = _$getNextElement(_tmpl$46),
               _el$181 = _el$180.firstChild,
-              _el$182 = _el$181.firstChild,
-              [_el$183, _co$43] = _$getNextMarker(_el$182.nextSibling),
-              _el$184 = _el$183.nextSibling,
-              [_el$185, _co$44] = _$getNextMarker(_el$184.nextSibling),
-              _el$187 = _el$181.nextSibling,
-              [_el$188, _co$45] = _$getNextMarker(_el$187.nextSibling);
+              _el$187 = _el$181.firstChild,
+              [_el$188, _co$45] = _$getNextMarker(_el$187.nextSibling),
+              _el$189 = _el$188.nextSibling,
+              [_el$190, _co$46] = _$getNextMarker(_el$189.nextSibling),
+              _el$191 = _el$190.nextSibling,
+              [_el$192, _co$47] = _$getNextMarker(_el$191.nextSibling),
+              _el$194 = _el$181.nextSibling,
+              [_el$195, _co$48] = _$getNextMarker(_el$194.nextSibling);
             _$insert(_el$181, _$createComponent(Show, {
               get when() {
                 return attachment.href;
               },
               get fallback() {
                 return (() => {
-                  var _el$189 = _$getNextElement(_tmpl$47),
-                    _el$191 = _el$189.firstChild,
-                    [_el$192, _co$46] = _$getNextMarker(_el$191.nextSibling),
-                    _el$193 = _el$192.nextSibling,
-                    [_el$194, _co$47] = _$getNextMarker(_el$193.nextSibling);
-                  _$insert(_el$189, _$createComponent(Show, {
+                  var _el$196 = _$getNextElement(_tmpl$48),
+                    _el$198 = _el$196.firstChild,
+                    [_el$199, _co$49] = _$getNextMarker(_el$198.nextSibling),
+                    _el$200 = _el$199.nextSibling,
+                    [_el$201, _co$50] = _$getNextMarker(_el$200.nextSibling);
+                  _$insert(_el$196, _$createComponent(Show, {
                     get when() {
                       return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                     },
                     get fallback() {
                       return (() => {
-                        var _el$195 = _$getNextElement(_tmpl$3);
-                        _$effect(() => _$className(_el$195, attachmentIcon(attachment)));
-                        return _el$195;
+                        var _el$202 = _$getNextElement(_tmpl$3);
+                        _$effect(() => _$className(_el$202, attachmentIcon(attachment)));
+                        return _el$202;
                       })();
                     },
                     get children() {
-                      var _el$190 = _$getNextElement(_tmpl$46);
+                      var _el$197 = _$getNextElement(_tmpl$47);
                       _$effect(_p$ => {
-                        var _v$56 = attachment.previewUrl,
-                          _v$57 = attachment.alt ?? "";
-                        _v$56 !== _p$.e && _$setAttribute(_el$190, "src", _p$.e = _v$56);
-                        _v$57 !== _p$.t && _$setAttribute(_el$190, "alt", _p$.t = _v$57);
+                        var _v$58 = attachment.previewUrl,
+                          _v$59 = attachment.alt ?? "";
+                        _v$58 !== _p$.e && _$setAttribute(_el$197, "src", _p$.e = _v$58);
+                        _v$59 !== _p$.t && _$setAttribute(_el$197, "alt", _p$.t = _v$59);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$190;
+                      return _el$197;
                     }
-                  }), _el$192, _co$46);
-                  _$insert(_el$189, () => renderAttachmentCopy(attachment), _el$194, _co$47);
-                  return _el$189;
+                  }), _el$199, _co$49);
+                  _$insert(_el$196, () => renderAttachmentCopy(attachment), _el$201, _co$50);
+                  return _el$196;
                 })();
               },
               children: href => (() => {
-                var _el$196 = _$getNextElement(_tmpl$48),
-                  _el$198 = _el$196.firstChild,
-                  [_el$199, _co$48] = _$getNextMarker(_el$198.nextSibling),
-                  _el$200 = _el$199.nextSibling,
-                  [_el$201, _co$49] = _$getNextMarker(_el$200.nextSibling);
-                _$insert(_el$196, _$createComponent(Show, {
+                var _el$203 = _$getNextElement(_tmpl$49),
+                  _el$205 = _el$203.firstChild,
+                  [_el$206, _co$51] = _$getNextMarker(_el$205.nextSibling),
+                  _el$207 = _el$206.nextSibling,
+                  [_el$208, _co$52] = _$getNextMarker(_el$207.nextSibling);
+                _$insert(_el$203, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                   },
                   get fallback() {
                     return (() => {
-                      var _el$202 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$202, attachmentIcon(attachment)));
-                      return _el$202;
+                      var _el$209 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$209, attachmentIcon(attachment)));
+                      return _el$209;
                     })();
                   },
                   get children() {
-                    var _el$197 = _$getNextElement(_tmpl$46);
+                    var _el$204 = _$getNextElement(_tmpl$47);
                     _$effect(_p$ => {
-                      var _v$58 = attachment.previewUrl,
-                        _v$59 = attachment.alt ?? "";
-                      _v$58 !== _p$.e && _$setAttribute(_el$197, "src", _p$.e = _v$58);
-                      _v$59 !== _p$.t && _$setAttribute(_el$197, "alt", _p$.t = _v$59);
+                      var _v$60 = attachment.previewUrl,
+                        _v$61 = attachment.alt ?? "";
+                      _v$60 !== _p$.e && _$setAttribute(_el$204, "src", _p$.e = _v$60);
+                      _v$61 !== _p$.t && _$setAttribute(_el$204, "alt", _p$.t = _v$61);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$197;
+                    return _el$204;
                   }
-                }), _el$199, _co$48);
-                _$insert(_el$196, () => renderAttachmentCopy(attachment), _el$201, _co$49);
+                }), _el$206, _co$51);
+                _$insert(_el$203, () => renderAttachmentCopy(attachment), _el$208, _co$52);
                 _$effect(_p$ => {
-                  var _v$60 = href(),
-                    _v$61 = chatMessages().openInNewTab({
+                  var _v$62 = href(),
+                    _v$63 = chatMessages().openInNewTab({
                       name: attachment.name
                     });
-                  _v$60 !== _p$.e && _$setAttribute(_el$196, "href", _p$.e = _v$60);
-                  _v$61 !== _p$.t && _$setAttribute(_el$196, "aria-label", _p$.t = _v$61);
+                  _v$62 !== _p$.e && _$setAttribute(_el$203, "href", _p$.e = _v$62);
+                  _v$63 !== _p$.t && _$setAttribute(_el$203, "aria-label", _p$.t = _v$63);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$196;
+                return _el$203;
               })()
-            }), _el$183, _co$43);
+            }), _el$188, _co$45);
+            _$insert(_el$181, _$createComponent(Show, {
+              get when() {
+                return attachment.progress !== undefined;
+              },
+              get children() {
+                var _el$182 = _$getNextElement(_tmpl$44),
+                  _el$183 = _el$182.firstChild,
+                  [_el$184, _co$43] = _$getNextMarker(_el$183.nextSibling),
+                  _el$185 = _el$184.nextSibling,
+                  [_el$186, _co$44] = _$getNextMarker(_el$185.nextSibling);
+                _$insert(_el$182, _$createComponent(ProgressRing, {
+                  get value() {
+                    return attachment.progress ?? 0;
+                  },
+                  get label() {
+                    return chatMessages().uploading({
+                      name: attachment.name
+                    });
+                  }
+                }), _el$184, _co$43);
+                _$insert(_el$182, () => new Intl.NumberFormat(locale(), {
+                  style: "percent"
+                }).format(Math.round(attachment.progress ?? 0) / 100), _el$186, _co$44);
+                return _el$182;
+              }
+            }), _el$190, _co$46);
             _$insert(_el$181, _$createComponent(Show, {
               get when() {
-                return attachment.action;
+                return _$memo(() => attachment.progress === undefined)() && attachment.action;
               },
               children: action => (() => {
-                var _el$203 = _$getNextElement(_tmpl$49),
-                  _el$204 = _el$203.firstChild,
-                  [_el$205, _co$50] = _$getNextMarker(_el$204.nextSibling),
-                  _el$206 = _el$205.nextSibling,
-                  [_el$207, _co$51] = _$getNextMarker(_el$206.nextSibling);
-                _el$203.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
-                _$insert(_el$203, _$createComponent(Show, {
+                var _el$210 = _$getNextElement(_tmpl$50),
+                  _el$211 = _el$210.firstChild,
+                  [_el$212, _co$53] = _$getNextMarker(_el$211.nextSibling),
+                  _el$213 = _el$212.nextSibling,
+                  [_el$214, _co$54] = _$getNextMarker(_el$213.nextSibling);
+                _el$210.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
+                _$insert(_el$210, _$createComponent(Show, {
                   get when() {
                     return action().icon;
                   },
                   children: icon => (() => {
-                    var _el$208 = _$getNextElement(_tmpl$3);
-                    _$effect(() => _$className(_el$208, icon()));
-                    return _el$208;
+                    var _el$215 = _$getNextElement(_tmpl$3);
+                    _$effect(() => _$className(_el$215, icon()));
+                    return _el$215;
                   })()
-                }), _el$205, _co$50);
-                _$insert(_el$203, () => action().label, _el$207, _co$51);
-                _$effect(() => _$setProperty(_el$203, "disabled", blocked() || action().disabled));
+                }), _el$212, _co$53);
+                _$insert(_el$210, () => action().label, _el$214, _co$54);
+                _$effect(_p$ => {
+                  var _v$64 = action().variant === "danger" ? "danger" : undefined,
+                    _v$65 = action().disabled ? "" : undefined,
+                    _v$66 = blocked() || action().disabled;
+                  _v$64 !== _p$.e && _$setAttribute(_el$210, "data-tone", _p$.e = _v$64);
+                  _v$65 !== _p$.t && _$setAttribute(_el$210, "data-waiting", _p$.t = _v$65);
+                  _v$66 !== _p$.a && _$setProperty(_el$210, "disabled", _p$.a = _v$66);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined
+                });
                 _$runHydrationEvents();
-                return _el$203;
+                return _el$210;
               })()
-            }), _el$185, _co$44);
+            }), _el$192, _co$47);
             _$insert(_el$180, _$createComponent(Show, {
               get when() {
                 return props.onAttachmentsChange;
               },
               get children() {
-                var _el$186 = _$getNextElement(_tmpl$44);
-                _el$186.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
+                var _el$193 = _$getNextElement(_tmpl$45);
+                _el$193.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
                 _$effect(_p$ => {
-                  var _v$54 = selectMessages().removeNamed({
+                  var _v$56 = selectMessages().removeNamed({
                       name: attachment.name
                     }),
-                    _v$55 = blocked();
-                  _v$54 !== _p$.e && _$setAttribute(_el$186, "aria-label", _p$.e = _v$54);
-                  _v$55 !== _p$.t && _$setProperty(_el$186, "disabled", _p$.t = _v$55);
+                    _v$57 = blocked();
+                  _v$56 !== _p$.e && _$setAttribute(_el$193, "aria-label", _p$.e = _v$56);
+                  _v$57 !== _p$.t && _$setProperty(_el$193, "disabled", _p$.t = _v$57);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
                 _$runHydrationEvents();
-                return _el$186;
+                return _el$193;
               }
-            }), _el$188, _co$45);
-            _$effect(() => _el$181.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
+            }), _el$195, _co$48);
+            _$effect(() => _el$181.classList.toggle("k2b-chat-composer__attachment-content--action", !!(Boolean(attachment.action) || attachment.progress !== undefined)));
             return _el$180;
           })()
         }));
@@ -3076,38 +3121,38 @@ export function ChatComposer(props) {
             return props.error;
           },
           get children() {
-            var _el$209 = _$getNextElement(_tmpl$28),
-              _el$210 = _el$209.firstChild,
-              _el$211 = _el$210.nextSibling,
-              [_el$212, _co$52] = _$getNextMarker(_el$211.nextSibling);
-            _$insert(_el$209, () => props.error, _el$212, _co$52);
-            return _el$209;
+            var _el$216 = _$getNextElement(_tmpl$28),
+              _el$217 = _el$216.firstChild,
+              _el$218 = _el$217.nextSibling,
+              [_el$219, _co$55] = _$getNextMarker(_el$218.nextSibling);
+            _$insert(_el$216, () => props.error, _el$219, _co$55);
+            return _el$216;
           }
         }), _$memo(formatRow), (() => {
-          var _el$213 = _$getNextElement(_tmpl$50);
-          _$insert(_el$213, _$createComponent(Show, {
+          var _el$220 = _$getNextElement(_tmpl$51);
+          _$insert(_el$220, _$createComponent(Show, {
             get when() {
               return dictating() || footer();
             },
             get fallback() {
               return [(() => {
-                var _el$214 = _$getNextElement(_tmpl$51),
-                  _el$215 = _el$214.firstChild,
-                  [_el$216, _co$53] = _$getNextMarker(_el$215.nextSibling),
-                  _el$217 = _el$216.nextSibling,
-                  [_el$218, _co$54] = _$getNextMarker(_el$217.nextSibling),
-                  _el$219 = _el$218.nextSibling,
-                  [_el$220, _co$55] = _$getNextMarker(_el$219.nextSibling),
-                  _el$221 = _el$220.nextSibling,
-                  [_el$222, _co$56] = _$getNextMarker(_el$221.nextSibling),
-                  _el$223 = _el$222.nextSibling,
-                  [_el$224, _co$57] = _$getNextMarker(_el$223.nextSibling),
-                  _el$225 = _el$224.nextSibling,
-                  [_el$226, _co$58] = _$getNextMarker(_el$225.nextSibling),
-                  _el$227 = _el$226.nextSibling,
-                  [_el$228, _co$59] = _$getNextMarker(_el$227.nextSibling);
-                _$insert(_el$214, () => props.footerTools, _el$216, _co$53);
-                _$insert(_el$214, _$createComponent(Show, {
+                var _el$221 = _$getNextElement(_tmpl$52),
+                  _el$222 = _el$221.firstChild,
+                  [_el$223, _co$56] = _$getNextMarker(_el$222.nextSibling),
+                  _el$224 = _el$223.nextSibling,
+                  [_el$225, _co$57] = _$getNextMarker(_el$224.nextSibling),
+                  _el$226 = _el$225.nextSibling,
+                  [_el$227, _co$58] = _$getNextMarker(_el$226.nextSibling),
+                  _el$228 = _el$227.nextSibling,
+                  [_el$229, _co$59] = _$getNextMarker(_el$228.nextSibling),
+                  _el$230 = _el$229.nextSibling,
+                  [_el$231, _co$60] = _$getNextMarker(_el$230.nextSibling),
+                  _el$232 = _el$231.nextSibling,
+                  [_el$233, _co$61] = _$getNextMarker(_el$232.nextSibling),
+                  _el$234 = _el$233.nextSibling,
+                  [_el$235, _co$62] = _$getNextMarker(_el$234.nextSibling);
+                _$insert(_el$221, () => props.footerTools, _el$223, _co$56);
+                _$insert(_el$221, _$createComponent(Show, {
                   get when() {
                     return addOpensCommands();
                   },
@@ -3124,11 +3169,11 @@ export function ChatComposer(props) {
                   get children() {
                     return addSearchButton();
                   }
-                }), _el$218, _co$54);
-                _$insert(_el$214, fileInput, _el$220, _co$55);
-                _$insert(_el$214, formatToggle, _el$222, _co$56);
-                _$insert(_el$214, emojiButton, _el$224, _co$57);
-                _$insert(_el$214, _$createComponent(Show, {
+                }), _el$225, _co$57);
+                _$insert(_el$221, fileInput, _el$227, _co$58);
+                _$insert(_el$221, formatToggle, _el$229, _co$59);
+                _$insert(_el$221, emojiButton, _el$231, _co$60);
+                _$insert(_el$221, _$createComponent(Show, {
                   get when() {
                     return (props.models?.length ?? 0) > 0;
                   },
@@ -3174,24 +3219,24 @@ export function ChatComposer(props) {
                       }
                     });
                   }
-                }), _el$226, _co$58);
-                _$insert(_el$214, () => props.modelDetails, _el$228, _co$59);
-                return _el$214;
+                }), _el$233, _co$61);
+                _$insert(_el$221, () => props.modelDetails, _el$235, _co$62);
+                return _el$221;
               })(), (() => {
-                var _el$229 = _$getNextElement(_tmpl$52),
-                  _el$230 = _el$229.firstChild,
-                  [_el$231, _co$60] = _$getNextMarker(_el$230.nextSibling),
-                  _el$232 = _el$231.nextSibling,
-                  [_el$233, _co$61] = _$getNextMarker(_el$232.nextSibling),
-                  _el$234 = _el$233.nextSibling,
-                  [_el$235, _co$62] = _$getNextMarker(_el$234.nextSibling),
-                  _el$236 = _el$235.nextSibling,
-                  [_el$237, _co$63] = _$getNextMarker(_el$236.nextSibling),
-                  _el$238 = _el$237.nextSibling,
-                  [_el$239, _co$64] = _$getNextMarker(_el$238.nextSibling),
-                  _el$240 = _el$239.nextSibling,
-                  [_el$241, _co$65] = _$getNextMarker(_el$240.nextSibling);
-                _$insert(_el$229, _$createComponent(For, {
+                var _el$236 = _$getNextElement(_tmpl$53),
+                  _el$237 = _el$236.firstChild,
+                  [_el$238, _co$63] = _$getNextMarker(_el$237.nextSibling),
+                  _el$239 = _el$238.nextSibling,
+                  [_el$240, _co$64] = _$getNextMarker(_el$239.nextSibling),
+                  _el$241 = _el$240.nextSibling,
+                  [_el$242, _co$65] = _$getNextMarker(_el$241.nextSibling),
+                  _el$243 = _el$242.nextSibling,
+                  [_el$244, _co$66] = _$getNextMarker(_el$243.nextSibling),
+                  _el$245 = _el$244.nextSibling,
+                  [_el$246, _co$67] = _$getNextMarker(_el$245.nextSibling),
+                  _el$247 = _el$246.nextSibling,
+                  [_el$248, _co$68] = _$getNextMarker(_el$247.nextSibling);
+                _$insert(_el$236, _$createComponent(For, {
                   get each() {
                     return props.contextActions;
                   },
@@ -3215,13 +3260,13 @@ export function ChatComposer(props) {
                     },
                     onClick: () => reportChatFailure(() => executeChatAction(action), props.onError),
                     get children() {
-                      var _el$242 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$242, action.icon ?? "ti ti-dots"));
-                      return _el$242;
+                      var _el$249 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$249, action.icon ?? "ti ti-dots"));
+                      return _el$249;
                     }
                   })
-                }), _el$231, _co$60);
-                _$insert(_el$229, _$createComponent(Show, {
+                }), _el$238, _co$63);
+                _$insert(_el$236, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => !!hasContextUsage())() ? props.contextUsage ?? {} : undefined;
                   },
@@ -3233,9 +3278,9 @@ export function ChatComposer(props) {
                       return props.onError;
                     }
                   }))
-                }), _el$233, _co$61);
-                _$insert(_el$229, () => props.submitTools, _el$235, _co$62);
-                _$insert(_el$229, _$createComponent(Show, {
+                }), _el$240, _co$64);
+                _$insert(_el$236, () => props.submitTools, _el$242, _co$65);
+                _$insert(_el$236, _$createComponent(Show, {
                   get when() {
                     return props.dictation;
                   },
@@ -3246,10 +3291,10 @@ export function ChatComposer(props) {
                       cardAnchor: () => shellRef
                     });
                   }
-                }), _el$237, _co$63);
-                _$insert(_el$229, microphoneControl, _el$239, _co$64);
-                _$insert(_el$229, sendControl, _el$241, _co$65);
-                return _el$229;
+                }), _el$244, _co$66);
+                _$insert(_el$236, microphoneControl, _el$246, _co$67);
+                _$insert(_el$236, sendControl, _el$248, _co$68);
+                return _el$236;
               })()];
             },
             get children() {
@@ -3268,7 +3313,7 @@ export function ChatComposer(props) {
               });
             }
           }));
-          return _el$213;
+          return _el$220;
         })()];
       },
       get children() {
@@ -3367,9 +3412,9 @@ export function ChatComposer(props) {
       },
       keyed: true,
       children: announced => (() => {
-        var _el$243 = _$getNextElement(_tmpl$11);
-        _$insert(_el$243, () => announced.text);
-        return _el$243;
+        var _el$250 = _$getNextElement(_tmpl$11);
+        _$insert(_el$250, () => announced.text);
+        return _el$250;
       })()
     }));
     _$insert(_el$135, _$createComponent(Show, {
@@ -3377,21 +3422,21 @@ export function ChatComposer(props) {
         return _$memo(() => !!!suggestionsOpen())() && commandStatus();
       },
       children: status => (() => {
-        var _el$244 = _$getNextElement(_tmpl$53),
-          _el$245 = _el$244.firstChild,
-          _el$246 = _el$245.nextSibling;
-        _$insert(_el$246, () => status().text);
+        var _el$251 = _$getNextElement(_tmpl$54),
+          _el$252 = _el$251.firstChild,
+          _el$253 = _el$252.nextSibling;
+        _$insert(_el$253, () => status().text);
         _$effect(_p$ => {
-          var _v$62 = status().tone,
-            _v$63 = status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle";
-          _v$62 !== _p$.e && _$setAttribute(_el$244, "data-tone", _p$.e = _v$62);
-          _v$63 !== _p$.t && _$className(_el$245, _p$.t = _v$63);
+          var _v$67 = status().tone,
+            _v$68 = status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle";
+          _v$67 !== _p$.e && _$setAttribute(_el$251, "data-tone", _p$.e = _v$67);
+          _v$68 !== _p$.t && _$className(_el$252, _p$.t = _v$68);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$244;
+        return _el$251;
       })()
     }), _el$137, _co$33);
     _$insert(_el$135, _$createComponent(Show, {
@@ -3400,26 +3445,32 @@ export function ChatComposer(props) {
       },
       keyed: true,
       children: announced => (() => {
-        var _el$247 = _$getNextElement(_tmpl$54);
-        _$insert(_el$247, () => announced.text);
-        return _el$247;
+        var _el$254 = _$getNextElement(_tmpl$55);
+        _$insert(_el$254, () => announced.text);
+        return _el$254;
       })()
     }), _el$139, _co$34);
     _$effect(_p$ => {
       var _v$36 = `k2b-chat-composer ${props.class ?? ""}`,
         _v$37 = running() ? "true" : undefined,
         _v$38 = conversation() ? "conversation" : undefined,
-        _v$39 = props.label ?? chatMessages().messageComposer;
+        _v$39 = props.error ? "true" : undefined,
+        _v$40 = props.disabled ? "true" : undefined,
+        _v$41 = props.label ?? chatMessages().messageComposer;
       _v$36 !== _p$.e && _$className(_el$97, _p$.e = _v$36);
       _v$37 !== _p$.t && _$setAttribute(_el$97, "data-running", _p$.t = _v$37);
       _v$38 !== _p$.a && _$setAttribute(_el$97, "data-variant", _p$.a = _v$38);
-      _v$39 !== _p$.o && _$setAttribute(_el$97, "aria-label", _p$.o = _v$39);
+      _v$39 !== _p$.o && _$setAttribute(_el$97, "data-invalid", _p$.o = _v$39);
+      _v$40 !== _p$.i && _$setAttribute(_el$97, "data-disabled", _p$.i = _v$40);
+      _v$41 !== _p$.n && _$setAttribute(_el$97, "aria-label", _p$.n = _v$41);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined
+      o: undefined,
+      i: undefined,
+      n: undefined
     });
     return _el$58;
   })();