@k2b/ui 0.21.0 → 0.22.0

package/dist/ssr/chat/ChatComposer.js

@@ -51,11 +51,14 @@ import { completedEmojiShortcode, emojiInTone, emojiName, emojiShortcodeQuery, l
 import { FileDropTarget } from "../inputs/FileDropTarget";
 import { toggleBulletList, toggleInlineMarker } from "../inputs/markdown/actions";
 import { openCodeFence } from "../inputs/markdown/code-zone";
+import { useMarkdownToolbarMessages } from "../inputs/markdown/toolbar-messages";
 import { SelectChip } from "../inputs/SelectChip";
+import { useSelectMessages } from "../inputs/select-messages";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { ChatContextUsage as ContextUsage } from "./ChatPrimitives";
 import { conversationEnterAction, executeChatAction, nextChatCommandIndex, reportChatFailure, runChatSubmission } from "./chat-behavior";
+import { useChatMessages } from "./chat-messages";
 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. */
@@ -99,6 +102,9 @@ export function ChatComposer(props) {
   const hasAccessory = () => hasContent(accessory.toArray());
   const hint = children(() => props.hint);
   const messages = useUiMessages();
+  const markdownToolbarMessages = useMarkdownToolbarMessages();
+  const chatMessages = useChatMessages();
+  const selectMessages = useSelectMessages();
   const commandListId = `k2b-chat-commands-${createUniqueId().replace(/[^A-Za-z0-9_-]/g, "-")}`;
   const formatGroupId = `${commandListId}-format`;
   const [selectedCommandIndex, setSelectedCommandIndex] = createSignal(0);
@@ -271,7 +277,7 @@ export function ChatComposer(props) {
     if (props.fileSelection) {
       items.push({
         icon: addingFiles() ? "ti ti-loader-2 k2b-spin" : "ti ti-paperclip",
-        label: props.fileSelection.label ?? messages().attachFiles,
+        label: props.fileSelection.label ?? chatMessages().attachFiles,
         disabled: !canSelectFiles(),
         action: () => chooseFiles()
       });
@@ -592,7 +598,7 @@ export function ChatComposer(props) {
       const dictate = microphone.onDictate;
       items.push({
         icon: "ti ti-microphone",
-        label: messages().dictate,
+        label: chatMessages().dictate,
         action: () => reportChatFailure(dictate, props.onError)
       });
     }
@@ -600,7 +606,7 @@ export function ChatComposer(props) {
       const record = microphone.onVoiceMessage;
       items.push({
         icon: "ti ti-player-record",
-        label: messages().recordVoiceMessage,
+        label: chatMessages().recordVoiceMessage,
         action: () => reportChatFailure(record, props.onError)
       });
     }
@@ -611,27 +617,27 @@ export function ChatComposer(props) {
       case "listening":
         return {
           icon: "ti ti-microphone",
-          text: messages().dictationListening
+          text: chatMessages().dictationListening
         };
       case "refining":
         return {
           icon: "ti ti-loader-2 k2b-spin",
-          text: messages().dictationRefining
+          text: chatMessages().dictationRefining
         };
       case "refined":
         return {
           icon: "ti ti-sparkles",
-          text: messages().dictationRefined
+          text: chatMessages().dictationRefined
         };
       case "unrefined":
         return {
           icon: "ti ti-microphone",
-          text: messages().dictationUnrefined
+          text: chatMessages().dictationUnrefined
         };
       case "interrupted":
         return {
           icon: "ti ti-alert-triangle",
-          text: messages().dictationInterrupted
+          text: chatMessages().dictationInterrupted
         };
       default:
         return null;
@@ -648,7 +654,7 @@ export function ChatComposer(props) {
   const addMenu = (icon, extraClass = "") => _$createComponent(Dropdown.Root, {
     position: "top-right",
     get label() {
-      return messages().addToChat;
+      return chatMessages().addToChat;
     },
     get items() {
       return menuItems();
@@ -661,10 +667,10 @@ export function ChatComposer(props) {
         appearance: "plain",
         "class": `k2b-chat-composer__icon-action${extraClass}`,
         get label() {
-          return messages().addToChat;
+          return chatMessages().addToChat;
         },
         get tooltip() {
-          return messages().addToChat;
+          return chatMessages().addToChat;
         },
         get children() {
           return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(icon, true), false));
@@ -687,10 +693,10 @@ export function ChatComposer(props) {
           type: "button",
           "class": "k2b-chat-composer__icon-action k2b-chat-composer__attach",
           get ["aria-label"]() {
-            return selection().label ?? messages().attachFiles;
+            return selection().label ?? chatMessages().attachFiles;
           },
           get content() {
-            return selection().label ?? messages().attachFiles;
+            return selection().label ?? chatMessages().attachFiles;
           },
           get disabled() {
             return !canSelectFiles();
@@ -715,7 +721,7 @@ export function ChatComposer(props) {
         type: "button",
         "class": "k2b-chat-composer__icon-action k2b-chat-composer__format-toggle",
         get ["aria-label"]() {
-          return messages().composerFormatting;
+          return chatMessages().composerFormatting;
         },
         get ["aria-pressed"]() {
           return formattingOpen();
@@ -724,7 +730,7 @@ export function ChatComposer(props) {
           return formattingOpen() ? formatGroupId : undefined;
         },
         get content() {
-          return messages().composerFormatting;
+          return chatMessages().composerFormatting;
         },
         onMouseDown: keepFieldFocus,
         onClick: () => setFormattingOpen(open => !open),
@@ -741,16 +747,16 @@ export function ChatComposer(props) {
       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, {
+      return _$ssr(_tmpl$5, _$ssrAttribute("id", _$escape(formatGroupId, true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().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());
+            return tool.label(markdownToolbarMessages());
           },
           get content() {
-            return tool.label(messages());
+            return tool.label(markdownToolbarMessages());
           },
           get disabled() {
             return editBlocked();
@@ -774,10 +780,10 @@ export function ChatComposer(props) {
       type: "button",
       "class": "k2b-chat-composer__icon-action k2b-chat-composer__emoji",
       get ["aria-label"]() {
-        return messages().insertEmoji;
+        return chatMessages().insertEmoji;
       },
       get content() {
-        return messages().insertEmoji;
+        return chatMessages().insertEmoji;
       },
       get disabled() {
         return editBlocked();
@@ -818,10 +824,10 @@ export function ChatComposer(props) {
         return _$memo(() => !!microphone().onDictate)() ? undefined : microphoneMenuOpen();
       },
       get ["aria-label"]() {
-        return _$memo(() => !!microphone().onDictate)() ? messages().dictate : messages().recordVoiceMessage;
+        return _$memo(() => !!microphone().onDictate)() ? chatMessages().dictate : chatMessages().recordVoiceMessage;
       },
       get content() {
-        return _$memo(() => dictation() === "listening")() ? messages().stopDictation : _$memo(() => !!microphone().onDictate)() ? _$memo(() => !!microphone().onVoiceMessage)() ? messages().dictateOrHold : messages().dictate : messages().recordVoiceMessage;
+        return _$memo(() => dictation() === "listening")() ? chatMessages().stopDictation : _$memo(() => !!microphone().onDictate)() ? _$memo(() => !!microphone().onVoiceMessage)() ? chatMessages().dictateOrHold : chatMessages().dictate : chatMessages().recordVoiceMessage;
       },
       onMouseDown: keepFieldFocus,
       onContextMenu: event => event.preventDefault(),
@@ -869,7 +875,7 @@ export function ChatComposer(props) {
         return _$createComponent(Dropdown.Root, {
           position: "top-left",
           get label() {
-            return messages().microphoneOptions;
+            return chatMessages().microphoneOptions;
           },
           get items() {
             return microphoneItems();
@@ -886,10 +892,10 @@ export function ChatComposer(props) {
               appearance: "plain",
               "class": "k2b-chat-composer__icon-action k2b-chat-composer__microphone-menu",
               get label() {
-                return messages().microphoneOptions;
+                return chatMessages().microphoneOptions;
               },
               get tooltip() {
-                return messages().microphoneOptions;
+                return chatMessages().microphoneOptions;
               },
               get children() {
                 return _$ssr(_tmpl$7);
@@ -915,10 +921,10 @@ export function ChatComposer(props) {
           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;
+          return _$memo(() => !!submitting())() ? _$memo(() => !!running())() ? _$memo(() => runningSubmitIntent() === "queue")() ? chatMessages().queueing : chatMessages().steering : chatMessages().sending : _$memo(() => !!running())() ? _$memo(() => runningSubmitIntent() === "queue")() ? chatMessages().queueMessage : chatMessages().steerResponse : chatMessages().sendMessage;
         },
         get content() {
-          return _$memo(() => !!running())() ? _$memo(() => runningSubmitIntent() === "queue")() ? messages().queueMessage : messages().steerResponse : messages().sendMessage;
+          return _$memo(() => !!running())() ? _$memo(() => runningSubmitIntent() === "queue")() ? chatMessages().queueMessage : chatMessages().steerResponse : chatMessages().sendMessage;
         },
         onClick: () => void submit(),
         get children() {
@@ -934,10 +940,10 @@ export function ChatComposer(props) {
           return stopping();
         },
         get ["aria-label"]() {
-          return _$memo(() => !!stopping())() ? messages().stopping : messages().stopResponse;
+          return _$memo(() => !!stopping())() ? chatMessages().stopping : chatMessages().stopResponse;
         },
         get content() {
-          return messages().stopResponse;
+          return chatMessages().stopResponse;
         },
         onClick: () => reportChatFailure(() => props.onStop?.(), props.onError),
         get children() {
@@ -946,7 +952,7 @@ export function ChatComposer(props) {
       });
     }
   });
-  const field = () => _$ssr(_tmpl$1, _$ssrAttribute("aria-label", _$escape(messages().messageInput, true), false), _$escape(_$createComponent(Show, {
+  const field = () => _$ssr(_tmpl$1, _$ssrAttribute("aria-label", _$escape(chatMessages().messageInput, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return mentions().length > 0;
     },
@@ -958,7 +964,7 @@ export function ChatComposer(props) {
         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, {
+  })), 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() ? chatMessages().addGuidance : conversation() ? chatMessages().writeConversationMessage : chatMessages().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();
     },
@@ -976,7 +982,7 @@ export function ChatComposer(props) {
           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, {
+          return _$ssr(_tmpl$11, _$ssrAttribute("id", _$escape(commandListId, true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().emojiSuggestions, true), false), _$escape(_$createComponent(For, {
             get each() {
               return emojiMatches();
             },
@@ -993,7 +999,7 @@ export function ChatComposer(props) {
           return commandsOpen();
         },
         get children() {
-          return _$ssr(_tmpl$15, _$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(chatMessages().commands, true), false), _$escape(_$createComponent(For, {
             get each() {
               return commandMatches();
             },
@@ -1023,7 +1029,7 @@ export function ChatComposer(props) {
         }
       })));
     }
-  })), `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, {
+  })), `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 ?? chatMessages().messageComposer, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return showHint();
     },
@@ -1039,7 +1045,7 @@ export function ChatComposer(props) {
           get when() {
             return _$memo(() => dictation() === "refined")() ? props.microphone?.onRestoreOriginal : undefined;
           },
-          children: restore => _$ssr(_tmpl$27, _$ssrAttribute("disabled", microphoneDisabled(), true), _$escape(messages().restoreOriginal))
+          children: restore => _$ssr(_tmpl$27, _$ssrAttribute("disabled", microphoneDisabled(), true), _$escape(chatMessages().restoreOriginal))
         })]
       })));
     }
@@ -1048,7 +1054,7 @@ export function ChatComposer(props) {
       return attachments().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$18, _$ssrAttribute("aria-label", _$escape(messages().attachments, true), false), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$18, _$ssrAttribute("aria-label", _$escape(chatMessages().attachments, true), false), _$escape(_$createComponent(For, {
         get each() {
           return attachments();
         },
@@ -1069,7 +1075,7 @@ export function ChatComposer(props) {
               }
             })), _$escape(renderAttachmentCopy(attachment)));
           },
-          children: href => _$ssr(_tmpl$32, _$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(chatMessages().openInNewTab({
             name: attachment.name
           }), true), false), _$escape(_$createComponent(Show, {
             get when() {
@@ -1097,7 +1103,7 @@ export function ChatComposer(props) {
             return props.onAttachmentsChange;
           },
           get children() {
-            return _$ssr(_tmpl$28, _$ssrAttribute("aria-label", _$escape(messages().removeNamed({
+            return _$ssr(_tmpl$28, _$ssrAttribute("aria-label", _$escape(selectMessages().removeNamed({
               name: attachment.name
             }), true), false), _$ssrAttribute("disabled", blocked(), true));
           }
@@ -1135,13 +1141,13 @@ export function ChatComposer(props) {
             get children() {
               return _$createComponent(SelectChip, {
                 get ["aria-label"]() {
-                  return messages().chooseModel;
+                  return chatMessages().chooseModel;
                 },
                 position: "top-right",
                 "class": "k2b-chat-composer__model",
                 menuWidth: "15rem",
                 get placeholder() {
-                  return messages().model;
+                  return chatMessages().model;
                 },
                 value: () => props.selectedModelId ?? "",
                 get options() {
@@ -1222,7 +1228,7 @@ export function ChatComposer(props) {
     },
     children: selection => _$createComponent(FileDropTarget, {
       get label() {
-        return messages().dropFilesToAttach;
+        return chatMessages().dropFilesToAttach;
       },
       get accept() {
         return selection().accept;