@lobehub/chat 1.94.2 → 1.94.4

package/locales/ar/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "موضوع حورية البحر"
     },
-    "title": "مظهر الدردشة"
+    "title": "مظهر الدردشة",
+    "transitionMode": {
+      "desc": "رسوم انتقال رسائل الدردشة",
+      "options": {
+        "fadeIn": "تلاشي",
+        "none": {
+          "desc": "يعتمد هذا على طريقة إخراج استجابة النموذج، يرجى الاختبار بنفسك.",
+          "value": "بدون"
+        },
+        "smooth": "سلس"
+      },
+      "title": "رسوم الانتقال"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/bg-BG/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Тема русалка"
     },
-    "title": "Външен вид на чата"
+    "title": "Външен вид на чата",
+    "transitionMode": {
+      "desc": "Анимация на прехода на съобщенията в чата",
+      "options": {
+        "fadeIn": "Постепенно появяване",
+        "none": {
+          "desc": "Зависи от начина на отговор на модела, моля, тествайте сами.",
+          "value": "Без"
+        },
+        "smooth": "Плавно"
+      },
+      "title": "Анимация на прехода"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/de-DE/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Mermaid-Thema"
     },
-    "title": "Chatdesign"
+    "title": "Chatdesign",
+    "transitionMode": {
+      "desc": "Übergangsanimation der Chatnachrichten",
+      "options": {
+        "fadeIn": "Einblenden",
+        "none": {
+          "desc": "Dies hängt von der Art der Antwort des Modells ab, bitte testen Sie es selbst.",
+          "value": "Keine"
+        },
+        "smooth": "Sanft"
+      },
+      "title": "Übergangsanimation"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/en-US/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Mermaid Theme"
     },
-    "title": "Chat Appearance"
+    "title": "Chat Appearance",
+    "transitionMode": {
+      "desc": "Transition animation for chat messages",
+      "options": {
+        "fadeIn": "Fade In",
+        "none": {
+          "desc": "This depends on the model's response output method; please test it yourself.",
+          "value": "None"
+        },
+        "smooth": "Smooth"
+      },
+      "title": "Transition Animation"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/es-ES/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Tema Sirena"
     },
-    "title": "Apariencia del Chat"
+    "title": "Apariencia del Chat",
+    "transitionMode": {
+      "desc": "Animación de transición de los mensajes de chat",
+      "options": {
+        "fadeIn": "Aparecer gradualmente",
+        "none": {
+          "desc": "Depende de la forma en que el modelo genera la respuesta, por favor pruébelo usted mismo.",
+          "value": "Ninguna"
+        },
+        "smooth": "Suave"
+      },
+      "title": "Animación de transición"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/fa-IR/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "تم مرمید"
     },
-    "title": "ظاهر چت"
+    "title": "ظاهر چت",
+    "transitionMode": {
+      "desc": "انیمیشن انتقال پیام‌های چت",
+      "options": {
+        "fadeIn": "نمایش تدریجی",
+        "none": {
+          "desc": "این بستگی به نحوه خروجی مدل دارد، لطفاً خودتان تست کنید.",
+          "value": "بدون انیمیشن"
+        },
+        "smooth": "نرم"
+      },
+      "title": "انیمیشن انتقال"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/fr-FR/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Thème Sirène"
     },
-    "title": "Apparence du chat"
+    "title": "Apparence du chat",
+    "transitionMode": {
+      "desc": "Animation de transition des messages de chat",
+      "options": {
+        "fadeIn": "Fondu en entrée",
+        "none": {
+          "desc": "Cela dépend de la manière dont le modèle génère la réponse, veuillez tester par vous-même.",
+          "value": "Aucun"
+        },
+        "smooth": "Fluide"
+      },
+      "title": "Animation de transition"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/it-IT/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Tema Sirena"
     },
-    "title": "Aspetto della Chat"
+    "title": "Aspetto della Chat",
+    "transitionMode": {
+      "desc": "Animazione di transizione dei messaggi di chat",
+      "options": {
+        "fadeIn": "Dissolvenza in entrata",
+        "none": {
+          "desc": "Dipende dal modo in cui il modello restituisce la risposta, si prega di testare autonomamente.",
+          "value": "Nessuna"
+        },
+        "smooth": "Fluido"
+      },
+      "title": "Animazione di transizione"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/ja-JP/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "マーメイドテーマ"
     },
-    "title": "チャットの外観"
+    "title": "チャットの外観",
+    "transitionMode": {
+      "desc": "チャットメッセージの遷移アニメーション",
+      "options": {
+        "fadeIn": "フェードイン",
+        "none": {
+          "desc": "これはモデルの応答出力方法によりますので、ご自身でテストしてください。",
+          "value": "なし"
+        },
+        "smooth": "スムーズ"
+      },
+      "title": "遷移アニメーション"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/ko-KR/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "인어 테마"
     },
-    "title": "채팅 외관"
+    "title": "채팅 외관",
+    "transitionMode": {
+      "desc": "채팅 메시지의 전환 애니메이션",
+      "options": {
+        "fadeIn": "서서히 나타남",
+        "none": {
+          "desc": "이는 모델의 응답 출력 방식에 따라 다르므로 직접 테스트해 보세요.",
+          "value": "없음"
+        },
+        "smooth": "부드럽게"
+      },
+      "title": "전환 애니메이션"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/nl-NL/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Mermaid-thema"
     },
-    "title": "Chat uiterlijk"
+    "title": "Chat uiterlijk",
+    "transitionMode": {
+      "desc": "Overgangsanimatie van chatberichten",
+      "options": {
+        "fadeIn": "Vervagen",
+        "none": {
+          "desc": "Dit hangt af van de manier waarop het model reageert; test dit zelf.",
+          "value": "Geen"
+        },
+        "smooth": "Vloeiend"
+      },
+      "title": "Overgangsanimatie"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/pl-PL/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Motyw Syreny"
     },
-    "title": "Wygląd czatu"
+    "title": "Wygląd czatu",
+    "transitionMode": {
+      "desc": "Animacja przejścia wiadomości czatu",
+      "options": {
+        "fadeIn": "Pojawianie się",
+        "none": {
+          "desc": "To zależy od sposobu generowania odpowiedzi przez model, proszę przetestować samodzielnie.",
+          "value": "Brak"
+        },
+        "smooth": "Płynne"
+      },
+      "title": "Animacja przejścia"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/pt-BR/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Tema Sereia"
     },
-    "title": "Aparência do Chat"
+    "title": "Aparência do Chat",
+    "transitionMode": {
+      "desc": "Animação de transição das mensagens do chat",
+      "options": {
+        "fadeIn": "Desvanecer",
+        "none": {
+          "desc": "Depende da forma como o modelo responde, por favor teste por conta própria.",
+          "value": "Nenhuma"
+        },
+        "smooth": "Suave"
+      },
+      "title": "Animação de transição"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/ru-RU/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Тема Русалки"
     },
-    "title": "Внешний вид чата"
+    "title": "Внешний вид чата",
+    "transitionMode": {
+      "desc": "Анимация перехода сообщений чата",
+      "options": {
+        "fadeIn": "Появление",
+        "none": {
+          "desc": "Зависит от способа вывода ответа модели, рекомендуется протестировать самостоятельно.",
+          "value": "Нет"
+        },
+        "smooth": "Плавно"
+      },
+      "title": "Анимация перехода"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/tr-TR/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Deniz Kızı Teması"
     },
-    "title": "Sohbet Görünümü"
+    "title": "Sohbet Görünümü",
+    "transitionMode": {
+      "desc": "Sohbet mesajlarının geçiş animasyonu",
+      "options": {
+        "fadeIn": "Solma",
+        "none": {
+          "desc": "Bu, modelin yanıt çıktısına bağlıdır, lütfen kendiniz test edin.",
+          "value": "Yok"
+        },
+        "smooth": "Yumuşak"
+      },
+      "title": "Geçiş Animasyonu"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/vi-VN/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Chủ đề Nàng Tiên Cá"
     },
-    "title": "Giao diện trò chuyện"
+    "title": "Giao diện trò chuyện",
+    "transitionMode": {
+      "desc": "Hiệu ứng chuyển tiếp của tin nhắn trò chuyện",
+      "options": {
+        "fadeIn": "Mờ dần",
+        "none": {
+          "desc": "Điều này phụ thuộc vào cách mô hình phản hồi, vui lòng tự kiểm tra.",
+          "value": "Không"
+        },
+        "smooth": "Mượt mà"
+      },
+      "title": "Hiệu ứng chuyển tiếp"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/zh-CN/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "Mermaid 主题"
     },
-    "title": "聊天外观"
+    "title": "聊天外观",
+    "transitionMode": {
+      "desc": "聊天消息的过渡动画",
+      "options": {
+        "fadeIn": "淡入",
+        "none": {
+          "desc": "这取决于模型的响应输出方式，请自行测试。",
+          "value": "无"
+        },
+        "smooth": "平滑"
+      },
+      "title": "过渡动画"
+    }
   },
   "settingCommon": {
     "lang": {

package/locales/zh-TW/setting.json

@@ -240,7 +240,19 @@
     "mermaidTheme": {
       "title": "美人魚主題"
     },
-    "title": "聊天外觀"
+    "title": "聊天外觀",
+    "transitionMode": {
+      "desc": "聊天訊息的過渡動畫",
+      "options": {
+        "fadeIn": "淡入",
+        "none": {
+          "desc": "這取決於模型的回應輸出方式，請自行測試。",
+          "value": "無"
+        },
+        "smooth": "平滑"
+      },
+      "title": "過渡動畫"
+    }
   },
   "settingCommon": {
     "lang": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.94.2",
+  "version": "1.94.4",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -346,7 +346,7 @@
     "semantic-release": "^21.1.2",
     "serwist": "^9.0.14",
     "stylelint": "^15.11.0",
-    "tsx": "^4.19.4",
+    "tsx": "~4.19.4",
     "typescript": "^5.8.3",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",

package/src/app/[variants]/(main)/settings/common/features/ChatAppearance/ChatTransitionPreview.tsx

@@ -0,0 +1,111 @@
+import { ActionIconGroup, Block } from '@lobehub/ui';
+import { ChatItem } from '@lobehub/ui/chat';
+import { useTheme } from 'antd-style';
+import { RotateCwIcon } from 'lucide-react';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
+import { UserGeneralConfig } from '@/types/user/settings';
+
+const data = `
+### Features
+
+**Key Highlights**
+- 🌐 Multi-model: GPT-4/Gemini/Ollama
+- 🖼️ Vision: \`gpt-4-vision\` integration
+- 🛠️ Plugins: Function Calling & real-time data
+`;
+
+const streamingSpeed = 25; // ms per character
+
+interface ChatTransitionPreviewProps {
+  mode: UserGeneralConfig['transitionMode'];
+}
+
+const randomInlRange = (min = 0, max = min + 10) => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+const ChatTransitionPreview = memo<ChatTransitionPreviewProps>(({ mode }) => {
+  const [streamedContent, setStreamedContent] = useState(() => {
+    if (mode === 'none') {
+      return data.slice(0, Math.max(0, randomInlRange(10, 100)));
+    }
+    return '';
+  });
+
+  const chunkStep = useMemo(() => {
+    if (mode === 'none') {
+      return Math.ceil(data.length / randomInlRange(3, 5));
+    }
+    return 3;
+  }, [mode]);
+
+  const [isStreaming, setIsStreaming] = useState(true);
+  const { t } = useTranslation('common');
+  const token = useTheme();
+
+  useEffect(() => {
+    if (!isStreaming) return;
+
+    let currentPosition = 0;
+    if (streamedContent.length > 0) {
+      currentPosition = streamedContent.length;
+    }
+
+    const intervalId = setInterval(() => {
+      if (currentPosition < data.length) {
+        // Stream character by character
+        const nextChunkSize = Math.min(chunkStep, data.length - currentPosition);
+        const nextContent = data.slice(0, Math.max(0, currentPosition + nextChunkSize));
+        setStreamedContent(nextContent);
+        currentPosition += nextChunkSize;
+      } else {
+        clearInterval(intervalId);
+        setIsStreaming(false);
+      }
+    }, streamingSpeed);
+
+    return () => clearInterval(intervalId);
+  }, [isStreaming, streamedContent.length, chunkStep]);
+
+  const handleReset = () => {
+    setStreamedContent('');
+    setIsStreaming(true);
+  };
+
+  return (
+    <Block
+      style={{
+        background: token.colorBgContainerSecondary,
+        marginBlock: 16,
+        minHeight: 280,
+        paddingBottom: 16,
+      }}
+    >
+      <ChatItem
+        actions={
+          <ActionIconGroup
+            items={[
+              {
+                icon: RotateCwIcon,
+                key: 'reset',
+                onClick: handleReset,
+                title: t('retry'),
+              },
+            ]}
+            size="small"
+          />
+        }
+        avatar={{ avatar: DEFAULT_INBOX_AVATAR }}
+        markdownProps={{ animated: mode === 'fadeIn' }}
+        message={streamedContent}
+        variant="bubble"
+        width={'100%'}
+      />
+    </Block>
+  );
+});
+
+export default ChatTransitionPreview;

package/src/app/[variants]/(main)/settings/common/features/ChatAppearance/index.tsx

@@ -4,14 +4,16 @@ import {
   Form,
   type FormGroupItemType,
   Icon,
+  Segmented,
   Select,
   SliderWithInput,
   highlighterThemes,
   mermaidThemes,
 } from '@lobehub/ui';
 import { Skeleton } from 'antd';
+import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { Loader2Icon } from 'lucide-react';
+import { Loader2Icon, TriangleAlert } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -20,19 +22,64 @@ import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
 import ChatPreview from './ChatPreview';
+import ChatTransitionPreview from './ChatTransitionPreview';
 import HighlighterPreview from './HighlighterPreview';
 import MermaidPreview from './MermaidPreview';
 
 const ChatAppearance = memo(() => {
   const { t } = useTranslation('setting');
   const { general } = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const theme = useTheme();
   const [setSettings, isUserStateInit] = useUserStore((s) => [s.setSettings, s.isUserStateInit]);
   const [loading, setLoading] = useState(false);
 
   if (!isUserStateInit) return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
 
-  const theme: FormGroupItemType = {
+  const themeItems: FormGroupItemType = {
     children: [
+      {
+        children: (
+          <ChatTransitionPreview key={general.transitionMode} mode={general.transitionMode} />
+        ),
+        noStyle: true,
+      },
+      {
+        children: (
+          <Segmented
+            block
+            options={[
+              {
+                label: t('settingChatAppearance.transitionMode.options.none.value'),
+                value: 'none',
+              },
+              {
+                label: t('settingChatAppearance.transitionMode.options.fadeIn'),
+                value: 'fadeIn',
+              },
+              {
+                label: t('settingChatAppearance.transitionMode.options.smooth'),
+                value: 'smooth',
+              },
+            ]}
+          />
+        ),
+        desc: t('settingChatAppearance.transitionMode.desc'),
+        label: t('settingChatAppearance.transitionMode.title'),
+        name: 'transitionMode',
+        tooltip:
+          general.transitionMode === 'none'
+            ? {
+                icon: (
+                  <TriangleAlert
+                    color={theme.colorWarning}
+                    size={14}
+                    style={{ alignSelf: 'flex-end', marginBlockEnd: 2, marginInlineStart: 8 }}
+                  />
+                ),
+                title: t('settingChatAppearance.transitionMode.options.none.desc'),
+              }
+            : undefined,
+      },
       {
         children: <ChatPreview fontSize={general.fontSize} />,
         noStyle: true,
@@ -112,7 +159,7 @@ const ChatAppearance = memo(() => {
   return (
     <Form
       initialValues={general}
-      items={[theme]}
+      items={[themeItems]}
       itemsType={'group'}
       onValuesChange={async (value) => {
         setLoading(true);

package/src/components/Thinking/index.tsx

@@ -77,9 +77,11 @@ interface ThinkingProps {
   duration?: number;
   style?: CSSProperties;
   thinking?: boolean;
+  thinkingAnimated?: boolean;
 }
 
-const Thinking = memo<ThinkingProps>(({ content, duration, thinking, style, citations }) => {
+const Thinking = memo<ThinkingProps>((props) => {
+  const { content, duration, thinking, style, citations, thinkingAnimated } = props;
   const { t } = useTranslation(['components', 'common']);
   const { styles, cx, theme } = useStyles();
 
@@ -154,7 +156,7 @@ const Thinking = memo<ThinkingProps>(({ content, duration, thinking, style, cita
             }}
           >
             {typeof content === 'string' ? (
-              <Markdown animated={thinking} citations={citations} variant={'chat'}>
+              <Markdown animated={thinkingAnimated} citations={citations} variant={'chat'}>
                 {content}
               </Markdown>
             ) : (

package/src/config/modelProviders/anthropic.ts

@@ -196,14 +196,9 @@ const Anthropic: ModelProviderCard = {
     proxyUrl: {
       placeholder: 'https://api.anthropic.com',
     },
+    responseAnimation: 'smooth',
     sdkType: 'anthropic',
     showModelFetcher: true,
-    smoothing: {
-      text: true,
-    },
-  },
-  smoothing: {
-    text: true,
   },
   url: 'https://anthropic.com',
 };