v4.6.2-alpah (#511)

projects/app/src/components/ChatBox/ContextModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ModalBody, Box, useTheme } from '@chakra-ui/react';
+import { ModalBody, Box, useTheme, Flex, Image } from '@chakra-ui/react';
 import { ChatItemType } from '@fastgpt/global/core/chat/type';
 import MyModal from '../MyModal';
 
@@ -16,13 +16,13 @@ const ContextModal = ({
     <MyModal
       isOpen={true}
       onClose={onClose}
+      iconSrc="/imgs/modal/chatHistory.svg"
       title={`完整对话记录(${context.length}条)`}
       h={['90vh', '80vh']}
       minW={['90vw', '600px']}
       isCentered
     >
       <ModalBody
-        pt={0}
         whiteSpace={'pre-wrap'}
         textAlign={'justify'}
         wordBreak={'break-all'}

projects/app/src/components/ChatBox/FeedbackModal.tsx

@@ -33,7 +33,12 @@ const FeedbackModal = ({
   });
 
   return (
-    <MyModal isOpen={true} onClose={onClose} title={t('chat.Feedback Modal')}>
+    <MyModal
+      isOpen={true}
+      onClose={onClose}
+      iconSrc="/imgs/modal/badAnswer.svg"
+      title={t('chat.Feedback Modal')}
+    >
       <ModalBody>
         <Textarea
           ref={ref}

projects/app/src/components/ChatBox/QuoteModal.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { ModalBody, Box, useTheme, Flex, Progress, Link } from '@chakra-ui/react';
+import { ModalBody, Box, useTheme, Flex, Progress, Link, Image } from '@chakra-ui/react';
 import { getDatasetDataItemById } from '@/web/core/dataset/api';
 import { useLoading } from '@/web/common/hooks/useLoading';
 import { useToast } from '@/web/common/hooks/useToast';
@@ -68,6 +68,7 @@ const QuoteModal = ({
         h={['90vh', '80vh']}
         isCentered
         minW={['90vw', '600px']}
+        iconSrc="/imgs/modal/quote.svg"
         title={
           <Box>
             知识库引用({rawSearch.length}条)
@@ -77,7 +78,7 @@ const QuoteModal = ({
           </Box>
         }
       >
-        <ModalBody pt={0} whiteSpace={'pre-wrap'} textAlign={'justify'} wordBreak={'break-all'}>
+        <ModalBody whiteSpace={'pre-wrap'} textAlign={'justify'} wordBreak={'break-all'}>
           {rawSearch.map((item, i) => (
             <Box
               key={i}

projects/app/src/components/ChatBox/ReadFeedbackModal.tsx

@@ -36,7 +36,12 @@ const ReadFeedbackModal = ({
   });
 
   return (
-    <MyModal isOpen={true} onClose={onClose} title={t('chat.Feedback Modal')}>
+    <MyModal
+      isOpen={true}
+      onClose={onClose}
+      iconSrc="/imgs/modal/readFeedback.svg"
+      title={t('chat.Feedback Modal')}
+    >
       <ModalBody>{content}</ModalBody>
       <ModalFooter>
         <Button mr={2} isLoading={isLoading} variant={'base'} onClick={mutate}>

projects/app/src/components/ChatBox/SelectMarkCollection.tsx

@@ -35,7 +35,7 @@ const SelectMarkCollection = ({
   const theme = useTheme();
   const [selectedDatasetId, setSelectedDatasetId] = useState<string>();
   const [selectedDatasetCollectionIds, setSelectedDatasetCollectionIds] = useState<string[]>([]);
-  const { paths, parentId, setParentId, datasets, isLoading } = useDatasetSelect();
+  const { paths, parentId, setParentId, datasets, isFetching } = useDatasetSelect();
 
   return (
     <>
@@ -107,7 +107,7 @@ const SelectMarkCollection = ({
           </ModalBody>
           <ModalFooter>
             <Button
-              isLoading={isLoading}
+              isLoading={isFetching}
               isDisabled={!selectedDatasetId}
               onClick={() => {
                 setAdminMarkData({ ...adminMarkData, datasetId: selectedDatasetId });

projects/app/src/components/ChatBox/WholeResponseModal.tsx

@@ -2,31 +2,33 @@ import React, { useMemo, useState } from 'react';
 import { Box, useTheme, Flex, Image } from '@chakra-ui/react';
 import type { ChatHistoryItemResType } from '@fastgpt/global/core/chat/api.d';
 import { useTranslation } from 'next-i18next';
-import { ModuleTemplatesFlat } from '@/constants/flow/ModuleTemplate';
+import { moduleTemplatesFlat } from '@/web/core/modules/template/system';
 import Tabs from '../Tabs';
 
 import MyModal from '../MyModal';
 import MyTooltip from '../MyTooltip';
 import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import { formatPrice } from '@fastgpt/global/support/wallet/bill/tools';
+import Markdown from '../Markdown';
 
-function Row({ label, value }: { label: string; value?: string | number | React.ReactNode }) {
+function Row({ label, value }: { label: string; value?: string | number }) {
   const theme = useTheme();
+  const strValue = `${value}`;
+  const isCodeBlock = strValue.startsWith('~~~json');
+
   return value !== undefined && value !== '' && value !== 'undefined' ? (
-    <Box mb={2}>
-      <Box fontSize={['sm', 'md']} mb={1} flex={'0 0 90px'}>
+    <Box mb={3}>
+      <Box fontSize={['sm', 'md']} mb={isCodeBlock ? 0 : 1} flex={'0 0 90px'}>
         {label}:
       </Box>
       <Box
-        borderRadius={'lg'}
-        border={theme.borders.base}
-        px={3}
-        py={1}
-        position={'relative'}
-        whiteSpace={'pre-wrap'}
+        borderRadius={'md'}
         fontSize={'sm'}
+        {...(isCodeBlock
+          ? { transform: 'translateY(-3px)' }
+          : { px: 3, py: 1, border: theme.borders.base })}
       >
-        {value}
+        <Markdown source={strValue} />
       </Box>
     </Box>
   ) : null;
@@ -39,7 +41,6 @@ const WholeResponseModal = ({
   response: ChatHistoryItemResType[];
   onClose: () => void;
 }) => {
-  const theme = useTheme();
   const { t } = useTranslation();
 
   const list = useMemo(
@@ -51,7 +52,8 @@ const WholeResponseModal = ({
               mr={2}
               src={
                 item.moduleLogo ||
-                ModuleTemplatesFlat.find((template) => item.moduleType === template.flowType)?.logo
+                moduleTemplatesFlat.find((template) => item.moduleType === template.flowType)
+                  ?.avatar
               }
               alt={''}
               w={['14px', '16px']}
@@ -75,6 +77,7 @@ const WholeResponseModal = ({
       onClose={onClose}
       h={['90vh', '80vh']}
       w={['90vw', '500px']}
+      iconSrc="/imgs/modal/wholeRecord.svg"
       title={
         <Flex alignItems={'center'}>
           {t('chat.Complete Response')}
@@ -102,37 +105,26 @@ const WholeResponseModal = ({
           />
           <Row label={t('chat.response.module tokens')} value={`${activeModule?.tokens}`} />
           <Row label={t('chat.response.module model')} value={activeModule?.model} />
+          <Row label={t('chat.response.module query')} value={activeModule?.query} />
 
           {/* ai chat */}
-          <Row label={t('chat.response.module question')} value={activeModule?.question} />
           <Row label={t('chat.response.module temperature')} value={activeModule?.temperature} />
           <Row label={t('chat.response.module maxToken')} value={activeModule?.maxToken} />
-          <Row
-            label={t('chat.response.module quoteList')}
-            value={(() => {
-              try {
-                JSON.stringify(activeModule.quoteList, null, 2);
-              } catch (error) {
-                return '';
-              }
-            })()}
-          />
           <Row
             label={t('chat.response.module historyPreview')}
             value={(() => {
               if (!activeModule?.historyPreview) return '';
-              return (
-                <>
-                  {activeModule.historyPreview.map((item, i) => (
-                    <Box key={i} _notLast={{ mb: 3, borderBottom: theme.borders.base }} pb={3}>
-                      <Box fontWeight={'bold'}>{item.obj}</Box>
-                      <Box>{item.value}</Box>
-                    </Box>
-                  ))}
-                </>
-              );
+              return activeModule.historyPreview
+                .map((item, i) => `**${item.obj}**\n${item.value}`)
+                .join('\n---\n');
             })()}
           />
+          {activeModule.quoteList && activeModule.quoteList.length > 0 && (
+            <Row
+              label={t('chat.response.module quoteList')}
+              value={`~~~json\n${JSON.stringify(activeModule.quoteList, null, 2)}`}
+            />
+          )}
 
           {/* dataset search */}
           <Row label={t('chat.response.module similarity')} value={activeModule?.similarity} />
@@ -143,15 +135,7 @@ const WholeResponseModal = ({
             label={t('chat.response.module cq')}
             value={(() => {
               if (!activeModule?.cqList) return '';
-              return (
-                <Box as={'ol'} px={3}>
-                  {activeModule.cqList.map((item) => (
-                    <Box key={item.key} as={'li'}>
-                      {item.value}
-                    </Box>
-                  ))}
-                </Box>
-              );
+              return activeModule.cqList.map((item) => `* ${item.value}`).join('\n');
             })()}
           />
           <Row label={t('chat.response.module cq result')} value={activeModule?.cqResult} />
@@ -161,50 +145,34 @@ const WholeResponseModal = ({
             label={t('chat.response.module extract description')}
             value={activeModule?.extractDescription}
           />
-          <Row
-            label={t('chat.response.module extract result')}
-            value={(() => {
-              try {
-                return JSON.stringify(activeModule?.extractResult, null, 2);
-              } catch (error) {
-                return '';
-              }
-            })()}
-          />
+          {activeModule?.extractResult && (
+            <Row
+              label={t('chat.response.module extract result')}
+              value={`~~~json\n${JSON.stringify(activeModule?.extractResult, null, 2)}`}
+            />
+          )}
 
           {/* http */}
-          <Row
-            label={t('chat.response.module http body')}
-            value={(() => {
-              try {
-                return JSON.stringify(activeModule?.body, null, 2);
-              } catch (error) {
-                return '';
-              }
-            })()}
-          />
-          <Row
-            label={t('chat.response.module http result')}
-            value={(() => {
-              try {
-                return JSON.stringify(activeModule?.httpResult, null, 2);
-              } catch (error) {
-                return '';
-              }
-            })()}
-          />
+          {activeModule?.body && (
+            <Row
+              label={t('chat.response.module http body')}
+              value={`~~~json\n${JSON.stringify(activeModule?.body, null, 2)}`}
+            />
+          )}
+          {activeModule?.httpResult && (
+            <Row
+              label={t('chat.response.module http result')}
+              value={`~~~json\n${JSON.stringify(activeModule?.httpResult, null, 2)}`}
+            />
+          )}
 
           {/* plugin */}
-          <Row
-            label={t('chat.response.plugin output')}
-            value={(() => {
-              try {
-                return JSON.stringify(activeModule?.pluginOutput, null, 2);
-              } catch (error) {
-                return '';
-              }
-            })()}
-          />
+          {activeModule?.pluginOutput && (
+            <Row
+              label={t('chat.response.plugin output')}
+              value={`~~~json\n${JSON.stringify(activeModule?.pluginOutput, null, 2)}`}
+            />
+          )}
         </Box>
       </Flex>
     </MyModal>

projects/app/src/components/ChatBox/index.tsx

@@ -33,14 +33,13 @@ import { eventBus } from '@/web/common/utils/eventbus';
 import { adaptChat2GptMessages } from '@fastgpt/global/core/chat/adapt';
 import { useMarkdown } from '@/web/common/hooks/useMarkdown';
 import { ModuleItemType } from '@fastgpt/global/core/module/type.d';
-import { VariableInputEnum } from '@/constants/app';
+import { VariableInputEnum } from '@fastgpt/global/core/module/constants';
 import { useForm } from 'react-hook-form';
 import type { ChatMessageItemType } from '@fastgpt/global/core/ai/type.d';
 import { fileDownload } from '@/web/common/file/utils';
 import { htmlTemplate } from '@/constants/common';
 import { useRouter } from 'next/router';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
-import { TaskResponseKeyEnum } from '@fastgpt/global/core/chat/constants';
 import { useTranslation } from 'next-i18next';
 import { customAlphabet } from 'nanoid';
 import { adminUpdateChatFeedback, userUpdateChatFeedback } from '@/web/core/chat/api';
@@ -60,9 +59,10 @@ const SelectMarkCollection = dynamic(() => import('./SelectMarkCollection'));
 
 import styles from './index.module.scss';
 import { postQuestionGuide } from '@/web/core/ai/api';
-import { splitGuideModule } from '@/global/core/app/modules/utils';
-import { AppTTSConfigType } from '@/types/app';
+import { splitGuideModule } from '@fastgpt/global/core/module/utils';
+import type { AppTTSConfigType } from '@fastgpt/global/core/module/type.d';
 import MessageInput from './MessageInput';
+import { ModuleOutputKeyEnum } from '@fastgpt/global/core/module/constants';
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 24);
 
@@ -105,7 +105,7 @@ type Props = {
   onUpdateVariable?: (e: Record<string, any>) => void;
   onStartChat?: (e: StartChatFnProps) => Promise<{
     responseText: string;
-    [TaskResponseKeyEnum.responseData]: ChatHistoryItemResType[];
+    [ModuleOutputKeyEnum.responseData]: ChatHistoryItemResType[];
     isNewChat?: boolean;
   }>;
   onDelMessage?: (e: { contentId?: string; index: number }) => void;
@@ -760,6 +760,9 @@ const ChatBox = (
                                     variant={'outline'}
                                     colorScheme={'gray'}
                                     size={'xs'}
+                                    whiteSpace={'pre-wrap'}
+                                    h={'auto'}
+                                    py={1}
                                     onClick={() => {
                                       resetInputVal(item);
                                     }}