Dataset folder manager (#274)

* feat: retry send

* perf: qa default value

* feat: dataset folder

* feat: kb folder delete and path

* fix: ts

* perf: script load

* feat: fileCard and dataCard

* feat: search file

* feat: max token

* feat: select dataset

* fix: preview chunk

* perf: source update

* export data limit file_id

* docs

* fix: export limit

client/src/components/ChatBox/QuoteModal.tsx

@@ -19,7 +19,7 @@ const QuoteModal = ({
   rawSearch = [],
   onClose
 }: {
-  onUpdateQuote: (quoteId: string, sourceText: string) => Promise<void>;
+  onUpdateQuote: (quoteId: string, sourceText?: string) => Promise<void>;
   rawSearch: SearchType[];
   onClose: () => void;
 }) => {
@@ -129,7 +129,7 @@ const QuoteModal = ({
       {editDataItem && (
         <InputDataModal
           onClose={() => setEditDataItem(undefined)}
-          onSuccess={() => onUpdateQuote(editDataItem.id, '手动修改')}
+          onSuccess={() => onUpdateQuote(editDataItem.id)}
           onDelete={() => onUpdateQuote(editDataItem.id, '已删除')}
           kbId={editDataItem.kb_id}
           defaultValues={{

client/src/components/ChatBox/ResponseTags.tsx

@@ -44,7 +44,7 @@ const ResponseTags = ({
     };
   }, [responseData]);
 
-  const updateQuote = useCallback(async (quoteId: string, sourceText: string) => {}, []);
+  const updateQuote = useCallback(async (quoteId: string, sourceText?: string) => {}, []);
 
   const TagStyles: BoxProps = {
     mr: 2,

client/src/components/ChatBox/SelectDataset.tsx

@@ -12,7 +12,7 @@ import {
 import MyModal from '../MyModal';
 import { useTranslation } from 'next-i18next';
 import { useQuery } from '@tanstack/react-query';
-import { useUserStore } from '@/store/user';
+import { useDatasetStore } from '@/store/dataset';
 import { useToast } from '@/hooks/useToast';
 import Avatar from '../Avatar';
 import MyIcon from '@/components/Icon';
@@ -29,10 +29,10 @@ const SelectDataset = ({
   const theme = useTheme();
   const { isPc } = useGlobalStore();
   const { toast } = useToast();
-  const { myKbList, loadKbList } = useUserStore();
+  const { myKbList, loadKbList } = useDatasetStore();
   const [selectedId, setSelectedId] = useState<string>();
 
-  useQuery(['loadKbList'], loadKbList);
+  useQuery(['loadKbList'], () => loadKbList());
 
   return (
     <MyModal isOpen={true} onClose={onClose} w={'100%'} maxW={['90vw', '900px']} isCentered={!isPc}>

client/src/components/ChatBox/WholeResponseModal.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Box, ModalBody, useTheme, ModalHeader, Flex } from '@chakra-ui/react';
+import { Box, ModalBody, useTheme, Flex } from '@chakra-ui/react';
 import type { ChatHistoryItemResType } from '@/types/chat';
 import { useTranslation } from 'react-i18next';
 

client/src/components/ChatBox/index.tsx

@@ -55,6 +55,7 @@ const SelectDataset = dynamic(() => import('./SelectDataset'));
 const InputDataModal = dynamic(() => import('@/pages/kb/detail/components/InputDataModal'));
 
 import styles from './index.module.scss';
+import Script from 'next/script';
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 24);
 
@@ -293,7 +294,7 @@ const ChatBox = (
    * user confirm send prompt
    */
   const sendPrompt = useCallback(
-    async (variables: Record<string, any> = {}, inputVal = '') => {
+    async (variables: Record<string, any> = {}, inputVal = '', history = chatHistory) => {
       if (!onStartChat) return;
       if (isChatting) {
         toast({
@@ -314,7 +315,7 @@ const ChatBox = (
       }
 
       const newChatList: ChatSiteItemType[] = [
-        ...chatHistory,
+        ...history,
         {
           dataId: nanoid(),
           obj: 'Human',
@@ -407,6 +408,22 @@ const ChatBox = (
     ]
   );
 
+  // retry input
+  const retryInput = useCallback(
+    async (index: number) => {
+      if (!onDelMessage) return;
+      const delHistory = chatHistory.slice(index);
+      setChatHistory((state) => (index === 0 ? [] : state.slice(0, index)));
+
+      await Promise.all(
+        delHistory.map((item, i) => onDelMessage({ contentId: item.dataId, index: index + i }))
+      );
+
+      sendPrompt(variables, delHistory[0].value, chatHistory.slice(0, index));
+    },
+    [chatHistory, onDelMessage, sendPrompt, variables]
+  );
+
   // output data
   useImperativeHandle(ref, () => ({
     getChatHistory: () => chatHistory,
@@ -470,7 +487,7 @@ const ChatBox = (
   );
   const statusBoxData = useMemo(() => {
     const colorMap = {
-      loading: '#67c13b',
+      loading: 'myGray.700',
       running: '#67c13b',
       finish: 'myBlue.600'
     };
@@ -484,6 +501,7 @@ const ChatBox = (
     };
   }, [chatHistory, isChatting, t]);
 
+  // page change and abort request
   useEffect(() => {
     return () => {
       controller.current?.abort('leave');
@@ -492,16 +510,7 @@ const ChatBox = (
     };
   }, [router.query]);
 
-  useEffect(() => {
-    event.on('guideClick', ({ text }: { text: string }) => {
-      if (!text) return;
-      handleSubmit((data) => sendPrompt(data, text))();
-    });
-
-    return () => {
-      event.off('guideClick');
-    };
-  }, [handleSubmit, sendPrompt]);
+  // page destroy and abort request
   useEffect(() => {
     const listen = () => {
       cancelBroadcast();
@@ -513,8 +522,22 @@ const ChatBox = (
     };
   }, []);
 
+  // add guide text listener
+  useEffect(() => {
+    event.on('guideClick', ({ text }: { text: string }) => {
+      if (!text) return;
+      handleSubmit((data) => sendPrompt(data, text))();
+    });
+
+    return () => {
+      event.off('guideClick');
+    };
+  }, [handleSubmit, sendPrompt]);
+
   return (
     <Flex flexDirection={'column'} h={'100%'}>
+      <Script src="/js/html2pdf.bundle.min.js" strategy="lazyOnload"></Script>
+
       <Box ref={ChatBoxRef} flex={'1 0 0'} h={0} w={'100%'} overflow={'overlay'} px={[4, 0]} pb={3}>
         <Box id="chat-container" maxW={['100%', '92%']} h={'100%'} mx={'auto'}>
           {showEmpty && <Empty />}
@@ -616,7 +639,7 @@ const ChatBox = (
                         justifyContent={'flex-end'}
                         mr={3}
                       >
-                        <MyTooltip label={'复制'}>
+                        <MyTooltip label={t('common.Copy')}>
                           <MyIcon
                             {...controlIconStyle}
                             name={'copy'}
@@ -624,8 +647,18 @@ const ChatBox = (
                             onClick={() => onclickCopy(item.value)}
                           />
                         </MyTooltip>
+                        {!!onDelMessage && (
+                          <MyTooltip label={t('chat.retry')}>
+                            <MyIcon
+                              {...controlIconStyle}
+                              name={'retryLight'}
+                              _hover={{ color: 'green.500' }}
+                              onClick={() => retryInput(index)}
+                            />
+                          </MyTooltip>
+                        )}
                         {onDelMessage && (
-                          <MyTooltip label={'删除'}>
+                          <MyTooltip label={t('common.Delete')}>
                             <MyIcon
                               {...controlIconStyle}
                               mr={0}

client/src/components/Icon/icons/fill/plus.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694331723034"
+    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5978"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+    <path
+        d="M512 70.283C267.486 70.283 69.268 268.046 69.268 512S267.486 953.717 512 953.717 954.732 755.954 954.732 512 756.514 70.283 512 70.283m223.045 488.321H558.603v176.442c0 25.738-20.866 46.604-46.604 46.604s-46.604-20.866-46.604-46.604V558.604H288.953c-25.738 0-46.604-20.866-46.604-46.604s20.866-46.604 46.604-46.604h176.442V288.954c0-25.738 20.866-46.604 46.604-46.604s46.604 20.866 46.604 46.604v176.442h176.442c25.738 0 46.604 20.866 46.604 46.604s-20.866 46.604-46.604 46.604z"
+        p-id="5979"></path>
+</svg>

client/src/components/Icon/icons/light/retry.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694067364830"
+    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5118"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+    <path
+        d="M727.950222 274.773333l-55.296-9.329777a38.741333 38.741333 0 0 0-12.856889 76.344888l193.308445 32.597334c1.991111 0.113778 1.991111 0.113778 2.844444 0 2.275556 0.227556 4.266667 0.113778 7.850667-0.284445l0.682667-0.056889a28.216889 28.216889 0 0 0 5.632-0.967111c1.080889 0 1.080889 0 3.185777-0.568889a15.530667 15.530667 0 0 0 4.039111-2.332444l1.137778-0.796444 0.796445-0.398223a28.444444 28.444444 0 0 0 4.152889-2.730666 37.091556 37.091556 0 0 0 6.542222-6.826667l0.796444-0.967111c1.080889-1.422222 1.080889-1.422222 2.161778-3.128889a37.432889 37.432889 0 0 0 3.697778-9.557333c0.568889-1.194667 0.568889-1.194667 1.137778-3.128889 0.113778-1.763556 0.113778-1.763556 0-2.503111v0.910222a36.579556 36.579556 0 0 0-0.341334-10.24l-0.113778-0.967111a22.755556 22.755556 0 0 0-0.682666-3.982222c0-1.080889 0-1.080889-0.568889-3.128889l-68.494222-183.751111a38.798222 38.798222 0 0 0-49.777778-22.755556 38.798222 38.798222 0 0 0-22.755556 49.777778l16.270223 43.804444A397.880889 397.880889 0 0 0 512 113.777778C292.408889 113.777778 113.777778 292.408889 113.777778 512s178.631111 398.222222 398.222222 398.222222 398.222222-178.631111 398.222222-398.222222a38.684444 38.684444 0 1 0-77.368889 0c0 176.924444-143.928889 320.853333-320.853333 320.853333S191.146667 688.924444 191.146667 512 335.075556 191.146667 512 191.146667c80.099556 0 157.070222 29.980444 215.950222 83.626666z"
+        p-id="5119"></path>
+</svg>

client/src/components/Icon/icons/light/rightArrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24">
+    <path d="M8.3 5.7a1 1 0 011.4-1.4l7.71 7.7-7.7 7.7a1 1 0 11-1.42-1.4l6.3-6.3-6.3-6.3z" fill-rule="nonzero"></path>
+</svg>

client/src/components/Icon/icons/light/search.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694224177076"
+    class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3984"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="64.125" height="64">
+    <path
+        d="M989.365124 873.455175c21.85764 24.973422 33.760499 46.831061 35.714294 65.567202 1.948078 18.730424-5.271103 37.076377-21.661831 55.026425-18.736141 21.075836-39.416072 31.030616-62.055515 29.858625-22.633727-1.171991-44.491366-10.344968-65.567202-27.513213L679.093265 806.715982c-35.128298 22.633727-72.786383 40.197876-112.989976 52.68673-40.197876 12.488855-82.545355 18.730424-127.036721 18.730424-60.882095 0-117.863745-11.512672-170.940663-34.536586-53.078347-23.029631-99.523509-54.446147-139.331197-94.252406-39.811976-39.811976-71.228492-86.25285-94.252406-139.329768C11.512672 556.93603 0 499.950092 0 439.066568c0-60.883524 11.512672-117.863745 34.542303-170.940663 23.023914-53.078347 54.44043-99.523509 94.252406-139.331197 39.807688-39.811976 86.25285-71.228492 139.331197-94.252406 53.076918-23.029631 110.058568-34.542303 170.940663-34.542303 60.883524 0 117.869462 11.512672 170.94638 34.542303 53.078347 23.023914 99.517792 54.44043 139.329768 94.252406 39.807688 39.807688 71.222775 86.25285 94.252406 139.331197 23.023914 53.076918 34.536586 110.057139 34.536586 170.940663 0 46.054974-6.633185 89.764536-19.903844 131.134403s-32.002511 79.619664-56.198417 114.742246l38.639985 38.639985c18.730424 18.730424 38.439889 38.249797 59.124108 58.543829s39.61188 39.416072 56.784413 57.371837C973.754771 857.448917 984.680017 868.771497 989.365124 873.455175L989.365124 873.455175zM443.751675 731.779995c40.588063 0 78.83786-7.609369 114.742246-22.829535 35.904385-15.224454 67.13081-36.105911 93.66641-62.641511 26.541317-26.541317 47.422774-57.762025 62.641511-93.66641 15.218737-35.910102 22.835252-74.154183 22.835252-114.747963 0-40.589492-7.615086-78.832143-22.835252-114.742246-15.218737-35.905815-36.100194-67.125093-62.641511-93.667839-26.5356-26.5356-57.762025-47.415628-93.66641-62.641511-35.904385-15.218737-74.154183-22.828106-114.742246-22.828106-40.589492 0-78.83929 7.609369-114.743675 22.828106-35.904385 15.225883-67.129381 36.105911-93.66641 62.641511-26.541317 26.542747-47.422774 57.762025-62.641511 93.667839-15.218737 35.910102-22.829535 74.152753-22.829535 114.742246 0 40.59378 7.610798 78.83786 22.829535 114.747963 15.218737 35.904385 36.100194 67.125093 62.641511 93.66641 26.53703 26.5356 57.762025 47.417057 93.66641 62.641511C364.912385 724.170627 403.162183 731.779995 443.751675 731.779995L443.751675 731.779995zM443.751675 731.779995"
+        p-id="3985"></path>
+</svg>

client/src/components/Icon/index.tsx

@@ -79,7 +79,11 @@ const map = {
   promotionLight: require('./icons/light/promotion.svg').default,
   logsLight: require('./icons/light/logs.svg').default,
   badLight: require('./icons/light/bad.svg').default,
-  markLight: require('./icons/light/mark.svg').default
+  markLight: require('./icons/light/mark.svg').default,
+  retryLight: require('./icons/light/retry.svg').default,
+  rightArrowLight: require('./icons/light/rightArrow.svg').default,
+  searchLight: require('./icons/light/search.svg').default,
+  plusFill: require('./icons/fill/plus.svg').default
 };
 
 export type IconName = keyof typeof map;

client/src/components/MyInput/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Flex, Input, InputProps } from '@chakra-ui/react';
+
+interface Props extends InputProps {
+  leftIcon?: React.ReactNode;
+}
+
+const MyInput = ({ leftIcon, ...props }: Props) => {
+  return (
+    <Flex position={'relative'} alignItems={'center'}>
+      <Input w={'100%'} pl={leftIcon ? '30px' : 3} {...props} />
+      {leftIcon && (
+        <Flex
+          alignItems={'center'}
+          position={'absolute'}
+          left={3}
+          w={'20px'}
+          zIndex={10}
+          transform={'translateY(1.5px)'}
+        >
+          {leftIcon}
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default MyInput;

client/src/components/MyMenu/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Menu, MenuList, MenuItem } from '@chakra-ui/react';
+
+interface Props {
+  width: number;
+  offset?: [number, number];
+  Button: React.ReactNode;
+  menuList: {
+    isActive?: boolean;
+    child: React.ReactNode;
+    onClick: () => void;
+  }[];
+}
+
+const MyMenu = ({ width, offset = [0, 10], Button, menuList }: Props) => {
+  const menuItemStyles = {
+    borderRadius: 'sm',
+    py: 3,
+    display: 'flex',
+    alignItems: 'center',
+    _hover: {
+      backgroundColor: 'myWhite.600',
+      color: 'hover.blue'
+    }
+  };
+
+  return (
+    <Menu offset={offset} autoSelect={false} isLazy>
+      {Button}
+      <MenuList
+        minW={`${width}px !important`}
+        p={'6px'}
+        border={'1px solid #fff'}
+        boxShadow={'0px 2px 4px rgba(161, 167, 179, 0.25), 0px 0px 1px rgba(121, 141, 159, 0.25);'}
+      >
+        {menuList.map((item, i) => (
+          <MenuItem
+            key={i}
+            {...menuItemStyles}
+            onClick={item.onClick}
+            color={item.isActive ? 'hover.blue' : ''}
+          >
+            {item.child}
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default MyMenu;