@lobehub/lobehub 2.0.0-next.323 → 2.0.0-next.324

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 2.0.0-next.324](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.323...v2.0.0-next.324)
+
+<sup>Released on **2026-01-20**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: TypewriterEffect not refreshing on language change.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: TypewriterEffect not refreshing on language change, closes [#11657](https://github.com/lobehub/lobe-chat/issues/11657) ([ba30f46](https://github.com/lobehub/lobe-chat/commit/ba30f46))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.323](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.322...v2.0.0-next.323)
 
 <sup>Released on **2026-01-20**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "TypewriterEffect not refreshing on language change."
+      ]
+    },
+    "date": "2026-01-20",
+    "version": "2.0.0-next.324"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.323",
+  "version": "2.0.0-next.324",
   "description": "LobeHub - an open-source,comprehensive AI Agent 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",

package/src/app/[variants]/(desktop)/desktop-onboarding/components/LobeMessage.tsx

@@ -2,6 +2,7 @@ import { Flexbox, type FlexboxProps, Text } from '@lobehub/ui';
 import { TypewriterEffect, type TypewriterEffectProps } from '@lobehub/ui/awesome';
 import { LoadingDots } from '@lobehub/ui/chat';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { ProductLogo } from '@/components/Branding';
 
@@ -11,6 +12,9 @@ interface LobeMessageProps extends Omit<FlexboxProps, 'children'> {
 }
 
 const LobeMessage = memo<LobeMessageProps>(({ sentences, fontSize = 24, ...rest }) => {
+  const { i18n } = useTranslation();
+  const locale = i18n.language;
+
   return (
     <Flexbox gap={8} {...rest}>
       <ProductLogo size={fontSize * 2} />
@@ -21,6 +25,7 @@ const LobeMessage = memo<LobeMessageProps>(({ sentences, fontSize = 24, ...rest
           deletePauseDuration={1000}
           deletingSpeed={32}
           hideCursorWhileTyping={'afterTyping'}
+          key={locale}
           pauseDuration={16_000}
           sentences={sentences}
           typingSpeed={64}

package/src/app/[variants]/(desktop)/desktop-onboarding/features/WelcomeStep.tsx

@@ -17,7 +17,8 @@ interface WelcomeStepProps {
 }
 
 const WelcomeStep = memo<WelcomeStepProps>(({ onNext }) => {
-  const { t } = useTranslation('onboarding');
+  const { t, i18n } = useTranslation('onboarding');
+  const locale = i18n.language;
   const updateGeneralConfig = useUserStore((s) => s.updateGeneralConfig);
 
   const handleNext = () => {
@@ -53,6 +54,7 @@ const WelcomeStep = memo<WelcomeStepProps>(({ onNext }) => {
             deletePauseDuration={1000}
             deletingSpeed={32}
             hideCursorWhileTyping={'afterTyping'}
+            key={locale}
             pauseDuration={16_000}
             sentences={[
               t('telemetry.title', { name: 'Lobe AI' }),

package/src/app/[variants]/(main)/home/features/WelcomeText/index.tsx

@@ -7,7 +7,8 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const WelcomeText = memo(() => {
-  const { t } = useTranslation('welcome');
+  const { t, i18n } = useTranslation('welcome');
+  const locale = i18n.language;
 
   const sentences = useMemo(() => {
     const messages = t('welcomeMessages', { returnObjects: true }) as Record<string, string>;
@@ -28,6 +29,7 @@ const WelcomeText = memo(() => {
         deletePauseDuration={1000}
         deletingSpeed={32}
         hideCursorWhileTyping={'afterTyping'}
+        key={locale}
         pauseDuration={16_000}
         sentences={sentences}
         typingSpeed={64}

package/src/app/[variants]/onboarding/components/LobeMessage.tsx

@@ -2,6 +2,7 @@ import { Flexbox, type FlexboxProps, Text } from '@lobehub/ui';
 import { TypewriterEffect, type TypewriterEffectProps } from '@lobehub/ui/awesome';
 import { LoadingDots } from '@lobehub/ui/chat';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { ProductLogo } from '@/components/Branding';
 
@@ -11,6 +12,9 @@ interface LobeMessageProps extends Omit<FlexboxProps, 'children'> {
 }
 
 const LobeMessage = memo<LobeMessageProps>(({ sentences, fontSize = 24, ...rest }) => {
+  const { i18n } = useTranslation();
+  const locale = i18n.language;
+
   return (
     <Flexbox gap={8} {...rest}>
       <ProductLogo size={fontSize * 2} />
@@ -21,6 +25,7 @@ const LobeMessage = memo<LobeMessageProps>(({ sentences, fontSize = 24, ...rest
           deletePauseDuration={1000}
           deletingSpeed={32}
           hideCursorWhileTyping={'afterTyping'}
+          key={locale}
           pauseDuration={16_000}
           sentences={sentences}
           typingSpeed={64}

package/src/app/[variants]/onboarding/features/TelemetryStep.tsx

@@ -19,7 +19,8 @@ interface TelemetryStepProps {
 }
 
 const TelemetryStep = memo<TelemetryStepProps>(({ onNext }) => {
-  const { t } = useTranslation('onboarding');
+  const { t, i18n } = useTranslation('onboarding');
+  const locale = i18n.language;
   const [check, setCheck] = useState(true);
   const [isNavigating, setIsNavigating] = useState(false);
   const isNavigatingRef = useRef(false);
@@ -63,6 +64,7 @@ const TelemetryStep = memo<TelemetryStepProps>(({ onNext }) => {
             deletePauseDuration={1000}
             deletingSpeed={32}
             hideCursorWhileTyping={'afterTyping'}
+            key={locale}
             pauseDuration={16_000}
             sentences={[
               t('telemetry.title', { name: 'Lobe AI' }),