@springbrand/message-panel 0.1.3-alpha.2 → 0.1.3-alpha.21

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

@@ -1,24 +1,49 @@
 import {
   Brain,
-  CaretDown,
-  Check,
   File as FileIcon,
   Plug,
   Plus,
   Terminal,
-  X,
 } from "@phosphor-icons/react";
 import {
+  AssistantRuntimeProvider,
+  ComposerPrimitive,
+  unstable_useSlashCommandAdapter,
+  unstable_useTriggerPopoverAriaProps,
+  unstable_useTriggerPopoverTriggers,
+  useExternalStoreRuntime,
+  type AssistantRuntime,
+  type ThreadMessage,
+} from "@assistant-ui/react";
+import { ComposerTriggerPopover } from "@springbrand/message-panel/composer";
+import {
+  Fragment,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
   type DragEvent as ReactDragEvent,
+  type Ref,
   type ReactNode,
 } from "react";
 import { DropdownMenu } from "../primitives/dropdown-menu";
 import { Tooltip } from "../primitives/tooltip";
 import { WorkshopIconButton } from "../primitives/workshop-controls";
+import { CapabilityChip } from "../capability-chip";
+import {
+  renderFileView,
+  type FileRenderer,
+} from "../file-view";
+import {
+  CloudOsModelSelect,
+  type CloudOsModelOption,
+} from "./cloud-os-model-select";
+
+const isComposingKeyEvent = (event: {
+  isComposing?: boolean;
+  keyCode?: number;
+}) => event.isComposing === true || event.keyCode === 229;
 
 /**
  * 从 cloudflare-os-main `ChatInterface.tsx` 的 `ChatInput` 拷来。
@@ -27,21 +52,22 @@ import { WorkshopIconButton } from "../primitives/workshop-controls";
  * 附件缩略图行、底部左「+ / 添加资源」右「模型 / 发送-停止」的布局、
  * draftUpdateBanner 插槽、blockedReason 占位文案、Enter 发送 / Shift+Enter 换行。
  *
- * 删掉:capsule(URL → 资源胶囊)、slash command picker、ComposerMirror、
- * GatekeeperModal —— 这四样都直挂 gadgets 的 capnweb RPC,在 UIMessage 协议下
- * 没有对应物。「添加资源」按钮保留成一个可选回调,宿主不给就不渲染。
+ * 删掉:capsule(URL → 资源胶囊)、ComposerMirror、GatekeeperModal —— 这三样都直挂
+ * gadgets 的 capnweb RPC,在 UIMessage 协议下没有对应物。「添加资源」按钮保留成一个
+ * 可选回调,宿主不给就不渲染。Command picker 使用 package 内的
+ * assistant-ui ComposerTriggerPopover。
  */
 
-export interface CloudOsModelOption {
-  id: string;
+export interface CloudOsComposerCommand {
+  prefix?: "/" | "$";
   name: string;
+  description: string;
 }
 
-export interface CloudOsComposerCommand {
+export interface CloudOsCapabilityView {
+  kind: "skill" | "plan";
   name: string;
-  description: string;
-  /** 选中后填进输入框的起手文本。 */
-  prompt: string;
+  label: string;
 }
 
 export interface CloudOsAttachmentView {
@@ -50,6 +76,7 @@ export interface CloudOsAttachmentView {
   mediaType?: string;
   size?: number;
   previewUrl?: string;
+  progress?: number;
   status: "uploading" | "ready" | "error";
 }
 
@@ -66,6 +93,8 @@ export interface CloudOsChatInputProps {
   onFilesSelected?: (files: readonly File[]) => void;
   onAttachmentRemove?: (id: string) => void;
   onAttachmentRetry?: (id: string) => void;
+  /** 接管输入框附件视图；未提供时使用包内 FileView。 */
+  renderFile?: FileRenderer;
   /** 底部左侧的额外控件(宿主的 Agent 档位设置等)。 */
   tools?: ReactNode;
   /** 发送键左边的额外控件(宿主的「引导 / 排队」投递方式)。 */
@@ -77,11 +106,11 @@ export interface CloudOsChatInputProps {
    * 传了就以它为准来决定显示发送键还是停止键。
    */
   turnActive?: boolean;
-  /**
-   * 可用的斜杠命令。cloudflare-os 原版是一个直连 RPC 的行内 picker;这里退成
-   * 「+」菜单里的一组条目 —— 能力保住,但**没有**边打字边过滤的行内补全。
-   */
+  /** 可用的斜杠命令，也会显示在「+」菜单中。 */
   commands?: readonly CloudOsComposerCommand[];
+  capabilities?: readonly CloudOsCapabilityView[];
+  onCommandSelect?: (command: CloudOsComposerCommand) => void;
+  onCapabilityRemove?: (kind: CloudOsCapabilityView["kind"], name: string) => void;
   /** 有值时渲染「添加资源」按钮。 */
   onAttachResource?: () => void;
   attachLabel?: string;
@@ -95,11 +124,17 @@ export interface CloudOsChatInputProps {
   minRows?: number;
   maxRows?: number;
   autoFocus?: boolean;
+  /** Gives the host direct access to the chat textarea. */
+  textareaRef?: Ref<HTMLTextAreaElement>;
   /** 输入框下方一行(原文件放 token / cost)。 */
   footnote?: ReactNode;
 }
 
-const MAX_PENDING_ATTACHMENTS = 5;
+const MAX_PENDING_ATTACHMENTS = 8;
+
+function commandLabel(command: CloudOsComposerCommand): string {
+  return `${command.prefix ?? "/"}${command.name.replaceAll("-", " ")}`;
+}
 
 function autoResizeTextarea(
   textarea: HTMLTextAreaElement,
@@ -118,7 +153,7 @@ function autoResizeTextarea(
   textarea.style.overflow = textarea.scrollHeight > maxH ? "auto" : "hidden";
 }
 
-export function CloudOsChatInput({
+function CloudOsChatInputContent({
   value,
   onChange,
   onSubmit,
@@ -131,11 +166,15 @@ export function CloudOsChatInput({
   onFilesSelected,
   onAttachmentRemove,
   onAttachmentRetry,
+  renderFile,
   tools,
   submitControl,
   submissionBlocked = false,
   turnActive,
   commands = [],
+  capabilities = [],
+  onCommandSelect,
+  onCapabilityRemove,
   onAttachResource,
   attachLabel,
   showThinkingTraces,
@@ -146,8 +185,10 @@ export function CloudOsChatInput({
   minRows = 1,
   maxRows = 6,
   autoFocus = false,
+  textareaRef: forwardedTextareaRef,
   footnote,
-}: CloudOsChatInputProps) {
+  runtime,
+}: CloudOsChatInputProps & { runtime: AssistantRuntime }) {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const attachmentInputRef = useRef<HTMLInputElement>(null);
   const dragDepthRef = useRef(0);
@@ -174,16 +215,78 @@ export function CloudOsChatInput({
     (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);
   }, [maxRows, minRows, value]);
 
+  const selectCommand = useCallback((
+    command: CloudOsComposerCommand,
+    clearTrigger: boolean,
+  ) => {
+    onCommandSelect?.(command);
+    if (clearTrigger) {
+      runtime.thread.composer.setText("");
+      onChange("");
+    }
+    requestAnimationFrame(() => textareaRef.current?.focus());
+  }, [onChange, onCommandSelect, runtime]);
+
+  const slashCommands = useMemo(
+    () => commands
+      .filter((command) => (command.prefix ?? "/") === "/")
+      .map((command) => ({
+        id: command.name,
+        label: commandLabel(command),
+        description: command.description,
+        execute: () => selectCommand(command, true),
+      })),
+    [commands, selectCommand],
+  );
+  const skillCommands = useMemo(
+    () => commands
+      .filter((command) => command.prefix === "$")
+      .map((command) => ({
+        id: command.name,
+        label: commandLabel(command),
+        description: command.description,
+        execute: () => selectCommand(command, true),
+      })),
+    [commands, selectCommand],
+  );
+  const slashAdapter = unstable_useSlashCommandAdapter({
+    commands: slashCommands,
+    removeOnExecute: true,
+  });
+  const skillAdapter = unstable_useSlashCommandAdapter({
+    commands: skillCommands,
+    removeOnExecute: true,
+  });
+  // assistant-ui only re-runs a TriggerPopover search when the adapter changes.
+  const slash = useMemo(() => ({
+    ...slashAdapter,
+    adapter: { ...slashAdapter.adapter },
+  }), [slashAdapter, slashCommands]);
+  const skills = useMemo(() => ({
+    ...skillAdapter,
+    adapter: { ...skillAdapter.adapter },
+  }), [skillAdapter, skillCommands]);
+  const triggers = unstable_useTriggerPopoverTriggers();
+  const triggerAria = unstable_useTriggerPopoverAriaProps();
+
+  const setTriggerCursor = useCallback(
+    (position: number) => {
+      for (const trigger of triggers.values()) {
+        trigger.resource.setCursorPosition(position);
+      }
+    },
+    [triggers],
+  );
+
+  useEffect(() => {
+    setTriggerCursor(textareaRef.current?.selectionStart ?? value.length);
+  }, [commands, setTriggerCursor, value]);
+
   const addFiles = useCallback(
     (files: readonly File[]) => {
       if (files.length === 0) return;
@@ -219,6 +322,20 @@ export function CloudOsChatInput({
   return (
     // isolation: isolate 把输入框内部的 z-index 关起来,免得盖到 portal 出去的模型下拉。
     <div className="cos-chat-input-root relative isolate px-4 py-4">
+      <ComposerTriggerPopover
+        char="/"
+        {...slash}
+        aria-label="Commands"
+        emptyItemsLabel="No matching commands"
+        className="!w-72 !border-kumo-line/70 !bg-kumo-base !text-kumo-default themed-floating-shadow-lg"
+      />
+      <ComposerTriggerPopover
+        char="$"
+        {...skills}
+        aria-label="Skills"
+        emptyItemsLabel="No matching skills"
+        className="!w-72 !border-kumo-line/70 !bg-kumo-base !text-kumo-default themed-floating-shadow-lg"
+      />
       <input
         ref={attachmentInputRef}
         type="file"
@@ -271,10 +388,30 @@ export function CloudOsChatInput({
 
         {banner}
 
-        <div className="relative px-4 pb-1 pt-3">
+        <div className="relative flex flex-nowrap items-center gap-2 px-4 pb-1 pt-3">
+          {capabilities.length > 0 && (
+            <div className="flex max-w-[65%] shrink-0 flex-nowrap gap-1.5 overflow-x-auto">
+              {capabilities.map((capability) => (
+                <CapabilityChip
+                  key={`${capability.kind}:${capability.name}`}
+                  kind={capability.kind}
+                  label={capability.label}
+                  removable
+                  onRemove={() =>
+                    onCapabilityRemove?.(capability.kind, capability.name)
+                  }
+                />
+              ))}
+            </div>
+          )}
           <textarea
             ref={(element) => {
               textareaRef.current = element;
+              if (typeof forwardedTextareaRef === "function") {
+                forwardedTextareaRef(element);
+              } else if (forwardedTextareaRef) {
+                forwardedTextareaRef.current = element;
+              }
               if (element) autoResizeTextarea(element, minRows, maxRows);
             }}
             value={value}
@@ -289,9 +426,17 @@ export function CloudOsChatInput({
                   : (placeholder ?? "Ask a follow-up…")
             }
             onChange={(event) => {
-              onChange(event.target.value);
+              const next = event.target.value;
+              runtime.thread.composer.setText(next);
+              onChange(next);
+              setTriggerCursor(event.target.selectionStart ?? next.length);
               autoResizeTextarea(event.target, minRows, maxRows);
             }}
+            onSelect={(event) =>
+              setTriggerCursor(
+                event.currentTarget.selectionStart ?? value.length,
+              )
+            }
             onPaste={(event) => {
               const files = Array.from(event.clipboardData.items)
                 .filter((item) => item.kind === "file")
@@ -303,61 +448,46 @@ export function CloudOsChatInput({
               }
             }}
             onKeyDown={(event) => {
-              // Enter 发送(按住 Shift 换行)
-              if (event.key === "Enter" && !event.shiftKey) {
+              for (const trigger of triggers.values()) {
+                if (trigger.resource.handleKeyDown(event)) return;
+              }
+              // Enter 发送(按住 Shift 换行); IME 组合中不发送
+              if (
+                event.key === "Enter" &&
+                !event.shiftKey &&
+                !isComposingKeyEvent(event.nativeEvent)
+              ) {
                 event.preventDefault();
                 if (canSend) onSubmit();
               }
             }}
-            className="relative z-[1] w-full resize-none border-none bg-transparent p-0 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default outline-none placeholder:text-kumo-inactive disabled:cursor-not-allowed"
+            className="relative z-[1] min-w-0 flex-1 resize-none border-none bg-transparent p-0 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default outline-none placeholder:text-kumo-inactive disabled:cursor-not-allowed"
+            {...triggerAria}
           />
         </div>
 
         {attachments.length > 0 && (
           <div className="flex flex-wrap items-center gap-2 px-3 pb-2 pt-1">
             {attachments.map((attachment) => (
-              <div
-                key={attachment.id}
-                className="relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-lg border border-kumo-line/70 bg-kumo-elevated"
-              >
-                {attachment.previewUrl ? (
-                  <img
-                    src={attachment.previewUrl}
-                    alt={attachment.filename ?? "Attached file"}
-                    className="h-full w-full object-cover"
-                  />
-                ) : (
-                  <FileIcon size={22} className="text-kumo-inactive" />
-                )}
-                {attachment.status === "uploading" && (
-                  <div className="absolute inset-0 grid place-items-center rounded-lg bg-black/35 text-[10px] text-white">
-                    Uploading
-                  </div>
-                )}
-                {attachment.status === "error" && (
-                  <div className="absolute inset-0 grid place-items-center rounded-lg bg-kumo-danger/80 px-1 text-center text-[9px] leading-3 text-white">
-                    Failed
-                  </div>
-                )}
-                {attachment.status === "error" && onAttachmentRetry && (
-                  <button
-                    type="button"
-                    aria-label="Retry upload"
-                    onClick={() => onAttachmentRetry(attachment.id)}
-                    className="absolute inset-0 cursor-pointer"
-                  />
-                )}
-                {onAttachmentRemove && (
-                  <button
-                    type="button"
-                    aria-label="Remove attachment"
-                    onClick={() => onAttachmentRemove(attachment.id)}
-                    className="absolute right-0.5 top-0.5 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-black/55 text-white hover:bg-black/75 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80"
-                  >
-                    <X size={10} weight="bold" />
-                  </button>
-                )}
-              </div>
+              <Fragment key={attachment.id}>
+                {renderFileView(renderFile, {
+                  file: {
+                    url: attachment.previewUrl,
+                    filename: attachment.filename,
+                    mediaType: attachment.mediaType,
+                    size: attachment.size,
+                  },
+                  placement: "composer",
+                  status: attachment.status,
+                  progress: attachment.progress,
+                  onRemove: onAttachmentRemove
+                    ? () => onAttachmentRemove(attachment.id)
+                    : undefined,
+                  onRetry: onAttachmentRetry
+                    ? () => onAttachmentRetry(attachment.id)
+                    : undefined,
+                })}
+              </Fragment>
             ))}
           </div>
         )}
@@ -395,20 +525,15 @@ export function CloudOsChatInput({
                   <>
                     {commands.map((command) => (
                       <DropdownMenu.Item
-                        key={command.name}
-                        onClick={() => {
-                          onChange(command.prompt);
-                          requestAnimationFrame(() =>
-                            textareaRef.current?.focus(),
-                          );
-                        }}
+                        key={`${command.prefix ?? "/"}${command.name}`}
+                        onClick={() => selectCommand(command, false)}
                         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"
                       >
                         <span className="mr-2 inline-flex h-4 w-4 items-center justify-center text-kumo-inactive">
                           <Terminal size={14} />
                         </span>
                         <span className="min-w-0 flex-1 truncate">
-                          /{command.name}
+                          {commandLabel(command)}
                         </span>
                       </DropdownMenu.Item>
                     ))}
@@ -445,45 +570,12 @@ export function CloudOsChatInput({
 
           <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}
-                      onClick={() => 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"
-                    >
-                      <span className="min-w-0 flex-1 truncate">{model.name}</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 ? (
@@ -498,25 +590,27 @@ export function CloudOsChatInput({
                 </svg>
               </WorkshopIconButton>
             ) : (
-              <WorkshopIconButton
+              <button
+                type="button"
                 onClick={onSubmit}
                 disabled={!canSend}
-                tone="primary"
-                className="!h-8 !w-8 disabled:cursor-not-allowed disabled:opacity-30"
+                className="grid size-8 shrink-0 place-items-center rounded-full bg-[var(--primary,var(--color-kumo-brand))] text-[var(--primary-foreground,var(--text-color-kumo-inverse))] shadow-sm transition-colors enabled:hover:bg-[var(--primary-hover,var(--color-kumo-brand-hover))] disabled:cursor-not-allowed disabled:opacity-20"
                 aria-label="Send message"
               >
                 <svg
-                  width="16"
-                  height="16"
+                  className="size-4"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
-                  strokeWidth="2.5"
+                  strokeWidth="1.8"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
                 >
-                  <line x1="12" y1="19" x2="12" y2="5" />
-                  <polyline points="5 12 12 5 19 12" />
+                  <path d="m5 12 7-7 7 7" />
+                  <path d="M12 19V5" />
                 </svg>
-              </WorkshopIconButton>
+              </button>
             )}
           </div>
         </div>
@@ -530,3 +624,24 @@ export function CloudOsChatInput({
     </div>
   );
 }
+
+const EMPTY_MESSAGES: readonly ThreadMessage[] = [];
+
+export function CloudOsChatInput(props: CloudOsChatInputProps) {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: EMPTY_MESSAGES,
+    onNew: async () => undefined,
+  });
+
+  useEffect(() => {
+    runtime.thread.composer.setText(props.value);
+  }, [props.value, runtime]);
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ComposerPrimitive.Unstable_TriggerPopoverRoot>
+        <CloudOsChatInputContent {...props} runtime={runtime} />
+      </ComposerPrimitive.Unstable_TriggerPopoverRoot>
+    </AssistantRuntimeProvider>
+  );
+}

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>
+  );
+}