@springbrand/message-panel 0.1.3-alpha.0 → 0.1.3-alpha.10

package/cloud-os/file-view.tsx

@@ -0,0 +1,258 @@
+import { File as FileIcon } from "@phosphor-icons/react";
+import {
+  CheckIcon,
+  FileArchiveIcon,
+  FileImageIcon,
+  FileTextIcon,
+  Loader2Icon,
+  RotateCcwIcon,
+  XIcon,
+} from "lucide-react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentType,
+} from "react";
+
+export type FileViewPlacement =
+  | "assistant-message"
+  | "composer"
+  | "user-message";
+
+export type FileViewStatus = "error" | "ready" | "uploading";
+
+export interface FileViewFile {
+  url?: string;
+  filename?: string;
+  mediaType?: string;
+  size?: number;
+}
+
+export interface FileViewProps {
+  file: FileViewFile;
+  placement: FileViewPlacement;
+  status?: FileViewStatus;
+  progress?: number;
+  onRemove?: () => void;
+  onRetry?: () => void;
+}
+
+export type FileRenderer = ComponentType<FileViewProps>;
+
+function fileMeta(file: FileViewFile): string {
+  if (file.size === undefined) return "Ready";
+  if (file.size < 1024) return `${file.size} B`;
+  if (file.size < 1024 * 1024) return `${Math.round(file.size / 1024)} KB`;
+  return `${(file.size / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function attachmentIcon(file: FileViewFile) {
+  if (file.mediaType?.startsWith("image/")) return FileImageIcon;
+  if (/zip|archive|compressed/i.test(file.mediaType ?? "")) {
+    return FileArchiveIcon;
+  }
+  return FileTextIcon;
+}
+
+function ImageFileView({
+  src,
+  label,
+  placement,
+}: {
+  src: string;
+  label: string;
+  placement: Exclude<FileViewPlacement, "composer">;
+}) {
+  const imageRef = useRef<HTMLImageElement>(null);
+  const [loadedSrc, setLoadedSrc] = useState<string>();
+  const [errorSrc, setErrorSrc] = useState<string>();
+  const loaded = loadedSrc === src;
+  const error = errorSrc === src;
+
+  useEffect(() => {
+    const image = imageRef.current;
+    if (!image?.complete) return;
+    if (image.naturalWidth > 0) setLoadedSrc(src);
+    else setErrorSrc(src);
+  }, [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";
+
+  return (
+    <span
+      className={`${previewClassName} ${loaded && !error ? "" : "min-h-24 min-w-36"}`}
+      data-file-view=""
+      data-placement={placement}
+    >
+      <img
+        ref={imageRef}
+        src={src}
+        alt={label}
+        className={`${
+          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"
+        onLoad={() => {
+          setLoadedSrc(src);
+          setErrorSrc(undefined);
+        }}
+        onError={() => setErrorSrc(src)}
+      />
+      {!loaded && !error && (
+        <span
+          className="absolute inset-0 flex min-h-24 min-w-36 items-center justify-center bg-kumo-elevated text-kumo-inactive"
+          data-image-state="loading"
+          role="status"
+        >
+          <FileImageIcon
+            className="size-6 animate-pulse motion-reduce:animate-none"
+            aria-hidden="true"
+          />
+          <span className="sr-only">Loading {label}</span>
+        </span>
+      )}
+      {error && (
+        <span
+          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}`}
+        >
+          <FileImageIcon className="size-6" aria-hidden="true" />
+        </span>
+      )}
+    </span>
+  );
+}
+
+/**
+ * Cloud OS 的默认文件视图。宿主可通过 `renderFile` 在同一 seam 替换它。
+ */
+export function FileView({
+  file,
+  placement,
+  status = "ready",
+  progress = 0,
+  onRemove,
+  onRetry,
+}: FileViewProps) {
+  const isImage = Boolean(file.url && file.mediaType?.startsWith("image/"));
+  const label = file.filename ?? "Attachment";
+
+  if (placement === "composer") {
+    const AttachmentIcon = attachmentIcon(file);
+    const meta =
+      status === "uploading"
+        ? "Uploading"
+        : status === "error"
+          ? "Upload failed"
+          : fileMeta(file);
+
+    return (
+      <div
+        className="relative flex items-center gap-2.5 overflow-hidden rounded-[14px] bg-kumo-elevated py-1.5 ps-1.5 pe-2.5"
+        data-file-view=""
+        data-placement={placement}
+        data-status={status}
+        data-slot="composer-attachment"
+        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" />
+        </span>
+        <span className="flex min-w-0 flex-col">
+          <span className="max-w-36 truncate text-xs font-medium text-kumo-default">
+            {label}
+          </span>
+          <span
+            className={
+              status === "error"
+                ? "text-[11px] text-kumo-danger"
+                : "text-[11px] text-kumo-inactive"
+            }
+          >
+            {meta}
+          </span>
+        </span>
+        <span className="ms-1 flex w-5 items-center justify-end">
+          {status === "uploading" ? (
+            <Loader2Icon
+              className="size-3.5 animate-spin text-kumo-inactive motion-reduce:animate-none"
+              aria-label="Uploading"
+            />
+          ) : status === "error" && onRetry ? (
+            <button
+              type="button"
+              aria-label={`Retry ${label}`}
+              onClick={onRetry}
+              className="grid size-5 place-items-center rounded-full text-kumo-danger hover:bg-kumo-tint focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+            >
+              <RotateCcwIcon className="size-3" aria-hidden="true" />
+            </button>
+          ) : status === "ready" && onRemove ? (
+            <button
+              type="button"
+              aria-label={`Remove ${label}`}
+              onClick={onRemove}
+              className="grid size-5 place-items-center rounded-full text-kumo-inactive hover:bg-kumo-tint hover:text-kumo-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+            >
+              <XIcon className="size-3" aria-hidden="true" />
+            </button>
+          ) : status === "ready" ? (
+            <CheckIcon className="size-3.5 text-kumo-success" aria-label="Ready" />
+          ) : null}
+        </span>
+        {status !== "ready" && onRemove && (
+          <button
+            type="button"
+            aria-label={`Remove ${label}`}
+            onClick={onRemove}
+            className="grid size-5 place-items-center rounded-full text-kumo-inactive hover:bg-kumo-tint hover:text-kumo-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+          >
+            <XIcon className="size-3" aria-hidden="true" />
+          </button>
+        )}
+        {status === "uploading" && (
+          <span
+            aria-hidden="true"
+            className="absolute inset-x-0 bottom-0 h-0.5 bg-kumo-brand/70 transition-[width] duration-300"
+            style={{ width: `${Math.min(100, Math.max(0, progress * 100))}%` }}
+          />
+        )}
+      </div>
+    );
+  }
+
+  if (isImage) {
+    return (
+      <ImageFileView src={file.url!} label={label} placement={placement} />
+    );
+  }
+
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 rounded-lg border border-kumo-line bg-kumo-elevated px-2.5 py-1.5 text-[12px] leading-4 text-kumo-subtle"
+      data-file-view=""
+      data-placement={placement}
+    >
+      <FileIcon size={13} className="text-kumo-inactive" />
+      {label}
+    </span>
+  );
+}
+
+/** 宿主没有接管时回退到包内默认视图。 */
+export function renderFileView(
+  renderFile: FileRenderer | undefined,
+  props: FileViewProps,
+) {
+  const Renderer = renderFile ?? FileView;
+  return <Renderer {...props} />;
+}

package/cloud-os/index.ts

@@ -0,0 +1,123 @@
+/**
+ * `@springbrand/message-panel/cloud-os`
+ *
+ * 从 cloudflare-os-main(packages/workshop-frontend)搬来的聊天体 + 右侧工作区面板,
+ * 适配到当前的 UIMessage 协议。这个文件夹**完全独立**:不 import `../src` 的任何东西,
+ * 自带 cn / 主题 / 图标 / markdown / primitives。
+ *
+ * 边界:
+ *  - `styles/cloud-os.css` 必须由宿主的 Tailwind 入口 import,并把本目录加进 @source。
+ *  - 所有组件都要包在 `<CloudOsRoot>` 里,否则拿不到作用域化的 token。
+ */
+
+export { CloudOsRoot } from "./layout/cloud-os-root";
+export { CapabilityChip } from "./capability-chip";
+export type { CapabilityChipProps } from "./capability-chip";
+export { FileView } from "./file-view";
+export type {
+  FileRenderer,
+  FileViewFile,
+  FileViewPlacement,
+  FileViewProps,
+  FileViewStatus,
+} from "./file-view";
+export { CloudOsWorkspaceSplit } from "./layout/cloud-os-workspace-split";
+export type { CloudOsWorkspaceSplitProps } from "./layout/cloud-os-workspace-split";
+
+export { CloudOsChatMessages } from "./chat/cloud-os-chat-messages";
+export type {
+  CloudOsChatMessagesProps,
+  CloudOsChatStatus,
+} from "./chat/cloud-os-chat-messages";
+
+export { CloudOsChatInput } from "./composer/cloud-os-chat-input";
+export type {
+  CloudOsAttachmentView,
+  CloudOsCapabilityView,
+  CloudOsChatInputProps,
+  CloudOsComposerCommand,
+  CloudOsModelOption,
+} from "./composer/cloud-os-chat-input";
+
+export {
+  CloudOsWorkspacePanel,
+  NoContentPlaceholder,
+  PaneLabel,
+  PaneTab,
+  PaneWorkpieceTabs,
+} from "./workspace/cloud-os-workspace-panel";
+export type {
+  CloudOsPaneTab,
+  CloudOsWorkpieceTab,
+  CloudOsWorkspacePanelProps,
+} from "./workspace/cloud-os-workspace-panel";
+
+export { MarkdownMessage } from "./chat/markdown-message";
+export type { CloudOsUrlResolver } from "./chat/markdown-message";
+export {
+  ThinkingTraceRow,
+  ToolCallDetails,
+  ToolGroupRow,
+  WorkIcon,
+} from "./chat/tool-rows";
+export {
+  ApprovalBlock,
+  AskUserBlock,
+  ErrorBlock,
+  ParallelBlock,
+  PlanBlock,
+  PermissionGrant,
+  ScheduleBlock,
+  ScheduleConfirmation,
+  SubAgentsBlock,
+  SuggestionsBlock,
+} from "./chat/rich-blocks";
+export type { ApprovalDecision } from "./chat/rich-blocks";
+
+export { CloudOsActivityIndicator } from "./chat/activity-indicator";
+
+export {
+  buildCloudOsEntries,
+  cloudOsMetadata,
+  deriveTurnActivity,
+  formatClockTime,
+  formatFullTimestamp,
+  messageText,
+  requestedCapabilitiesOf,
+  rhythmTopClass,
+} from "./chat/transcript-model";
+export type {
+  AssistantBlock,
+  CloudOsActivity,
+  CloudOsAttachment,
+  CloudOsEntry,
+  CloudOsRequestedCapability,
+  ParallelTool,
+  PlanStep,
+  SubAgentView,
+} from "./chat/transcript-model";
+
+export {
+  buildToolCallGroups,
+  canonicalToolKind,
+  getToolCallSummary,
+  getToolIcon,
+  humanizeToolName,
+  toCloudOsToolCall,
+  toolNameOfPart,
+} from "./chat/tool-presentation";
+export type {
+  CloudOsToolCall,
+  CloudOsToolKind,
+  ToolCallGroup,
+} from "./chat/tool-presentation";
+
+export { DropdownMenu } from "./primitives/dropdown-menu";
+export { Tooltip, TooltipProvider } from "./primitives/tooltip";
+export {
+  CountBadge,
+  WorkshopButton,
+  WorkshopIconButton,
+  WorkshopInput,
+} from "./primitives/workshop-controls";
+export type { CloudOsMode } from "./internal/theme-context";

package/cloud-os/internal/cn.ts

@@ -0,0 +1,6 @@
+/** cloud-os 自己的 cn —— 刻意不复用 ../../src/internal/cn,保持本文件夹完全独立。 */
+export function cn(
+  ...values: Array<string | false | null | undefined>
+): string {
+  return values.filter(Boolean).join(" ");
+}

package/cloud-os/internal/theme-context.tsx

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+
+export type CloudOsMode = "light" | "dark";
+
+const CloudOsModeContext = createContext<CloudOsMode>("light");
+
+export const CloudOsModeProvider = CloudOsModeContext.Provider;
+
+/**
+ * portal 出去的浮层(Tooltip / DropdownMenu / Popover)脱离 `.cloud-os-root` 子树,
+ * 拿不到作用域里的 CSS 变量。浮层根节点自己带上 data-mode,配合
+ * `[data-cloud-os-portal][data-mode="dark"]` 那组规则补齐变量。
+ */
+export function useCloudOsMode(): CloudOsMode {
+  return useContext(CloudOsModeContext);
+}

package/cloud-os/layout/cloud-os-root.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import { CloudOsModeProvider, type CloudOsMode } from "../internal/theme-context";
+import { TooltipProvider } from "../primitives/tooltip";
+
+/**
+ * cloud-os 子树的根。做三件事:
+ *  1. 打上 `.cloud-os-root` —— 作用域化的通用 token(字体 / 圆角 / 缓动)挂在它上面,
+ *     这样 cloud-os 的 rounded-lg 是 0.5rem,而外层宿主的 shadcn 主题不受影响。
+ *  2. 打上 `data-mode` —— 暗色 token 整组由它切换。
+ *  3. 提供 Tooltip 上下文,并把 mode 透给 portal 出去的浮层。
+ */
+export function CloudOsRoot({
+  mode = "light",
+  className = "",
+  children,
+}: {
+  mode?: CloudOsMode;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <CloudOsModeProvider value={mode}>
+      <TooltipProvider>
+        <div
+          className={`cloud-os-root ${className}`}
+          data-mode={mode}
+          data-cloud-os-root=""
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </CloudOsModeProvider>
+  );
+}

package/cloud-os/layout/cloud-os-workspace-split.tsx

@@ -0,0 +1,228 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from "react";
+
+/**
+ * 左聊天 / 右工作区的双栏骨架。从 cloudflare-os-main `GadgetEditor.tsx` 的 BODY
+ * 段拷来:同一条 1px 的 kumo-line 分隔即拖拽把手、同一套 pointer capture 拖拽
+ * (拖过 iframe 也不丢)、同一个 200ms 的收起/展开过渡。
+ *
+ * 适配点:原文件把左右两侧的内容写死成 ChatInterface / GadgetUI,这里换成
+ * children 插槽;chatWidth 的 localStorage key 换成 cloud-os 自己的。
+ */
+
+const CHAT_WIDTH_STORAGE_KEY = "cloud-os:chatWidth";
+const MIN_CHAT_WIDTH = 280;
+const MIN_WORKSPACE_WIDTH = 400;
+const DEFAULT_CHAT_WIDTH = 420;
+const WORKSPACE_TRANSITION_MS = 200;
+
+const isBrowser = typeof window !== "undefined";
+
+function clampChatWidth(width: number, containerWidth?: number) {
+  if (!isBrowser) {
+    return Math.max(MIN_CHAT_WIDTH, Math.min(DEFAULT_CHAT_WIDTH, width));
+  }
+  const available = containerWidth ?? window.innerWidth;
+  const max = Math.max(MIN_CHAT_WIDTH, available - MIN_WORKSPACE_WIDTH);
+  return Math.max(MIN_CHAT_WIDTH, Math.min(max, width));
+}
+
+function getInitialChatWidth() {
+  if (!isBrowser) return DEFAULT_CHAT_WIDTH;
+  const fallback = Math.min(
+    DEFAULT_CHAT_WIDTH,
+    Math.floor(window.innerWidth * 0.38),
+  );
+  let parsed = Number.NaN;
+  try {
+    const stored = window.localStorage.getItem(CHAT_WIDTH_STORAGE_KEY);
+    if (stored) parsed = Number(stored);
+  } catch {
+    // 隐私模式 / 沙箱 iframe 下没有 storage,退回默认值即可。
+  }
+  return clampChatWidth(Number.isFinite(parsed) ? parsed : fallback);
+}
+
+type ResizeSession = {
+  startX: number;
+  startWidth: number;
+};
+
+export interface CloudOsWorkspaceSplitProps {
+  chat: ReactNode;
+  workspace: ReactNode;
+  /** 关掉右栏时聊天占满整宽。 */
+  workspaceOpen: boolean;
+  /** 右栏收起时依然保留的窄边栏宽度(原文件的 Outputs rail)。 */
+  railWidth?: number;
+  rail?: ReactNode;
+}
+
+export function CloudOsWorkspaceSplit({
+  chat,
+  workspace,
+  workspaceOpen,
+  railWidth = 0,
+  rail,
+}: CloudOsWorkspaceSplitProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const resizeSessionRef = useRef<ResizeSession | null>(null);
+  const [chatWidth, setChatWidth] = useState(getInitialChatWidth);
+  const [isResizing, setIsResizing] = useState(false);
+  const [transitionEnabled, setTransitionEnabled] = useState(false);
+  const chatWidthRef = useRef(chatWidth);
+  chatWidthRef.current = chatWidth;
+
+  const getContainerWidth = useCallback(
+    () => containerRef.current?.getBoundingClientRect().width,
+    [],
+  );
+
+  const clampToContainer = useCallback(
+    (width: number) => clampChatWidth(width, getContainerWidth()),
+    [getContainerWidth],
+  );
+
+  // 首帧不要动画:否则每次挂载都会看到面板「滑进来」。
+  useEffect(() => {
+    const timer = window.setTimeout(() => setTransitionEnabled(true), 0);
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  // 挂载后按真实容器宽度重新 clamp 一次(宿主可能有左侧 sidebar 等偏移)。
+  useEffect(() => {
+    setChatWidth((width) => clampToContainer(width));
+  }, [clampToContainer]);
+
+  useEffect(() => {
+    const onResize = () => setChatWidth((width) => clampToContainer(width));
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [clampToContainer]);
+
+  const persistChatWidth = useCallback((width: number) => {
+    try {
+      window.localStorage.setItem(CHAT_WIDTH_STORAGE_KEY, String(width));
+    } catch {
+      // storage 不可用时,本次会话内仍然生效。
+    }
+  }, []);
+
+  const widthFromPointer = useCallback(
+    (clientX: number) => {
+      const session = resizeSessionRef.current;
+      if (!session) return chatWidthRef.current;
+      return clampToContainer(session.startWidth + clientX - session.startX);
+    },
+    [clampToContainer],
+  );
+
+  // 用 pointer capture:拖过右侧 iframe 时事件也不会丢。
+  const handleResizePointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!workspaceOpen) return;
+      event.preventDefault();
+      resizeSessionRef.current = {
+        startX: event.clientX,
+        startWidth: chatWidthRef.current,
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setIsResizing(true);
+    },
+    [workspaceOpen],
+  );
+  const handleResizePointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+      setChatWidth(widthFromPointer(event.clientX));
+    },
+    [widthFromPointer],
+  );
+  const handleResizePointerUp = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      const width =
+        event.type === "pointercancel"
+          ? chatWidthRef.current
+          : widthFromPointer(event.clientX);
+      resizeSessionRef.current = null;
+      setChatWidth(width);
+      persistChatWidth(width);
+      setIsResizing(false);
+    },
+    [persistChatWidth, widthFromPointer],
+  );
+
+  useEffect(() => {
+    if (!isResizing) return;
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+    return () => {
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    };
+  }, [isResizing]);
+
+  // 类名必须是字面量:Tailwind 扫源码找不到拼出来的 duration-[200ms]。
+  // WORKSPACE_TRANSITION_MS 和这里的 duration-200 必须一起改。
+  const transitionClass =
+    transitionEnabled && !isResizing
+      ? "transition-[width,opacity] duration-200 ease-out"
+      : "";
+
+  return (
+    // h-full 而不是只靠 flex-1:宿主给的容器不一定是 flex,那样 flex-1 不生效,
+    // 整个分栏会塌成内容高度(聊天区不铺满、输入框吊在半空)。
+    <div
+      ref={containerRef}
+      className="relative flex h-full min-h-0 flex-1 overflow-hidden bg-kumo-base"
+    >
+      {/* ── 左:聊天 ──────────────────────────────────────────────────────── */}
+      <div
+        className={`flex h-full min-h-0 flex-shrink-0 flex-col ${transitionClass} ${
+          workspaceOpen ? "border-r border-kumo-line" : ""
+        }`}
+        style={{
+          width: workspaceOpen ? chatWidth : `calc(100% - ${railWidth}px)`,
+        }}
+      >
+        {chat}
+      </div>
+
+      {/* ── 拖拽把手 ─────────────────────────────────────────────────────── */}
+      <div
+        className={`relative flex-shrink-0 cursor-col-resize touch-none overflow-visible bg-kumo-line ${transitionClass}`}
+        style={{ width: workspaceOpen ? 1 : 0 }}
+        onPointerDown={handleResizePointerDown}
+        onPointerMove={handleResizePointerMove}
+        onPointerUp={handleResizePointerUp}
+        onPointerCancel={handleResizePointerUp}
+      >
+        <div className="absolute inset-y-0 -left-2 -right-2" />
+      </div>
+
+      {/* ── 右:工作区 ───────────────────────────────────────────────────── */}
+      <div
+        className={`flex h-full min-w-0 flex-shrink-0 overflow-hidden bg-kumo-base ${transitionClass}`}
+        style={{
+          width: workspaceOpen ? `calc(100% - ${chatWidth}px - 1px)` : 0,
+          opacity: workspaceOpen ? 1 : 0,
+        }}
+      >
+        <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+          {workspace}
+        </div>
+      </div>
+
+      {rail}
+    </div>
+  );
+}