@k2b/ui 0.16.0 → 0.18.0

package/dist/browser/chat/ChatComposer.js

@@ -20,26 +20,26 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span><strong>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/>`),
   _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__drop aria-hidden=true>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__highlight aria-hidden=true><!$><!/>\n`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-shell><!$><!/><section role=group><!$><!/><div class=k2b-chat-composer__input role=group><!$><!/><!$><!/><textarea rows=1></textarea></div><!$><!/><footer class=k2b-chat-composer__footer>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><i aria-hidden=true></i><strong></strong><small>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<img>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<i class="ti ti-plus"aria-hidden=true>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<input class=k2b-sr-only type=file tabindex=-1 aria-hidden=true>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/>`);
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__highlight aria-hidden=true><!$><!/>\n`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-shell><!$><!/><section role=group><!$><!/><div class=k2b-chat-composer__input role=group><!$><!/><textarea rows=1></textarea></div><!$><!/><footer class=k2b-chat-composer__footer></footer><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><i aria-hidden=true></i><strong></strong><small>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<img>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<i class="ti ti-plus"aria-hidden=true>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<input class=k2b-sr-only type=file tabindex=-1 aria-hidden=true>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/>`);
 import { children, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Dropdown } from "../actions/Dropdown";
 import { Tooltip } from "../feedback/Tooltip";
+import { FileDropTarget } from "../inputs/FileDropTarget";
 import { SelectChip } from "../inputs/SelectChip";
 import { useUiMessages } from "../intl/messages";
 import { ChatContextUsage as ContextUsage } from "./ChatPrimitives";
@@ -55,7 +55,6 @@ export function ChatComposer(props) {
   const messages = useUiMessages();
   const commandListId = `k2b-chat-commands-${createUniqueId().replace(/[^A-Za-z0-9_-]/g, "-")}`;
   const [selectedCommandIndex, setSelectedCommandIndex] = createSignal(0);
-  const [dragActive, setDragActive] = createSignal(false);
   const [addingFiles, setAddingFiles] = createSignal(false);
   const [submitting, setSubmitting] = createSignal(false);
   let composerRef;
@@ -396,21 +395,21 @@ export function ChatComposer(props) {
     }
   };
   return (() => {
-    var _el$3 = _$getNextElement(_tmpl$1),
-      _el$47 = _el$3.firstChild,
-      [_el$48, _co$11] = _$getNextMarker(_el$47.nextSibling),
-      _el$25 = _el$48.nextSibling,
-      _el$43 = _el$25.firstChild,
-      [_el$44, _co$1] = _$getNextMarker(_el$43.nextSibling),
-      _el$27 = _el$44.nextSibling,
-      _el$34 = _el$27.firstChild,
-      [_el$35, _co$8] = _$getNextMarker(_el$34.nextSibling),
-      _el$36 = _el$35.nextSibling,
-      [_el$37, _co$9] = _$getNextMarker(_el$36.nextSibling),
-      _el$33 = _el$37.nextSibling,
-      _el$45 = _el$27.nextSibling,
-      [_el$46, _co$10] = _$getNextMarker(_el$45.nextSibling),
-      _el$42 = _el$46.nextSibling;
+    var _el$3 = _$getNextElement(_tmpl$0),
+      _el$46 = _el$3.firstChild,
+      [_el$47, _co$11] = _$getNextMarker(_el$46.nextSibling),
+      _el$25 = _el$47.nextSibling,
+      _el$40 = _el$25.firstChild,
+      [_el$41, _co$0] = _$getNextMarker(_el$40.nextSibling),
+      _el$27 = _el$41.nextSibling,
+      _el$33 = _el$27.firstChild,
+      [_el$34, _co$8] = _$getNextMarker(_el$33.nextSibling),
+      _el$32 = _el$34.nextSibling,
+      _el$42 = _el$27.nextSibling,
+      [_el$43, _co$1] = _$getNextMarker(_el$42.nextSibling),
+      _el$39 = _el$43.nextSibling,
+      _el$44 = _el$39.nextSibling,
+      [_el$45, _co$10] = _$getNextMarker(_el$44.nextSibling);
     _$insert(_el$3, _$createComponent(Show, {
       get when() {
         return commandsOpen() || hasAccessory();
@@ -444,25 +443,25 @@ export function ChatComposer(props) {
                 return commandMatches();
               },
               children: (command, index) => (() => {
-                var _el$49 = _$getNextElement(_tmpl$10),
-                  _el$50 = _el$49.firstChild,
-                  _el$51 = _el$50.nextSibling,
-                  _el$52 = _el$51.nextSibling;
-                _el$49.$$click = () => void executeCommand(command);
-                _el$49.$$pointerdown = event => event.preventDefault();
-                _$insert(_el$51, () => command.label ?? `/${command.name}`);
-                _$insert(_el$52, () => command.description);
+                var _el$48 = _$getNextElement(_tmpl$1),
+                  _el$49 = _el$48.firstChild,
+                  _el$50 = _el$49.nextSibling,
+                  _el$51 = _el$50.nextSibling;
+                _el$48.$$click = () => void executeCommand(command);
+                _el$48.$$pointerdown = event => event.preventDefault();
+                _$insert(_el$50, () => command.label ?? `/${command.name}`);
+                _$insert(_el$51, () => command.description);
                 _$effect(_p$ => {
-                  var _v$15 = `${commandListId}-${index()}`,
-                    _v$16 = index() === selectedCommandIndex(),
-                    _v$17 = command.disabled,
-                    _v$18 = index() === selectedCommandIndex() ? "true" : undefined,
-                    _v$19 = command.icon ?? "ti ti-slash";
-                  _v$15 !== _p$.e && _$setAttribute(_el$49, "id", _p$.e = _v$15);
-                  _v$16 !== _p$.t && _$setAttribute(_el$49, "aria-selected", _p$.t = _v$16);
-                  _v$17 !== _p$.a && _$setAttribute(_el$49, "aria-disabled", _p$.a = _v$17);
-                  _v$18 !== _p$.o && _$setAttribute(_el$49, "data-active", _p$.o = _v$18);
-                  _v$19 !== _p$.i && _$className(_el$50, _p$.i = _v$19);
+                  var _v$14 = `${commandListId}-${index()}`,
+                    _v$15 = index() === selectedCommandIndex(),
+                    _v$16 = command.disabled,
+                    _v$17 = index() === selectedCommandIndex() ? "true" : undefined,
+                    _v$18 = command.icon ?? "ti ti-slash";
+                  _v$14 !== _p$.e && _$setAttribute(_el$48, "id", _p$.e = _v$14);
+                  _v$15 !== _p$.t && _$setAttribute(_el$48, "aria-selected", _p$.t = _v$15);
+                  _v$16 !== _p$.a && _$setAttribute(_el$48, "aria-disabled", _p$.a = _v$16);
+                  _v$17 !== _p$.o && _$setAttribute(_el$48, "data-active", _p$.o = _v$17);
+                  _v$18 !== _p$.i && _$className(_el$49, _p$.i = _v$18);
                   return _p$;
                 }, {
                   e: undefined,
@@ -472,7 +471,7 @@ export function ChatComposer(props) {
                   i: undefined
                 });
                 _$runHydrationEvents();
-                return _el$49;
+                return _el$48;
               })()
             }), _el$16, _co$2);
             _$insert(_el$7, _$createComponent(Show, {
@@ -527,7 +526,7 @@ export function ChatComposer(props) {
         });
         return _el$4;
       }
-    }), _el$48, _co$11);
+    }), _el$47, _co$11);
     var _ref$2 = composerRef;
     typeof _ref$2 === "function" ? _$use(_ref$2, _el$25) : composerRef = _el$25;
     _$insert(_el$25, _$createComponent(Show, {
@@ -541,238 +540,209 @@ export function ChatComposer(props) {
             return attachments();
           },
           children: attachment => (() => {
-            var _el$53 = _$getNextElement(_tmpl$12),
+            var _el$52 = _$getNextElement(_tmpl$11),
+              _el$53 = _el$52.firstChild,
               _el$54 = _el$53.firstChild,
-              _el$55 = _el$54.firstChild,
-              [_el$56, _co$12] = _$getNextMarker(_el$55.nextSibling),
-              _el$57 = _el$56.nextSibling,
-              [_el$58, _co$13] = _$getNextMarker(_el$57.nextSibling),
-              _el$60 = _el$54.nextSibling,
-              [_el$61, _co$14] = _$getNextMarker(_el$60.nextSibling);
-            _$insert(_el$54, _$createComponent(Show, {
+              [_el$55, _co$12] = _$getNextMarker(_el$54.nextSibling),
+              _el$56 = _el$55.nextSibling,
+              [_el$57, _co$13] = _$getNextMarker(_el$56.nextSibling),
+              _el$59 = _el$53.nextSibling,
+              [_el$60, _co$14] = _$getNextMarker(_el$59.nextSibling);
+            _$insert(_el$53, _$createComponent(Show, {
               get when() {
                 return attachment.href;
               },
               get fallback() {
                 return (() => {
-                  var _el$62 = _$getNextElement(_tmpl$14),
-                    _el$64 = _el$62.firstChild,
-                    [_el$65, _co$15] = _$getNextMarker(_el$64.nextSibling),
-                    _el$66 = _el$65.nextSibling,
-                    [_el$67, _co$16] = _$getNextMarker(_el$66.nextSibling);
-                  _$insert(_el$62, _$createComponent(Show, {
+                  var _el$61 = _$getNextElement(_tmpl$13),
+                    _el$63 = _el$61.firstChild,
+                    [_el$64, _co$15] = _$getNextMarker(_el$63.nextSibling),
+                    _el$65 = _el$64.nextSibling,
+                    [_el$66, _co$16] = _$getNextMarker(_el$65.nextSibling);
+                  _$insert(_el$61, _$createComponent(Show, {
                     get when() {
                       return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                     },
                     get fallback() {
                       return (() => {
-                        var _el$68 = _$getNextElement(_tmpl$15);
-                        _$effect(() => _$className(_el$68, attachmentIcon(attachment)));
-                        return _el$68;
+                        var _el$67 = _$getNextElement(_tmpl$14);
+                        _$effect(() => _$className(_el$67, attachmentIcon(attachment)));
+                        return _el$67;
                       })();
                     },
                     get children() {
-                      var _el$63 = _$getNextElement(_tmpl$13);
+                      var _el$62 = _$getNextElement(_tmpl$12);
                       _$effect(_p$ => {
-                        var _v$22 = attachment.previewUrl,
-                          _v$23 = attachment.alt ?? "";
-                        _v$22 !== _p$.e && _$setAttribute(_el$63, "src", _p$.e = _v$22);
-                        _v$23 !== _p$.t && _$setAttribute(_el$63, "alt", _p$.t = _v$23);
+                        var _v$21 = attachment.previewUrl,
+                          _v$22 = attachment.alt ?? "";
+                        _v$21 !== _p$.e && _$setAttribute(_el$62, "src", _p$.e = _v$21);
+                        _v$22 !== _p$.t && _$setAttribute(_el$62, "alt", _p$.t = _v$22);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$63;
+                      return _el$62;
                     }
-                  }), _el$65, _co$15);
-                  _$insert(_el$62, () => renderAttachmentCopy(attachment), _el$67, _co$16);
-                  return _el$62;
+                  }), _el$64, _co$15);
+                  _$insert(_el$61, () => renderAttachmentCopy(attachment), _el$66, _co$16);
+                  return _el$61;
                 })();
               },
               children: href => (() => {
-                var _el$69 = _$getNextElement(_tmpl$16),
-                  _el$71 = _el$69.firstChild,
-                  [_el$72, _co$17] = _$getNextMarker(_el$71.nextSibling),
-                  _el$73 = _el$72.nextSibling,
-                  [_el$74, _co$18] = _$getNextMarker(_el$73.nextSibling);
-                _$insert(_el$69, _$createComponent(Show, {
+                var _el$68 = _$getNextElement(_tmpl$15),
+                  _el$70 = _el$68.firstChild,
+                  [_el$71, _co$17] = _$getNextMarker(_el$70.nextSibling),
+                  _el$72 = _el$71.nextSibling,
+                  [_el$73, _co$18] = _$getNextMarker(_el$72.nextSibling);
+                _$insert(_el$68, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                   },
                   get fallback() {
                     return (() => {
-                      var _el$75 = _$getNextElement(_tmpl$15);
-                      _$effect(() => _$className(_el$75, attachmentIcon(attachment)));
-                      return _el$75;
+                      var _el$74 = _$getNextElement(_tmpl$14);
+                      _$effect(() => _$className(_el$74, attachmentIcon(attachment)));
+                      return _el$74;
                     })();
                   },
                   get children() {
-                    var _el$70 = _$getNextElement(_tmpl$13);
+                    var _el$69 = _$getNextElement(_tmpl$12);
                     _$effect(_p$ => {
-                      var _v$24 = attachment.previewUrl,
-                        _v$25 = attachment.alt ?? "";
-                      _v$24 !== _p$.e && _$setAttribute(_el$70, "src", _p$.e = _v$24);
-                      _v$25 !== _p$.t && _$setAttribute(_el$70, "alt", _p$.t = _v$25);
+                      var _v$23 = attachment.previewUrl,
+                        _v$24 = attachment.alt ?? "";
+                      _v$23 !== _p$.e && _$setAttribute(_el$69, "src", _p$.e = _v$23);
+                      _v$24 !== _p$.t && _$setAttribute(_el$69, "alt", _p$.t = _v$24);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$70;
+                    return _el$69;
                   }
-                }), _el$72, _co$17);
-                _$insert(_el$69, () => renderAttachmentCopy(attachment), _el$74, _co$18);
+                }), _el$71, _co$17);
+                _$insert(_el$68, () => renderAttachmentCopy(attachment), _el$73, _co$18);
                 _$effect(_p$ => {
-                  var _v$26 = href(),
-                    _v$27 = messages().openInNewTab({
+                  var _v$25 = href(),
+                    _v$26 = messages().openInNewTab({
                       name: attachment.name
                     });
-                  _v$26 !== _p$.e && _$setAttribute(_el$69, "href", _p$.e = _v$26);
-                  _v$27 !== _p$.t && _$setAttribute(_el$69, "aria-label", _p$.t = _v$27);
+                  _v$25 !== _p$.e && _$setAttribute(_el$68, "href", _p$.e = _v$25);
+                  _v$26 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$26);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$69;
+                return _el$68;
               })()
-            }), _el$56, _co$12);
-            _$insert(_el$54, _$createComponent(Show, {
+            }), _el$55, _co$12);
+            _$insert(_el$53, _$createComponent(Show, {
               get when() {
                 return attachment.action;
               },
               children: action => (() => {
-                var _el$76 = _$getNextElement(_tmpl$17),
-                  _el$77 = _el$76.firstChild,
-                  [_el$78, _co$19] = _$getNextMarker(_el$77.nextSibling),
-                  _el$79 = _el$78.nextSibling,
-                  [_el$80, _co$20] = _$getNextMarker(_el$79.nextSibling);
-                _el$76.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
-                _$insert(_el$76, _$createComponent(Show, {
+                var _el$75 = _$getNextElement(_tmpl$16),
+                  _el$76 = _el$75.firstChild,
+                  [_el$77, _co$19] = _$getNextMarker(_el$76.nextSibling),
+                  _el$78 = _el$77.nextSibling,
+                  [_el$79, _co$20] = _$getNextMarker(_el$78.nextSibling);
+                _el$75.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
+                _$insert(_el$75, _$createComponent(Show, {
                   get when() {
                     return action().icon;
                   },
                   children: icon => (() => {
-                    var _el$81 = _$getNextElement(_tmpl$15);
-                    _$effect(() => _$className(_el$81, icon()));
-                    return _el$81;
+                    var _el$80 = _$getNextElement(_tmpl$14);
+                    _$effect(() => _$className(_el$80, icon()));
+                    return _el$80;
                   })()
-                }), _el$78, _co$19);
-                _$insert(_el$76, () => action().label, _el$80, _co$20);
-                _$effect(() => _$setProperty(_el$76, "disabled", blocked() || action().disabled));
+                }), _el$77, _co$19);
+                _$insert(_el$75, () => action().label, _el$79, _co$20);
+                _$effect(() => _$setProperty(_el$75, "disabled", blocked() || action().disabled));
                 _$runHydrationEvents();
-                return _el$76;
+                return _el$75;
               })()
-            }), _el$58, _co$13);
-            _$insert(_el$53, _$createComponent(Show, {
+            }), _el$57, _co$13);
+            _$insert(_el$52, _$createComponent(Show, {
               get when() {
                 return props.onAttachmentsChange;
               },
               get children() {
-                var _el$59 = _$getNextElement(_tmpl$11);
-                _el$59.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
+                var _el$58 = _$getNextElement(_tmpl$10);
+                _el$58.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
                 _$effect(_p$ => {
-                  var _v$20 = messages().removeNamed({
+                  var _v$19 = messages().removeNamed({
                       name: attachment.name
                     }),
-                    _v$21 = blocked();
-                  _v$20 !== _p$.e && _$setAttribute(_el$59, "aria-label", _p$.e = _v$20);
-                  _v$21 !== _p$.t && _$setProperty(_el$59, "disabled", _p$.t = _v$21);
+                    _v$20 = blocked();
+                  _v$19 !== _p$.e && _$setAttribute(_el$58, "aria-label", _p$.e = _v$19);
+                  _v$20 !== _p$.t && _$setProperty(_el$58, "disabled", _p$.t = _v$20);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
                 _$runHydrationEvents();
-                return _el$59;
+                return _el$58;
               }
-            }), _el$61, _co$14);
-            _$effect(() => _el$54.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
-            return _el$53;
+            }), _el$60, _co$14);
+            _$effect(() => _el$53.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
+            return _el$52;
           })()
         }));
         _$effect(() => _$setAttribute(_el$26, "aria-label", messages().attachments));
         return _el$26;
       }
-    }), _el$44, _co$1);
-    _el$27.addEventListener("drop", event => {
-      if (!event.dataTransfer?.types.includes("Files")) return;
-      event.preventDefault();
-      setDragActive(false);
-      if (canSelectFiles() && event.dataTransfer.files.length) void runFiles(event.dataTransfer.files);
-    });
-    _el$27.addEventListener("dragleave", event => {
-      if (!event.currentTarget.contains(event.relatedTarget)) setDragActive(false);
-    });
-    _el$27.addEventListener("dragover", event => {
-      if (!canSelectFiles() || !event.dataTransfer?.types.includes("Files")) return;
-      event.preventDefault();
-      setDragActive(true);
-    });
-    _el$27.addEventListener("dragenter", event => {
-      if (!canSelectFiles() || !event.dataTransfer?.types.includes("Files")) return;
-      event.preventDefault();
-      setDragActive(true);
-    });
-    _$insert(_el$27, _$createComponent(Show, {
-      get when() {
-        return dragActive();
-      },
-      get children() {
-        var _el$28 = _$getNextElement(_tmpl$8);
-        _$insert(_el$28, () => messages().dropFilesToAttach);
-        return _el$28;
-      }
-    }), _el$35, _co$8);
+    }), _el$41, _co$0);
     _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return mentions().length > 0;
       },
       get children() {
-        var _el$29 = _$getNextElement(_tmpl$9),
-          _el$31 = _el$29.firstChild,
-          [_el$32, _co$7] = _$getNextMarker(_el$31.nextSibling),
-          _el$30 = _el$32.nextSibling;
+        var _el$28 = _$getNextElement(_tmpl$8),
+          _el$30 = _el$28.firstChild,
+          [_el$31, _co$7] = _$getNextMarker(_el$30.nextSibling),
+          _el$29 = _el$31.nextSibling;
         var _ref$3 = highlightRef;
-        typeof _ref$3 === "function" ? _$use(_ref$3, _el$29) : highlightRef = _el$29;
-        _$insert(_el$29, _$createComponent(For, {
+        typeof _ref$3 === "function" ? _$use(_ref$3, _el$28) : highlightRef = _el$28;
+        _$insert(_el$28, _$createComponent(For, {
           get each() {
             return chatMentionSegments(props.value, mentions());
           },
           children: part => (() => {
-            var _el$82 = _$getNextElement(_tmpl$18);
-            _$insert(_el$82, () => part.text);
-            _$effect(() => _el$82.classList.toggle("k2b-chat-composer__mention", !!Boolean(part.mention)));
-            return _el$82;
+            var _el$81 = _$getNextElement(_tmpl$17);
+            _$insert(_el$81, () => part.text);
+            _$effect(() => _el$81.classList.toggle("k2b-chat-composer__mention", !!Boolean(part.mention)));
+            return _el$81;
           })()
-        }), _el$32, _co$7);
-        return _el$29;
+        }), _el$31, _co$7);
+        return _el$28;
       }
-    }), _el$37, _co$9);
-    _el$33.$$keydown = onKeyDown;
-    _el$33.$$beforeinput = event => {
+    }), _el$34, _co$8);
+    _el$32.$$keydown = onKeyDown;
+    _el$32.$$beforeinput = event => {
       if (event.inputType === "historyUndo" || event.inputType === "historyRedo") {
         event.preventDefault();
         restoreHistory(event.inputType === "historyUndo" ? -1 : 1);
       }
     };
-    _el$33.addEventListener("scroll", () => {
+    _el$32.addEventListener("scroll", () => {
       if (highlightRef && textareaRef) highlightRef.scrollTop = textareaRef.scrollTop;
     });
-    _el$33.addEventListener("compositionend", () => {
+    _el$32.addEventListener("compositionend", () => {
       setComposing(false);
       syncCaret();
     });
-    _el$33.addEventListener("compositionstart", () => setComposing(true));
-    _el$33.$$keyup = syncCaret;
-    _el$33.$$click = () => {
+    _el$32.addEventListener("compositionstart", () => setComposing(true));
+    _el$32.$$keyup = syncCaret;
+    _el$32.$$click = () => {
       setDismissed(false);
       syncCaret();
     };
-    _el$33.addEventListener("blur", () => setDismissed(true));
-    _el$33.addEventListener("select", syncCaret);
-    _el$33.addEventListener("paste", event => {
+    _el$32.addEventListener("blur", () => setDismissed(true));
+    _el$32.addEventListener("select", syncCaret);
+    _el$32.addEventListener("paste", event => {
       const clipboardData = event.clipboardData;
       if (canSelectFiles() && clipboardData?.files.length) {
         event.preventDefault();
@@ -781,45 +751,45 @@ export function ChatComposer(props) {
       }
       props.onPaste?.(event);
     });
-    _el$33.$$input = event => {
+    _el$32.$$input = event => {
       edit(event.currentTarget.value);
       syncCaret();
       autoResize();
     };
     var _ref$4 = textareaRef;
-    typeof _ref$4 === "function" ? _$use(_ref$4, _el$33) : textareaRef = _el$33;
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$32) : textareaRef = _el$32;
     _$insert(_el$25, _$createComponent(Show, {
       get when() {
         return props.error;
       },
       get children() {
-        var _el$38 = _$getNextElement(_tmpl$0),
-          _el$39 = _el$38.firstChild,
-          _el$40 = _el$39.nextSibling,
-          [_el$41, _co$0] = _$getNextMarker(_el$40.nextSibling);
-        _$insert(_el$38, () => props.error, _el$41, _co$0);
-        return _el$38;
+        var _el$35 = _$getNextElement(_tmpl$9),
+          _el$36 = _el$35.firstChild,
+          _el$37 = _el$36.nextSibling,
+          [_el$38, _co$9] = _$getNextMarker(_el$37.nextSibling);
+        _$insert(_el$35, () => props.error, _el$38, _co$9);
+        return _el$35;
       }
-    }), _el$46, _co$10);
-    _$insert(_el$42, _$createComponent(Show, {
+    }), _el$43, _co$1);
+    _$insert(_el$39, _$createComponent(Show, {
       get when() {
         return props.footerContent;
       },
       get fallback() {
         return [(() => {
-          var _el$83 = _$getNextElement(_tmpl$21),
-            _el$86 = _el$83.firstChild,
-            [_el$87, _co$21] = _$getNextMarker(_el$86.nextSibling),
-            _el$88 = _el$87.nextSibling,
-            [_el$89, _co$22] = _$getNextMarker(_el$88.nextSibling),
-            _el$90 = _el$89.nextSibling,
-            [_el$91, _co$23] = _$getNextMarker(_el$90.nextSibling),
-            _el$92 = _el$91.nextSibling,
-            [_el$93, _co$24] = _$getNextMarker(_el$92.nextSibling),
-            _el$94 = _el$93.nextSibling,
-            [_el$95, _co$25] = _$getNextMarker(_el$94.nextSibling);
-          _$insert(_el$83, () => props.footerTools, _el$87, _co$21);
-          _$insert(_el$83, _$createComponent(Show, {
+          var _el$82 = _$getNextElement(_tmpl$20),
+            _el$85 = _el$82.firstChild,
+            [_el$86, _co$21] = _$getNextMarker(_el$85.nextSibling),
+            _el$87 = _el$86.nextSibling,
+            [_el$88, _co$22] = _$getNextMarker(_el$87.nextSibling),
+            _el$89 = _el$88.nextSibling,
+            [_el$90, _co$23] = _$getNextMarker(_el$89.nextSibling),
+            _el$91 = _el$90.nextSibling,
+            [_el$92, _co$24] = _$getNextMarker(_el$91.nextSibling),
+            _el$93 = _el$92.nextSibling,
+            [_el$94, _co$25] = _$getNextMarker(_el$93.nextSibling);
+          _$insert(_el$82, () => props.footerTools, _el$86, _co$21);
+          _$insert(_el$82, _$createComponent(Show, {
             get when() {
               return hasAddMenu();
             },
@@ -846,38 +816,38 @@ export function ChatComposer(props) {
                       return messages().addToChat;
                     },
                     get children() {
-                      return _$getNextElement(_tmpl$19);
+                      return _$getNextElement(_tmpl$18);
                     }
                   });
                 }
               });
             }
-          }), _el$89, _co$22);
-          _$insert(_el$83, _$createComponent(Show, {
+          }), _el$88, _co$22);
+          _$insert(_el$82, _$createComponent(Show, {
             get when() {
               return props.fileSelection;
             },
             get children() {
-              var _el$85 = _$getNextElement(_tmpl$20);
-              _el$85.addEventListener("change", event => {
+              var _el$84 = _$getNextElement(_tmpl$19);
+              _el$84.addEventListener("change", event => {
                 if (event.currentTarget.files?.length) void runFiles(event.currentTarget.files);
               });
               var _ref$5 = fileInputRef;
-              typeof _ref$5 === "function" ? _$use(_ref$5, _el$85) : fileInputRef = _el$85;
+              typeof _ref$5 === "function" ? _$use(_ref$5, _el$84) : fileInputRef = _el$84;
               _$effect(_p$ => {
-                var _v$28 = props.fileSelection?.accept,
-                  _v$29 = props.fileSelection?.multiple ?? true;
-                _v$28 !== _p$.e && _$setAttribute(_el$85, "accept", _p$.e = _v$28);
-                _v$29 !== _p$.t && _$setProperty(_el$85, "multiple", _p$.t = _v$29);
+                var _v$27 = props.fileSelection?.accept,
+                  _v$28 = props.fileSelection?.multiple ?? true;
+                _v$27 !== _p$.e && _$setAttribute(_el$84, "accept", _p$.e = _v$27);
+                _v$28 !== _p$.t && _$setProperty(_el$84, "multiple", _p$.t = _v$28);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined
               });
-              return _el$85;
+              return _el$84;
             }
-          }), _el$91, _co$23);
-          _$insert(_el$83, _$createComponent(Show, {
+          }), _el$90, _co$23);
+          _$insert(_el$82, _$createComponent(Show, {
             get when() {
               return (props.models?.length ?? 0) > 0;
             },
@@ -911,20 +881,20 @@ export function ChatComposer(props) {
                 }
               });
             }
-          }), _el$93, _co$24);
-          _$insert(_el$83, () => props.modelDetails, _el$95, _co$25);
-          return _el$83;
+          }), _el$92, _co$24);
+          _$insert(_el$82, () => props.modelDetails, _el$94, _co$25);
+          return _el$82;
         })(), (() => {
-          var _el$96 = _$getNextElement(_tmpl$22),
-            _el$98 = _el$96.firstChild,
-            [_el$99, _co$26] = _$getNextMarker(_el$98.nextSibling),
-            _el$100 = _el$99.nextSibling,
-            [_el$101, _co$27] = _$getNextMarker(_el$100.nextSibling),
-            _el$102 = _el$101.nextSibling,
-            [_el$103, _co$28] = _$getNextMarker(_el$102.nextSibling),
-            _el$104 = _el$103.nextSibling,
-            [_el$105, _co$29] = _$getNextMarker(_el$104.nextSibling);
-          _$insert(_el$96, _$createComponent(For, {
+          var _el$95 = _$getNextElement(_tmpl$21),
+            _el$97 = _el$95.firstChild,
+            [_el$98, _co$26] = _$getNextMarker(_el$97.nextSibling),
+            _el$99 = _el$98.nextSibling,
+            [_el$100, _co$27] = _$getNextMarker(_el$99.nextSibling),
+            _el$101 = _el$100.nextSibling,
+            [_el$102, _co$28] = _$getNextMarker(_el$101.nextSibling),
+            _el$103 = _el$102.nextSibling,
+            [_el$104, _co$29] = _$getNextMarker(_el$103.nextSibling);
+          _$insert(_el$95, _$createComponent(For, {
             get each() {
               return props.contextActions;
             },
@@ -948,13 +918,13 @@ export function ChatComposer(props) {
               },
               onClick: () => reportChatFailure(() => executeChatAction(action), props.onError),
               get children() {
-                var _el$106 = _$getNextElement(_tmpl$15);
-                _$effect(() => _$className(_el$106, action.icon ?? "ti ti-dots"));
-                return _el$106;
+                var _el$105 = _$getNextElement(_tmpl$14);
+                _$effect(() => _$className(_el$105, action.icon ?? "ti ti-dots"));
+                return _el$105;
               }
             })
-          }), _el$99, _co$26);
-          _$insert(_el$96, _$createComponent(Show, {
+          }), _el$98, _co$26);
+          _$insert(_el$95, _$createComponent(Show, {
             get when() {
               return _$memo(() => !!hasContextUsage())() ? props.contextUsage ?? {} : undefined;
             },
@@ -966,9 +936,9 @@ export function ChatComposer(props) {
                 return props.onError;
               }
             }))
-          }), _el$101, _co$27);
-          _$insert(_el$96, () => props.submitTools, _el$103, _co$28);
-          _$insert(_el$96, _$createComponent(Show, {
+          }), _el$100, _co$27);
+          _$insert(_el$95, () => props.submitTools, _el$102, _co$28);
+          _$insert(_el$95, _$createComponent(Show, {
             get when() {
               return _$memo(() => !!(running() && !hasDraft()))() && props.onStop;
             },
@@ -987,9 +957,9 @@ export function ChatComposer(props) {
                 },
                 onClick: () => void submit(),
                 get children() {
-                  var _el$107 = _$getNextElement(_tmpl$15);
-                  _$effect(() => _$className(_el$107, submitting() ? "ti ti-loader-2 k2b-spin" : "ti ti-arrow-up"));
-                  return _el$107;
+                  var _el$106 = _$getNextElement(_tmpl$14);
+                  _$effect(() => _$className(_el$106, submitting() ? "ti ti-loader-2 k2b-spin" : "ti ti-arrow-up"));
+                  return _el$106;
                 }
               });
             },
@@ -1008,47 +978,65 @@ export function ChatComposer(props) {
                 },
                 onClick: () => reportChatFailure(() => props.onStop?.(), props.onError),
                 get children() {
-                  var _el$97 = _$getNextElement(_tmpl$15);
-                  _$effect(() => _$className(_el$97, stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop"));
-                  return _el$97;
+                  var _el$96 = _$getNextElement(_tmpl$14);
+                  _$effect(() => _$className(_el$96, stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop"));
+                  return _el$96;
                 }
               });
             }
-          }), _el$105, _co$29);
-          return _el$96;
+          }), _el$104, _co$29);
+          return _el$95;
         })()];
       },
       children: content => content()
     }));
+    _$insert(_el$25, _$createComponent(Show, {
+      get when() {
+        return props.fileSelection;
+      },
+      children: selection => _$createComponent(FileDropTarget, {
+        get label() {
+          return messages().dropFilesToAttach;
+        },
+        get accept() {
+          return selection().accept;
+        },
+        get multiple() {
+          return selection().multiple;
+        },
+        get disabled() {
+          return !canSelectFiles();
+        },
+        onDrop: files => void runFiles(files)
+      })
+    }), _el$45, _co$10);
     _$effect(_p$ => {
       var _v$3 = `k2b-chat-composer ${props.class ?? ""}`,
         _v$4 = running() ? "true" : undefined,
-        _v$5 = dragActive() ? "true" : undefined,
-        _v$6 = props.label ?? messages().messageComposer,
-        _v$7 = messages().messageInput,
-        _v$8 = !!(mentions().length > 0),
-        _v$9 = blocked(),
-        _v$0 = props.placeholder ?? (running() ? messages().addGuidance : messages().writeMessage),
-        _v$1 = props.inputLabel ?? messages().message,
-        _v$10 = commandsOpen() ? "combobox" : undefined,
-        _v$11 = commandsOpen() ? "list" : undefined,
-        _v$12 = commandsOpen() ? commandListId : undefined,
-        _v$13 = commandsOpen() ? "true" : undefined,
-        _v$14 = selectedCommand() ? `${commandListId}-${selectedCommandIndex()}` : undefined;
+        _v$5 = props.label ?? messages().messageComposer,
+        _v$6 = messages().messageInput,
+        _v$7 = !!(mentions().length > 0),
+        _v$8 = blocked(),
+        _v$9 = props.placeholder ?? (running() ? messages().addGuidance : messages().writeMessage),
+        _v$0 = props.inputLabel ?? messages().message,
+        _v$1 = commandsOpen() ? "combobox" : undefined,
+        _v$10 = commandsOpen() ? "list" : undefined,
+        _v$11 = commandsOpen() ? commandListId : undefined,
+        _v$12 = commandsOpen() ? "true" : undefined,
+        _v$13 = selectedCommand() ? `${commandListId}-${selectedCommandIndex()}` : undefined;
       _v$3 !== _p$.e && _$className(_el$25, _p$.e = _v$3);
       _v$4 !== _p$.t && _$setAttribute(_el$25, "data-running", _p$.t = _v$4);
-      _v$5 !== _p$.a && _$setAttribute(_el$25, "data-drag-active", _p$.a = _v$5);
-      _v$6 !== _p$.o && _$setAttribute(_el$25, "aria-label", _p$.o = _v$6);
-      _v$7 !== _p$.i && _$setAttribute(_el$27, "aria-label", _p$.i = _v$7);
-      _v$8 !== _p$.n && _el$33.classList.toggle("k2b-chat-composer__textarea--highlighted", _p$.n = _v$8);
-      _v$9 !== _p$.s && _$setProperty(_el$33, "disabled", _p$.s = _v$9);
-      _v$0 !== _p$.h && _$setAttribute(_el$33, "placeholder", _p$.h = _v$0);
-      _v$1 !== _p$.r && _$setAttribute(_el$33, "aria-label", _p$.r = _v$1);
-      _v$10 !== _p$.d && _$setAttribute(_el$33, "role", _p$.d = _v$10);
-      _v$11 !== _p$.l && _$setAttribute(_el$33, "aria-autocomplete", _p$.l = _v$11);
-      _v$12 !== _p$.u && _$setAttribute(_el$33, "aria-controls", _p$.u = _v$12);
-      _v$13 !== _p$.c && _$setAttribute(_el$33, "aria-expanded", _p$.c = _v$13);
-      _v$14 !== _p$.w && _$setAttribute(_el$33, "aria-activedescendant", _p$.w = _v$14);
+      _v$5 !== _p$.a && _$setAttribute(_el$25, "aria-label", _p$.a = _v$5);
+      _v$6 !== _p$.o && _$setAttribute(_el$27, "aria-label", _p$.o = _v$6);
+      _v$7 !== _p$.i && _el$32.classList.toggle("k2b-chat-composer__textarea--highlighted", _p$.i = _v$7);
+      _v$8 !== _p$.n && _$setProperty(_el$32, "disabled", _p$.n = _v$8);
+      _v$9 !== _p$.s && _$setAttribute(_el$32, "placeholder", _p$.s = _v$9);
+      _v$0 !== _p$.h && _$setAttribute(_el$32, "aria-label", _p$.h = _v$0);
+      _v$1 !== _p$.r && _$setAttribute(_el$32, "role", _p$.r = _v$1);
+      _v$10 !== _p$.d && _$setAttribute(_el$32, "aria-autocomplete", _p$.d = _v$10);
+      _v$11 !== _p$.l && _$setAttribute(_el$32, "aria-controls", _p$.l = _v$11);
+      _v$12 !== _p$.u && _$setAttribute(_el$32, "aria-expanded", _p$.u = _v$12);
+      _v$13 !== _p$.c && _$setAttribute(_el$32, "aria-activedescendant", _p$.c = _v$13);
       return _p$;
     }, {
       e: undefined,
@@ -1063,10 +1051,9 @@ export function ChatComposer(props) {
       d: undefined,
       l: undefined,
       u: undefined,
-      c: undefined,
-      w: undefined
+      c: undefined
     });
-    _$effect(() => _$setProperty(_el$33, "value", props.value));
+    _$effect(() => _$setProperty(_el$32, "value", props.value));
     _$runHydrationEvents();
     return _el$3;
   })();