MCP在智能对话系统蓬勃发展的今天，随着大模型技术的广泛应用，对话式交互正迎来前所未有的机遇与挑战。然而，这些大模型往往伴随着较高的响应时间（RT），传统响应机制的局限性愈发明显，难以满足用户对即时反馈的心理期待。长时间的无响应状态不仅削弱了人机交互的流畅性和自然度，更成为影响用户体验的核心痛点，亟需创新性的解决方案。
历经多年的潜心探索与实践，ChatUI 作为淘小蜜的 UI 组件库，经过多年的沉淀和打磨，并汲取了业界前沿的经验，终于迎来了焕然一新的版本发布。此次改版不仅是对组件库的一次全方位视觉升级，更是功能与体验的双重跃升。我们也推出了一系列「输入中」组件，为开发者提供了多样化的等待状态解决方案。真正实现让科技更有温度，对话美而简单～
设计升级
小蜜设计与前端技术团队持续深耕 ChatUI 领域，通过多轮项目沉淀与实际场景的反复打磨，我们积累了丰富的实践经验。在此基础上，我们认为是时候突破传统思维，开启一次全新的探索之旅。本次升级将基于 ChatUI 的深厚积累，围绕「自然」、「高效」、「沉浸」三大核心原则展开系统性优化。通过此次改版升级，我们致力于为用户打造更加流畅、更具亲和力的对话式交互体验，同时为开发者和设计师提供更高效的产品工具与设计灵感。
更多组件
本次更新引入了众多全新组件，极大地提升了构建对话应用的便捷性和高效性。尤为值得一提的是「输入中」系列组件，其中包含了备受期待的打字机效果。
新增 Typing 组件，用于服务端消息响应速度比较慢时，展示处理中的状态，缓解用户等待焦虑：
新增 TypingBubble 组件，让气泡内容以打字效果呈现：
同时也提供了 useTypewriter 方便在其它组件里使用：
const { typedContent, isTyping } = useTypewriter('内容详情', { interval: 50, step: 1 });
新增 Think 组件，用于展示大模型思考过程：
新增 useTitleTyping，用于导航栏和标题交替展示，模拟对方正在输入文字：
通过上述几个组件，我们既可以根据不同场景选用其中一种组件作为消息等待状态的呈现，也可以通过组合根据状态分别展示：
，时长00:08
新增 ConfigProvider 组件，为组件提供统一的全局化配置。同时提供 useConfig，让组件可以很方便的读到全局配置：
<ConfigProvider locale="zh-CN">
<Time date={Date.now()} />
</ConfigProvider>
const Time = ({ date }: TimeProps) => {
const { locale } = useConfig();
console.log('locale:', locale);
return <time ...></time>;
};
新增 CardHeader 组件，让卡片头部可以自定义更加丰富的内容：
除此之外还新增了 ScrollGrid、Skeleton、BackBottom、Quote 等组件，具体可以通过官网组件文档查看。
快速搭建一个对话界面
ChatUI 作为一个专为对话交互量身打造的组件库，构建一个对话界面当然是既快速又强大，举个列子我们只需要几步即可基于 DeepSeek 搭建一个对话产品：
1、安装 ChatUI
npm i @chatui/core -S
2、搭建对话界面
以下是一个用 ChatUI 接入大模型的示例，展示如果使用 ChatUI 的 Chat、Bubble、TypingBubble 组件和 useMessages搭建对话界面：
import React, { useRef } from'react';
import { useNavigate } from'react-router-dom';
import OpenAI from'openai';
import { marked } from'marked';
import Chat, { MessageProps, useMessages, Bubble, Typing, TypingBubble } from'@chatui/core';
import'@chatui/core/dist/index.css';
// 这里用 OpenAI 请求大模型来举例子
const client = new OpenAI({
apiKey: process.env['API_KEY'],
dangerouslyAllowBrowser: true,
});
// 解析 markdown
const renderMarkdown = (content: string) => marked.parse(content) as string;
exportdefault () => {
// 1. 维护消息列表
const { messages, appendMsg, updateMsg } = useMessages([]);
const typingMsgId = useRef('');
// 2. 发送回调
asyncfunction handleSend(type: string, val: string) {
if (type === 'text' && val.trim()) {
// 2.1. 展示用户侧发送的消息
appendMsg({
type: 'text',
content: { text: val },
position: 'right',
});
// 2.2. 展示「点点点」动效
typingMsgId.current = appendMsg({
type: 'typing',
position: 'left',
});
let content: string = '';
// 2.3. 请求大模型
const stream = await client.chat.completions.create({
model: 'DeepSeek-R1-671B',
messages: [{ role: 'user', content: val }],
stream: true,
});
forawait (const chunk of stream) {
content += chunk.choices[0]?.delta?.content || '';
// 2.4. 把「点点点」更新成打字气泡
updateMsg(typingMsgId.current, {
type: 'stream',
content: { text: content },
});
}
// 2.5. 重置
typingMsgId.current = '';
}
}
function renderMessageContent(msg: MessageProps) {
const { type, content } = msg;
// 3. 根据类型渲染消息气泡
switch (type) {
case'text':
return<Bubble data-animation='fadeInUp' content={content.text} />;
case'stream':
return (
<TypingBubble
content={content.text}
messageRender={renderMarkdown}
isRichText
options={{ step: [1, 6], interval: 100 }}
/>
);
case'typing':
return<Typing />;
default:
returnnull;
}
}
return (
<Chat
navbar={{
leftContent: {
icon: 'chevron-left',
title: 'Back',
onClick() { },
},
title: '智能助理',
}}
messages={messages}
renderMessageContent={renderMessageContent}
onSend={handleSend}
/>
);
};
不到100行代码即完成了一个基于 DeepSeek 的对话产品的开发。
最后
孵化自淘小蜜的 ChatUI 专注于将智能对话领域的最新设计和技术研发成果应用于消费者可体验的对话式界面。ChatUI 3.0 的升级，是团队在追求媲美原生应用体验目标上的不懈努力，也是淘小蜜在过去半年中技术转型为 Agent 的沉淀与结晶，更是 ChatUI 拥抱大模型的第一步。我们期望未来能够收到来自更多用户的宝贵反馈和建议，通过持续迭代和共同建设，实现「让科技更有温度，对话美而简单～」的愿景。
相关推荐
2025 AI 技术峰会
AI 实战课程
热门工具
AI 助手
智能对话，提升效率
智能图像处理
一键美化，智能修图
AI 翻译
多语言实时翻译
评论 (0)
暂无评论，快来发表第一条评论吧！