Feat: Add metadata configuration for new chats #3221 (#9502)

### What problem does this PR solve?

Feat: Add metadata configuration for new chats #3221

### Type of change


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

web/src/components/next-message-item/group-button.tsx

@@ -116,64 +116,6 @@ export const AssistantGroupButton = ({
       )}
     </>
   );
-
-  return (
-    <>
-      <Radio.Group size="small">
-        <Radio.Button value="a">
-          <CopyToClipboard text={content}></CopyToClipboard>
-        </Radio.Button>
-        {showLoudspeaker && (
-          <Radio.Button value="b" onClick={handleRead}>
-            <Tooltip title={t('chat.read')}>
-              {isPlaying ? <PauseCircleOutlined /> : <SoundOutlined />}
-            </Tooltip>
-            <audio src="" ref={ref}></audio>
-          </Radio.Button>
-        )}
-        {showLikeButton && (
-          <>
-            <Radio.Button value="c" onClick={handleLike}>
-              <LikeOutlined />
-            </Radio.Button>
-            <Radio.Button value="d" onClick={showModal}>
-              <DislikeOutlined />
-            </Radio.Button>
-          </>
-        )}
-        {prompt && (
-          <Radio.Button value="e" onClick={showPromptModal}>
-            <PromptIcon style={{ fontSize: '16px' }} />
-          </Radio.Button>
-        )}
-        <Radio.Button
-          value="f"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            handleShowLogSheet();
-          }}
-        >
-          <NotebookText className="size-4" />
-        </Radio.Button>
-      </Radio.Group>
-      {visible && (
-        <FeedbackModal
-          visible={visible}
-          hideModal={hideModal}
-          onOk={onFeedbackOk}
-          loading={loading}
-        ></FeedbackModal>
-      )}
-      {promptVisible && (
-        <PromptModal
-          visible={promptVisible}
-          hideModal={hidePromptModal}
-          prompt={prompt}
-        ></PromptModal>
-      )}
-    </>
-  );
 };
 
 interface UserGroupButtonProps extends Partial<IRemoveMessageById> {

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

@@ -1,6 +1,5 @@
 import { ReactComponent as AssistantIcon } from '@/assets/svg/assistant.svg';
 import { MessageType } from '@/constants/chat';
-import { useSetModalState } from '@/hooks/common-hooks';
 import { IReferenceChunk, IReferenceObject } from '@/interfaces/database/chat';
 import classNames from 'classnames';
 import {
@@ -21,7 +20,6 @@ import { WorkFlowTimeline } from '@/pages/agent/log-sheet/workflow-timeline';
 import { IMessage } from '@/pages/chat/interface';
 import { isEmpty } from 'lodash';
 import { Atom, ChevronDown, ChevronUp } from 'lucide-react';
-import IndentedTreeModal from '../indented-tree/modal';
 import MarkdownContent from '../next-markdown-content';
 import { RAGFlowAvatar } from '../ragflow-avatar';
 import { useTheme } from '../theme-provider';
@@ -79,8 +77,6 @@ function MessageItem({
   const { theme } = useTheme();
   const isAssistant = item.role === MessageType.Assistant;
   const isUser = item.role === MessageType.User;
-  const { visible, hideModal } = useSetModalState();
-  const [clickedDocumentId] = useState('');
   const [showThinking, setShowThinking] = useState(false);
   const { setLastSendLoadingFunc } = useContext(AgentChatContext);
 
@@ -200,8 +196,6 @@ function MessageItem({
                     sendLoading={sendLoading}
                   ></UserGroupButton>
                 )}
-
-                {/* <b>{isAssistant ? '' : nickname}</b> */}
               </div>
             </div>
 
@@ -254,13 +248,6 @@ function MessageItem({
           </section>
         </div>
       </section>
-      {visible && (
-        <IndentedTreeModal
-          visible={visible}
-          hideModal={hideModal}
-          documentId={clickedDocumentId}
-        ></IndentedTreeModal>
-      )}
     </div>
   );
 }

web/src/components/next-message-item/reference-document-list.tsx

@@ -8,7 +8,7 @@ export function ReferenceDocumentList({ list }: { list: Docagg[] }) {
     <section className="flex gap-3 flex-wrap">
       {list.map((item) => (
         <Card key={item.doc_id}>
-          <CardContent className="p-2">
+          <CardContent className="p-2 space-x-2">
             <FileIcon id={item.doc_id} name={item.doc_name}></FileIcon>
             <NewDocumentLink
               documentId={item.doc_id}

web/src/components/next-message-item/uploaded-message-files.tsx

@@ -1,34 +1,65 @@
+import { IDocumentInfo } from '@/interfaces/database/document';
 import { getExtension } from '@/utils/document-util';
 import { formatBytes } from '@/utils/file-util';
 import { memo } from 'react';
+import FileIcon from '../file-icon';
+import NewDocumentLink from '../new-document-link';
 import SvgIcon from '../svg-icon';
 
 interface IProps {
-  files?: File[];
+  files?: File[] | IDocumentInfo[];
+}
+
+type NameWidgetType = {
+  name: string;
+  size: number;
+  id?: string;
+};
+function NameWidget({ name, size, id }: NameWidgetType) {
+  return (
+    <div className="text-xs max-w-20">
+      {id ? (
+        <NewDocumentLink documentId={id} documentName={name} prefix="document">
+          {name}
+        </NewDocumentLink>
+      ) : (
+        <div className="truncate">{name}</div>
+      )}
+      <p className="text-text-secondary pt-1">{formatBytes(size)}</p>
+    </div>
+  );
 }
 export function InnerUploadedMessageFiles({ files = [] }: IProps) {
   return (
     <section className="flex gap-2 pt-2">
-      {files?.map((file, idx) => (
-        <div key={idx} className="flex gap-1 border rounded-md p-1.5">
-          {file.type.startsWith('image/') ? (
-            <img
-              src={URL.createObjectURL(file)}
-              alt={file.name}
-              className="size-10 object-cover"
-            />
-          ) : (
-            <SvgIcon
-              name={`file-icon/${getExtension(file.name)}`}
-              width={24}
-            ></SvgIcon>
-          )}
-          <div className="text-xs max-w-20">
-            <div className="truncate">{file.name}</div>
-            <p className="text-text-secondary pt-1">{formatBytes(file.size)}</p>
+      {files?.map((file, idx) => {
+        const name = file.name;
+        const isFile = file instanceof File;
+
+        return (
+          <div key={idx} className="flex gap-1 border rounded-md p-1.5">
+            {!isFile ? (
+              <FileIcon id={file.id} name={name}></FileIcon>
+            ) : file.type.startsWith('image/') ? (
+              <img
+                src={URL.createObjectURL(file)}
+                alt={name}
+                className="size-10 object-cover"
+              />
+            ) : (
+              <SvgIcon
+                name={`file-icon/${getExtension(name)}`}
+                width={24}
+              ></SvgIcon>
+            )}
+            <NameWidget
+              name={name}
+              size={file.size}
+              id={isFile ? undefined : file.id}
+            ></NameWidget>
           </div>
-        </div>
-      ))}
+        );
+      })}
     </section>
   );
 }