From b5fa54a754c733ea23842cb48888eb9a4c42b732 Mon Sep 17 00:00:00 2001
From: williamhliu <137068196+williamhliu@users.noreply.github.com>
Date: Tue, 30 Jul 2024 19:32:30 +0800
Subject: [PATCH] (improvement)(chat-sdk) set ant locale to zh-cn and optimize
 range picker style (#1489)

---
 webapp/packages/chat-sdk/src/Chat/index.tsx   | 261 +++++++++---------
 .../src/components/ChatItem/ParseTip.tsx      |  20 +-
 2 files changed, 143 insertions(+), 138 deletions(-)

diff --git a/webapp/packages/chat-sdk/src/Chat/index.tsx b/webapp/packages/chat-sdk/src/Chat/index.tsx
index 7bd7cad0f..64dc71da2 100644
--- a/webapp/packages/chat-sdk/src/Chat/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/index.tsx
@@ -22,7 +22,12 @@ import { HistoryMsgItemType, MsgDataType, SendMsgParamsType } from '../common/ty
 import { getHistoryMsg } from '../service';
 import ShowCase from '../ShowCase';
 import { jsonParse } from '../utils/utils';
-import { Drawer, Modal, Row, Col, Space, Switch, Tooltip } from 'antd';
+import { ConfigProvider, Drawer, Modal, Row, Col, Space, Switch, Tooltip } from 'antd';
+import locale from 'antd/locale/zh_CN';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+
+dayjs.locale('zh-cn');
 
 type Props = {
   token?: string;
@@ -377,140 +382,142 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
   });
 
   return (
-    <div className={chatClass}>
-      <div className={styles.chatSection}>
-        {!isMobile && agentList.length > 1 && agentListVisible && (
-          <AgentList
-            agentList={agentList}
+    <ConfigProvider locale={locale}>
+      <div className={chatClass}>
+        <div className={styles.chatSection}>
+          {!isMobile && agentList.length > 1 && agentListVisible && (
+            <AgentList
+              agentList={agentList}
+              currentAgent={currentAgent}
+              onSelectAgent={onSelectAgent}
+            />
+          )}
+          <div className={styles.chatApp}>
+            {currentConversation && (
+              <div className={styles.chatBody}>
+                <div className={styles.chatContent}>
+                  {currentAgent && !isMobile && !noInput && (
+                    <div className={styles.chatHeader}>
+                      <Row style={{ width: '100%' }}>
+                        <Col flex="1 1 200px">
+                          <Space>
+                            <div className={styles.chatHeaderTitle}>{currentAgent.name}</div>
+                            <div className={styles.chatHeaderTip}>{currentAgent.description}</div>
+                            <Tooltip title="精简模式下，问答结果将以文本形式输出">
+                              <Switch
+                                style={{ position: 'relative', top: -1 }}
+                                size="small"
+                                value={isSimpleMode}
+                                checkedChildren="精简模式"
+                                unCheckedChildren="精简模式"
+                                onChange={checked => {
+                                  setIsSimpleMode(checked);
+                                }}
+                              />
+                            </Tooltip>
+                          </Space>
+                        </Col>
+                        <Col flex="0 1 118px"></Col>
+                      </Row>
+                    </div>
+                  )}
+                  <MessageContainer
+                    id="messageContainer"
+                    isSimpleMode={isSimpleMode}
+                    isDebugMode={isDebugMode}
+                    messageList={messageList}
+                    chatId={currentConversation?.chatId}
+                    historyVisible={historyVisible}
+                    currentAgent={currentAgent}
+                    chatVisible={chatVisible}
+                    isDeveloper={isDeveloper}
+                    integrateSystem={integrateSystem}
+                    onMsgDataLoaded={onMsgDataLoaded}
+                    onSendMsg={onSendMsg}
+                  />
+                  {!noInput && (
+                    <ChatFooter
+                      inputMsg={inputMsg}
+                      chatId={currentConversation?.chatId}
+                      agentList={agentList}
+                      currentAgent={currentAgent}
+                      onToggleHistoryVisible={onToggleHistoryVisible}
+                      onInputMsgChange={onInputMsgChange}
+                      onSendMsg={sendMsg}
+                      onAddConversation={onAddConversation}
+                      onSelectAgent={onSelectAgent}
+                      onOpenAgents={() => {
+                        if (isMobile) {
+                          setMobileAgentsVisible(true);
+                        } else {
+                          setAgentListVisible(!agentListVisible);
+                        }
+                      }}
+                      onOpenShowcase={() => {
+                        setShowCaseVisible(!showCaseVisible);
+                      }}
+                      ref={chatFooterRef}
+                    />
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+          <Conversation
             currentAgent={currentAgent}
-            onSelectAgent={onSelectAgent}
+            currentConversation={currentConversation}
+            historyVisible={historyVisible}
+            onSelectConversation={onSelectConversation}
+            onCloseConversation={onCloseConversation}
+            ref={conversationRef}
           />
-        )}
-        <div className={styles.chatApp}>
-          {currentConversation && (
-            <div className={styles.chatBody}>
-              <div className={styles.chatContent}>
-                {currentAgent && !isMobile && !noInput && (
-                  <div className={styles.chatHeader}>
-                    <Row style={{ width: '100%' }}>
-                      <Col flex="1 1 200px">
-                        <Space>
-                          <div className={styles.chatHeaderTitle}>{currentAgent.name}</div>
-                          <div className={styles.chatHeaderTip}>{currentAgent.description}</div>
-                          <Tooltip title="精简模式下，问答结果将以文本形式输出">
-                            <Switch
-                              style={{ position: 'relative', top: -1 }}
-                              size="small"
-                              value={isSimpleMode}
-                              checkedChildren="精简模式"
-                              unCheckedChildren="精简模式"
-                              onChange={checked => {
-                                setIsSimpleMode(checked);
-                              }}
-                            />
-                          </Tooltip>
-                        </Space>
-                      </Col>
-                      <Col flex="0 1 118px"></Col>
-                    </Row>
-                  </div>
-                )}
-                <MessageContainer
-                  id="messageContainer"
-                  isSimpleMode={isSimpleMode}
-                  isDebugMode={isDebugMode}
-                  messageList={messageList}
-                  chatId={currentConversation?.chatId}
-                  historyVisible={historyVisible}
-                  currentAgent={currentAgent}
-                  chatVisible={chatVisible}
-                  isDeveloper={isDeveloper}
-                  integrateSystem={integrateSystem}
-                  onMsgDataLoaded={onMsgDataLoaded}
+          {currentAgent &&
+            (isMobile ? (
+              <Drawer
+                title="showcase"
+                placement="bottom"
+                height="95%"
+                open={showCaseVisible}
+                className={styles.showCaseDrawer}
+                destroyOnClose
+                onClose={() => {
+                  setShowCaseVisible(false);
+                }}
+              >
+                <ShowCase agentId={currentAgent.id} onSendMsg={onSendMsg} />
+              </Drawer>
+            ) : (
+              <Modal
+                title="showcase"
+                width="98%"
+                open={showCaseVisible}
+                centered
+                footer={null}
+                wrapClassName={styles.showCaseModal}
+                destroyOnClose
+                onCancel={() => {
+                  setShowCaseVisible(false);
+                }}
+              >
+                <ShowCase
+                  height="calc(100vh - 140px)"
+                  agentId={currentAgent.id}
                   onSendMsg={onSendMsg}
                 />
-                {!noInput && (
-                  <ChatFooter
-                    inputMsg={inputMsg}
-                    chatId={currentConversation?.chatId}
-                    agentList={agentList}
-                    currentAgent={currentAgent}
-                    onToggleHistoryVisible={onToggleHistoryVisible}
-                    onInputMsgChange={onInputMsgChange}
-                    onSendMsg={sendMsg}
-                    onAddConversation={onAddConversation}
-                    onSelectAgent={onSelectAgent}
-                    onOpenAgents={() => {
-                      if (isMobile) {
-                        setMobileAgentsVisible(true);
-                      } else {
-                        setAgentListVisible(!agentListVisible);
-                      }
-                    }}
-                    onOpenShowcase={() => {
-                      setShowCaseVisible(!showCaseVisible);
-                    }}
-                    ref={chatFooterRef}
-                  />
-                )}
-              </div>
-            </div>
-          )}
+              </Modal>
+            ))}
         </div>
-        <Conversation
+        <MobileAgents
+          open={mobileAgentsVisible}
+          agentList={agentList}
           currentAgent={currentAgent}
-          currentConversation={currentConversation}
-          historyVisible={historyVisible}
-          onSelectConversation={onSelectConversation}
-          onCloseConversation={onCloseConversation}
-          ref={conversationRef}
+          onSelectAgent={onSelectAgent}
+          onClose={() => {
+            setMobileAgentsVisible(false);
+          }}
         />
-        {currentAgent &&
-          (isMobile ? (
-            <Drawer
-              title="showcase"
-              placement="bottom"
-              height="95%"
-              open={showCaseVisible}
-              className={styles.showCaseDrawer}
-              destroyOnClose
-              onClose={() => {
-                setShowCaseVisible(false);
-              }}
-            >
-              <ShowCase agentId={currentAgent.id} onSendMsg={onSendMsg} />
-            </Drawer>
-          ) : (
-            <Modal
-              title="showcase"
-              width="98%"
-              open={showCaseVisible}
-              centered
-              footer={null}
-              wrapClassName={styles.showCaseModal}
-              destroyOnClose
-              onCancel={() => {
-                setShowCaseVisible(false);
-              }}
-            >
-              <ShowCase
-                height="calc(100vh - 140px)"
-                agentId={currentAgent.id}
-                onSendMsg={onSendMsg}
-              />
-            </Modal>
-          ))}
       </div>
-      <MobileAgents
-        open={mobileAgentsVisible}
-        agentList={agentList}
-        currentAgent={currentAgent}
-        onSelectAgent={onSelectAgent}
-        onClose={() => {
-          setMobileAgentsVisible(false);
-        }}
-      />
-    </div>
+    </ConfigProvider>
   );
 };
 
diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
index 8ce72dfb8..1264268e5 100644
--- a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
@@ -9,8 +9,13 @@ import MarkDown from '../ChatMsg/MarkDown';
 import classNames from 'classnames';
 import { isMobile } from '../../utils/utils';
 import dayjs, { Dayjs } from 'dayjs';
+import locale from 'antd/locale/zh_CN';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+
+import 'dayjs/locale/zh-cn';
+
 dayjs.extend(quarterOfYear);
+dayjs.locale('zh-cn');
 
 const { RangePicker } = DatePicker;
 
@@ -257,24 +262,17 @@ const ParseTip: React.FC<Props> = ({
             <RangePicker
               value={[dayjs(startDate), dayjs(endDate)]}
               onChange={onDateInfoChange}
-              format="YYYY/MM/DD"
+              format="YYYY-MM-DD"
               renderExtraFooter={() => (
                 <Row gutter={[28, 28]}>
                   {Object.keys(ranges).map(key => (
                     <Col key={key}>
-                      <label
-                        style={{
-                          backgroundColor: '#F0FDFF',
-                          borderColor: '#33BDFC',
-                          color: '#33BDFC',
-                          borderWidth: 1,
-                          borderStyle: 'solid',
-                          cursor: 'pointer',
-                        }}
+                      <Button
+                        size="small"
                         onClick={() => handlePresetClick(ranges[key as RangeKeys])}
                       >
                         {key}
-                      </label>
+                      </Button>
                     </Col>
                   ))}
                 </Row>