#失败卡片与系统提示

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

import { Chatkit, useChatkitActions, useChatRuntime } from '@volcengine/chatkit';
import { createMockAdapter } from '@volcengine/chatkit/adapters/mock';
import type { CSSProperties } from 'react';
import { useState } from 'react';

// Mock 的 run-failed 场景在失败时给出 code: MODEL_OVERLOADED。
const adapter = createMockAdapter({ getScenarioId: () => 'run-failed' });

// 本文件可作为 Vite 的 src/App.tsx 使用；页面布局不依赖文档站的 demo-* 样式。
const buttonStyle = (active = false): CSSProperties => ({
  padding: '6px 10px',
  border: '1px solid #b8b7c3',
  borderRadius: 8,
  background: active ? '#0b0b0f' : '#fff',
  color: active ? '#fff' : '#0b0b0f',
  cursor: 'pointer',
});

// 整卡自定义：按钮发送一条新消息，不重跑失败的原 run。
function BusyCard({ text }: { text: string }) {
  const { send } = useChatkitActions();
  return (
    <div style={{ padding: 12, border: '1px solid #d6d6dd', borderRadius: 8, background: '#fff' }}>
      <header>整卡自定义：现在用的人有点多</header>
      <span style={{ color: '#666' }}>{text}</span>
      <footer>
        <button type="button" style={buttonStyle()} onClick={() => void send('请再试一次')}>
          发送新消息
        </button>
      </footer>
    </div>
  );
}

// 同一个 Mock 失败码、同一个精确 renderer：比较原样默认、覆盖文案和整卡自定义。
export default function ErrorRenderers() {
  const [mode, setMode] = useState<'sdk' | 'patch' | 'custom'>('sdk');
  const runtime = useChatRuntime({ sessionId: 'error-renderers', adapter });
  if (!runtime) return null;
  return (
    <div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: '#fff' }}>
      <div
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: 8,
          alignItems: 'center',
          padding: 12,
          borderBottom: '1px solid #e8e8ec',
        }}
      >
        <strong>
          Mock <code>run-failed</code> → <code>MODEL_OVERLOADED</code> → 精确键命中
        </strong>
        <button
          type="button"
          style={buttonStyle(mode === 'sdk')}
          aria-pressed={mode === 'sdk'}
          onClick={() => setMode('sdk')}
        >
          SDK 原样默认
        </button>
        <button
          type="button"
          style={buttonStyle(mode === 'patch')}
          aria-pressed={mode === 'patch'}
          onClick={() => setMode('patch')}
        >
          覆盖默认卡片文案
        </button>
        <button
          type="button"
          style={buttonStyle(mode === 'custom')}
          aria-pressed={mode === 'custom'}
          onClick={() => setMode('custom')}
        >
          整卡自定义
        </button>
      </div>
      <div style={{ flex: 1, minHeight: 0, minWidth: 0 }}>
        <Chatkit
          runtime={runtime}
          settings={{ recommendations: ['开始一个会失败的任务'] }}
          renderers={{
            errors: {
              MODEL_OVERLOADED: ({ formattedContent, renderDefault }) =>
                mode === 'sdk' ? (
                  renderDefault()
                ) : mode === 'patch' ? (
                  renderDefault({
                    title: 'renderDefault：模型暂时繁忙',
                    content: '**正文已由宿主覆盖。**\n\n卡片样式仍由 Chatkit 绘制。',
                  })
                ) : (
                  <BusyCard text={formattedContent} />
                ),
              '*': ({ defaultNode, code }) => (
                <>
                  {defaultNode}
                  <small style={{ color: '#666' }}>错误码 {code}，可以反馈给管理员</small>
                </>
              ),
            },
          }}
        />
      </div>
    </div>
  );
}

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

const adapter = createMockAdapter({ getScenarioId: () => 'context-compaction' });

// 系统提示（上下文已压缩）：没有头像、没有操作栏的提示条，插在用户消息与回答之间。
// 内置的 chatkit.notice 不用登记；自己的类型登记在 renderers.events 里。
export default function ConversationEvents() {
  const runtime = useChatRuntime({ sessionId: 'conversation-events', adapter });
  if (!runtime) return null;
  return <Chatkit runtime={runtime} settings={{ recommendations: ['继续我们刚才的讨论'] }} />;
}