Feat: Allow users to enter text in the middle of a chat #3221 (#8569)

### What problem does this PR solve?

Feat: Allow users to enter text in the middle of a chat #3221
### Type of change


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

web/src/components/next-message-item/index.tsx

@@ -3,7 +3,14 @@ import { MessageType } from '@/constants/chat';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { IReference, IReferenceChunk } from '@/interfaces/database/chat';
 import classNames from 'classnames';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  PropsWithChildren,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import {
   useFetchDocumentInfosByIds,
@@ -23,7 +30,10 @@ import styles from './index.less';
 
 const { Text } = Typography;
 
-interface IProps extends Partial<IRemoveMessageById>, IRegenerateMessage {
+interface IProps
+  extends Partial<IRemoveMessageById>,
+    IRegenerateMessage,
+    PropsWithChildren {
   item: IMessage;
   reference: IReference;
   loading?: boolean;
@@ -52,6 +62,7 @@ const MessageItem = ({
   showLikeButton = true,
   showLoudspeaker = true,
   visibleAvatar = true,
+  children,
 }: IProps) => {
   const { theme } = useTheme();
   const isAssistant = item.role === MessageType.Assistant;
@@ -152,12 +163,16 @@ const MessageItem = ({
                   : styles.messageUserText
               }
             >
-              <MarkdownContent
-                loading={loading}
-                content={item.content}
-                reference={reference}
-                clickDocumentButton={clickDocumentButton}
-              ></MarkdownContent>
+              {item.data ? (
+                children
+              ) : (
+                <MarkdownContent
+                  loading={loading}
+                  content={item.content}
+                  reference={reference}
+                  clickDocumentButton={clickDocumentButton}
+                ></MarkdownContent>
+              )}
             </div>
             {isAssistant && referenceDocumentList.length > 0 && (
               <List