From 80163c043e03f8c52c9620cbce39fb7e2d69727c Mon Sep 17 00:00:00 2001 From: yungongzi Date: Mon, 24 Jun 2024 16:41:45 +0800 Subject: [PATCH] Optimized the chat interface (including the chat API after sharing) (#1215) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### What problem does this PR solve? Optimized the chat interface (including the chat API after sharing) 1. Change the background color of the dialog box between the assistant and the user (use the theme color of the interface) 2. Add rounded corners to the dialog box 3. When the input box is empty, you can't click the send button(because some models will report an error when sending empty data) Color reference(can be a bit subjective)： ![image](https://github.com/infiniflow/ragflow/assets/19431702/8cd6fcd9-8ca1-4160-8bac-9e8ba1a4112e) ### Type of change - [x] Refactor Co-authored-by: 海贼宅 --- web/src/pages/chat/chat-container/index.less | 12 +++++++++++- web/src/pages/chat/chat-container/index.tsx | 7 ++++--- web/src/pages/chat/hooks.ts | 6 ++++++ web/src/pages/chat/share/index.less | 12 +++++++++++- web/src/pages/chat/share/large.tsx | 6 ++++-- web/src/pages/chat/shared-hooks.ts | 4 ++++ 6 files changed, 40 insertions(+), 7 deletions(-) diff --git a/web/src/pages/chat/chat-container/index.less b/web/src/pages/chat/chat-container/index.less index 502d33268..71fe92a70 100644 --- a/web/src/pages/chat/chat-container/index.less +++ b/web/src/pages/chat/chat-container/index.less @@ -27,8 +27,18 @@ .messageText { .chunkText(); padding: 0 14px; - background-color: rgba(249, 250, 251, 1); + background-color: rgb(230, 230, 232); word-break: break-all; + border-radius: 10px; + } + .messageUserText { + .chunkText(); + padding: 0 14px; + background-color: rgb(45, 100, 245); + word-break: break-all; + border-radius: 10px; + color: #fdfdfd; + text-align: justify; } .messageEmpty { width: 300px; diff --git a/web/src/pages/chat/chat-container/index.tsx b/web/src/pages/chat/chat-container/index.tsx index 96b6cdf17..28803ce54 100644 --- a/web/src/pages/chat/chat-container/index.tsx +++ b/web/src/pages/chat/chat-container/index.tsx @@ -14,7 +14,7 @@ import { useFetchConversationOnMount, useGetFileIcon, useGetSendButtonDisabled, - useSelectConversationLoading, + useSelectConversationLoading, useSendButtonDisabled, useSendMessage, } from '../hooks'; import MarkdownContent from '../markdown-content'; @@ -87,7 +87,7 @@ const MessageItem = ({ )} {isAssistant ? '' : userInfo.nickname} -
+
{ const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } = useClickDrawer(); const disabled = useGetSendButtonDisabled(); + const sendDisabled = useSendButtonDisabled(value); useGetFileIcon(); const loading = useSelectConversationLoading(); const { t } = useTranslate('chat'); @@ -196,7 +197,7 @@ const ChatContainer = () => { type="primary" onClick={handlePressEnter} loading={sendLoading} - disabled={disabled} + disabled={sendDisabled} > {t('send')} diff --git a/web/src/pages/chat/hooks.ts b/web/src/pages/chat/hooks.ts index 115174f84..288eaef88 100644 --- a/web/src/pages/chat/hooks.ts +++ b/web/src/pages/chat/hooks.ts @@ -54,6 +54,7 @@ import { } from './interface'; import { ChatModelState } from './model'; import { isConversationIdExist } from './utils'; +import {public_path} from "@/utils/api"; export const useSelectCurrentDialog = () => { const currentDialog: IDialog = useSelector( @@ -630,6 +631,7 @@ export const useSendMessage = ( handlePressEnter, handleInputChange, value, + setValue, loading: !done, }; }; @@ -762,6 +764,10 @@ export const useGetSendButtonDisabled = () => { return dialogId === '' && conversationId === ''; }; + +export const useSendButtonDisabled = (value: string) => { + return value === ''; +}; //#endregion //#region API provided for external calls diff --git a/web/src/pages/chat/share/index.less b/web/src/pages/chat/share/index.less index 1a0e52a6f..cc2683033 100644 --- a/web/src/pages/chat/share/index.less +++ b/web/src/pages/chat/share/index.less @@ -33,8 +33,18 @@ .messageText { .chunkText(); padding: 0 14px; - background-color: rgba(249, 250, 251, 1); + background-color: rgb(230, 230, 232); word-break: break-all; + border-radius: 10px; + } + .messageUserText { + .chunkText(); + padding: 0 14px; + background-color: rgb(45, 100, 245); + word-break: break-all; + border-radius: 10px; + color: #fdfdfd; + text-align: justify; } .messageEmpty { width: 300px; diff --git a/web/src/pages/chat/share/large.tsx b/web/src/pages/chat/share/large.tsx index 4c0d986c9..110402a9b 100644 --- a/web/src/pages/chat/share/large.tsx +++ b/web/src/pages/chat/share/large.tsx @@ -19,6 +19,7 @@ import { } from '../shared-hooks'; import { buildMessageItemReference } from '../utils'; import styles from './index.less'; +import {useSendButtonDisabled} from "@/pages/chat/hooks"; const MessageItem = ({ item, @@ -76,7 +77,7 @@ const MessageItem = ({ )} {isAssistant ? '' : 'You'} -
+
{}} @@ -149,6 +150,7 @@ const ChatContainer = () => { setCurrentConversation, addNewestAnswer, ); + const sendDisabled = useSendButtonDisabled(value); return ( <> @@ -184,7 +186,7 @@ const ChatContainer = () => { type="primary" onClick={handlePressEnter} loading={sendLoading} - // disabled={disabled} + disabled={sendDisabled} > {t('send')} diff --git a/web/src/pages/chat/shared-hooks.ts b/web/src/pages/chat/shared-hooks.ts index d406ff95d..5116c1938 100644 --- a/web/src/pages/chat/shared-hooks.ts +++ b/web/src/pages/chat/shared-hooks.ts @@ -133,6 +133,10 @@ export const useSelectCurrentSharedConversation = (conversationId: string) => { }; }; +export const useSendButtonDisabled = (value: string) => { + return value === ''; +}; + export const useSendSharedMessage = ( conversation: IClientConversation, addNewestConversation: (message: string) => void,