@springbrand/message-panel 0.1.3-alpha.8 → 0.2.0-alpha.37

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

@@ -1,11 +1,8 @@
 import {
   Brain,
-  CaretDown,
-  Check,
   File as FileIcon,
   Plug,
   Plus,
-  Terminal,
 } from "@phosphor-icons/react";
 import {
   AssistantRuntimeProvider,
@@ -26,6 +23,7 @@ import {
   useRef,
   useState,
   type DragEvent as ReactDragEvent,
+  type Ref,
   type ReactNode,
 } from "react";
 import { DropdownMenu } from "../primitives/dropdown-menu";
@@ -36,6 +34,10 @@ import {
   renderFileView,
   type FileRenderer,
 } from "../file-view";
+import {
+  CloudOsModelSelect,
+  type CloudOsModelOption,
+} from "./cloud-os-model-select";
 
 const isComposingKeyEvent = (event: {
   isComposing?: boolean;
@@ -55,11 +57,6 @@ const isComposingKeyEvent = (event: {
  * assistant-ui ComposerTriggerPopover。
  */
 
-export interface CloudOsModelOption {
-  id: string;
-  name: string;
-}
-
 export interface CloudOsComposerCommand {
   prefix?: "/" | "$";
   name: string;
@@ -67,7 +64,7 @@ export interface CloudOsComposerCommand {
 }
 
 export interface CloudOsCapabilityView {
-  kind: "skill" | "plan";
+  kind: "skill" | "tool" | "plan";
   name: string;
   label: string;
 }
@@ -108,7 +105,7 @@ export interface CloudOsChatInputProps {
    * 传了就以它为准来决定显示发送键还是停止键。
    */
   turnActive?: boolean;
-  /** 可用的斜杠命令，也会显示在「+」菜单中。 */
+  /** 可用的斜杠命令。 */
   commands?: readonly CloudOsComposerCommand[];
   capabilities?: readonly CloudOsCapabilityView[];
   onCommandSelect?: (command: CloudOsComposerCommand) => void;
@@ -126,6 +123,8 @@ 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;
 }
@@ -185,6 +184,7 @@ function CloudOsChatInputContent({
   minRows = 1,
   maxRows = 6,
   autoFocus = false,
+  textareaRef: forwardedTextareaRef,
   footnote,
   runtime,
 }: CloudOsChatInputProps & { runtime: AssistantRuntime }) {
@@ -214,11 +214,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);
@@ -325,7 +320,7 @@ function CloudOsChatInputContent({
 
   return (
     // isolation: isolate 把输入框内部的 z-index 关起来,免得盖到 portal 出去的模型下拉。
-    <div className="cos-chat-input-root relative isolate px-4 py-4">
+    <div className="cos-chat-input-root relative isolate pl-[calc(env(safe-area-inset-left)+1rem)] pr-[calc(env(safe-area-inset-right)+1rem)] pb-[calc(env(safe-area-inset-bottom)+1rem)]">
       <ComposerTriggerPopover
         char="/"
         {...slash}
@@ -411,6 +406,11 @@ function CloudOsChatInputContent({
           <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}
@@ -499,7 +499,7 @@ function CloudOsChatInputContent({
                 render={
                   <button
                     type="button"
-                    className="group flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-lg text-kumo-inactive transition-[background-color,color,transform] duration-150 ease-out hover:bg-kumo-tint hover:text-kumo-subtle focus-visible:bg-kumo-tint focus-visible:text-kumo-subtle focus-visible:outline-none active:scale-[0.96] data-[state=open]:bg-kumo-tint data-[state=open]:text-kumo-subtle"
+                    className="group flex h-11 w-11 flex-shrink-0 cursor-pointer items-center justify-center rounded-lg text-kumo-inactive transition-[background-color,color,transform] duration-150 ease-out hover:bg-kumo-tint hover:text-kumo-subtle focus-visible:bg-kumo-tint focus-visible:text-kumo-subtle focus-visible:outline-none active:scale-[0.96] data-[state=open]:bg-kumo-tint data-[state=open]:text-kumo-subtle md:h-8 md:w-8"
                     aria-label="Open chat options"
                   >
                     <Plus size={18} />
@@ -510,7 +510,7 @@ function CloudOsChatInputContent({
                 {onToggleThinkingTraces && (
                   <DropdownMenu.Item
                     onClick={onToggleThinkingTraces}
-                    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"
+                    className="min-h-11 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 md:min-h-0"
                   >
                     <span className="mr-2 inline-flex h-4 w-4 items-center justify-center text-kumo-inactive">
                       <Brain size={14} />
@@ -520,29 +520,10 @@ function CloudOsChatInputContent({
                     </span>
                   </DropdownMenu.Item>
                 )}
-                {commands.length > 0 && (
-                  <>
-                    {commands.map((command) => (
-                      <DropdownMenu.Item
-                        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">
-                          {commandLabel(command)}
-                        </span>
-                      </DropdownMenu.Item>
-                    ))}
-                    <div className="my-1 border-t border-kumo-line/70" />
-                  </>
-                )}
                 {onFilesSelected && (
                   <DropdownMenu.Item
                     onClick={() => attachmentInputRef.current?.click()}
-                    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"
+                    className="min-h-11 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 md:min-h-0"
                   >
                     <span className="mr-2 inline-flex h-4 w-4 items-center justify-center text-kumo-inactive">
                       <FileIcon size={14} />
@@ -556,7 +537,7 @@ function CloudOsChatInputContent({
               <button
                 type="button"
                 onClick={onAttachResource}
-                className="inline-flex h-8 flex-shrink-0 cursor-pointer items-center gap-1.5 rounded-lg px-2 text-[13px] leading-none tracking-[-0.25px] text-kumo-inactive transition-[background-color,color,transform] duration-150 ease-out hover:bg-kumo-tint hover:text-kumo-subtle focus-visible:bg-kumo-tint focus-visible:text-kumo-subtle focus-visible:outline-none active:scale-[0.97]"
+                className="inline-flex h-11 flex-shrink-0 cursor-pointer items-center gap-1.5 rounded-lg px-2 text-[13px] leading-none tracking-[-0.25px] text-kumo-inactive transition-[background-color,color,transform] duration-150 ease-out hover:bg-kumo-tint hover:text-kumo-subtle focus-visible:bg-kumo-tint focus-visible:text-kumo-subtle focus-visible:outline-none active:scale-[0.97] md:h-8"
               >
                 <Plug size={15} className="flex-shrink-0" />
                 <span className="cos-attach-label leading-none">
@@ -569,52 +550,19 @@ 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}
-                      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 ? (
               <WorkshopIconButton
                 onClick={onStop}
                 tone="primary"
-                className="!h-8 !w-8"
+                className="!h-11 !w-11 md:!h-8 md:!w-8"
                 aria-label="Stop agent"
               >
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
@@ -622,25 +570,27 @@ function CloudOsChatInputContent({
                 </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-11 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 md:size-8"
                 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>

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-11 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 md:h-8",
+              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/file-view.tsx

@@ -1,4 +1,13 @@
-import { File as FileIcon } from "@phosphor-icons/react";
+import {
+  Database,
+  File as FileIcon,
+  FileArchive,
+  FileAudio,
+  FileImage,
+  FileText,
+  FileVideo,
+  type Icon,
+} from "@phosphor-icons/react";
 import {
   CheckIcon,
   FileArchiveIcon,
@@ -14,6 +23,21 @@ import {
   useState,
   type ComponentType,
 } from "react";
+import {
+  PRODUCT_PRESETS,
+  productTypeForMediaType,
+  type ProductType,
+} from "./chat/image-generation";
+
+const PRODUCT_ICONS = {
+  image: FileImage,
+  audio: FileAudio,
+  video: FileVideo,
+  document: FileText,
+  archive: FileArchive,
+  data: Database,
+  other: FileIcon,
+} satisfies Record<ProductType, Icon>;
 
 export type FileViewPlacement =
   | "assistant-message"
@@ -21,6 +45,7 @@ export type FileViewPlacement =
   | "user-message";
 
 export type FileViewStatus = "error" | "ready" | "uploading";
+export type FileViewVariant = "compact" | "product";
 
 export interface FileViewFile {
   url?: string;
@@ -32,8 +57,10 @@ export interface FileViewFile {
 export interface FileViewProps {
   file: FileViewFile;
   placement: FileViewPlacement;
+  variant?: FileViewVariant;
   status?: FileViewStatus;
   progress?: number;
+  onOpen?: () => void;
   onRemove?: () => void;
   onRetry?: () => void;
 }
@@ -59,10 +86,12 @@ function ImageFileView({
   src,
   label,
   placement,
+  frameClassName,
 }: {
   src: string;
   label: string;
   placement: Exclude<FileViewPlacement, "composer">;
+  frameClassName?: string;
 }) {
   const imageRef = useRef<HTMLImageElement>(null);
   const [loadedSrc, setLoadedSrc] = useState<string>();
@@ -78,9 +107,11 @@ function ImageFileView({
   }, [src]);
 
   const assistant = placement === "assistant-message";
-  const previewClassName = assistant
-    ? "relative inline-block max-w-full overflow-hidden rounded-xl border border-kumo-line align-bottom"
-    : "themed-thumbnail-shadow relative inline-block max-w-64 overflow-hidden rounded-xl border border-kumo-line align-bottom";
+  const previewClassName = frameClassName
+    ? `themed-thumbnail-shadow relative inline-block max-w-full overflow-hidden rounded-2xl border border-kumo-line align-bottom ${frameClassName}`
+    : assistant
+      ? "relative inline-block max-w-full overflow-hidden rounded-xl border border-kumo-line align-bottom"
+      : "themed-thumbnail-shadow relative inline-block max-w-64 overflow-hidden rounded-xl border border-kumo-line align-bottom";
 
   return (
     <span
@@ -93,9 +124,11 @@ function ImageFileView({
         src={src}
         alt={label}
         className={`${
-          assistant
-            ? "block max-h-[28rem] max-w-full object-contain"
-            : "block max-h-52 max-w-64 object-cover"
+          frameClassName
+            ? "block size-full object-contain"
+            : assistant
+              ? "block max-h-[28rem] max-w-full object-contain"
+              : "block max-h-52 max-w-64 object-cover"
         } ${loaded && !error ? "" : "invisible"}`}
         decoding="async"
         loading="lazy"
@@ -115,7 +148,7 @@ function ImageFileView({
             className="size-6 animate-pulse motion-reduce:animate-none"
             aria-hidden="true"
           />
-          <span className="sr-only">Loading {label}</span>
+          <span className="sr-only">Loading preview...</span>
         </span>
       )}
       {error && (
@@ -123,7 +156,7 @@ function ImageFileView({
           className="absolute inset-0 flex min-h-24 min-w-36 items-center justify-center bg-kumo-elevated text-kumo-danger"
           data-image-state="error"
           role="img"
-          aria-label={`Unable to load ${label}`}
+          aria-label="Unable to load preview"
         >
           <FileImageIcon className="size-6" aria-hidden="true" />
         </span>
@@ -132,14 +165,114 @@ function ImageFileView({
   );
 }
 
+function ProductFileView({
+  file,
+  label,
+  placement,
+  onOpen,
+}: {
+  file: FileViewFile;
+  label: string;
+  placement: Exclude<FileViewPlacement, "composer">;
+  onOpen?: () => void;
+}) {
+  const type = productTypeForMediaType(file.mediaType);
+  const { frame } = PRODUCT_PRESETS[type];
+  const image = type === "image" && file.url;
+  const video = type === "video" && file.url;
+  const ProductIcon = PRODUCT_ICONS[type];
+  const preview = image
+    ? (
+      <ImageFileView
+        src={file.url!}
+        label={label}
+        placement={placement}
+        frameClassName={frame}
+      />
+    )
+    : video
+      ? (
+        <video
+          src={file.url}
+          controls
+          preload="metadata"
+          playsInline
+          aria-label={label}
+          className={`themed-thumbnail-shadow block max-w-full rounded-2xl border border-kumo-line bg-kumo-elevated object-contain ${frame}`}
+          data-video-preview=""
+        />
+      )
+      : (
+        <span className={`themed-thumbnail-shadow relative inline-grid max-w-full place-items-center overflow-hidden rounded-2xl border border-kumo-line bg-kumo-elevated ${frame}`}>
+          <ProductIcon
+            size={24}
+            weight="light"
+            className="text-kumo-subtle"
+            aria-hidden="true"
+            data-product-icon={type}
+          />
+          {file.mediaType && (
+            <span className="absolute end-2.5 top-2.5 font-mono text-[10px] text-kumo-inactive">
+              {file.mediaType}
+            </span>
+          )}
+        </span>
+      );
+  const content = (
+    <span className="flex w-fit max-w-full flex-col gap-2.5" data-product-file-view={type}>
+      {preview}
+      <span className="flex min-w-0 max-w-full items-center gap-1 text-xs text-kumo-inactive">
+        <span className="capitalize text-kumo-subtle">{type}</span>
+        <span aria-hidden="true">·</span>
+        <span className="min-w-0 truncate">{label}</span>
+      </span>
+    </span>
+  );
+
+  return onOpen ? (
+    <button
+      type="button"
+      onClick={onOpen}
+      aria-label={`Open ${label} in Creation View`}
+      className="inline-block max-w-full cursor-pointer rounded-2xl text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+    >
+      {content}
+    </button>
+  ) : file.url && !video ? (
+    <a
+      href={file.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={`Open ${label}`}
+      className="inline-block max-w-full rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+      data-file-view={image ? undefined : ""}
+      data-placement={placement}
+      data-file-variant="product"
+    >
+      {content}
+    </a>
+  ) : (
+    <span
+      className="inline-block max-w-full"
+      data-file-view=""
+      data-placement={placement}
+      data-file-variant="product"
+    >
+      {content}
+    </span>
+  );
+}
+
 /**
  * Cloud OS 的默认文件视图。宿主可通过 `renderFile` 在同一 seam 替换它。
  */
 export function FileView({
   file,
   placement,
+  variant = "compact",
   status = "ready",
   progress = 0,
+  onOpen,
   onRemove,
   onRetry,
 }: FileViewProps) {
@@ -165,7 +298,15 @@ export function FileView({
         data-state={status === "ready" ? "done" : status}
       >
         <span className="flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-kumo-control text-kumo-inactive themed-thumbnail-shadow">
-          <AttachmentIcon className="size-4" aria-hidden="true" />
+          {isImage ? (
+            <img
+              src={file.url}
+              alt=""
+              className="size-8 object-cover"
+            />
+          ) : (
+            <AttachmentIcon className="size-4" aria-hidden="true" />
+          )}
         </span>
         <span className="flex min-w-0 flex-col">
           <span className="max-w-36 truncate text-xs font-medium text-kumo-default">
@@ -230,10 +371,31 @@ export function FileView({
     );
   }
 
-  if (isImage) {
+  if (variant === "product") {
     return (
+      <ProductFileView
+        file={file}
+        label={label}
+        placement={placement}
+        onOpen={onOpen}
+      />
+    );
+  }
+
+  if (isImage) {
+    const image = (
       <ImageFileView src={file.url!} label={label} placement={placement} />
     );
+    return onOpen ? (
+      <button
+        type="button"
+        onClick={onOpen}
+        aria-label={`Open ${label} in Creation View`}
+        className="inline-block max-w-full cursor-pointer rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+      >
+        {image}
+      </button>
+    ) : image;
   }
 
   return (
@@ -243,7 +405,28 @@ export function FileView({
       data-placement={placement}
     >
       <FileIcon size={13} className="text-kumo-inactive" />
-      {label}
+      <span className="min-w-0 truncate">{label}</span>
+      {file.url && (
+        <span className="ms-1 inline-flex items-center gap-1.5 border-s border-kumo-line ps-2">
+          <a
+            href={file.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={`Open ${label}`}
+            className="rounded text-kumo-default hover:text-kumo-default-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+          >
+            Open
+          </a>
+          <a
+            href={file.url}
+            download={label}
+            aria-label={`Download ${label}`}
+            className="rounded text-kumo-default hover:text-kumo-default-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+          >
+            Download
+          </a>
+        </span>
+      )}
     </span>
   );
 }