mirror of
https://github.com/lobehub/lobehub.git
synced 2026-03-27 13:29:15 +07:00
🐛 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:
@@ -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}
|
||||
|
||||
@@ -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' }),
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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' }),
|
||||
|
||||
Reference in New Issue
Block a user