@k2b/ui 0.1.0-rc.0

package/dist/browser/chat/ChatComposer.js

@@ -0,0 +1,760 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span><strong>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__commands role=listbox>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__drop aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<i class="ti ti-plus"aria-hidden=true>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<input class=k2b-sr-only type=file tabindex=-1 aria-hidden=true>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__stop><i aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<section role=group><!$><!/><!$><!/><div class=k2b-chat-composer__input role=group><!$><!/><textarea rows=1></textarea></div><!$><!/><footer class=k2b-chat-composer__footer><div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/></div><div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><i aria-hidden=true></i><span><strong>/<!$><!/></strong><small>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<img>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__icon-action><i aria-hidden=true>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__send><i aria-hidden=true>`);
+import { createEffect, createMemo, createSignal, createUniqueId, For, onMount, Show } from "solid-js";
+import { Dropdown } from "../actions/Dropdown";
+import { SelectChip } from "../inputs/SelectChip";
+import { useUiMessages } from "../intl/messages";
+import { ChatContextUsage as ContextUsage } from "./ChatPrimitives";
+import { executeChatAction, filterChatCommands, nextChatCommandIndex, reportChatFailure, runChatSubmission } from "./chat-behavior";
+const composerMaxInputHeight = 309;
+const attachmentIcon = attachment => attachment.icon ?? (attachment.kind === "image" ? "ti ti-photo" : attachment.kind === "resource" ? "ti ti-link" : "ti ti-file");
+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;
+  let textareaRef;
+  let fileInputRef;
+  let sawRunning = props.state === "running";
+  const state = () => props.state ?? "idle";
+  const running = () => state() === "running";
+  const stopping = () => state() === "stopping";
+  const runningSubmitIntent = () => props.runningSubmitIntent ?? "steer";
+  const attachments = () => props.attachments ?? [];
+  const commands = () => props.commands ?? [];
+  const commandMatches = createMemo(() => filterChatCommands(props.value, commands()));
+  const commandsOpen = () => commandMatches().length > 0;
+  const selectedCommand = () => commandMatches()[selectedCommandIndex()];
+  const blocked = () => Boolean(props.disabled || stopping() || state() === "submitting" || addingFiles() || submitting());
+  const hasDraft = () => Boolean(props.value.trim() || !running() && attachments().length > 0);
+  const canSubmit = () => !blocked() && hasDraft();
+  const canSelectFiles = () => Boolean(props.fileSelection && !props.fileSelection.disabled && !running() && !blocked());
+  const hasAddMenu = () => Boolean(props.fileSelection || props.menuActions?.length);
+  const hasContextUsage = () => {
+    const context = props.contextUsage;
+    if (!context || typeof context.contextWindow !== "number" || !Number.isFinite(context.contextWindow) || context.contextWindow <= 0) {
+      return false;
+    }
+    return [context.usage?.total, context.usage?.input, context.usage?.output].some(value => typeof value === "number" && Number.isFinite(value) && value >= 0);
+  };
+  const menuItems = () => {
+    const items = [];
+    if (props.fileSelection) {
+      items.push({
+        icon: addingFiles() ? "ti ti-loader-2 k2b-spin" : "ti ti-paperclip",
+        label: props.fileSelection.label ?? messages().attachFiles,
+        disabled: !canSelectFiles(),
+        action: () => fileInputRef?.click()
+      });
+    }
+    for (const action of props.menuActions ?? []) {
+      items.push({
+        icon: action.icon,
+        label: action.label,
+        variant: action.variant,
+        disabled: action.disabled,
+        action: () => reportChatFailure(() => executeChatAction(action), props.onError)
+      });
+    }
+    return items;
+  };
+  const autoResize = () => {
+    if (!textareaRef) return;
+    textareaRef.style.height = "auto";
+    textareaRef.style.height = `${Math.min(textareaRef.scrollHeight, composerMaxInputHeight)}px`;
+  };
+  const focus = () => textareaRef?.focus();
+  onMount(() => {
+    autoResize();
+    if (props.focusToken !== undefined) focus();
+  });
+  createEffect(() => {
+    commandMatches();
+    setSelectedCommandIndex(0);
+  });
+  createEffect(() => {
+    props.value;
+    queueMicrotask(autoResize);
+  });
+  createEffect(() => {
+    props.focusToken;
+    if (props.focusToken !== undefined) queueMicrotask(focus);
+  });
+  createEffect(() => {
+    const active = running();
+    if (sawRunning && !active && !props.disabled && typeof document !== "undefined") {
+      const focused = document.activeElement;
+      const insideComposer = Boolean(focused && composerRef?.contains(focused));
+      const editingElsewhere = Boolean(focused && focused !== document.body && !insideComposer && (focused.matches("input, textarea, select") || focused.isContentEditable || focused.closest("[role='dialog'], [popover]")));
+      if (!editingElsewhere) queueMicrotask(focus);
+    }
+    sawRunning = active;
+  });
+  const setAttachments = next => props.onAttachmentsChange?.(next);
+  const renderAttachmentCopy = attachment => (() => {
+    var _el$ = _$getNextElement(_tmpl$),
+      _el$2 = _el$.firstChild;
+    _$insert(_el$2, () => attachment.name);
+    _$effect(() => _$setAttribute(_el$2, "title", attachment.name));
+    return _el$;
+  })();
+  const runFiles = async files => {
+    if (!canSelectFiles()) return;
+    const selected = Array.from(files);
+    if (selected.length === 0) return;
+    setAddingFiles(true);
+    try {
+      await props.fileSelection?.onSelect(selected);
+    } catch (error) {
+      (props.fileSelection?.onError ?? props.onError)?.(error);
+    } finally {
+      setAddingFiles(false);
+      if (fileInputRef) fileInputRef.value = "";
+      queueMicrotask(focus);
+    }
+  };
+  const submit = async () => {
+    if (!canSubmit()) return;
+    const intent = running() ? runningSubmitIntent() : "send";
+    const previousValue = props.value;
+    const previousAttachments = attachments();
+    const input = {
+      intent,
+      text: previousValue.trim(),
+      attachments: intent === "send" ? previousAttachments : []
+    };
+    setSubmitting(true);
+    try {
+      await runChatSubmission({
+        clear: () => {
+          props.onValueChange("");
+          if (intent === "send") setAttachments([]);
+        },
+        perform: () => props.onSubmit(input),
+        restore: () => {
+          props.onValueChange(previousValue);
+          if (intent === "send") setAttachments(previousAttachments);
+        },
+        onError: props.onError
+      });
+    } finally {
+      setSubmitting(false);
+      queueMicrotask(() => {
+        autoResize();
+        focus();
+      });
+    }
+  };
+  const executeCommand = async command => {
+    props.onValueChange("");
+    try {
+      await command.action({
+        setValue: props.onValueChange,
+        submit: () => void submit(),
+        focus
+      });
+    } catch (error) {
+      props.onError?.(error);
+    }
+    queueMicrotask(() => {
+      autoResize();
+      focus();
+    });
+  };
+  const onKeyDown = event => {
+    const matches = commandMatches();
+    if (matches.length > 0) {
+      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+        event.preventDefault();
+        setSelectedCommandIndex(index => nextChatCommandIndex(index, matches.length, event.key === "ArrowUp" ? -1 : 1));
+        return;
+      }
+      if (event.key === "Enter" || event.key === "Tab") {
+        event.preventDefault();
+        const command = selectedCommand();
+        if (command) void executeCommand(command);
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        props.onValueChange("");
+        return;
+      }
+    }
+    if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+      event.preventDefault();
+      void submit();
+    }
+  };
+  return (() => {
+    var _el$3 = _$getNextElement(_tmpl$9),
+      _el$34 = _el$3.firstChild,
+      [_el$35, _co$0] = _$getNextMarker(_el$34.nextSibling),
+      _el$36 = _el$35.nextSibling,
+      [_el$37, _co$1] = _$getNextMarker(_el$36.nextSibling),
+      _el$6 = _el$37.nextSibling,
+      _el$9 = _el$6.firstChild,
+      [_el$0, _co$] = _$getNextMarker(_el$9.nextSibling),
+      _el$8 = _el$0.nextSibling,
+      _el$38 = _el$6.nextSibling,
+      [_el$39, _co$10] = _$getNextMarker(_el$38.nextSibling),
+      _el$13 = _el$39.nextSibling,
+      _el$14 = _el$13.firstChild,
+      _el$17 = _el$14.firstChild,
+      [_el$18, _co$3] = _$getNextMarker(_el$17.nextSibling),
+      _el$19 = _el$18.nextSibling,
+      [_el$20, _co$4] = _$getNextMarker(_el$19.nextSibling),
+      _el$21 = _el$20.nextSibling,
+      [_el$22, _co$5] = _$getNextMarker(_el$21.nextSibling),
+      _el$23 = _el$22.nextSibling,
+      [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling),
+      _el$25 = _el$14.nextSibling,
+      _el$28 = _el$25.firstChild,
+      [_el$29, _co$7] = _$getNextMarker(_el$28.nextSibling),
+      _el$30 = _el$29.nextSibling,
+      [_el$31, _co$8] = _$getNextMarker(_el$30.nextSibling),
+      _el$32 = _el$31.nextSibling,
+      [_el$33, _co$9] = _$getNextMarker(_el$32.nextSibling);
+    var _ref$ = composerRef;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$3) : composerRef = _el$3;
+    _$insert(_el$3, _$createComponent(Show, {
+      get when() {
+        return commandsOpen();
+      },
+      get children() {
+        var _el$4 = _$getNextElement(_tmpl$2);
+        _$setAttribute(_el$4, "id", commandListId);
+        _$insert(_el$4, _$createComponent(For, {
+          get each() {
+            return commandMatches();
+          },
+          children: (command, index) => (() => {
+            var _el$40 = _$getNextElement(_tmpl$0),
+              _el$41 = _el$40.firstChild,
+              _el$42 = _el$41.nextSibling,
+              _el$43 = _el$42.firstChild,
+              _el$44 = _el$43.firstChild,
+              _el$45 = _el$44.nextSibling,
+              [_el$46, _co$11] = _$getNextMarker(_el$45.nextSibling),
+              _el$47 = _el$43.nextSibling;
+            _el$40.$$click = () => void executeCommand(command);
+            _el$40.$$pointerdown = event => event.preventDefault();
+            _$insert(_el$43, () => command.name, _el$46, _co$11);
+            _$insert(_el$47, () => command.description);
+            _$effect(_p$ => {
+              var _v$18 = `${commandListId}-${index()}`,
+                _v$19 = index() === selectedCommandIndex(),
+                _v$20 = index() === selectedCommandIndex() ? "true" : undefined,
+                _v$21 = command.icon ?? "ti ti-slash";
+              _v$18 !== _p$.e && _$setAttribute(_el$40, "id", _p$.e = _v$18);
+              _v$19 !== _p$.t && _$setAttribute(_el$40, "aria-selected", _p$.t = _v$19);
+              _v$20 !== _p$.a && _$setAttribute(_el$40, "data-active", _p$.a = _v$20);
+              _v$21 !== _p$.o && _$className(_el$41, _p$.o = _v$21);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined,
+              o: undefined
+            });
+            _$runHydrationEvents();
+            return _el$40;
+          })()
+        }));
+        _$effect(() => _$setAttribute(_el$4, "aria-label", messages().commands));
+        return _el$4;
+      }
+    }), _el$35, _co$0);
+    _$insert(_el$3, _$createComponent(Show, {
+      get when() {
+        return attachments().length > 0;
+      },
+      get children() {
+        var _el$5 = _$getNextElement(_tmpl$3);
+        _$insert(_el$5, _$createComponent(For, {
+          get each() {
+            return attachments();
+          },
+          children: attachment => (() => {
+            var _el$48 = _$getNextElement(_tmpl$10),
+              _el$49 = _el$48.firstChild,
+              _el$50 = _el$49.firstChild,
+              [_el$51, _co$12] = _$getNextMarker(_el$50.nextSibling),
+              _el$52 = _el$51.nextSibling,
+              [_el$53, _co$13] = _$getNextMarker(_el$52.nextSibling),
+              _el$55 = _el$49.nextSibling,
+              [_el$56, _co$14] = _$getNextMarker(_el$55.nextSibling);
+            _$insert(_el$49, _$createComponent(Show, {
+              get when() {
+                return attachment.href;
+              },
+              get fallback() {
+                return (() => {
+                  var _el$57 = _$getNextElement(_tmpl$12),
+                    _el$59 = _el$57.firstChild,
+                    [_el$60, _co$15] = _$getNextMarker(_el$59.nextSibling),
+                    _el$61 = _el$60.nextSibling,
+                    [_el$62, _co$16] = _$getNextMarker(_el$61.nextSibling);
+                  _$insert(_el$57, _$createComponent(Show, {
+                    get when() {
+                      return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
+                    },
+                    get fallback() {
+                      return (() => {
+                        var _el$63 = _$getNextElement(_tmpl$13);
+                        _$effect(() => _$className(_el$63, attachmentIcon(attachment)));
+                        return _el$63;
+                      })();
+                    },
+                    get children() {
+                      var _el$58 = _$getNextElement(_tmpl$11);
+                      _$effect(_p$ => {
+                        var _v$24 = attachment.previewUrl,
+                          _v$25 = attachment.alt ?? "";
+                        _v$24 !== _p$.e && _$setAttribute(_el$58, "src", _p$.e = _v$24);
+                        _v$25 !== _p$.t && _$setAttribute(_el$58, "alt", _p$.t = _v$25);
+                        return _p$;
+                      }, {
+                        e: undefined,
+                        t: undefined
+                      });
+                      return _el$58;
+                    }
+                  }), _el$60, _co$15);
+                  _$insert(_el$57, () => renderAttachmentCopy(attachment), _el$62, _co$16);
+                  return _el$57;
+                })();
+              },
+              children: href => (() => {
+                var _el$64 = _$getNextElement(_tmpl$14),
+                  _el$66 = _el$64.firstChild,
+                  [_el$67, _co$17] = _$getNextMarker(_el$66.nextSibling),
+                  _el$68 = _el$67.nextSibling,
+                  [_el$69, _co$18] = _$getNextMarker(_el$68.nextSibling);
+                _$insert(_el$64, _$createComponent(Show, {
+                  get when() {
+                    return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
+                  },
+                  get fallback() {
+                    return (() => {
+                      var _el$70 = _$getNextElement(_tmpl$13);
+                      _$effect(() => _$className(_el$70, attachmentIcon(attachment)));
+                      return _el$70;
+                    })();
+                  },
+                  get children() {
+                    var _el$65 = _$getNextElement(_tmpl$11);
+                    _$effect(_p$ => {
+                      var _v$26 = attachment.previewUrl,
+                        _v$27 = attachment.alt ?? "";
+                      _v$26 !== _p$.e && _$setAttribute(_el$65, "src", _p$.e = _v$26);
+                      _v$27 !== _p$.t && _$setAttribute(_el$65, "alt", _p$.t = _v$27);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined
+                    });
+                    return _el$65;
+                  }
+                }), _el$67, _co$17);
+                _$insert(_el$64, () => renderAttachmentCopy(attachment), _el$69, _co$18);
+                _$effect(_p$ => {
+                  var _v$28 = href(),
+                    _v$29 = messages().openInNewTab({
+                      name: attachment.name
+                    });
+                  _v$28 !== _p$.e && _$setAttribute(_el$64, "href", _p$.e = _v$28);
+                  _v$29 !== _p$.t && _$setAttribute(_el$64, "aria-label", _p$.t = _v$29);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                return _el$64;
+              })()
+            }), _el$51, _co$12);
+            _$insert(_el$49, _$createComponent(Show, {
+              get when() {
+                return attachment.action;
+              },
+              children: action => (() => {
+                var _el$71 = _$getNextElement(_tmpl$15),
+                  _el$72 = _el$71.firstChild,
+                  [_el$73, _co$19] = _$getNextMarker(_el$72.nextSibling),
+                  _el$74 = _el$73.nextSibling,
+                  [_el$75, _co$20] = _$getNextMarker(_el$74.nextSibling);
+                _el$71.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
+                _$insert(_el$71, _$createComponent(Show, {
+                  get when() {
+                    return action().icon;
+                  },
+                  children: icon => (() => {
+                    var _el$76 = _$getNextElement(_tmpl$13);
+                    _$effect(() => _$className(_el$76, icon()));
+                    return _el$76;
+                  })()
+                }), _el$73, _co$19);
+                _$insert(_el$71, () => action().label, _el$75, _co$20);
+                _$effect(() => _$setProperty(_el$71, "disabled", blocked() || action().disabled));
+                _$runHydrationEvents();
+                return _el$71;
+              })()
+            }), _el$53, _co$13);
+            _$insert(_el$48, _$createComponent(Show, {
+              get when() {
+                return props.onAttachmentsChange;
+              },
+              get children() {
+                var _el$54 = _$getNextElement(_tmpl$1);
+                _el$54.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
+                _$effect(_p$ => {
+                  var _v$22 = messages().removeNamed({
+                      name: attachment.name
+                    }),
+                    _v$23 = blocked();
+                  _v$22 !== _p$.e && _$setAttribute(_el$54, "aria-label", _p$.e = _v$22);
+                  _v$23 !== _p$.t && _$setProperty(_el$54, "disabled", _p$.t = _v$23);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                _$runHydrationEvents();
+                return _el$54;
+              }
+            }), _el$56, _co$14);
+            _$effect(() => _el$49.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
+            return _el$48;
+          })()
+        }));
+        _$effect(() => _$setAttribute(_el$5, "aria-label", messages().attachments));
+        return _el$5;
+      }
+    }), _el$37, _co$1);
+    _el$6.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$6.addEventListener("dragleave", event => {
+      if (!event.currentTarget.contains(event.relatedTarget)) setDragActive(false);
+    });
+    _el$6.addEventListener("dragover", event => {
+      if (!canSelectFiles() || !event.dataTransfer?.types.includes("Files")) return;
+      event.preventDefault();
+      setDragActive(true);
+    });
+    _el$6.addEventListener("dragenter", event => {
+      if (!canSelectFiles() || !event.dataTransfer?.types.includes("Files")) return;
+      event.preventDefault();
+      setDragActive(true);
+    });
+    _$insert(_el$6, _$createComponent(Show, {
+      get when() {
+        return dragActive();
+      },
+      get children() {
+        var _el$7 = _$getNextElement(_tmpl$4);
+        _$insert(_el$7, () => messages().dropFilesToAttach);
+        return _el$7;
+      }
+    }), _el$0, _co$);
+    _el$8.$$keydown = onKeyDown;
+    _el$8.addEventListener("paste", event => {
+      const clipboardData = event.clipboardData;
+      if (canSelectFiles() && clipboardData?.files.length) {
+        event.preventDefault();
+        void runFiles(clipboardData.files);
+        return;
+      }
+      props.onPaste?.(event);
+    });
+    _el$8.$$input = event => {
+      props.onValueChange(event.currentTarget.value);
+      autoResize();
+    };
+    var _ref$2 = textareaRef;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$8) : textareaRef = _el$8;
+    _$insert(_el$3, _$createComponent(Show, {
+      get when() {
+        return props.error;
+      },
+      get children() {
+        var _el$1 = _$getNextElement(_tmpl$5),
+          _el$10 = _el$1.firstChild,
+          _el$11 = _el$10.nextSibling,
+          [_el$12, _co$2] = _$getNextMarker(_el$11.nextSibling);
+        _$insert(_el$1, () => props.error, _el$12, _co$2);
+        return _el$1;
+      }
+    }), _el$39, _co$10);
+    _$insert(_el$14, () => props.footerTools, _el$18, _co$3);
+    _$insert(_el$14, _$createComponent(Show, {
+      get when() {
+        return hasAddMenu();
+      },
+      get children() {
+        return _$createComponent(Dropdown.Root, {
+          position: "top-right",
+          width: "12rem",
+          get label() {
+            return messages().addToChat;
+          },
+          get items() {
+            return menuItems();
+          },
+          get disabled() {
+            return blocked();
+          },
+          get children() {
+            return _$createComponent(Dropdown.Trigger, {
+              appearance: "plain",
+              "class": "k2b-chat-composer__icon-action",
+              get label() {
+                return messages().addToChat;
+              },
+              get title() {
+                return messages().addToChat;
+              },
+              get children() {
+                return _$getNextElement(_tmpl$6);
+              }
+            });
+          }
+        });
+      }
+    }), _el$20, _co$4);
+    _$insert(_el$14, _$createComponent(Show, {
+      get when() {
+        return props.fileSelection;
+      },
+      get children() {
+        var _el$16 = _$getNextElement(_tmpl$7);
+        _el$16.addEventListener("change", event => {
+          if (event.currentTarget.files?.length) void runFiles(event.currentTarget.files);
+        });
+        var _ref$3 = fileInputRef;
+        typeof _ref$3 === "function" ? _$use(_ref$3, _el$16) : fileInputRef = _el$16;
+        _$effect(_p$ => {
+          var _v$ = props.fileSelection?.accept,
+            _v$2 = props.fileSelection?.multiple ?? true;
+          _v$ !== _p$.e && _$setAttribute(_el$16, "accept", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setProperty(_el$16, "multiple", _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$16;
+      }
+    }), _el$22, _co$5);
+    _$insert(_el$14, _$createComponent(Show, {
+      get when() {
+        return (props.models?.length ?? 0) > 0;
+      },
+      get children() {
+        return _$createComponent(SelectChip, {
+          get ["aria-label"]() {
+            return messages().chooseModel;
+          },
+          position: "top-right",
+          "class": "k2b-chat-composer__model",
+          menuWidth: "15rem",
+          get placeholder() {
+            return messages().model;
+          },
+          value: () => props.selectedModelId ?? "",
+          get options() {
+            return (props.models ?? []).map(model => ({
+              value: model.id,
+              label: model.label,
+              description: model.description,
+              icon: model.icon,
+              image: model.image
+            }));
+          },
+          get disabled() {
+            return blocked() || running() || !props.onModelChange;
+          },
+          onValueChange: modelId => {
+            props.onModelChange?.(modelId);
+            queueMicrotask(focus);
+          }
+        });
+      }
+    }), _el$24, _co$6);
+    _$insert(_el$25, _$createComponent(For, {
+      get each() {
+        return props.contextActions;
+      },
+      children: action => (() => {
+        var _el$77 = _$getNextElement(_tmpl$16),
+          _el$78 = _el$77.firstChild;
+        _el$77.$$click = () => reportChatFailure(() => executeChatAction(action), props.onError);
+        _$effect(_p$ => {
+          var _v$30 = action.variant === "danger" ? "danger" : undefined,
+            _v$31 = action.disabled,
+            _v$32 = action.label,
+            _v$33 = action.label,
+            _v$34 = action.icon ?? "ti ti-dots";
+          _v$30 !== _p$.e && _$setAttribute(_el$77, "data-tone", _p$.e = _v$30);
+          _v$31 !== _p$.t && _$setProperty(_el$77, "disabled", _p$.t = _v$31);
+          _v$32 !== _p$.a && _$setAttribute(_el$77, "aria-label", _p$.a = _v$32);
+          _v$33 !== _p$.o && _$setAttribute(_el$77, "title", _p$.o = _v$33);
+          _v$34 !== _p$.i && _$className(_el$78, _p$.i = _v$34);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined
+        });
+        _$runHydrationEvents();
+        return _el$77;
+      })()
+    }), _el$29, _co$7);
+    _$insert(_el$25, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!hasContextUsage())() ? props.contextUsage : undefined;
+      },
+      children: usage => _$createComponent(ContextUsage, _$mergeProps(usage))
+    }), _el$31, _co$8);
+    _$insert(_el$25, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!(running() && !hasDraft()))() && props.onStop;
+      },
+      get fallback() {
+        return (() => {
+          var _el$79 = _$getNextElement(_tmpl$17),
+            _el$80 = _el$79.firstChild;
+          _el$79.$$click = () => void submit();
+          _$effect(_p$ => {
+            var _v$35 = !canSubmit(),
+              _v$36 = submitting() ? running() ? runningSubmitIntent() === "queue" ? messages().queueing : messages().steering : messages().sending : running() ? runningSubmitIntent() === "queue" ? messages().queueMessage : messages().steerResponse : messages().sendMessage,
+              _v$37 = running() ? runningSubmitIntent() === "queue" ? messages().queueMessage : messages().steerResponse : messages().sendMessage,
+              _v$38 = submitting() ? "ti ti-loader-2 k2b-spin" : "ti ti-arrow-up";
+            _v$35 !== _p$.e && _$setProperty(_el$79, "disabled", _p$.e = _v$35);
+            _v$36 !== _p$.t && _$setAttribute(_el$79, "aria-label", _p$.t = _v$36);
+            _v$37 !== _p$.a && _$setAttribute(_el$79, "title", _p$.a = _v$37);
+            _v$38 !== _p$.o && _$className(_el$80, _p$.o = _v$38);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined
+          });
+          _$runHydrationEvents();
+          return _el$79;
+        })();
+      },
+      get children() {
+        var _el$26 = _$getNextElement(_tmpl$8),
+          _el$27 = _el$26.firstChild;
+        _el$26.$$click = () => reportChatFailure(() => props.onStop?.(), props.onError);
+        _$effect(_p$ => {
+          var _v$3 = stopping(),
+            _v$4 = stopping() ? messages().stopping : messages().stopResponse,
+            _v$5 = stopping() ? messages().stopping : messages().stopResponse,
+            _v$6 = stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop";
+          _v$3 !== _p$.e && _$setProperty(_el$26, "disabled", _p$.e = _v$3);
+          _v$4 !== _p$.t && _$setAttribute(_el$26, "aria-label", _p$.t = _v$4);
+          _v$5 !== _p$.a && _$setAttribute(_el$26, "title", _p$.a = _v$5);
+          _v$6 !== _p$.o && _$className(_el$27, _p$.o = _v$6);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
+        _$runHydrationEvents();
+        return _el$26;
+      }
+    }), _el$33, _co$9);
+    _$effect(_p$ => {
+      var _v$7 = `k2b-chat-composer ${props.class ?? ""}`,
+        _v$8 = running() ? "true" : undefined,
+        _v$9 = dragActive() ? "true" : undefined,
+        _v$0 = props.label ?? messages().messageComposer,
+        _v$1 = messages().messageInput,
+        _v$10 = blocked(),
+        _v$11 = props.placeholder ?? (running() ? messages().addGuidance : messages().writeMessage),
+        _v$12 = props.inputLabel ?? messages().message,
+        _v$13 = commandsOpen() ? "combobox" : undefined,
+        _v$14 = commandsOpen() ? "list" : undefined,
+        _v$15 = commandsOpen() ? commandListId : undefined,
+        _v$16 = commandsOpen() ? "true" : undefined,
+        _v$17 = selectedCommand() ? `${commandListId}-${selectedCommandIndex()}` : undefined;
+      _v$7 !== _p$.e && _$className(_el$3, _p$.e = _v$7);
+      _v$8 !== _p$.t && _$setAttribute(_el$3, "data-running", _p$.t = _v$8);
+      _v$9 !== _p$.a && _$setAttribute(_el$3, "data-drag-active", _p$.a = _v$9);
+      _v$0 !== _p$.o && _$setAttribute(_el$3, "aria-label", _p$.o = _v$0);
+      _v$1 !== _p$.i && _$setAttribute(_el$6, "aria-label", _p$.i = _v$1);
+      _v$10 !== _p$.n && _$setProperty(_el$8, "disabled", _p$.n = _v$10);
+      _v$11 !== _p$.s && _$setAttribute(_el$8, "placeholder", _p$.s = _v$11);
+      _v$12 !== _p$.h && _$setAttribute(_el$8, "aria-label", _p$.h = _v$12);
+      _v$13 !== _p$.r && _$setAttribute(_el$8, "role", _p$.r = _v$13);
+      _v$14 !== _p$.d && _$setAttribute(_el$8, "aria-autocomplete", _p$.d = _v$14);
+      _v$15 !== _p$.l && _$setAttribute(_el$8, "aria-controls", _p$.l = _v$15);
+      _v$16 !== _p$.u && _$setAttribute(_el$8, "aria-expanded", _p$.u = _v$16);
+      _v$17 !== _p$.c && _$setAttribute(_el$8, "aria-activedescendant", _p$.c = _v$17);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined,
+      c: undefined
+    });
+    _$effect(() => _$setProperty(_el$8, "value", props.value));
+    _$runHydrationEvents();
+    return _el$3;
+  })();
+}
+_$delegateEvents(["input", "keydown", "click", "pointerdown"]);
+//# sourceMappingURL=ChatComposer.js.map