前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

ChatUI 3.0 的發布引入了許多新的特性和組件，旨在提升智能對話機器人的設計和開發效率。以下是一些關鍵點和功能亮點：

圖片

核心優化

圖片

• 自然： 致力于提升對話的自然流暢性，讓用戶的互動體驗更加親切
• 高效： 通過新組件的引入，增強了開發效率，減少了開發時間
• 沉浸： 提升了視覺與互動體驗，使用戶能更沉浸于對話中

圖片

新增組件

圖片

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

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

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

圖片

其他功能

圖片

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

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

• 響應式設計： ChatUI 3.0 提供了響應式布局，確保在移動端和PC端都能友好展現，提升跨平臺的一致性和用戶體驗
• 國際化與主題定制： 支持多語言和本土化特性，使得開發者可以根據不同地區的需求靈活調整內容和樣式

圖片