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>

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;

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 = ({
           )}
           <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>

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

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;

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 = ({
           )}
           <Flex vertical gap={8} flex={1}>
             <b>{isAssistant ? '' : 'You'}</b>
-            <div className={styles.messageText}>
+            <div className={isAssistant ? styles.messageText : styles.messageUserText}>
               <MarkdownContent
                 reference={reference}
                 clickDocumentButton={() => {}}
@@ -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')}
             </Button>

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,