✨ feat: add Fast Animation in chat

locales/ar/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "تفعيل تلخيص الرسائل التاريخية تلقائيًا"
     },
+    "enableFastAnimation": {
+      "desc": "عند استجابة النموذج بسرعة، سيتم تسريع تأثير الرسوم المتحركة للنص",
+      "title": "الرسوم المتحركة السريعة"
+    },
     "enableHistoryCount": {
       "alias": "غير محدود",
       "limited": "يحتوي فقط على {{number}} رسالة محادثة",

locales/bg-BG/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "Активиране на автоматично обобщаване на историята на съобщенията"
     },
+    "enableFastAnimation": {
+      "desc": "Когато скоростта на отговор на модела е висока, анимацията на текста ще се ускори",
+      "title": "Бърза анимация"
+    },
     "enableHistoryCount": {
       "alias": "Неограничен",
       "limited": "Включете само {{number}} съобщения от разговора",

locales/de-DE/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "Automatische Zusammenfassung der Verlaufnachrichten aktivieren"
     },
+    "enableFastAnimation": {
+      "desc": "Wenn die Modellantwortgeschwindigkeit schneller ist, wird der Texteffekt beschleunigt",
+      "title": "Schnelle Animation"
+    },
     "enableHistoryCount": {
       "alias": "Unbegrenzt",
       "limited": "Enthält nur {{number}} Gesprächsnachrichten",

locales/en-US/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "Enable Automatic Summary of Chat History"
     },
+    "enableFastAnimation": {
+      "desc": "Accelerate text animation when the model response speed is fast",
+      "title": "Fast Animation"
+    },
     "enableHistoryCount": {
       "alias": "Unlimited",
       "limited": "Include only {{number}} conversation messages",

locales/es-ES/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "Activar resumen automático de mensajes históricos"
     },
+    "enableFastAnimation": {
+      "desc": "Cuando la velocidad de respuesta del modelo es rápida, se acelerará el efecto de animación del texto",
+      "title": "Animación rápida"
+    },
     "enableHistoryCount": {
       "alias": "Sin límite",
       "limited": "Incluye solo {{number}} mensajes de conversación",

locales/fa-IR/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "فعال‌سازی خلاصه‌سازی خودکار تاریخچه پیام‌ها"
     },
+    "enableFastAnimation": {
+      "desc": "اگر سرعت پاسخ مدل سریع باشد، اثر انیمیشن متن تسریع می‌شود",
+      "title": "انیمیشن سریع"
+    },
     "enableHistoryCount": {
       "alias": "بدون محدودیت",
       "limited": "فقط شامل {{number}} پیام مکالمه",

locales/fr-FR/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "Activer le résumé automatique des messages historiques"
     },
+    "enableFastAnimation": {
+      "desc": "Lorsque la vitesse de réponse du modèle est rapide, l'effet d'animation du texte sera accéléré",
+      "title": "Animation rapide"
+    },
     "enableHistoryCount": {
       "alias": "Illimité",
       "limited": "Inclure uniquement {{number}} messages de conversation",

locales/it-IT/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "Attiva il riassunto automatico della cronologia dei messaggi"
     },
+    "enableFastAnimation": {
+      "desc": "Quando la velocità di risposta del modello è elevata, l'effetto dell'animazione del testo sarà accelerato",
+      "title": "Animazione veloce"
+    },
     "enableHistoryCount": {
       "alias": "Illimitato",
       "limited": "Include solo {{number}} messaggi di conversazione",

locales/ja-JP/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "履歴メッセージの自動要約を有効にする"
     },
+    "enableFastAnimation": {
+      "desc": "モデルの応答速度が速い場合、テキストアニメーション効果が加速されます",
+      "title": "高速アニメーション"
+    },
     "enableHistoryCount": {
       "alias": "制限なし",
       "limited": "{{number}}件の会話メッセージのみ含む",

locales/ko-KR/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "역사 메시지 자동 요약 활성화"
     },
+    "enableFastAnimation": {
+      "desc": "모델 응답 속도가 빠를 때 텍스트 애니메이션 효과를 가속화합니다",
+      "title": "빠른 애니메이션"
+    },
     "enableHistoryCount": {
       "alias": "제한 없음",
       "limited": "{{number}}개의 대화 메시지만 포함",

locales/nl-NL/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "Automatisch samenvatten van historische berichten inschakelen"
     },
+    "enableFastAnimation": {
+      "desc": "Wanneer de modelsnelheid hoog is, wordt de tekstanimatie versneld",
+      "title": "Snelle animatie"
+    },
     "enableHistoryCount": {
       "alias": "Onbeperkt",
       "limited": "Bevat alleen {{number}} berichten",

locales/pl-PL/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "Włącz automatyczne podsumowywanie historii wiadomości"
     },
+    "enableFastAnimation": {
+      "desc": "Przy szybkiej odpowiedzi modelu, efekt animacji tekstu zostanie przyspieszony",
+      "title": "Szybka animacja"
+    },
     "enableHistoryCount": {
       "alias": "Bez limitu",
       "limited": "Zawiera tylko {{number}} wiadomości",

locales/pt-BR/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "Ativar resumo automático de mensagens históricas"
     },
+    "enableFastAnimation": {
+      "desc": "Quando a velocidade de resposta do modelo for rápida, acelerará o efeito de animação do texto",
+      "title": "Animação Rápida"
+    },
     "enableHistoryCount": {
       "alias": "Sem limite",
       "limited": "Incluir apenas {{number}} mensagens de conversa",

locales/ru-RU/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "Включить автоматическое резюмирование истории сообщений"
     },
+    "enableFastAnimation": {
+      "desc": "Если скорость отклика модели высока, анимация текста будет ускорена",
+      "title": "Быстрая анимация"
+    },
     "enableHistoryCount": {
       "alias": "Без ограничений",
       "limited": "Содержит только {{number}} сообщений",

locales/tr-TR/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "Geçmiş mesajların otomatik özetini aç"
     },
+    "enableFastAnimation": {
+      "desc": "Model yanıt hızı yüksek olduğunda, metin animasyon efektini hızlandıracaktır",
+      "title": "Hızlı Animasyon"
+    },
     "enableHistoryCount": {
       "alias": "Sınırsız",
       "limited": "Yalnızca {{number}} konuşma mesajını içerir",

locales/vi-VN/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "Bật tóm tắt tự động lịch sử tin nhắn"
     },
+    "enableFastAnimation": {
+      "desc": "Khi mô hình phản hồi nhanh, hiệu ứng hoạt hình văn bản sẽ được tăng tốc",
+      "title": "Hoạt hình nhanh"
+    },
     "enableHistoryCount": {
       "alias": "Không giới hạn",
       "limited": "Chỉ chứa {{number}} tin nhắn trò chuyện",

locales/zh-CN/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "开启历史消息自动总结"
     },
+    "enableFastAnimation": {
+      "desc": "当模型响应速度较快时，将加速文字动画效果",
+      "title": "快速动画"
+    },
     "enableHistoryCount": {
       "alias": "不限制",
       "limited": "只包含 {{number}} 条会话消息",

locales/zh-TW/setting.json

@@ -178,6 +178,10 @@
     "enableCompressHistory": {
       "title": "開啟歷史消息自動總結"
     },
+    "enableFastAnimation": {
+      "desc": "當模型回應速度較快時，將加速文字動畫效果",
+      "title": "快速動畫"
+    },
     "enableHistoryCount": {
       "alias": "不限制",
       "limited": "只包含 {{number}} 條對話訊息",

src/const/settings/agent.ts

@@ -18,6 +18,7 @@ export const DEFAULT_AGENT_CHAT_CONFIG: LobeAgentChatConfig = {
   displayMode: 'chat',
   enableAutoCreateTopic: true,
   enableCompressHistory: true,
+  enableFastAnimation: false,
   enableHistoryCount: true,
   historyCount: 8,
 };

src/features/AgentSetting/AgentChat/index.tsx

@@ -64,6 +64,14 @@ const AgentChat = memo(() => {
         label: t('settingChat.chatStyleType.title'),
         minWidth: undefined,
       },
+      {
+        children: <Switch />,
+        desc: t('settingChat.enableFastAnimation.desc'),
+        label: t('settingChat.enableFastAnimation.title'),
+        minWidth: undefined,
+        name: 'enableFastAnimation',
+        valuePropName: 'checked',
+      },
       {
         children: <Input.TextArea placeholder={t('settingChat.inputTemplate.placeholder')} />,
         desc: t('settingChat.inputTemplate.desc'),

src/locales/default/setting.ts

@@ -180,6 +180,10 @@ export default {
     enableCompressHistory: {
       title: '开启历史消息自动总结',
     },
+    enableFastAnimation: {
+      desc: '当模型响应速度较快时，将加速文字动画效果',
+      title: '快速动画',
+    },
     enableHistoryCount: {
       alias: '不限制',
       limited: '只包含 {{number}} 条会话消息',

src/store/user/slices/settings/selectors/__snapshots__/settings.test.ts.snap

@@ -74,6 +74,7 @@ exports[`settingsSelectors > defaultAgent > should merge DEFAULT_AGENT and s.set
       "displayMode": "chat",
       "enableAutoCreateTopic": true,
       "enableCompressHistory": true,
+      "enableFastAnimation": false,
       "enableHistoryCount": true,
       "historyCount": 8,
     },

src/types/agent/index.ts

@@ -62,6 +62,7 @@ export interface LobeAgentChatConfig {
    * 历史消息长度压缩阈值
    */
   enableCompressHistory?: boolean;
+  enableFastAnimation?: boolean;
   /**
    * 开启历史记录条数
    */
@@ -80,6 +81,7 @@ export const AgentChatConfigSchema = z.object({
   displayMode: z.enum(['chat', 'docs']).optional(),
   enableAutoCreateTopic: z.boolean().optional(),
   enableCompressHistory: z.boolean().optional(),
+  enableFastAnimation: z.boolean().optional(),
   enableHistoryCount: z.boolean().optional(),
   enableMaxTokens: z.boolean().optional(),
   historyCount: z.number().optional(),

src/utils/fetch/fetchSSE.ts

@@ -2,6 +2,7 @@ import { isObject } from 'lodash-es';
 
 import { MESSAGE_CANCEL_FLAT } from '@/const/message';
 import { LOBE_CHAT_OBSERVATION_ID, LOBE_CHAT_TRACE_ID } from '@/const/trace';
+import { getAgentChatConfig } from '@/store/chat/slices/aiChat/actions/helpers';
 import { ChatErrorType } from '@/types/fetch';
 import { SmoothingParams } from '@/types/llm';
 import {
@@ -59,17 +60,28 @@ const START_ANIMATION_SPEED = 4;
 
 const END_ANIMATION_SPEED = 15;
 
+const calculateAverage = (ary: number[], count: number) => {
+  const filteredAry = ary.filter((num) => num !== 0);
+  if (filteredAry.length === 0) return 0;
+  const numbers = filteredAry.slice(-count);
+  return numbers.reduce((acc, num) => acc + num, 0) / numbers.length;
+};
+
 const createSmoothMessage = (params: {
   onTextUpdate: (delta: string, text: string) => void;
   startSpeed?: number;
 }) => {
   const { startSpeed = START_ANIMATION_SPEED } = params;
+  const agentChatConfig = getAgentChatConfig();
 
   let buffer = '';
   // why use queue: https://shareg.pt/GLBrjpK
   let outputQueue: string[] = [];
   let isAnimationActive = false;
   let animationFrameId: number | null = null;
+  let lastPushTime = -1;
+  let pushIntervalHistories: number[] = [];
+  let updateIntervalHistories: number[] = [];
 
   // when you need to stop the animation, call this function
   const stopAnimation = () => {
@@ -82,8 +94,9 @@ const createSmoothMessage = (params: {
 
   // define startAnimation function to display the text in buffer smooth
   // when you need to start the animation, call this function
-  const startAnimation = (speed = startSpeed) =>
-    new Promise<void>((resolve) => {
+  const startAnimation = (speed = startSpeed) => {
+    let lastUpdateTextTime = Date.now();
+    return new Promise<void>((resolve) => {
       if (isAnimationActive) {
         resolve();
         return;
@@ -103,8 +116,21 @@ const createSmoothMessage = (params: {
         // 如果还有文本没有显示
         // 检查队列中是否有字符待显示
         if (outputQueue.length > 0) {
+          let dynamicSpeed = speed;
+          if (agentChatConfig.enableFastAnimation) {
+            updateIntervalHistories.push(Date.now() - lastUpdateTextTime);
+            lastUpdateTextTime = Date.now();
+
+            const averageInterval = calculateAverage(pushIntervalHistories, 4);
+            const averageUpdateInterval = calculateAverage(updateIntervalHistories, 4);
+
+            dynamicSpeed = outputQueue.length / (averageInterval / averageUpdateInterval);
+            if (!dynamicSpeed || !isFinite(dynamicSpeed)) dynamicSpeed = speed;
+            dynamicSpeed = Math.max(speed, Math.floor(dynamicSpeed));
+          }
+
           // 从队列中获取前 n 个字符（如果存在）
-          const charsToAdd = outputQueue.splice(0, speed).join('');
+          const charsToAdd = outputQueue.splice(0, dynamicSpeed).join('');
           buffer += charsToAdd;
 
           // 更新消息内容，这里可能需要结合实际情况调整
@@ -122,8 +148,14 @@ const createSmoothMessage = (params: {
 
       animationFrameId = requestAnimationFrame(updateText);
     });
+  };
 
   const pushToQueue = (text: string) => {
+    if (text && lastPushTime !== -1) {
+      const interval = Date.now() - lastPushTime;
+      pushIntervalHistories.push(interval);
+    }
+    lastPushTime = text ? Date.now() : lastPushTime;
     outputQueue.push(...text.split(''));
   };