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

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

@@ -10,7 +10,7 @@ import {
 /**
  * 左聊天 / 右工作区的双栏骨架。从 cloudflare-os-main `GadgetEditor.tsx` 的 BODY
  * 段拷来:同一条 1px 的 kumo-line 分隔即拖拽把手、同一套 pointer capture 拖拽
- * (拖过 iframe 也不丢)、同一个 200ms 的收起/展开过渡、同一条顶部推进条。
+ * (拖过 iframe 也不丢)、同一个 200ms 的收起/展开过渡。
  *
  * 适配点:原文件把左右两侧的内容写死成 ChatInterface / GadgetUI,这里换成
  * children 插槽;chatWidth 的 localStorage key 换成 cloud-os 自己的。
@@ -24,11 +24,12 @@ const WORKSPACE_TRANSITION_MS = 200;
 
 const isBrowser = typeof window !== "undefined";
 
-function clampChatWidth(width: number) {
+function clampChatWidth(width: number, containerWidth?: 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);
+  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));
 }
 
@@ -48,13 +49,16 @@ function getInitialChatWidth() {
   return clampChatWidth(Number.isFinite(parsed) ? parsed : fallback);
 }
 
+type ResizeSession = {
+  startX: number;
+  startWidth: number;
+};
+
 export interface CloudOsWorkspaceSplitProps {
   chat: ReactNode;
   workspace: ReactNode;
   /** 关掉右栏时聊天占满整宽。 */
   workspaceOpen: boolean;
-  /** 顶部那条推进条:回合进行中显示。 */
-  isAgentActive?: boolean;
   /** 右栏收起时依然保留的窄边栏宽度(原文件的 Outputs rail)。 */
   railWidth?: number;
   rail?: ReactNode;
@@ -64,27 +68,43 @@ export function CloudOsWorkspaceSplit({
   chat,
   workspace,
   workspaceOpen,
-  isAgentActive = false,
   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) => clampChatWidth(width));
+    const onResize = () => setChatWidth((width) => clampToContainer(width));
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
-  }, []);
+  }, [clampToContainer]);
 
   const persistChatWidth = useCallback((width: number) => {
     try {
@@ -94,11 +114,24 @@ export function CloudOsWorkspaceSplit({
     }
   }, []);
 
+  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);
     },
@@ -107,9 +140,9 @@ export function CloudOsWorkspaceSplit({
   const handleResizePointerMove = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
-      setChatWidth(clampChatWidth(event.clientX));
+      setChatWidth(widthFromPointer(event.clientX));
     },
-    [],
+    [widthFromPointer],
   );
   const handleResizePointerUp = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
@@ -119,12 +152,13 @@ export function CloudOsWorkspaceSplit({
       const width =
         event.type === "pointercancel"
           ? chatWidthRef.current
-          : clampChatWidth(event.clientX);
+          : widthFromPointer(event.clientX);
+      resizeSessionRef.current = null;
       setChatWidth(width);
       persistChatWidth(width);
       setIsResizing(false);
     },
-    [persistChatWidth],
+    [persistChatWidth, widthFromPointer],
   );
 
   useEffect(() => {
@@ -147,18 +181,10 @@ export function CloudOsWorkspaceSplit({
   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
+      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} ${

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

@@ -356,23 +356,6 @@
   background: transparent;
 }
 
-/* ── 顶部推进条(isAgentActive)──────────────────────────────────────────── */
-@keyframes cos-thinking {
-  0% {
-    left: -33%;
-  }
-  50% {
-    left: 100%;
-  }
-  100% {
-    left: -33%;
-  }
-}
-
-.cos-progress-sweep {
-  animation: cos-thinking 1.5s ease-in-out infinite;
-}
-
 /* ============================================================================
  * 以下整段来自 ChatInterface.module.css —— CSS Module 类名改成 cos- 全局前缀
  * ========================================================================== */
@@ -505,6 +488,20 @@
   }
 }
 
+/* ── 活动指示:回合在跑但屏幕上没东西在动时 ──────────────────────────────── */
+.cos-activity {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 20px;
+  color: var(--text-color-kumo-subtle);
+}
+
+/* 球是固定 20px 的画布,不许被 flex 压扁。 */
+.cos-activity canvas {
+  flex: none;
+}
+
 /* ── 流式占位:Thinking 扫光 ──────────────────────────────────────────────── */
 .cos-thinking-shimmer {
   color: var(--text-color-kumo-inactive);
@@ -536,9 +533,6 @@
     background: none;
     -webkit-text-fill-color: currentColor;
   }
-  .cos-progress-sweep {
-    animation: none;
-  }
 }
 
 /* ── 观察类 markdown(行内、紧凑)────────────────────────────────────────── */

package/demo/cloud-os-chat-showcase.tsx

@@ -283,7 +283,6 @@ export function CloudOsChatShowcase() {
 
       <CloudOsWorkspaceSplit
         workspaceOpen={workspaceOpen}
-        isAgentActive={status === "submitted" || status === "streaming"}
         chat={
           <div className="flex h-full min-h-0 flex-col bg-kumo-base">
             <aside
@@ -376,20 +375,21 @@ export function CloudOsChatShowcase() {
                 setValue("");
                 setLastEvent(`已发送后续问题：${text}`);
               }}
-              onAnswer={(payload) => {
+              onRespond={async (_toolCallId, response) => {
                 const data =
-                  payload && typeof payload === "object"
-                    ? (payload as { selections?: string[][]; text?: string })
+                  response && typeof response === "object"
+                    ? (response as { selections?: string[]; text?: string })
                     : {};
                 const answer = [
-                  ...(data.selections?.flat() ?? []),
+                  ...(data.selections ?? []),
                   data.text?.trim() ?? "",
                 ]
                   .filter(Boolean)
-                  .join("、");
+                  .join(" / ");
                 if (answer) setHumanAnswer(answer);
                 selectScenario("planning");
                 setLastEvent(`已回答并继续：${answer || humanAnswer}`);
+                return true;
               }}
             />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.2",
+  "version": "0.1.3-alpha.4",
   "type": "module",
   "files": [
     "src",

package/src/camel/camel-chat-messages.tsx

@@ -1,3 +1,8 @@
+// camel 是 dev-only 的展示变体(App.tsx 的 `/__camel-chat` 路由),没有接生产宿主。
+// 它的交互卡片仍用旧的 `onAnswer(payload)` 回调,**没有**迁到 client-settled tool 的
+// `onRespond(toolCallId, response)` —— 生产聊天面板走的是 cloud-os,已经迁完。
+// 哪天 camel 要上生产,这里必须一起改,否则卡片点了不会把答案回写给那次工具调用。
+
 import type { UIMessage } from "ai";
 import {
   ArrowDownIcon,

package/src/camel/camel-prompt-input.tsx

@@ -39,6 +39,7 @@ import {
   type ReactNode,
 } from "react";
 import { ComposerTriggerPopover } from "../composer/composer-trigger-popover";
+import { isComposingKeyEvent } from "../composer/key-rules";
 import type { ComposerCommand } from "../composer/types";
 import { cn } from "../internal/cn";
 
@@ -345,7 +346,7 @@ function CamelPromptInputContent({
     if (
       event.key === "Enter" &&
       !event.shiftKey &&
-      !event.nativeEvent.isComposing
+      !isComposingKeyEvent(event.nativeEvent)
     ) {
       event.preventDefault();
       submit();

package/src/chat-summary-panel.tsx

@@ -103,7 +103,7 @@ export function ChatSummaryPanel({
   return (
     <aside
       className={cn(
-        "w-[19rem] min-w-0 max-w-full overflow-hidden rounded-2xl border border-border bg-popover shadow-card",
+        "absolute right-3 top-11 z-30 w-[19rem] min-w-0 max-w-[calc(100%-1.5rem)] overflow-hidden rounded-2xl border border-border bg-popover shadow-card",
         "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200 motion-reduce:animate-none",
         className,
       )}

package/src/composer/chat-composer.tsx

@@ -10,6 +10,7 @@ import {
   type KeyboardEvent,
 } from "react";
 import { cn } from "../internal/cn";
+import { isComposingKeyEvent } from "./key-rules";
 import { Composer } from "./composer";
 import type {
   ChatComposerProps,
@@ -152,7 +153,7 @@ function ChatComposerInner<TAttachment>(
     if (
       (event.key === "Enter" &&
         !event.shiftKey &&
-        !event.nativeEvent.isComposing) ||
+        !isComposingKeyEvent(event.nativeEvent)) ||
       event.key === "Tab"
     ) {
       const command = filtered[active] ?? filtered[0];

package/src/composer/composer-trigger-popover.tsx

@@ -156,7 +156,7 @@ function Items({
                     {item.label}
                   </span>
                   {item.description && (
-                    <span className="ms-5.5 text-xs leading-tight text-muted-foreground">
+                    <span className="ms-5.5 w-full truncate text-xs leading-tight text-muted-foreground">
                       {item.description}
                     </span>
                   )}

package/src/composer/composer.tsx

@@ -26,6 +26,7 @@ import {
   Attachments,
 } from "./composer-attachments";
 import { useComposerDrop } from "./drop-controller";
+import { isComposingKeyEvent } from "./key-rules";
 import type {
   ComposerAttachmentView,
   ComposerProps,
@@ -247,7 +248,7 @@ function ComposerInner<TAttachment>(
     if (
       event.key === "Enter" &&
       !event.shiftKey &&
-      !event.nativeEvent.isComposing
+      !isComposingKeyEvent(event.nativeEvent)
     ) {
       event.preventDefault();
       if (canSend) void submit();

package/src/composer/index.ts

@@ -3,4 +3,5 @@ export * from "./composer-attachments";
 export * from "./composer-trigger-popover";
 export * from "./chat-composer";
 export * from "./drop-controller";
+export * from "./key-rules";
 export * from "./types";

package/src/composer/key-rules.ts

@@ -0,0 +1,12 @@
+/**
+ * Whether Enter belongs to an input method rather than to the Composer.
+ *
+ * Both signals are honoured on their own: some Chinese input methods report only the
+ * legacy `keyCode === 229`, and either one alone means a word is still being composed.
+ */
+export function isComposingKeyEvent(event: {
+  isComposing?: boolean;
+  keyCode?: number;
+}): boolean {
+  return event.isComposing === true || event.keyCode === 229;
+}

package/src/styles/index.css

@@ -2128,7 +2128,10 @@
   min-height: 120px;
   gap: 0;
   border-radius: 16px;
-  background: #1c1c1a;
+  /* 这里曾写死 #1c1c1a,于是 light 档下输入框还是近黑的。
+     表面色一律走 token:--mp-card → --card(light #fff / dark #1c1c1c)。
+     本节其余几个写死色是状态/图标强调色(琥珀、蓝),两档背景上都读得出来,不在此列。 */
+  background: var(--mp-card);
   box-shadow: none;
 }