@k2b/ui 0.18.0 → 0.20.0

package/dist/browser/chat/ChatComposer.js

@@ -1,66 +1,128 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
-import { className as _$className } from "solid-js/web";
-import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
-import { setProperty as _$setProperty } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
+import { setProperty as _$setProperty } 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 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__highlight aria-hidden=true><!$><!/>\n`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-shell><!$><!/><section role=group><!$><!/><div class=k2b-chat-composer__input role=group><!$><!/><textarea rows=1></textarea></div><!$><!/><footer class=k2b-chat-composer__footer></footer><!$><!/>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><i aria-hidden=true></i><strong></strong><small>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<img>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<i class="ti ti-plus"aria-hidden=true>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<input class=k2b-sr-only type=file tabindex=-1 aria-hidden=true>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/>`);
+  _tmpl$2 = /*#__PURE__*/_$template(`<input class=k2b-sr-only type=file tabindex=-1 aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<i class="ti ti-letter-case"aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__format role=group>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<i class="ti ti-mood-smile"aria-hidden=true>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-up"aria-hidden=true>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__microphone><!$><!/><!$><!/>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__highlight aria-hidden=true><!$><!/>\n`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<textarea class=k2b-chat-composer__measure rows=1 tabindex=-1 aria-hidden=true readonly>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__input role=group><!$><!/><textarea rows=1></textarea><!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div role=status class=k2b-chat-composer__loading><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><strong>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div role=status><i class="ti ti-alert-circle"></i> <!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div role=status>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-accessory><div class=k2b-chat-composer__commands role=listbox><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-slot><div></div><!$><!/><!$><!/>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__hint aria-live=polite>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachments role=list tabindex=0>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><!$><!/>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__row><!$><!/><!$><!/><div class=k2b-chat-composer__field><!$><!/><div class=k2b-chat-composer__field-tools><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer-shell><!$><!/><section role=group><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><span class=k2b-chat-composer__emoji-glyph aria-hidden=true></span><strong></strong><!$><!/>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<small>:<!$><!/>:`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<button type=button role=option tabindex=-1><i aria-hidden=true></i><strong></strong><small>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__hint-text>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-chat-composer__dictation><i aria-hidden=true></i><span>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__hint-action>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-remove><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment role=listitem><div class=k2b-chat-composer__attachment-content><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<img>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__attachment-identity><!$><!/><!$><!/>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<a class=k2b-chat-composer__attachment-link target=_blank rel="noopener noreferrer"><!$><!/><!$><!/>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<button type=button class=k2b-chat-composer__attachment-action><!$><!/><!$><!/>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<footer class=k2b-chat-composer__footer>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__tools><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-chat-composer__submit><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`);
 import { children, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Dropdown } from "../actions/Dropdown";
 import { Tooltip } from "../feedback/Tooltip";
+import { replaceTextareaRange } from "../inputs/editor-dom";
+import { completedEmojiShortcode, emojiInTone, emojiName, emojiShortcodeQuery, loadEmojiIndex, suggestEmoji } from "../inputs/emoji/emoji-index";
 import { FileDropTarget } from "../inputs/FileDropTarget";
+import { toggleBulletList, toggleInlineMarker } from "../inputs/markdown/actions";
+import { openCodeFence } from "../inputs/markdown/code-zone";
 import { SelectChip } from "../inputs/SelectChip";
+import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { ChatContextUsage as ContextUsage } from "./ChatPrimitives";
-import { executeChatAction, nextChatCommandIndex, reportChatFailure, runChatSubmission } from "./chat-behavior";
+import { conversationEnterAction, executeChatAction, nextChatCommandIndex, reportChatFailure, runChatSubmission } from "./chat-behavior";
 import { chatCommandQuery, chatMentionSegments, reconcileChatMentions } from "./composer-document";
 const composerMaxInputHeight = 309;
+/** Emoji suggestions for a `:shortcode`, as many as fit the list without scrolling on a phone. */
+const emojiSuggestionLimit = 8;
 // Keep editor undo text within approximately 2 MiB, plus the current edit.
 const composerUndoBudgetChars = 1_000_000;
+/** The row stays short: what a chat message needs. Other Markdown, typed by hand, keeps working. */
+const formatTools = [{
+  id: "bold",
+  icon: "ti ti-bold",
+  label: m => m.boldShortcut,
+  run: textarea => toggleInlineMarker(textarea, "**"),
+  key: "b"
+}, {
+  id: "italic",
+  icon: "ti ti-italic",
+  label: m => m.italicShortcut,
+  run: textarea => toggleInlineMarker(textarea, "*"),
+  key: "i"
+}, {
+  id: "bullet-list",
+  icon: "ti ti-list",
+  label: m => m.bulletListShortcut,
+  run: toggleBulletList,
+  shiftCode: "Digit8"
+}];
+const formatShortcut = event => {
+  if (event.altKey || !(event.ctrlKey || event.metaKey)) return undefined;
+  return formatTools.find(tool => event.shiftKey ? tool.shiftCode === event.code : tool.key === event.key.toLowerCase());
+};
+const touchOnlyQuery = "(any-pointer: coarse) and (not (any-pointer: fine))";
+const isTouchOnly = () => typeof matchMedia === "function" && matchMedia(touchOnlyQuery).matches;
+/** How long a press on the microphone lasts before it asks for a voice message instead of dictation. */
+const microphoneHoldMs = 500;
+/** Keeps the field focused (and a phone's keyboard open) when a composer button is pressed with a mouse or finger. */
+const keepFieldFocus = event => event.preventDefault();
 const attachmentIcon = attachment => attachment.icon ?? (attachment.kind === "image" ? "ti ti-photo" : attachment.kind === "resource" ? "ti ti-link" : "ti ti-file");
+const hasContent = items => items.some(item => item != null && typeof item !== "boolean" && item !== "");
 export function ChatComposer(props) {
   const accessory = children(() => props.accessory);
-  const hasAccessory = () => accessory.toArray().some(item => item != null && typeof item !== "boolean" && item !== "");
+  const hasAccessory = () => hasContent(accessory.toArray());
+  const hint = children(() => props.hint);
   const messages = useUiMessages();
   const commandListId = `k2b-chat-commands-${createUniqueId().replace(/[^A-Za-z0-9_-]/g, "-")}`;
+  const formatGroupId = `${commandListId}-format`;
   const [selectedCommandIndex, setSelectedCommandIndex] = createSignal(0);
   const [addingFiles, setAddingFiles] = createSignal(false);
   const [submitting, setSubmitting] = createSignal(false);
   let composerRef;
   let textareaRef;
   let fileInputRef;
+  let measureRef;
+  let microphoneRef;
   let sawRunning = props.state === "running";
+  const conversation = () => props.variant === "conversation";
+  const [formattingOpen, setFormattingOpen] = createSignal(false);
+  const [microphoneMenuOpen, setMicrophoneMenuOpen] = createSignal(false);
+  const dictation = () => props.microphone?.dictation ?? null;
+  const showHint = () => conversation() || dictation() !== null || hasContent(hint.toArray());
   const state = () => props.state ?? "idle";
   const running = () => state() === "running";
   const stopping = () => state() === "stopping";
@@ -77,15 +139,29 @@ export function ChatComposer(props) {
   let highlightRef;
   let commandListRef;
   const mentions = () => props.mentions ?? [];
+  const locale = useLocale();
+  const [emojiIndex, setEmojiIndex] = createSignal();
+  const emojiQuery = createMemo(() => !props.emoji || dismissed() || composing() ? null : emojiShortcodeQuery(props.value, caret(), selectionEnd()));
+  // The emoji data loads with the first `:shortcode`; a failed load only means no suggestions.
+  createEffect(() => {
+    if (emojiQuery() && !emojiIndex()) loadEmojiIndex().then(setEmojiIndex, () => undefined);
+  });
+  const emojiMatches = createMemo(() => {
+    const token = emojiQuery();
+    const index = emojiIndex();
+    return token && index ? suggestEmoji(index, token.query, emojiSuggestionLimit) : [];
+  });
+  const emojiOpen = () => emojiMatches().length > 0;
   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));
+  const commandsOpen = () => Boolean(!emojiOpen() && commandQuery() && (props.commands?.length || props.searchCommands));
+  const suggestionsOpen = () => commandsOpen() || emojiOpen();
   createEffect(() => {
-    if (!commandsOpen()) return;
+    if (!suggestionsOpen()) return;
     let disposed = false;
     const measure = () => {
       if (disposed || !commandListRef) return;
@@ -182,7 +258,10 @@ export function ChatComposer(props) {
     setSelectionEnd(textareaRef?.selectionEnd ?? props.value.length);
   };
   const selectedCommand = () => commandMatches()[selectedCommandIndex()];
-  const blocked = () => Boolean(props.disabled || stopping() || state() === "submitting" || executing() || addingFiles() || submitting());
+  const busy = () => Boolean(props.disabled || stopping() || state() === "submitting" || executing() || addingFiles());
+  const blocked = () => busy() || submitting();
+  /** The conversation field stays editable while a message is sent, so it keeps the focus and a phone its keyboard. */
+  const editBlocked = () => conversation() ? busy() : blocked();
   const hasDraft = () => Boolean(props.value.trim() || !running() && attachments().length > 0);
   const canSubmit = () => !blocked() && hasDraft() && !(running() && runningSubmitIntent() === "steer" && mentions().length);
   const canSelectFiles = () => Boolean(props.fileSelection && !props.fileSelection.disabled && !running() && !blocked());
@@ -202,7 +281,7 @@ export function ChatComposer(props) {
         icon: addingFiles() ? "ti ti-loader-2 k2b-spin" : "ti ti-paperclip",
         label: props.fileSelection.label ?? messages().attachFiles,
         disabled: !canSelectFiles(),
-        action: () => fileInputRef?.click()
+        action: () => chooseFiles()
       });
     }
     for (const action of props.menuActions ?? []) {
@@ -218,6 +297,14 @@ export function ChatComposer(props) {
   };
   const autoResize = () => {
     if (!textareaRef) return;
+    if (conversation()) {
+      // A hidden copy measures the text. Collapsing the field itself would shrink the composer for a frame, and
+      // WebKit then clamps the scroll position of the conversation above it. CSS caps the height.
+      if (!measureRef) return;
+      measureRef.value = textareaRef.value;
+      textareaRef.style.height = `${measureRef.scrollHeight}px`;
+      return;
+    }
     textareaRef.style.height = "auto";
     textareaRef.style.height = `${Math.min(textareaRef.scrollHeight, composerMaxInputHeight)}px`;
   };
@@ -225,14 +312,22 @@ export function ChatComposer(props) {
   onMount(() => {
     autoResize();
     if (props.focusToken !== undefined) focus();
+    // The copy follows the field's width, so a narrower composer measures more lines.
+    if (measureRef && typeof ResizeObserver === "function") {
+      const observer = new ResizeObserver(() => autoResize());
+      observer.observe(measureRef);
+      onCleanup(() => observer.disconnect());
+    }
   });
   createEffect(() => {
     commandMatches();
+    emojiMatches();
     setSelectedCommandIndex(0);
   });
   createEffect(() => {
     const index = selectedCommandIndex();
     commandMatches();
+    emojiMatches();
     queueMicrotask(() => {
       const list = commandListRef;
       const item = list?.querySelector(`[id="${commandListId}-${index}"]`);
@@ -268,6 +363,13 @@ export function ChatComposer(props) {
     _$effect(() => _$setAttribute(_el$2, "title", attachment.name));
     return _el$;
   })();
+  const chooseFiles = () => {
+    const selection = props.fileSelection;
+    if (!selection?.choose) return fileInputRef?.click();
+    selection.choose().then(
+    // A single-file composer keeps the first chosen file, as its file dialog and drops do.
+    files => void runFiles(selection.multiple === false ? files.slice(0, 1) : files), error => (props.fileSelection?.onError ?? props.onError)?.(error));
+  };
   const runFiles = async files => {
     if (!canSelectFiles()) return;
     const selected = Array.from(files);
@@ -305,8 +407,17 @@ export function ChatComposer(props) {
         },
         perform: () => props.onSubmit(input),
         restore: () => {
-          props.onValueChange(previousValue);
-          props.onMentionsChange?.(previousMentions);
+          // Text typed while the submission ran stays, after the returned draft. Its mentions are read first, because
+          // an application may already move them when the text changes.
+          const typed = props.value;
+          const typedMentions = mentions();
+          const shift = previousValue.length + 1;
+          props.onValueChange(typed ? `${previousValue}\n${typed}` : previousValue);
+          props.onMentionsChange?.(typed ? [...previousMentions, ...typedMentions.map(mention => ({
+            ...mention,
+            start: mention.start + shift,
+            end: mention.end + shift
+          }))] : previousMentions);
           if (intent !== "steer") setAttachments(previousAttachments);
         },
         onError: props.onError
@@ -363,13 +474,74 @@ export function ChatComposer(props) {
       focus();
     });
   };
+
+  /** Replaces `start`–`end` with the emoji through the editing path, so the browser's undo restores the shortcode. */
+  const insertEmoji = (start, end, emoji) => {
+    if (!textareaRef || editBlocked()) return;
+    replaceTextareaRange(textareaRef, start, end, emoji);
+    syncCaret();
+    reportChatFailure(() => props.emoji?.onPick?.(emoji), props.onError);
+  };
+  const pickEmojiSuggestion = position => {
+    const token = emojiQuery();
+    const entry = emojiMatches()[position];
+    if (!token || !entry) return;
+    insertEmoji(token.start, token.end, emojiInTone(entry, props.emoji?.skinTone ?? 0));
+  };
+  /**
+   * A typed colon loads the emoji data, and the closing colon of a known `:shortcode:` turns it into its emoji. A
+   * shortcode closed before the data arrived turns when it arrives, as long as nothing changed in the meantime.
+   */
+  const completeShortcode = () => {
+    const textarea = textareaRef;
+    if (!props.emoji || !textarea) return;
+    const {
+      value,
+      selectionStart: caret
+    } = textarea;
+    const completed = completedEmojiShortcode(value, caret);
+    const convert = index => {
+      const entry = completed && index.byShortcode.get(completed.shortcode.toLowerCase());
+      if (completed && entry) insertEmoji(completed.start, completed.end, emojiInTone(entry, props.emoji?.skinTone ?? 0));
+    };
+    const index = emojiIndex();
+    if (index) {
+      convert(index);
+      return;
+    }
+    loadEmojiIndex().then(loaded => {
+      setEmojiIndex(loaded);
+      const untouched = textarea.value === value && textarea.selectionStart === caret && textarea.selectionEnd === caret;
+      if (untouched && textarea.matches(":focus")) convert(loaded);
+    }, () => undefined);
+  };
   const onKeyDown = event => {
-    if (event.isComposing || composing()) return;
+    // WebKit ends the composition before the keydown of the Enter that confirms it; that keydown keeps keyCode 229.
+    if (event.isComposing || event.keyCode === 229 || composing()) return;
     if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
       event.preventDefault();
       restoreHistory(event.shiftKey ? 1 : -1);
       return;
     }
+    if (emojiOpen()) {
+      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+        event.preventDefault();
+        setSelectedCommandIndex(index => nextChatCommandIndex(index, emojiMatches().length, event.key === "ArrowUp" ? -1 : 1));
+        return;
+      }
+      // Only a plain Enter or Tab picks: Shift+Enter still breaks the line, Shift+Tab still moves the focus back.
+      const plain = !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey;
+      if (plain && (event.key === "Enter" || event.key === "Tab")) {
+        event.preventDefault();
+        pickEmojiSuggestion(selectedCommandIndex());
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setDismissed(true);
+        return;
+      }
+    }
     const matches = commandMatches();
     if (commandsOpen()) {
       if (event.key === "ArrowUp" || event.key === "ArrowDown") {
@@ -377,7 +549,8 @@ export function ChatComposer(props) {
         setSelectedCommandIndex(index => nextChatCommandIndex(index, matches.length, event.key === "ArrowUp" ? -1 : 1));
         return;
       }
-      if ((event.key === "Enter" || event.key === "Tab") && matches.length > 0) {
+      // Ctrl/⌘+Enter sends, also while suggestions are open.
+      if ((event.key === "Tab" || event.key === "Enter" && !event.ctrlKey && !event.metaKey) && matches.length > 0) {
         event.preventDefault();
         const command = selectedCommand();
         if (command) void executeCommand(command);
@@ -389,79 +562,700 @@ export function ChatComposer(props) {
         return;
       }
     }
-    if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+    const format = props.formatting && textareaRef ? formatShortcut(event) : undefined;
+    if (format && textareaRef) {
+      event.preventDefault();
+      format.run(textareaRef);
+      return;
+    }
+    if (event.key !== "Enter") return;
+    if (conversation()) {
+      const action = conversationEnterAction(event, {
+        sendKey: props.sendKey ?? "enter",
+        touchOnly: isTouchOnly(),
+        inCodeBlock: openCodeFence(props.value, textareaRef?.selectionStart ?? props.value.length) !== null
+      });
+      if (action === "send") {
+        event.preventDefault();
+        void submit();
+      }
+      return;
+    }
+    const send = props.sendKey === "mod-enter" ? event.ctrlKey || event.metaKey : !event.shiftKey;
+    if (send && !event.isComposing) {
       event.preventDefault();
       void submit();
     }
   };
+  const insertText = text => {
+    if (!textareaRef || editBlocked()) return;
+    replaceTextareaRange(textareaRef, textareaRef.selectionStart, textareaRef.selectionEnd, text);
+  };
+  let holdTimer;
+  let held = false;
+  const releaseHold = () => {
+    clearTimeout(holdTimer);
+    holdTimer = undefined;
+  };
+  onCleanup(releaseHold);
+  const microphoneDisabled = () => Boolean(props.microphone?.disabled || blocked() || dictation() === "refining");
+  const microphoneItems = () => {
+    const microphone = props.microphone;
+    const items = [];
+    if (microphone?.onDictate) {
+      const dictate = microphone.onDictate;
+      items.push({
+        icon: "ti ti-microphone",
+        label: messages().dictate,
+        action: () => reportChatFailure(dictate, props.onError)
+      });
+    }
+    if (microphone?.onVoiceMessage) {
+      const record = microphone.onVoiceMessage;
+      items.push({
+        icon: "ti ti-player-record",
+        label: messages().recordVoiceMessage,
+        action: () => reportChatFailure(record, props.onError)
+      });
+    }
+    return items;
+  };
+  const dictationStatus = () => {
+    switch (dictation()) {
+      case "listening":
+        return {
+          icon: "ti ti-microphone",
+          text: messages().dictationListening
+        };
+      case "refining":
+        return {
+          icon: "ti ti-loader-2 k2b-spin",
+          text: messages().dictationRefining
+        };
+      case "refined":
+        return {
+          icon: "ti ti-sparkles",
+          text: messages().dictationRefined
+        };
+      case "unrefined":
+        return {
+          icon: "ti ti-microphone",
+          text: messages().dictationUnrefined
+        };
+      case "interrupted":
+        return {
+          icon: "ti ti-alert-triangle",
+          text: messages().dictationInterrupted
+        };
+      default:
+        return null;
+    }
+  };
+  const fileInput = () => _$createComponent(Show, {
+    get when() {
+      return props.fileSelection;
+    },
+    get children() {
+      var _el$3 = _$getNextElement(_tmpl$2);
+      _el$3.addEventListener("change", event => {
+        if (event.currentTarget.files?.length) void runFiles(event.currentTarget.files);
+      });
+      var _ref$ = fileInputRef;
+      typeof _ref$ === "function" ? _$use(_ref$, _el$3) : fileInputRef = _el$3;
+      _$effect(_p$ => {
+        var _v$ = props.fileSelection?.accept,
+          _v$2 = props.fileSelection?.multiple ?? true;
+        _v$ !== _p$.e && _$setAttribute(_el$3, "accept", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setProperty(_el$3, "multiple", _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$3;
+    }
+  });
+  const addMenu = (icon, extraClass = "") => _$createComponent(Dropdown.Root, {
+    position: "top-right",
+    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${extraClass}`,
+        get label() {
+          return messages().addToChat;
+        },
+        get tooltip() {
+          return messages().addToChat;
+        },
+        get children() {
+          var _el$4 = _$getNextElement(_tmpl$3);
+          _$className(_el$4, icon);
+          return _el$4;
+        }
+      });
+    }
+  });
+
+  /** The conversation's attach button opens the file choice directly; other actions turn it into the add menu. */
+  const attachControl = () => _$createComponent(Show, {
+    get when() {
+      return props.menuActions?.length;
+    },
+    get fallback() {
+      return _$createComponent(Show, {
+        get when() {
+          return props.fileSelection;
+        },
+        children: selection => _$createComponent(Tooltip.Trigger, {
+          type: "button",
+          "class": "k2b-chat-composer__icon-action k2b-chat-composer__attach",
+          get ["aria-label"]() {
+            return selection().label ?? messages().attachFiles;
+          },
+          get content() {
+            return selection().label ?? messages().attachFiles;
+          },
+          get disabled() {
+            return !canSelectFiles();
+          },
+          onClick: chooseFiles,
+          get children() {
+            var _el$5 = _$getNextElement(_tmpl$3);
+            _$effect(() => _$className(_el$5, addingFiles() ? "ti ti-loader-2 k2b-spin" : "ti ti-plus"));
+            return _el$5;
+          }
+        })
+      });
+    },
+    get children() {
+      return addMenu("ti ti-plus", " k2b-chat-composer__attach");
+    }
+  });
+  const formatToggle = () => _$createComponent(Show, {
+    get when() {
+      return props.formatting;
+    },
+    get children() {
+      return _$createComponent(Tooltip.Trigger, {
+        type: "button",
+        "class": "k2b-chat-composer__icon-action k2b-chat-composer__format-toggle",
+        get ["aria-label"]() {
+          return messages().composerFormatting;
+        },
+        get ["aria-pressed"]() {
+          return formattingOpen();
+        },
+        get ["aria-controls"]() {
+          return formattingOpen() ? formatGroupId : undefined;
+        },
+        get content() {
+          return messages().composerFormatting;
+        },
+        onMouseDown: keepFieldFocus,
+        onClick: () => setFormattingOpen(open => !open),
+        get children() {
+          return _$getNextElement(_tmpl$4);
+        }
+      });
+    }
+  });
+
+  /** One row of fixed height. It shows every button at once, also on a phone, so nothing hides behind a scroll. */
+  const formatRow = () => _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!props.formatting)() && formattingOpen();
+    },
+    get children() {
+      var _el$7 = _$getNextElement(_tmpl$5);
+      _$setAttribute(_el$7, "id", formatGroupId);
+      _$insert(_el$7, _$createComponent(For, {
+        each: formatTools,
+        children: tool => _$createComponent(Tooltip.Trigger, {
+          type: "button",
+          "class": "k2b-chat-composer__icon-action",
+          get ["aria-label"]() {
+            return tool.label(messages());
+          },
+          get content() {
+            return tool.label(messages());
+          },
+          get disabled() {
+            return editBlocked();
+          },
+          onMouseDown: keepFieldFocus,
+          onClick: () => {
+            if (textareaRef) tool.run(textareaRef);
+          },
+          get children() {
+            var _el$8 = _$getNextElement(_tmpl$3);
+            _$effect(() => _$className(_el$8, tool.icon));
+            return _el$8;
+          }
+        })
+      }));
+      _$effect(() => _$setAttribute(_el$7, "aria-label", messages().composerFormatting));
+      return _el$7;
+    }
+  });
+  const emojiButton = () => _$createComponent(Show, {
+    get when() {
+      return props.emoji;
+    },
+    children: emoji => _$createComponent(Tooltip.Trigger, {
+      type: "button",
+      "class": "k2b-chat-composer__icon-action k2b-chat-composer__emoji",
+      get ["aria-label"]() {
+        return messages().insertEmoji;
+      },
+      get content() {
+        return messages().insertEmoji;
+      },
+      get disabled() {
+        return editBlocked();
+      },
+      onMouseDown: keepFieldFocus,
+      onClick: event => {
+        const anchor = event.currentTarget;
+        reportChatFailure(() => emoji().onOpen({
+          anchor,
+          insert: insertText
+        }), props.onError);
+      },
+      get children() {
+        return _$getNextElement(_tmpl$6);
+      }
+    })
+  });
+  const microphoneControl = () => _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!(props.microphone?.onDictate || props.microphone?.onVoiceMessage))() ? props.microphone : undefined;
+    },
+    children: microphone => (() => {
+      var _el$0 = _$getNextElement(_tmpl$8),
+        _el$11 = _el$0.firstChild,
+        [_el$12, _co$] = _$getNextMarker(_el$11.nextSibling),
+        _el$13 = _el$12.nextSibling,
+        [_el$14, _co$2] = _$getNextMarker(_el$13.nextSibling);
+      var _ref$2 = microphoneRef;
+      typeof _ref$2 === "function" ? _$use(_ref$2, _el$0) : microphoneRef = _el$0;
+      _$insert(_el$0, _$createComponent(Tooltip.Trigger, {
+        type: "button",
+        "class": "k2b-chat-composer__icon-action k2b-chat-composer__microphone-button",
+        get ["data-state"]() {
+          return dictation() ?? undefined;
+        },
+        get disabled() {
+          return microphoneDisabled();
+        },
+        get ["aria-pressed"]() {
+          return _$memo(() => !!microphone().onDictate)() ? dictation() === "listening" : undefined;
+        },
+        get ["aria-haspopup"]() {
+          return microphone().onDictate ? undefined : "menu";
+        },
+        get ["aria-expanded"]() {
+          return _$memo(() => !!microphone().onDictate)() ? undefined : microphoneMenuOpen();
+        },
+        get ["aria-label"]() {
+          return _$memo(() => !!microphone().onDictate)() ? messages().dictate : messages().recordVoiceMessage;
+        },
+        get content() {
+          return _$memo(() => dictation() === "listening")() ? messages().stopDictation : _$memo(() => !!microphone().onDictate)() ? _$memo(() => !!microphone().onVoiceMessage)() ? messages().dictateOrHold : messages().dictate : messages().recordVoiceMessage;
+        },
+        onMouseDown: keepFieldFocus,
+        onContextMenu: event => event.preventDefault(),
+        onPointerDown: event => {
+          held = false;
+          releaseHold();
+          const record = microphone().onVoiceMessage;
+          if (event.button !== 0 || !record || dictation() === "listening") return;
+          holdTimer = setTimeout(() => {
+            // The composer may have become blocked, or recording withdrawn, during the press.
+            const current = props.microphone?.onVoiceMessage;
+            if (!current || microphoneDisabled()) return;
+            held = true;
+            reportChatFailure(current, props.onError);
+          }, microphoneHoldMs);
+        },
+        onPointerUp: releaseHold,
+        onPointerCancel: releaseHold,
+        onPointerLeave: releaseHold,
+        onClick: event => {
+          // A press that already asked for a voice message ends here; a key press never holds.
+          if (held) {
+            held = false;
+            if (event.detail > 0) return;
+          }
+          const dictate = microphone().onDictate;
+          if (dictate) {
+            reportChatFailure(dictate, props.onError);
+            return;
+          }
+          setMicrophoneMenuOpen(true);
+          // From the keyboard it opens the menu like a menu button: the focus moves to the first item.
+          if (event.detail === 0) {
+            queueMicrotask(() => microphoneRef?.querySelector('[role="menuitem"]:not(:disabled)')?.focus());
+          }
+        },
+        get children() {
+          var _el$1 = _$getNextElement(_tmpl$3);
+          _$effect(() => _$className(_el$1, dictation() === "listening" ? "ti ti-player-stop" : dictation() === "refining" ? "ti ti-loader-2 k2b-spin" : "ti ti-microphone"));
+          return _el$1;
+        }
+      }), _el$12, _co$);
+      _$insert(_el$0, _$createComponent(Show, {
+        get when() {
+          return microphone().onVoiceMessage;
+        },
+        get children() {
+          return _$createComponent(Dropdown.Root, {
+            position: "top-left",
+            get label() {
+              return messages().microphoneOptions;
+            },
+            get items() {
+              return microphoneItems();
+            },
+            get disabled() {
+              return microphoneDisabled();
+            },
+            get open() {
+              return microphoneMenuOpen();
+            },
+            onOpenChange: setMicrophoneMenuOpen,
+            get children() {
+              return _$createComponent(Dropdown.Trigger, {
+                appearance: "plain",
+                "class": "k2b-chat-composer__icon-action k2b-chat-composer__microphone-menu",
+                get label() {
+                  return messages().microphoneOptions;
+                },
+                get tooltip() {
+                  return messages().microphoneOptions;
+                },
+                get children() {
+                  return _$getNextElement(_tmpl$7);
+                }
+              });
+            }
+          });
+        }
+      }), _el$14, _co$2);
+      return _el$0;
+    })()
+  });
+  const sendControl = () => _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!(running() && !hasDraft()))() && props.onStop;
+    },
+    get fallback() {
+      return _$createComponent(Tooltip.Trigger, {
+        type: "button",
+        "class": "k2b-chat-composer__send",
+        get disabled() {
+          return !canSubmit();
+        },
+        onMouseDown: event => {
+          if (conversation()) keepFieldFocus(event);
+        },
+        get ["aria-label"]() {
+          return _$memo(() => !!submitting())() ? _$memo(() => !!running())() ? _$memo(() => runningSubmitIntent() === "queue")() ? messages().queueing : messages().steering : messages().sending : _$memo(() => !!running())() ? _$memo(() => runningSubmitIntent() === "queue")() ? messages().queueMessage : messages().steerResponse : messages().sendMessage;
+        },
+        get content() {
+          return _$memo(() => !!running())() ? _$memo(() => runningSubmitIntent() === "queue")() ? messages().queueMessage : messages().steerResponse : messages().sendMessage;
+        },
+        onClick: () => void submit(),
+        get children() {
+          var _el$16 = _$getNextElement(_tmpl$3);
+          _$effect(() => _$className(_el$16, submitting() ? "ti ti-loader-2 k2b-spin" : conversation() ? "ti ti-send" : "ti ti-arrow-up"));
+          return _el$16;
+        }
+      });
+    },
+    get children() {
+      return _$createComponent(Tooltip.Trigger, {
+        type: "button",
+        "class": "k2b-chat-composer__stop",
+        get disabled() {
+          return stopping();
+        },
+        get ["aria-label"]() {
+          return _$memo(() => !!stopping())() ? messages().stopping : messages().stopResponse;
+        },
+        get content() {
+          return messages().stopResponse;
+        },
+        onClick: () => reportChatFailure(() => props.onStop?.(), props.onError),
+        get children() {
+          var _el$15 = _$getNextElement(_tmpl$3);
+          _$effect(() => _$className(_el$15, stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop"));
+          return _el$15;
+        }
+      });
+    }
+  });
+  const field = () => (() => {
+    var _el$17 = _$getNextElement(_tmpl$1),
+      _el$24 = _el$17.firstChild,
+      [_el$25, _co$4] = _$getNextMarker(_el$24.nextSibling),
+      _el$22 = _el$25.nextSibling,
+      _el$26 = _el$22.nextSibling,
+      [_el$27, _co$5] = _$getNextMarker(_el$26.nextSibling);
+    _$insert(_el$17, _$createComponent(Show, {
+      get when() {
+        return mentions().length > 0;
+      },
+      get children() {
+        var _el$18 = _$getNextElement(_tmpl$9),
+          _el$20 = _el$18.firstChild,
+          [_el$21, _co$3] = _$getNextMarker(_el$20.nextSibling),
+          _el$19 = _el$21.nextSibling;
+        var _ref$3 = highlightRef;
+        typeof _ref$3 === "function" ? _$use(_ref$3, _el$18) : highlightRef = _el$18;
+        _$insert(_el$18, _$createComponent(For, {
+          get each() {
+            return chatMentionSegments(props.value, mentions());
+          },
+          children: part => (() => {
+            var _el$28 = _$getNextElement(_tmpl$10);
+            _$insert(_el$28, () => part.text);
+            _$effect(() => _el$28.classList.toggle("k2b-chat-composer__mention", !!Boolean(part.mention)));
+            return _el$28;
+          })()
+        }), _el$21, _co$3);
+        return _el$18;
+      }
+    }), _el$25, _co$4);
+    _el$22.$$keydown = onKeyDown;
+    _el$22.$$beforeinput = event => {
+      if (event.inputType === "historyUndo" || event.inputType === "historyRedo") {
+        event.preventDefault();
+        restoreHistory(event.inputType === "historyUndo" ? -1 : 1);
+      }
+    };
+    _el$22.addEventListener("scroll", () => {
+      if (highlightRef && textareaRef) highlightRef.scrollTop = textareaRef.scrollTop;
+    });
+    _el$22.addEventListener("compositionend", () => {
+      setComposing(false);
+      syncCaret();
+    });
+    _el$22.addEventListener("compositionstart", () => setComposing(true));
+    _el$22.$$keyup = syncCaret;
+    _el$22.$$click = () => {
+      setDismissed(false);
+      syncCaret();
+    };
+    _el$22.addEventListener("blur", () => setDismissed(true));
+    _el$22.addEventListener("select", syncCaret);
+    _el$22.addEventListener("paste", event => {
+      const clipboardData = event.clipboardData;
+      if (canSelectFiles() && clipboardData?.files.length) {
+        event.preventDefault();
+        void runFiles(clipboardData.files);
+        return;
+      }
+      props.onPaste?.(event);
+    });
+    _el$22.$$input = event => {
+      edit(event.currentTarget.value);
+      syncCaret();
+      autoResize();
+      const input = event;
+      if (input.inputType === "insertText" && input.data === ":") queueMicrotask(completeShortcode);
+    };
+    var _ref$4 = textareaRef;
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$22) : textareaRef = _el$22;
+    _$insert(_el$17, _$createComponent(Show, {
+      get when() {
+        return conversation();
+      },
+      get children() {
+        var _el$23 = _$getNextElement(_tmpl$0);
+        var _ref$5 = measureRef;
+        typeof _ref$5 === "function" ? _$use(_ref$5, _el$23) : measureRef = _el$23;
+        return _el$23;
+      }
+    }), _el$27, _co$5);
+    _$effect(_p$ => {
+      var _v$3 = messages().messageInput,
+        _v$4 = !!(mentions().length > 0),
+        _v$5 = editBlocked(),
+        _v$6 = conversation() ? "enter" : undefined,
+        _v$7 = props.placeholder ?? (running() ? messages().addGuidance : conversation() ? messages().writeConversationMessage : messages().writeMessage),
+        _v$8 = props.inputLabel ?? messages().message,
+        _v$9 = suggestionsOpen() ? "combobox" : undefined,
+        _v$0 = suggestionsOpen() ? "list" : undefined,
+        _v$1 = suggestionsOpen() ? commandListId : undefined,
+        _v$10 = suggestionsOpen() ? "true" : undefined,
+        _v$11 = (emojiOpen() ? emojiMatches()[selectedCommandIndex()] : selectedCommand()) ? `${commandListId}-${selectedCommandIndex()}` : undefined;
+      _v$3 !== _p$.e && _$setAttribute(_el$17, "aria-label", _p$.e = _v$3);
+      _v$4 !== _p$.t && _el$22.classList.toggle("k2b-chat-composer__textarea--highlighted", _p$.t = _v$4);
+      _v$5 !== _p$.a && _$setProperty(_el$22, "disabled", _p$.a = _v$5);
+      _v$6 !== _p$.o && _$setAttribute(_el$22, "enterkeyhint", _p$.o = _v$6);
+      _v$7 !== _p$.i && _$setAttribute(_el$22, "placeholder", _p$.i = _v$7);
+      _v$8 !== _p$.n && _$setAttribute(_el$22, "aria-label", _p$.n = _v$8);
+      _v$9 !== _p$.s && _$setAttribute(_el$22, "role", _p$.s = _v$9);
+      _v$0 !== _p$.h && _$setAttribute(_el$22, "aria-autocomplete", _p$.h = _v$0);
+      _v$1 !== _p$.r && _$setAttribute(_el$22, "aria-controls", _p$.r = _v$1);
+      _v$10 !== _p$.d && _$setAttribute(_el$22, "aria-expanded", _p$.d = _v$10);
+      _v$11 !== _p$.l && _$setAttribute(_el$22, "aria-activedescendant", _p$.l = _v$11);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined
+    });
+    _$effect(() => _$setProperty(_el$22, "value", props.value));
+    _$runHydrationEvents();
+    return _el$17;
+  })();
   return (() => {
-    var _el$3 = _$getNextElement(_tmpl$0),
-      _el$46 = _el$3.firstChild,
-      [_el$47, _co$11] = _$getNextMarker(_el$46.nextSibling),
-      _el$25 = _el$47.nextSibling,
-      _el$40 = _el$25.firstChild,
-      [_el$41, _co$0] = _$getNextMarker(_el$40.nextSibling),
-      _el$27 = _el$41.nextSibling,
-      _el$33 = _el$27.firstChild,
-      [_el$34, _co$8] = _$getNextMarker(_el$33.nextSibling),
-      _el$32 = _el$34.nextSibling,
-      _el$42 = _el$27.nextSibling,
-      [_el$43, _co$1] = _$getNextMarker(_el$42.nextSibling),
-      _el$39 = _el$43.nextSibling,
-      _el$44 = _el$39.nextSibling,
-      [_el$45, _co$10] = _$getNextMarker(_el$44.nextSibling);
-    _$insert(_el$3, _$createComponent(Show, {
+    var _el$29 = _$getNextElement(_tmpl$21),
+      _el$89 = _el$29.firstChild,
+      [_el$90, _co$23] = _$getNextMarker(_el$89.nextSibling),
+      _el$57 = _el$90.nextSibling,
+      _el$81 = _el$57.firstChild,
+      [_el$82, _co$19] = _$getNextMarker(_el$81.nextSibling),
+      _el$83 = _el$82.nextSibling,
+      [_el$84, _co$20] = _$getNextMarker(_el$83.nextSibling),
+      _el$85 = _el$84.nextSibling,
+      [_el$86, _co$21] = _$getNextMarker(_el$85.nextSibling),
+      _el$87 = _el$86.nextSibling,
+      [_el$88, _co$22] = _$getNextMarker(_el$87.nextSibling);
+    _$insert(_el$29, _$createComponent(Show, {
       get when() {
-        return commandsOpen() || hasAccessory();
+        return suggestionsOpen() || hasAccessory();
       },
       get children() {
-        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, {
+        var _el$30 = _$getNextElement(_tmpl$16),
+          _el$31 = _el$30.firstChild,
+          _el$53 = _el$31.nextSibling,
+          [_el$54, _co$1] = _$getNextMarker(_el$53.nextSibling),
+          _el$55 = _el$54.nextSibling,
+          [_el$56, _co$10] = _$getNextMarker(_el$55.nextSibling);
+        _$insert(_el$31, accessory);
+        _$insert(_el$30, _$createComponent(Show, {
+          get when() {
+            return emojiOpen();
+          },
+          get children() {
+            var _el$32 = _$getNextElement(_tmpl$11),
+              _el$33 = _el$32.firstChild;
+            var _ref$6 = commandListRef;
+            typeof _ref$6 === "function" ? _$use(_ref$6, _el$33) : commandListRef = _el$33;
+            _$setAttribute(_el$33, "id", commandListId);
+            _$insert(_el$33, _$createComponent(For, {
+              get each() {
+                return emojiMatches();
+              },
+              children: (entry, index) => (() => {
+                var _el$91 = _$getNextElement(_tmpl$22),
+                  _el$92 = _el$91.firstChild,
+                  _el$93 = _el$92.nextSibling,
+                  _el$94 = _el$93.nextSibling,
+                  [_el$95, _co$24] = _$getNextMarker(_el$94.nextSibling);
+                _el$91.$$click = () => pickEmojiSuggestion(index());
+                _el$91.$$pointerdown = event => event.preventDefault();
+                _$insert(_el$92, () => emojiInTone(entry, props.emoji?.skinTone ?? 0));
+                _$insert(_el$93, () => emojiName(entry, locale()));
+                _$insert(_el$91, _$createComponent(Show, {
+                  get when() {
+                    return entry.shortcodes[0];
+                  },
+                  children: code => (() => {
+                    var _el$96 = _$getNextElement(_tmpl$23),
+                      _el$97 = _el$96.firstChild,
+                      _el$99 = _el$97.nextSibling,
+                      [_el$100, _co$25] = _$getNextMarker(_el$99.nextSibling),
+                      _el$98 = _el$100.nextSibling;
+                    _$insert(_el$96, code, _el$100, _co$25);
+                    return _el$96;
+                  })()
+                }), _el$95, _co$24);
+                _$effect(_p$ => {
+                  var _v$19 = `${commandListId}-${index()}`,
+                    _v$20 = index() === selectedCommandIndex(),
+                    _v$21 = emojiName(entry, locale()),
+                    _v$22 = index() === selectedCommandIndex() ? "true" : undefined;
+                  _v$19 !== _p$.e && _$setAttribute(_el$91, "id", _p$.e = _v$19);
+                  _v$20 !== _p$.t && _$setAttribute(_el$91, "aria-selected", _p$.t = _v$20);
+                  _v$21 !== _p$.a && _$setAttribute(_el$91, "aria-label", _p$.a = _v$21);
+                  _v$22 !== _p$.o && _$setAttribute(_el$91, "data-active", _p$.o = _v$22);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined
+                });
+                _$runHydrationEvents();
+                return _el$91;
+              })()
+            }));
+            _$effect(() => _$setAttribute(_el$33, "aria-label", messages().emojiSuggestions));
+            return _el$32;
+          }
+        }), _el$54, _co$1);
+        _$insert(_el$30, _$createComponent(Show, {
           get when() {
             return commandsOpen();
           },
           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, {
+            var _el$34 = _$getNextElement(_tmpl$15),
+              _el$35 = _el$34.firstChild,
+              _el$45 = _el$35.firstChild,
+              [_el$46, _co$7] = _$getNextMarker(_el$45.nextSibling),
+              _el$47 = _el$46.nextSibling,
+              [_el$48, _co$8] = _$getNextMarker(_el$47.nextSibling),
+              _el$49 = _el$48.nextSibling,
+              [_el$50, _co$9] = _$getNextMarker(_el$49.nextSibling),
+              _el$51 = _el$50.nextSibling,
+              [_el$52, _co$0] = _$getNextMarker(_el$51.nextSibling);
+            var _ref$7 = commandListRef;
+            typeof _ref$7 === "function" ? _$use(_ref$7, _el$35) : commandListRef = _el$35;
+            _$setAttribute(_el$35, "id", commandListId);
+            _$insert(_el$35, _$createComponent(For, {
               get each() {
                 return commandMatches();
               },
               children: (command, index) => (() => {
-                var _el$48 = _$getNextElement(_tmpl$1),
-                  _el$49 = _el$48.firstChild,
-                  _el$50 = _el$49.nextSibling,
-                  _el$51 = _el$50.nextSibling;
-                _el$48.$$click = () => void executeCommand(command);
-                _el$48.$$pointerdown = event => event.preventDefault();
-                _$insert(_el$50, () => command.label ?? `/${command.name}`);
-                _$insert(_el$51, () => command.description);
+                var _el$101 = _$getNextElement(_tmpl$24),
+                  _el$102 = _el$101.firstChild,
+                  _el$103 = _el$102.nextSibling,
+                  _el$104 = _el$103.nextSibling;
+                _el$101.$$click = () => void executeCommand(command);
+                _el$101.$$pointerdown = event => event.preventDefault();
+                _$insert(_el$103, () => command.label ?? `/${command.name}`);
+                _$insert(_el$104, () => command.description);
                 _$effect(_p$ => {
-                  var _v$14 = `${commandListId}-${index()}`,
-                    _v$15 = index() === selectedCommandIndex(),
-                    _v$16 = command.disabled,
-                    _v$17 = index() === selectedCommandIndex() ? "true" : undefined,
-                    _v$18 = command.icon ?? "ti ti-slash";
-                  _v$14 !== _p$.e && _$setAttribute(_el$48, "id", _p$.e = _v$14);
-                  _v$15 !== _p$.t && _$setAttribute(_el$48, "aria-selected", _p$.t = _v$15);
-                  _v$16 !== _p$.a && _$setAttribute(_el$48, "aria-disabled", _p$.a = _v$16);
-                  _v$17 !== _p$.o && _$setAttribute(_el$48, "data-active", _p$.o = _v$17);
-                  _v$18 !== _p$.i && _$className(_el$49, _p$.i = _v$18);
+                  var _v$23 = `${commandListId}-${index()}`,
+                    _v$24 = index() === selectedCommandIndex(),
+                    _v$25 = command.disabled,
+                    _v$26 = index() === selectedCommandIndex() ? "true" : undefined,
+                    _v$27 = command.icon ?? "ti ti-slash";
+                  _v$23 !== _p$.e && _$setAttribute(_el$101, "id", _p$.e = _v$23);
+                  _v$24 !== _p$.t && _$setAttribute(_el$101, "aria-selected", _p$.t = _v$24);
+                  _v$25 !== _p$.a && _$setAttribute(_el$101, "aria-disabled", _p$.a = _v$25);
+                  _v$26 !== _p$.o && _$setAttribute(_el$101, "data-active", _p$.o = _v$26);
+                  _v$27 !== _p$.i && _$className(_el$102, _p$.i = _v$27);
                   return _p$;
                 }, {
                   e: undefined,
@@ -471,526 +1265,482 @@ export function ChatComposer(props) {
                   i: undefined
                 });
                 _$runHydrationEvents();
-                return _el$48;
+                return _el$101;
               })()
-            }), _el$16, _co$2);
-            _$insert(_el$7, _$createComponent(Show, {
+            }), _el$46, _co$7);
+            _$insert(_el$35, _$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;
+                var _el$36 = _$getNextElement(_tmpl$12),
+                  _el$37 = _el$36.firstChild,
+                  _el$38 = _el$37.nextSibling;
+                _$insert(_el$38, () => messages().loading);
+                return _el$36;
               }
-            }), _el$18, _co$3);
-            _$insert(_el$7, _$createComponent(Show, {
+            }), _el$48, _co$8);
+            _$insert(_el$35, _$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;
+                var _el$39 = _$getNextElement(_tmpl$13),
+                  _el$40 = _el$39.firstChild,
+                  _el$41 = _el$40.nextSibling,
+                  _el$42 = _el$41.nextSibling,
+                  [_el$43, _co$6] = _$getNextMarker(_el$42.nextSibling);
+                _$insert(_el$39, () => messages().error, _el$43, _co$6);
+                return _el$39;
               }
-            }), _el$20, _co$4);
-            _$insert(_el$7, _$createComponent(Show, {
+            }), _el$50, _co$9);
+            _$insert(_el$35, _$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;
+                var _el$44 = _$getNextElement(_tmpl$14);
+                _$insert(_el$44, () => messages().noResults);
+                return _el$44;
               }
-            }), _el$22, _co$5);
-            _$effect(() => _$setAttribute(_el$7, "aria-label", messages().commands));
-            return _el$6;
+            }), _el$52, _co$0);
+            _$effect(() => _$setAttribute(_el$35, "aria-label", messages().commands));
+            return _el$34;
           }
-        }), _el$24, _co$6);
+        }), _el$56, _co$10);
         _$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);
+          var _v$12 = hasAccessory() ? undefined : "true",
+            _v$13 = suggestionsOpen() ? "hidden" : undefined,
+            _v$14 = suggestionsOpen();
+          _v$12 !== _p$.e && _$setAttribute(_el$30, "data-overlay", _p$.e = _v$12);
+          _v$13 !== _p$.t && _$setStyleProperty(_el$31, "visibility", _p$.t = _v$13);
+          _v$14 !== _p$.a && _$setProperty(_el$31, "inert", _p$.a = _v$14);
           return _p$;
         }, {
           e: undefined,
-          t: undefined
+          t: undefined,
+          a: undefined
         });
-        return _el$4;
+        return _el$30;
+      }
+    }), _el$90, _co$23);
+    var _ref$8 = composerRef;
+    typeof _ref$8 === "function" ? _$use(_ref$8, _el$57) : composerRef = _el$57;
+    _$insert(_el$57, _$createComponent(Show, {
+      get when() {
+        return showHint();
+      },
+      get children() {
+        var _el$58 = _$getNextElement(_tmpl$17);
+        _$insert(_el$58, _$createComponent(Show, {
+          get when() {
+            return dictationStatus();
+          },
+          get fallback() {
+            return (() => {
+              var _el$105 = _$getNextElement(_tmpl$25);
+              _$insert(_el$105, hint);
+              return _el$105;
+            })();
+          },
+          children: status => [(() => {
+            var _el$106 = _$getNextElement(_tmpl$26),
+              _el$107 = _el$106.firstChild,
+              _el$108 = _el$107.nextSibling;
+            _$insert(_el$108, () => status().text);
+            _$effect(_p$ => {
+              var _v$28 = dictation() ?? undefined,
+                _v$29 = status().icon;
+              _v$28 !== _p$.e && _$setAttribute(_el$106, "data-state", _p$.e = _v$28);
+              _v$29 !== _p$.t && _$className(_el$107, _p$.t = _v$29);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$106;
+          })(), _$createComponent(Show, {
+            get when() {
+              return _$memo(() => dictation() === "refined")() ? props.microphone?.onRestoreOriginal : undefined;
+            },
+            children: restore => (() => {
+              var _el$109 = _$getNextElement(_tmpl$27);
+              _el$109.$$click = () => reportChatFailure(restore(), props.onError);
+              _el$109.$$mousedown = keepFieldFocus;
+              _$insert(_el$109, () => messages().restoreOriginal);
+              _$effect(() => _$setProperty(_el$109, "disabled", microphoneDisabled()));
+              _$runHydrationEvents();
+              return _el$109;
+            })()
+          })]
+        }));
+        return _el$58;
       }
-    }), _el$47, _co$11);
-    var _ref$2 = composerRef;
-    typeof _ref$2 === "function" ? _$use(_ref$2, _el$25) : composerRef = _el$25;
-    _$insert(_el$25, _$createComponent(Show, {
+    }), _el$82, _co$19);
+    _$insert(_el$57, _$createComponent(Show, {
       get when() {
         return attachments().length > 0;
       },
       get children() {
-        var _el$26 = _$getNextElement(_tmpl$7);
-        _$insert(_el$26, _$createComponent(For, {
+        var _el$59 = _$getNextElement(_tmpl$18);
+        _$insert(_el$59, _$createComponent(For, {
           get each() {
             return attachments();
           },
           children: attachment => (() => {
-            var _el$52 = _$getNextElement(_tmpl$11),
-              _el$53 = _el$52.firstChild,
-              _el$54 = _el$53.firstChild,
-              [_el$55, _co$12] = _$getNextMarker(_el$54.nextSibling),
-              _el$56 = _el$55.nextSibling,
-              [_el$57, _co$13] = _$getNextMarker(_el$56.nextSibling),
-              _el$59 = _el$53.nextSibling,
-              [_el$60, _co$14] = _$getNextMarker(_el$59.nextSibling);
-            _$insert(_el$53, _$createComponent(Show, {
+            var _el$110 = _$getNextElement(_tmpl$29),
+              _el$111 = _el$110.firstChild,
+              _el$112 = _el$111.firstChild,
+              [_el$113, _co$26] = _$getNextMarker(_el$112.nextSibling),
+              _el$114 = _el$113.nextSibling,
+              [_el$115, _co$27] = _$getNextMarker(_el$114.nextSibling),
+              _el$117 = _el$111.nextSibling,
+              [_el$118, _co$28] = _$getNextMarker(_el$117.nextSibling);
+            _$insert(_el$111, _$createComponent(Show, {
               get when() {
                 return attachment.href;
               },
               get fallback() {
                 return (() => {
-                  var _el$61 = _$getNextElement(_tmpl$13),
-                    _el$63 = _el$61.firstChild,
-                    [_el$64, _co$15] = _$getNextMarker(_el$63.nextSibling),
-                    _el$65 = _el$64.nextSibling,
-                    [_el$66, _co$16] = _$getNextMarker(_el$65.nextSibling);
-                  _$insert(_el$61, _$createComponent(Show, {
+                  var _el$119 = _$getNextElement(_tmpl$31),
+                    _el$121 = _el$119.firstChild,
+                    [_el$122, _co$29] = _$getNextMarker(_el$121.nextSibling),
+                    _el$123 = _el$122.nextSibling,
+                    [_el$124, _co$30] = _$getNextMarker(_el$123.nextSibling);
+                  _$insert(_el$119, _$createComponent(Show, {
                     get when() {
                       return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                     },
                     get fallback() {
                       return (() => {
-                        var _el$67 = _$getNextElement(_tmpl$14);
-                        _$effect(() => _$className(_el$67, attachmentIcon(attachment)));
-                        return _el$67;
+                        var _el$125 = _$getNextElement(_tmpl$3);
+                        _$effect(() => _$className(_el$125, attachmentIcon(attachment)));
+                        return _el$125;
                       })();
                     },
                     get children() {
-                      var _el$62 = _$getNextElement(_tmpl$12);
+                      var _el$120 = _$getNextElement(_tmpl$30);
                       _$effect(_p$ => {
-                        var _v$21 = attachment.previewUrl,
-                          _v$22 = attachment.alt ?? "";
-                        _v$21 !== _p$.e && _$setAttribute(_el$62, "src", _p$.e = _v$21);
-                        _v$22 !== _p$.t && _$setAttribute(_el$62, "alt", _p$.t = _v$22);
+                        var _v$32 = attachment.previewUrl,
+                          _v$33 = attachment.alt ?? "";
+                        _v$32 !== _p$.e && _$setAttribute(_el$120, "src", _p$.e = _v$32);
+                        _v$33 !== _p$.t && _$setAttribute(_el$120, "alt", _p$.t = _v$33);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$62;
+                      return _el$120;
                     }
-                  }), _el$64, _co$15);
-                  _$insert(_el$61, () => renderAttachmentCopy(attachment), _el$66, _co$16);
-                  return _el$61;
+                  }), _el$122, _co$29);
+                  _$insert(_el$119, () => renderAttachmentCopy(attachment), _el$124, _co$30);
+                  return _el$119;
                 })();
               },
               children: href => (() => {
-                var _el$68 = _$getNextElement(_tmpl$15),
-                  _el$70 = _el$68.firstChild,
-                  [_el$71, _co$17] = _$getNextMarker(_el$70.nextSibling),
-                  _el$72 = _el$71.nextSibling,
-                  [_el$73, _co$18] = _$getNextMarker(_el$72.nextSibling);
-                _$insert(_el$68, _$createComponent(Show, {
+                var _el$126 = _$getNextElement(_tmpl$32),
+                  _el$128 = _el$126.firstChild,
+                  [_el$129, _co$31] = _$getNextMarker(_el$128.nextSibling),
+                  _el$130 = _el$129.nextSibling,
+                  [_el$131, _co$32] = _$getNextMarker(_el$130.nextSibling);
+                _$insert(_el$126, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
                   },
                   get fallback() {
                     return (() => {
-                      var _el$74 = _$getNextElement(_tmpl$14);
-                      _$effect(() => _$className(_el$74, attachmentIcon(attachment)));
-                      return _el$74;
+                      var _el$132 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$132, attachmentIcon(attachment)));
+                      return _el$132;
                     })();
                   },
                   get children() {
-                    var _el$69 = _$getNextElement(_tmpl$12);
+                    var _el$127 = _$getNextElement(_tmpl$30);
                     _$effect(_p$ => {
-                      var _v$23 = attachment.previewUrl,
-                        _v$24 = attachment.alt ?? "";
-                      _v$23 !== _p$.e && _$setAttribute(_el$69, "src", _p$.e = _v$23);
-                      _v$24 !== _p$.t && _$setAttribute(_el$69, "alt", _p$.t = _v$24);
+                      var _v$34 = attachment.previewUrl,
+                        _v$35 = attachment.alt ?? "";
+                      _v$34 !== _p$.e && _$setAttribute(_el$127, "src", _p$.e = _v$34);
+                      _v$35 !== _p$.t && _$setAttribute(_el$127, "alt", _p$.t = _v$35);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$69;
+                    return _el$127;
                   }
-                }), _el$71, _co$17);
-                _$insert(_el$68, () => renderAttachmentCopy(attachment), _el$73, _co$18);
+                }), _el$129, _co$31);
+                _$insert(_el$126, () => renderAttachmentCopy(attachment), _el$131, _co$32);
                 _$effect(_p$ => {
-                  var _v$25 = href(),
-                    _v$26 = messages().openInNewTab({
+                  var _v$36 = href(),
+                    _v$37 = messages().openInNewTab({
                       name: attachment.name
                     });
-                  _v$25 !== _p$.e && _$setAttribute(_el$68, "href", _p$.e = _v$25);
-                  _v$26 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$26);
+                  _v$36 !== _p$.e && _$setAttribute(_el$126, "href", _p$.e = _v$36);
+                  _v$37 !== _p$.t && _$setAttribute(_el$126, "aria-label", _p$.t = _v$37);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$68;
+                return _el$126;
               })()
-            }), _el$55, _co$12);
-            _$insert(_el$53, _$createComponent(Show, {
+            }), _el$113, _co$26);
+            _$insert(_el$111, _$createComponent(Show, {
               get when() {
                 return attachment.action;
               },
               children: action => (() => {
-                var _el$75 = _$getNextElement(_tmpl$16),
-                  _el$76 = _el$75.firstChild,
-                  [_el$77, _co$19] = _$getNextMarker(_el$76.nextSibling),
-                  _el$78 = _el$77.nextSibling,
-                  [_el$79, _co$20] = _$getNextMarker(_el$78.nextSibling);
-                _el$75.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
-                _$insert(_el$75, _$createComponent(Show, {
+                var _el$133 = _$getNextElement(_tmpl$33),
+                  _el$134 = _el$133.firstChild,
+                  [_el$135, _co$33] = _$getNextMarker(_el$134.nextSibling),
+                  _el$136 = _el$135.nextSibling,
+                  [_el$137, _co$34] = _$getNextMarker(_el$136.nextSibling);
+                _el$133.$$click = () => reportChatFailure(() => executeChatAction(action()), props.onError);
+                _$insert(_el$133, _$createComponent(Show, {
                   get when() {
                     return action().icon;
                   },
                   children: icon => (() => {
-                    var _el$80 = _$getNextElement(_tmpl$14);
-                    _$effect(() => _$className(_el$80, icon()));
-                    return _el$80;
+                    var _el$138 = _$getNextElement(_tmpl$3);
+                    _$effect(() => _$className(_el$138, icon()));
+                    return _el$138;
                   })()
-                }), _el$77, _co$19);
-                _$insert(_el$75, () => action().label, _el$79, _co$20);
-                _$effect(() => _$setProperty(_el$75, "disabled", blocked() || action().disabled));
+                }), _el$135, _co$33);
+                _$insert(_el$133, () => action().label, _el$137, _co$34);
+                _$effect(() => _$setProperty(_el$133, "disabled", blocked() || action().disabled));
                 _$runHydrationEvents();
-                return _el$75;
+                return _el$133;
               })()
-            }), _el$57, _co$13);
-            _$insert(_el$52, _$createComponent(Show, {
+            }), _el$115, _co$27);
+            _$insert(_el$110, _$createComponent(Show, {
               get when() {
                 return props.onAttachmentsChange;
               },
               get children() {
-                var _el$58 = _$getNextElement(_tmpl$10);
-                _el$58.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
+                var _el$116 = _$getNextElement(_tmpl$28);
+                _el$116.$$click = () => setAttachments(attachments().filter(candidate => candidate.id !== attachment.id));
                 _$effect(_p$ => {
-                  var _v$19 = messages().removeNamed({
+                  var _v$30 = messages().removeNamed({
                       name: attachment.name
                     }),
-                    _v$20 = blocked();
-                  _v$19 !== _p$.e && _$setAttribute(_el$58, "aria-label", _p$.e = _v$19);
-                  _v$20 !== _p$.t && _$setProperty(_el$58, "disabled", _p$.t = _v$20);
+                    _v$31 = blocked();
+                  _v$30 !== _p$.e && _$setAttribute(_el$116, "aria-label", _p$.e = _v$30);
+                  _v$31 !== _p$.t && _$setProperty(_el$116, "disabled", _p$.t = _v$31);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
                 _$runHydrationEvents();
-                return _el$58;
+                return _el$116;
               }
-            }), _el$60, _co$14);
-            _$effect(() => _el$53.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
-            return _el$52;
+            }), _el$118, _co$28);
+            _$effect(() => _el$111.classList.toggle("k2b-chat-composer__attachment-content--action", !!Boolean(attachment.action)));
+            return _el$110;
           })()
         }));
-        _$effect(() => _$setAttribute(_el$26, "aria-label", messages().attachments));
-        return _el$26;
+        _$effect(() => _$setAttribute(_el$59, "aria-label", messages().attachments));
+        return _el$59;
       }
-    }), _el$41, _co$0);
-    _$insert(_el$27, _$createComponent(Show, {
+    }), _el$84, _co$20);
+    _$insert(_el$57, _$createComponent(Show, {
       get when() {
-        return mentions().length > 0;
-      },
-      get children() {
-        var _el$28 = _$getNextElement(_tmpl$8),
-          _el$30 = _el$28.firstChild,
-          [_el$31, _co$7] = _$getNextMarker(_el$30.nextSibling),
-          _el$29 = _el$31.nextSibling;
-        var _ref$3 = highlightRef;
-        typeof _ref$3 === "function" ? _$use(_ref$3, _el$28) : highlightRef = _el$28;
-        _$insert(_el$28, _$createComponent(For, {
-          get each() {
-            return chatMentionSegments(props.value, mentions());
-          },
-          children: part => (() => {
-            var _el$81 = _$getNextElement(_tmpl$17);
-            _$insert(_el$81, () => part.text);
-            _$effect(() => _el$81.classList.toggle("k2b-chat-composer__mention", !!Boolean(part.mention)));
-            return _el$81;
-          })()
-        }), _el$31, _co$7);
-        return _el$28;
-      }
-    }), _el$34, _co$8);
-    _el$32.$$keydown = onKeyDown;
-    _el$32.$$beforeinput = event => {
-      if (event.inputType === "historyUndo" || event.inputType === "historyRedo") {
-        event.preventDefault();
-        restoreHistory(event.inputType === "historyUndo" ? -1 : 1);
-      }
-    };
-    _el$32.addEventListener("scroll", () => {
-      if (highlightRef && textareaRef) highlightRef.scrollTop = textareaRef.scrollTop;
-    });
-    _el$32.addEventListener("compositionend", () => {
-      setComposing(false);
-      syncCaret();
-    });
-    _el$32.addEventListener("compositionstart", () => setComposing(true));
-    _el$32.$$keyup = syncCaret;
-    _el$32.$$click = () => {
-      setDismissed(false);
-      syncCaret();
-    };
-    _el$32.addEventListener("blur", () => setDismissed(true));
-    _el$32.addEventListener("select", syncCaret);
-    _el$32.addEventListener("paste", event => {
-      const clipboardData = event.clipboardData;
-      if (canSelectFiles() && clipboardData?.files.length) {
-        event.preventDefault();
-        void runFiles(clipboardData.files);
-        return;
-      }
-      props.onPaste?.(event);
-    });
-    _el$32.$$input = event => {
-      edit(event.currentTarget.value);
-      syncCaret();
-      autoResize();
-    };
-    var _ref$4 = textareaRef;
-    typeof _ref$4 === "function" ? _$use(_ref$4, _el$32) : textareaRef = _el$32;
-    _$insert(_el$25, _$createComponent(Show, {
-      get when() {
-        return props.error;
-      },
-      get children() {
-        var _el$35 = _$getNextElement(_tmpl$9),
-          _el$36 = _el$35.firstChild,
-          _el$37 = _el$36.nextSibling,
-          [_el$38, _co$9] = _$getNextMarker(_el$37.nextSibling);
-        _$insert(_el$35, () => props.error, _el$38, _co$9);
-        return _el$35;
-      }
-    }), _el$43, _co$1);
-    _$insert(_el$39, _$createComponent(Show, {
-      get when() {
-        return props.footerContent;
+        return conversation();
       },
       get fallback() {
-        return [(() => {
-          var _el$82 = _$getNextElement(_tmpl$20),
-            _el$85 = _el$82.firstChild,
-            [_el$86, _co$21] = _$getNextMarker(_el$85.nextSibling),
-            _el$87 = _el$86.nextSibling,
-            [_el$88, _co$22] = _$getNextMarker(_el$87.nextSibling),
-            _el$89 = _el$88.nextSibling,
-            [_el$90, _co$23] = _$getNextMarker(_el$89.nextSibling),
-            _el$91 = _el$90.nextSibling,
-            [_el$92, _co$24] = _$getNextMarker(_el$91.nextSibling),
-            _el$93 = _el$92.nextSibling,
-            [_el$94, _co$25] = _$getNextMarker(_el$93.nextSibling);
-          _$insert(_el$82, () => props.footerTools, _el$86, _co$21);
-          _$insert(_el$82, _$createComponent(Show, {
+        return [_$memo(field), _$createComponent(Show, {
+          get when() {
+            return props.error;
+          },
+          get children() {
+            var _el$139 = _$getNextElement(_tmpl$19),
+              _el$140 = _el$139.firstChild,
+              _el$141 = _el$140.nextSibling,
+              [_el$142, _co$35] = _$getNextMarker(_el$141.nextSibling);
+            _$insert(_el$139, () => props.error, _el$142, _co$35);
+            return _el$139;
+          }
+        }), _$memo(formatRow), (() => {
+          var _el$143 = _$getNextElement(_tmpl$34);
+          _$insert(_el$143, _$createComponent(Show, {
             get when() {
-              return hasAddMenu();
+              return props.footerContent;
             },
-            get children() {
-              return _$createComponent(Dropdown.Root, {
-                position: "top-right",
-                get label() {
-                  return messages().addToChat;
-                },
-                get items() {
-                  return menuItems();
-                },
-                get disabled() {
-                  return blocked();
-                },
-                get children() {
-                  return _$createComponent(Dropdown.Trigger, {
-                    appearance: "plain",
+            get fallback() {
+              return [(() => {
+                var _el$144 = _$getNextElement(_tmpl$35),
+                  _el$145 = _el$144.firstChild,
+                  [_el$146, _co$36] = _$getNextMarker(_el$145.nextSibling),
+                  _el$147 = _el$146.nextSibling,
+                  [_el$148, _co$37] = _$getNextMarker(_el$147.nextSibling),
+                  _el$149 = _el$148.nextSibling,
+                  [_el$150, _co$38] = _$getNextMarker(_el$149.nextSibling),
+                  _el$151 = _el$150.nextSibling,
+                  [_el$152, _co$39] = _$getNextMarker(_el$151.nextSibling),
+                  _el$153 = _el$152.nextSibling,
+                  [_el$154, _co$40] = _$getNextMarker(_el$153.nextSibling),
+                  _el$155 = _el$154.nextSibling,
+                  [_el$156, _co$41] = _$getNextMarker(_el$155.nextSibling),
+                  _el$157 = _el$156.nextSibling,
+                  [_el$158, _co$42] = _$getNextMarker(_el$157.nextSibling);
+                _$insert(_el$144, () => props.footerTools, _el$146, _co$36);
+                _$insert(_el$144, _$createComponent(Show, {
+                  get when() {
+                    return hasAddMenu();
+                  },
+                  get children() {
+                    return addMenu("ti ti-plus");
+                  }
+                }), _el$148, _co$37);
+                _$insert(_el$144, fileInput, _el$150, _co$38);
+                _$insert(_el$144, formatToggle, _el$152, _co$39);
+                _$insert(_el$144, emojiButton, _el$154, _co$40);
+                _$insert(_el$144, _$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$156, _co$41);
+                _$insert(_el$144, () => props.modelDetails, _el$158, _co$42);
+                return _el$144;
+              })(), (() => {
+                var _el$159 = _$getNextElement(_tmpl$36),
+                  _el$160 = _el$159.firstChild,
+                  [_el$161, _co$43] = _$getNextMarker(_el$160.nextSibling),
+                  _el$162 = _el$161.nextSibling,
+                  [_el$163, _co$44] = _$getNextMarker(_el$162.nextSibling),
+                  _el$164 = _el$163.nextSibling,
+                  [_el$165, _co$45] = _$getNextMarker(_el$164.nextSibling),
+                  _el$166 = _el$165.nextSibling,
+                  [_el$167, _co$46] = _$getNextMarker(_el$166.nextSibling),
+                  _el$168 = _el$167.nextSibling,
+                  [_el$169, _co$47] = _$getNextMarker(_el$168.nextSibling);
+                _$insert(_el$159, _$createComponent(For, {
+                  get each() {
+                    return props.contextActions;
+                  },
+                  children: action => _$createComponent(Tooltip.Trigger, {
+                    type: "button",
                     "class": "k2b-chat-composer__icon-action",
-                    get label() {
-                      return messages().addToChat;
+                    get ["data-tone"]() {
+                      return action.variant === "danger" ? "danger" : undefined;
+                    },
+                    get disabled() {
+                      return action.disabled;
+                    },
+                    get ["aria-pressed"]() {
+                      return action.pressed;
                     },
-                    get tooltip() {
-                      return messages().addToChat;
+                    get ["aria-label"]() {
+                      return action.label;
                     },
+                    get content() {
+                      return action.label;
+                    },
+                    onClick: () => reportChatFailure(() => executeChatAction(action), props.onError),
                     get children() {
-                      return _$getNextElement(_tmpl$18);
+                      var _el$170 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$170, action.icon ?? "ti ti-dots"));
+                      return _el$170;
                     }
-                  });
-                }
-              });
-            }
-          }), _el$88, _co$22);
-          _$insert(_el$82, _$createComponent(Show, {
-            get when() {
-              return props.fileSelection;
-            },
-            get children() {
-              var _el$84 = _$getNextElement(_tmpl$19);
-              _el$84.addEventListener("change", event => {
-                if (event.currentTarget.files?.length) void runFiles(event.currentTarget.files);
-              });
-              var _ref$5 = fileInputRef;
-              typeof _ref$5 === "function" ? _$use(_ref$5, _el$84) : fileInputRef = _el$84;
-              _$effect(_p$ => {
-                var _v$27 = props.fileSelection?.accept,
-                  _v$28 = props.fileSelection?.multiple ?? true;
-                _v$27 !== _p$.e && _$setAttribute(_el$84, "accept", _p$.e = _v$27);
-                _v$28 !== _p$.t && _$setProperty(_el$84, "multiple", _p$.t = _v$28);
-                return _p$;
-              }, {
-                e: undefined,
-                t: undefined
-              });
-              return _el$84;
-            }
-          }), _el$90, _co$23);
-          _$insert(_el$82, _$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$92, _co$24);
-          _$insert(_el$82, () => props.modelDetails, _el$94, _co$25);
-          return _el$82;
-        })(), (() => {
-          var _el$95 = _$getNextElement(_tmpl$21),
-            _el$97 = _el$95.firstChild,
-            [_el$98, _co$26] = _$getNextMarker(_el$97.nextSibling),
-            _el$99 = _el$98.nextSibling,
-            [_el$100, _co$27] = _$getNextMarker(_el$99.nextSibling),
-            _el$101 = _el$100.nextSibling,
-            [_el$102, _co$28] = _$getNextMarker(_el$101.nextSibling),
-            _el$103 = _el$102.nextSibling,
-            [_el$104, _co$29] = _$getNextMarker(_el$103.nextSibling);
-          _$insert(_el$95, _$createComponent(For, {
-            get each() {
-              return props.contextActions;
-            },
-            children: action => _$createComponent(Tooltip.Trigger, {
-              type: "button",
-              "class": "k2b-chat-composer__icon-action",
-              get ["data-tone"]() {
-                return action.variant === "danger" ? "danger" : undefined;
-              },
-              get disabled() {
-                return action.disabled;
-              },
-              get ["aria-pressed"]() {
-                return action.pressed;
-              },
-              get ["aria-label"]() {
-                return action.label;
-              },
-              get content() {
-                return action.label;
-              },
-              onClick: () => reportChatFailure(() => executeChatAction(action), props.onError),
-              get children() {
-                var _el$105 = _$getNextElement(_tmpl$14);
-                _$effect(() => _$className(_el$105, action.icon ?? "ti ti-dots"));
-                return _el$105;
-              }
-            })
-          }), _el$98, _co$26);
-          _$insert(_el$95, _$createComponent(Show, {
-            get when() {
-              return _$memo(() => !!hasContextUsage())() ? props.contextUsage ?? {} : undefined;
-            },
-            children: usage => _$createComponent(ContextUsage, _$mergeProps(usage, {
-              get action() {
-                return props.contextPopupAction;
-              },
-              get onActionError() {
-                return props.onError;
-              }
-            }))
-          }), _el$100, _co$27);
-          _$insert(_el$95, () => props.submitTools, _el$102, _co$28);
-          _$insert(_el$95, _$createComponent(Show, {
-            get when() {
-              return _$memo(() => !!(running() && !hasDraft()))() && props.onStop;
-            },
-            get fallback() {
-              return _$createComponent(Tooltip.Trigger, {
-                type: "button",
-                "class": "k2b-chat-composer__send",
-                get disabled() {
-                  return !canSubmit();
-                },
-                get ["aria-label"]() {
-                  return _$memo(() => !!submitting())() ? _$memo(() => !!running())() ? _$memo(() => runningSubmitIntent() === "queue")() ? messages().queueing : messages().steering : messages().sending : _$memo(() => !!running())() ? _$memo(() => runningSubmitIntent() === "queue")() ? messages().queueMessage : messages().steerResponse : messages().sendMessage;
-                },
-                get content() {
-                  return _$memo(() => !!running())() ? _$memo(() => runningSubmitIntent() === "queue")() ? messages().queueMessage : messages().steerResponse : messages().sendMessage;
-                },
-                onClick: () => void submit(),
-                get children() {
-                  var _el$106 = _$getNextElement(_tmpl$14);
-                  _$effect(() => _$className(_el$106, submitting() ? "ti ti-loader-2 k2b-spin" : "ti ti-arrow-up"));
-                  return _el$106;
-                }
-              });
+                  })
+                }), _el$161, _co$43);
+                _$insert(_el$159, _$createComponent(Show, {
+                  get when() {
+                    return _$memo(() => !!hasContextUsage())() ? props.contextUsage ?? {} : undefined;
+                  },
+                  children: usage => _$createComponent(ContextUsage, _$mergeProps(usage, {
+                    get action() {
+                      return props.contextPopupAction;
+                    },
+                    get onActionError() {
+                      return props.onError;
+                    }
+                  }))
+                }), _el$163, _co$44);
+                _$insert(_el$159, () => props.submitTools, _el$165, _co$45);
+                _$insert(_el$159, microphoneControl, _el$167, _co$46);
+                _$insert(_el$159, sendControl, _el$169, _co$47);
+                return _el$159;
+              })()];
             },
-            get children() {
-              return _$createComponent(Tooltip.Trigger, {
-                type: "button",
-                "class": "k2b-chat-composer__stop",
-                get disabled() {
-                  return stopping();
-                },
-                get ["aria-label"]() {
-                  return _$memo(() => !!stopping())() ? messages().stopping : messages().stopResponse;
-                },
-                get content() {
-                  return messages().stopResponse;
-                },
-                onClick: () => reportChatFailure(() => props.onStop?.(), props.onError),
-                get children() {
-                  var _el$96 = _$getNextElement(_tmpl$14);
-                  _$effect(() => _$className(_el$96, stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop"));
-                  return _el$96;
-                }
-              });
-            }
-          }), _el$104, _co$29);
-          return _el$95;
+            children: content => content()
+          }));
+          return _el$143;
         })()];
       },
-      children: content => content()
-    }));
-    _$insert(_el$25, _$createComponent(Show, {
+      get children() {
+        return [_$createComponent(Show, {
+          get when() {
+            return props.error;
+          },
+          get children() {
+            var _el$60 = _$getNextElement(_tmpl$19),
+              _el$61 = _el$60.firstChild,
+              _el$62 = _el$61.nextSibling,
+              [_el$63, _co$11] = _$getNextMarker(_el$62.nextSibling);
+            _$insert(_el$60, () => props.error, _el$63, _co$11);
+            return _el$60;
+          }
+        }), _$memo(() => formatRow()), (() => {
+          var _el$64 = _$getNextElement(_tmpl$20),
+            _el$75 = _el$64.firstChild,
+            [_el$76, _co$16] = _$getNextMarker(_el$75.nextSibling),
+            _el$77 = _el$76.nextSibling,
+            [_el$78, _co$17] = _$getNextMarker(_el$77.nextSibling),
+            _el$65 = _el$78.nextSibling,
+            _el$73 = _el$65.firstChild,
+            [_el$74, _co$15] = _$getNextMarker(_el$73.nextSibling),
+            _el$66 = _el$74.nextSibling,
+            _el$67 = _el$66.firstChild,
+            [_el$68, _co$12] = _$getNextMarker(_el$67.nextSibling),
+            _el$69 = _el$68.nextSibling,
+            [_el$70, _co$13] = _$getNextMarker(_el$69.nextSibling),
+            _el$71 = _el$70.nextSibling,
+            [_el$72, _co$14] = _$getNextMarker(_el$71.nextSibling),
+            _el$79 = _el$65.nextSibling,
+            [_el$80, _co$18] = _$getNextMarker(_el$79.nextSibling);
+          _$insert(_el$64, attachControl, _el$76, _co$16);
+          _$insert(_el$64, fileInput, _el$78, _co$17);
+          _$insert(_el$65, field, _el$74, _co$15);
+          _$insert(_el$66, formatToggle, _el$68, _co$12);
+          _$insert(_el$66, emojiButton, _el$70, _co$13);
+          _$insert(_el$66, microphoneControl, _el$72, _co$14);
+          _$insert(_el$64, sendControl, _el$80, _co$18);
+          return _el$64;
+        })()];
+      }
+    }), _el$86, _co$21);
+    _$insert(_el$57, _$createComponent(Show, {
       get when() {
         return props.fileSelection;
       },
@@ -1009,54 +1759,25 @@ export function ChatComposer(props) {
         },
         onDrop: files => void runFiles(files)
       })
-    }), _el$45, _co$10);
+    }), _el$88, _co$22);
     _$effect(_p$ => {
-      var _v$3 = `k2b-chat-composer ${props.class ?? ""}`,
-        _v$4 = running() ? "true" : undefined,
-        _v$5 = props.label ?? messages().messageComposer,
-        _v$6 = messages().messageInput,
-        _v$7 = !!(mentions().length > 0),
-        _v$8 = blocked(),
-        _v$9 = props.placeholder ?? (running() ? messages().addGuidance : messages().writeMessage),
-        _v$0 = props.inputLabel ?? messages().message,
-        _v$1 = commandsOpen() ? "combobox" : undefined,
-        _v$10 = commandsOpen() ? "list" : undefined,
-        _v$11 = commandsOpen() ? commandListId : undefined,
-        _v$12 = commandsOpen() ? "true" : undefined,
-        _v$13 = selectedCommand() ? `${commandListId}-${selectedCommandIndex()}` : undefined;
-      _v$3 !== _p$.e && _$className(_el$25, _p$.e = _v$3);
-      _v$4 !== _p$.t && _$setAttribute(_el$25, "data-running", _p$.t = _v$4);
-      _v$5 !== _p$.a && _$setAttribute(_el$25, "aria-label", _p$.a = _v$5);
-      _v$6 !== _p$.o && _$setAttribute(_el$27, "aria-label", _p$.o = _v$6);
-      _v$7 !== _p$.i && _el$32.classList.toggle("k2b-chat-composer__textarea--highlighted", _p$.i = _v$7);
-      _v$8 !== _p$.n && _$setProperty(_el$32, "disabled", _p$.n = _v$8);
-      _v$9 !== _p$.s && _$setAttribute(_el$32, "placeholder", _p$.s = _v$9);
-      _v$0 !== _p$.h && _$setAttribute(_el$32, "aria-label", _p$.h = _v$0);
-      _v$1 !== _p$.r && _$setAttribute(_el$32, "role", _p$.r = _v$1);
-      _v$10 !== _p$.d && _$setAttribute(_el$32, "aria-autocomplete", _p$.d = _v$10);
-      _v$11 !== _p$.l && _$setAttribute(_el$32, "aria-controls", _p$.l = _v$11);
-      _v$12 !== _p$.u && _$setAttribute(_el$32, "aria-expanded", _p$.u = _v$12);
-      _v$13 !== _p$.c && _$setAttribute(_el$32, "aria-activedescendant", _p$.c = _v$13);
+      var _v$15 = `k2b-chat-composer ${props.class ?? ""}`,
+        _v$16 = running() ? "true" : undefined,
+        _v$17 = conversation() ? "conversation" : undefined,
+        _v$18 = props.label ?? messages().messageComposer;
+      _v$15 !== _p$.e && _$className(_el$57, _p$.e = _v$15);
+      _v$16 !== _p$.t && _$setAttribute(_el$57, "data-running", _p$.t = _v$16);
+      _v$17 !== _p$.a && _$setAttribute(_el$57, "data-variant", _p$.a = _v$17);
+      _v$18 !== _p$.o && _$setAttribute(_el$57, "aria-label", _p$.o = _v$18);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined,
-      i: undefined,
-      n: undefined,
-      s: undefined,
-      h: undefined,
-      r: undefined,
-      d: undefined,
-      l: undefined,
-      u: undefined,
-      c: undefined
+      o: undefined
     });
-    _$effect(() => _$setProperty(_el$32, "value", props.value));
-    _$runHydrationEvents();
-    return _el$3;
+    return _el$29;
   })();
 }
-_$delegateEvents(["input", "click", "keyup", "beforeinput", "keydown", "pointerdown"]);
+_$delegateEvents(["input", "click", "keyup", "beforeinput", "keydown", "pointerdown", "mousedown"]);
 //# sourceMappingURL=ChatComposer.js.map