feat: modify the background color of chat messages (#1262)

### What problem does this PR solve?

feat: modify the background color of chat messages #1215

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/chat/chat-container/index.less

@@ -24,20 +24,24 @@
   .messageItemContentReverse {
     flex-direction: row-reverse;
   }
+  .messageTextBase() {
+    padding: 6px 10px;
+    border-radius: 8px;
+    & > p {
+      margin: 0;
+    }
+  }
   .messageText {
     .chunkText();
-    padding: 0 14px;
-    background-color: rgb(230, 230, 232);
+    .messageTextBase();
+    background-color: #e6f4ff;
     word-break: break-all;
-    border-radius: 10px;
   }
   .messageUserText {
     .chunkText();
-    padding: 0 14px;
-    background-color: rgb(45, 100, 245);
+    .messageTextBase();
+    background-color: rgb(248, 247, 247);
     word-break: break-all;
-    border-radius: 10px;
-    color: #fdfdfd;
     text-align: justify;
   }
   .messageEmpty {

web/src/pages/chat/hooks.ts

@@ -36,6 +36,7 @@ import { getFileExtension } from '@/utils';
 import { message } from 'antd';
 import dayjs, { Dayjs } from 'dayjs';
 import omit from 'lodash/omit';
+import trim from 'lodash/trim';
 import {
   ChangeEventHandler,
   useCallback,
@@ -54,7 +55,6 @@ import {
 } from './interface';
 import { ChatModelState } from './model';
 import { isConversationIdExist } from './utils';
-import {public_path} from "@/utils/api";
 
 export const useSelectCurrentDialog = () => {
   const currentDialog: IDialog = useSelector(
@@ -533,7 +533,7 @@ export const useHandleMessageInputChange = () => {
   const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     const value = e.target.value;
     const nextValue = value.replaceAll('\\n', '\n').replaceAll('\\t', '\t');
-    setValue(nextValue);
+    setValue(trim(nextValue));
   };
 
   return {
@@ -620,6 +620,8 @@ export const useSendMessage = (
   }, [answer, addNewestAnswer]);
 
   const handlePressEnter = useCallback(() => {
+    if (trim(value) === '') return;
+
     if (done) {
       setValue('');
       handleSendMessage(value.trim());
@@ -766,7 +768,7 @@ export const useGetSendButtonDisabled = () => {
 };
 
 export const useSendButtonDisabled = (value: string) => {
-  return value === '';
+  return trim(value) === '';
 };
 //#endregion
 

web/src/pages/chat/share/index.less

@@ -30,20 +30,24 @@
   .messageItemContentReverse {
     flex-direction: row-reverse;
   }
+  .messageTextBase() {
+    padding: 6px 10px;
+    border-radius: 8px;
+    & > p {
+      margin: 0;
+    }
+  }
   .messageText {
     .chunkText();
-    padding: 0 14px;
-    background-color: rgb(230, 230, 232);
+    .messageTextBase();
+    background-color: #e6f4ff;
     word-break: break-all;
-    border-radius: 10px;
   }
   .messageUserText {
     .chunkText();
-    padding: 0 14px;
-    background-color: rgb(45, 100, 245);
+    .messageTextBase();
+    background-color: rgb(248, 247, 247);
     word-break: break-all;
-    border-radius: 10px;
-    color: #fdfdfd;
     text-align: justify;
   }
   .messageEmpty {

web/src/pages/chat/shared-hooks.ts

@@ -8,6 +8,7 @@ import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
 import { IAnswer } from '@/interfaces/database/chat';
 import api from '@/utils/api';
 import omit from 'lodash/omit';
+import trim from 'lodash/trim';
 import {
   Dispatch,
   SetStateAction,
@@ -134,7 +135,7 @@ export const useSelectCurrentSharedConversation = (conversationId: string) => {
 };
 
 export const useSendButtonDisabled = (value: string) => {
-  return value === '';
+  return trim(value) === '';
 };
 
 export const useSendSharedMessage = (
@@ -205,6 +206,7 @@ export const useSendSharedMessage = (
   }, [answer, addNewestAnswer]);
 
   const handlePressEnter = useCallback(() => {
+    if (trim(value) === '') return;
     if (done) {
       setValue('');
       addNewestConversation(value);