TRAE-AI编程
OpenAI ChatKit 主题与定制
完成ChatKit快速开始后，可进一步调整主题与嵌入式聊天的外观：选择明暗主题、强调色、密度及圆角，使其符合应用风格。
概览
通过选项对象定制主题。按快速开始在前端嵌入时，使用React方式：
- React：向
useChatKit({...})传入选项。 - 高级集成：通过
chatkit.setOptions({...})设置选项。
两种集成的选项对象结构相同。
探索定制选项
ChatKit Studio提供可运行实现和交互构建工具。喜欢边试边学时，可从这些资源开始。
探索ChatKit界面
- chatkit.world：交互演示。
- Widget Builder：浏览可用组件。
- ChatKit Playground：通过演示实际尝试。
查看可运行示例
更改主题
通过颜色、字体等设置匹配产品外观。下例切换为深色，修改颜色、圆角、信息密度和字体。全部选项见主题API参考。
来源示例 1（javascript）：
// [中文] 示例1：更改主题。
// [中文] 配置深色、蓝色强调色、圆角、紧凑密度和Inter字体；这里只构造options，需传给useChatKit或setOptions。
const options = {
theme: {
colorScheme: "dark",
color: {
accent: {
primary: "#2D8CFF",
level: 2,
},
},
radius: "round",
density: "compact",
typography: { fontFamily: "'Inter', sans-serif" },
},
};定制起始界面文字
通过修改输入框占位文字，告诉用户可以提问什么，或引导首次输入。
来源示例 2（javascript）：
// [中文] 示例2：定制起始界面文字。
// [中文] 输入框占位文字为“询问有关数据的任何问题”，起始问候为“欢迎使用FeedbackBot”；可按产品语言定制。
const options = {
composer: {
placeholder: "Ask anything about your data…",
},
startScreen: {
greeting: "Welcome to FeedbackBot!",
},
};为新对话显示起始提示
新建对话时建议一些提问或操作，帮助用户开始：
来源示例 3（javascript）：
// [中文] 示例3：为新对话显示起始提示。
// [中文] 起始问候为“今天想构建什么”；两个建议分别用于查询工单状态及创建新支持工单。
// [中文] name是展示名称，prompt是实际提交的文本，图标标识按SDK写法保留。
const options = {
startScreen: {
greeting: "What can I help you build today?",
prompts: [
{
name: "Check on the status of a ticket",
prompt: "Can you help me check on the status of a ticket?",
icon: "search",
},
{
name: "Create Ticket",
prompt: "Can you help me create a new support ticket?",
icon: "write",
},
],
},
};为顶部栏添加自定义按钮
自定义按钮可提供导航、上下文或与集成相关的操作。
来源示例 4（javascript）：
// [中文] 示例4：为顶部栏添加自定义按钮。
// [中文] 顶部左右按钮分别调用个人设置及主页导航函数；openProfileSettings和openHomePage由应用实现。
const options = {
header: {
customButtonLeft: {
icon: "settings-cog",
onClick: () => openProfileSettings(),
},
customButtonRight: {
icon: "home",
onClick: () => openHomePage(),
},
},
};启用文件附件
附件默认关闭，需要添加配置启用。除自定义后端外，必须使用hosted上传策略。其他上传策略如何配合自定义后端，见Python SDK文档。还可控制附件数量、大小和类型。
来源示例 5（javascript）：
// [中文] 示例5：启用文件附件。
// [中文] 启用hosted附件上传，最多3个文件，单文件20×1024×1024字节；允许PDF和指定图像扩展名。
// [中文] 这只是本示例前端限制，不宣称是所有ChatKit后端的全局上传上限；服务端也应验证。
const options = {
composer: {
attachments: {
uploadStrategy: { type: "hosted" },
maxSize: 20 * 1024 * 1024, // 20 MB per file
maxCount: 3,
accept: { "application/pdf": [".pdf"], "image/*": [".png", ".jpg"] },
},
},
};用实体标签在输入框启用@提及
让用户通过@标记自定义“实体”，增加对话上下文与交互能力。onTagSearch按查询返回实体列表，onClick处理实体点击。
来源示例 6（javascript）：
// [中文] 示例6：用实体标签在输入框启用@提及。
// [中文] 演示返回人物Jane Doe和“季度计划”文档，分组分别为人物、文档；当前代码忽略query，并非真实搜索。
// [中文] 点击实体后交给navigateToEntity导航；实际查询与权限由应用实现。
const options = {
entities: {
async onTagSearch(query) {
void query;
return [
{
id: "user_123",
title: "Jane Doe",
group: "People",
interactive: true,
},
{
id: "document_123",
title: "Quarterly Plan",
group: "Documents",
interactive: true,
},
];
},
onClick: (entity) => {
navigateToEntity(entity.id);
},
},
};定制实体标签外观
通过组件定制鼠标悬停时的实体预览，例如名片、文档摘要或图像。可用Widget Builder浏览组件。
来源示例 7（javascript）：
// [中文] 示例7：定制实体标签外观。
// [中文] 悬停预览返回Card，文字显示实体资料及“角色：开发者”；本片段搜索列表为空，仅演示预览结构。
const options = {
entities: {
async onTagSearch() {
return [];
},
onRequestPreview: async (entity) => ({
preview: {
type: "Card",
children: [
{ type: "Text", value: `Profile: ${entity.title}` },
{ type: "Text", value: "Role: Developer" },
],
},
}),
},
};为输入框添加自定义工具
让用户从输入栏触发应用特有操作。所选工具会作为工具偏好发送给模型。
来源示例 8（javascript）：
// [中文] 示例8：为输入框添加自定义工具。
// [中文] 在输入框固定显示“添加笔记”工具；该选项作为模型工具偏好，不等于这里已执行笔记写入。
const options = {
composer: {
tools: [
{
id: "add-note",
label: "Add Note",
icon: "write",
pinned: true,
},
],
},
};切换界面区域与功能
需要比顶部栏现有选项更多的定制、并希望自行实现时，可禁用主要界面区域或功能。用例没有对话线程与历史概念时，例如某些支持聊天机器人，也可关闭历史。
来源示例 9（javascript）：
// [中文] 示例9：切换界面区域与功能。
// [中文] 关闭ChatKit的历史区和顶部栏显示；隐藏界面不等于删除服务器保存的历史数据。
const options = {
history: { enabled: false },
header: { enabled: false },
};覆盖区域语言设置
默认使用浏览器的区域语言。应用有统一语言设置时，可显式覆盖：
来源示例 10（javascript）：
// [中文] 示例10：覆盖区域语言设置。
// [中文] 来源用de-DE演示覆盖为德国德语；它不是中文设置，实际产品应选择SDK支持的目标区域语言。
const options = {
locale: "de-DE",
};
更多建议：