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 502d3326..71fe92a7 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 96b6cdf1..28803ce5 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 115174f8..288eaef8 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 1a0e52a6..cc268303 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 4c0d986c..110402a9 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 d406ff95..5116c193 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,