@k2b/ui 0.18.0 → 0.19.0

package/dist/ssr/chat/ChatComposer.js

@@ -1,58 +1,158 @@
 import { mergeProps as _$mergeProps } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
 import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 import { ssr as _$ssr } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<span><strong", ">", "</strong></span>"],
-  _tmpl$2 = ["<div role=\"status\" class=\"k2b-chat-composer__loading\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><strong>", "</strong></div>"],
-  _tmpl$3 = ["<div role=\"status\"><i class=\"ti ti-alert-circle\"></i> ", "</div>"],
-  _tmpl$4 = ["<div role=\"status\">", "</div>"],
-  _tmpl$5 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "", "", "", "</div></div>"],
-  _tmpl$6 = ["<div class=\"k2b-chat-composer-slot\"><div style=\"", "\"", ">", "</div>", "</div>"],
-  _tmpl$7 = ["<div class=\"k2b-chat-composer__attachments\" role=\"list\"", " tabindex=\"0\">", "</div>"],
-  _tmpl$8 = ["<div class=\"k2b-chat-composer__highlight\" aria-hidden=\"true\">", "\n</div>"],
-  _tmpl$9 = ["<div class=\"k2b-chat-composer__error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</div>"],
-  _tmpl$0 = ["<div class=\"k2b-chat-composer-shell\">", "<section class=\"", "\"", " role=\"group\"", ">", "<div class=\"k2b-chat-composer__input\" role=\"group\"", ">", "<textarea class=\"", "\" rows=\"1\"", "", "></textarea></div>", "<footer class=\"k2b-chat-composer__footer\">", "</footer>", "</section></div>"],
-  _tmpl$1 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><i", " aria-hidden=\"true\"></i><strong>", "</strong><small>", "</small></button>"],
-  _tmpl$10 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
-  _tmpl$11 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
-  _tmpl$12 = ["<img", ">"],
-  _tmpl$13 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
-  _tmpl$14 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$15 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
-  _tmpl$16 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
-  _tmpl$17 = ["<span class=\"", "\">", "</span>"],
-  _tmpl$18 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>",
-  _tmpl$19 = ["<input class=\"k2b-sr-only\" type=\"file\" tabindex=\"-1\" aria-hidden=\"true\"", "", ">"],
-  _tmpl$20 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "</div>"],
-  _tmpl$21 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "</div>"];
+  _tmpl$2 = ["<input class=\"k2b-sr-only\" type=\"file\" tabindex=\"-1\" aria-hidden=\"true\"", "", ">"],
+  _tmpl$3 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$4 = "<i class=\"ti ti-letter-case\" aria-hidden=\"true\"></i>",
+  _tmpl$5 = ["<div", " class=\"k2b-chat-composer__format\" role=\"group\"", ">", "</div>"],
+  _tmpl$6 = "<i class=\"ti ti-mood-smile\" aria-hidden=\"true\"></i>",
+  _tmpl$7 = "<i class=\"ti ti-chevron-up\" aria-hidden=\"true\"></i>",
+  _tmpl$8 = ["<div class=\"k2b-chat-composer__microphone\">", "", "</div>"],
+  _tmpl$9 = ["<div class=\"k2b-chat-composer__highlight\" aria-hidden=\"true\">", "\n</div>"],
+  _tmpl$0 = "<textarea class=\"k2b-chat-composer__measure\" rows=\"1\" tabindex=\"-1\" aria-hidden=\"true\" readonly></textarea>",
+  _tmpl$1 = ["<div class=\"k2b-chat-composer__input\" role=\"group\"", ">", "<textarea class=\"", "\" rows=\"1\"", "", "></textarea>", "</div>"],
+  _tmpl$10 = ["<span class=\"", "\">", "</span>"],
+  _tmpl$11 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "</div></div>"],
+  _tmpl$12 = ["<div role=\"status\" class=\"k2b-chat-composer__loading\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><strong>", "</strong></div>"],
+  _tmpl$13 = ["<div role=\"status\"><i class=\"ti ti-alert-circle\"></i> ", "</div>"],
+  _tmpl$14 = ["<div role=\"status\">", "</div>"],
+  _tmpl$15 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "", "", "", "</div></div>"],
+  _tmpl$16 = ["<div class=\"k2b-chat-composer-slot\"", "><div style=\"", "\"", ">", "</div>", "", "</div>"],
+  _tmpl$17 = ["<div class=\"k2b-chat-composer__hint\" aria-live=\"polite\">", "</div>"],
+  _tmpl$18 = ["<div class=\"k2b-chat-composer__attachments\" role=\"list\"", " tabindex=\"0\">", "</div>"],
+  _tmpl$19 = ["<div class=\"k2b-chat-composer__error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</div>"],
+  _tmpl$20 = ["<div class=\"k2b-chat-composer__row\">", "", "<div class=\"k2b-chat-composer__field\">", "<div class=\"k2b-chat-composer__field-tools\">", "", "", "</div></div>", "</div>"],
+  _tmpl$21 = ["<div class=\"k2b-chat-composer-shell\">", "<section class=\"", "\"", " role=\"group\"", ">", "", "", "", "</section></div>"],
+  _tmpl$22 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><span class=\"k2b-chat-composer__emoji-glyph\" aria-hidden=\"true\">", "</span><strong>", "</strong>", "</button>"],
+  _tmpl$23 = ["<small>:", ":</small>"],
+  _tmpl$24 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><i", " aria-hidden=\"true\"></i><strong>", "</strong><small>", "</small></button>"],
+  _tmpl$25 = ["<span class=\"k2b-chat-composer__hint-text\">", "</span>"],
+  _tmpl$26 = ["<span class=\"k2b-chat-composer__dictation\"", "><i", " aria-hidden=\"true\"></i><span>", "</span></span>"],
+  _tmpl$27 = ["<button type=\"button\" class=\"k2b-chat-composer__hint-action\"", ">", "</button>"],
+  _tmpl$28 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$29 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
+  _tmpl$30 = ["<img", ">"],
+  _tmpl$31 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
+  _tmpl$32 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
+  _tmpl$33 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
+  _tmpl$34 = ["<footer class=\"k2b-chat-composer__footer\">", "</footer>"],
+  _tmpl$35 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "", "", "</div>"],
+  _tmpl$36 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "", "</div>"];
 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, toggleCodeBlock, toggleInlineMarker, toggleQuote } 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;
+const insertComposerLink = textarea => {
+  const {
+    value,
+    selectionStart,
+    selectionEnd
+  } = textarea;
+  const label = value.slice(selectionStart, selectionEnd);
+  replaceTextareaRange(textarea, selectionStart, selectionEnd, `[${label}]()`);
+  // Without a selection the label comes first, otherwise the address.
+  const caret = label ? selectionStart + label.length + 3 : selectionStart + 1;
+  textarea.setSelectionRange(caret, caret);
+};
+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: "strikethrough",
+  icon: "ti ti-strikethrough",
+  label: m => m.strikethroughShortcut,
+  run: textarea => toggleInlineMarker(textarea, "~~"),
+  shiftCode: "KeyX"
+}, {
+  id: "code",
+  icon: "ti ti-code",
+  label: m => m.inlineCodeShortcut,
+  run: textarea => toggleInlineMarker(textarea, "`"),
+  key: "e"
+}, {
+  id: "code-block",
+  icon: "ti ti-source-code",
+  label: m => m.codeBlock,
+  run: toggleCodeBlock
+}, {
+  id: "bullet-list",
+  icon: "ti ti-list",
+  label: m => m.bulletListShortcut,
+  run: toggleBulletList,
+  shiftCode: "Digit8"
+}, {
+  id: "quote",
+  icon: "ti ti-quote",
+  label: m => m.quote,
+  run: toggleQuote
+}, {
+  id: "link",
+  icon: "ti ti-link",
+  label: m => m.insertLink,
+  run: insertComposerLink
+}];
+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";
@@ -69,15 +169,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;
@@ -174,7 +288,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());
@@ -194,7 +311,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 ?? []) {
@@ -210,6 +327,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`;
   };
@@ -217,14 +342,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}"]`);
@@ -254,6 +387,13 @@ export function ChatComposer(props) {
   });
   const setAttachments = next => props.onAttachmentsChange?.(next);
   const renderAttachmentCopy = attachment => _$ssr(_tmpl$, _$ssrAttribute("title", _$escape(attachment.name, true), false), _$escape(attachment.name));
+  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);
@@ -291,8 +431,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
@@ -349,13 +498,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") {
@@ -363,7 +573,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);
@@ -375,294 +586,674 @@ 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();
     }
   };
-  return _$ssr(_tmpl$0, _$escape(_$createComponent(Show, {
+  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 commandsOpen() || hasAccessory();
+      return props.fileSelection;
     },
     get children() {
-      return _$ssr(_tmpl$6, _$ssrStyleProperty("visibility:", commandsOpen() ? "hidden" : _$escape(undefined, true)), _$ssrAttribute("inert", commandsOpen(), true), _$escape(accessory()), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$2, _$ssrAttribute("accept", _$escape(props.fileSelection?.accept, true), false), _$ssrAttribute("multiple", props.fileSelection?.multiple ?? true, true));
+    }
+  });
+  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() {
+          return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(icon, true), false));
+        }
+      });
+    }
+  });
+
+  /** 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() {
+            return _$ssr(_tmpl$3, _$ssrAttribute("class", addingFiles() ? "ti ti-loader-2 k2b-spin" : "ti ti-paperclip", false));
+          }
+        })
+      });
+    },
+    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 _$ssr(_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() {
+      return _$ssr(_tmpl$5, _$ssrAttribute("id", _$escape(formatGroupId, true), false), _$ssrAttribute("aria-label", _$escape(messages().composerFormatting, true), false), _$escape(_$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() {
+            return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(tool.icon, true), false));
+          }
+        })
+      })));
+    }
+  });
+  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 _$ssr(_tmpl$6);
+      }
+    })
+  });
+  const microphoneControl = () => _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!(props.microphone?.onDictate || props.microphone?.onVoiceMessage))() ? props.microphone : undefined;
+    },
+    children: microphone => _$ssr(_tmpl$8, _$escape(_$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() {
+        return _$ssr(_tmpl$3, _$ssrAttribute("class", dictation() === "listening" ? "ti ti-player-stop" : dictation() === "refining" ? "ti ti-loader-2 k2b-spin" : "ti ti-microphone", false));
+      }
+    })), _$escape(_$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 _$ssr(_tmpl$7);
+              }
+            });
+          }
+        });
+      }
+    })))
+  });
+  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() {
+          return _$ssr(_tmpl$3, _$ssrAttribute("class", submitting() ? "ti ti-loader-2 k2b-spin" : conversation() ? "ti ti-send" : "ti ti-arrow-up", false));
+        }
+      });
+    },
+    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() {
+          return _$ssr(_tmpl$3, _$ssrAttribute("class", stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop", false));
+        }
+      });
+    }
+  });
+  const field = () => _$ssr(_tmpl$1, _$ssrAttribute("aria-label", _$escape(messages().messageInput, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return mentions().length > 0;
+    },
+    get children() {
+      return _$ssr(_tmpl$9, _$escape(_$createComponent(For, {
+        get each() {
+          return chatMentionSegments(props.value, mentions());
+        },
+        children: part => _$ssr(_tmpl$10, Boolean(part.mention) ? "k2b-chat-composer__mention" : "", _$escape(part.text))
+      })));
+    }
+  })), mentions().length > 0 ? "k2b-chat-composer__textarea--highlighted" : "", _$ssrAttribute("value", _$escape(props.value, true), false), _$ssrAttribute("disabled", editBlocked(), true) + _$ssrAttribute("enterkeyhint", conversation() ? "enter" : _$escape(undefined, true), false) + _$ssrAttribute("placeholder", _$escape(props.placeholder ?? (running() ? messages().addGuidance : conversation() ? messages().writeConversationMessage : messages().writeMessage), true), false) + _$ssrAttribute("aria-label", _$escape(props.inputLabel ?? messages().message, true), false) + _$ssrAttribute("role", suggestionsOpen() ? "combobox" : _$escape(undefined, true), false) + _$ssrAttribute("aria-autocomplete", suggestionsOpen() ? "list" : _$escape(undefined, true), false) + _$ssrAttribute("aria-controls", suggestionsOpen() ? _$escape(commandListId, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-expanded", suggestionsOpen() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-activedescendant", (emojiOpen() ? emojiMatches()[selectedCommandIndex()] : selectedCommand()) ? `${_$escape(commandListId, true)}-${_$escape(selectedCommandIndex(), true)}` : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return conversation();
+    },
+    get children() {
+      return _$ssr(_tmpl$0);
+    }
+  })));
+  return _$ssr(_tmpl$21, _$escape(_$createComponent(Show, {
+    get when() {
+      return suggestionsOpen() || hasAccessory();
+    },
+    get children() {
+      return _$ssr(_tmpl$16, _$ssrAttribute("data-overlay", hasAccessory() ? _$escape(undefined, true) : "true", false), _$ssrStyleProperty("visibility:", suggestionsOpen() ? "hidden" : _$escape(undefined, true)), _$ssrAttribute("inert", suggestionsOpen(), true), _$escape(accessory()), _$escape(_$createComponent(Show, {
+        get when() {
+          return emojiOpen();
+        },
+        get children() {
+          return _$ssr(_tmpl$11, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(messages().emojiSuggestions, true), false), _$escape(_$createComponent(For, {
+            get each() {
+              return emojiMatches();
+            },
+            children: (entry, index) => _$ssr(_tmpl$22, `${_$escape(commandListId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(selectedCommandIndex(), true), false) + _$ssrAttribute("aria-label", _$escape(emojiName(entry, locale()), true), false) + _$ssrAttribute("data-active", index() === selectedCommandIndex() ? "true" : _$escape(undefined, true), false), _$escape(emojiInTone(entry, props.emoji?.skinTone ?? 0)), _$escape(emojiName(entry, locale())), _$escape(_$createComponent(Show, {
+              get when() {
+                return entry.shortcodes[0];
+              },
+              children: code => _$ssr(_tmpl$23, _$escape(code()))
+            })))
+          })));
+        }
+      })), _$escape(_$createComponent(Show, {
         get when() {
           return commandsOpen();
         },
         get children() {
-          return _$ssr(_tmpl$5, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(messages().commands, true), false), _$escape(_$createComponent(For, {
+          return _$ssr(_tmpl$15, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(messages().commands, true), false), _$escape(_$createComponent(For, {
             get each() {
               return commandMatches();
             },
-            children: (command, index) => _$ssr(_tmpl$1, `${_$escape(commandListId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(selectedCommandIndex(), true), false) + _$ssrAttribute("aria-disabled", _$escape(command.disabled, true), false) + _$ssrAttribute("data-active", index() === selectedCommandIndex() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(command.icon ?? "ti ti-slash", true), false), _$escape(command.label ?? `/${command.name}`), _$escape(command.description))
+            children: (command, index) => _$ssr(_tmpl$24, `${_$escape(commandListId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(selectedCommandIndex(), true), false) + _$ssrAttribute("aria-disabled", _$escape(command.disabled, true), false) + _$ssrAttribute("data-active", index() === selectedCommandIndex() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(command.icon ?? "ti ti-slash", true), false), _$escape(command.label ?? `/${command.name}`), _$escape(command.description))
           })), _$escape(_$createComponent(Show, {
             get when() {
               return searching();
             },
             get children() {
-              return _$ssr(_tmpl$2, _$escape(messages().loading));
+              return _$ssr(_tmpl$12, _$escape(messages().loading));
             }
           })), _$escape(_$createComponent(Show, {
             get when() {
               return searchError();
             },
             get children() {
-              return _$ssr(_tmpl$3, _$escape(messages().error));
+              return _$ssr(_tmpl$13, _$escape(messages().error));
             }
           })), _$escape(_$createComponent(Show, {
             get when() {
               return _$memo(() => !!(!searching() && !searchError()))() && commandMatches().length === 0;
             },
             get children() {
-              return _$ssr(_tmpl$4, _$escape(messages().noResults));
+              return _$ssr(_tmpl$14, _$escape(messages().noResults));
             }
           })));
         }
       })));
     }
-  })), `k2b-chat-composer ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-running", running() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("aria-label", _$escape(props.label ?? messages().messageComposer, true), false), _$escape(_$createComponent(Show, {
+  })), `k2b-chat-composer ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-running", running() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-variant", conversation() ? "conversation" : _$escape(undefined, true), false), _$ssrAttribute("aria-label", _$escape(props.label ?? messages().messageComposer, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return showHint();
+    },
+    get children() {
+      return _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
+        get when() {
+          return dictationStatus();
+        },
+        get fallback() {
+          return _$ssr(_tmpl$25, _$escape(hint()));
+        },
+        children: status => [_$ssr(_tmpl$26, _$ssrAttribute("data-state", _$escape(dictation() ?? undefined, true), false), _$ssrAttribute("class", _$escape(status().icon, true), false), _$escape(status().text)), _$createComponent(Show, {
+          get when() {
+            return _$memo(() => dictation() === "refined")() ? props.microphone?.onRestoreOriginal : undefined;
+          },
+          children: restore => _$ssr(_tmpl$27, _$ssrAttribute("disabled", microphoneDisabled(), true), _$escape(messages().restoreOriginal))
+        })]
+      })));
+    }
+  })), _$escape(_$createComponent(Show, {
     get when() {
       return attachments().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$7, _$ssrAttribute("aria-label", _$escape(messages().attachments, true), false), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$18, _$ssrAttribute("aria-label", _$escape(messages().attachments, true), false), _$escape(_$createComponent(For, {
         get each() {
           return attachments();
         },
-        children: attachment => _$ssr(_tmpl$11, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
+        children: attachment => _$ssr(_tmpl$29, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
           get when() {
             return attachment.href;
           },
           get fallback() {
-            return _$ssr(_tmpl$13, _$escape(_$createComponent(Show, {
+            return _$ssr(_tmpl$31, _$escape(_$createComponent(Show, {
               get when() {
                 return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
               },
               get fallback() {
-                return _$ssr(_tmpl$14, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
+                return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
               },
               get children() {
-                return _$ssr(_tmpl$12, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+                return _$ssr(_tmpl$30, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
               }
             })), _$escape(renderAttachmentCopy(attachment)));
           },
-          children: href => _$ssr(_tmpl$15, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(messages().openInNewTab({
+          children: href => _$ssr(_tmpl$32, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(messages().openInNewTab({
             name: attachment.name
           }), true), false), _$escape(_$createComponent(Show, {
             get when() {
               return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
             },
             get fallback() {
-              return _$ssr(_tmpl$14, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
+              return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
             },
             get children() {
-              return _$ssr(_tmpl$12, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+              return _$ssr(_tmpl$30, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
             }
           })), _$escape(renderAttachmentCopy(attachment)))
         })), _$escape(_$createComponent(Show, {
           get when() {
             return attachment.action;
           },
-          children: action => _$ssr(_tmpl$16, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
+          children: action => _$ssr(_tmpl$33, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
             get when() {
               return action().icon;
             },
-            children: icon => _$ssr(_tmpl$14, _$ssrAttribute("class", _$escape(icon(), true), false))
+            children: icon => _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(icon(), true), false))
           })), _$escape(action().label))
         })), _$escape(_$createComponent(Show, {
           get when() {
             return props.onAttachmentsChange;
           },
           get children() {
-            return _$ssr(_tmpl$10, _$ssrAttribute("aria-label", _$escape(messages().removeNamed({
+            return _$ssr(_tmpl$28, _$ssrAttribute("aria-label", _$escape(messages().removeNamed({
               name: attachment.name
             }), true), false), _$ssrAttribute("disabled", blocked(), true));
           }
         })))
       })));
     }
-  })), _$ssrAttribute("aria-label", _$escape(messages().messageInput, true), false), _$escape(_$createComponent(Show, {
-    get when() {
-      return mentions().length > 0;
-    },
-    get children() {
-      return _$ssr(_tmpl$8, _$escape(_$createComponent(For, {
-        get each() {
-          return chatMentionSegments(props.value, mentions());
-        },
-        children: part => _$ssr(_tmpl$17, Boolean(part.mention) ? "k2b-chat-composer__mention" : "", _$escape(part.text))
-      })));
-    }
-  })), mentions().length > 0 ? "k2b-chat-composer__textarea--highlighted" : "", _$ssrAttribute("value", _$escape(props.value, true), false), _$ssrAttribute("disabled", blocked(), true) + _$ssrAttribute("placeholder", _$escape(props.placeholder ?? (running() ? messages().addGuidance : messages().writeMessage), true), false) + _$ssrAttribute("aria-label", _$escape(props.inputLabel ?? messages().message, true), false) + _$ssrAttribute("role", commandsOpen() ? "combobox" : _$escape(undefined, true), false) + _$ssrAttribute("aria-autocomplete", commandsOpen() ? "list" : _$escape(undefined, true), false) + _$ssrAttribute("aria-controls", commandsOpen() ? _$escape(commandListId, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-expanded", commandsOpen() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-activedescendant", selectedCommand() ? `${_$escape(commandListId, true)}-${_$escape(selectedCommandIndex(), true)}` : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
-    get when() {
-      return props.error;
-    },
-    get children() {
-      return _$ssr(_tmpl$9, _$escape(props.error));
-    }
   })), _$escape(_$createComponent(Show, {
     get when() {
-      return props.footerContent;
+      return conversation();
     },
     get fallback() {
-      return [_$ssr(_tmpl$20, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
+      return [field(), _$createComponent(Show, {
         get when() {
-          return hasAddMenu();
+          return props.error;
         },
         get children() {
-          return _$createComponent(Dropdown.Root, {
-            position: "top-right",
-            get label() {
-              return messages().addToChat;
-            },
-            get items() {
-              return menuItems();
+          return _$ssr(_tmpl$19, _$escape(props.error));
+        }
+      }), formatRow(), _$ssr(_tmpl$34, _$escape(_$createComponent(Show, {
+        get when() {
+          return props.footerContent;
+        },
+        get fallback() {
+          return [_$ssr(_tmpl$35, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
+            get when() {
+              return hasAddMenu();
             },
-            get disabled() {
-              return blocked();
+            get children() {
+              return addMenu("ti ti-plus");
+            }
+          })), _$escape(fileInput()), _$escape(formatToggle()), _$escape(emojiButton()), _$escape(_$createComponent(Show, {
+            get when() {
+              return (props.models?.length ?? 0) > 0;
             },
             get children() {
-              return _$createComponent(Dropdown.Trigger, {
-                appearance: "plain",
-                "class": "k2b-chat-composer__icon-action",
-                get label() {
-                  return messages().addToChat;
+              return _$createComponent(SelectChip, {
+                get ["aria-label"]() {
+                  return messages().chooseModel;
+                },
+                position: "top-right",
+                "class": "k2b-chat-composer__model",
+                menuWidth: "15rem",
+                get placeholder() {
+                  return messages().model;
                 },
-                get tooltip() {
-                  return messages().addToChat;
+                value: () => props.selectedModelId ?? "",
+                get options() {
+                  return (props.models ?? []).map(model => ({
+                    value: model.id,
+                    label: model.label,
+                    description: model.description,
+                    icon: model.icon,
+                    image: model.image
+                  }));
                 },
-                get children() {
-                  return _$ssr(_tmpl$18);
+                get disabled() {
+                  return blocked() || running() || !props.onModelChange;
+                },
+                onValueChange: modelId => {
+                  props.onModelChange?.(modelId);
+                  queueMicrotask(focus);
                 }
               });
             }
-          });
-        }
-      })), _$escape(_$createComponent(Show, {
-        get when() {
-          return props.fileSelection;
-        },
-        get children() {
-          return _$ssr(_tmpl$19, _$ssrAttribute("accept", _$escape(props.fileSelection?.accept, true), false), _$ssrAttribute("multiple", props.fileSelection?.multiple ?? true, true));
-        }
-      })), _$escape(_$createComponent(Show, {
-        get when() {
-          return (props.models?.length ?? 0) > 0;
-        },
-        get children() {
-          return _$createComponent(SelectChip, {
-            get ["aria-label"]() {
-              return messages().chooseModel;
-            },
-            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
-              }));
+          })), _$escape(props.modelDetails)), _$ssr(_tmpl$36, _$escape(_$createComponent(For, {
+            get each() {
+              return props.contextActions;
             },
-            get disabled() {
-              return blocked() || running() || !props.onModelChange;
+            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() {
+                return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(action.icon ?? "ti ti-dots", true), false));
+              }
+            })
+          })), _$escape(_$createComponent(Show, {
+            get when() {
+              return _$memo(() => !!hasContextUsage())() ? props.contextUsage ?? {} : undefined;
             },
-            onValueChange: modelId => {
-              props.onModelChange?.(modelId);
-              queueMicrotask(focus);
-            }
-          });
-        }
-      })), _$escape(props.modelDetails)), _$ssr(_tmpl$21, _$escape(_$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() {
-            return _$ssr(_tmpl$14, _$ssrAttribute("class", _$escape(action.icon ?? "ti ti-dots", true), false));
-          }
-        })
-      })), _$escape(_$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;
+              }
+            }))
+          })), _$escape(props.submitTools), _$escape(microphoneControl()), _$escape(sendControl()))];
         },
-        children: usage => _$createComponent(ContextUsage, _$mergeProps(usage, {
-          get action() {
-            return props.contextPopupAction;
-          },
-          get onActionError() {
-            return props.onError;
-          }
-        }))
-      })), _$escape(props.submitTools), _$escape(_$createComponent(Show, {
+        children: content => content()
+      })))];
+    },
+    get children() {
+      return [_$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() {
-              return _$ssr(_tmpl$14, _$ssrAttribute("class", submitting() ? "ti ti-loader-2 k2b-spin" : "ti ti-arrow-up", false));
-            }
-          });
+          return props.error;
         },
         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() {
-              return _$ssr(_tmpl$14, _$ssrAttribute("class", stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop", false));
-            }
-          });
+          return _$ssr(_tmpl$19, _$escape(props.error));
         }
-      })))];
-    },
-    children: content => content()
+      }), formatRow(), _$ssr(_tmpl$20, _$escape(attachControl()), _$escape(fileInput()), _$escape(field()), _$escape(formatToggle()), _$escape(emojiButton()), _$escape(microphoneControl()), _$escape(sendControl()))];
+    }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return props.fileSelection;