perf: mark ux

labring · Mar 24, 2024 · b6b5c0b · b6b5c0b
1 parent 1315965
commit b6b5c0b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 39 deletions.
diff --git a/projects/app/src/components/ChatBox/SelectMarkCollection.tsx b/projects/app/src/components/ChatBox/SelectMarkCollection.tsx
@@ -32,8 +32,6 @@ const SelectMarkCollection = ({
 }) => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const [selectedDatasetId, setSelectedDatasetId] = useState<string>();
-  const [selectedDatasetCollectionIds, setSelectedDatasetCollectionIds] = useState<string[]>([]);
   const { paths, setParentId, datasets, isFetching } = useDatasetSelect();
 
   return (
@@ -45,17 +43,18 @@ const SelectMarkCollection = ({
           paths={paths}
           onClose={onClose}
           setParentId={setParentId}
+          isLoading={isFetching}
           tips={t('core.chat.Select dataset Desc')}
         >
           <ModalBody flex={'1 0 0'} overflowY={'auto'}>
             <Grid
+              display={'grid'}
               gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)', 'repeat(3,1fr)']}
               gridGap={3}
               userSelect={'none'}
             >
               {datasets.map((item) =>
                 (() => {
-                  const selected = selectedDatasetId === item._id;
                   return (
                     <Card
                       key={item._id}
@@ -67,16 +66,11 @@ const SelectMarkCollection = ({
                       _hover={{
                         boxShadow: 'md'
                       }}
-                      {...(selected
-                        ? {
-                            bg: 'primary.200'
-                          }
-                        : {})}
                       onClick={() => {
                         if (item.type === DatasetTypeEnum.folder) {
                           setParentId(item._id);
                         } else {
-                          setSelectedDatasetId(item._id);
+                          setAdminMarkData({ ...adminMarkData, datasetId: item._id });
                         }
                       }}
                     >
@@ -104,29 +98,21 @@ const SelectMarkCollection = ({
               </Flex>
             )}
           </ModalBody>
-          <ModalFooter>
-            <Button
-              isLoading={isFetching}
-              isDisabled={!selectedDatasetId}
-              onClick={() => {
-                setAdminMarkData({ ...adminMarkData, datasetId: selectedDatasetId });
-              }}
-            >
-              {t('common.Next Step')}
-            </Button>
-          </ModalFooter>
         </DatasetSelectModal>
       )}
 
       {/* select collection */}
-      {adminMarkData.datasetId && !adminMarkData.collectionId && (
+      {adminMarkData.datasetId && (
         <SelectCollections
           datasetId={adminMarkData.datasetId}
           type={'collection'}
           title={t('dataset.collections.Select One Collection To Store')}
           onClose={onClose}
           onChange={({ collectionIds }) => {
-            setSelectedDatasetCollectionIds(collectionIds);
+            setAdminMarkData({
+              ...adminMarkData,
+              collectionId: collectionIds[0]
+            });
           }}
           CustomFooter={
             <ModalFooter>
@@ -142,17 +128,6 @@ const SelectMarkCollection = ({
               >
                 {t('common.Last Step')}
               </Button>
-              <Button
-                isDisabled={selectedDatasetCollectionIds.length === 0}
-                onClick={() => {
-                  setAdminMarkData({
-                    ...adminMarkData,
-                    collectionId: selectedDatasetCollectionIds[0]
-                  });
-                }}
-              >
-                {t('common.Next Step')}
-              </Button>
             </ModalFooter>
           }
         />
@@ -161,7 +136,12 @@ const SelectMarkCollection = ({
       {/* input data */}
       {adminMarkData.datasetId && adminMarkData.collectionId && (
         <InputDataModal
-          onClose={onClose}
+          onClose={() => {
+            setAdminMarkData({
+              ...adminMarkData,
+              collectionId: undefined
+            });
+          }}
           collectionId={adminMarkData.collectionId}
           dataId={adminMarkData.dataId}
           defaultValue={{

diff --git a/projects/app/src/components/ChatBox/index.tsx b/projects/app/src/components/ChatBox/index.tsx
@@ -652,7 +652,7 @@ const ChatBox = (
         } catch (error) {}
       };
     },
-    [appId, chatId, feedbackType, outLinkUid, shareId]
+    [appId, chatId, feedbackType, outLinkUid, shareId, teamId, teamToken]
   );
   const onCloseUserLike = useCallback(
     (chat: ChatSiteItemType) => {
@@ -676,7 +676,7 @@ const ChatBox = (
         });
       };
     },
-    [appId, chatId, feedbackType]
+    [appId, chatId, feedbackType, teamId, teamToken]
   );
   const onADdUserDislike = useCallback(
     (chat: ChatSiteItemType) => {
@@ -713,7 +713,7 @@ const ChatBox = (
         return () => setFeedbackId(chat.dataId);
       }
     },
-    [appId, chatId, feedbackType, outLinkUid, shareId]
+    [appId, chatId, feedbackType, outLinkUid, shareId, teamId, teamToken]
   );
   const onReadUserDislike = useCallback(
     (chat: ChatSiteItemType) => {
@@ -938,7 +938,7 @@ const ChatBox = (
                             icon="core/app/markLight"
                             text={t('core.chat.Admin Mark Content')}
                           />
-                          <Box whiteSpace={'pre'}>
+                          <Box whiteSpace={'pre-wrap'}>
                             <Box color={'black'}>{item.adminFeedback.q}</Box>
                             <Box color={'myGray.600'}>{item.adminFeedback.a}</Box>
                           </Box>

diff --git a/projects/app/src/components/core/dataset/SelectModal.tsx b/projects/app/src/components/core/dataset/SelectModal.tsx
@@ -5,6 +5,7 @@ import React, { Dispatch, useMemo, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Box } from '@chakra-ui/react';
 import ParentPaths from '@/components/common/ParentPaths';
+import MyBox from '@/components/common/MyBox';
 
 type PathItemType = {
   parentId: string;
@@ -17,13 +18,15 @@ const DatasetSelectContainer = ({
   paths,
   onClose,
   tips,
+  isLoading,
   children
 }: {
   isOpen: boolean;
   setParentId: Dispatch<string>;
   paths: PathItemType[];
   onClose: () => void;
   tips?: string | null;
+  isLoading?: boolean;
   children: React.ReactNode;
 }) => {
   const { t } = useTranslation();
@@ -57,7 +60,9 @@ const DatasetSelectContainer = ({
       maxW={['90vw', '900px']}
       isCentered
     >
-      {children}
+      <MyBox isLoading={isLoading} h={'100%'}>
+        {children}
+      </MyBox>
     </MyModal>
   );
 };