#适配器与内容扩展 API

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

import { Chatkit, type ChatkitRuntime, useChatRuntime } from '@volcengine/chatkit';
import { createOpenAiAdapter, type OpenAiChunk } from '@volcengine/chatkit/adapters/openai';
import type { StreamEvent } from '@volcengine/chatkit/core';
import { useState } from 'react';

// 模拟后端的结构化事件序列。真实 WebSocket 接入把订阅消息转换成同一形状。
const adapter = createOpenAiAdapter({
  run: async ({ body, runId }) =>
    (async function* (): AsyncGenerator<StreamEvent<OpenAiChunk>> {
      if (!body.messages.some(message => message.role === 'tool')) {
        yield {
          eventId: `${runId}:1`,
          data: {
            choices: [
              {
                index: 0,
                delta: {
                  tool_calls: [
                    {
                      index: 0,
                      id: `lookup:${runId}`,
                      type: 'function',
                      function: { name: 'lookup', arguments: '{"orderId":"A1024"}' },
                    },
                  ],
                },
              },
            ],
          },
        };
        yield { eventId: `${runId}:2`, data: { tool_title: '正在核实订单 A1024', tool_call_id: `lookup:${runId}` } };
        yield { eventId: `${runId}:3`, data: { choices: [{ index: 0, delta: {}, finish_reason: 'tool_calls' }] } };
      } else {
        yield {
          eventId: `${runId}:4`,
          data: {
            choices: [{ index: 0, delta: { content: '订单已发货，以下是业务卡片。' } }],
            order: { id: 'A1024', status: '已发货' },
          },
        };
        yield { eventId: `${runId}:5`, data: { choices: [{ index: 0, delta: {}, finish_reason: 'stop' }] } };
      }
    })(),
  tools: { lookup: { execute: async () => ({ status: '已发货' }) } },
  transformInput: (_input, { defaultInput }) => ({ ...defaultInput, channel: 'web' }),
  transformOutput: (event, ctx) => {
    if (typeof event.tool_title === 'string' && typeof event.tool_call_id === 'string' && ctx.runId) {
      return [
        ...ctx.defaultChanges,
        {
          type: 'update-part',
          target: { runId: ctx.runId, toolCallId: event.tool_call_id },
          changes: { title: event.tool_title, metadata: { source: '聊天流' } },
        },
      ];
    }
    if (event.order && ctx.messageId) {
      return [
        ...ctx.defaultChanges,
        {
          type: 'set-part',
          messageId: ctx.messageId,
          part: { id: 'order:A1024', type: 'data', kind: 'shop.order', data: event.order },
        },
      ];
    }
    return undefined;
  },
});

async function loadSummary(runtime: ChatkitRuntime) {
  const message = [...runtime.store.getSnapshot().messages]
    .reverse()
    .find(message => message.content.some(part => part.type === 'tool-call'));
  const part = message?.content.find(part => part.type === 'tool-call');
  if (!message || !part?.id) return '先发送问题，生成工具调用';
  // 保存这次请求的运行时和目标，异步返回时不改当前新选中的会话。
  const target = { messageId: message.id, partId: part.id };
  await new Promise(resolve => setTimeout(resolve, 400));
  const result = await runtime.updateContent({
    type: 'update-part',
    target,
    changes: { title: '订单 A1024 已核实：预计明日送达', metadata: { source: '独立摘要接口' } },
    sourceId: 'summary-service',
    changeId: `summary:${part.id}`,
  });
  return result.ok ? '摘要已更新，工具参数、结果与执行状态保持原值' : result.message;
}

export default function AdapterExtensions() {
  const runtime = useChatRuntime({ sessionId: 'extensions-demo', adapter });
  const [status, setStatus] = useState('发送问题后，可模拟独立接口补充标题。');
  if (!runtime) return null;
  return (
    <Chatkit
      runtime={runtime}
      settings={{
        runStatus: { collapseOnComplete: false },
        tools: { groupDefaultExpanded: true, detailDefaultExpanded: true },
        recommendations: ['查一下订单 A1024'],
      }}
      slots={{
        'composer.top': (
          <div className="demo-line">
            <button type="button" className="demo-chip" onClick={() => void loadSummary(runtime).then(setStatus)}>
              模拟独立接口更新标题
            </button>
            <span role="status">{status}</span>
          </div>
        ),
      }}
      renderers={{
        tools: {
          lookup: {
            render: ({ defaultNode, metadata }) => (
              <div>
                {defaultNode}
                <small className="demo-muted">标题来源：{String(metadata?.source ?? '默认')}</small>
              </div>
            ),
          },
        },
        parts: {
          'shop.order': ({ data, part }) => (
            <div className="demo-card">
              <strong>订单 {(data as { id: string }).id}</strong>
              <p>{(data as { status: string }).status}</p>
              <small>稳定片段编号：{part.id}</small>
            </div>
          ),
        },
      }}
    />
  );
}