fix(web): replace hardcoded English strings with i18n in floating chat widget (#14095)

## Summary
- Replace 3 hardcoded English strings in `floating-chat-widget.tsx` with
`react-i18next` `t()` calls so the widget respects the `locale` query
parameter
- Add `useTranslation` hook to the component
- Add translation keys (`chat.chatSupport`, `chat.replyInstantly`,
`chat.typeYourMessage`) to all 14 locale files

## Strings replaced
| Original | i18n key |
|---|---|
| `'Chat Support'` | `t('chat.chatSupport')` |
| `'We typically reply instantly'` | `t('chat.replyInstantly')` |
| `'Type your message...'` | `t('chat.typeYourMessage')` |

Closes #14072

Co-authored-by: khanhkhanhlele <namkhanh2172@gmail.com>
This commit is contained in:
xinmotlanthua
2026-04-14 19:12:56 +07:00
committed by GitHub
parent a98b64326c
commit e1dede1366
16 changed files with 53 additions and 6 deletions

View File

@@ -4,6 +4,7 @@ import { MessageType, SharedFrom } from '@/constants/chat';
import { useFetchExternalAgentInputs } from '@/hooks/use-agent-request';
import { useFetchExternalChatInfo } from '@/hooks/use-chat-request';
import i18n, { changeLanguageAsync } from '@/locales/config';
import { useTranslation } from 'react-i18next';
import { useSendNextSharedMessage } from '@/pages/agent/hooks/use-send-shared-message';
import { MessageCircle, Minimize2, Send, X } from 'lucide-react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -14,6 +15,7 @@ import {
import FloatingChatWidgetMarkdown from './floating-chat-widget-markdown';
const FloatingChatWidget = () => {
const { t } = useTranslation();
const [isOpen, setIsOpen] = useState(false);
const [isMinimized, setIsMinimized] = useState(false);
const [inputValue, setInputValue] = useState('');
@@ -386,10 +388,10 @@ const FloatingChatWidget = () => {
</div>
<div>
<h3 className="font-semibold text-sm">
{title || 'Chat Support'}
{title || t('chat.chatSupport')}
</h3>
<p className="text-xs text-blue-100">
We typically reply instantly
{t('chat.replyInstantly')}
</p>
</div>
</div>
@@ -489,7 +491,7 @@ const FloatingChatWidget = () => {
handleInputChange(e);
}}
onKeyPress={handleKeyPress}
placeholder="Type your message..."
placeholder={t('chat.typeYourMessage')}
rows={1}
className="w-full resize-none border border-gray-300 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
style={{ minHeight: '44px', maxHeight: '120px' }}
@@ -540,10 +542,10 @@ const FloatingChatWidget = () => {
</div>
<div>
<h3 className="font-semibold text-sm">
{title || 'Chat Support'}
{title || t('chat.chatSupport')}
</h3>
<p className="text-xs text-blue-100">
We typically reply instantly
{t('chat.replyInstantly')}
</p>
</div>
</div>
@@ -666,7 +668,7 @@ const FloatingChatWidget = () => {
handleInputChange(e);
}}
onKeyPress={handleKeyPress}
placeholder="Type your message..."
placeholder={t('chat.typeYourMessage')}
rows={1}
className="w-full resize-none border border-gray-300 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black"
style={{ minHeight: '44px', maxHeight: '120px' }}