chatkit

多语言

界面文字跟随 settings.locale：zh-CN（默认）或 en-US。

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

const adapter = createMockAdapter({});

// 界面文字跟随 settings.locale：执行流、状态行、按钮提示、占位文字都会切换。
export default function Locale() {
  const runtime = useChatRuntime({ sessionId: 'locale', adapter });
  const [locale, setLocale] = useState<'zh-CN' | 'en-US'>('en-US');
  if (!runtime) return null;
  return (
    <div className="demo-column">
      <div className="demo-bar">
        <label>
          <input type="radio" checked={locale === 'en-US'} onChange={() => setLocale('en-US')} /> en-US
        </label>
        <label>
          <input type="radio" checked={locale === 'zh-CN'} onChange={() => setLocale('zh-CN')} /> zh-CN
        </label>
      </div>
      <div className="demo-main">
        <Chatkit runtime={runtime} settings={{ locale, recommendations: ['Show me what you can do'] }} />
      </div>
    </div>
  );
}
locale 设为 en-US新窗口打开

用法

<Chatkit sessions={sessions} settings={{ locale: 'en-US' }} />

聊天区内置的执行流、状态行、按钮提示和失败卡片文案会切换。运行中改 locale，界面跟着换；后端返回的错误说明仍保留原文。

SessionList 是独立组件，不读取旁边 <Chatkit> 的设置。可显式传入同一个语言，或把两者放在配置了 settings.locale 的 <ChatkitProvider> 下：

<ChatkitProvider sessions={sessions} settings={{ locale: 'en-US' }}>
  <SessionList />
  <Chatkit />
</ChatkitProvider>

配置项

配置项类型默认说明
settings.locale"zh-CN" | "en-US"'zh-CN'界面语言。
settings.placeholderstring随 locale输入框占位文字。

说明

  • 消息内容由后端决定，chatkit 不翻译。
  • 业务方自己填的文字（settings.welcome、settings.placeholder、插槽里的内容）由业务方按语言给出。
  • 语音输入的识别函数会收到当前语言，见语音输入。