前言

大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~

ChatUI 3.0 的發(fā)布引入了許多新的特性和組件，旨在提升智能對(duì)話機(jī)器人的設(shè)計(jì)和開發(fā)效率。以下是一些關(guān)鍵點(diǎn)和功能亮點(diǎn)：

圖片

核心優(yōu)化

圖片

• 自然： 致力于提升對(duì)話的自然流暢性，讓用戶的互動(dòng)體驗(yàn)更加親切
• 高效： 通過新組件的引入，增強(qiáng)了開發(fā)效率，減少了開發(fā)時(shí)間
• 沉浸： 提升了視覺與互動(dòng)體驗(yàn)，使用戶能更沉浸于對(duì)話中

圖片

新增組件

圖片

• Typing 組件： 用于展示服務(wù)端處理中的狀態(tài)，緩解用戶等待時(shí)的焦慮感，提升用戶體驗(yàn)。
• TypingBubble 組件： 將氣泡內(nèi)容呈現(xiàn)為打字效果，模擬人類輸入的過程，增加互動(dòng)感。
• useTypewriter Hook： 可以在其他組件中使用，模擬打字效果，例如：

const { typedContent, isTyping } = useTypewriter('內(nèi)容詳情', { interval: 50, step: 1 });

• Think 組件： 展示大模型的思考過程，讓用戶知道機(jī)器人正在處理信息，增加透明度和互動(dòng)感
• useTitleTyping： 用于模擬對(duì)方正在輸入文字的效果，通常用于導(dǎo)航欄和標(biāo)題部分，提升對(duì)話的動(dòng)態(tài)感
• CardHeader 組件： 使卡片頭部更加靈活，支持自定義內(nèi)容，讓設(shè)計(jì)更加個(gè)性化
• ScrollGrid、Skeleton、BackBottom、Quote 等： 這些新組件進(jìn)一步豐富了對(duì)話界面的設(shè)計(jì)，使開發(fā)者能夠更方便地構(gòu)建復(fù)雜的對(duì)話應(yīng)用

圖片

其他功能

圖片

• 深色模式支持： 用戶可以輕松啟用深色模式，只需配置 colorScheme 屬性即可。它支持三種模式：auto（自動(dòng)，跟隨系統(tǒng)）、light（淺色模式）、dark（深色模式）

export default () => {
  return (
    <Chat
      colorScheme="auto"
      {...other}
    />
  );
};

• 響應(yīng)式設(shè)計(jì)： ChatUI 3.0 提供了響應(yīng)式布局，確保在移動(dòng)端和PC端都能友好展現(xiàn)，提升跨平臺(tái)的一致性和用戶體驗(yàn)
• 國(guó)際化與主題定制： 支持多語言和本土化特性，使得開發(fā)者可以根據(jù)不同地區(qū)的需求靈活調(diào)整內(nèi)容和樣式

圖片