perf: ui

ajavaer · Jun 10, 2023 · 6fd49b0 · 6fd49b0
1 parent e19ac56
commit 6fd49b0
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 119 deletions.
diff --git a/.gitignore b/.gitignore
@@ -28,5 +28,4 @@ next-env.d.ts
 platform.json
 testApi/
 local/
-.husky/
 dist/
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+if command -v npx >/dev/null 2>&1; then
+  npx lint-staged
+fi
diff --git a/client/src/components/Layout/navbar.tsx b/client/src/components/Layout/navbar.tsx
@@ -27,7 +27,7 @@ const Navbar = ({ unread }: { unread: number }) => {
         activeLink: ['/chat']
       },
       {
-        label: '我的应用',
+        label: '应用',
         icon: 'model',
         link: `/model?modelId=${lastModelId}`,
         activeLink: ['/model']
@@ -39,7 +39,7 @@ const Navbar = ({ unread }: { unread: number }) => {
         activeLink: ['/kb']
       },
       {
-        label: '应用市场',
+        label: '市场',
         icon: 'appStore',
         link: '/model/share',
         activeLink: ['/model/share']
@@ -61,14 +61,15 @@ const Navbar = ({ unread }: { unread: number }) => {
   );
 
   const itemStyles: any = {
-    mb: 3,
+    my: 3,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     cursor: 'pointer',
-    w: '60px',
-    h: '45px',
+    w: '54px',
+    h: '54px',
+    borderRadius: 'md',
     _hover: {
       color: '#ffffff'
     }
@@ -79,7 +80,7 @@ const Navbar = ({ unread }: { unread: number }) => {
       flexDirection={'column'}
       alignItems={'center'}
       pt={6}
-      backgroundColor={'#465069'}
+      backgroundImage={'linear-gradient(to bottom right,#465069,#000000)'}
       h={'100%'}
       w={'100%'}
       boxShadow={'4px 0px 4px 0px rgba(43, 45, 55, 0.01)'}
@@ -99,30 +100,26 @@ const Navbar = ({ unread }: { unread: number }) => {
       {/* 导航列表 */}
       <Box flex={1}>
         {navbarList.map((item) => (
-          <Tooltip
-            label={item.label}
-            key={item.label}
-            placement={'right'}
-            openDelay={100}
-            gutter={-10}
+          <Link
+            key={item.link}
+            as={NextLink}
+            href={item.link}
+            {...itemStyles}
+            {...(item.activeLink.includes(router.pathname)
+              ? {
+                  color: '#ffffff ',
+                  backgroundImage: 'linear-gradient(to bottom right, #2152d9 0%, #4e83fd 100%)'
+                }
+              : {
+                  color: '#9096a5',
+                  backgroundColor: 'transparent'
+                })}
           >
-            <Link
-              as={NextLink}
-              href={item.link}
-              {...itemStyles}
-              {...(item.activeLink.includes(router.pathname)
-                ? {
-                    color: '#ffffff ',
-                    backgroundImage: 'linear-gradient(270deg,#4e83fd,#3370ff)'
-                  }
-                : {
-                    color: '#9096a5',
-                    backgroundColor: 'transparent'
-                  })}
-            >
-              <MyIcon name={item.icon as any} width={'22px'} height={'22px'} />
-            </Link>
-          </Tooltip>
+            <MyIcon name={item.icon as any} width={'20px'} height={'20px'} />
+            <Box fontSize={'12px'} transform={'scale(0.9)'} mt={'5px'} lineHeight={1}>
+              {item.label}
+            </Box>
+          </Link>
         ))}
       </Box>
       {unread > 0 && (

diff --git a/client/src/constants/theme.ts b/client/src/constants/theme.ts
@@ -232,6 +232,10 @@ export const theme = extendTheme({
     xl: '1800px',
     '2xl': '2100px'
   },
+  active: {
+    activeBlueGradient: 'linear-gradient(120deg, #d6e8ff 0%, #f0f7ff 100%)',
+    hoverBlueGradient: 'linear-gradient(60deg, #f0f7ff 0%, #d6e8ff 100%)'
+  },
   components: {
     Modal: ModalTheme,
     Button,

diff --git a/client/src/constants/user.ts b/client/src/constants/user.ts
@@ -40,3 +40,8 @@ export const InformTypeMap = {
     label: '系统通知'
   }
 };
+
+export enum MyModelsTypeEnum {
+  my = 'my',
+  collection = 'collection'
+}
diff --git a/client/src/pages/api/openapi/kb/pushData.ts b/client/src/pages/api/openapi/kb/pushData.ts
@@ -7,6 +7,7 @@ import { withNextCors } from '@/service/utils/tools';
 import { TrainingModeEnum } from '@/constants/plugin';
 import { startQueue } from '@/service/utils/tools';
 import { PgClient } from '@/service/pg';
+import { modelToolMap } from '@/utils/plugin';
 
 type DateItemType = { a: string; q: string; source?: string };
 
@@ -21,6 +22,11 @@ export type Response = {
   insertLen: number;
 };
 
+const modeMaxToken = {
+  [TrainingModeEnum.index]: 700,
+  [TrainingModeEnum.qa]: 3300
+};
+
 export default withNextCors(async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
   try {
     const { kbId, data, mode, prompt } = req.body as Props;
@@ -68,7 +74,15 @@ export async function pushDataToKb({
 
   data.forEach((item) => {
     const text = item.q + item.a;
-    if (!set.has(text)) {
+
+    // count token
+    const token = modelToolMap['gpt-3.5-turbo'].countTokens({
+      messages: [{ obj: 'System', value: item.q }]
+    });
+
+    if (mode === TrainingModeEnum.qa && token > modeMaxToken[TrainingModeEnum.qa]) {
+      console.log('q is too long');
+    } else if (!set.has(text)) {
       filterData.push(item);
       set.add(text);
     }

diff --git a/client/src/pages/chat/components/History.tsx b/client/src/pages/chat/components/History.tsx
@@ -146,31 +146,26 @@ const PcSliderBar = ({
           )}
         </Box>
       )}
-
       {/* chat history */}
-      <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
+      <Box flex={'1 0 0'} h={0} overflow={'overlay'} userSelect={'none'}>
         {history.map((item) => (
           <Flex
-            position={'relative'}
             key={item._id}
+            position={'relative'}
             alignItems={'center'}
-            py={3}
-            pr={[0, 3]}
-            pl={[6, 3]}
+            p={3}
+            mb={[2, 0]}
             cursor={'pointer'}
             transition={'background-color .2s ease-in'}
-            borderLeft={['none', '5px solid transparent']}
-            userSelect={'none'}
             _hover={{
-              bg: ['', '#dee0e3']
+              backgroundImage: ['', theme.active.hoverBlueGradient]
             }}
             {...(item._id === chatId
               ? {
-                  bg: 'myGray.100 !important',
-                  borderLeftColor: 'myBlue.600 !important'
+                  backgroundImage: `${theme.active.activeBlueGradient}`
                 }
               : {
-                  bg: item.top ? 'myBlue.200' : ''
+                  bg: item.top ? 'myGray.200' : ''
                 })}
             onClick={() => {
               if (item._id === chatId) return;

diff --git a/client/src/pages/kb/components/KbList.tsx b/client/src/pages/kb/components/KbList.tsx
@@ -87,7 +87,7 @@ const KbList = ({ kbId }: { kbId: string }) => {
           />
         </Tooltip>
       </Flex>
-      <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
+      <Box flex={'1 0 0'} h={0} overflow={'overlay'} userSelect={'none'}>
         {kbs.map((item) => (
           <Flex
             key={item._id}
@@ -97,14 +97,12 @@ const KbList = ({ kbId }: { kbId: string }) => {
             mb={[2, 0]}
             cursor={'pointer'}
             transition={'background-color .2s ease-in'}
-            borderLeft={['', '5px solid transparent']}
             _hover={{
-              backgroundColor: ['', '#dee0e3']
+              backgroundImage: ['', theme.active.hoverBlueGradient]
             }}
             {...(kbId === item._id
               ? {
-                  backgroundColor: '#eff0f1',
-                  borderLeftColor: 'myBlue.600 !important'
+                  backgroundImage: `${theme.active.activeBlueGradient} !important`
                 }
               : {})}
             onClick={() => {