千问点奶茶是如何实现的？

1
{
2
  "name": "qwen-free-tea",
3
  "private": true,
4
  "version": "0.0.0",
5
  "type": "module",
6
  "scripts": {
7
    "dev": "vite",
8
    "build": "tsc -b && vite build",
9
    "lint": "eslint . --fix",
10
    "preview": "vite preview"
11
  },
12
  "dependencies": {
13
    "antd": "^6.3.1",
14
    "@ant-design/icons": "^6.1.0",
15
    "@ant-design/x": "^2.3.0",
16
    "@ant-design/x-markdown": "^2.3.0",
17
    "react": "^19.2.4",
18
    "react-dom": "^19.2.4"
19
  },
20
  "devDependencies": {
21
    "@eslint/js": "^9.39.4",
22
    "@types/node": "^24.12.0",
23
    "@types/react": "^19.2.14",
24
    "@types/react-dom": "^19.2.3",
25
    "@vitejs/plugin-react": "^6.0.0",
26
    "eslint": "^9.39.4",
27
    "eslint-plugin-react-hooks": "^7.0.1",
28
    "eslint-plugin-react-refresh": "^0.5.2",
29
    "eslint-plugin-import": "^2.32.0",
30
    "globals": "^17.4.0",
31
    "typescript": "~5.9.3",
32
    "typescript-eslint": "^8.56.1",
33
    "vite": "^8.0.0"
34
  }
35
}

1
import { StrictMode } from 'react'
2
import { createRoot } from 'react-dom/client'
3

4
import App from './App.tsx'
5
import './index.css'
6

7
createRoot(document.getElementById('root')!).render(
8
  <StrictMode>
9
    <App />
10
  </StrictMode>,
11
)

1
* {
2
  box-sizing: border-box;
3
  padding: 0;
4
  margin: 0;
5
}
6

7
html,
8
body,
9
#root {
10
  height: 100%;
11
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
12
}
13

14
/* 整个滚动条 */
15
::-webkit-scrollbar {
16
  width: 8px;
17
  /* 竖向滚动条宽度 */
18
  height: 8px;
19
  /* 横向滚动条高度 */
20
}
21

22
/* 滚动条轨道背景 */
23
::-webkit-scrollbar-track {
24
  background: #e5ebf7;
25
}
26

27
/* 滚动条滑块 */
28
::-webkit-scrollbar-thumb {
29
  background: #888;
30
  border-radius: 4px;
31
}
32

33
/* hover 状态 */
34
::-webkit-scrollbar-thumb:hover {
35
  background: #555;
36
}

1
import { GithubOutlined, SmileOutlined } from '@ant-design/icons'
2
import { Bubble } from '@ant-design/x'
3
import { XMarkdown } from '@ant-design/x-markdown'
4
import { Avatar } from 'antd'
5
import * as React from 'react'
6

7
import './App.css'
8

9
function App() {
10
  return (
11
    <div className="app">
12
      <div className="chat-list">
13
        <Bubble
14
          content={'你是谁'}
15
          header={<h5>铲屎官</h5>}
16
          avatar={<Avatar icon={<SmileOutlined style={{ fontSize: 26 }} />} />}
17
          // 人类消息，靠右布局
18
          placement={'end'}
19
        />
20
        <Bubble
21
          content={<XMarkdown content={`你好👋，我是***立夏猫***`} />}
22
          header={<h5>立夏猫</h5>}
23
          avatar={<Avatar icon={<GithubOutlined style={{ fontSize: 26 }} />} />}
24
          // 模型消息，靠左布局
25
          placement={'start'}
26
        />
27
      </div>
28
      <div className="chat-sender">输入框</div>
29
    </div>
30
  )
31
}
32

33
export default App

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

1
import { GithubOutlined, SmileOutlined } from '@ant-design/icons'
2
import { Bubble } from '@ant-design/x'
3
import { XMarkdown } from '@ant-design/x-markdown'
4
import { Avatar } from 'antd'
5
import * as React from 'react'
6

7
import type { Message } from './type'
8

9
import './App.css'
10

11
function App() {
12
  const [history, setHistory] = React.useState<Message[]>([
13
    {
14
      id: '0',
15
      /** 系统提示词 */
16
      role: 'system',
17
      content:
18
        '模型是立夏猫，自称“本喵“。模型要以猫的身份，服侍主子，性格可爱，回复简洁',
19
    },
20
    {
21
      id: '1',
22
      /** 人类的消息 */
23
      role: 'user',
24
      content: '你是谁',
25
    },
26
    {
27
      id: '2',
28
      /** 模型的消息 */
29
      role: 'assistant',
30
      content: `你好👋，我是***立夏猫***`,
31
    },
32
  ])
33

34
  return (
35
    <div className="app">
36
      <div className="chat-list">
37
        {history.map((message) => {
38
          const key = `${message.id}`
39
          const content = message.content
40
          /** 没有内容，不渲染 */
41
          if (!content) return null
42
          switch (message.role) {
43
            /** 系统提示词，不在 UI 上显示，渲染时隐藏 */
44
            case 'system': {
45
              return null
46
            }
47
            /** 用户的消息 */
48
            case 'user': {
49
              return (
50
                <Bubble
51
                  key={key}
52
                  content={<XMarkdown content={content} />}
53
                  header={<h5>铲屎官</h5>}
54
                  avatar={
55
                    <Avatar icon={<SmileOutlined style={{ fontSize: 26 }} />} />
56
                  }
57
                  // 人类消息，靠右布局
58
                  placement={'end'}
59
                />
60
              )
61
            }
62
            /** 模型的消息 */
63
            case 'assistant': {
64
              return (
65
                <Bubble
66
                  key={key}
67
                  content={<XMarkdown content={content} />}
68
                  header={<h5>立夏猫</h5>}
69
                  avatar={
70
                    <Avatar
71
                      icon={<GithubOutlined style={{ fontSize: 26 }} />}
72
                    />
73
                  }
74
                  // 模型消息，靠左布局
75
                  placement={'start'}
76
                />
77
              )
78
            }
79
          }
80
          return null
81
        })}
82
      </div>
83
      <div className="chat-sender">输入框</div>
84
    </div>
85
  )
86
}
87

88
export default App

1
import { GithubOutlined, SmileOutlined } from '@ant-design/icons'
2
import { Bubble, Sender } from '@ant-design/x'
3
import { XMarkdown } from '@ant-design/x-markdown'
4
import { Avatar } from 'antd'
5
import * as React from 'react'
6

7
import type { Message } from './type'
8

9
import './App.css'
10

11
function App() {
12
  const [input, setInput] = React.useState('')
13
  const [history, setHistory] = React.useState<Message[]>([
19 collapsed lines
14
    {
15
      id: '0',
16
      /** 系统提示词 */
17
      role: 'system',
18
      content:
19
        '模型是立夏猫，自称“本喵“。模型要以猫的身份，服侍主子，性格可爱，回复简洁',
20
    },
21
    {
22
      id: '1',
23
      /** 人类的消息 */
24
      role: 'user',
25
      content: '你是谁',
26
    },
27
    {
28
      id: '2',
29
      /** 模型的消息 */
30
      role: 'assistant',
31
      content: `你好👋，我是***立夏猫***`,
32
    },
33
  ])
34

35
  const onSubmit = () => {
36
    /** 新建一个消息 */
37
    const message: Message = {
38
      id: `${history.length}`,
39
      role: 'user',
40
      content: input,
41
    }
42
    /** 把消息加入列表末尾 */
43
    setHistory([...history, message])
44
    /** 清空输入框 */
45
    setInput('')
46
  }
47

48
  return (
49
    <div className="app">
50
      <div className="chat-list">
51
        {history.map((message) => {
43 collapsed lines
52
          const key = `${message.id}`
53
          const content = message.content
54
          /** 没有内容，不渲染 */
55
          if (!content) return null
56
          switch (message.role) {
57
            /** 系统提示词，不在 UI 上显示，渲染时隐藏 */
58
            case 'system': {
59
              return null
60
            }
61
            /** 用户的消息 */
62
            case 'user': {
63
              return (
64
                <Bubble
65
                  key={key}
66
                  content={<XMarkdown content={content} />}
67
                  header={<h5>铲屎官</h5>}
68
                  avatar={
69
                    <Avatar icon={<SmileOutlined style={{ fontSize: 26 }} />} />
70
                  }
71
                  // 人类消息，靠右布局
72
                  placement={'end'}
73
                />
74
              )
75
            }
76
            /** 模型的消息 */
77
            case 'assistant': {
78
              return (
79
                <Bubble
80
                  key={key}
81
                  content={<XMarkdown content={content} />}
82
                  header={<h5>立夏猫</h5>}
83
                  avatar={
84
                    <Avatar
85
                      icon={<GithubOutlined style={{ fontSize: 26 }} />}
86
                    />
87
                  }
88
                  // 模型消息，靠左布局
89
                  placement={'start'}
90
                />
91
              )
92
            }
93
          }
94
          return null
95
        })}
96
      </div>
97
      <div className="chat-sender">
98
        <Sender
99
          /** 输入框，数据双向绑定 */
100
          value={input}
101
          onChange={(input) => {
102
            setInput(input)
103
          }}
104
          styles={{
105
            root: { background: 'white' },
106
          }}
107
          /** 点击发送按钮 */
108
          onSubmit={onSubmit}
109
        />
110
      </div>
111
    </div>
112
  )
113
}
114

115
export default App

1
{
2
  "name": "qwen-free-tea",
9 collapsed lines
3
  "private": true,
4
  "version": "0.0.0",
5
  "type": "module",
6
  "scripts": {
7
    "dev": "vite",
8
    "build": "tsc -b && vite build",
9
    "lint": "eslint . --fix",
10
    "preview": "vite preview"
11
  },
12
  "dependencies": {
13
    "antd": "^6.3.1",
14
    "@ant-design/icons": "^6.1.0",
15
    "@ant-design/x": "^2.3.0",
16
    "@ant-design/x-markdown": "^2.3.0",
17
    "openai": "^6.29.0",
18
    "react": "^19.2.4",
19
    "react-dom": "^19.2.4"
20
  },
21
  "devDependencies": {
13 collapsed lines
22
    "@eslint/js": "^9.39.4",
23
    "@types/node": "^24.12.0",
24
    "@types/react": "^19.2.14",
25
    "@types/react-dom": "^19.2.3",
26
    "@vitejs/plugin-react": "^6.0.0",
27
    "eslint": "^9.39.4",
28
    "eslint-plugin-react-hooks": "^7.0.1",
29
    "eslint-plugin-react-refresh": "^0.5.2",
30
    "eslint-plugin-import": "^2.32.0",
31
    "globals": "^17.4.0",
32
    "typescript": "~5.9.3",
33
    "typescript-eslint": "^8.56.1",
34
    "vite": "^8.0.0"
35
  }
36
}

1
import { chatCompletion } from './common'
2
import type { Sync } from './type'
3

4
/** 控制台，模拟 UI 层数据结构 */
5
const sync: Sync = {
6
  /** 历史消息 */
7
  history: [
8
    {
9
      id: '0',
10
      role: 'system',
11
      /** 系统提示词 */
12
      content:
13
        '模型是立夏猫，自称“本喵“。模型要以猫的身份，服侍主子，性格可爱，回复简洁',
14
    },
15
  ],
16
  /** 消息第一个词，是否在等待中 */
17
  waiting: false,
18
}
19

20
/**
21
 * 模拟用户点击了“提交“按钮：
22
 * 1. <Sender /> 组件触发了 onSubmit 事件
23
 * 2. onSubmit 响应函数内，把输入框里的文字加入了「历史消息」尾部
24
 */
25
sync.history.push({
26
  id: '1',
27
  /** 人类的消息 */
28
  role: 'user',
29
  content: '你是谁',
30
})
31

32
/** 补全对话 */
33
await chatCompletion(sync)

1
import OpenAI from 'openai'
2

3
import type { Message, Sync } from './type'
4

5
const apiKey = 'your-key-here'
6
export const client = new OpenAI({
7
  apiKey,
8
  /** 既然喝了千问的奶茶，当然要用千问的接口 */
9
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
10
  dangerouslyAllowBrowser: true,
11
})
12

13
/** 「历史消息」转为「对话消息」 */
14
const getMessages = (history: Message[]) => {
15
  /** 对话消息 */
16
  const messages: OpenAI.ChatCompletionMessageParam[] = []
17

18
  /**
19
   * 1. 把「历史消息」转为「对话消息」，传给模型，让模型补全对话。
20
   * 2. 模型输出的文字，存入「历史消息」尾部。
21
   * 3. 下一个新的提交触发，「历史消息」转为「对话消息」，供下一次补全使用，循环往复。
22
   */
23
  history.forEach((msg) => {
24
    switch (msg.role) {
25
      case 'system':
26
      case 'user': {
27
        const message: OpenAI.ChatCompletionMessageParam = {
28
          role: msg.role,
29
          content: msg.content,
30
        }
31
        messages.push(message)
32
        break
33
      }
34
      case 'assistant': {
35
        const message: OpenAI.ChatCompletionAssistantMessageParam = {
36
          role: msg.role,
37
          content: msg.content,
38
        }
39
        messages.push(message)
40
        break
41
      }
42
    }
43
  })
44
  return messages
45
}
46

47
export const chatCompletion = async (sync: Sync) => {
48
  sync.waiting = true
49

50
  /** 把「历史消息」转为「对话消息」 */
51
  const messages = getMessages(sync.history)
52

53
  /** 调用模型接口 */
54
  const stream = await client.chat.completions.create({
55
    /** 既然喝了千问的奶茶，当然要用千问的模型 */
56
    model: 'qwen-flash',
57
    messages,
58
    tools: [],
59
    stream: true,
60
  })
61

62
  for await (const event of stream) {
63
    sync.waiting = false
64
    console.dir(event, { depth: 10 })
65
  }
66
}

45 collapsed lines
1
import OpenAI from 'openai'
2

3
import type { Message, Sync } from './type'
4

5
const apiKey = 'your-key-here'
6
export const client = new OpenAI({
7
  apiKey,
8
  /** 既然喝了千问的奶茶，当然要用千问的接口 */
9
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
10
  dangerouslyAllowBrowser: true,
11
})
12

13
/** 「历史消息」转为「对话消息」 */
14
const getMessages = (history: Message[]) => {
15
  /** 对话消息 */
16
  const messages: OpenAI.ChatCompletionMessageParam[] = []
17

18
  /**
19
   * 1. 把「历史消息」转为「对话消息」，传给模型，让模型补全对话。
20
   * 2. 模型输出的文字，存入「历史消息」尾部。
21
   * 3. 下一个新的提交触发，「历史消息」转为「对话消息」，供下一次补全使用，循环往复。
22
   */
23
  history.forEach((msg) => {
24
    switch (msg.role) {
25
      case 'system':
26
      case 'user': {
27
        const message: OpenAI.ChatCompletionMessageParam = {
28
          role: msg.role,
29
          content: msg.content,
30
        }
31
        messages.push(message)
32
        break
33
      }
34
      case 'assistant': {
35
        const message: OpenAI.ChatCompletionAssistantMessageParam = {
36
          role: msg.role,
37
          content: msg.content,
38
        }
39
        messages.push(message)
40
        break
41
      }
42
    }
43
  })
44
  return messages
45
}
46

47
export const chatCompletion = async (sync: Sync) => {
48
  sync.waiting = true
49

50
  /** 把「历史消息」转为「对话消息」 */
51
  const messages = getMessages(sync.history)
52

53
  /** 调用模型接口 */
54
  const stream = await client.chat.completions.create({
55
    /** 既然喝了千问的奶茶，当然要用千问的模型 */
56
    model: 'qwen-flash',
57
    messages,
58
    tools: [],
59
    stream: true,
60
  })
61

62
  for await (const event of stream) {
63
    const choice = event.choices[0]
64
    const role = choice?.delta.role
65
    const delta_content = choice?.delta?.content || ''
66

67
    const initMessage: Message = {
68
      /** 唯一 id，查找「历史消息」使用 */
69
      id: event.id,
70
      role: role || 'assistant',
71
      content: '',
72
    }
73

74
    /**「历史消息」列表里，按 id 查找当前的回复 */
75
    const lastMessage = sync.history.find((t) => t.id === event.id)
76
    const message = lastMessage || initMessage
77

78
    if (!lastMessage) {
79
      /**
80
       * 查找当前的回复在「历史消息」列表里吗？
81
       * 1. 不在：新建一条，加入「历史消息」尾部
82
       * 2. 在：累加 delta content 形成完整的句子
83
       */
84
      sync.history.push(message)
85
    }
86

87
    if (choice?.finish_reason) {
88
      message.finish_reason = choice?.finish_reason
89
    }
90

91
    const nextContent = message.content + delta_content
92
    if (nextContent !== message.content) {
93
      /** delta content 可能是空字符串，有变化才更新 */
94
      message.content = nextContent
95
      sync.waiting = false
96
    }
97
  }
98
}

1
import OpenAI from 'openai'
2

3
/** 历史消息 */
4
export interface Message {
5
  /** 消息唯一 id */
6
  id: string
7
  /**
8
   * role 是 openai 定义的，表明消息的类型。
9
   * 不同的 role， <Bubble /> 的 header、avatar、placement 应该渲染不同的内容
10
   */
11
  role: 'system' | 'user' | 'assistant' | 'tool' | 'developer'
12
  /** 消息的内容。由 <Bubble /> 的 content 渲染 */
13
  content: string
14
  /** 停止原因 */
15
  finish_reason?: OpenAI.ChatCompletionChunk.Choice['finish_reason']
16
}
17

18
export interface Sync {
19
  /** 历史消息 */
20
  history: Message[]
21
  /** 消息第一个词，是否在等待中 */
22
  waiting: boolean
23
}

30 collapsed lines
1
import { chatCompletion } from './common'
2
import type { Sync } from './type'
3

4
/** 控制台，模拟 UI 层数据结构 */
5
const sync: Sync = {
6
  /** 历史消息 */
7
  history: [
8
    {
9
      id: '0',
10
      role: 'system',
11
      /** 系统提示词 */
12
      content:
13
        '模型是立夏猫，自称“本喵“。模型要以猫的身份，服侍主子，性格可爱，回复简洁',
14
    },
15
  ],
16
  /** 消息第一个词，是否在等待中 */
17
  waiting: false,
18
}
19

20
/**
21
 * 模拟用户点击了“提交“按钮：
22
 * 1. <Sender /> 组件触发了 onSubmit 事件
23
 * 2. onSubmit 响应函数内，把输入框里的文字加入了「历史消息」尾部
24
 */
25
sync.history.push({
26
  id: '1',
27
  /** 人类的消息 */
28
  role: 'user',
29
  content: '你是谁',
30
})
31

32
/** 补全对话 */
33
await chatCompletion(sync)
34

35
console.dir(sync.history, { depth: 10 })

16 collapsed lines
1
import OpenAI from 'openai'
2

3
/** 历史消息 */
4
export interface Message {
5
  /** 消息唯一 id */
6
  id: string
7
  /**
8
   * role 是 openai 定义的，表明消息的类型。
9
   * 不同的 role， <Bubble /> 的 header、avatar、placement 应该渲染不同的内容
10
   */
11
  role: 'system' | 'user' | 'assistant' | 'tool' | 'developer'
12
  /** 消息的内容。由 <Bubble /> 的 content 渲染 */
13
  content: string
14
  /** 停止原因 */
15
  finish_reason?: OpenAI.ChatCompletionChunk.Choice['finish_reason']
16
}
17

18
export interface Sync {
19
  /** 历史消息 */
20
  history: Message[]
21
  /** 消息第一个词，是否在等待中 */
22
  waiting: boolean
23
  /** 更新 UI 页面 */
24
  forceUpdate?: () => void
25
}

1
import OpenAI from 'openai'
2
import * as React from 'react'
3

4
import type { Message, Sync } from './type'
5

6
const apiKey = 'your-key-here'
7
export const client = new OpenAI({
8
  apiKey,
9
  /** 既然喝了千问的奶茶，当然要用千问的接口 */
10
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
11
  dangerouslyAllowBrowser: true,
12
})
13

14
/** 「历史消息」转为「对话消息」 */
15
const getMessages = (history: Message[]) => {
30 collapsed lines
16
  /** 对话消息 */
17
  const messages: OpenAI.ChatCompletionMessageParam[] = []
18

19
  /**
20
   * 1. 把「历史消息」转为「对话消息」，传给模型，让模型补全对话。
21
   * 2. 模型输出的文字，存入「历史消息」尾部。
22
   * 3. 下一个新的提交触发，「历史消息」转为「对话消息」，供下一次补全使用，循环往复。
23
   */
24
  history.forEach((msg) => {
25
    switch (msg.role) {
26
      case 'system':
27
      case 'user': {
28
        const message: OpenAI.ChatCompletionMessageParam = {
29
          role: msg.role,
30
          content: msg.content,
31
        }
32
        messages.push(message)
33
        break
34
      }
35
      case 'assistant': {
36
        const message: OpenAI.ChatCompletionAssistantMessageParam = {
37
          role: msg.role,
38
          content: msg.content,
39
        }
40
        messages.push(message)
41
        break
42
      }
43
    }
44
  })
45
  return messages
46
}
47

48
export const chatCompletion = async (sync: Sync): any => {
49
  sync.waiting = true
50
  sync.forceUpdate?.()
51

52
  /** 把「历史消息」转为「对话消息」 */
53
  const messages = getMessages(sync.history)
54

55
  /** 调用模型接口 */
56
  const stream = await client.chat.completions.create({
5 collapsed lines
57
    /** 既然喝了千问的奶茶，当然要用千问的模型 */
58
    model: 'qwen-flash',
59
    messages,
60
    tools: [],
61
    stream: true,
62
  })
63

64
  for await (const event of stream) {
27 collapsed lines
65
    const choice = event.choices[0]
66
    const role = choice?.delta.role
67
    const delta_content = choice?.delta?.content || ''
68

69
    const initMessage: Message = {
70
      /** 唯一 id，查找「历史消息」使用 */
71
      id: event.id,
72
      role: role || 'assistant',
73
      content: '',
74
    }
75

76
    /**「历史消息」列表里，按 id 查找当前的回复 */
77
    const lastMessage = sync.history.find((t) => t.id === event.id)
78
    const message = lastMessage || initMessage
79

80
    if (!lastMessage) {
81
      /**
82
       * 查找当前的回复在「历史消息」列表里吗？
83
       * 1. 不在：新建一条，加入「历史消息」尾部
84
       * 2. 在：累加 delta content 形成完整的句子
85
       */
86
      sync.history.push(message)
87
    }
88

89
    if (choice?.finish_reason) {
90
      message.finish_reason = choice?.finish_reason
91
    }
92

93
    const nextContent = message.content + delta_content
94
    if (nextContent !== message.content) {
95
      /** delta content 可能是空字符串，有变化才更新 */
96
      message.content = nextContent
97
      sync.waiting = false
98
      sync.forceUpdate?.()
99
    }
100
  }
101
}
102

103
export function useSyncState<T>(value: T & { forceUpdate?: () => void }) {
104
  const [, setValue] = React.useState(1)
105
  const forceUpdate = () => setValue((previous) => previous + 1)
106

107
  const ref = React.useRef(value)
108

109
  ref.current.forceUpdate = forceUpdate
110

111
  return ref.current
112
}