#完整示例：对话应用

import '@volcengine/chatkit/styles.css';

import {
  Chatkit,
  type ChatkitDataPartRenderer,
  type ChatkitMentionSource,
  ChatkitProvider,
  type ChatkitUploader,
  SessionList,
  useChatSessions,
  useComposer,
  useCurrentRun,
  useCurrentSession,
} from '@volcengine/chatkit';
import { createMockAdapter } from '@volcengine/chatkit/adapters/mock';
import { useState } from 'react';

import { localUpload } from '../backends/local-upload';
import { useDemoSessions } from '../sessions';

// 适配器：见「接入后端」。整个应用一个实例，换后端只改这一段。
// transformOutput 把后端的输出变成回答里的业务数据：这里在搜索完成后带上一张参考资料卡片。
const adapter = createMockAdapter({
  transformOutput: (step, context) => {
    const parts = (() => {
      if (step.kind !== 'tool' || step.name !== 'search') return undefined;
      const { results = [] } = step.result as { results?: { title: string }[] };
      return [{ id: 'sources', type: 'data' as const, kind: 'acme.sources', data: results.map(item => item.title) }];
    })();
    return parts && context.messageId
      ? [
          ...context.defaultChanges,
          ...parts.map(part => ({ type: 'set-part' as const, messageId: context.messageId!, part })),
        ]
      : undefined;
  },
});

// 附件：见「内置功能 › 附件」。上传由页面实现，这里用本地地址代替。
const upload: ChatkitUploader = localUpload;

// @ 提及：见「内置功能 › @ 与 /」。
const mention: ChatkitMentionSource = {
  option: [
    { label: '数据分析助手', value: 'data-agent' },
    { label: '代码审查助手', value: 'review-agent' },
  ],
};

// 业务卡片：见「定制 › 业务卡片」。按数据类型登记组件。
const Sources: ChatkitDataPartRenderer = ({ data }) => (
  <div className="demo-card">
    <header>参考资料</header>
    {(data as string[]).map(title => (
      <div key={title}>· {title}</div>
    ))}
  </div>
);

const KNOWLEDGE_BASES = ['产品手册', '常见问题'];
const TEMPLATES = ['总结这个会话的结论', '把上面的回答改写成邮件', '列出还没解决的问题'];

// 页面顶栏：当前会话的标题和这次打开后完成的轮数。公开 hooks 在 ChatkitProvider 下面都能用。
function AppHeader({ rounds }: { rounds: number }) {
  const { session } = useCurrentSession();
  return (
    <header className="demo-app-header">
      <strong>{session?.title ?? '新会话'}</strong>
      <span className="demo-muted">已完成 {rounds} 轮</span>
    </header>
  );
}

// 页面右侧：这一轮的状态，和几条常用提问。点一条把它填进输入框。
function AppRail() {
  const run = useCurrentRun();
  const composer = useComposer();
  return (
    <aside className="demo-app-rail">
      <section className="demo-rail-card">
        <h4>任务进度</h4>
        <div className="demo-rail-row" data-status={run?.status ?? 'idle'}>
          <i />
          {run ? (run.finishedAt ? '这一轮已结束' : '正在处理') : '还没有开始'}
        </div>
        {run?.workItems?.total ? (
          <div className="demo-rail-row" data-status={run.workItems.active ? 'running' : 'completed'}>
            <i />
            步骤 {run.workItems.total - run.workItems.active} / {run.workItems.total}
          </div>
        ) : null}
      </section>
      <section className="demo-rail-card">
        <h4>常用提问</h4>
        {TEMPLATES.map(template => (
          <button
            key={template}
            type="button"
            className="demo-rail-row"
            onClick={() => {
              composer.setText(template);
              composer.focus();
            }}
          >
            <span>{template}</span>
          </button>
        ))}
      </section>
    </aside>
  );
}

export default function FullApp() {
  // 会话层：见「指南 › 两种用法」。会话列表和聊天区用同一个返回值。
  const { chat: sessions, listProps } = useDemoSessions({ adapter });
  const [ratings, setRatings] = useState<Record<string, 'like' | 'dislike' | undefined>>({});
  const [starred, setStarred] = useState<string[]>([]);
  const [knowledgeBase, setKnowledgeBase] = useState<string>();
  const [rounds, setRounds] = useState(0);
  const pickNext = () =>
    setKnowledgeBase(current => KNOWLEDGE_BASES[current ? KNOWLEDGE_BASES.indexOf(current) + 1 : 0]);

  return (
    // ChatkitProvider 把页面包起来，顶栏和右侧栏才能用公开 hooks；props 写在它上面，<Chatkit /> 从它取。
    <ChatkitProvider
      sessions={sessions}
      // 设置：见「参考 › 配置参考」。只填值。
      settings={{
        welcome: '有什么可以帮忙的？',
        placeholder: '问点什么，输入 @ 提及助手',
        recommendations: ['帮我查一下接入步骤', '写一份本周周报', '模拟一次失败'],
      }}
      // 内置功能：见「内置功能 › 总览」。附件、赞踩、提及给了函数或候选项才显示；
      // 重新生成、编辑后重发来自后端，不用配置。
      features={{
        attachments: { upload },
        feedback: {
          ratings,
          onRate: (rating, message) => setRatings(current => ({ ...current, [message.id]: rating })),
        },
        mentions: { mention },
      }}
      // 插槽：见「定制 › 插槽」。按位置放页面自己的内容。
      slots={{
        'session.top': <div className="demo-line demo-line--notice">公告：周五 18:00 起停机维护一小时</div>,
        'composer.toolbarStart': (
          <button type="button" className="demo-chip" aria-pressed={Boolean(knowledgeBase)} onClick={pickNext}>
            知识库
          </button>
        ),
        'composer.bodyTop': knowledgeBase ? <span className="demo-badge">参考：{knowledgeBase}</span> : null,
        'composer.bottom': <div className="demo-legal">内容由人工智能模型生成，请注意甄别</div>,
      }}
      // 渲染器：见「定制 › 业务卡片」「工具展示」「失败卡片与系统提示」。发一句带「失败」的话看失败卡片。
      renderers={{
        parts: { 'acme.sources': Sources },
        tools: { search: { runningLabel: '正在查资料', successLabel: '已查到资料' } },
        errors: {
          MODEL_OVERLOADED: ({ formattedContent }) => (
            <div className="demo-card">
              <header>现在用的人有点多</header>
              <span className="demo-muted">{formattedContent}</span>
            </div>
          ),
        },
      }}
      // 发送前处理：见「定制 › 发送前处理 onSend」。把选中的知识库带给后端。
      onSend={input => ({ ...input, metadata: { ...input.metadata, knowledgeBase } })}
      // 事件：见「可观测 › 事件」。每一轮结束时收到 run_settled。
      onEvent={event => {
        if (event.name === 'run_settled') setRounds(count => count + 1);
      }}
    >
      <div className="demo-app">
        {/* 会话列表：见「内置功能 › 会话列表」。itemActions 在每一行的菜单里，itemBadge 在标题后。 */}
        <SessionList
          {...listProps}
          header={<div className="demo-brand">Acme 助手</div>}
          footer={<div className="demo-user">Chloe</div>}
          itemBadge={({ session }) => (starred.includes(session.id) ? <span>★</span> : null)}
          itemActions={({ session }) => (
            <button type="button" onClick={() => setStarred(current => [...current, session.id])}>
              收藏
            </button>
          )}
        />
        <div className="demo-app-main">
          <AppHeader rounds={rounds} />
          <div className="demo-app-body">
            <div className="demo-main">
              <Chatkit />
            </div>
            <AppRail />
          </div>
        </div>
      </div>
    </ChatkitProvider>
  );
}