#对话轮次导航

import { Chatkit, useChatRuntime } from '@volcengine/chatkit';
import { createMockAdapter, type MockChatInput } from '@volcengine/chatkit/adapters/mock';
import type { ChatRuntimeAdapter } from '@volcengine/chatkit/core';
import '@volcengine/chatkit/styles.css';

const QUESTIONS = [
  '这个项目是做什么的',
  '目录结构怎么看',
  '本地怎么跑起来',
  '怎么接自己的后端',
  '样式能改到什么程度',
  '上线前要检查什么',
];

const answer = (question: string) =>
  [
    `## ${question}`,
    '先说结论，再分几点展开。下面的内容只是为了把一轮对话撑到一屏左右，方便看清左侧导航条跟着滚动变化。',
    [
      '1. 先确认要解决的问题，再决定用哪一种接入方式。',
      '2. 能用默认行为的地方不要改，改了的地方写清楚原因。',
      '3. 每一步都留下可以回看的记录，出了问题知道从哪查起。',
    ].join('\n'),
    '> 小提示：把鼠标移到左侧的短横线上，可以看到这一轮的提问和回答开头；点一下就跳到那一轮。',
    '最后补一句：对话不满三轮时导航条不显示，轮次多了才有必要。',
  ].join('\n\n');

const TEN_MINUTES = 10 * 60 * 1000;
const STARTED_AT = Date.now() - QUESTIONS.length * TEN_MINUTES;

const mock = createMockAdapter({ history: false });
// 预置六轮历史，一打开就能看到导航条：在 Mock 外面包一层，补上取历史的方法。
const adapter: ChatRuntimeAdapter<MockChatInput> = {
  start: ingress => mock.start(ingress),
  run: (request, context) => mock.run(request, context),
  abort: (request, context) => mock.abort?.(request, context) ?? Promise.resolve(false),
  regenerate: (request, context) => mock.regenerate?.(request, context) ?? Promise.resolve(false),
  edit: (request, context) => mock.edit?.(request, context) ?? Promise.resolve(false),
  acceptedFileTypes: mock.acceptedFileTypes,
  history: async () => ({
    hasMore: false,
    messages: QUESTIONS.flatMap((question, index) => {
      const runId = `seed-run:${index}`;
      const createdAt = STARTED_AT + index * TEN_MINUTES;
      return [
        {
          id: `user:${runId}`,
          role: 'user' as const,
          runId,
          createdAt,
          parts: [{ id: 'text:user:0', type: 'text' as const, text: question }],
        },
        {
          id: `assistant:${runId}`,
          role: 'assistant' as const,
          runId,
          createdAt,
          parts: [{ id: 'text:0', type: 'text' as const, text: answer(question) }],
        },
      ];
    }),
  }),
};

// 对话轮次导航：消息区左侧的一列短横线，每条对应一轮对话，当前看到的那一轮加深显示。
export default function ConversationNavigation() {
  const runtime = useChatRuntime({ sessionId: 'conversation-navigation', adapter });
  if (!runtime) return null;
  return <Chatkit runtime={runtime} />;
}