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

package/cloud-os/index.ts

@@ -20,8 +20,12 @@ export type {
   FileViewPlacement,
   FileViewProps,
   FileViewStatus,
+  FileViewVariant,
 } from "./file-view";
-export { CloudOsWorkspaceSplit } from "./layout/cloud-os-workspace-split";
+export {
+  CloudOsConversationLoading,
+  CloudOsWorkspaceSplit,
+} from "./layout/cloud-os-workspace-split";
 export type { CloudOsWorkspaceSplitProps } from "./layout/cloud-os-workspace-split";
 
 export { CloudOsChatMessages } from "./chat/cloud-os-chat-messages";
@@ -36,8 +40,12 @@ export type {
   CloudOsCapabilityView,
   CloudOsChatInputProps,
   CloudOsComposerCommand,
-  CloudOsModelOption,
 } from "./composer/cloud-os-chat-input";
+export { CloudOsModelSelect } from "./composer/cloud-os-model-select";
+export type {
+  CloudOsModelOption,
+  CloudOsModelSelectProps,
+} from "./composer/cloud-os-model-select";
 
 export {
   CloudOsWorkspacePanel,
@@ -53,13 +61,26 @@ export type {
 } from "./workspace/cloud-os-workspace-panel";
 
 export { MarkdownMessage } from "./chat/markdown-message";
-export type { CloudOsUrlResolver } from "./chat/markdown-message";
+export type {
+  CloudOsArtifactResolver,
+  CloudOsUrlResolver,
+} from "./chat/markdown-message";
 export {
   ThinkingTraceRow,
   ToolCallDetails,
   ToolGroupRow,
   WorkIcon,
 } from "./chat/tool-rows";
+export { ToolCall } from "./chat/tool-call";
+export type { ToolCallProps } from "./chat/tool-call";
+export { CodeRunner } from "./chat/code-runner";
+export type { RunState } from "./chat/code-runner";
+export { ToolTimeline } from "./chat/tool-timeline";
+export type {
+  TimelineStat,
+  TimelineStep,
+  ToolTimelineProps,
+} from "./chat/tool-timeline";
 export {
   ApprovalBlock,
   AskUserBlock,

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

@@ -6,6 +6,7 @@ import {
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from "react";
+import { motion, useReducedMotion } from "motion/react";
 
 /**
  * 左聊天 / 右工作区的双栏骨架。从 cloudflare-os-main `GadgetEditor.tsx` 的 BODY
@@ -17,14 +18,64 @@ import {
  */
 
 const CHAT_WIDTH_STORAGE_KEY = "cloud-os:chatWidth";
-const MIN_CHAT_WIDTH = 280;
+const MIN_CHAT_WIDTH = 360;
 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) {
+const loadingAssets = {
+  spark: new URL("../assets/loading-spark.svg", import.meta.url).href,
+  corner: new URL("../assets/loading-corner.svg", import.meta.url).href,
+  mark: new URL("../assets/loading-mark.svg", import.meta.url).href,
+};
+
+const loadingSpring = (t: number) =>
+  1 - Math.exp(-t * 7.6657) * (Math.cos(t * 6.7605) + 1.1339 * Math.sin(t * 6.7605));
+
+export function CloudOsConversationLoading() {
+  const reducedMotion = useReducedMotion();
+  const repeat = reducedMotion ? 0 : Infinity;
+
+  return (
+    <div className="absolute inset-0 z-30 grid place-items-center bg-kumo-base/90">
+      <div role="status" aria-label="Loading conversation..." className="flex flex-col items-center gap-4">
+        <div className="relative h-[49px] w-[49px] overflow-hidden" aria-hidden="true">
+          <motion.img
+            src={loadingAssets.spark}
+            alt=""
+            className="absolute bottom-[18.5%] right-[61.46%] h-[20.04%] w-[20.04%] will-change-transform"
+            initial={reducedMotion ? false : { opacity: 0, rotate: 200, scaleX: 0.5, scaleY: 0.5, x: -140, y: 120 }}
+            animate={reducedMotion ? { opacity: 1, rotate: 0, scaleX: 1, scaleY: 1, x: 0, y: 0 } : { opacity: [0, 0, 1, 1, 0, 0], rotate: [200, 200, 10, 0, 0, 200, 200], scaleX: [0.5, 0.5, 1.3, 0.8, 1, 1], scaleY: [0.5, 0.5, 0.75, 1.2, 1, 1], x: [-140, -140, 2, 0, 0, -140, -140], y: [120, 120, -2, 0, 0, 120, 120] }}
+            transition={{ opacity: { duration: 1.68, times: [0, 0.2083, 0.25, 0.9998, 0.9999, 1], ease: ["linear", "linear", "linear", "easeIn", "linear"], repeat }, rotate: { duration: 1.68, times: [0, 0.2083, 0.3869, 0.506, 0.9998, 0.9999, 1], ease: ["linear", [0, 0, 0.15, 1], loadingSpring, "linear", "easeIn", "linear"], repeat }, scaleX: { duration: 1.68, times: [0, 0.2083, 0.3274, 0.3869, 0.506, 1], ease: ["linear", [0, 0, 0.15, 1], "easeOut", loadingSpring, "linear"], repeat }, scaleY: { duration: 1.68, times: [0, 0.2083, 0.3274, 0.3869, 0.506, 1], ease: ["linear", [0, 0, 0.15, 1], "easeOut", loadingSpring, "linear"], repeat }, x: { duration: 1.68, times: [0, 0.2083, 0.3869, 0.506, 0.9998, 0.9999, 1], ease: ["linear", [0, 0, 0.15, 1], loadingSpring, "linear", "easeIn", "linear"], repeat }, y: { duration: 1.68, times: [0, 0.2083, 0.3869, 0.506, 0.9998, 0.9999, 1], ease: ["linear", [0, 0, 0.15, 1], loadingSpring, "linear", "easeIn", "linear"], repeat } }}
+          />
+          <motion.img
+            src={loadingAssets.corner}
+            alt=""
+            className="absolute bottom-[11.65%] right-[43.79%] h-[44.74%] w-[44.67%] will-change-transform"
+            initial={reducedMotion ? false : { opacity: 0, scaleX: 1, scaleY: 1, x: 0, y: 0 }}
+            animate={reducedMotion ? { opacity: 1, scaleX: 1, scaleY: 1, x: 0, y: 0 } : { opacity: [0, 1, 1, 0, 0], scaleX: [1, 1, 1.06, 1, 1], scaleY: [1, 1, 0.95, 1, 1], x: [0, 0, 4, 0, 0], y: [0, 0, -2, 0, 0] }}
+            transition={{ opacity: { duration: 1.68, times: [0, 0.1786, 0.9998, 0.9999, 1], ease: [[0, 0, 0.3, 1], "linear", "easeIn", "linear"], repeat }, scaleX: { duration: 1.68, times: [0, 0.3988, 0.4345, 0.6548, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat }, scaleY: { duration: 1.68, times: [0, 0.3988, 0.4345, 0.6548, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat }, x: { duration: 1.68, times: [0, 0.3988, 0.4345, 0.6845, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat }, y: { duration: 1.68, times: [0, 0.3988, 0.4345, 0.6845, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat } }}
+          />
+          <motion.img
+            src={loadingAssets.mark}
+            alt=""
+            className="absolute bottom-[19.14%] right-[11.53%] h-[69.22%] w-[69.33%] will-change-transform"
+            initial={reducedMotion ? false : { opacity: 0, rotate: 0, scaleX: 0.85, scaleY: 0.85, x: 0, y: 0 }}
+            animate={reducedMotion ? { opacity: 1, rotate: 0, scaleX: 1, scaleY: 1, x: 0, y: 0 } : { opacity: [0, 1, 1, 0, 0], rotate: [0, 0, -3, 0, 0], scaleX: [0.85, 1, 1, 1.1, 0.95, 1, 1], scaleY: [0.85, 1, 1, 0.92, 1.05, 1, 1], x: [0, 0, 6, 0, 0], y: [0, 0, -4, 0, 0] }}
+            transition={{ opacity: { duration: 1.68, times: [0, 0.2083, 0.9998, 0.9999, 1], ease: [[0, 0, 0.3, 1], "linear", "easeIn", "linear"], repeat }, rotate: { duration: 1.68, times: [0, 0.3869, 0.4286, 0.6548, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat }, scaleX: { duration: 1.68, times: [0, 0.2083, 0.3869, 0.4167, 0.4643, 0.6548, 1], ease: [[0, 0, 0.3, 1], "linear", [0.2, 0.9, 0.3, 1], "easeOut", loadingSpring, "linear"], repeat }, scaleY: { duration: 1.68, times: [0, 0.2083, 0.3869, 0.4167, 0.4643, 0.6548, 1], ease: [[0, 0, 0.3, 1], "linear", [0.2, 0.9, 0.3, 1], "easeOut", loadingSpring, "linear"], repeat }, x: { duration: 1.68, times: [0, 0.3869, 0.4167, 0.6548, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat }, y: { duration: 1.68, times: [0, 0.3869, 0.4167, 0.6548, 1], ease: ["linear", [0.2, 0.9, 0.3, 1], loadingSpring, "linear"], repeat } }}
+          />
+        </div>
+        <p className="m-0 text-center text-[14px] font-normal leading-[1.4] text-kumo-default">
+          Loading conversation...
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function clampChatWidth(width: number, containerWidth?: number) {
   if (!isBrowser) {
     return Math.max(MIN_CHAT_WIDTH, Math.min(DEFAULT_CHAT_WIDTH, width));
   }
@@ -62,6 +113,8 @@ export interface CloudOsWorkspaceSplitProps {
   /** 右栏收起时依然保留的窄边栏宽度(原文件的 Outputs rail)。 */
   railWidth?: number;
   rail?: ReactNode;
+  /** 覆盖整个聊天 + 工作区主体；页面级导航应放在分栏外。 */
+  isLoading?: boolean;
 }
 
 export function CloudOsWorkspaceSplit({
@@ -70,6 +123,7 @@ export function CloudOsWorkspaceSplit({
   workspaceOpen,
   railWidth = 0,
   rail,
+  isLoading = false,
 }: CloudOsWorkspaceSplitProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const resizeSessionRef = useRef<ResizeSession | null>(null);
@@ -184,6 +238,7 @@ export function CloudOsWorkspaceSplit({
     <div
       ref={containerRef}
       className="relative flex h-full min-h-0 flex-1 overflow-hidden bg-kumo-base"
+      aria-busy={isLoading}
     >
       {/* ── 左:聊天 ──────────────────────────────────────────────────────── */}
       <div
@@ -199,7 +254,7 @@ export function CloudOsWorkspaceSplit({
 
       {/* ── 拖拽把手 ─────────────────────────────────────────────────────── */}
       <div
-        className={`relative flex-shrink-0 cursor-col-resize touch-none overflow-visible bg-kumo-line ${transitionClass}`}
+        className={`cos-workspace-divider relative flex-shrink-0 cursor-col-resize touch-none overflow-visible bg-kumo-line ${transitionClass}`}
         style={{ width: workspaceOpen ? 1 : 0 }}
         onPointerDown={handleResizePointerDown}
         onPointerMove={handleResizePointerMove}
@@ -223,6 +278,8 @@ export function CloudOsWorkspaceSplit({
       </div>
 
       {rail}
+
+      {isLoading && <CloudOsConversationLoading />}
     </div>
   );
 }

package/cloud-os/primitives/collapsible.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+  );
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

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

@@ -11,7 +11,7 @@ const buttonBaseClassName =
 
 const buttonToneClassNames = {
   primary:
-    "!h-9 bg-kumo-contrast px-3 text-kumo-inverse enabled:hover:bg-kumo-strong disabled:opacity-50",
+    "!h-9 bg-gradient-to-br from-[#FFD077] to-[#FF9938] px-3 text-white enabled:hover:opacity-90 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:
@@ -59,7 +59,7 @@ export function WorkshopIconButton({
 }: WorkshopIconButtonProps) {
   const toneClassName =
     tone === "primary"
-      ? "bg-kumo-contrast text-kumo-inverse enabled:hover:bg-kumo-strong enabled:hover:text-kumo-inverse"
+      ? "bg-[var(--primary,var(--color-kumo-brand))] text-[var(--primary-foreground,var(--text-color-kumo-inverse))] enabled:hover:bg-[var(--primary-hover,var(--color-kumo-brand-hover))]"
       : 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";

package/cloud-os/styles/cloud-os.css

@@ -99,6 +99,7 @@
   --radius-2xl: 1rem;
 
   --spacing: 0.25rem;
+  --cos-conversation-max-width: 48rem;
 
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -341,6 +342,54 @@
   display: none;
 }
 
+.cos-model-select {
+  --cos-model-select-bg: #fff;
+  --cos-model-select-border: rgb(0 0 0 / 7%);
+  --cos-model-select-text: #000;
+  --cos-model-select-muted: rgb(0 0 0 / 50%);
+  --cos-model-select-disabled: rgb(0 0 0 / 30%);
+  --cos-model-select-highlight: rgb(0 0 0 / 3%);
+  border-color: var(--cos-model-select-border);
+  background: var(--cos-model-select-bg);
+  box-shadow: 0 8px 14px rgb(0 0 0 / 6%);
+  color: var(--cos-model-select-text);
+  font-family: "Inter Variable", Inter, sans-serif;
+}
+
+.cos-model-select__item[data-highlighted] {
+  background: var(--cos-model-select-highlight);
+}
+
+.cos-model-select__item[data-disabled] {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.cos-model-select__name {
+  color: var(--cos-model-select-text);
+}
+
+.cos-model-select__name[data-muted] {
+  color: var(--cos-model-select-muted);
+}
+
+.cos-model-select__plan {
+  color: var(--cos-model-select-muted);
+}
+
+.cos-model-select__plan[data-disabled] {
+  color: var(--cos-model-select-disabled);
+}
+
+[data-cloud-os-portal][data-mode="dark"].cos-model-select {
+  --cos-model-select-bg: #343434;
+  --cos-model-select-border: rgb(255 255 255 / 10%);
+  --cos-model-select-text: #fff;
+  --cos-model-select-muted: rgb(255 255 255 / 50%);
+  --cos-model-select-disabled: rgb(255 255 255 / 30%);
+  --cos-model-select-highlight: rgb(255 255 255 / 7%);
+}
+
 .cos-chat-panel {
   scrollbar-width: thin;
   scrollbar-color: var(--color-kumo-line) transparent;
@@ -356,6 +405,13 @@
   background: transparent;
 }
 
+.cos-workspace-divider {
+  transition: background-color var(--default-transition-duration) ease;
+}
+.cos-workspace-divider:hover {
+  background-color: var(--color-kumo-interact);
+}
+
 /* ============================================================================
  * 以下整段来自 ChatInterface.module.css —— CSS Module 类名改成 cos- 全局前缀
  * ========================================================================== */
@@ -365,6 +421,9 @@
   line-height: 1.6;
   overflow-wrap: anywhere;
 }
+.cos-user-markdown :where(p, li) {
+  white-space: pre-wrap;
+}
 .cos-markdown p {
   margin: 0.4em 0;
 }
@@ -469,8 +528,12 @@
   font-weight: 600;
 }
 .cos-markdown img {
-  max-width: 100%;
+  max-width: min(100%, 16rem);
+  max-height: 13rem;
+  width: auto;
   height: auto;
+  border-radius: 0.75rem;
+  object-fit: contain;
 }
 
 /* ── 输入框容器(container query 决定「添加资源」标签是否显示)─────────────── */
@@ -502,6 +565,24 @@
   flex: none;
 }
 
+/* Trace 新块进入时轻推上浮；已有块更新不会重复播放。 */
+.cos-trace-chain > * {
+  animation: cos-trace-enter 180ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+
+@keyframes cos-trace-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cos-trace-chain > * {
+    animation: none;
+  }
+}
+
 /* ── 流式占位:Thinking 扫光 ──────────────────────────────────────────────── */
 .cos-thinking-shimmer {
   color: var(--text-color-kumo-inactive);
@@ -527,14 +608,64 @@
   }
 }
 
+.cos-thinking-star {
+  animation: cos-thinking-star 1.4s ease-in-out infinite;
+}
+
+@keyframes cos-thinking-star {
+  0%, 100% {
+    transform: scale(0.82);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
+  [data-sd-animate] {
+    animation: none !important;
+  }
+
+  .cos-thinking-star,
   .cos-thinking-shimmer {
     animation: none;
+  }
+
+  .cos-thinking-shimmer {
     background: none;
     -webkit-text-fill-color: currentColor;
   }
 }
 
+/* ── 原位提问:逐题横向切换 ─────────────────────────────────────────────── */
+.cos-ask-user-question[data-direction="forward"] {
+  animation: cos-ask-user-forward 180ms ease-out;
+}
+
+.cos-ask-user-question[data-direction="back"] {
+  animation: cos-ask-user-back 180ms ease-out;
+}
+
+@keyframes cos-ask-user-forward {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+}
+
+@keyframes cos-ask-user-back {
+  from {
+    opacity: 0;
+    transform: translateX(-24px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cos-ask-user-question {
+    animation: none !important;
+  }
+}
+
 /* ── 观察类 markdown(行内、紧凑)────────────────────────────────────────── */
 .cos-observation-markdown {
   line-height: 1.5;

package/demo/camel-chat-showcase.tsx

@@ -15,11 +15,13 @@ import {
 import {
   commands as sharedCommands,
   defaultPrompt,
+  demoAskUserResponse,
   demoModels,
   finalToolNames,
   flowSteps,
   messagesForScenario,
   scenarios,
+  type DemoAskUserResponse,
   type DemoScenario,
   type DemoScenarioMeta,
 } from "./chat-scenarios";
@@ -42,7 +44,7 @@ export function CamelChatShowcase() {
   const [theme, setTheme] = useState<"light" | "dark">("dark");
   const [scenario, setScenario] = useState<DemoScenario>(initialScenario);
   const [prompt, setPrompt] = useState(defaultPrompt);
-  const [humanAnswer, setHumanAnswer] = useState("管理层");
+  const [humanAnswer, setHumanAnswer] = useState(demoAskUserResponse);
   const [model, setModel] = useState<string>(demoModels[0].value);
   const [value, setValue] = useState("");
   const [attachments, setAttachments] =
@@ -70,7 +72,8 @@ export function CamelChatShowcase() {
           : {};
       return (
         record.type === "tool-write_file" ||
-        record.type === "tool-cancel_schedule"
+        record.type === "tool-cancel_schedule" ||
+        record.type === "tool-schedule"
       ) &&
         record.state === "approval-requested"
         ? { id: "camel-demo-approval", approved: approval }
@@ -254,6 +257,14 @@ export function CamelChatShowcase() {
             }}
             onApprove={(_approvalId, decision) => {
               const approved = decision !== "deny";
+              if (scenario === "schedule_create") {
+                setApproval(approved);
+                selectScenario(approved ? "schedule" : "submitted");
+                setLastEvent(approved
+                  ? "Scheduled task created"
+                  : "Schedule creation cancelled");
+                return;
+              }
               if (scenario === "schedule_cancel") {
                 setApproval(approved);
                 setLastEvent(
@@ -274,20 +285,17 @@ export function CamelChatShowcase() {
             onAnswer={(payload) => {
               const data =
                 payload && typeof payload === "object"
-                  ? (payload as {
-                      selections?: string[][];
-                      text?: string;
-                    })
-                  : {};
-              const answer = [
-                ...(data.selections?.flat() ?? []),
-                data.text?.trim() ?? "",
-              ]
+                  ? (payload as DemoAskUserResponse)
+                  : { answers: [] };
+              const answer = data.answers.flatMap((item) => [
+                ...item.selections,
+                item.text?.trim() ?? "",
+              ])
                 .filter(Boolean)
                 .join("、");
-              if (answer) setHumanAnswer(answer);
+              if (data.answers.length > 0) setHumanAnswer(data);
               selectScenario("planning");
-              setLastEvent(`已回答并继续：${answer || humanAnswer}`);
+              setLastEvent(`已回答并继续：${answer}`);
             }}
             getToolApproval={approvalView}
           />