@k2b/ui 0.2.0 → 0.4.0

package/dist/ssr/chat/ChatComposer.js

@@ -1,36 +1,50 @@
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
 import { ssr as _$ssr } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<span><strong", ">", "</strong></span>"],
-  _tmpl$2 = ["<div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "</div>"],
-  _tmpl$3 = ["<div class=\"k2b-chat-composer__attachments\" role=\"list\"", " tabindex=\"0\">", "</div>"],
-  _tmpl$4 = ["<div class=\"k2b-chat-composer__drop\" aria-hidden=\"true\">", "</div>"],
-  _tmpl$5 = ["<div class=\"k2b-chat-composer__error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</div>"],
-  _tmpl$6 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>",
-  _tmpl$7 = ["<input class=\"k2b-sr-only\" type=\"file\" tabindex=\"-1\" aria-hidden=\"true\"", "", ">"],
-  _tmpl$8 = ["<button type=\"button\" class=\"k2b-chat-composer__stop\"", "><i", " aria-hidden=\"true\"></i></button>"],
-  _tmpl$9 = ["<section class=\"", "\"", " 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\">", "", "", "</div></footer></section>"],
-  _tmpl$0 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><i", " aria-hidden=\"true\"></i><span><strong>/", "</strong><small>", "</small></span></button>"],
-  _tmpl$1 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
-  _tmpl$10 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
-  _tmpl$11 = ["<img", ">"],
-  _tmpl$12 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
-  _tmpl$13 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$14 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
-  _tmpl$15 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
-  _tmpl$16 = ["<button type=\"button\" class=\"k2b-chat-composer__icon-action\"", "", "><i", " aria-hidden=\"true\"></i></button>"],
-  _tmpl$17 = ["<button type=\"button\" class=\"k2b-chat-composer__send\"", "><i", " aria-hidden=\"true\"></i></button>"];
-import { createEffect, createMemo, createSignal, createUniqueId, For, onMount, Show } from "solid-js";
+  _tmpl$2 = ["<div role=\"status\" class=\"k2b-chat-composer__loading\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><strong>", "</strong></div>"],
+  _tmpl$3 = ["<div role=\"status\"><i class=\"ti ti-alert-circle\"></i> ", "</div>"],
+  _tmpl$4 = ["<div role=\"status\">", "</div>"],
+  _tmpl$5 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "", "", "", "</div></div>"],
+  _tmpl$6 = ["<div class=\"k2b-chat-composer-slot\"><div style=\"", "\"", ">", "</div>", "</div>"],
+  _tmpl$7 = ["<div class=\"k2b-chat-composer__attachments\" role=\"list\"", " tabindex=\"0\">", "</div>"],
+  _tmpl$8 = ["<div class=\"k2b-chat-composer__drop\" aria-hidden=\"true\">", "</div>"],
+  _tmpl$9 = ["<div class=\"k2b-chat-composer__highlight\" aria-hidden=\"true\">", "\n</div>"],
+  _tmpl$0 = ["<div class=\"k2b-chat-composer__error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</div>"],
+  _tmpl$1 = ["<div class=\"k2b-chat-composer-shell\">", "<section class=\"", "\"", " role=\"group\"", ">", "<div class=\"k2b-chat-composer__input\" role=\"group\"", ">", "", "<textarea class=\"", "\" rows=\"1\"", "", "></textarea></div>", "<footer class=\"k2b-chat-composer__footer\">", "</footer></section></div>"],
+  _tmpl$10 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><i", " aria-hidden=\"true\"></i><strong>", "</strong><small>", "</small></button>"],
+  _tmpl$11 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$12 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
+  _tmpl$13 = ["<img", ">"],
+  _tmpl$14 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
+  _tmpl$15 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$16 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
+  _tmpl$17 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
+  _tmpl$18 = ["<span class=\"", "\">", "</span>"],
+  _tmpl$19 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>",
+  _tmpl$20 = ["<input class=\"k2b-sr-only\" type=\"file\" tabindex=\"-1\" aria-hidden=\"true\"", "", ">"],
+  _tmpl$21 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "</div>"],
+  _tmpl$22 = ["<button type=\"button\" class=\"k2b-chat-composer__stop\"", "><i", " aria-hidden=\"true\"></i></button>"],
+  _tmpl$23 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "</div>"],
+  _tmpl$24 = ["<button type=\"button\" class=\"k2b-chat-composer__icon-action\"", "", "><i", " aria-hidden=\"true\"></i></button>"],
+  _tmpl$25 = ["<button type=\"button\" class=\"k2b-chat-composer__send\"", "><i", " aria-hidden=\"true\"></i></button>"];
+import { children, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } 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);
@@ -46,16 +60,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;
@@ -97,6 +224,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);
@@ -137,22 +276,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
       });
@@ -165,30 +308,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);
@@ -196,7 +373,7 @@ export function ChatComposer(props) {
       }
       if (event.key === "Escape") {
         event.preventDefault();
-        props.onValueChange("");
+        setDismissed(true);
         return;
       }
     }
@@ -205,73 +382,101 @@ export function ChatComposer(props) {
       void submit();
     }
   };
-  return _$ssr(_tmpl$9, `k2b-chat-composer ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-running", running() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-drag-active", dragActive() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("aria-label", _$escape(props.label ?? messages().messageComposer, true), false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$1, _$escape(_$createComponent(Show, {
     get when() {
-      return commandsOpen();
+      return commandsOpen() || hasAccessory();
     },
     get children() {
-      return _$ssr(_tmpl$2, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(messages().commands, true), false), _$escape(_$createComponent(For, {
-        get each() {
-          return commandMatches();
+      return _$ssr(_tmpl$6, _$ssrStyleProperty("visibility:", commandsOpen() ? "hidden" : _$escape(undefined, true)), _$ssrAttribute("inert", commandsOpen(), true), _$escape(accessory()), _$escape(_$createComponent(Show, {
+        get when() {
+          return commandsOpen();
         },
-        children: (command, index) => _$ssr(_tmpl$0, `${_$escape(commandListId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(selectedCommandIndex(), true), false) + _$ssrAttribute("data-active", index() === selectedCommandIndex() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(command.icon ?? "ti ti-slash", true), false), _$escape(command.name), _$escape(command.description))
+        get children() {
+          return _$ssr(_tmpl$5, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(messages().commands, true), false), _$escape(_$createComponent(For, {
+            get each() {
+              return commandMatches();
+            },
+            children: (command, index) => _$ssr(_tmpl$10, `${_$escape(commandListId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(selectedCommandIndex(), true), false) + _$ssrAttribute("aria-disabled", _$escape(command.disabled, true), false) + _$ssrAttribute("data-active", index() === selectedCommandIndex() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(command.icon ?? "ti ti-slash", true), false), _$escape(command.label ?? `/${command.name}`), _$escape(command.description))
+          })), _$escape(_$createComponent(Show, {
+            get when() {
+              return searching();
+            },
+            get children() {
+              return _$ssr(_tmpl$2, _$escape(messages().loading));
+            }
+          })), _$escape(_$createComponent(Show, {
+            get when() {
+              return searchError();
+            },
+            get children() {
+              return _$ssr(_tmpl$3, _$escape(messages().error));
+            }
+          })), _$escape(_$createComponent(Show, {
+            get when() {
+              return !searching() && !searchError() && commandMatches().length === 0;
+            },
+            get children() {
+              return _$ssr(_tmpl$4, _$escape(messages().noResults));
+            }
+          })));
+        }
       })));
     }
-  })), _$escape(_$createComponent(Show, {
+  })), `k2b-chat-composer ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-running", running() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-drag-active", dragActive() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("aria-label", _$escape(props.label ?? messages().messageComposer, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return attachments().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$3, _$ssrAttribute("aria-label", _$escape(messages().attachments, true), false), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$7, _$ssrAttribute("aria-label", _$escape(messages().attachments, true), false), _$escape(_$createComponent(For, {
         get each() {
           return attachments();
         },
-        children: attachment => _$ssr(_tmpl$10, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
+        children: attachment => _$ssr(_tmpl$12, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
           get when() {
             return attachment.href;
           },
           get fallback() {
-            return _$ssr(_tmpl$12, _$escape(_$createComponent(Show, {
+            return _$ssr(_tmpl$14, _$escape(_$createComponent(Show, {
               get when() {
                 return attachment.kind === "image" && attachment.previewUrl;
               },
               get fallback() {
-                return _$ssr(_tmpl$13, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
+                return _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
               },
               get children() {
-                return _$ssr(_tmpl$11, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+                return _$ssr(_tmpl$13, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
               }
             })), _$escape(renderAttachmentCopy(attachment)));
           },
-          children: href => _$ssr(_tmpl$14, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(messages().openInNewTab({
+          children: href => _$ssr(_tmpl$16, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(messages().openInNewTab({
             name: attachment.name
           }), true), false), _$escape(_$createComponent(Show, {
             get when() {
               return attachment.kind === "image" && attachment.previewUrl;
             },
             get fallback() {
-              return _$ssr(_tmpl$13, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
+              return _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
             },
             get children() {
-              return _$ssr(_tmpl$11, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+              return _$ssr(_tmpl$13, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
             }
           })), _$escape(renderAttachmentCopy(attachment)))
         })), _$escape(_$createComponent(Show, {
           get when() {
             return attachment.action;
           },
-          children: action => _$ssr(_tmpl$15, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
+          children: action => _$ssr(_tmpl$17, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
             get when() {
               return action().icon;
             },
-            children: icon => _$ssr(_tmpl$13, _$ssrAttribute("class", _$escape(icon(), true), false))
+            children: icon => _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(icon(), true), false))
           })), _$escape(action().label))
         })), _$escape(_$createComponent(Show, {
           get when() {
             return props.onAttachmentsChange;
           },
           get children() {
-            return _$ssr(_tmpl$1, _$ssrAttribute("aria-label", _$escape(messages().removeNamed({
+            return _$ssr(_tmpl$11, _$ssrAttribute("aria-label", _$escape(messages().removeNamed({
               name: attachment.name
             }), true), false), _$ssrAttribute("disabled", blocked(), true));
           }
@@ -283,110 +488,137 @@ export function ChatComposer(props) {
       return dragActive();
     },
     get children() {
-      return _$ssr(_tmpl$4, _$escape(messages().dropFilesToAttach));
+      return _$ssr(_tmpl$8, _$escape(messages().dropFilesToAttach));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return mentions().length > 0;
+    },
+    get children() {
+      return _$ssr(_tmpl$9, _$escape(_$createComponent(For, {
+        get each() {
+          return chatMentionSegments(props.value, mentions());
+        },
+        children: part => _$ssr(_tmpl$18, Boolean(part.mention) ? "k2b-chat-composer__mention" : "", _$escape(part.text))
+      })));
     }
-  })), _$ssrAttribute("value", _$escape(props.value, true), false), _$ssrAttribute("disabled", blocked(), true) + _$ssrAttribute("placeholder", _$escape(props.placeholder ?? (running() ? messages().addGuidance : messages().writeMessage), true), false) + _$ssrAttribute("aria-label", _$escape(props.inputLabel ?? messages().message, true), false) + _$ssrAttribute("role", commandsOpen() ? "combobox" : _$escape(undefined, true), false) + _$ssrAttribute("aria-autocomplete", commandsOpen() ? "list" : _$escape(undefined, true), false) + _$ssrAttribute("aria-controls", commandsOpen() ? _$escape(commandListId, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-expanded", commandsOpen() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-activedescendant", selectedCommand() ? `${_$escape(commandListId, true)}-${_$escape(selectedCommandIndex(), true)}` : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+  })), mentions().length > 0 ? "k2b-chat-composer__textarea--highlighted" : "", _$ssrAttribute("value", _$escape(props.value, true), false), _$ssrAttribute("disabled", blocked(), true) + _$ssrAttribute("placeholder", _$escape(props.placeholder ?? (running() ? messages().addGuidance : messages().writeMessage), true), false) + _$ssrAttribute("aria-label", _$escape(props.inputLabel ?? messages().message, true), false) + _$ssrAttribute("role", commandsOpen() ? "combobox" : _$escape(undefined, true), false) + _$ssrAttribute("aria-autocomplete", commandsOpen() ? "list" : _$escape(undefined, true), false) + _$ssrAttribute("aria-controls", commandsOpen() ? _$escape(commandListId, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-expanded", commandsOpen() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-activedescendant", selectedCommand() ? `${_$escape(commandListId, true)}-${_$escape(selectedCommandIndex(), true)}` : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return props.error;
     },
     get children() {
-      return _$ssr(_tmpl$5, _$escape(props.error));
+      return _$ssr(_tmpl$0, _$escape(props.error));
     }
-  })), _$escape(props.footerTools), _$escape(_$createComponent(Show, {
+  })), _$escape(_$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 fallback() {
+      return [_$ssr(_tmpl$21, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
+        get when() {
+          return hasAddMenu();
         },
         get children() {
-          return _$createComponent(Dropdown.Trigger, {
-            appearance: "plain",
-            "class": "k2b-chat-composer__icon-action",
+          return _$createComponent(Dropdown.Root, {
+            position: "top-right",
+            width: "12rem",
             get label() {
               return messages().addToChat;
             },
-            get title() {
-              return messages().addToChat;
+            get items() {
+              return menuItems();
+            },
+            get disabled() {
+              return blocked();
             },
             get children() {
-              return _$ssr(_tmpl$6);
+              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 _$ssr(_tmpl$19);
+                }
+              });
             }
           });
         }
-      });
-    }
-  })), _$escape(_$createComponent(Show, {
-    get when() {
-      return props.fileSelection;
-    },
-    get children() {
-      return _$ssr(_tmpl$7, _$ssrAttribute("accept", _$escape(props.fileSelection?.accept, true), false), _$ssrAttribute("multiple", props.fileSelection?.multiple ?? true, true));
-    }
-  })), _$escape(_$createComponent(Show, {
-    get when() {
-      return (props.models?.length ?? 0) > 0;
-    },
-    get children() {
-      return _$createComponent(SelectChip, {
-        get ["aria-label"]() {
-          return messages().chooseModel;
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.fileSelection;
         },
-        position: "top-right",
-        "class": "k2b-chat-composer__model",
-        menuWidth: "15rem",
-        get placeholder() {
-          return messages().model;
+        get children() {
+          return _$ssr(_tmpl$20, _$ssrAttribute("accept", _$escape(props.fileSelection?.accept, true), false), _$ssrAttribute("multiple", props.fileSelection?.multiple ?? true, true));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return (props.models?.length ?? 0) > 0;
         },
-        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 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);
+            }
+          });
+        }
+      })), _$escape(props.modelDetails)), _$ssr(_tmpl$23, _$escape(_$createComponent(For, {
+        get each() {
+          return props.contextActions;
+        },
+        children: action => _$ssr(_tmpl$24, _$ssrAttribute("data-tone", action.variant === "danger" ? "danger" : _$escape(undefined, true), false), _$ssrAttribute("disabled", action.disabled, true) + _$ssrAttribute("aria-pressed", _$escape(action.pressed, true), false) + _$ssrAttribute("aria-label", _$escape(action.label, true), false) + _$ssrAttribute("title", _$escape(action.label, true), false), _$ssrAttribute("class", _$escape(action.icon ?? "ti ti-dots", true), false))
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return hasContextUsage() ? props.contextUsage ?? {} : undefined;
+        },
+        children: usage => _$createComponent(ContextUsage, _$mergeProps(usage, {
+          get action() {
+            return props.contextPopupAction;
+          },
+          get onActionError() {
+            return props.onError;
+          }
+        }))
+      })), _$escape(props.submitTools), _$escape(_$createComponent(Show, {
+        get when() {
+          return running() && !hasDraft() && props.onStop;
         },
-        get disabled() {
-          return blocked() || running() || !props.onModelChange;
+        get fallback() {
+          return _$ssr(_tmpl$25, _$ssrAttribute("disabled", !canSubmit(), true) + _$ssrAttribute("aria-label", submitting() ? running() ? runningSubmitIntent() === "queue" ? _$escape(messages().queueing, true) : _$escape(messages().steering, true) : _$escape(messages().sending, true) : running() ? runningSubmitIntent() === "queue" ? _$escape(messages().queueMessage, true) : _$escape(messages().steerResponse, true) : _$escape(messages().sendMessage, true), false) + _$ssrAttribute("title", running() ? runningSubmitIntent() === "queue" ? _$escape(messages().queueMessage, true) : _$escape(messages().steerResponse, true) : _$escape(messages().sendMessage, true), false), _$ssrAttribute("class", submitting() ? "ti ti-loader-2 k2b-spin" : "ti ti-arrow-up", false));
         },
-        onValueChange: modelId => {
-          props.onModelChange?.(modelId);
-          queueMicrotask(focus);
+        get children() {
+          return _$ssr(_tmpl$22, _$ssrAttribute("disabled", stopping(), true) + _$ssrAttribute("aria-label", stopping() ? _$escape(messages().stopping, true) : _$escape(messages().stopResponse, true), false) + _$ssrAttribute("title", stopping() ? _$escape(messages().stopping, true) : _$escape(messages().stopResponse, true), false), _$ssrAttribute("class", stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop", false));
         }
-      });
-    }
-  })), _$escape(_$createComponent(For, {
-    get each() {
-      return props.contextActions;
+      })))];
     },
-    children: action => _$ssr(_tmpl$16, _$ssrAttribute("data-tone", action.variant === "danger" ? "danger" : _$escape(undefined, true), false), _$ssrAttribute("disabled", action.disabled, true) + _$ssrAttribute("aria-label", _$escape(action.label, true), false) + _$ssrAttribute("title", _$escape(action.label, true), false), _$ssrAttribute("class", _$escape(action.icon ?? "ti ti-dots", true), false))
-  })), _$escape(_$createComponent(Show, {
-    get when() {
-      return hasContextUsage() ? props.contextUsage : undefined;
-    },
-    children: usage => _$createComponent(ContextUsage, _$mergeProps(usage))
-  })), _$escape(_$createComponent(Show, {
-    get when() {
-      return running() && !hasDraft() && props.onStop;
-    },
-    get fallback() {
-      return _$ssr(_tmpl$17, _$ssrAttribute("disabled", !canSubmit(), true) + _$ssrAttribute("aria-label", submitting() ? running() ? runningSubmitIntent() === "queue" ? _$escape(messages().queueing, true) : _$escape(messages().steering, true) : _$escape(messages().sending, true) : running() ? runningSubmitIntent() === "queue" ? _$escape(messages().queueMessage, true) : _$escape(messages().steerResponse, true) : _$escape(messages().sendMessage, true), false) + _$ssrAttribute("title", running() ? runningSubmitIntent() === "queue" ? _$escape(messages().queueMessage, true) : _$escape(messages().steerResponse, true) : _$escape(messages().sendMessage, true), false), _$ssrAttribute("class", submitting() ? "ti ti-loader-2 k2b-spin" : "ti ti-arrow-up", false));
-    },
-    get children() {
-      return _$ssr(_tmpl$8, _$ssrAttribute("disabled", stopping(), true) + _$ssrAttribute("aria-label", stopping() ? _$escape(messages().stopping, true) : _$escape(messages().stopResponse, true), false) + _$ssrAttribute("title", stopping() ? _$escape(messages().stopping, true) : _$escape(messages().stopResponse, true), false), _$ssrAttribute("class", stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop", false));
-    }
+    children: content => content()
   })));
 }
 //# sourceMappingURL=ChatComposer.js.map