基线:鉴权会话+工作组+工作台三区修复+编排工作区+产品设计文档

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m

apps/web/src/features/desk-task/internal/TaskChat.tsx

@@ -1,175 +1,45 @@
 /**
- * 对话区 —— 自原型 `_components/TaskChat.tsx` 平移。
+ * 对话区 —— 「对话流是**一切回环输入的唯一入口**」(OS 4.1)。
  *
- * 「对话区**只承载非结构化消息 + 决策选择题**;事件由系统 Agent(灰头像)发进来。」
- * 对话流是**一切回环输入的唯一入口**(OS 4.1);输入侧不参与控制权转交(AM 07)。
+ * 壳(`jc-tch` 题头 / 滚动区 / composer)照原型留着;气泡与卡族备在 `chat-bubbles.tsx`。
+ * 空态文案从用人的角度写 —— 空对话是这一单刚开始时的**常态**,不是缺陷。
  */
-import { useState } from 'react';
-import type { ChatMessage } from '@contracts';
-import { AI_TAG_LABEL, EVENT_TYPE_LABEL } from '@contracts';
 import { Ico } from '@web-shared/Ico.tsx';
-import ScrollArea from '@web-shared/ScrollArea.tsx';
-
-export type TaskChatProps = {
-  readonly chat: readonly ChatMessage[];
-  readonly locked: boolean;
-  onSay(text: string): void;
-  onDecide(cardId: string, value: string, note?: string): void;
-};
-
-export function TaskChat({ chat, locked, onSay, onDecide }: TaskChatProps) {
-  const [draft, setDraft] = useState('');
-
-  const submit = () => {
-    const text = draft.trim();
-    if (text === '' || locked) return;
-    onSay(text);
-    setDraft('');
-  };
 
+export function TaskChat() {
   return (
-    <section className="session-chat">
-      <header className="jc-chat-head">
-        <span className="jc-chat-ico">
-          <Ico name="messages-square" s={16} />
+    <div className="jc-tch">
+      <header className="jc-tch-head">
+        <span className="jc-tch-mark">
+          <Ico name="bot" s={15} />
         </span>
-        <div>
-          <h2>任务助理</h2>
-          <span>对话流 · 唯一回环输入口</span>
-        </div>
+        <b className="jc-tch-name">任务助理</b>
+        <em className="jc-tch-tag">Agent</em>
+        <span className="jc-tch-desc">盯着这单推进 · 有事随时说</span>
       </header>
 
-      <ScrollArea className="jc-sa--fill" vpClassName="jc-chat-body">
-        {chat.map((msg) => (
-          <Bubble key={msg.id} msg={msg} onDecide={onDecide} />
-        ))}
-        {chat.length === 0 && (
-          <div className="jc-list-empty">
-            <Ico name="messages-square" s={18} />
-            还没有对话
-          </div>
-        )}
-      </ScrollArea>
-
-      {/* composer 锁:有卡在等作答时锁住自由输入,逼回卡上作答 */}
-      <footer className={'jc-composer' + (locked ? ' locked' : '')}>
-        <textarea
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-              e.preventDefault();
-              submit();
-            }
-          }}
-          placeholder={locked ? '有卡在等你作答 —— 请先在卡上回答' : '说点什么…(Enter 发送)'}
-          disabled={locked}
-          rows={2}
-        />
-        <button className="jc-btn primary" onClick={submit} disabled={locked || draft.trim() === ''}>
-          发送
-        </button>
-      </footer>
-    </section>
-  );
-}
-
-/** 气泡二元制:AI / 我;系统事件走灰头像 */
-function Bubble({ msg, onDecide }: { msg: ChatMessage; onDecide: TaskChatProps['onDecide'] }) {
-  if (msg.k === 'ai') {
-    return (
-      <div className="jc-bubble side-ai">
-        <span className="jc-ava ai">AI</span>
-        <div className="jc-bubble-body">
-          {msg.tag !== undefined && <b className={'jc-tag tag-' + msg.tag}>{AI_TAG_LABEL[msg.tag]}</b>}
-          <p>{msg.text}</p>
+      <div className="jc-tch-scroll">
+        <div className="jc-empty t-brand">
+          <span className="jc-empty-art">
+            <i className="r1" />
+            <i className="r2" />
+            <span className="jc-empty-ico">
+              <Ico name="messages-square" s={26} />
+            </span>
+          </span>
+          <b>还没有消息</b>
+          <p>AI 有结论、要派工、或者要你拿个主意,都会在这里说。你也可以随时交代两句。</p>
         </div>
       </div>
-    );
-  }
 
-  if (msg.k === 'human') {
-    return (
-      <div className="jc-bubble side-me">
-        <div className="jc-bubble-body">
-          <p>{msg.text}</p>
+      <div className="copilot-composer session-composer">
+        <div className="composer-row">
+          <textarea rows={2} disabled placeholder="有什么要补充或交代的?" />
+          <button className="copilot-send" disabled>
+            <Ico name="send" s={14} /> 发送
+          </button>
         </div>
       </div>
-    );
-  }
-
-  if (msg.k === 'system') {
-    return (
-      <div className="jc-bubble side-sys">
-        <span className="jc-ava sys">
-          <Ico name="bot" s={14} />
-        </span>
-        <div className="jc-bubble-body">
-          <b className="jc-tag tag-event">{EVENT_TYPE_LABEL[msg.type]}事件</b>
-          <p>{msg.text}</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (msg.k === 'decision') {
-    // 对话区只做选择题 —— 决策卡
-    return (
-      <div className="jc-bubble side-ai">
-        <span className="jc-ava ai">AI</span>
-        <div className="jc-bubble-body jc-card-decide">
-          <p className="jc-card-ask">{msg.ask}</p>
-          <dl className="jc-basis">
-            {msg.basis.map((b, i) => (
-              <div key={i}>
-                <dt>{b.k}</dt>
-                <dd>{b.v}</dd>
-              </div>
-            ))}
-          </dl>
-          <div className="jc-options">
-            {msg.options.map((o) => (
-              <button
-                key={o.value}
-                className={'jc-opt' + (o.recommended === true ? ' recommended' : '') + (msg.chosen?.value === o.value ? ' chosen' : '')}
-                disabled={msg.chosen !== undefined}
-                onClick={() => onDecide(msg.id, o.value)}
-              >
-                <b>{o.label}</b>
-                {o.detail !== undefined && <span>{o.detail}</span>}
-                {o.consequence !== undefined && <em>{o.consequence}</em>}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (msg.k === 'elicitation') {
-    return (
-      <div className="jc-bubble side-ai">
-        <span className="jc-ava ai">AI</span>
-        <div className="jc-bubble-body jc-card-fill">
-          <p className="jc-card-ask">{msg.ask}</p>
-          <ul>
-            {msg.fields.map((f) => (
-              <li key={f.key}>{f.label}</li>
-            ))}
-          </ul>
-          {msg.done !== undefined && <p className="jc-card-done">已作答</p>}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="jc-bubble side-ai">
-      <span className="jc-ava ai">AI</span>
-      <div className="jc-bubble-body jc-card-rate">
-        <p className="jc-card-ask">{msg.ask}</p>
-        {msg.done !== undefined && <p className="jc-card-done">已评价 {msg.done.score} 分</p>}
-      </div>
     </div>
   );
 }