From 2b728f442d10eead4985dd1870f8e733066facce Mon Sep 17 00:00:00 2001 From: billchen Date: Mon, 26 Feb 2024 15:03:53 +0800 Subject: [PATCH] feat: add avatar to MessageItem --- web/src/hooks/userSettingHook.ts | 22 +++++++++ web/src/interfaces/database/userSetting.ts | 21 ++++++++ web/src/layouts/components/header/index.tsx | 17 ++++--- web/src/layouts/components/user/index.tsx | 11 ++++- web/src/pages/chat/chat-container/index.less | 21 +++++++- web/src/pages/chat/chat-container/index.tsx | 50 +++++++++++++++++--- web/src/pages/chat/hooks.ts | 2 +- web/src/pages/setting/model.ts | 31 +++++++----- 8 files changed, 144 insertions(+), 31 deletions(-) create mode 100644 web/src/hooks/userSettingHook.ts create mode 100644 web/src/interfaces/database/userSetting.ts diff --git a/web/src/hooks/userSettingHook.ts b/web/src/hooks/userSettingHook.ts new file mode 100644 index 000000000..743c790bf --- /dev/null +++ b/web/src/hooks/userSettingHook.ts @@ -0,0 +1,22 @@ +import { IUserInfo } from '@/interfaces/database/userSetting'; +import { useCallback, useEffect } from 'react'; +import { useDispatch, useSelector } from 'umi'; + +export const useFetchUserInfo = () => { + const dispatch = useDispatch(); + const fetchUserInfo = useCallback(() => { + dispatch({ type: 'settingModel/getUserInfo' }); + }, [dispatch]); + + useEffect(() => { + fetchUserInfo(); + }, [fetchUserInfo]); +}; + +export const useSelectUserInfo = () => { + const userInfo: IUserInfo = useSelector( + (state: any) => state.settingModel.userInfo, + ); + + return userInfo; +}; diff --git a/web/src/interfaces/database/userSetting.ts b/web/src/interfaces/database/userSetting.ts new file mode 100644 index 000000000..76a61fee4 --- /dev/null +++ b/web/src/interfaces/database/userSetting.ts @@ -0,0 +1,21 @@ +export interface IUserInfo { + access_token: string; + avatar?: any; + color_schema: string; + create_date: string; + create_time: number; + email: string; + id: string; + is_active: string; + is_anonymous: string; + is_authenticated: string; + is_superuser: boolean; + language: string; + last_login_time: string; + login_channel: string; + nickname: string; + password: string; + status: string; + update_date: string; + update_time: number; +} diff --git a/web/src/layouts/components/header/index.tsx b/web/src/layouts/components/header/index.tsx index 9d69a4464..7705cae78 100644 --- a/web/src/layouts/components/header/index.tsx +++ b/web/src/layouts/components/header/index.tsx @@ -19,17 +19,20 @@ const RagHeader = () => { const navigate = useNavigate(); const { pathname } = useLocation(); - const tagsData = [ - { path: '/knowledge', name: 'Knowledge Base', icon: KnowledgeBaseIcon }, - { path: '/chat', name: 'Chat', icon: StarIon }, - { path: '/file', name: 'File Management', icon: FileIcon }, - ]; + const tagsData = useMemo( + () => [ + { path: '/knowledge', name: 'Knowledge Base', icon: KnowledgeBaseIcon }, + { path: '/chat', name: 'Chat', icon: StarIon }, + { path: '/file', name: 'File Management', icon: FileIcon }, + ], + [], + ); const currentPath = useMemo(() => { return ( tagsData.find((x) => pathname.startsWith(x.path))?.name || 'knowledge' ); - }, [pathname]); + }, [pathname, tagsData]); const handleChange = (path: string) => { navigate(path); @@ -48,7 +51,7 @@ const RagHeader = () => { > - + { const { t } = useTranslation(); + const userInfo = useSelectUserInfo(); const logout = () => { authorizationUtil.removeAll(); @@ -36,13 +38,18 @@ const App: React.FC = () => { ), }, ]; - }, []); + }, [t]); + + useFetchUserInfo(); return ( ); diff --git a/web/src/pages/chat/chat-container/index.less b/web/src/pages/chat/chat-container/index.less index 7b9a25493..29a935823 100644 --- a/web/src/pages/chat/chat-container/index.less +++ b/web/src/pages/chat/chat-container/index.less @@ -6,9 +6,26 @@ } .messageItem { - .messageItemContent { + padding: 24px 0; + .messageItemSection { display: inline-block; - width: 400px; + } + .messageItemSectionLeft { + width: 80%; + } + .messageItemSectionRight { + width: 20%; + } + .messageItemContent { + display: inline-flex; + gap: 20px; + } + .messageItemContentReverse { + flex-direction: row-reverse; + } + .messageText { + padding: 10px 14px; + background-color: rgba(249, 250, 251, 1); } } diff --git a/web/src/pages/chat/chat-container/index.tsx b/web/src/pages/chat/chat-container/index.tsx index 265509e61..83cbd17aa 100644 --- a/web/src/pages/chat/chat-container/index.tsx +++ b/web/src/pages/chat/chat-container/index.tsx @@ -1,15 +1,20 @@ -import { Button, Flex, Input } from 'antd'; +import { Avatar, Button, Flex, Input } from 'antd'; import { ChangeEventHandler, useState } from 'react'; import { Message } from '@/interfaces/database/chat'; import classNames from 'classnames'; import { useFetchConversation, useSendMessage } from '../hooks'; +import { ReactComponent as AssistantIcon } from '@/assets/svg/assistant.svg'; import { MessageType } from '@/constants/chat'; +import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks'; import { IClientConversation } from '../interface'; + +import { useSelectUserInfo } from '@/hooks/userSettingHook'; import styles from './index.less'; const MessageItem = ({ item }: { item: Message }) => { + const userInfo = useSelectUserInfo(); return (
{ [styles.messageItemRight]: item.role === MessageType.User, })} > - -
{item.content}
- +
+
+ {item.role === MessageType.User ? ( + userInfo.avatar ?? ( + + ) + ) : ( + + )} + + + {item.role === MessageType.Assistant ? 'Resume Assistant' : 'You'} + +
{item.content}
+ +
+
); }; @@ -28,9 +62,13 @@ const ChatContainer = () => { const [value, setValue] = useState(''); const conversation: IClientConversation = useFetchConversation(); const { sendMessage } = useSendMessage(); + const loading = useOneNamespaceEffectsLoading('chatModel', [ + 'completeConversation', + 'getConversation', + ]); const handlePressEnter = () => { - console.info(value); + setValue(''); sendMessage(value); }; @@ -52,7 +90,7 @@ const ChatContainer = () => { placeholder="Message Resume Assistant..." value={value} suffix={ - } diff --git a/web/src/pages/chat/hooks.ts b/web/src/pages/chat/hooks.ts index dafc8d760..57ed30d18 100644 --- a/web/src/pages/chat/hooks.ts +++ b/web/src/pages/chat/hooks.ts @@ -426,7 +426,7 @@ export const useSendMessage = () => { }; const handleSendMessage = async (message: string) => { - if (conversationId !== EmptyConversationId) { + if (conversationId !== '') { sendMessage(message); } else { const data = await setConversation(message); diff --git a/web/src/pages/setting/model.ts b/web/src/pages/setting/model.ts index 643ed5e71..ce46dc86b 100644 --- a/web/src/pages/setting/model.ts +++ b/web/src/pages/setting/model.ts @@ -1,7 +1,7 @@ import { ITenantInfo } from '@/interfaces/database/knowledge'; import { IThirdOAIModelCollection as IThirdAiModelCollection } from '@/interfaces/database/llm'; +import { IUserInfo } from '@/interfaces/database/userSetting'; import userService from '@/services/userService'; -import authorizationUtil from '@/utils/authorizationUtil'; import { message } from 'antd'; import { Nullable } from 'typings'; import { DvaModel } from 'umi'; @@ -16,6 +16,7 @@ export interface SettingModelState { llmInfo: IThirdAiModelCollection; myLlm: any[]; factoriesList: any[]; + userInfo: IUserInfo; } const model: DvaModel = { @@ -30,6 +31,7 @@ const model: DvaModel = { llmInfo: {}, myLlm: [], factoriesList: [], + userInfo: {} as IUserInfo, }, reducers: { updateState(state, { payload }) { @@ -38,10 +40,11 @@ const model: DvaModel = { ...payload, }; }, - }, - subscriptions: { - setup({ dispatch, history }) { - history.listen((location) => {}); + setUserInfo(state, { payload }) { + return { + ...state, + userInfo: payload, + }; }, }, effects: { @@ -63,15 +66,17 @@ const model: DvaModel = { } }, *getUserInfo({ payload = {} }, { call, put }) { - const { data, response } = yield call(userService.user_info, payload); - const { retcode, data: res, retmsg } = data; - const userInfo = { - avatar: res.avatar, - name: res.nickname, - email: res.email, - }; - authorizationUtil.setUserInfo(userInfo); + const { data } = yield call(userService.user_info, payload); + const { retcode, data: res } = data; + + // const userInfo = { + // avatar: res.avatar, + // name: res.nickname, + // email: res.email, + // }; + // authorizationUtil.setUserInfo(userInfo); if (retcode === 0) { + yield put({ type: 'setUserInfo', payload: res }); // localStorage.setItem('userInfo',res.) } },