@k2b/ui 0.2.0 → 0.3.0

package/dist/browser/chat/ChatComposer.js

@@ -3,43 +3,57 @@ 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 { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
+import { memo as _$memo } 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";
+  _tmpl$2 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div role=status>`),
+  _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(`<button type=button class=k2b-chat-composer__stop><i aria-hidden=true>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__icon-action><i aria-hidden=true>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__send><i aria-hidden=true>`);
+import { children, createEffect, createMemo, createSignal, createUniqueId, For, onMount, onCleanup, untrack, 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";
+import { executeChatAction, nextChatCommandIndex, reportChatFailure, runChatSubmission } from "./chat-behavior";
+import { chatCommandQuery, chatMentionSegments, reconcileChatMentions } from "./composer-document";
 const composerMaxInputHeight = 309;
+// Keep editor undo text within approximately 2 MiB, plus the current edit.
+const composerUndoBudgetChars = 1_000_000;
 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 accessory = children(() => props.accessory);
+  const hasAccessory = () => accessory.toArray().some(item => item != null && typeof item !== "boolean" && item !== "");
   const messages = useUiMessages();
   const commandListId = `k2b-chat-commands-${createUniqueId().replace(/[^A-Za-z0-9_-]/g, "-")}`;
   const [selectedCommandIndex, setSelectedCommandIndex] = createSignal(0);
@@ -55,16 +69,129 @@ export function ChatComposer(props) {
   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 [caret, setCaret] = createSignal(0);
+  const [selectionEnd, setSelectionEnd] = createSignal(0);
+  const [dismissed, setDismissed] = createSignal(false);
+  const [composing, setComposing] = createSignal(false);
+  const [searchResults, setSearchResults] = createSignal([]);
+  const [searching, setSearching] = createSignal(false);
+  const [searchError, setSearchError] = createSignal(false);
+  const [executing, setExecuting] = createSignal(false);
+  let highlightRef;
+  let commandListRef;
+  const mentions = () => props.mentions ?? [];
+  const commandQuery = createMemo(() => dismissed() || composing() ? null : chatCommandQuery(props.value, caret(), selectionEnd()));
+  const commandMatches = createMemo(() => {
+    const token = commandQuery();
+    if (!token) return [];
+    return [...(props.commands ?? []).filter(command => command.name.toLowerCase().includes(token.query.toLowerCase())), ...searchResults()];
+  });
+  const commandsOpen = () => Boolean(commandQuery() && (props.commands?.length || props.searchCommands));
+  createEffect(() => {
+    if (!commandsOpen()) return;
+    let disposed = false;
+    const measure = () => {
+      if (disposed || !commandListRef) return;
+      let top = window.visualViewport?.offsetTop ?? 0;
+      for (let parent = commandListRef.parentElement; parent; parent = parent.parentElement) {
+        if (/(auto|scroll|hidden|clip)/.test(window.getComputedStyle(parent).overflowY)) {
+          top = Math.max(top, parent.getBoundingClientRect().top);
+        }
+      }
+      const bottom = commandListRef.parentElement.getBoundingClientRect().bottom;
+      commandListRef.style.setProperty("--k2b-chat-command-space", `${Math.max(40, bottom - top - 8)}px`);
+    };
+    queueMicrotask(measure);
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, true);
+    window.visualViewport?.addEventListener("resize", measure);
+    onCleanup(() => {
+      disposed = true;
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure, true);
+      window.visualViewport?.removeEventListener("resize", measure);
+    });
+  });
+  createEffect(() => {
+    const token = commandQuery();
+    setSearchResults([]);
+    setSearchError(false);
+    if (!token || !props.searchCommands) {
+      setSearching(false);
+      return;
+    }
+    const abort = new AbortController();
+    setSearching(true);
+    const timer = setTimeout(() => {
+      Promise.resolve(props.searchCommands(token.query, abort.signal)).then(results => {
+        if (!abort.signal.aborted) setSearchResults(results);
+      }).catch(() => {
+        if (!abort.signal.aborted) setSearchError(true);
+      }).finally(() => {
+        if (!abort.signal.aborted) setSearching(false);
+      });
+    }, 120);
+    onCleanup(() => {
+      clearTimeout(timer);
+      abort.abort();
+    });
+  });
+  const history = [];
+  let historyIndex = -1;
+  createEffect(() => {
+    props.draftKey;
+    untrack(() => {
+      history.length = 0;
+      historyIndex = -1;
+      setDismissed(true);
+    });
+  });
+  const snapshot = () => ({
+    value: props.value,
+    mentions: [...mentions()],
+    caret: textareaRef?.selectionStart ?? 0
+  });
+  const sameMentions = (a, b) => a.length === b.length && a.every((item, index) => item.start === b[index]?.start && item.end === b[index]?.end && item.attachment === b[index]?.attachment);
+  const record = () => {
+    if (history[historyIndex]?.value !== props.value || !sameMentions(history[historyIndex]?.mentions ?? [], mentions())) {
+      history.splice(historyIndex + 1);
+      history.push(snapshot());
+      let size = history.reduce((total, entry) => total + entry.value.length, 0);
+      while (history.length > 2 && size > composerUndoBudgetChars) size -= history.shift().value.length;
+      historyIndex = history.length - 1;
+    }
+  };
+  const edit = (value, nextMentions = reconcileChatMentions(props.value, value, mentions())) => {
+    record();
+    props.onValueChange(value);
+    props.onMentionsChange?.(nextMentions);
+    record();
+    setDismissed(false);
+  };
+  const restoreHistory = direction => {
+    record();
+    const next = history[historyIndex + direction];
+    if (!next) return;
+    historyIndex += direction;
+    props.onValueChange(next.value);
+    props.onMentionsChange?.(next.mentions);
+    queueMicrotask(() => {
+      textareaRef?.setSelectionRange(next.caret, next.caret);
+      syncCaret();
+    });
+  };
+  const syncCaret = () => {
+    setCaret(textareaRef?.selectionStart ?? props.value.length);
+    setSelectionEnd(textareaRef?.selectionEnd ?? props.value.length);
+  };
   const selectedCommand = () => commandMatches()[selectedCommandIndex()];
-  const blocked = () => Boolean(props.disabled || stopping() || state() === "submitting" || addingFiles() || submitting());
+  const blocked = () => Boolean(props.disabled || stopping() || state() === "submitting" || executing() || addingFiles() || submitting());
   const hasDraft = () => Boolean(props.value.trim() || !running() && attachments().length > 0);
-  const canSubmit = () => !blocked() && hasDraft();
+  const canSubmit = () => !blocked() && hasDraft() && !(running() && runningSubmitIntent() === "steer" && mentions().length);
   const canSelectFiles = () => Boolean(props.fileSelection && !props.fileSelection.disabled && !running() && !blocked());
   const hasAddMenu = () => Boolean(props.fileSelection || props.menuActions?.length);
   const hasContextUsage = () => {
+    if (props.contextPopupAction) return true;
     const context = props.contextUsage;
     if (!context || typeof context.contextWindow !== "number" || !Number.isFinite(context.contextWindow) || context.contextWindow <= 0) {
       return false;
@@ -106,6 +233,18 @@ export function ChatComposer(props) {
     commandMatches();
     setSelectedCommandIndex(0);
   });
+  createEffect(() => {
+    const index = selectedCommandIndex();
+    commandMatches();
+    queueMicrotask(() => {
+      const list = commandListRef;
+      const item = list?.querySelector(`[id="${commandListId}-${index}"]`);
+      if (!list || !item?.isConnected) return;
+      if (item.offsetTop < list.scrollTop) list.scrollTop = item.offsetTop;else if (item.offsetTop + item.offsetHeight > list.scrollTop + list.clientHeight) {
+        list.scrollTop = item.offsetTop + item.offsetHeight - list.clientHeight;
+      }
+    });
+  });
   createEffect(() => {
     props.value;
     queueMicrotask(autoResize);
@@ -152,22 +291,26 @@ export function ChatComposer(props) {
     const intent = running() ? runningSubmitIntent() : "send";
     const previousValue = props.value;
     const previousAttachments = attachments();
+    const previousMentions = mentions();
     const input = {
       intent,
-      text: previousValue.trim(),
-      attachments: intent === "send" ? previousAttachments : []
+      text: previousValue,
+      mentions: previousMentions,
+      attachments: intent !== "steer" ? previousAttachments : []
     };
     setSubmitting(true);
     try {
       await runChatSubmission({
         clear: () => {
           props.onValueChange("");
-          if (intent === "send") setAttachments([]);
+          props.onMentionsChange?.([]);
+          if (intent !== "steer") setAttachments([]);
         },
         perform: () => props.onSubmit(input),
         restore: () => {
           props.onValueChange(previousValue);
-          if (intent === "send") setAttachments(previousAttachments);
+          props.onMentionsChange?.(previousMentions);
+          if (intent !== "steer") setAttachments(previousAttachments);
         },
         onError: props.onError
       });
@@ -180,30 +323,64 @@ export function ChatComposer(props) {
     }
   };
   const executeCommand = async command => {
-    props.onValueChange("");
+    const token = commandQuery();
+    if (!token || command.disabled || blocked()) return;
+    const previous = snapshot();
+    const key = props.draftKey;
+    const replacement = command.mention ? command.mention.name + " " : "";
+    const nextValue = props.value.slice(0, token.start) + replacement + props.value.slice(token.end);
+    const nextMentions = reconcileChatMentions(props.value, nextValue, mentions());
+    if (command.mention) nextMentions.push({
+      start: token.start,
+      end: token.start + command.mention.name.length,
+      attachment: command.mention
+    });
+    edit(nextValue, nextMentions);
+    setDismissed(true);
+    setExecuting(true);
+    let submitRequested = false;
     try {
-      await command.action({
-        setValue: props.onValueChange,
-        submit: () => void submit(),
+      await command.action?.({
+        setValue: value => edit(value),
+        submit: () => {
+          submitRequested = true;
+        },
         focus
       });
     } catch (error) {
+      submitRequested = false;
+      if (props.draftKey === key && props.value === nextValue) {
+        props.onValueChange(previous.value);
+        props.onMentionsChange?.(previous.mentions);
+      }
       props.onError?.(error);
+    } finally {
+      setExecuting(false);
     }
+    if (submitRequested && props.draftKey === key) await submit();
     queueMicrotask(() => {
+      if (props.draftKey !== key) return;
+      textareaRef?.setSelectionRange(token.start + replacement.length, token.start + replacement.length);
+      syncCaret();
       autoResize();
       focus();
     });
   };
   const onKeyDown = event => {
+    if (event.isComposing || composing()) return;
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
+      event.preventDefault();
+      restoreHistory(event.shiftKey ? 1 : -1);
+      return;
+    }
     const matches = commandMatches();
-    if (matches.length > 0) {
+    if (commandsOpen()) {
       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") {
+      if ((event.key === "Enter" || event.key === "Tab") && matches.length > 0) {
         event.preventDefault();
         const command = selectedCommand();
         if (command) void executeCommand(command);
@@ -211,7 +388,7 @@ export function ChatComposer(props) {
       }
       if (event.key === "Escape") {
         event.preventDefault();
-        props.onValueChange("");
+        setDismissed(true);
         return;
       }
     }
@@ -221,281 +398,383 @@ export function ChatComposer(props) {
     }
   };
   return (() => {
-    var _el$3 = _$getNextElement(_tmpl$9),
-      _el$34 = _el$3.firstChild,
-      [_el$35, _co$0] = _$getNextMarker(_el$34.nextSibling),
+    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$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;
+      [_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;
     _$insert(_el$3, _$createComponent(Show, {
       get when() {
-        return commandsOpen();
+        return commandsOpen() || hasAccessory();
       },
       get children() {
-        var _el$4 = _$getNextElement(_tmpl$2);
-        _$setAttribute(_el$4, "id", commandListId);
-        _$insert(_el$4, _$createComponent(For, {
-          get each() {
-            return commandMatches();
+        var _el$4 = _$getNextElement(_tmpl$6),
+          _el$5 = _el$4.firstChild,
+          _el$23 = _el$5.nextSibling,
+          [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling);
+        _$insert(_el$5, accessory);
+        _$insert(_el$4, _$createComponent(Show, {
+          get when() {
+            return commandsOpen();
           },
-          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));
+          get children() {
+            var _el$6 = _$getNextElement(_tmpl$5),
+              _el$7 = _el$6.firstChild,
+              _el$15 = _el$7.firstChild,
+              [_el$16, _co$2] = _$getNextMarker(_el$15.nextSibling),
+              _el$17 = _el$16.nextSibling,
+              [_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);
+            var _ref$ = commandListRef;
+            typeof _ref$ === "function" ? _$use(_ref$, _el$7) : commandListRef = _el$7;
+            _$setAttribute(_el$7, "id", commandListId);
+            _$insert(_el$7, _$createComponent(For, {
+              get each() {
+                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);
+                _$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);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined,
+                  i: undefined
+                });
+                _$runHydrationEvents();
+                return _el$49;
+              })()
+            }), _el$16, _co$2);
+            _$insert(_el$7, _$createComponent(Show, {
+              get when() {
+                return searching();
+              },
+              get children() {
+                var _el$8 = _$getNextElement(_tmpl$2),
+                  _el$9 = _el$8.firstChild,
+                  _el$0 = _el$9.nextSibling;
+                _$insert(_el$0, () => messages().loading);
+                return _el$8;
+              }
+            }), _el$18, _co$3);
+            _$insert(_el$7, _$createComponent(Show, {
+              get when() {
+                return searchError();
+              },
+              get children() {
+                var _el$1 = _$getNextElement(_tmpl$3),
+                  _el$10 = _el$1.firstChild,
+                  _el$11 = _el$10.nextSibling,
+                  _el$12 = _el$11.nextSibling,
+                  [_el$13, _co$] = _$getNextMarker(_el$12.nextSibling);
+                _$insert(_el$1, () => messages().error, _el$13, _co$);
+                return _el$1;
+              }
+            }), _el$20, _co$4);
+            _$insert(_el$7, _$createComponent(Show, {
+              get when() {
+                return _$memo(() => !!(!searching() && !searchError()))() && commandMatches().length === 0;
+              },
+              get children() {
+                var _el$14 = _$getNextElement(_tmpl$4);
+                _$insert(_el$14, () => messages().noResults);
+                return _el$14;
+              }
+            }), _el$22, _co$5);
+            _$effect(() => _$setAttribute(_el$7, "aria-label", messages().commands));
+            return _el$6;
+          }
+        }), _el$24, _co$6);
+        _$effect(_p$ => {
+          var _v$ = commandsOpen() ? "hidden" : undefined,
+            _v$2 = commandsOpen();
+          _v$ !== _p$.e && _$setStyleProperty(_el$5, "visibility", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setProperty(_el$5, "inert", _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
         return _el$4;
       }
-    }), _el$35, _co$0);
-    _$insert(_el$3, _$createComponent(Show, {
+    }), _el$48, _co$11);
+    var _ref$2 = composerRef;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$25) : composerRef = _el$25;
+    _$insert(_el$25, _$createComponent(Show, {
       get when() {
         return attachments().length > 0;
       },
       get children() {
-        var _el$5 = _$getNextElement(_tmpl$3);
-        _$insert(_el$5, _$createComponent(For, {
+        var _el$26 = _$getNextElement(_tmpl$7);
+        _$insert(_el$26, _$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, {
+            var _el$53 = _$getNextElement(_tmpl$12),
+              _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, {
               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, {
+                  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, {
                     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;
+                        var _el$68 = _$getNextElement(_tmpl$15);
+                        _$effect(() => _$className(_el$68, attachmentIcon(attachment)));
+                        return _el$68;
                       })();
                     },
                     get children() {
-                      var _el$58 = _$getNextElement(_tmpl$11);
+                      var _el$63 = _$getNextElement(_tmpl$13);
                       _$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);
+                        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);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$58;
+                      return _el$63;
                     }
-                  }), _el$60, _co$15);
-                  _$insert(_el$57, () => renderAttachmentCopy(attachment), _el$62, _co$16);
-                  return _el$57;
+                  }), _el$65, _co$15);
+                  _$insert(_el$62, () => renderAttachmentCopy(attachment), _el$67, _co$16);
+                  return _el$62;
                 })();
               },
               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, {
+                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, {
                   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;
+                      var _el$75 = _$getNextElement(_tmpl$15);
+                      _$effect(() => _$className(_el$75, attachmentIcon(attachment)));
+                      return _el$75;
                     })();
                   },
                   get children() {
-                    var _el$65 = _$getNextElement(_tmpl$11);
+                    var _el$70 = _$getNextElement(_tmpl$13);
                     _$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);
+                      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);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$65;
+                    return _el$70;
                   }
-                }), _el$67, _co$17);
-                _$insert(_el$64, () => renderAttachmentCopy(attachment), _el$69, _co$18);
+                }), _el$72, _co$17);
+                _$insert(_el$69, () => renderAttachmentCopy(attachment), _el$74, _co$18);
                 _$effect(_p$ => {
-                  var _v$28 = href(),
-                    _v$29 = messages().openInNewTab({
+                  var _v$26 = href(),
+                    _v$27 = 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);
+                  _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);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$64;
+                return _el$69;
               })()
-            }), _el$51, _co$12);
-            _$insert(_el$49, _$createComponent(Show, {
+            }), _el$56, _co$12);
+            _$insert(_el$54, _$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, {
+                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, {
                   get when() {
                     return action().icon;
                   },
                   children: icon => (() => {
-                    var _el$76 = _$getNextElement(_tmpl$13);
-                    _$effect(() => _$className(_el$76, icon()));
-                    return _el$76;
+                    var _el$81 = _$getNextElement(_tmpl$15);
+                    _$effect(() => _$className(_el$81, icon()));
+                    return _el$81;
                   })()
-                }), _el$73, _co$19);
-                _$insert(_el$71, () => action().label, _el$75, _co$20);
-                _$effect(() => _$setProperty(_el$71, "disabled", blocked() || action().disabled));
+                }), _el$78, _co$19);
+                _$insert(_el$76, () => action().label, _el$80, _co$20);
+                _$effect(() => _$setProperty(_el$76, "disabled", blocked() || action().disabled));
                 _$runHydrationEvents();
-                return _el$71;
+                return _el$76;
               })()
-            }), _el$53, _co$13);
-            _$insert(_el$48, _$createComponent(Show, {
+            }), _el$58, _co$13);
+            _$insert(_el$53, _$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));
+                var _el$59 = _$getNextElement(_tmpl$11);
+                _el$59.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
                 _$effect(_p$ => {
-                  var _v$22 = messages().removeNamed({
+                  var _v$20 = 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);
+                    _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);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
                 _$runHydrationEvents();
-                return _el$54;
+                return _el$59;
               }
-            }), _el$56, _co$14);
-            _$effect(() => _el$49.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
-            return _el$48;
+            }), _el$61, _co$14);
+            _$effect(() => _el$54.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
+            return _el$53;
           })()
         }));
-        _$effect(() => _$setAttribute(_el$5, "aria-label", messages().attachments));
-        return _el$5;
+        _$effect(() => _$setAttribute(_el$26, "aria-label", messages().attachments));
+        return _el$26;
       }
-    }), _el$37, _co$1);
-    _el$6.addEventListener("drop", event => {
+    }), _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$6.addEventListener("dragleave", event => {
+    _el$27.addEventListener("dragleave", event => {
       if (!event.currentTarget.contains(event.relatedTarget)) setDragActive(false);
     });
-    _el$6.addEventListener("dragover", event => {
+    _el$27.addEventListener("dragover", event => {
       if (!canSelectFiles() || !event.dataTransfer?.types.includes("Files")) return;
       event.preventDefault();
       setDragActive(true);
     });
-    _el$6.addEventListener("dragenter", event => {
+    _el$27.addEventListener("dragenter", event => {
       if (!canSelectFiles() || !event.dataTransfer?.types.includes("Files")) return;
       event.preventDefault();
       setDragActive(true);
     });
-    _$insert(_el$6, _$createComponent(Show, {
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return dragActive();
       },
       get children() {
-        var _el$7 = _$getNextElement(_tmpl$4);
-        _$insert(_el$7, () => messages().dropFilesToAttach);
-        return _el$7;
+        var _el$28 = _$getNextElement(_tmpl$8);
+        _$insert(_el$28, () => messages().dropFilesToAttach);
+        return _el$28;
+      }
+    }), _el$35, _co$8);
+    _$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 _ref$3 = highlightRef;
+        typeof _ref$3 === "function" ? _$use(_ref$3, _el$29) : highlightRef = _el$29;
+        _$insert(_el$29, _$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;
+          })()
+        }), _el$32, _co$7);
+        return _el$29;
+      }
+    }), _el$37, _co$9);
+    _el$33.$$keydown = onKeyDown;
+    _el$33.$$beforeinput = event => {
+      if (event.inputType === "historyUndo" || event.inputType === "historyRedo") {
+        event.preventDefault();
+        restoreHistory(event.inputType === "historyUndo" ? -1 : 1);
       }
-    }), _el$0, _co$);
-    _el$8.$$keydown = onKeyDown;
-    _el$8.addEventListener("paste", event => {
+    };
+    _el$33.addEventListener("scroll", () => {
+      if (highlightRef && textareaRef) highlightRef.scrollTop = textareaRef.scrollTop;
+    });
+    _el$33.addEventListener("compositionend", () => {
+      setComposing(false);
+      syncCaret();
+    });
+    _el$33.addEventListener("compositionstart", () => setComposing(true));
+    _el$33.$$keyup = syncCaret;
+    _el$33.$$click = () => {
+      setDismissed(false);
+      syncCaret();
+    };
+    _el$33.addEventListener("blur", () => setDismissed(true));
+    _el$33.addEventListener("select", syncCaret);
+    _el$33.addEventListener("paste", event => {
       const clipboardData = event.clipboardData;
       if (canSelectFiles() && clipboardData?.files.length) {
         event.preventDefault();
@@ -504,237 +783,285 @@ export function ChatComposer(props) {
       }
       props.onPaste?.(event);
     });
-    _el$8.$$input = event => {
-      props.onValueChange(event.currentTarget.value);
+    _el$33.$$input = event => {
+      edit(event.currentTarget.value);
+      syncCaret();
       autoResize();
     };
-    var _ref$2 = textareaRef;
-    typeof _ref$2 === "function" ? _$use(_ref$2, _el$8) : textareaRef = _el$8;
-    _$insert(_el$3, _$createComponent(Show, {
+    var _ref$4 = textareaRef;
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$33) : textareaRef = _el$33;
+    _$insert(_el$25, _$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;
+        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;
       }
-    }), _el$39, _co$10);
-    _$insert(_el$14, () => props.footerTools, _el$18, _co$3);
-    _$insert(_el$14, _$createComponent(Show, {
+    }), _el$46, _co$10);
+    _$insert(_el$42, _$createComponent(Show, {
       get when() {
-        return hasAddMenu();
+        return props.footerContent;
       },
-      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 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, {
+            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$19);
+                    }
+                  });
+                }
+              });
+            }
+          }), _el$89, _co$22);
+          _$insert(_el$83, _$createComponent(Show, {
+            get when() {
+              return props.fileSelection;
+            },
+            get children() {
+              var _el$85 = _$getNextElement(_tmpl$20);
+              _el$85.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;
+              _$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);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$85;
+            }
+          }), _el$91, _co$23);
+          _$insert(_el$83, _$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$93, _co$24);
+          _$insert(_el$83, () => props.modelDetails, _el$95, _co$25);
+          return _el$83;
+        })(), (() => {
+          var _el$96 = _$getNextElement(_tmpl$23),
+            _el$99 = _el$96.firstChild,
+            [_el$100, _co$26] = _$getNextMarker(_el$99.nextSibling),
+            _el$101 = _el$100.nextSibling,
+            [_el$102, _co$27] = _$getNextMarker(_el$101.nextSibling),
+            _el$103 = _el$102.nextSibling,
+            [_el$104, _co$28] = _$getNextMarker(_el$103.nextSibling),
+            _el$105 = _el$104.nextSibling,
+            [_el$106, _co$29] = _$getNextMarker(_el$105.nextSibling);
+          _$insert(_el$96, _$createComponent(For, {
+            get each() {
+              return props.contextActions;
+            },
+            children: action => (() => {
+              var _el$107 = _$getNextElement(_tmpl$24),
+                _el$108 = _el$107.firstChild;
+              _el$107.$$click = () => reportChatFailure(() => executeChatAction(action), props.onError);
+              _$effect(_p$ => {
+                var _v$34 = action.variant === "danger" ? "danger" : undefined,
+                  _v$35 = action.disabled,
+                  _v$36 = action.pressed,
+                  _v$37 = action.label,
+                  _v$38 = action.label,
+                  _v$39 = action.icon ?? "ti ti-dots";
+                _v$34 !== _p$.e && _$setAttribute(_el$107, "data-tone", _p$.e = _v$34);
+                _v$35 !== _p$.t && _$setProperty(_el$107, "disabled", _p$.t = _v$35);
+                _v$36 !== _p$.a && _$setAttribute(_el$107, "aria-pressed", _p$.a = _v$36);
+                _v$37 !== _p$.o && _$setAttribute(_el$107, "aria-label", _p$.o = _v$37);
+                _v$38 !== _p$.i && _$setAttribute(_el$107, "title", _p$.i = _v$38);
+                _v$39 !== _p$.n && _$className(_el$108, _p$.n = _v$39);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined,
+                o: undefined,
+                i: undefined,
+                n: undefined
+              });
+              _$runHydrationEvents();
+              return _el$107;
+            })()
+          }), _el$100, _co$26);
+          _$insert(_el$96, _$createComponent(Show, {
+            get when() {
+              return _$memo(() => !!hasContextUsage())() ? props.contextUsage ?? {} : undefined;
+            },
+            children: usage => _$createComponent(ContextUsage, _$mergeProps(usage, {
+              get action() {
+                return props.contextPopupAction;
               },
-              get children() {
-                return _$getNextElement(_tmpl$6);
+              get onActionError() {
+                return props.onError;
               }
-            });
-          }
-        });
-      }
-    }), _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;
-        })();
+            }))
+          }), _el$102, _co$27);
+          _$insert(_el$96, () => props.submitTools, _el$104, _co$28);
+          _$insert(_el$96, _$createComponent(Show, {
+            get when() {
+              return _$memo(() => !!(running() && !hasDraft()))() && props.onStop;
+            },
+            get fallback() {
+              return (() => {
+                var _el$109 = _$getNextElement(_tmpl$25),
+                  _el$110 = _el$109.firstChild;
+                _el$109.$$click = () => void submit();
+                _$effect(_p$ => {
+                  var _v$40 = !canSubmit(),
+                    _v$41 = submitting() ? running() ? runningSubmitIntent() === "queue" ? messages().queueing : messages().steering : messages().sending : running() ? runningSubmitIntent() === "queue" ? messages().queueMessage : messages().steerResponse : messages().sendMessage,
+                    _v$42 = running() ? runningSubmitIntent() === "queue" ? messages().queueMessage : messages().steerResponse : messages().sendMessage,
+                    _v$43 = submitting() ? "ti ti-loader-2 k2b-spin" : "ti ti-arrow-up";
+                  _v$40 !== _p$.e && _$setProperty(_el$109, "disabled", _p$.e = _v$40);
+                  _v$41 !== _p$.t && _$setAttribute(_el$109, "aria-label", _p$.t = _v$41);
+                  _v$42 !== _p$.a && _$setAttribute(_el$109, "title", _p$.a = _v$42);
+                  _v$43 !== _p$.o && _$className(_el$110, _p$.o = _v$43);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined
+                });
+                _$runHydrationEvents();
+                return _el$109;
+              })();
+            },
+            get children() {
+              var _el$97 = _$getNextElement(_tmpl$22),
+                _el$98 = _el$97.firstChild;
+              _el$97.$$click = () => reportChatFailure(() => props.onStop?.(), props.onError);
+              _$effect(_p$ => {
+                var _v$30 = stopping(),
+                  _v$31 = stopping() ? messages().stopping : messages().stopResponse,
+                  _v$32 = stopping() ? messages().stopping : messages().stopResponse,
+                  _v$33 = stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop";
+                _v$30 !== _p$.e && _$setProperty(_el$97, "disabled", _p$.e = _v$30);
+                _v$31 !== _p$.t && _$setAttribute(_el$97, "aria-label", _p$.t = _v$31);
+                _v$32 !== _p$.a && _$setAttribute(_el$97, "title", _p$.a = _v$32);
+                _v$33 !== _p$.o && _$className(_el$98, _p$.o = _v$33);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined,
+                o: undefined
+              });
+              _$runHydrationEvents();
+              return _el$97;
+            }
+          }), _el$106, _co$29);
+          return _el$96;
+        })()];
       },
-      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);
+      children: content => content()
+    }));
     _$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);
+      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$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);
       return _p$;
     }, {
       e: undefined,
@@ -749,12 +1076,13 @@ export function ChatComposer(props) {
       d: undefined,
       l: undefined,
       u: undefined,
-      c: undefined
+      c: undefined,
+      w: undefined
     });
-    _$effect(() => _$setProperty(_el$8, "value", props.value));
+    _$effect(() => _$setProperty(_el$33, "value", props.value));
     _$runHydrationEvents();
     return _el$3;
   })();
 }
-_$delegateEvents(["input", "keydown", "click", "pointerdown"]);
+_$delegateEvents(["input", "click", "keyup", "beforeinput", "keydown", "pointerdown"]);
 //# sourceMappingURL=ChatComposer.js.map