topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-13 13:07:32 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

(improvement)(chat-sdk) set ant locale to zh-cn and optimize range picker style (#1489)

Browse Source
This commit is contained in:
williamhliu
2024-07-30 19:32:30 +08:00
committed by GitHub
parent 52a584b9a4
commit b5fa54a754
2 changed files with 143 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
webapp/packages/chat-sdk/src/Chat/index.tsx
View File

@@ -22,7 +22,12 @@ import { HistoryMsgItemType, MsgDataType, SendMsgParamsType } from '../common/ty
import { getHistoryMsg } from '../service'; import { getHistoryMsg } from '../service';
import ShowCase from '../ShowCase'; import ShowCase from '../ShowCase';
import { jsonParse } from '../utils/utils'; 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 = { type Props = {
token?: string; token?: string;
@@ -377,140 +382,142 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
}); });
return ( return (
<div className={chatClass}> <ConfigProvider locale={locale}>
<div className={styles.chatSection}> <div className={chatClass}>
{!isMobile && agentList.length > 1 && agentListVisible && ( <div className={styles.chatSection}>
<AgentList {!isMobile && agentList.length > 1 && agentListVisible && (
agentList={agentList} <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} currentAgent={currentAgent}
onSelectAgent={onSelectAgent} currentConversation={currentConversation}
historyVisible={historyVisible}
onSelectConversation={onSelectConversation}
onCloseConversation={onCloseConversation}
ref={conversationRef}
/> />
)} {currentAgent &&
<div className={styles.chatApp}> (isMobile ? (
{currentConversation && ( <Drawer
<div className={styles.chatBody}> title="showcase"
<div className={styles.chatContent}> placement="bottom"
{currentAgent && !isMobile && !noInput && ( height="95%"
<div className={styles.chatHeader}> open={showCaseVisible}
<Row style={{ width: '100%' }}> className={styles.showCaseDrawer}
<Col flex="1 1 200px"> destroyOnClose
<Space> onClose={() => {
<div className={styles.chatHeaderTitle}>{currentAgent.name}</div> setShowCaseVisible(false);
<div className={styles.chatHeaderTip}>{currentAgent.description}</div> }}
<Tooltip title="精简模式下，问答结果将以文本形式输出"> >
<Switch <ShowCase agentId={currentAgent.id} onSendMsg={onSendMsg} />
style={{ position: 'relative', top: -1 }} </Drawer>
size="small" ) : (
value={isSimpleMode} <Modal
checkedChildren="精简模式" title="showcase"
unCheckedChildren="精简模式" width="98%"
onChange={checked => { open={showCaseVisible}
setIsSimpleMode(checked); centered
}} footer={null}
/> wrapClassName={styles.showCaseModal}
</Tooltip> destroyOnClose
</Space> onCancel={() => {
</Col> setShowCaseVisible(false);
<Col flex="0 1 118px"></Col> }}
</Row> >
</div> <ShowCase
)} height="calc(100vh - 140px)"
<MessageContainer agentId={currentAgent.id}
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} onSendMsg={onSendMsg}
/> />
{!noInput && ( </Modal>
<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> </div>
<Conversation <MobileAgents
open={mobileAgentsVisible}
agentList={agentList}
currentAgent={currentAgent} currentAgent={currentAgent}
currentConversation={currentConversation} onSelectAgent={onSelectAgent}
historyVisible={historyVisible} onClose={() => {
onSelectConversation={onSelectConversation} setMobileAgentsVisible(false);
onCloseConversation={onCloseConversation} }}
ref={conversationRef}
/> />
{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> </div>
<MobileAgents </ConfigProvider>
open={mobileAgentsVisible}
agentList={agentList}
currentAgent={currentAgent}
onSelectAgent={onSelectAgent}
onClose={() => {
setMobileAgentsVisible(false);
}}
/>
</div>
); );
}; };

20
webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
View File

@@ -9,8 +9,13 @@ import MarkDown from '../ChatMsg/MarkDown';
import classNames from 'classnames'; import classNames from 'classnames';
import { isMobile } from '../../utils/utils'; import { isMobile } from '../../utils/utils';
import dayjs, { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
import locale from 'antd/locale/zh_CN';
import quarterOfYear from 'dayjs/plugin/quarterOfYear'; import quarterOfYear from 'dayjs/plugin/quarterOfYear';
import 'dayjs/locale/zh-cn';
dayjs.extend(quarterOfYear); dayjs.extend(quarterOfYear);
dayjs.locale('zh-cn');
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
@@ -257,24 +262,17 @@ const ParseTip: React.FC<Props> = ({
<RangePicker <RangePicker
value={[dayjs(startDate), dayjs(endDate)]} value={[dayjs(startDate), dayjs(endDate)]}
onChange={onDateInfoChange} onChange={onDateInfoChange}
format="YYYY/MM/DD" format="YYYY-MM-DD"
renderExtraFooter={() => ( renderExtraFooter={() => (
<Row gutter={[28, 28]}> <Row gutter={[28, 28]}>
{Object.keys(ranges).map(key => ( {Object.keys(ranges).map(key => (
<Col key={key}> <Col key={key}>
<label <Button
style={{ size="small"
backgroundColor: '#F0FDFF',
borderColor: '#33BDFC',
color: '#33BDFC',
borderWidth: 1,
borderStyle: 'solid',
cursor: 'pointer',
}}
onClick={() => handlePresetClick(ranges[key as RangeKeys])} onClick={() => handlePresetClick(ranges[key as RangeKeys])}
> >
{key} {key}
</label> </Button>
</Col> </Col>
))} ))}
</Row> </Row>