feat: login with github and if it is not a pdf file, set the width of chunkContainer to 100% (#106)

* feat: if it is not a pdf file, set the width of chunkContainer to 100%

* feat: login with github

web/src/hooks/authHook.ts

@@ -1,5 +1,6 @@
 import authorizationUtil from '@/utils/authorizationUtil';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import { useNavigate, useSearchParams } from 'umi';
 
 export const useAuth = () => {
   const [isLogin, setIsLogin] = useState(
@@ -8,3 +9,28 @@ export const useAuth = () => {
 
   return { isLogin };
 };
+
+export const useLoginWithGithub = () => {
+  const [currentQueryParameters, setSearchParams] = useSearchParams();
+  const error = currentQueryParameters.get('error');
+  const newQueryParameters: URLSearchParams = useMemo(
+    () => new URLSearchParams(currentQueryParameters.toString()),
+    [currentQueryParameters],
+  );
+  const navigate = useNavigate();
+
+  if (error) {
+    navigate('/login');
+    newQueryParameters.delete('error');
+    setSearchParams(newQueryParameters);
+    return;
+  }
+
+  const auth = currentQueryParameters.get('auth');
+
+  if (auth) {
+    authorizationUtil.setAuthorization(auth);
+    newQueryParameters.delete('auth');
+    setSearchParams(newQueryParameters);
+  }
+};

web/src/layouts/index.tsx

@@ -4,6 +4,7 @@ import { Outlet } from 'umi';
 import '../locales/config';
 import Header from './components/header';
 
+import { useLoginWithGithub } from '@/hooks/authHook';
 import styles from './index.less';
 
 const { Content } = Layout;
@@ -13,6 +14,8 @@ const App: React.FC = () => {
     token: { colorBgContainer, borderRadiusLG },
   } = theme.useToken();
 
+  useLoginWithGithub();
+
   return (
     <Layout className={styles.layout}>
       <Layout>

web/src/pages/add-knowledge/components/knowledge-chunk/index.less

@@ -16,6 +16,10 @@
     width: 60%;
   }
 
+  .pageWrapper {
+    width: 100%;
+  }
+
   .pageContent {
     flex: 1;
     width: 100%;
@@ -36,6 +40,10 @@
     height: calc(100vh - 332px);
   }
 
+  .chunkOtherContainer {
+    width: 100%;
+  }
+
   .pageFooter {
     padding-top: 10px;
     height: 32px;

web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx

@@ -1,19 +1,19 @@
+import { useDeleteChunkByIds } from '@/hooks/knowledgeHook';
 import { getOneNamespaceEffectsLoading } from '@/utils/storeUtil';
 import type { PaginationProps } from 'antd';
 import { Divider, Flex, Pagination, Space, Spin, message } from 'antd';
 import { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSearchParams, useSelector } from 'umi';
-import CreatingModal from './components/chunk-creating-modal';
-
-import { useDeleteChunkByIds } from '@/hooks/knowledgeHook';
 import ChunkCard from './components/chunk-card';
+import CreatingModal from './components/chunk-creating-modal';
 import ChunkToolBar from './components/chunk-toolbar';
 // import DocumentPreview from './components/document-preview';
+import classNames from 'classnames';
 import DocumentPreview from './components/document-preview/preview';
 import { useHandleChunkCardClick, useSelectDocumentInfo } from './hooks';
-import styles from './index.less';
 import { ChunkModelState } from './model';
 
+import styles from './index.less';
 interface PayloadType {
   doc_id: string;
   keywords?: string;
@@ -165,13 +165,18 @@ const Chunk = () => {
         ></ChunkToolBar>
         <Divider></Divider>
         <Flex flex={1} gap={'middle'}>
-          <Flex vertical className={isPdf ? styles.pagePdfWrapper : ''}>
+          <Flex
+            vertical
+            className={isPdf ? styles.pagePdfWrapper : styles.pageWrapper}
+          >
             <div className={styles.pageContent}>
               <Spin spinning={loading} className={styles.spin} size="large">
                 <Space
                   direction="vertical"
                   size={'middle'}
-                  className={styles.chunkContainer}
+                  className={classNames(styles.chunkContainer, {
+                    [styles.chunkOtherContainer]: !isPdf,
+                  })}
                 >
                   {data.map((item) => (
                     <ChunkCard
@@ -200,6 +205,7 @@ const Chunk = () => {
                 pageSize={pagination.pageSize}
                 pageSizeOptions={[10, 30, 60, 90]}
                 current={pagination.current}
+                size={'small'}
                 total={total}
               />
             </div>

web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx

@@ -55,7 +55,7 @@ const TestingControl = ({ form, handleTesting }: IProps) => {
         >
           <SimilaritySlider></SimilaritySlider>
           <Form.Item<FieldType> label="Top k" name={'top_k'}>
-            <Slider marks={{ 0: 0, 2048: 2048 }} defaultValue={0} max={2048} />
+            <Slider marks={{ 0: 0, 2048: 2048 }} max={2048} />
           </Form.Item>
           <Card size="small" title="Test text">
             <Form.Item<FieldType>

web/src/pages/login/index.tsx

@@ -152,7 +152,7 @@ const Login = () => {
             </Button>
             {title === 'login' && (
               <>
-                <Button
+                {/* <Button
                   block
                   size="large"
                   onClick={toGoogle}
@@ -165,7 +165,7 @@ const Login = () => {
                     />
                     Sign in with Google
                   </div>
-                </Button>
+                </Button> */}
                 <Button
                   block
                   size="large"