Optimized the chat interface (including the chat API after sharing) (#1215)

### 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: 海贼宅 <stu_xyx@163.com>
This commit is contained in:
yungongzi
2024-06-24 16:41:45 +08:00
committed by GitHub
parent 9fcf9a10c6
commit 80163c043e
6 changed files with 40 additions and 7 deletions

View File

@ -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 = ({
)}
<Flex vertical gap={8} flex={1}>
<b>{isAssistant ? '' : userInfo.nickname}</b>
<div className={styles.messageText}>
<div className={isAssistant ? styles.messageText : styles.messageUserText}>
<MarkdownContent
content={content}
reference={reference}
@ -157,6 +157,7 @@ const ChatContainer = () => {
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')}
</Button>