【学 AI，上 L 站】千问点奶茶是如何实现的？

* { box-sizing: border-box; padding: 0; margin: 0; } html, body, #root { height: 100%; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; } /* 整个滚动条 */ ::-webkit-scrollbar { width: 8px; /* 竖向滚动条宽度 */ height: 8px; /* 横向滚动条高度 */ } /* 滚动条轨道背景 */ ::-webkit-scrollbar-track { background: #e5ebf7; } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } /* hover 状态 */ ::-webkit-scrollbar-thumb:hover { background: #555; }

import * as React from 'react' import './App.css' function App() { return ( <div className="app"> <div className="chat-list">消息列表</div> <div className="chat-sender">输入框</div> </div> ) } export default App

.app { display: flex; flex-direction: column; height: 100vh; background: #e5ebf7; } .chat-list { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 8px; overflow: auto; } .chat-sender { display: flex; flex-shrink: 0; padding: 8px; }

import { GithubOutlined, SmileOutlined } from '@ant-design/icons' import { Bubble } from '@ant-design/x' import { XMarkdown } from '@ant-design/x-markdown' import { Avatar } from 'antd' import * as React from 'react' import './App.css' function App() { return ( <div className="app"> <div className="chat-list"> <Bubble content={'你是谁'} header={<h5>铲屎官</h5>} avatar={<Avatar icon={<SmileOutlined style={{ fontSize: 26 }} />} />} // 人类消息，靠右布局 placement={'end'} /> <Bubble content={<XMarkdown content={`你好👋，我是***立夏猫***`} />} header={<h5>立夏猫</h5>} avatar={<Avatar icon={<GithubOutlined style={{ fontSize: 26 }} />} />} // 模型消息，靠左布局 placement={'start'} /> </div> <div className="chat-sender">输入框</div> </div> ) } export default App

/** 历史消息 */ export interface Message { /** 消息唯一 id */ id: string /** * role 是 openai 定义的，表明消息的类型。 * 不同的 role， <Bubble /> 的 header、avatar、placement 应该渲染不同的内容 */ role: 'system' | 'user' | 'assistant' | 'tool' | 'developer' /** 消息的内容。由 <Bubble /> 的 content 渲染 */ content: string }

import { GithubOutlined, SmileOutlined } from '@ant-design/icons' import { Bubble } from '@ant-design/x' import { XMarkdown } from '@ant-design/x-markdown' import { Avatar } from 'antd' import * as React from 'react' import type { Message } from './type' import './App.css' function App() { const [history, setHistory] = React.useState<Message[]>([ { id: '0', /** 系统提示词 */ role: 'system', content: '模型是立夏猫，自称“本喵“。模型要以猫的身份，服侍主子，性格可爱，回复简洁', }, { id: '1', /** 人类的消息 */ role: 'user', content: '你是谁', }, { id: '2', /** 模型的消息 */ role: 'assistant', content: `你好👋，我是***立夏猫***`, }, ]) return ( <div className="app"> <div className="chat-list"> {history.map((message) => { const key = `${message.id}` const content = message.content /** 没有内容，不渲染 */ if (!content) return null switch (message.role) { /** 系统提示词，不在 UI 上显示，渲染时隐藏 */ case 'system': { return null } /** 用户的消息 */ case 'user': { return ( <Bubble key={key} content={<XMarkdown content={content} />} header={<h5>铲屎官</h5>} avatar={ <Avatar icon={<SmileOutlined style={{ fontSize: 26 }} />} /> } // 人类消息，靠右布局 placement={'end'} /> ) } /** 模型的消息 */ case 'assistant': { return ( <Bubble key={key} content={<XMarkdown content={content} />} header={<h5>立夏猫</h5>} avatar={ <Avatar icon={<GithubOutlined style={{ fontSize: 26 }} />} /> } // 模型消息，靠左布局 placement={'start'} /> ) } } return null })} </div> <div className="chat-sender">输入框</div> </div> ) } export default App

import { GithubOutlined, SmileOutlined } from '@ant-design/icons' import { Bubble, Sender } from '@ant-design/x' import { XMarkdown } from '@ant-design/x-markdown' import { Avatar } from 'antd' import * as React from 'react' import type { Message } from './type' import './App.css' function App() { const [input, setInput] = React.useState('') const [history, setHistory] = React.useState<Message[]>([ { id: '0', /** 系统提示词 */ role: 'system', content: '模型是立夏猫，自称“本喵“。模型要以猫的身份，服侍主子，性格可爱，回复简洁', }, { id: '1', /** 人类的消息 */ role: 'user', content: '你是谁', }, { id: '2', /** 模型的消息 */ role: 'assistant', content: `你好👋，我是***立夏猫***`, }, ]) const onSubmit = () => { /** 新建一个消息 */ const message: Message = { id: `${history.length}`, role: 'user', content: input, } /** 把消息加入列表末尾 */ setHistory([...history, message]) /** 清空输入框 */ setInput('') } return ( <div className="app"> <div className="chat-list"> {history.map((message) => { const key = `${message.id}` const content = message.content /** 没有内容，不渲染 */ if (!content) return null switch (message.role) { /** 系统提示词，不在 UI 上显示，渲染时隐藏 */ case 'system': { return null } /** 用户的消息 */ case 'user': { return ( <Bubble key={key} content={<XMarkdown content={content} />} header={<h5>铲屎官</h5>} avatar={ <Avatar icon={<SmileOutlined style={{ fontSize: 26 }} />} /> } // 人类消息，靠右布局 placement={'end'} /> ) } /** 模型的消息 */ case 'assistant': { return ( <Bubble key={key} content={<XMarkdown content={content} />} header={<h5>立夏猫</h5>} avatar={ <Avatar icon={<GithubOutlined style={{ fontSize: 26 }} />} /> } // 模型消息，靠左布局 placement={'start'} /> ) } } return null })} </div> <div className="chat-sender"> <Sender /** 输入框，数据双向绑定 */ value={input} onChange={(input) => { setInput(input) }} styles={{ root: { background: 'white' }, }} /** 点击发送按钮 */ onSubmit={onSubmit} /> </div> </div> ) } export default App

import OpenAI from 'openai' import type { Message, Sync } from './type' const apiKey = 'your-key-here' export const client = new OpenAI({ apiKey, /** 既然喝了千问的奶茶，当然要用千问的接口 */ baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1', dangerouslyAllowBrowser: true, }) /** 「历史消息」转为「对话消息」 */ const getMessages = (history: Message[]) => { /** 对话消息 */ const messages: OpenAI.ChatCompletionMessageParam[] = [] /** * 1. 把「历史消息」转为「对话消息」，传给模型，让模型补全对话。 * 2. 模型输出的文字，存入「历史消息」尾部。 * 3. 下一个新的提交触发，「历史消息」转为「对话消息」，供下一次补全使用，循环往复。 */ history.forEach((msg) => { switch (msg.role) { case 'system': case 'user': { const message: OpenAI.ChatCompletionMessageParam = { role: msg.role, content: msg.content, } messages.push(message) break } case 'assistant': { const message: OpenAI.ChatCompletionAssistantMessageParam = { role: msg.role, content: msg.content, } messages.push(message) break } } }) return messages } export const chatCompletion = async (sync: Sync) => { sync.waiting = true /** 把「历史消息」转为「对话消息」 */ const messages = getMessages(sync.history) /** 调用模型接口 */ const stream = await client.chat.completions.create({ /** 既然喝了千问的奶茶，当然要用千问的模型 */ model: 'qwen-flash', messages, tools: [], stream: true, }) for await (const event of stream) { sync.waiting = false console.dir(event, { depth: 10 }) } }

import OpenAI from 'openai' import type { Message, Sync } from './type' const apiKey = 'your-key-here' export const client = new OpenAI({ apiKey, /** 既然喝了千问的奶茶，当然要用千问的接口 */ baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1', dangerouslyAllowBrowser: true, }) /** 「历史消息」转为「对话消息」 */ const getMessages = (history: Message[]) => { /** 对话消息 */ const messages: OpenAI.ChatCompletionMessageParam[] = [] /** * 1. 把「历史消息」转为「对话消息」，传给模型，让模型补全对话。 * 2. 模型输出的文字，存入「历史消息」尾部。 * 3. 下一个新的提交触发，「历史消息」转为「对话消息」，供下一次补全使用，循环往复。 */ history.forEach((msg) => { switch (msg.role) { case 'system': case 'user': { const message: OpenAI.ChatCompletionMessageParam = { role: msg.role, content: msg.content, } messages.push(message) break } case 'assistant': { const message: OpenAI.ChatCompletionAssistantMessageParam = { role: msg.role, content: msg.content, } messages.push(message) break } } }) return messages } export const chatCompletion = async (sync: Sync) => { sync.waiting = true /** 把「历史消息」转为「对话消息」 */ const messages = getMessages(sync.history) /** 调用模型接口 */ const stream = await client.chat.completions.create({ /** 既然喝了千问的奶茶，当然要用千问的模型 */ model: 'qwen-flash', messages, tools: [], stream: true, }) for await (const event of stream) { const choice = event.choices[0] const role = choice?.delta.role const delta_content = choice?.delta?.content || '' const initMessage: Message = { /** 唯一 id，查找「历史消息」使用 */ id: event.id, role: role || 'assistant', content: '', } /**「历史消息」列表里，按 id 查找当前的回复 */ const lastMessage = sync.history.find((t) => t.id === event.id) const message = lastMessage || initMessage if (!lastMessage) { /** * 查找当前的回复在「历史消息」列表里吗？ * 1. 不在：新建一条，加入「历史消息」尾部 * 2. 在：累加 delta content 形成完整的句子 */ sync.history.push(message) } if (choice?.finish_reason) { message.finish_reason = choice?.finish_reason } const nextContent = message.content + delta_content if (nextContent !== message.content) { /** delta content 可能是空字符串，有变化才更新 */ message.content = nextContent sync.waiting = false } } }

import OpenAI from 'openai' /** 历史消息 */ export interface Message { /** 消息唯一 id */ id: string /** * role 是 openai 定义的，表明消息的类型。 * 不同的 role， <Bubble /> 的 header、avatar、placement 应该渲染不同的内容 */ role: 'system' | 'user' | 'assistant' | 'tool' | 'developer' /** 消息的内容。由 <Bubble /> 的 content 渲染 */ content: string /** 停止原因 */ finish_reason?: OpenAI.ChatCompletionChunk.Choice['finish_reason'] } export interface Sync { /** 历史消息 */ history: Message[] /** 消息第一个词，是否在等待中 */ waiting: boolean }

import OpenAI from 'openai' /** 历史消息 */ export interface Message { /** 消息唯一 id */ id: string /** * role 是 openai 定义的，表明消息的类型。 * 不同的 role， <Bubble /> 的 header、avatar、placement 应该渲染不同的内容 */ role: 'system' | 'user' | 'assistant' | 'tool' | 'developer' /** 消息的内容。由 <Bubble /> 的 content 渲染 */ content: string /** 停止原因 */ finish_reason?: OpenAI.ChatCompletionChunk.Choice['finish_reason'] } export interface Sync { /** 历史消息 */ history: Message[] /** 消息第一个词，是否在等待中 */ waiting: boolean /** 更新 UI 页面 */ forceUpdate?: () => void }

import OpenAI from 'openai' import * as React from 'react' import type { Message, Sync } from './type' const apiKey = 'your-key-here' export const client = new OpenAI({ apiKey, /** 既然喝了千问的奶茶，当然要用千问的接口 */ baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1', dangerouslyAllowBrowser: true, }) /** 「历史消息」转为「对话消息」 */ const getMessages = (history: Message[]) => { /** 对话消息 */ const messages: OpenAI.ChatCompletionMessageParam[] = [] /** * 1. 把「历史消息」转为「对话消息」，传给模型，让模型补全对话。 * 2. 模型输出的文字，存入「历史消息」尾部。 * 3. 下一个新的提交触发，「历史消息」转为「对话消息」，供下一次补全使用，循环往复。 */ history.forEach((msg) => { switch (msg.role) { case 'system': case 'user': { const message: OpenAI.ChatCompletionMessageParam = { role: msg.role, content: msg.content, } messages.push(message) break } case 'assistant': { const message: OpenAI.ChatCompletionAssistantMessageParam = { role: msg.role, content: msg.content, } messages.push(message) break } } }) return messages } export const chatCompletion = async (sync: Sync): any => { sync.waiting = true sync.forceUpdate?.() /** 把「历史消息」转为「对话消息」 */ const messages = getMessages(sync.history) /** 调用模型接口 */ const stream = await client.chat.completions.create({ /** 既然喝了千问的奶茶，当然要用千问的模型 */ model: 'qwen-flash', messages, tools: [], stream: true, }) for await (const event of stream) { const choice = event.choices[0] const role = choice?.delta.role const delta_content = choice?.delta?.content || '' const initMessage: Message = { /** 唯一 id，查找「历史消息」使用 */ id: event.id, role: role || 'assistant', content: '', } /**「历史消息」列表里，按 id 查找当前的回复 */ const lastMessage = sync.history.find((t) => t.id === event.id) const message = lastMessage || initMessage if (!lastMessage) { /** * 查找当前的回复在「历史消息」列表里吗？ * 1. 不在：新建一条，加入「历史消息」尾部 * 2. 在：累加 delta content 形成完整的句子 */ sync.history.push(message) } if (choice?.finish_reason) { message.finish_reason = choice?.finish_reason } const nextContent = message.content + delta_content if (nextContent !== message.content) { /** delta content 可能是空字符串，有变化才更新 */ message.content = nextContent sync.waiting = false sync.forceUpdate?.() } } } export function useSyncState<T>(value: T & { forceUpdate?: () => void }) { const [, setValue] = React.useState(1) const forceUpdate = () => setValue((previous) => previous + 1) const ref = React.useRef(value) ref.current.forceUpdate = forceUpdate return ref.current }

import { GithubOutlined, SmileOutlined } from '@ant-design/icons' import { Bubble, Sender } from '@ant-design/x' import { XMarkdown } from '@ant-design/x-markdown' import { Avatar, message } from 'antd' // <- 导入 message import * as React from 'react' import { chatCompletion, useSyncState } from './common' import type { Message, Sync } from './type' import './App.css' function App() { const [input, setInput] = React.useState('') const [history, setHistory] = React.useState<Message[]>([ { id: '0', /** 系统提示词 */ role: 'system', content: '模型是立夏猫，自称“本喵“。模型要以猫的身份，服侍主子，性格可爱，回复简洁', }, { id: '1', /** 人类的消息 */ role: 'user', content: '你是谁', }, { id: '2', /** 模型的消息 */ role: 'assistant', content: `你好👋，我是***立夏猫***`, }, ]) const sync = useSyncState<Sync>({ history: [ { id: '0', /** 系统提示词 */ role: 'system', content: '模型是立夏猫，自称“本喵“。模型要以猫的身份，服侍主子，性格可爱，回复简洁', }, ], waiting: false, }) const tryChat = async () => { try { await chatCompletion(sync) } catch (e: any) { message.error(e.message) throw e } finally { sync.waiting = false sync.forceUpdate?.() } } const onSubmit = () => { /** 新建一个消息 */ const message: Message = { id: `${history.length}`, id: `${sync.history.length}`, role: 'user', content: input, } /** 把消息加入列表末尾 */ setHistory([...history, message]) sync.history.push(message) /** 清空输入框 */ setInput('') /** 补全对话 */ tryChat() } return ( <div className="app"> <div className="chat-list"> {/* 👇sync.history 替换 history */} {sync.history.map((message) => { const key = `${message.id}` const content = message.content /** 没有内容，不渲染 */ if (!content) return null switch (message.role) { /** 系统提示词，不在 UI 上显示，渲染时隐藏 */ case 'system': { return null } /** 用户的消息 */ case 'user': { return ( <Bubble key={key} content={<XMarkdown content={content} />} header={<h5>铲屎官</h5>} avatar={ <Avatar icon={<SmileOutlined style={{ fontSize: 26 }} />} /> } // 人类消息，靠右布局 placement={'end'} /> ) } /** 模型的消息 */ case 'assistant': { return ( <Bubble key={key} content={<XMarkdown content={content} />} header={<h5>立夏猫</h5>} avatar={ <Avatar icon={<GithubOutlined style={{ fontSize: 26 }} />} /> } // 模型消息，靠左布局 placement={'start'} /> ) } } return null })} {sync.waiting ? ( <Bubble loading={true} key="waiting" content="" header={<h5>立夏猫</h5>} avatar={ <Avatar icon={<GithubOutlined style={{ fontSize: 26 }} />} /> } placement={'start'} /> ) : null} </div> <div className="chat-sender"> <Sender /** 输入框，数据双向绑定 */ value={input} onChange={(input) => { setInput(input) }} styles={{ root: { background: 'white' }, }} /** 点击发送按钮 */ onSubmit={onSubmit} /> </div> </div> ) } export default App

import OpenAI from 'openai' import * as React from 'react' import z from 'zod' import type { Message, Sync } from './type' const apiKey = 'your-key-here' export const client = new OpenAI({ apiKey, /** 既然喝了千问的奶茶，当然要用千问的接口 */ baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1', dangerouslyAllowBrowser: true, }) /** 声明工具 */ const tools: OpenAI.ChatCompletionFunctionTool[] = [ { type: 'function', function: { name: 'get_time', description: '获取北京时间', /** 无参数 */ parameters: z.object().optional().toJSONSchema(), strict: true, }, }, ] /** 「历史消息」转为「对话消息」 */ const getMessages = (history: Message[]) => { /** 对话消息 */ const messages: OpenAI.ChatCompletionMessageParam[] = [] /** * 1. 把「历史消息」转为「对话消息」，传给模型，让模型补全对话。 * 2. 模型输出的文字，存入「历史消息」尾部。 * 3. 下一个新的提交触发，「历史消息」转为「对话消息」，供下一次补全使用，循环往复。 */ history.forEach((msg) => { switch (msg.role) { case 'system': case 'user': { const message: OpenAI.ChatCompletionMessageParam = { role: msg.role, content: msg.content, } messages.push(message) break } case 'assistant': { const message: OpenAI.ChatCompletionAssistantMessageParam = { role: msg.role, content: msg.content, } messages.push(message) break } } }) return messages } export const chatCompletion = async (sync: Sync): any => { sync.waiting = true sync.forceUpdate?.() /** 把「历史消息」转为「对话消息」 */ const messages = getMessages(sync.history) /** 调用模型接口 */ const stream = await client.chat.completions.create({ /** 既然喝了千问的奶茶，当然要用千问的模型 */ model: 'qwen-flash', messages, tools: [], /** 传入工具*/ tools, stream: true, }) for await (const event of stream) { const choice = event.choices[0] const role = choice?.delta.role const delta_content = choice?.delta?.content || '' const initMessage: Message = { /** 唯一 id，查找「历史消息」使用 */ id: event.id, role: role || 'assistant', content: '', } /**「历史消息」列表里，按 id 查找当前的回复 */ const lastMessage = sync.history.find((t) => t.id === event.id) const message = lastMessage || initMessage if (!lastMessage) { /** * 查找当前的回复在「历史消息」列表里吗？ * 1. 不在：新建一条，加入「历史消息」尾部 * 2. 在：累加 delta content 形成完整的句子 */ sync.history.push(message) } if (choice?.finish_reason) { message.finish_reason = choice?.finish_reason } const nextContent = message.content + delta_content if (nextContent !== message.content) { /** delta content 可能是空字符串，有变化才更新 */ message.content = nextContent sync.waiting = false sync.forceUpdate?.() } console.log(choice?.delta?.tool_calls) } } export function useSyncState<T>(value: T & { forceUpdate?: () => void }) { const [, setValue] = React.useState(1) const forceUpdate = () => setValue((previous) => previous + 1) const ref = React.useRef(value) ref.current.forceUpdate = forceUpdate return ref.current }

import { chatCompletion } from './common' import type { Sync } from './type' /** 控制台，模拟 UI 层数据结构 */ const sync: Sync = { /** 历史消息 */ history: [ { id: '0', role: 'system', /** 系统提示词 */ content: '模型是立夏猫，自称“本喵“。模型要以猫的身份，服侍主子，性格可爱，回复简洁', }, ], /** 消息第一个词，是否在等待中 */ waiting: false, } /** * 模拟用户点击了“提交“按钮： * 1. <Sender /> 组件触发了 onSubmit 事件 * 2. onSubmit 响应函数内，把输入框里的文字加入了「历史消息」尾部 */ sync.history.push({ id: '1', /** 人类的消息 */ role: 'user', content: '你是谁', content: '北京时间是多少', }) /** 补全对话 */ await chatCompletion(sync) console.dir(sync.history, { depth: 10 })

import OpenAI from 'openai' import * as React from 'react' import z from 'zod' import type { Message, Sync } from './type' const apiKey = 'your-key-here' export const client = new OpenAI({ apiKey, /** 既然喝了千问的奶茶，当然要用千问的接口 */ baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1', dangerouslyAllowBrowser: true, }) /** 声明工具 */ const tools: OpenAI.ChatCompletionFunctionTool[] = [ { type: 'function', function: { name: 'get_time', description: '获取北京时间', /** 无参数 */ parameters: z.object().optional().toJSONSchema(), strict: true, }, }, ] /** 「历史消息」转为「对话消息」 */ const getMessages = (history: Message[]) => { /** 对话消息 */ const messages: OpenAI.ChatCompletionMessageParam[] = [] /** * 1. 把「历史消息」转为「对话消息」，传给模型，让模型补全对话。 * 2. 模型输出的文字，存入「历史消息」尾部。 * 3. 下一个新的提交触发，「历史消息」转为「对话消息」，供下一次补全使用，循环往复。 */ history.forEach((msg) => { switch (msg.role) { case 'system': case 'user': { const message: OpenAI.ChatCompletionMessageParam = { role: msg.role, content: msg.content, } messages.push(message) break } case 'assistant': { const message: OpenAI.ChatCompletionAssistantMessageParam = { role: msg.role, content: msg.content, tool_calls: msg.tool_calls as any, } messages.push(message) break } case 'tool': { const message: OpenAI.ChatCompletionToolMessageParam = { role: msg.role, content: msg.content, tool_call_id: msg.tool_call_id!, } messages.push(message) break } } }) return messages } export const chatLoop = async (sync: Sync) => { /** 最大循环次数，避免死循环 */ let count = 1 while (count < 20) { count++ await chatCompletion(sync) const last = sync.history.at(-1) if (last?.finish_reason === 'stop') { /** 对话结束了，等待下一次提问 */ sync.waiting = false sync.forceUpdate?.() return } if (last?.finish_reason === 'tool_calls') { /** 对话暂停。执行工具调用。调用完成后恢复对话 */ for await (const tool of last.tool_calls || []) { const toolName = tool.function?.name || '' const tool_call_id = tool.id || '' switch (toolName) { case 'get_time': { const toolResult: Message = { id: `${sync.history.length}`, role: 'tool', tool_call_id, content: `现在北京时间是：${new Date().toLocaleString()}`, } sync.history.push(toolResult) break } default: break } } } } } export const chatCompletion = async (sync: Sync): any => { sync.waiting = true sync.forceUpdate?.() /** 把「历史消息」转为「对话消息」 */ const messages = getMessages(sync.history) /** 调用模型接口 */ const stream = await client.chat.completions.create({ /** 既然喝了千问的奶茶，当然要用千问的模型 */ model: 'qwen-flash', messages, /** 传入工具*/ tools, stream: true, }) for await (const event of stream) { const choice = event.choices[0] const role = choice?.delta.role const delta_content = choice?.delta?.content || '' const initMessage: Message = { /** 唯一 id，查找「历史消息」使用 */ id: event.id, role: role || 'assistant', content: '', } /**「历史消息」列表里，按 id 查找当前的回复 */ const lastMessage = sync.history.find((t) => t.id === event.id) const message = lastMessage || initMessage if (!lastMessage) { /** * 查找当前的回复在「历史消息」列表里吗？ * 1. 不在：新建一条，加入「历史消息」尾部 * 2. 在：累加 delta content 形成完整的句子 */ sync.history.push(message) } if (choice?.finish_reason) { message.finish_reason = choice?.finish_reason } const nextContent = message.content + delta_content if (nextContent !== message.content) { /** delta content 可能是空字符串，有变化才更新 */ message.content = nextContent sync.waiting = false sync.forceUpdate?.() } /** tool也是 token 序列，要累加一下 */ choice?.delta?.tool_calls?.forEach((delta_tool) => { sync.waiting = true const tool_calls = (message.tool_calls = message.tool_calls || []) const tool = tool_calls[delta_tool.index] if (!tool) { tool_calls[delta_tool.index] = delta_tool return } tool.id = tool.id || delta_tool.id tool.function = tool.function || delta_tool.function const args = (tool.function?.arguments || '') + (delta_tool.function?.arguments || '') if (args !== tool.function?.arguments) { tool.function!.arguments = args } }) } } export function useSyncState<T>(value: T & { forceUpdate?: () => void }) { const [, setValue] = React.useState(1) const forceUpdate = () => setValue((previous) => previous + 1) const ref = React.useRef(value) ref.current.forceUpdate = forceUpdate return ref.current }

import OpenAI from 'openai' import * as React from 'react' import z from 'zod' import type { Message, Sync } from './type' const apiKey = 'your-key-here' export const client = new OpenAI({ apiKey, /** 既然喝了千问的奶茶，当然要用千问的接口 */ baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1', dangerouslyAllowBrowser: true, }) /** 声明工具 */ const tools: OpenAI.ChatCompletionFunctionTool[] = [ { type: 'function', function: { name: 'get_time', description: '获取北京时间', /** 无参数 */ parameters: z.object().optional().toJSONSchema(), strict: true, }, }, { type: 'function', function: { name: 'buy_product', description: '购买奶茶、饮品等商品', /** 有参数，类型（number、string）默认值（default）、描述（describe）也是系统提示词 */ parameters: z .object({ name: z.string().describe('商品名称'), quantity: z.number().default(1).describe('数量'), temperature: z.string().optional().describe('温度'), sweetness: z.string().optional().describe('甜度'), }) .toJSONSchema(), strict: true, }, }, ] /** 「历史消息」转为「对话消息」 */ const getMessages = (history: Message[]) => { /** 对话消息 */ const messages: OpenAI.ChatCompletionMessageParam[] = [] /** * 1. 把「历史消息」转为「对话消息」，传给模型，让模型补全对话。 * 2. 模型输出的文字，存入「历史消息」尾部。 * 3. 下一个新的提交触发，「历史消息」转为「对话消息」，供下一次补全使用，循环往复。 */ history.forEach((msg) => { switch (msg.role) { case 'system': case 'user': { const message: OpenAI.ChatCompletionMessageParam = { role: msg.role, content: msg.content, } messages.push(message) break } case 'assistant': { const message: OpenAI.ChatCompletionAssistantMessageParam = { role: msg.role, content: msg.content, tool_calls: msg.tool_calls as any, } messages.push(message) break } case 'tool': { const message: OpenAI.ChatCompletionToolMessageParam = { role: msg.role, content: msg.content, tool_call_id: msg.tool_call_id!, } messages.push(message) break } } }) return messages } export const chatLoop = async (sync: Sync) => { /** 最大循环次数，避免死循环 */ let count = 1 while (count < 20) { count++ await chatCompletion(sync) const last = sync.history.at(-1) if (last?.finish_reason === 'stop') { /** 对话结束了，等待下一次提问 */ sync.waiting = false sync.forceUpdate?.() return } if (last?.finish_reason === 'tool_calls') { /** 对话暂停。执行工具调用。调用完成后恢复对话 */ for await (const tool of last.tool_calls || []) { const toolName = tool.function?.name || '' const tool_call_id = tool.id || '' switch (toolName) { case 'get_time': { const toolResult: Message = { id: `${sync.history.length}`, role: 'tool', tool_call_id, content: `现在北京时间是：${new Date().toLocaleString()}`, } sync.history.push(toolResult) break } case 'buy_product': { /** 退出 while，弹出商品卡片，让 UI 层回传结果 */ return } default: break } } } } } export const chatCompletion = async (sync: Sync): any => { sync.waiting = true sync.forceUpdate?.() /** 把「历史消息」转为「对话消息」 */ const messages = getMessages(sync.history) /** 调用模型接口 */ const stream = await client.chat.completions.create({ /** 既然喝了千问的奶茶，当然要用千问的模型 */ model: 'qwen-flash', messages, /** 传入工具*/ tools, stream: true, }) for await (const event of stream) { const choice = event.choices[0] const role = choice?.delta.role const delta_content = choice?.delta?.content || '' const initMessage: Message = { /** 唯一 id，查找「历史消息」使用 */ id: event.id, role: role || 'assistant', content: '', } /**「历史消息」列表里，按 id 查找当前的回复 */ const lastMessage = sync.history.find((t) => t.id === event.id) const message = lastMessage || initMessage if (!lastMessage) { /** * 查找当前的回复在「历史消息」列表里吗？ * 1. 不在：新建一条，加入「历史消息」尾部 * 2. 在：累加 delta content 形成完整的句子 */ sync.history.push(message) } if (choice?.finish_reason) { message.finish_reason = choice?.finish_reason } const nextContent = message.content + delta_content if (nextContent !== message.content) { /** delta content 可能是空字符串，有变化才更新 */ message.content = nextContent sync.waiting = false sync.forceUpdate?.() } /** tool也是 token 序列，要累加一下 */ choice?.delta?.tool_calls?.forEach((delta_tool) => { sync.waiting = true const tool_calls = (message.tool_calls = message.tool_calls || []) const tool = tool_calls[delta_tool.index] if (!tool) { tool_calls[delta_tool.index] = delta_tool return } tool.id = tool.id || delta_tool.id tool.function = tool.function || delta_tool.function const args = (tool.function?.arguments || '') + (delta_tool.function?.arguments || '') if (args !== tool.function?.arguments) { tool.function!.arguments = args } }) } } export function useSyncState<T>(value: T & { forceUpdate?: () => void }) { const [, setValue] = React.useState(1) const forceUpdate = () => setValue((previous) => previous + 1) const ref = React.useRef(value) ref.current.forceUpdate = forceUpdate return ref.current }

import OpenAI from 'openai' import * as React from 'react' import z from 'zod' import type { Message, Sync } from './type' const apiKey = 'your-key-here' export const client = new OpenAI({ apiKey, /** 既然喝了千问的奶茶，当然要用千问的接口 */ baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1', dangerouslyAllowBrowser: true, }) /** 声明工具 */ const tools: OpenAI.ChatCompletionFunctionTool[] = [ { type: 'function', function: { name: 'get_time', description: '获取北京时间', /** 无参数 */ parameters: z.object().optional().toJSONSchema(), strict: true, }, }, { type: 'function', function: { name: 'buy_product', description: '购买奶茶、饮品等商品', /** 有参数，类型（number、string）默认值（default）、描述（describe）也是系统提示词 */ parameters: z .object({ name: z.string().describe('商品名称'), quantity: z.number().default(1).describe('数量'), temperature: z.string().optional().describe('温度'), sweetness: z.string().optional().describe('甜度'), }) .toJSONSchema(), strict: true, }, }, ] /** 「历史消息」转为「对话消息」 */ const getMessages = (history: Message[]) => { /** 对话消息 */ const messages: OpenAI.ChatCompletionMessageParam[] = [] /** * 1. 把「历史消息」转为「对话消息」，传给模型，让模型补全对话。 * 2. 模型输出的文字，存入「历史消息」尾部。 * 3. 下一个新的提交触发，「历史消息」转为「对话消息」，供下一次补全使用，循环往复。 */ history.forEach((msg) => { switch (msg.role) { case 'system': case 'user': { const message: OpenAI.ChatCompletionMessageParam = { role: msg.role, content: msg.content, } messages.push(message) break } case 'assistant': { const message: OpenAI.ChatCompletionAssistantMessageParam = { role: msg.role, content: msg.content, tool_calls: msg.tool_calls as any, } messages.push(message) break } case 'tool': { const message: OpenAI.ChatCompletionToolMessageParam = { role: msg.role, content: msg.content, tool_call_id: msg.tool_call_id!, } messages.push(message) break } } }) return messages } export const chatLoop = async (sync: Sync) => { /** 最大循环次数，避免死循环 */ let count = 1 while (count < 20) { count++ await chatCompletion(sync) const last = sync.history.at(-1) if (last?.finish_reason === 'stop') { /** 对话结束了，等待下一次提问 */ sync.waiting = false sync.forceUpdate?.() return } if (last?.finish_reason === 'tool_calls') { /** 对话暂停。执行工具调用。调用完成后恢复对话 */ for await (const tool of last.tool_calls || []) { const toolName = tool.function?.name || '' const tool_call_id = tool.id || '' switch (toolName) { case 'get_time': { const toolResult: Message = { id: `${sync.history.length}`, role: 'tool', tool_call_id, content: `现在北京时间是：${new Date().toLocaleString()}`, } sync.history.push(toolResult) break } case 'buy_product': { const args = JSON.parse(tool.function!.arguments || '{}') const product = await queryProduct(args) /** 把召回的商品、甜度、温度放到消息中，用于弹出卡片 */ const card: Message = { id: `${sync.history.length}`, /** 扩展一个新的 role，用商品卡片渲染 */ role: 'card', tool_call_id, content: '找到了下面👇的商品～喵～', card: { product, tool_call_id }, } sync.history.push(card) /** 退出 while，弹出商品卡片，让 UI 层回传结果 */ return } default: break } } } } } /** * args为 {"name": "卡布奇诺", "quantity": 2, "sweetness": "3分糖", "temperature": "少加冰"} * 模拟使用 args，在后端数据库里进行向量检索： * * 1. 召回最相关的产品 * - 卡布奇诺 -> skuId 347 * * 2. 匹配最相关的甜度、温度 * - 3分糖 -> 三分糖(id=25) * - 少加冰 -> 少冰(id=98) */ export const queryProduct = async (args: any) => { return { skuId: 347, name: '卡布奇诺', desc: '意式经典｜口感细腻，醇香饱满', quantity: 2, /** 当前激活的选项 id */ sweetnessId: 25, /** UI 页面上的选项 */ sweetness: [ { value: 24, label: '无糖' }, { value: 25, label: '三分糖' }, { value: 26, label: '七分糖' }, { value: 27, label: '全糖' }, ], /** 当前激活的选项 id */ temperatureId: 98, /** UI 页面上的选项 */ temperature: [ { value: 97, label: '去冰' }, { value: 98, label: '少冰' }, { value: 99, label: '常温' }, { value: 100, label: '热' }, ], } } export const chatCompletion = async (sync: Sync): any => { sync.waiting = true sync.forceUpdate?.() /** 把「历史消息」转为「对话消息」 */ const messages = getMessages(sync.history) /** 调用模型接口 */ const stream = await client.chat.completions.create({ /** 既然喝了千问的奶茶，当然要用千问的模型 */ model: 'qwen-flash', messages, /** 传入工具*/ tools, stream: true, }) for await (const event of stream) { const choice = event.choices[0] const role = choice?.delta.role const delta_content = choice?.delta?.content || '' const initMessage: Message = { /** 唯一 id，查找「历史消息」使用 */ id: event.id, role: role || 'assistant', content: '', } /**「历史消息」列表里，按 id 查找当前的回复 */ const lastMessage = sync.history.find((t) => t.id === event.id) const message = lastMessage || initMessage if (!lastMessage) { /** * 查找当前的回复在「历史消息」列表里吗？ * 1. 不在：新建一条，加入「历史消息」尾部 * 2. 在：累加 delta content 形成完整的句子 */ sync.history.push(message) } if (choice?.finish_reason) { message.finish_reason = choice?.finish_reason } const nextContent = message.content + delta_content if (nextContent !== message.content) { /** delta content 可能是空字符串，有变化才更新 */ message.content = nextContent sync.waiting = false sync.forceUpdate?.() } /** tool也是 token 序列，要累加一下 */ choice?.delta?.tool_calls?.forEach((delta_tool) => { sync.waiting = true const tool_calls = (message.tool_calls = message.tool_calls || []) const tool = tool_calls[delta_tool.index] if (!tool) { tool_calls[delta_tool.index] = delta_tool return } tool.id = tool.id || delta_tool.id tool.function = tool.function || delta_tool.function const args = (tool.function?.arguments || '') + (delta_tool.function?.arguments || '') if (args !== tool.function?.arguments) { tool.function!.arguments = args } }) } } export function useSyncState<T>(value: T & { forceUpdate?: () => void }) { const [, setValue] = React.useState(1) const forceUpdate = () => setValue((previous) => previous + 1) const ref = React.useRef(value) ref.current.forceUpdate = forceUpdate return ref.current }

import { Button, Drawer, InputNumber, Radio } from 'antd' import * as React from 'react' import './Product.css' export function Product(props: { name?: string desc?: string quantity?: number sweetnessId?: number sweetness?: { value: number; label: string }[] temperatureId?: number temperature?: { value: number; label: string }[] onComfirm?: () => any disabled?: boolean }) { const [open, setOpen] = React.useState(false) const onOpen = () => { setOpen(true) } const onClose = () => { setOpen(false) } const onComfirm = () => { props.onComfirm?.() onClose() } return ( <div className="product-card"> <div className="store-header"> <div className="store-info"> <div className="store-logo" /> <span>咖啡</span> </div> <div className="store-meta"> 4.8分 <span>·</span> 15分钟 <span>·</span>0.1km </div> </div> <h1 className="product-title"> {props.name}{' '} <span style={{ fontSize: 12 }}> {props.quantity ? `X ${props.quantity}` : ''} </span> </h1> <p style={{ color: '#b4b4b4' }}>{props.desc}</p> <div className="product-image"></div> <Button type="primary" onClick={onOpen} disabled={props.disabled}> 选这个 </Button> <Drawer classNames={{ body: 'product-drawer' }} styles={{ header: { display: 'none' }, section: { borderRadius: '16px 16px 0 0' }, }} placement="bottom" size="auto" open={open} onClose={onClose} footer={ <Button block type="primary" onClick={onComfirm}> 选好了 </Button> } > <div className="product-drawer-img"></div> <div> <h3>数量</h3> <InputNumber mode="spinner" defaultValue={props.quantity} style={{ width: 120 }} /> </div> <div> <h3>温度</h3> <Radio.Group block options={props.temperature} defaultValue={props.temperatureId} optionType="button" /> </div> <div> <h3>甜度</h3> <Radio.Group block options={props.sweetness} defaultValue={props.sweetnessId} optionType="button" /> </div> </Drawer> </div> ) }

.product-card { display: flex; flex-direction: column; gap: 8px; width: 68vw; padding: 16px; font-size: 14px; line-height: 1.325; color: rgba(0, 0, 0, 0.88); background: white; border-radius: 12px; } .store-header { display: flex; align-items: center; justify-content: space-between; } .store-info { display: flex; gap: 8px; align-items: center; } .store-logo { width: 24px; height: 24px; background-image: url('/logo.jpeg'); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 50%; } .store-meta { display: flex; gap: 2px; align-items: center; font-size: 12px; color: #b4b4b4; } .product-title { font-size: 16px; } .product-image { width: 100%; height: 145px; background-image: url('/coffee.jpeg'); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 8px; } .product-drawer { position: relative; display: flex; flex-direction: column; gap: 16px; } .product-drawer-img { z-index: 1; height: 200px; margin: -24px -24px 0; background-image: url('/coffee.jpeg'); background-repeat: no-repeat; background-position: center; background-size: cover; } .product-drawer .ant-radio-group { gap: 16px; } .product-drawer .ant-radio-button-wrapper { background: #f6f2f2 !important; border: 1px solid #f6f2f2 !important; border-radius: 8px; --ant-radio-button-padding-inline: 6px; } .product-drawer .ant-radio-button-wrapper-checked { background: #e6e7fe !important; border: 1px solid #0012fe !important; } .product-drawer .ant-radio-button-wrapper-checked .ant-radio-button-label { color: #0012fe !important; } .product-drawer h3 { margin-bottom: 12px; }

import { GithubOutlined, SmileOutlined } from '@ant-design/icons' import { Bubble, Sender } from '@ant-design/x' import { XMarkdown } from '@ant-design/x-markdown' import { Avatar, message } from 'antd' import * as React from 'react' import { Product } from './Product' import { chatCompletion, chatLoop, useSyncState } from './common' import type { Message, Sync } from './type' import './App.css' function App() { const [input, setInput] = React.useState('') const sync = useSyncState<Sync>({ history: [ { id: '0', /** 系统提示词 */ role: 'system', content: '模型是立夏猫，自称“本喵“。模型要以猫的身份，服侍主子，性格可爱，回复简洁', }, ], waiting: false, }) const tryChat = async () => { try { await chatLoop(sync) } catch (e: any) { message.error(e.message) throw e } finally { sync.waiting = false sync.forceUpdate?.() } } const onSubmit = () => { /** 新建一个消息 */ const message: Message = { id: `${sync.history.length}`, role: 'user', content: input, } /** 把消息加入列表末尾 */ sync.history.push(message) /** 清空输入框 */ setInput('') /** 补全对话 */ tryChat() } return ( <div className="app"> <div className="chat-list"> {sync.history.map((message) => { const key = `${message.id}` const content = message.content /** 没有内容，不渲染 */ if (!content) return null switch (message.role) { /** 系统提示词，不在 UI 上显示，渲染时隐藏 */ case 'system': { return null } /** 用户的消息 */ case 'user': { return ( <Bubble key={key} content={<XMarkdown content={content} />} header={<h5>铲屎官</h5>} avatar={ <Avatar icon={<SmileOutlined style={{ fontSize: 26 }} />} /> } // 人类消息，靠右布局 placement={'end'} /> ) } /** 模型的消息 */ case 'assistant': { return ( <Bubble key={key} content={<XMarkdown content={content} />} header={<h5>立夏猫</h5>} avatar={ <Avatar icon={<GithubOutlined style={{ fontSize: 26 }} />} /> } // 模型消息，靠左布局 placement={'start'} /> ) } /** 商品卡片 */ case 'card': { const card = message.card! /** 模拟：请求订单系统接口，保存结果 */ const buyProduct = async (product: any) => { /** 也可以返回：“购买失败“ */ return `购买成功。订单号：123456。商品 skuId： ${product.skuId}。商品描述：${product.desc}` } const onComfirm = async () => { const content = await buyProduct(card.product) /** 保存结果 */ const toolResult: Message = { id: `${sync.history.length}`, role: 'tool', tool_call_id: card.tool_call_id, content, } card.disabled = true sync.history.push(toolResult) /** UI 层回传结果给模型：成功/失败 */ tryChat() } return ( <Bubble key={`${message.id}`} content={content} header={<h5>立夏猫</h5>} footer={ <Product {...card.product} key={`${card.disabled}`} onComfirm={onComfirm} disabled={card.disabled} /> } avatar={ <Avatar icon={<GithubOutlined style={{ fontSize: 26 }} />} /> } placement={'start'} styles={{ content: { padding: 0, minHeight: 'unset', background: 'unset', }, footer: { marginTop: 8 }, }} /> ) } } return null })} {sync.waiting ? ( <Bubble loading={true} key="waiting" content="" header={<h5>立夏猫</h5>} avatar={ <Avatar icon={<GithubOutlined style={{ fontSize: 26 }} />} /> } placement={'start'} /> ) : null} </div> <div className="chat-sender"> <Sender /** 输入框，数据双向绑定 */ value={input} onChange={(input) => { setInput(input) }} styles={{ root: { background: 'white' }, }} /** 点击发送按钮 */ onSubmit={onSubmit} /> </div> </div> ) } export default App