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

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

@@ -0,0 +1,202 @@
+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) {
+  if (!isBrowser) {
+    return Math.max(MIN_CHAT_WIDTH, Math.min(DEFAULT_CHAT_WIDTH, width));
+  }
+  const max = Math.max(MIN_CHAT_WIDTH, window.innerWidth - 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);
+}
+
+export interface CloudOsWorkspaceSplitProps {
+  chat: ReactNode;
+  workspace: ReactNode;
+  /** 关掉右栏时聊天占满整宽。 */
+  workspaceOpen: boolean;
+  /** 顶部那条推进条:回合进行中显示。 */
+  isAgentActive?: boolean;
+  /** 右栏收起时依然保留的窄边栏宽度(原文件的 Outputs rail)。 */
+  railWidth?: number;
+  rail?: ReactNode;
+}
+
+export function CloudOsWorkspaceSplit({
+  chat,
+  workspace,
+  workspaceOpen,
+  isAgentActive = false,
+  railWidth = 0,
+  rail,
+}: CloudOsWorkspaceSplitProps) {
+  const [chatWidth, setChatWidth] = useState(getInitialChatWidth);
+  const [isResizing, setIsResizing] = useState(false);
+  const [transitionEnabled, setTransitionEnabled] = useState(false);
+  const chatWidthRef = useRef(chatWidth);
+  chatWidthRef.current = chatWidth;
+
+  // 首帧不要动画:否则每次挂载都会看到面板「滑进来」。
+  useEffect(() => {
+    const timer = window.setTimeout(() => setTransitionEnabled(true), 0);
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    const onResize = () => setChatWidth((width) => clampChatWidth(width));
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
+  const persistChatWidth = useCallback((width: number) => {
+    try {
+      window.localStorage.setItem(CHAT_WIDTH_STORAGE_KEY, String(width));
+    } catch {
+      // storage 不可用时,本次会话内仍然生效。
+    }
+  }, []);
+
+  // 用 pointer capture:拖过右侧 iframe 时事件也不会丢。
+  const handleResizePointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!workspaceOpen) return;
+      event.preventDefault();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setIsResizing(true);
+    },
+    [workspaceOpen],
+  );
+  const handleResizePointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+      setChatWidth(clampChatWidth(event.clientX));
+    },
+    [],
+  );
+  const handleResizePointerUp = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      const width =
+        event.type === "pointercancel"
+          ? chatWidthRef.current
+          : clampChatWidth(event.clientX);
+      setChatWidth(width);
+      persistChatWidth(width);
+      setIsResizing(false);
+    },
+    [persistChatWidth],
+  );
+
+  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 className="relative flex h-full min-h-0 flex-1 overflow-hidden bg-kumo-base">
+      {isAgentActive && (
+        <div
+          className="absolute left-0 z-10 h-0"
+          style={{ top: 0, right: railWidth }}
+        >
+          <div className="absolute left-0 right-0 h-0.5 overflow-hidden bg-kumo-fill">
+            <div className="cos-progress-sweep absolute inset-y-0 w-1/3 bg-kumo-brand" />
+          </div>
+        </div>
+      )}
+
+      {/* ── 左:聊天 ──────────────────────────────────────────────────────── */}
+      <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>
+  );
+}

package/cloud-os/primitives/dropdown-menu.tsx

@@ -0,0 +1,82 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import {
+  cloneElement,
+  isValidElement,
+  type ComponentProps,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { cn } from "../internal/cn";
+import { useCloudOsMode } from "../internal/theme-context";
+
+/**
+ * Kumo 的 DropdownMenu 用的是 `<DropdownMenu.Trigger render={<button/>} />`
+ * 这种「render prop 传元素」的写法。这里保留同一个调用面(免得改动拷来的 JSX),
+ * 内部翻译成 radix 的 asChild。
+ */
+function Root({ children }: { children: ReactNode }) {
+  return <DropdownMenuPrimitive.Root>{children}</DropdownMenuPrimitive.Root>;
+}
+
+function Trigger({ render }: { render: ReactElement }) {
+  return (
+    <DropdownMenuPrimitive.Trigger asChild>
+      {isValidElement(render)
+        ? // data-[popup-open] 是 Kumo 的开合标记,拷来的 className 里在用;
+          // radix 给的是 data-state="open",这里补一份等价属性。
+          cloneElement(render as ReactElement<Record<string, unknown>>, {})
+        : render}
+    </DropdownMenuPrimitive.Trigger>
+  );
+}
+
+function Content({
+  className,
+  collisionPadding = 12,
+  align = "start",
+  sideOffset = 6,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  const mode = useCloudOsMode();
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-cloud-os-portal=""
+        data-mode={mode}
+        align={align}
+        sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
+        className={cn("z-[1100] outline-none", className)}
+        {...props}
+      >
+        {children}
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function Item({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Item>) {
+  return (
+    <DropdownMenuPrimitive.Item
+      className={cn(
+        "flex cursor-pointer select-none items-center outline-none",
+        // Kumo 用 data-highlighted;radix 也叫 data-highlighted,直接通用。
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </DropdownMenuPrimitive.Item>
+  );
+}
+
+export const DropdownMenu = Object.assign(Root, {
+  Trigger,
+  Content,
+  Item,
+});

package/cloud-os/primitives/tooltip.tsx

@@ -0,0 +1,68 @@
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import type { ReactNode } from "react";
+import { cn } from "../internal/cn";
+import { useCloudOsMode } from "../internal/theme-context";
+
+/**
+ * 对齐 `@cloudflare/kumo` 的 `<Tooltip content side align asChild>` 调用面,
+ * 底座换成 radix —— 这样拷过来的 JSX 一个字都不用改,又不必把整个 Kumo
+ * 设计系统拖进本仓(它会和 ui 的 shadcn 主题在同一层 @theme 里打架)。
+ */
+export function TooltipProvider({ children }: { children: ReactNode }) {
+  return (
+    <TooltipPrimitive.Provider delayDuration={250} skipDelayDuration={300}>
+      {children}
+    </TooltipPrimitive.Provider>
+  );
+}
+
+export interface TooltipProps {
+  content: ReactNode;
+  children: ReactNode;
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  /** Kumo 里 asChild 表示「把触发器渲染成 children 本身」;radix 语义一致。 */
+  asChild?: boolean;
+  disabled?: boolean;
+}
+
+export function Tooltip({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  asChild = false,
+  disabled = false,
+}: TooltipProps) {
+  const mode = useCloudOsMode();
+  if (disabled || content == null || content === "") return <>{children}</>;
+  return (
+    // 自带 Provider:radix 的 Root 必须活在 Provider 里,而这些行会被单独渲染
+    // (单测、宿主局部挂载)。Provider 可以嵌套,外面再包一层也不冲突。
+    <TooltipPrimitive.Provider delayDuration={250} skipDelayDuration={300}>
+      <TooltipPrimitive.Root>
+        <TooltipPrimitive.Trigger asChild={asChild}>
+          {children}
+        </TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            data-cloud-os-portal=""
+            data-mode={mode}
+            side={side}
+            align={align}
+            sideOffset={6}
+            collisionPadding={12}
+            className={cn(
+              "z-[1200] max-w-[min(28rem,90vw)] rounded-lg border px-2.5 py-1.5",
+              "text-[12px] leading-4 tracking-[-0.2px]",
+              "border-kumo-line bg-kumo-base text-kumo-default",
+              "shadow-[0_8px_20px_var(--color-kumo-tip-shadow)]",
+            )}
+          >
+            {content}
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+}

package/cloud-os/primitives/workshop-controls.tsx

@@ -0,0 +1,114 @@
+import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+
+/**
+ * 从 cloudflare-os-main `components/WorkshopControls.tsx` 拷来。
+ * 唯一改动:底座从 `@cloudflare/kumo` 的 <Button>/<Input> 换成原生元素,
+ * 因为那几个组件除了 focus ring 之外的视觉全靠这里的 className 覆盖。
+ */
+
+const buttonBaseClassName =
+  "inline-flex cursor-pointer items-center justify-center rounded-lg text-[13px] leading-[18px] font-medium tracking-[-0.25px] transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.98] disabled:cursor-not-allowed disabled:active:scale-100";
+
+const buttonToneClassNames = {
+  primary:
+    "!h-9 bg-kumo-contrast px-3 text-kumo-inverse enabled:hover:bg-kumo-strong disabled:opacity-50",
+  secondary:
+    "!h-8 border border-kumo-line bg-kumo-base px-3 text-kumo-default enabled:hover:bg-kumo-elevated disabled:opacity-40",
+  danger:
+    "!h-8 bg-kumo-danger px-3 text-white enabled:hover:opacity-90 disabled:opacity-50",
+} as const;
+
+type WorkshopButtonTone = keyof typeof buttonToneClassNames;
+
+type WorkshopButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  tone?: WorkshopButtonTone;
+};
+
+export function WorkshopButton({
+  tone = "secondary",
+  className = "",
+  type = "button",
+  ...props
+}: WorkshopButtonProps) {
+  return (
+    <button
+      type={type}
+      {...props}
+      className={`${buttonBaseClassName} ${buttonToneClassNames[tone]} ${className}`}
+    />
+  );
+}
+
+type WorkshopIconButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> & {
+  children: ReactNode;
+  danger?: boolean;
+  tone?: "ghost" | "primary";
+  "aria-label": string;
+};
+
+export function WorkshopIconButton({
+  children,
+  danger = false,
+  tone = "ghost",
+  className = "",
+  type = "button",
+  ...props
+}: WorkshopIconButtonProps) {
+  const toneClassName =
+    tone === "primary"
+      ? "bg-kumo-contrast text-kumo-inverse enabled:hover:bg-kumo-strong enabled:hover:text-kumo-inverse"
+      : danger
+        ? "text-kumo-subtle enabled:hover:bg-kumo-danger-tint enabled:hover:text-kumo-danger"
+        : "text-kumo-subtle enabled:hover:bg-kumo-tint enabled:hover:text-kumo-default";
+
+  return (
+    <button
+      type={type}
+      {...props}
+      className={`!flex !h-8 !w-8 shrink-0 cursor-pointer items-center justify-center rounded-md !p-0 transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.96] disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100 ${toneClassName} ${className}`}
+    >
+      {children}
+    </button>
+  );
+}
+
+type WorkshopInputProps = InputHTMLAttributes<HTMLInputElement>;
+
+export function WorkshopInput({ className = "", ...props }: WorkshopInputProps) {
+  return (
+    <input
+      {...props}
+      className={`!h-9 rounded-lg border border-kumo-line bg-kumo-base px-3 text-[13px] leading-[18px] font-normal tracking-[-0.25px] text-kumo-default placeholder:text-kumo-inactive shadow-none focus:border-kumo-ring focus:outline-none focus:ring-1 focus:ring-kumo-ring/15 ${className}`}
+    />
+  );
+}
+
+export function CountBadge({
+  count,
+  tone = "tint",
+  max = 9,
+  className = "",
+}: {
+  count: number;
+  tone?: "solid" | "tint";
+  max?: number;
+  className?: string;
+}) {
+  if (count <= 0) return null;
+
+  const toneClassName =
+    tone === "solid"
+      ? "border border-kumo-base bg-kumo-brand text-white"
+      : "bg-kumo-brand/15 text-kumo-strong";
+
+  return (
+    <span
+      className={`grid h-4 min-w-4 flex-shrink-0 place-items-center rounded-full px-1 text-[10px] font-semibold leading-none tabular-nums ${toneClassName} ${className}`}
+    >
+      {count > max ? `${max}+` : count}
+    </span>
+  );
+}