🌐 chore: update i18n hook

src/ProChat/components/ChatList/index.tsx

@@ -6,8 +6,8 @@ import { useStore } from '@/ProChat/store';
 import { chatSelectors } from '@/ProChat/store/selectors';
 
 import { ChatListItemProps } from '@/ChatList/ChatListItem';
+import useProChatLocale from '@/ProChat/hooks/useProChatLocale';
 import { useRefFunction } from '@/ProChat/hooks/useRefFunction';
-import { gLocaleObject } from '@/locale';
 import { renderActions } from './Actions';
 import { renderMessagesExtra } from './Extras';
 import { renderMessages } from './Messages';
@@ -21,7 +21,7 @@ interface ListProps extends Partial<ChatListProps> {
 const List = memo<ListProps>(
   ({ showTitle, itemShouldUpdate, chatItemRenderConfig, markdownProps }) => {
     const data = useStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
-    const locale = useStore((s) => s.locale);
+    const { localeObject: localeObj } = useProChatLocale();
 
     const [
       init,
@@ -70,7 +70,6 @@ const List = memo<ListProps>(
     );
 
     const textObj = useMemo(() => {
-      const localeObj = gLocaleObject(locale);
       return {
         cancel: localeObj.cancel,
         confirm: localeObj.confirm,

src/ProChat/components/InputArea/ActionBar.tsx

@@ -5,7 +5,7 @@ import ActionIcon from '@/ActionIcon';
 import { ConfigProvider, Popconfirm } from 'antd';
 import { Trash2 } from 'lucide-react';
 
-import { gLocaleObject } from '@/locale';
+import useProChatLocale from '@/ProChat/hooks/useProChatLocale';
 import { useStore } from '../../store';
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -15,25 +15,26 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 export const ActionBar = ({ className }: { className?: string }) => {
-  const [clearMessage, actionsRender, flexConfig, locale] = useStore((s) => [
+  const [clearMessage, actionsRender, flexConfig] = useStore((s) => [
     s.clearMessage,
     s.actions?.render,
     s.actions?.flexConfig,
-    s.locale,
   ]);
 
+  const { localeObject } = useProChatLocale();
+
   const { styles, theme } = useStyles();
   const defaultDoms = [
     <Popconfirm
-      title={gLocaleObject(locale).clearModalTitle}
+      title={localeObject.clearModalTitle}
       okButtonProps={{ danger: true }}
-      okText={gLocaleObject(locale).clearDialogue}
+      okText={localeObject.clearDialogue}
       key={'clear'}
       onConfirm={() => {
         clearMessage();
       }}
     >
-      <ActionIcon title={gLocaleObject(locale).clearCurrentDialogue} icon={Trash2} />
+      <ActionIcon title={localeObject.clearCurrentDialogue} icon={Trash2} />
     </Popconfirm>,
   ];
 

src/ProChat/components/InputArea/index.tsx

@@ -6,7 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useStore } from '../../store';
 
-import { gLocaleObject } from '@/locale';
+import useProChatLocale from '@/ProChat/hooks/useProChatLocale';
 import { TextAreaProps } from 'antd/es/input';
 import ActionBar from './ActionBar';
 import { AutoCompleteTextArea } from './AutoCompleteTextArea';
@@ -72,27 +72,20 @@ export type ChatInputAreaProps = {
 
 export const ChatInputArea = (props: ChatInputAreaProps) => {
   const { className, onSend, inputAreaRender, inputRender, sendButtonRender } = props || {};
-  const [
-    sendMessage,
-    isLoading,
-    placeholder,
-    inputAreaProps,
-    locale,
-    clearMessage,
-    stopGenerateMessage,
-  ] = useStore((s) => [
-    s.sendMessage,
-    !!s.chatLoadingId,
-    s.placeholder,
-    s.inputAreaProps,
-    s.locale,
-    s.clearMessage,
-    s.stopGenerateMessage,
-  ]);
+  const [sendMessage, isLoading, placeholder, inputAreaProps, clearMessage, stopGenerateMessage] =
+    useStore((s) => [
+      s.sendMessage,
+      !!s.chatLoadingId,
+      s.placeholder,
+      s.inputAreaProps,
+      s.clearMessage,
+      s.stopGenerateMessage,
+    ]);
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const [message, setMessage] = useState('');
   const isChineseInput = useRef(false);
   const { styles, theme } = useStyles();
+  const { localeObject } = useProChatLocale();
 
   const send = async () => {
     if (onSend) {
@@ -126,7 +119,7 @@ export const ChatInputArea = (props: ChatInputAreaProps) => {
    */
 
   const defaultAutoCompleteTextAreaProps = {
-    placeholder: placeholder || gLocaleObject(locale).placeholder,
+    placeholder: placeholder || localeObject.placeholder,
     ...inputAreaProps,
     className: cx(styles.input, inputAreaProps?.className, `${prefixClass}-component`),
     value: message,

src/ProChat/container/App.tsx

@@ -4,12 +4,11 @@ import RcResizeObserver from 'rc-resize-observer';
 import { CSSProperties, memo, useContext, useEffect, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useStore } from '@/ProChat/store';
-import { gLocaleObject } from '@/locale';
 import { ConfigProvider } from 'antd';
 import ChatList from '../components/ChatList';
 import ChatInputArea, { ChatInputAreaProps } from '../components/InputArea';
 import ChatScrollAnchor from '../components/ScrollAnchor';
+import useProChatLocale from '../hooks/useProChatLocale';
 import { useOverrideStyles } from './OverrideStyle';
 import { ProChatChatReference } from './StoreUpdater';
 import { ProChatProps } from './index';
@@ -91,7 +90,7 @@ const App = memo<ConversationProps>(
     const [isRender, setIsRender] = useState(false);
     const [height, setHeight] = useState('100%' as string | number);
     const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-    const locale = useStore((s) => s.locale);
+    const { localeObject } = useProChatLocale();
 
     useEffect(() => {
       // 保证 ref 永远存在
@@ -146,7 +145,7 @@ const App = memo<ConversationProps>(
                   bottom: 138,
                 }}
                 target={ref}
-                text={gLocaleObject(locale).backToBottom}
+                text={localeObject.backToBottom}
                 {...backToBottomConfig}
               />
             ) : null}

src/ProChat/container/Provider.tsx

@@ -21,6 +21,7 @@ export const ProChatProvider = memo<ProChatProviderProps<any>>(
     userMeta,
     assistantMeta,
     request,
+    locale,
     ...props
   }) => {
     let isWrapped = true;
@@ -37,6 +38,7 @@ export const ProChatProvider = memo<ProChatProviderProps<any>>(
           request={request}
           assistantMeta={assistantMeta}
           onChatsChange={onChatsChange}
+          locale={locale}
         />
       </>
     );

src/ProChat/container/StoreUpdater.tsx

@@ -8,7 +8,10 @@ export type ProChatChatReference = MutableRefObject<ProChatInstance | undefined>
 
 export interface StoreUpdaterProps
   extends Partial<
-      Pick<ChatState, 'chats' | 'config' | 'init' | 'onChatsChange' | 'helloMessage' | 'request'>
+      Pick<
+        ChatState,
+        'chats' | 'config' | 'init' | 'onChatsChange' | 'helloMessage' | 'request' | 'locale'
+      >
     >,
     Pick<ChatProps, 'userMeta' | 'assistantMeta'> {
   chatRef?: ProChatChatReference;
@@ -25,6 +28,7 @@ const StoreUpdater = memo<StoreUpdaterProps>(
     helloMessage,
     chats,
     config,
+    locale,
   }) => {
     const storeApi = useStoreApi();
     const useStoreUpdater = createStoreUpdater(storeApi);
@@ -42,6 +46,7 @@ const StoreUpdater = memo<StoreUpdaterProps>(
 
     useStoreUpdater('request', request);
 
+    useStoreUpdater('locale', locale);
     const instance = useProChat();
     useImperativeHandle(chatRef, () => instance);
 

src/ProChat/demos/i18n.tsx

@@ -0,0 +1,26 @@
+import { ProChat, type Locale } from '@ant-design/pro-chat';
+import { Segmented } from 'antd';
+import { useTheme } from 'antd-style';
+import React from 'react';
+
+export default () => {
+  const theme = useTheme();
+  const [language, setLanguage] = React.useState<Locale>('en-US');
+  return (
+    <div style={{ background: theme.colorBgLayout }}>
+      <Segmented<Locale>
+        options={['en-US', 'zh-CN']}
+        defaultValue="en-US"
+        onChange={(v) => {
+          setLanguage(v);
+        }}
+      />
+      <ProChat
+        locale={language}
+        request={async () => {
+          return new Response('this is mock data');
+        }}
+      />
+    </div>
+  );
+};

src/ProChat/hooks/useProChatLocale.ts

@@ -0,0 +1,18 @@
+import { Locale, gLocaleObject } from '@/locale';
+import { useMemo } from 'react';
+import { useStore } from '../store';
+
+const useProChatLocale = () => {
+  const locale = useStore((s) => s.locale);
+
+  const localeObject = useMemo(() => {
+    return gLocaleObject(locale as Locale);
+  }, [locale]);
+
+  return {
+    locale,
+    localeObject,
+  };
+};
+
+export default useProChatLocale;

src/ProChat/index.en-US.md

@@ -118,6 +118,10 @@ All initialization props such as `initialChats` need to be moved from `ProChat`
 
 :::
 
+## International
+
+<code src="./demos/i18n.tsx"></code>
+
 ## APIs
 
 | Parameter | description | type | default |

src/ProChat/index.md

@@ -118,6 +118,10 @@ useProChat hooks 必须在包裹 `ProChatProvider` 后方可使用。
 
 :::
 
+## 国际化
+
+<code src="./demos/i18n.tsx"></code>
+
 ## APIs
 
 | 参数 | 说明 | 类型 | 默认值 |

src/ProChat/index.tsx

@@ -1,5 +1,6 @@
 export * from '../types/message';
 
+export { type Locale } from '../locale';
 export { ProChat } from './container';
 export { ProChatProvider } from './container/Provider';
 export { useProChat, type ProChatInstance } from './hooks/useProChat';

src/ProChat/store/selectors/chat.ts

@@ -75,9 +75,7 @@ export const currentChats = (s: ChatStore): ChatMessage[] => {
 export const currentChatsWithGuideMessage = (s: ChatStore): ChatMessage[] => {
   const data = currentChats(s);
   // TODO: need topic inject
-
   const isBrandNewChat = data.length === 0;
-
   if (!isBrandNewChat) return data;
 
   const emptyInboxGuideMessage = {

src/locale/index.ts

@@ -6,6 +6,7 @@ export type Locale = 'zh-CN' | 'en-US';
 const locales = {
   'en-US': enUSLocal,
   'zh-CN': zhCNLocal,
+  en: enUSLocal,
 };
 
 export const gLocaleObject = (glocale: Locale): LocaleProps => {