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/knowledge-base-item.tsx

@@ -70,6 +70,10 @@ const KnowledgeBaseItem = ({
 
 export default KnowledgeBaseItem;
 
+function buildQueryVariableOptionsByShowVariable(showVariable?: boolean) {
+  return showVariable ? useBuildQueryVariableOptions : () => [];
+}
+
 export function KnowledgeBaseFormField({
   showVariable = false,
 }: {
@@ -84,7 +88,7 @@ export function KnowledgeBaseFormField({
     (x) => x.parser_id !== DocumentParserType.Tag,
   );
 
-  const nextOptions = useBuildQueryVariableOptions();
+  const nextOptions = buildQueryVariableOptionsByShowVariable(showVariable)();
 
   const knowledgeOptions = filteredKnowledgeList.map((x) => ({
     label: x.name,

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

@@ -1,9 +1,8 @@
 import { ReactComponent as AssistantIcon } from '@/assets/svg/assistant.svg';
 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 { memo, useCallback, useEffect, useMemo } from 'react';
 
 import {
   useFetchDocumentInfosByIds,
@@ -12,17 +11,13 @@ import {
 import { IRegenerateMessage, IRemoveMessageById } from '@/hooks/logic-hooks';
 import { IMessage } from '@/pages/chat/interface';
 import MarkdownContent from '@/pages/chat/markdown-content';
-import { getExtension, isImage } from '@/utils/document-util';
-import { Avatar, Button, Flex, List, Space, Typography } from 'antd';
-import FileIcon from '../file-icon';
-import IndentedTreeModal from '../indented-tree/modal';
-import NewDocumentLink from '../new-document-link';
+import { Avatar, Flex, Space } from 'antd';
+import { ReferenceDocumentList } from '../next-message-item/reference-document-list';
+import { InnerUploadedMessageFiles } from '../next-message-item/uploaded-message-files';
 import { useTheme } from '../theme-provider';
 import { AssistantGroupButton, UserGroupButton } from './group-button';
 import styles from './index.less';
 
-const { Text } = Typography;
-
 interface IProps extends Partial<IRemoveMessageById>, IRegenerateMessage {
   item: IMessage;
   reference: IReference;
@@ -59,21 +54,11 @@ const MessageItem = ({
   const { data: documentList, setDocumentIds } = useFetchDocumentInfosByIds();
   const { data: documentThumbnails, setDocumentIds: setIds } =
     useFetchDocumentThumbnailsByIds();
-  const { visible, hideModal, showModal } = useSetModalState();
-  const [clickedDocumentId, setClickedDocumentId] = useState('');
 
   const referenceDocumentList = useMemo(() => {
     return reference?.doc_aggs ?? [];
   }, [reference?.doc_aggs]);
 
-  const handleUserDocumentClick = useCallback(
-    (id: string) => () => {
-      setClickedDocumentId(id);
-      showModal();
-    },
-    [showModal],
-  );
-
   const handleRegenerateMessage = useCallback(() => {
     regenerateMessage?.(item);
   }, [regenerateMessage, item]);
@@ -160,83 +145,18 @@ const MessageItem = ({
               ></MarkdownContent>
             </div>
             {isAssistant && referenceDocumentList.length > 0 && (
-              <List
-                bordered
-                dataSource={referenceDocumentList}
-                renderItem={(item) => {
-                  return (
-                    <List.Item>
-                      <Flex gap={'small'} align="center">
-                        <FileIcon
-                          id={item.doc_id}
-                          name={item.doc_name}
-                        ></FileIcon>
-
-                        <NewDocumentLink
-                          documentId={item.doc_id}
-                          documentName={item.doc_name}
-                          prefix="document"
-                          link={item.url}
-                        >
-                          {item.doc_name}
-                        </NewDocumentLink>
-                      </Flex>
-                    </List.Item>
-                  );
-                }}
-              />
+              <ReferenceDocumentList
+                list={referenceDocumentList}
+              ></ReferenceDocumentList>
             )}
             {isUser && documentList.length > 0 && (
-              <List
-                bordered
-                dataSource={documentList}
-                renderItem={(item) => {
-                  // TODO:
-                  // const fileThumbnail =
-                  //   documentThumbnails[item.id] || documentThumbnails[item.id];
-                  const fileExtension = getExtension(item.name);
-                  return (
-                    <List.Item>
-                      <Flex gap={'small'} align="center">
-                        <FileIcon id={item.id} name={item.name}></FileIcon>
-
-                        {isImage(fileExtension) ? (
-                          <NewDocumentLink
-                            documentId={item.id}
-                            documentName={item.name}
-                            prefix="document"
-                          >
-                            {item.name}
-                          </NewDocumentLink>
-                        ) : (
-                          <Button
-                            type={'text'}
-                            onClick={handleUserDocumentClick(item.id)}
-                          >
-                            <Text
-                              style={{ maxWidth: '40vw' }}
-                              ellipsis={{ tooltip: item.name }}
-                            >
-                              {item.name}
-                            </Text>
-                          </Button>
-                        )}
-                      </Flex>
-                    </List.Item>
-                  );
-                }}
-              />
+              <InnerUploadedMessageFiles
+                files={documentList}
+              ></InnerUploadedMessageFiles>
             )}
           </Flex>
         </div>
       </section>
-      {visible && (
-        <IndentedTreeModal
-          visible={visible}
-          hideModal={hideModal}
-          documentId={clickedDocumentId}
-        ></IndentedTreeModal>
-      )}
     </div>
   );
 };

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>
   );
 }