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

/**
 * 对话区 —— 「对话流是**一切回环输入的唯一入口**」(OS 4.1)。
 *
 * 壳(`jc-tch` 题头 / 滚动区 / composer)由 `ChatStream` 自己带;这里只做取数与回传:
 * 说一句、答卡、答工单,回传后按键失效,画面由服务端重投影(前端零过程状态)。
 *
 * **有内容就渲染内容,没内容才落空态** —— 空对话是这一单刚开始时的常态,不是缺陷;
 * 但一旦真有话,占位就变成了谎:角标说有、正文说没有,人会以为坏了。
 */
import { useMutation, useQueryClient } from '@tanstack/react-query';
import type { ChatCardReply, TaskDetail, WorkOrderReply } from '@contracts';
import { replyChatCardRoute, replyWorkOrderRoute, sayRoute } from '@contracts';
import { call } from '@web-shared/typed-fetch.ts';
import { Ico } from '@web-shared/Ico.tsx';
import { EmptyState } from '@web-shared/desk/module-kit.tsx';
import { ChatStream } from './chat-bubbles.tsx';

export function TaskChat({ detail, onLocate }: { detail: TaskDetail; onLocate: (orderId: string) => void }) {
  const queryClient = useQueryClient();
  const taskId = detail.card.id;

  /** 回传后一律重取任务投影 —— 卡与工单的状态由服务端说,前端不自行推演 */
  const refresh = () => {
    void queryClient.invalidateQueries({ queryKey: ['desk', 'task', taskId] });
    void queryClient.invalidateQueries({ queryKey: ['desk', 'tasks'] });
  };

  const say = useMutation({
    mutationFn: (text: string) => call(sayRoute, { params: { taskId }, body: { text } }),
    onSuccess: refresh,
  });
  const replyCard = useMutation({
    mutationFn: (reply: ChatCardReply) => call(replyChatCardRoute, { body: { reply } }),
    onSuccess: refresh,
  });
  const replyOrder = useMutation({
    mutationFn: (reply: WorkOrderReply) => call(replyWorkOrderRoute, { body: { reply } }),
    onSuccess: refresh,
  });

  if (detail.chat.length === 0) {
    return (
      <div className="jc-tch">
        <header className="jc-tch-head">
          <span className="jc-tch-mark">
            <Ico name="bot" s={15} />
          </span>
          <b className="jc-tch-name">任务助理</b>
          <em className="jc-tch-tag">Agent</em>
          <span className="jc-tch-desc">盯着这单推进</span>
        </header>
        <div className="jc-tch-scroll">
          <EmptyState
            ico="messages-square"
            tone="brand"
            title="还没有消息"
            desc="AI 有结论、要派工、或者要你拿个主意,都会在这里说。你也可以随时交代两句。"
          />
        </div>
        <div className="copilot-composer session-composer">
          <div className="composer-row">
            <textarea
              rows={2}
              placeholder="有什么要补充或交代的?"
              onKeyDown={(e) => {
                if (e.key !== 'Enter' || e.shiftKey) return;
                e.preventDefault();
                const text = e.currentTarget.value.trim();
                if (text !== '') {
                  say.mutate(text);
                  e.currentTarget.value = '';
                }
              }}
            />
            <button className="copilot-send" disabled={say.isPending}>
              <Ico name="send" s={14} /> 发送
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <ChatStream
      chat={detail.chat}
      orders={detail.workOrders}
      thinking={say.isPending}
      onSay={(text) => say.mutate(text)}
      onReplyCard={(reply) => replyCard.mutate(reply)}
      onReplyOrder={(reply) => replyOrder.mutate(reply)}
      onLocate={onLocate}
    />
  );
}