Fix: Using the Enter key does not send a complete message #6754 (#6755)

### What problem does this PR solve?

Fix: Using the Enter key does not send a complete message #6754

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/message-input/index.tsx

   CloseCircleOutlined,
   InfoCircleOutlined,
   LoadingOutlined,
-  PaperClipOutlined,
-  SendOutlined,
 } from '@ant-design/icons';
 import type { GetProp, UploadFile } from 'antd';
 import {
   UploadProps,
 } from 'antd';
 import get from 'lodash/get';
-import { CircleStop } from 'lucide-react';
+import { CircleStop, Paperclip, SendHorizontal } from 'lucide-react';
 import {
   ChangeEventHandler,
   memo,
 
   const isUploadingFile = fileList.some((x) => x.status === 'uploading');
 
+  const handlePressEnter = useCallback(async () => {
+    if (isUploadingFile) return;
+    const ids = getFileIds(fileList.filter((x) => isUploadSuccess(x)));
+
+    onPressEnter(ids);
+    setFileList([]);
+  }, [fileList, onPressEnter, isUploadingFile]);
+
   const handleKeyDown = useCallback(
     async (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
       // check if it was shift + enter
     [sendDisabled, isUploadingFile, sendLoading, handlePressEnter],
   );
 
-  const handlePressEnter = useCallback(async () => {
-    if (isUploadingFile) return;
-    const ids = getFileIds(fileList.filter((x) => isUploadSuccess(x)));
-
-    onPressEnter(ids);
-    setFileList([]);
-  }, [fileList, onPressEnter, isUploadingFile]);
-
-  const [isComposing, setIsComposing] = useState(false);
-
-  const handleCompositionStart = () => setIsComposing(true);
-  const handleCompositionEnd = () => setIsComposing(false);
-
   const handleRemove = useCallback(
     async (file: UploadFile) => {
       const ids = get(file, 'response.data', []);
         autoSize={{ minRows: 2, maxRows: 10 }}
         onKeyDown={handleKeyDown}
         onChange={onInputChange}
-        onCompositionStart={handleCompositionStart}
-        onCompositionEnd={handleCompositionEnd}
       />
       <Divider style={{ margin: '5px 30px 10px 0px' }} />
       <Flex justify="space-between" align="center">
               }}
             >
               <Button type={'primary'} disabled={disabled}>
-                <PaperClipOutlined />
+                <Paperclip className="size-4" />
               </Button>
             </Upload>
           )}
           {sendLoading ? (
             <Button onClick={handleStopOutputMessage}>
-              <CircleStop />
+              <CircleStop className="size-5" />
             </Button>
           ) : (
             <Button
               loading={sendLoading}
               disabled={sendDisabled || isUploadingFile || sendLoading}
             >
-              <SendOutlined />
+              <SendHorizontal className="size-5" />
             </Button>
           )}
         </Flex>

web/src/pages/chat/markdown-content/index.tsx

 import { IReference, IReferenceChunk } from '@/interfaces/database/chat';
 import { getExtension } from '@/utils/document-util';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Button, Flex, Popover, Space } from 'antd';
+import { Button, Flex, Popover } from 'antd';
 import DOMPurify from 'dompurify';
 import { useCallback, useEffect, useMemo } from 'react';
 import Markdown from 'react-markdown';
 import { preprocessLaTeX, replaceThinkToSection } from '@/utils/chat';
 import { replaceTextByOldReg } from '../utils';
 
+import classNames from 'classnames';
 import { pipe } from 'lodash/fp';
 import styles from './index.less';
 
       const fileExtension = documentId ? getExtension(document?.doc_name) : '';
       const imageId = chunkItem?.image_id;
       return (
-        <Flex
-          key={chunkItem?.id}
-          gap={10}
-          className={styles.referencePopoverWrapper}
-        >
+        <div key={chunkItem?.id} className="flex gap-2">
           {imageId && (
             <Popover
               placement="left"
               ></Image>
             </Popover>
           )}
-          <Space direction={'vertical'}>
+          <div className={'space-y-2 max-w-[40vw]'}>
             <div
               dangerouslySetInnerHTML={{
                 __html: DOMPurify.sanitize(chunkItem?.content ?? ''),
               }}
-              className={styles.chunkContentText}
+              className={classNames(styles.chunkContentText)}
             ></div>
             {documentId && (
               <Flex gap={'small'}>
                 )}
                 <Button
                   type="link"
-                  className={styles.documentLink}
+                  className={classNames(styles.documentLink, 'text-wrap')}
                   onClick={handleDocumentButtonClick(
                     documentId,
                     chunkItem,
                 </Button>
               </Flex>
             )}
-          </Space>
-        </Flex>
+          </div>
+        </div>
       );
     },
     [reference, fileThumbnails, handleDocumentButtonClick],

web/src/pages/chat/utils.ts

 
 // To be compatible with the old index matching mode
 export const replaceTextByOldReg = (text: string) => {
-  return text.replace(oldReg, function (substring) {
+  return text?.replace(oldReg, function (substring) {
     return `~~${substring.slice(2, -2)}==`;
   });
 };