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

package/cloud-os/workspace/cloud-os-workspace-panel.tsx

@@ -0,0 +1,272 @@
+import { X, type Icon as PhosphorIconType } from "@phosphor-icons/react";
+import { useEffect, useRef, type ReactNode } from "react";
+import {
+  CountBadge,
+  WorkshopIconButton,
+} from "../primitives/workshop-controls";
+
+/**
+ * 右侧工作区面板。从 cloudflare-os-main `GadgetEditor.tsx` 里把
+ * PaneLabel / PaneWorkpieceTabs / PaneTab 和它们外面那条 h-12 的 tab bar
+ * 整块拷来,className 保持原样。
+ *
+ * 适配点:原文件里 tab 内容是 GadgetUI / GadgetCodeInterface / Connections
+ * 三个写死的组件,这里改成宿主传进来的 `tabs[].content` —— 面板本身只负责
+ * 「标题 + tab 条 + 右上角动作 + 内容槽」,不认识任何业务。
+ */
+
+const TABBAR_H = 48; // h-12
+
+export interface CloudOsPaneTab {
+  value: string;
+  label: string;
+  count?: number;
+  content: ReactNode;
+}
+
+export interface CloudOsWorkpieceTab {
+  id: string;
+  title: string;
+  Icon?: PhosphorIconType;
+  badge?: string;
+}
+
+// 说明面板现在展示的是什么。workspace 级视图给 icon;workpiece 走 PaneWorkpieceTabs。
+export function PaneLabel({
+  icon: LabelIcon,
+  title,
+  badge,
+}: {
+  icon?: PhosphorIconType;
+  title: string;
+  badge?: string;
+}) {
+  return (
+    <div
+      title={title}
+      className="inline-flex w-full min-w-0 max-w-[180px] items-center gap-1.5 overflow-hidden rounded-lg bg-kumo-tint px-2.5 py-1.5 text-[13px] font-medium tracking-[-0.15px] text-kumo-default"
+    >
+      {LabelIcon && <LabelIcon size={14} weight="bold" className="flex-shrink-0" />}
+      <span className="truncate">{title}</span>
+      {badge !== undefined && (
+        <span className="rounded-full bg-kumo-fill px-1.5 py-0.5 text-[10px] font-medium leading-none text-kumo-subtle">
+          {badge}
+        </span>
+      )}
+    </div>
+  );
+}
+
+// 打开的那个 tab 必须完整可读,其余可以滚出视野之外。
+const TAB_REVEAL_MARGIN = 8;
+
+export function PaneWorkpieceTabs({
+  items,
+  activeId,
+  onSelect,
+}: {
+  items: readonly CloudOsWorkpieceTab[];
+  activeId: string | null;
+  onSelect: (id: string) => void;
+}) {
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const activeRef = useRef<HTMLButtonElement>(null);
+
+  // 一次不够:面板宽度还在动画、新建 workpiece 的标题也晚于 tab 首帧到达。
+  // 所以下一帧再跑一次,并且监听整条 strip 的尺寸变化。
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+
+    const reveal = () => {
+      const active = activeRef.current;
+      if (!active) return;
+      const tab = active.getBoundingClientRect();
+      const view = scroller.getBoundingClientRect();
+      if (tab.right > view.right) {
+        scroller.scrollLeft += tab.right - view.right + TAB_REVEAL_MARGIN;
+      } else if (tab.left < view.left) {
+        scroller.scrollLeft -= view.left - tab.left + TAB_REVEAL_MARGIN;
+      }
+    };
+
+    reveal();
+    const frame = requestAnimationFrame(reveal);
+    const observer = new ResizeObserver(reveal);
+    observer.observe(scroller);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [activeId, items]);
+
+  return (
+    <div
+      ref={scrollerRef}
+      className="cos-hide-scrollbar flex min-w-0 flex-1 items-center gap-1 overflow-x-auto"
+    >
+      {items.map((item) => {
+        const active = item.id === activeId;
+        const ItemIcon = item.Icon;
+        return (
+          <button
+            key={item.id}
+            ref={active ? activeRef : undefined}
+            type="button"
+            onClick={() => onSelect(item.id)}
+            title={item.title}
+            aria-current={active ? "page" : undefined}
+            // 打开的那个有权用完整名字,其余先让位。
+            className={`inline-flex flex-shrink-0 cursor-pointer items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] font-medium tracking-[-0.15px] transition-colors duration-150 ${
+              active
+                ? "max-w-[240px] bg-kumo-tint text-kumo-default"
+                : "max-w-[150px] text-kumo-subtle hover:bg-kumo-tint/50 hover:text-kumo-default"
+            }`}
+          >
+            {ItemIcon && <ItemIcon size={14} className="flex-shrink-0" />}
+            <span className="truncate">{item.title}</span>
+            {item.badge !== undefined && (
+              <span className="flex-shrink-0 rounded-full bg-kumo-fill px-1.5 py-0.5 text-[10px] font-medium leading-none text-kumo-subtle">
+                {item.badge}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function PaneTab({
+  active,
+  label,
+  count,
+  onClick,
+}: {
+  active: boolean;
+  label: string;
+  count?: number;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`relative flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-[12.5px] font-medium tracking-[-0.15px] transition-colors duration-150 ${
+        active ? "bg-kumo-tint text-kumo-default" : "text-kumo-subtle hover:text-kumo-default"
+      }`}
+    >
+      {label}
+      <CountBadge count={count ?? 0} />
+    </button>
+  );
+}
+
+export function NoContentPlaceholder({
+  title = "Nothing here yet",
+  description = "Ask the agent in chat to build something, and it will appear here.",
+}: {
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <div className="flex h-full items-center justify-center px-6 text-center">
+      <div className="max-w-[360px]">
+        <p className="m-0 text-[15px] leading-[22px] font-semibold tracking-[-0.3px] text-kumo-default">
+          {title}
+        </p>
+        <p className="mt-1.5 mb-0 text-[13px] leading-[19px] tracking-[-0.25px] text-kumo-subtle">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export interface CloudOsWorkspacePanelProps {
+  title: string;
+  titleIcon?: PhosphorIconType;
+  titleBadge?: string;
+  /** 传了就用 workpiece 标签条替代单个标题。 */
+  workpieces?: readonly CloudOsWorkpieceTab[];
+  activeWorkpieceId?: string | null;
+  onSelectWorkpiece?: (id: string) => void;
+  tabs: readonly CloudOsPaneTab[];
+  activeTab: string;
+  onTabChange: (value: string) => void;
+  /** tab 条右侧的额外动作(全屏、导出…)。 */
+  actions?: ReactNode;
+  onClose?: () => void;
+}
+
+export function CloudOsWorkspacePanel({
+  title,
+  titleIcon,
+  titleBadge,
+  workpieces,
+  activeWorkpieceId = null,
+  onSelectWorkpiece,
+  tabs,
+  activeTab,
+  onTabChange,
+  actions,
+  onClose,
+}: CloudOsWorkspacePanelProps) {
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-kumo-base">
+      <div
+        className="flex flex-shrink-0 items-center gap-2 border-b border-kumo-line px-3"
+        style={{ height: TABBAR_H }}
+      >
+        <div className="flex min-w-0 flex-1 items-center overflow-hidden">
+          {workpieces && workpieces.length > 1 && onSelectWorkpiece ? (
+            <PaneWorkpieceTabs
+              items={workpieces}
+              activeId={activeWorkpieceId}
+              onSelect={onSelectWorkpiece}
+            />
+          ) : (
+            <PaneLabel icon={titleIcon} title={title} badge={titleBadge} />
+          )}
+        </div>
+
+        <div className="flex flex-shrink-0 items-center gap-1.5">
+          <div className="flex items-center rounded-lg border border-kumo-line p-0.5">
+            {tabs.map((tab) => (
+              <PaneTab
+                key={tab.value}
+                active={activeTab === tab.value}
+                label={tab.label}
+                count={tab.count}
+                onClick={() => onTabChange(tab.value)}
+              />
+            ))}
+          </div>
+
+          {actions}
+
+          {onClose && (
+            <WorkshopIconButton
+              aria-label="Close workspace panel"
+              title="Close"
+              onClick={onClose}
+            >
+              <X size={16} />
+            </WorkshopIconButton>
+          )}
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-hidden">
+        {tabs.map((tab) => (
+          <div
+            key={tab.value}
+            className={activeTab === tab.value ? "h-full overflow-auto" : "hidden"}
+          >
+            {tab.content}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}