chat quote reader (#3912)

* init chat quote full text reader * linked structure * dataset data linked * optimize code * fix ts build * test finish * delete log * fix * fix ts * fix ts * remove nextId * initial scroll * fix * fix
2025-03-11 19:44:33 +08:00
parent 4655c2754e
commit e061e80235
64 changed files with 2676 additions and 369 deletions
--- a/projects/app/src/pageComponents/chat/ChatQuoteList/QuoteReader.tsx
+++ b/projects/app/src/pageComponents/chat/ChatQuoteList/QuoteReader.tsx
@@ -0,0 +1,152 @@
+import { Box, Flex } from '@chakra-ui/react';
+import { SearchDataResponseItemType } from '@fastgpt/global/core/dataset/type';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import MyBox from '@fastgpt/web/components/common/MyBox';
+import { useTranslation } from 'react-i18next';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useChatStore } from '@/web/core/chat/context/useChatStore';
+import QuoteItem from './QuoteItem';
+import { useMemo } from 'react';
+import { getSourceNameIcon } from '@fastgpt/global/core/dataset/utils';
+import { formatScore } from '@/components/core/dataset/QuoteItem';
+import { metadataType } from '@/web/core/chat/context/chatItemContext';
+import { getQuoteDataList } from '@/web/core/chat/api';
+
+const QuoteReader = ({
+  rawSearch,
+  metadata,
+  chatTime,
+  onClose
+}: {
+  rawSearch: SearchDataResponseItemType[];
+  metadata: metadataType;
+  chatTime: Date;
+  onClose: () => void;
+}) => {
+  const { t } = useTranslation();
+
+  const { chatId, appId, outLinkAuthData } = useChatStore();
+
+  const { data, loading } = useRequest2(
+    async () =>
+      await getQuoteDataList({
+        datasetDataIdList: rawSearch.map((item) => item.id),
+        chatTime,
+        collectionIdList: metadata.collectionIdList,
+        chatItemId: metadata.chatItemId,
+        appId,
+        chatId,
+        ...outLinkAuthData
+      }),
+    {
+      manual: false
+    }
+  );
+
+  const filterResults = useMemo(() => {
+    if (!metadata.collectionId) {
+      return rawSearch;
+    }
+
+    return rawSearch.filter(
+      (item) => item.collectionId === metadata.collectionId && item.sourceId === metadata.sourceId
+    );
+  }, [metadata, rawSearch]);
+
+  const formatedDataList = useMemo(() => {
+    return filterResults
+      .map((item) => {
+        const currentFilterItem = data?.quoteList.find((res) => res._id === item.id);
+
+        return {
+          ...item,
+          q: currentFilterItem?.q || '',
+          a: currentFilterItem?.a || '',
+          score: formatScore(item.score),
+          icon: getSourceNameIcon({
+            sourceId: item.sourceId,
+            sourceName: item.sourceName
+          })
+        };
+      })
+      .sort((a, b) => {
+        return (b.score.primaryScore?.value || 0) - (a.score.primaryScore?.value || 0);
+      });
+  }, [data?.quoteList, filterResults]);
+
+  return (
+    <Flex flexDirection={'column'} h={'full'}>
+      {/* title */}
+      <Flex
+        w={'full'}
+        alignItems={'center'}
+        px={5}
+        borderBottom={'1px solid'}
+        borderColor={'myGray.150'}
+      >
+        <Box flex={1} py={4}>
+          <Flex gap={2} mr={2} mb={1}>
+            <MyIcon
+              name={
+                metadata.sourceId && metadata.sourceName
+                  ? (getSourceNameIcon({
+                      sourceId: metadata.sourceId,
+                      sourceName: metadata.sourceName
+                    }) as any)
+                  : 'core/chat/quoteFill'
+              }
+              w={['1rem', '1.25rem']}
+              color={'primary.600'}
+            />
+            <Box
+              maxW={['200px', '300px']}
+              className={'textEllipsis'}
+              wordBreak={'break-all'}
+              color={'myGray.900'}
+              fontWeight={'medium'}
+            >
+              {metadata.sourceName
+                ? metadata.sourceName
+                : t('common:core.chat.Quote Amount', { amount: rawSearch.length })}
+            </Box>
+          </Flex>
+          <Box fontSize={'mini'} color={'myGray.500'}>
+            {t('common:core.chat.quote.Quote Tip')}
+          </Box>
+        </Box>
+        <Box
+          cursor={'pointer'}
+          borderRadius={'sm'}
+          p={1}
+          _hover={{
+            bg: 'myGray.100'
+          }}
+          onClick={onClose}
+        >
+          <MyIcon name="common/closeLight" color={'myGray.900'} w={6} />
+        </Box>
+      </Flex>
+
+      {/* quote list */}
+      <MyBox flex={'1 0 0'} mt={2} px={5} py={1} overflow={'auto'} isLoading={loading}>
+        {!loading && (
+          <Flex flexDir={'column'} gap={3}>
+            {formatedDataList?.map((item, index) => (
+              <QuoteItem
+                key={item.id}
+                index={index}
+                icon={item.icon}
+                sourceName={item.sourceName}
+                score={item.score}
+                q={item.q}
+                a={item.a}
+              />
+            ))}
+          </Flex>
+        )}
+      </MyBox>
+    </Flex>
+  );
+};
+
+export default QuoteReader;