@open-mercato/ui 0.6.1-develop.3227.1.2b7b8ab258 → 0.6.1-develop.3256.1.fe3dec2464

package/dist/ai/AiChat.js

@@ -26,7 +26,11 @@ import { Button } from "../primitives/button.js";
 import { IconButton } from "../primitives/icon-button.js";
 import { Label } from "../primitives/label.js";
 import { Textarea } from "../primitives/textarea.js";
+import { apiCall } from "../backend/utils/apiCall.js";
 import { parseAiContentSegments } from "./AiMessageContent.js";
+import {
+  ModelPicker
+} from "./ModelPicker.js";
 import { RecordCard } from "./records/RecordCard.js";
 import {
   defaultAiUiPartRegistry,
@@ -38,6 +42,73 @@ import {
 import { useAiChatUpload } from "./useAiChatUpload.js";
 import { useAiShortcuts } from "./useAiShortcuts.js";
 const PREVIEW_DATA_URL_MAX_BYTES = 2 * 1024 * 1024;
+const COMPACT_FOOTER_MAX_WIDTH = 640;
+const MODEL_PICKER_STORAGE_PREFIX = "om-ai-model-picker:";
+function readModelPickerValue(agentId) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(`${MODEL_PICKER_STORAGE_PREFIX}${agentId}`);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === "object" && typeof parsed.providerId === "string" && typeof parsed.modelId === "string") {
+      const value = parsed;
+      return { providerId: value.providerId, modelId: value.modelId };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function writeModelPickerValue(agentId, value) {
+  if (typeof window === "undefined") return;
+  try {
+    const key = `${MODEL_PICKER_STORAGE_PREFIX}${agentId}`;
+    if (value === null) {
+      window.localStorage.removeItem(key);
+    } else {
+      window.localStorage.setItem(key, JSON.stringify({ providerId: value.providerId, modelId: value.modelId }));
+    }
+  } catch {
+  }
+}
+function useAgentModels(agent) {
+  const [providers, setProviders] = React.useState([]);
+  const [allowRuntimeModelOverride, setAllowRuntimeModelOverride] = React.useState(false);
+  const [defaultLabel, setDefaultLabel] = React.useState(null);
+  const [loaded, setLoaded] = React.useState(false);
+  React.useEffect(() => {
+    const modelsUrl = `/api/ai_assistant/ai/agents/${encodeURIComponent(agent)}/models`;
+    setLoaded(false);
+    setDefaultLabel(null);
+    void apiCall(modelsUrl).then((result) => {
+      if (!result.ok || !result.result) {
+        setLoaded(true);
+        return;
+      }
+      setAllowRuntimeModelOverride(result.result.allowRuntimeModelOverride);
+      setProviders(result.result.providers);
+      setDefaultLabel(
+        result.result.defaultProviderName && result.result.defaultModelName ? `${result.result.defaultProviderName} / ${result.result.defaultModelName}` : result.result.defaultProviderId && result.result.defaultModelId ? `${result.result.defaultProviderId} / ${result.result.defaultModelId}` : null
+      );
+      setLoaded(true);
+    });
+  }, [agent]);
+  return { providers, allowRuntimeModelOverride, defaultLabel, loaded };
+}
+function firstAvailableModelPickerValue(providers) {
+  for (const provider of providers) {
+    const model = provider.models[0];
+    if (model) {
+      return { providerId: provider.id, modelId: model.id };
+    }
+  }
+  return null;
+}
+function isModelPickerValueAvailable(value, providers) {
+  return providers.some(
+    (provider) => provider.id === value.providerId && provider.models.some((model) => model.id === value.modelId)
+  );
+}
 async function readFileAsDataUrl(file) {
   if (!file.type.startsWith("image/")) return void 0;
   if (file.size > PREVIEW_DATA_URL_MAX_BYTES) return void 0;
@@ -493,7 +564,8 @@ function AiChat({
   suggestions,
   contextItems,
   welcomeTitle,
-  welcomeDescription
+  welcomeDescription,
+  defaultCompactFooter = false
 }) {
   const t = useT();
   const textareaRef = React.useRef(null);
@@ -503,6 +575,23 @@ function AiChat({
   const [pendingFiles, setPendingFiles] = React.useState([]);
   const upload = useAiChatUpload();
   const isUploading = upload.busy;
+  const footerRef = React.useRef(null);
+  const [isCompactFooter, setIsCompactFooter] = React.useState(defaultCompactFooter);
+  React.useEffect(() => {
+    const element = footerRef.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const updateCompactState = (width) => {
+      setIsCompactFooter(width < COMPACT_FOOTER_MAX_WIDTH);
+    };
+    updateCompactState(element.getBoundingClientRect().width);
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      updateCompactState(entry.contentRect.width);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
   const uploadedAttachmentIds = React.useMemo(
     () => pendingFiles.map((entry) => entry.attachmentId).filter((id) => typeof id === "string" && id.length > 0),
     [pendingFiles]
@@ -511,6 +600,60 @@ function AiChat({
     () => [...attachmentIds ?? [], ...uploadedAttachmentIds],
     [attachmentIds, uploadedAttachmentIds]
   );
+  const {
+    providers: modelProviders,
+    allowRuntimeModelOverride,
+    defaultLabel: modelDefaultLabel,
+    loaded: modelProvidersLoaded
+  } = useAgentModels(agent);
+  const [modelPickerValue, setModelPickerValue] = React.useState(
+    () => readModelPickerValue(agent)
+  );
+  const effectiveModelPickerValue = React.useMemo(() => {
+    if (!modelProvidersLoaded || !allowRuntimeModelOverride || modelProviders.length === 0) {
+      return null;
+    }
+    if (modelPickerValue && isModelPickerValueAvailable(modelPickerValue, modelProviders)) {
+      return modelPickerValue;
+    }
+    return firstAvailableModelPickerValue(modelProviders);
+  }, [
+    allowRuntimeModelOverride,
+    modelPickerValue,
+    modelProviders,
+    modelProvidersLoaded
+  ]);
+  React.useEffect(() => {
+    setModelPickerValue(readModelPickerValue(agent));
+  }, [agent]);
+  React.useEffect(() => {
+    if (!modelProvidersLoaded) return;
+    if (!allowRuntimeModelOverride || modelProviders.length === 0) {
+      if (modelPickerValue !== null) {
+        setModelPickerValue(null);
+        writeModelPickerValue(agent, null);
+      }
+      return;
+    }
+    if (modelPickerValue && !isModelPickerValueAvailable(modelPickerValue, modelProviders)) {
+      const fallback = firstAvailableModelPickerValue(modelProviders);
+      setModelPickerValue(fallback);
+      writeModelPickerValue(agent, fallback);
+    }
+  }, [
+    agent,
+    allowRuntimeModelOverride,
+    modelPickerValue,
+    modelProviders,
+    modelProvidersLoaded
+  ]);
+  const handleModelPickerChange = React.useCallback(
+    (value) => {
+      setModelPickerValue(value);
+      writeModelPickerValue(agent, value);
+    },
+    [agent]
+  );
   const chat = useAiChat({
     agent,
     apiPath,
@@ -519,7 +662,9 @@ function AiChat({
     debug,
     initialMessages,
     onError,
-    conversationId
+    conversationId,
+    providerOverride: effectiveModelPickerValue?.providerId ?? null,
+    modelOverride: effectiveModelPickerValue?.modelId ?? null
   });
   const isStreaming = chat.status === "streaming";
   const isSubmitting = chat.status === "submitting";
@@ -727,15 +872,15 @@ function AiChat({
     "section",
     {
       className: cn(
-        "flex h-full min-h-[320px] flex-col gap-3 rounded-lg border border-border bg-background p-3",
+        "flex h-full min-h-[320px] min-w-0 flex-col gap-3 overflow-hidden rounded-lg border border-border bg-background p-3",
         className
       ),
       "aria-label": t("ai_assistant.chat.regionLabel", "AI chat"),
       "data-ai-chat-agent": agent,
       "data-ai-chat-conversation-id": chat.conversationId,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border pb-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-2 text-xs text-muted-foreground", children: contextItems && contextItems.length > 0 ? /* @__PURE__ */ jsx(ContextItemsPill, { items: contextItems }) : /* @__PURE__ */ jsx("span", { className: "font-mono opacity-70", "aria-hidden": true, children: chat.conversationId.slice(0, 8) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2 border-b border-border pb-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2 text-xs text-muted-foreground", children: contextItems && contextItems.length > 0 ? /* @__PURE__ */ jsx(ContextItemsPill, { items: contextItems }) : /* @__PURE__ */ jsx("span", { className: "font-mono opacity-70", "aria-hidden": true, children: chat.conversationId.slice(0, 8) }) }),
           /* @__PURE__ */ jsx(
             IconButton,
             {
@@ -758,7 +903,7 @@ function AiChat({
             role: "log",
             "aria-live": "polite",
             "aria-label": t("ai_assistant.chat.transcriptLabel", "Chat transcript"),
-            className: "flex-1 space-y-2 overflow-y-auto pr-1",
+            className: "min-w-0 flex-1 space-y-2 overflow-y-auto overflow-x-hidden pr-1",
             children: [
               chat.messages.length === 0 ? /* @__PURE__ */ jsx(
                 WelcomeState,
@@ -810,7 +955,7 @@ function AiChat({
         /* @__PURE__ */ jsxs(
           "form",
           {
-            className: "flex flex-col gap-2",
+            className: "flex min-w-0 flex-col gap-2",
             onSubmit: (event) => {
               event.preventDefault();
               handleSubmit();
@@ -862,7 +1007,7 @@ function AiChat({
                   onKeyDown: handleKeyDown,
                   rows: 3,
                   "aria-label": t("ai_assistant.chat.composerLabel", "Message composer"),
-                  className: "resize-none"
+                  className: "min-w-0 resize-none"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -877,56 +1022,79 @@ function AiChat({
                   "data-ai-chat-file-input": ""
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      type: "button",
-                      variant: "ghost",
-                      size: "sm",
-                      onClick: () => fileInputRef.current?.click(),
-                      disabled: isBusy || isUploading,
-                      "aria-label": t("ai_assistant.chat.attachFile", "Attach file"),
-                      children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4", "aria-hidden": true })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: hasUploadingFiles || isUploading ? t(
-                    "ai_assistant.chat.uploadingHint",
-                    "Uploading attachments\u2026 Send is disabled until they finish."
-                  ) : t(
-                    "ai_assistant.chat.shortcutHint",
-                    "Press Enter to send, Shift+Enter for new line."
-                  ) })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  isStreaming ? /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      type: "button",
-                      variant: "outline",
-                      size: "sm",
-                      onClick: () => chat.cancel(),
-                      "aria-label": t("ai_assistant.chat.cancel", "Cancel streaming response"),
-                      children: /* @__PURE__ */ jsx(Square, { className: "size-4", "aria-hidden": true })
-                    }
-                  ) : null,
-                  /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      type: "submit",
-                      size: "sm",
-                      disabled: isBusy || isUploading || hasUploadingFiles || input.trim().length === 0,
-                      "aria-label": hasUploadingFiles || isUploading ? t("ai_assistant.chat.sendWaitingForUpload", "Waiting for upload to finish\u2026") : t("ai_assistant.chat.send", "Send message"),
-                      title: hasUploadingFiles || isUploading ? t("ai_assistant.chat.sendWaitingForUpload", "Waiting for upload to finish\u2026") : void 0,
-                      children: [
-                        /* @__PURE__ */ jsx(Send, { className: "size-4", "aria-hidden": true }),
-                        /* @__PURE__ */ jsx("span", { children: t("ai_assistant.chat.send", "Send message") })
-                      ]
-                    }
-                  )
-                ] })
-              ] })
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: footerRef,
+                  className: "flex min-w-0 items-center justify-between gap-2",
+                  "data-ai-chat-footer": "",
+                  "data-ai-chat-footer-compact": isCompactFooter ? "true" : "false",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          type: "button",
+                          variant: "ghost",
+                          size: "sm",
+                          onClick: () => fileInputRef.current?.click(),
+                          disabled: isBusy || isUploading,
+                          "aria-label": t("ai_assistant.chat.attachFile", "Attach file"),
+                          children: /* @__PURE__ */ jsx(Paperclip, { className: "size-4", "aria-hidden": true })
+                        }
+                      ),
+                      allowRuntimeModelOverride && modelProviders.length > 0 ? /* @__PURE__ */ jsx(
+                        ModelPicker,
+                        {
+                          agentId: agent,
+                          value: effectiveModelPickerValue,
+                          onChange: handleModelPickerChange,
+                          availableProviders: modelProviders,
+                          disabled: isBusy,
+                          compact: isCompactFooter,
+                          defaultLabel: modelDefaultLabel,
+                          className: "shrink-0"
+                        }
+                      ) : null,
+                      /* @__PURE__ */ jsx("p", { className: cn("text-xs text-muted-foreground", isCompactFooter && "hidden"), children: hasUploadingFiles || isUploading ? t(
+                        "ai_assistant.chat.uploadingHint",
+                        "Uploading attachments\u2026 Send is disabled until they finish."
+                      ) : t(
+                        "ai_assistant.chat.shortcutHint",
+                        "Press Enter to send, Shift+Enter for new line."
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+                      isStreaming ? /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          type: "button",
+                          variant: "outline",
+                          size: "sm",
+                          onClick: () => chat.cancel(),
+                          "aria-label": t("ai_assistant.chat.cancel", "Cancel streaming response"),
+                          children: /* @__PURE__ */ jsx(Square, { className: "size-4", "aria-hidden": true })
+                        }
+                      ) : null,
+                      /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          type: "submit",
+                          size: "sm",
+                          disabled: isBusy || isUploading || hasUploadingFiles || input.trim().length === 0,
+                          "aria-label": hasUploadingFiles || isUploading ? t("ai_assistant.chat.sendWaitingForUpload", "Waiting for upload to finish\u2026") : t("ai_assistant.chat.send", "Send message"),
+                          title: hasUploadingFiles || isUploading ? t("ai_assistant.chat.sendWaitingForUpload", "Waiting for upload to finish\u2026") : void 0,
+                          className: cn(isCompactFooter && "w-8 px-0"),
+                          children: [
+                            /* @__PURE__ */ jsx(Send, { className: "size-4", "aria-hidden": true }),
+                            !isCompactFooter ? /* @__PURE__ */ jsx("span", { children: t("ai_assistant.chat.send", "Send message") }) : null
+                          ]
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
             ]
           }
         ),