🐛 fix: TypewriterEffect not refreshing on language change (#11657)

Add locale key to TypewriterEffect components to force re-render when language changes
This commit is contained in:
Innei
2026-01-20 21:03:45 +08:00
committed by GitHub
parent 5858cd16ba
commit ba30f46bc6
5 changed files with 19 additions and 3 deletions

View File

@@ -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}

View File

@@ -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' }),

View File

@@ -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}

View File

@@ -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}

View File

@@ -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' }),