From 3c0edb67c713eaf980a248b48fa042b393ed22a5 Mon Sep 17 00:00:00 2001 From: williamhliu <137068196+williamhliu@users.noreply.github.com> Date: Sun, 10 Sep 2023 11:50:26 +0800 Subject: [PATCH] [feature](webapp) add mobile agents drawer (#64) --- webapp/packages/chat-sdk/package.json | 2 +- .../src/components/ChatItem/style.less | 4 ++ .../packages/supersonic-fe/config/routes.ts | 3 +- webapp/packages/supersonic-fe/package.json | 4 +- .../src/pages/Chat/AgentList/index.tsx | 18 +----- .../src/pages/Chat/AgentList/style.less | 6 +- .../src/pages/Chat/ChatFooter/index.tsx | 8 +++ .../src/pages/Chat/MobileAgents/index.tsx | 62 +++++++++++++++++++ .../src/pages/Chat/MobileAgents/style.less | 55 ++++++++++++++++ .../supersonic-fe/src/pages/Chat/constants.ts | 14 +++++ .../supersonic-fe/src/pages/Chat/index.tsx | 14 +++++ .../src/pages/ChatPlugin/DetailModal.tsx | 6 +- webapp/packages/supersonic-fe/tsconfig.json | 1 + 13 files changed, 171 insertions(+), 26 deletions(-) create mode 100644 webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/index.tsx create mode 100644 webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/style.less diff --git a/webapp/packages/chat-sdk/package.json b/webapp/packages/chat-sdk/package.json index c1e217529..f5769269f 100644 --- a/webapp/packages/chat-sdk/package.json +++ b/webapp/packages/chat-sdk/package.json @@ -192,6 +192,6 @@ ] }, "engines": { - "node": ">=14.18.0" + "node": ">=16" } } \ No newline at end of file diff --git a/webapp/packages/chat-sdk/src/components/ChatItem/style.less b/webapp/packages/chat-sdk/src/components/ChatItem/style.less index 5879adf79..9051b7805 100644 --- a/webapp/packages/chat-sdk/src/components/ChatItem/style.less +++ b/webapp/packages/chat-sdk/src/components/ChatItem/style.less @@ -248,6 +248,8 @@ &-entity-info { display: flex; align-items: center; + flex-wrap: wrap; + row-gap: 6px; column-gap: 12px; margin-top: 4px; color: var(--text-color-third); @@ -257,6 +259,8 @@ &-dimension-item { display: flex; align-items: center; + flex-wrap: wrap; + row-gap: 6px; } &-dimension-name { diff --git a/webapp/packages/supersonic-fe/config/routes.ts b/webapp/packages/supersonic-fe/config/routes.ts index c9bb6a33e..0f2655218 100644 --- a/webapp/packages/supersonic-fe/config/routes.ts +++ b/webapp/packages/supersonic-fe/config/routes.ts @@ -34,7 +34,7 @@ const ROUTES = [ component: './Agent', envEnableList: [ENV_KEY.CHAT], }, - { + { path: '/model', name: 'semanticModel', envEnableList: [ENV_KEY.SEMANTIC], @@ -53,7 +53,6 @@ const ROUTES = [ }, ], }, - { path: '/database', name: 'database', diff --git a/webapp/packages/supersonic-fe/package.json b/webapp/packages/supersonic-fe/package.json index 97d461239..f63f686bb 100644 --- a/webapp/packages/supersonic-fe/package.json +++ b/webapp/packages/supersonic-fe/package.json @@ -98,7 +98,7 @@ "react-split-pane": "^2.0.3", "react-syntax-highlighter": "^15.4.3", "sql-formatter": "^2.3.3", - "supersonic-chat-sdk": "^0.5.29", + "supersonic-chat-sdk": "0.0.0", "umi": "3.5", "umi-request": "^1.0.8" }, @@ -147,4 +147,4 @@ "@types/react": "17.0.0" }, "__npminstall_done": false -} \ No newline at end of file +} diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/AgentList/index.tsx b/webapp/packages/supersonic-fe/src/pages/Chat/AgentList/index.tsx index 263d9361a..8aca8a3f8 100644 --- a/webapp/packages/supersonic-fe/src/pages/Chat/AgentList/index.tsx +++ b/webapp/packages/supersonic-fe/src/pages/Chat/AgentList/index.tsx @@ -4,20 +4,7 @@ import styles from './style.less'; import classNames from 'classnames'; import { message } from 'antd'; import IconFont from '@/components/IconFont'; - -const agents = [ - 'icon-fukuanbaobiaochaxun', - 'icon-hangweifenxi1', - 'icon-xiaofeifenxi', - 'icon-renwuchaxun', - 'icon-liushuichaxun', - 'icon-baobiao', - 'icon-cangkuchaxun', - 'icon-xiaoshoushuju', - 'icon-tongji', - 'icon-shujutongji', - 'icon-mendiankanban', -]; +import { AGENT_ICONS } from '../constants'; type Props = { agentList: AgentType[]; @@ -49,8 +36,7 @@ const AgentList: React.FC = ({ agentList, currentAgent, onSelectAgent }) onSelectAgent(agent); }} > - {/* avatar */} - +
{agent.name}
{agent.description}
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/AgentList/style.less b/webapp/packages/supersonic-fe/src/pages/Chat/AgentList/style.less index 35cbe0e79..e679e8470 100644 --- a/webapp/packages/supersonic-fe/src/pages/Chat/AgentList/style.less +++ b/webapp/packages/supersonic-fe/src/pages/Chat/AgentList/style.less @@ -66,10 +66,12 @@ } } - &:hover, &.active { + &:hover, + &.active { background: #22a5f7; - .agentName, .agentDesc { + .agentName, + .agentDesc { color: #fff; } } diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx b/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx index 54336a2ac..8b4041e1f 100644 --- a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx +++ b/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx @@ -16,6 +16,7 @@ type Props = { currentAgent?: AgentType; agentList: AgentType[]; onToggleHistoryVisible: () => void; + onOpenMobileAgents: () => void; onInputMsgChange: (value: string) => void; onSendMsg: (msg: string, modelId?: number) => void; onAddConversation: (agent?: AgentType) => void; @@ -41,6 +42,7 @@ const ChatFooter: ForwardRefRenderFunction = ( currentAgent, agentList, onToggleHistoryVisible, + onOpenMobileAgents, onInputMsgChange, onSendMsg, onAddConversation, @@ -310,6 +312,12 @@ const ChatFooter: ForwardRefRenderFunction = (
历史对话
)} + {isMobile && ( +
+ +
智能助理
+
+ )}
diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/index.tsx b/webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/index.tsx new file mode 100644 index 000000000..bf21c3737 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/index.tsx @@ -0,0 +1,62 @@ +import IconFont from '@/components/IconFont'; +import { Drawer } from 'antd'; +import classNames from 'classnames'; +import { AGENT_ICONS } from '../constants'; +import { AgentType } from '../type'; +import styles from './style.less'; + +type Props = { + open: boolean; + agentList: AgentType[]; + currentAgent?: AgentType; + onSelectAgent: (agent: AgentType) => void; + onClose: () => void; +}; + +const MobileAgents: React.FC = ({ + open, + agentList, + currentAgent, + onSelectAgent, + onClose, +}) => { + return ( + +
+ {agentList.map((agent, index) => { + const agentItemClass = classNames(styles.agentItem, { + [styles.active]: currentAgent?.id === agent.id, + }); + return ( +
{ + onSelectAgent(agent); + onClose(); + }} + > +
+ +
{agent.name}
+
+
{agent.description}
+
+ ); + })} +
+ + ); +}; + +export default MobileAgents; diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/style.less b/webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/style.less new file mode 100644 index 000000000..122b17564 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/pages/Chat/MobileAgents/style.less @@ -0,0 +1,55 @@ +.mobileAgents { + :global { + .ant-drawer-content { + border-top-left-radius: 12px; + border-top-right-radius: 12px; + + .ant-drawer-header { + padding: 16px 12px; + } + + .ant-drawer-body { + padding: 12px; + } + } + } + + .agentListContent { + display: flex; + flex-direction: column; + row-gap: 12px; + + .agentItem { + padding: 12px 16px; + background-color: #f5f7f9; + border: 1px solid transparent; + border-radius: 10px; + + &.active { + border: 1px solid var(--chat-blue); + } + + .agentTitleBar { + display: flex; + align-items: center; + column-gap: 6px; + + .avatar { + font-size: 24px; + } + + .agentName { + color: var(--text-color); + font-weight: 500; + } + } + + .agentDesc { + margin-top: 8px; + color: var(--text-color-third); + font-size: 13px; + line-height: 24px; + } + } + } +} diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/constants.ts b/webapp/packages/supersonic-fe/src/pages/Chat/constants.ts index 8387f4faa..e3f71a70f 100644 --- a/webapp/packages/supersonic-fe/src/pages/Chat/constants.ts +++ b/webapp/packages/supersonic-fe/src/pages/Chat/constants.ts @@ -27,6 +27,20 @@ export const SEMANTIC_TYPE_MAP = { [SemanticTypeEnum.VALUE]: '维度值', }; +export const AGENT_ICONS = [ + 'icon-fukuanbaobiaochaxun', + 'icon-hangweifenxi1', + 'icon-xiaofeifenxi', + 'icon-renwuchaxun', + 'icon-baobiao', + 'icon-liushuichaxun', + 'icon-cangkuchaxun', + 'icon-xiaoshoushuju', + 'icon-tongji', + 'icon-shujutongji', + 'icon-mendiankanban', +]; + export const CHAT_TITLE = ''; export const DEFAULT_CONVERSATION_NAME = '新问答对话'; diff --git a/webapp/packages/supersonic-fe/src/pages/Chat/index.tsx b/webapp/packages/supersonic-fe/src/pages/Chat/index.tsx index 53d42f12e..9343bc648 100644 --- a/webapp/packages/supersonic-fe/src/pages/Chat/index.tsx +++ b/webapp/packages/supersonic-fe/src/pages/Chat/index.tsx @@ -23,6 +23,7 @@ import 'supersonic-chat-sdk/dist/index.css'; import { setToken as setChatSdkToken } from 'supersonic-chat-sdk'; import AgentList from './AgentList'; import { AUTH_TOKEN_KEY } from '@/common/constants'; +import MobileAgents from './MobileAgents'; type Props = { isCopilotMode?: boolean; @@ -58,6 +59,7 @@ const Chat: React.FC = ({ const [defaultEntity, setDefaultEntity] = useState(); const [agentList, setAgentList] = useState([]); const [currentAgent, setCurrentAgent] = useState(); + const [mobileAgentsVisible, setMobileAgentsVisible] = useState(false); const dispatch = useDispatch(); const conversationRef = useRef(); @@ -403,6 +405,9 @@ const Chat: React.FC = ({ onSendMsg={sendMsg} onAddConversation={onAddConversation} onSelectAgent={onSelectAgent} + onOpenMobileAgents={() => { + setMobileAgentsVisible(true); + }} ref={chatFooterRef} />
@@ -423,6 +428,15 @@ const Chat: React.FC = ({ ref={conversationRef} />
+ { + setMobileAgentsVisible(false); + }} + /> ); }; diff --git a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/DetailModal.tsx b/webapp/packages/supersonic-fe/src/pages/ChatPlugin/DetailModal.tsx index 8cc4da74b..33e9296eb 100644 --- a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/DetailModal.tsx +++ b/webapp/packages/supersonic-fe/src/pages/ChatPlugin/DetailModal.tsx @@ -243,7 +243,7 @@ const DetailModal: React.FC = ({ detail, onSubmit, onCancel }) => {