@springbrand/message-panel 0.1.3-alpha.16 → 0.1.3-alpha.17

package/cloud-os/assets/model-selected.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon Variants">
+<path id="Subtract" d="M8.00033 1.33333C11.6821 1.33351 14.6663 4.31854 14.6663 8.00033C14.6662 11.682 11.682 14.6662 8.00033 14.6663C4.31854 14.6663 1.33351 11.6821 1.33333 8.00033C1.33333 4.31843 4.31843 1.33333 8.00033 1.33333ZM11.138 6.19466C10.8776 5.93464 10.4549 5.93442 10.1947 6.19466L7.33236 9.05697L6.13802 7.86165C5.87764 7.60163 5.4549 7.60141 5.19466 7.86165C4.93469 8.1218 4.93502 8.54369 5.19466 8.80404L6.86165 10.471C7.12195 10.7313 7.54367 10.7312 7.80404 10.471L11.138 7.13802C11.3984 6.87767 11.3984 6.45501 11.138 6.19466Z" fill="#FF9938"/>
+</g>
+</svg>

package/cloud-os/composer/cloud-os-chat-input.tsx

@@ -1,7 +1,5 @@
 import {
   Brain,
-  CaretDown,
-  Check,
   File as FileIcon,
   Plug,
   Plus,
@@ -37,6 +35,10 @@ import {
   renderFileView,
   type FileRenderer,
 } from "../file-view";
+import {
+  CloudOsModelSelect,
+  type CloudOsModelOption,
+} from "./cloud-os-model-select";
 
 const isComposingKeyEvent = (event: {
   isComposing?: boolean;
@@ -56,13 +58,6 @@ const isComposingKeyEvent = (event: {
  * assistant-ui ComposerTriggerPopover。
  */
 
-export interface CloudOsModelOption {
-  id: string;
-  name: string;
-  disabled?: boolean;
-  disabledLabel?: string;
-}
-
 export interface CloudOsComposerCommand {
   prefix?: "/" | "$";
   name: string;
@@ -220,11 +215,6 @@ function CloudOsChatInputContent({
     (value.trim().length > 0 || hasReadyAttachment) &&
     !hasUnreadyAttachment;
 
-  const selectedModelLabel =
-    selectedModel === null
-      ? "No agent"
-      : (models.find((model) => model.id === selectedModel)?.name ?? selectedModel);
-
   useEffect(() => {
     const element = textareaRef.current;
     if (element) autoResizeTextarea(element, minRows, maxRows);
@@ -580,51 +570,12 @@ function CloudOsChatInputContent({
 
           <div className="ml-auto flex min-w-0 flex-shrink items-center gap-1.5">
             {onModelChange && (
-              <DropdownMenu>
-                <DropdownMenu.Trigger
-                  render={
-                    <button
-                      type="button"
-                      className="group inline-flex h-8 min-w-0 max-w-[180px] cursor-pointer items-center gap-1.5 rounded-lg px-2 text-[13px] leading-5 tracking-[-0.25px] text-kumo-subtle transition-[background-color,color,transform] duration-150 ease-out hover:bg-kumo-tint hover:text-kumo-default focus-visible:bg-kumo-tint focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.97] data-[state=open]:bg-kumo-tint data-[state=open]:text-kumo-default"
-                      aria-label="Select model"
-                    >
-                      <span className="min-w-0 truncate">{selectedModelLabel}</span>
-                      <CaretDown
-                        size={12}
-                        weight="bold"
-                        className="flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out group-data-[state=open]:rotate-180"
-                      />
-                    </button>
-                  }
-                />
-                <DropdownMenu.Content
-                  align="end"
-                  className="themed-floating-shadow-lg !min-w-[190px] rounded-2xl border border-kumo-line/70 bg-kumo-base p-1"
-                >
-                  {models.map((model) => (
-                    <DropdownMenu.Item
-                      key={model.id}
-                      disabled={model.disabled}
-                      onClick={model.disabled ? undefined : () => onModelChange(model.id)}
-                      className="!h-auto rounded-xl !px-2 !py-1.5 text-[12px] leading-4 font-normal tracking-[-0.15px] text-kumo-subtle transition-colors data-highlighted:bg-kumo-tint/70 data-highlighted:text-kumo-default data-disabled:cursor-not-allowed data-disabled:opacity-50"
-                    >
-                      <span className="min-w-0 flex-1 truncate">{model.name}</span>
-                      {model.disabledLabel && (
-                        <span className="ml-3 flex-shrink-0 text-[10px] text-kumo-inactive">
-                          {model.disabledLabel}
-                        </span>
-                      )}
-                      {selectedModel === model.id && (
-                        <Check
-                          size={12}
-                          weight="bold"
-                          className="ml-3 flex-shrink-0 text-kumo-inactive"
-                        />
-                      )}
-                    </DropdownMenu.Item>
-                  ))}
-                </DropdownMenu.Content>
-              </DropdownMenu>
+              <CloudOsModelSelect
+                models={models}
+                selectedModel={selectedModel}
+                onModelChange={onModelChange}
+                variant="cloud-os"
+              />
             )}
             {!showStopButton && submitControl}
             {showStopButton ? (

package/cloud-os/composer/cloud-os-model-select.tsx

@@ -0,0 +1,105 @@
+import { CaretDown } from "@phosphor-icons/react";
+import { cn } from "../internal/cn";
+import { DropdownMenu } from "../primitives/dropdown-menu";
+
+const selectedIcon = new URL("../assets/model-selected.svg", import.meta.url).href;
+
+export interface CloudOsModelOption {
+  id: string;
+  name: string;
+  disabled?: boolean;
+  disabledLabel?: string;
+}
+
+export interface CloudOsModelSelectProps {
+  models: readonly CloudOsModelOption[];
+  selectedModel?: string | null;
+  onModelChange: (modelId: string) => void;
+  disabled?: boolean;
+  variant?: "default" | "cloud-os";
+}
+
+export function CloudOsModelSelect({
+  models,
+  selectedModel = null,
+  onModelChange,
+  disabled = false,
+  variant = "default",
+}: CloudOsModelSelectProps) {
+  if (models.length === 0) return null;
+
+  const selectedLabel =
+    models.find((model) => model.id === selectedModel)?.name ?? "Model";
+  const cloudOs = variant === "cloud-os";
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger
+        render={
+          <button
+            type="button"
+            disabled={disabled}
+            aria-label="Select model"
+            className={cn(
+              "group inline-flex h-8 min-w-0 items-center gap-1.5 rounded-lg transition-[background-color,color,transform] duration-150 ease-out focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40",
+              cloudOs
+                ? "max-w-[180px] cursor-pointer px-2 text-[13px] leading-5 tracking-[-0.25px] text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default focus-visible:bg-kumo-tint focus-visible:text-kumo-default active:scale-[0.97] data-[state=open]:bg-kumo-tint data-[state=open]:text-kumo-default"
+                : "max-w-[min(11rem,38vw)] px-2.5 text-xs leading-none text-black/55 hover:bg-black/5 hover:text-black focus-visible:ring-2 focus-visible:ring-black/15",
+            )}
+          >
+            <span className="min-w-0 truncate">{selectedLabel}</span>
+            <CaretDown
+              size={12}
+              weight="bold"
+              aria-hidden="true"
+              className={cn(
+                "shrink-0 transition-transform duration-150 ease-out group-data-[state=open]:rotate-180",
+                cloudOs ? "text-kumo-inactive" : "text-black/55",
+              )}
+            />
+          </button>
+        }
+      />
+      <DropdownMenu.Content
+        align="end"
+        side="top"
+        sideOffset={8}
+        data-slot="model-select-content"
+        className="cos-model-select min-w-[12.5rem] rounded-lg border p-2"
+      >
+        {models.map((model) => (
+          <DropdownMenu.Item
+            key={model.id}
+            disabled={model.disabled}
+            onClick={model.disabled ? undefined : () => onModelChange(model.id)}
+            data-slot="model-select-item"
+            className="cos-model-select__item gap-2 rounded px-2 py-2.5 text-[14px] leading-[1.4] font-normal transition-colors"
+          >
+            <span
+              className="cos-model-select__name min-w-0 flex-1 truncate"
+              data-muted={selectedModel === model.id || model.disabled ? "" : undefined}
+            >
+              {model.name}
+            </span>
+            {model.disabledLabel ? (
+              <span
+                className="cos-model-select__plan min-w-0 flex-1 truncate text-right"
+                data-disabled={model.disabled ? "" : undefined}
+              >
+                {model.disabledLabel}
+              </span>
+            ) : selectedModel === model.id ? (
+              <img
+                src={selectedIcon}
+                alt=""
+                aria-hidden="true"
+                data-slot="model-selected-icon"
+                className="size-4 shrink-0"
+              />
+            ) : null}
+          </DropdownMenu.Item>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+}

package/cloud-os/index.ts

@@ -39,8 +39,12 @@ export type {
   CloudOsCapabilityView,
   CloudOsChatInputProps,
   CloudOsComposerCommand,
-  CloudOsModelOption,
 } from "./composer/cloud-os-chat-input";
+export { CloudOsModelSelect } from "./composer/cloud-os-model-select";
+export type {
+  CloudOsModelOption,
+  CloudOsModelSelectProps,
+} from "./composer/cloud-os-model-select";
 
 export {
   CloudOsWorkspacePanel,

package/cloud-os/styles/cloud-os.css

@@ -341,6 +341,54 @@
   display: none;
 }
 
+.cos-model-select {
+  --cos-model-select-bg: #fff;
+  --cos-model-select-border: rgb(0 0 0 / 7%);
+  --cos-model-select-text: #000;
+  --cos-model-select-muted: rgb(0 0 0 / 50%);
+  --cos-model-select-disabled: rgb(0 0 0 / 30%);
+  --cos-model-select-highlight: rgb(0 0 0 / 3%);
+  border-color: var(--cos-model-select-border);
+  background: var(--cos-model-select-bg);
+  box-shadow: 0 8px 14px rgb(0 0 0 / 6%);
+  color: var(--cos-model-select-text);
+  font-family: "Inter Variable", Inter, sans-serif;
+}
+
+.cos-model-select__item[data-highlighted] {
+  background: var(--cos-model-select-highlight);
+}
+
+.cos-model-select__item[data-disabled] {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.cos-model-select__name {
+  color: var(--cos-model-select-text);
+}
+
+.cos-model-select__name[data-muted] {
+  color: var(--cos-model-select-muted);
+}
+
+.cos-model-select__plan {
+  color: var(--cos-model-select-muted);
+}
+
+.cos-model-select__plan[data-disabled] {
+  color: var(--cos-model-select-disabled);
+}
+
+[data-cloud-os-portal][data-mode="dark"].cos-model-select {
+  --cos-model-select-bg: #343434;
+  --cos-model-select-border: rgb(255 255 255 / 10%);
+  --cos-model-select-text: #fff;
+  --cos-model-select-muted: rgb(255 255 255 / 50%);
+  --cos-model-select-disabled: rgb(255 255 255 / 30%);
+  --cos-model-select-highlight: rgb(255 255 255 / 7%);
+}
+
 .cos-chat-panel {
   scrollbar-width: thin;
   scrollbar-color: var(--color-kumo-line) transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.16",
+  "version": "0.1.3-alpha.17",
   "type": "module",
   "files": [
     "src",