@k2b/ui 0.47.0 → 0.48.0

package/dist/ssr/chat/ChatComposer.js

@@ -51,18 +51,19 @@ var _tmpl$ = ["<span><strong", ">", "</strong></span>"],
   _tmpl$42 = ["<div class=\"k2b-chat-composer__reply\">", "<button type=\"button\" class=\"k2b-chat-composer__icon-action k2b-chat-composer__reply-cancel\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button></div>"],
   _tmpl$43 = ["<div class=\"k2b-message-row__quote\">", "</div>"],
   _tmpl$44 = ["<button type=\"button\" class=\"k2b-message-row__quote\">", "</button>"],
-  _tmpl$45 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
-  _tmpl$46 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
-  _tmpl$47 = ["<img", ">"],
-  _tmpl$48 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
-  _tmpl$49 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
-  _tmpl$50 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
-  _tmpl$51 = ["<footer class=\"k2b-chat-composer__footer\">", "</footer>"],
-  _tmpl$52 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "", "", "</div>"],
-  _tmpl$53 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "", "", "</div>"],
-  _tmpl$54 = ["<span>", "</span>"],
-  _tmpl$55 = ["<div class=\"k2b-chat-composer__status-line\"", "><i aria-hidden=\"true\"", "></i><span>", "</span></div>"],
-  _tmpl$56 = ["<span class=\"k2b-sr-only\">", "</span>"];
+  _tmpl$45 = ["<span class=\"k2b-chat-composer__attachment-action k2b-chat-composer__attachment-progress\">", "", "</span>"],
+  _tmpl$46 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$47 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "", "</div>", "</div>"],
+  _tmpl$48 = ["<img", ">"],
+  _tmpl$49 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
+  _tmpl$50 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
+  _tmpl$51 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", "", ">", "", "</button>"],
+  _tmpl$52 = ["<footer class=\"k2b-chat-composer__footer\">", "</footer>"],
+  _tmpl$53 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "", "", "</div>"],
+  _tmpl$54 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "", "", "</div>"],
+  _tmpl$55 = ["<span>", "</span>"],
+  _tmpl$56 = ["<div class=\"k2b-chat-composer__status-line\"", "><i aria-hidden=\"true\"", "></i><span>", "</span></div>"],
+  _tmpl$57 = ["<span class=\"k2b-sr-only\">", "</span>"];
 import { batch, children, createEffect, createMemo, createSignal, createUniqueId, For, Index, on, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Dropdown } from "../actions/Dropdown";
 import { dialogHistorySettled, holdDialogHistory } from "../feedback/dialog-core";
@@ -80,6 +81,7 @@ import { SelectChip } from "../inputs/SelectChip";
 import { useSelectMessages } from "../inputs/select-messages";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
+import { ProgressRing } from "../surfaces/ProgressRing";
 import { ChatContextUsage as ContextUsage } from "./ChatPrimitives";
 import { chatCommandKey, conversationEnterAction, executeChatAction, nextChatCommandIndex, reportChatFailure, runChatSubmission } from "./chat-behavior";
 import { useChatMessages } from "./chat-messages";
@@ -240,7 +242,10 @@ export function ChatComposer(props) {
   const [microphoneMenuOpen, setMicrophoneMenuOpen] = createSignal(false);
   const dictation = () => props.microphone?.dictation ?? null;
   const showHint = () => conversation() || dictation() !== null || hasContent(hint.toArray());
-  const state = () => props.state ?? "idle";
+
+  // Handlers such as sending read these outside any owner. A host's conditional prop is a getter that creates a
+  // computation on each read, which would never be disposed there; memos read it inside the composer's owner.
+  const state = createMemo(() => props.state ?? "idle");
   const running = () => state() === "running";
   const stopping = () => state() === "stopping";
   const runningSubmitIntent = () => props.runningSubmitIntent ?? "steer";
@@ -927,7 +932,7 @@ export function ChatComposer(props) {
     selectedCommandKey();
     setAnnouncement(undefined);
   });
-  const busy = () => Boolean(props.disabled || stopping() || state() === "submitting" || executing() || addingFiles());
+  const busy = createMemo(() => 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();
@@ -941,7 +946,7 @@ export function ChatComposer(props) {
   }));
   const hasDraft = () => Boolean(props.value.trim() || !running() && attachments().length > 0);
   /** The draft may go out now, apart from a submission that is already on its way. */
-  const submittable = () => !busy() && !props.submitDisabled && hasDraft() && !(props.dictation && liveDictation.active()) && !(running() && runningSubmitIntent() === "steer" && mentions().length);
+  const submittable = createMemo(() => !busy() && !props.submitDisabled && hasDraft() && !(props.dictation && liveDictation.active()) && !(running() && runningSubmitIntent() === "steer" && mentions().length));
   const canSubmit = () => !submitting() && submittable();
   const canSelectFiles = () => Boolean(props.fileSelection && !props.fileSelection.disabled && !running() && !blocked());
   const hasAddMenu = () => Boolean(props.fileSelection || props.menuActions?.length);
@@ -2266,7 +2271,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 ?? chatMessages().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("data-invalid", props.error ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-disabled", props.disabled ? "true" : _$escape(undefined, true), false), _$ssrAttribute("aria-label", _$escape(props.label ?? chatMessages().messageComposer, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return showHint();
     },
@@ -2308,12 +2313,12 @@ export function ChatComposer(props) {
         get each() {
           return attachments();
         },
-        children: attachment => _$ssr(_tmpl$46, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
+        children: attachment => _$ssr(_tmpl$47, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) || attachment.progress !== undefined ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
           get when() {
             return attachment.href;
           },
           get fallback() {
-            return _$ssr(_tmpl$48, _$escape(_$createComponent(Show, {
+            return _$ssr(_tmpl$49, _$escape(_$createComponent(Show, {
               get when() {
                 return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
               },
@@ -2321,11 +2326,11 @@ export function ChatComposer(props) {
                 return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
               },
               get children() {
-                return _$ssr(_tmpl$47, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+                return _$ssr(_tmpl$48, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
               }
             })), _$escape(renderAttachmentCopy(attachment)));
           },
-          children: href => _$ssr(_tmpl$49, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().openInNewTab({
+          children: href => _$ssr(_tmpl$50, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(chatMessages().openInNewTab({
             name: attachment.name
           }), true), false), _$escape(_$createComponent(Show, {
             get when() {
@@ -2335,14 +2340,32 @@ export function ChatComposer(props) {
               return _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
             },
             get children() {
-              return _$ssr(_tmpl$47, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+              return _$ssr(_tmpl$48, _$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;
+            return attachment.progress !== undefined;
+          },
+          get children() {
+            return _$ssr(_tmpl$45, _$escape(_$createComponent(ProgressRing, {
+              get value() {
+                return attachment.progress ?? 0;
+              },
+              get label() {
+                return chatMessages().uploading({
+                  name: attachment.name
+                });
+              }
+            })), _$escape(new Intl.NumberFormat(locale(), {
+              style: "percent"
+            }).format(Math.round(attachment.progress ?? 0) / 100)));
+          }
+        })), _$escape(_$createComponent(Show, {
+          get when() {
+            return _$memo(() => attachment.progress === undefined)() && attachment.action;
           },
-          children: action => _$ssr(_tmpl$50, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
+          children: action => _$ssr(_tmpl$51, _$ssrAttribute("data-tone", action().variant === "danger" ? "danger" : _$escape(undefined, true), false) + _$ssrAttribute("data-waiting", action().disabled ? "" : _$escape(undefined, true), false), _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
             get when() {
               return action().icon;
             },
@@ -2353,7 +2376,7 @@ export function ChatComposer(props) {
             return props.onAttachmentsChange;
           },
           get children() {
-            return _$ssr(_tmpl$45, _$ssrAttribute("aria-label", _$escape(selectMessages().removeNamed({
+            return _$ssr(_tmpl$46, _$ssrAttribute("aria-label", _$escape(selectMessages().removeNamed({
               name: attachment.name
             }), true), false), _$ssrAttribute("disabled", blocked(), true));
           }
@@ -2372,12 +2395,12 @@ export function ChatComposer(props) {
         get children() {
           return _$ssr(_tmpl$28, _$escape(props.error));
         }
-      }), formatRow(), _$ssr(_tmpl$51, _$escape(_$createComponent(Show, {
+      }), formatRow(), _$ssr(_tmpl$52, _$escape(_$createComponent(Show, {
         get when() {
           return dictating() || footer();
         },
         get fallback() {
-          return [_$ssr(_tmpl$52, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
+          return [_$ssr(_tmpl$53, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
             get when() {
               return addOpensCommands();
             },
@@ -2440,7 +2463,7 @@ export function ChatComposer(props) {
                 }
               });
             }
-          })), _$escape(props.modelDetails)), _$ssr(_tmpl$53, _$escape(_$createComponent(For, {
+          })), _$escape(props.modelDetails)), _$ssr(_tmpl$54, _$escape(_$createComponent(For, {
             get each() {
               return props.contextActions;
             },
@@ -2566,18 +2589,18 @@ export function ChatComposer(props) {
       return suggestionAnnouncement();
     },
     keyed: true,
-    children: announced => _$ssr(_tmpl$54, _$escape(announced.text))
+    children: announced => _$ssr(_tmpl$55, _$escape(announced.text))
   })), _$escape(_$createComponent(Show, {
     get when() {
       return _$memo(() => !!!suggestionsOpen())() && commandStatus();
     },
-    children: status => _$ssr(_tmpl$55, _$ssrAttribute("data-tone", _$escape(status().tone, true), false), _$ssrAttribute("class", status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle", false), _$escape(status().text))
+    children: status => _$ssr(_tmpl$56, _$ssrAttribute("data-tone", _$escape(status().tone, true), false), _$ssrAttribute("class", status().tone === "busy" ? "ti ti-loader-2 k2b-spin" : status().tone === "done" ? "ti ti-check" : "ti ti-alert-circle", false), _$escape(status().text))
   })), _$escape(_$createComponent(Show, {
     get when() {
       return _$memo(() => !!suggestionsOpen())() && announcement();
     },
     keyed: true,
-    children: announced => _$ssr(_tmpl$56, _$escape(announced.text))
+    children: announced => _$ssr(_tmpl$57, _$escape(announced.text))
   })));
 }
 //# sourceMappingURL=ChatComposer.js.map