Make the app name configurable even after the project is built (#731)

### What problem does this PR solve?

Make the app name configurable even after the project is built #730 

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/.umirc.ts

@@ -1,7 +1,9 @@
 import { defineConfig } from 'umi';
+import { appName } from './src/conf.json';
 import routes from './src/routes';
 
 export default defineConfig({
+  title: appName,
   outputPath: 'dist',
   // alias: { '@': './src' },
   npmClient: 'npm',
@@ -25,9 +27,10 @@ export default defineConfig({
     },
   },
   devtool: 'source-map',
+  copy: ['src/conf.json'],
   proxy: {
     '/v1': {
-      target: '',
+      target: 'http://123.60.95.134:9380/',
       changeOrigin: true,
       // pathRewrite: { '^/v1': '/v1' },
     },

web/src/assets/svg/logo.svg

@@ -1,29 +0,0 @@
-<svg width="32" height="34" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M3.43265 20.7677C4.15835 21.5062 4.15834 22.7035 3.43262 23.4419L3.39546 23.4797C2.66974 24.2182 1.49312 24.2182 0.767417 23.4797C0.0417107 22.7412 0.0417219 21.544 0.767442 20.8055L0.804608 20.7677C1.53033 20.0292 2.70694 20.0293 3.43265 20.7677Z"
-        fill="#B2DDFF" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M12.1689 21.3375C12.8933 22.0773 12.8912 23.2746 12.1641 24.0117L7.01662 29.2307C6.2896 29.9678 5.11299 29.9657 4.38859 29.2259C3.66419 28.4861 3.66632 27.2888 4.39334 26.5517L9.54085 21.3327C10.2679 20.5956 11.4445 20.5977 12.1689 21.3375Z"
-        fill="#53B1FD" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M19.1551 30.3217C19.7244 29.4528 20.8781 29.218 21.7321 29.7973L21.8436 29.8729C22.6975 30.4522 22.9283 31.6262 22.359 32.4952C21.7897 33.3641 20.6359 33.5989 19.782 33.0196L19.6705 32.944C18.8165 32.3647 18.5858 31.1907 19.1551 30.3217Z"
-        fill="#B2DDFF" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M31.4184 20.6544C32.1441 21.3929 32.1441 22.5902 31.4184 23.3286L28.8911 25.9003C28.1654 26.6388 26.9887 26.6388 26.263 25.9003C25.5373 25.1619 25.5373 23.9646 26.263 23.2261L28.7903 20.6544C29.516 19.916 30.6927 19.916 31.4184 20.6544Z"
-        fill="#53B1FD" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M31.4557 11.1427C32.1814 11.8812 32.1814 13.0785 31.4557 13.8169L12.7797 32.8209C12.054 33.5594 10.8774 33.5594 10.1517 32.8209C9.42599 32.0825 9.42599 30.8852 10.1517 30.1467L28.8277 11.1427C29.5534 10.4043 30.73 10.4043 31.4557 11.1427Z"
-        fill="#1570EF" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M27.925 5.29994C28.6508 6.0384 28.6508 7.23568 27.925 7.97414L17.184 18.9038C16.4583 19.6423 15.2817 19.6423 14.556 18.9038C13.8303 18.1653 13.8303 16.9681 14.556 16.2296L25.297 5.29994C26.0227 4.56148 27.1993 4.56148 27.925 5.29994Z"
-        fill="#1570EF" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M22.256 1.59299C22.9822 2.33095 22.983 3.52823 22.2578 4.26718L8.45055 18.3358C7.72533 19.0748 6.54871 19.0756 5.82251 18.3376C5.09631 17.5996 5.09552 16.4024 5.82075 15.6634L19.6279 1.59478C20.3532 0.855827 21.5298 0.855022 22.256 1.59299Z"
-        fill="#1570EF" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M8.58225 6.09619C9.30671 6.83592 9.30469 8.0332 8.57772 8.77038L3.17006 14.2541C2.4431 14.9913 1.26649 14.9893 0.542025 14.2495C-0.182438 13.5098 -0.180413 12.3125 0.546548 11.5753L5.95421 6.09159C6.68117 5.3544 7.85778 5.35646 8.58225 6.09619Z"
-        fill="#53B1FD" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M11.893 0.624023C12.9193 0.624023 13.7513 1.47063 13.7513 2.51497V2.70406C13.7513 3.7484 12.9193 4.59501 11.893 4.59501C10.8667 4.59501 10.0347 3.7484 10.0347 2.70406V2.51497C10.0347 1.47063 10.8667 0.624023 11.893 0.624023Z"
-        fill="#B2DDFF" />
-</svg>

web/src/conf.json

@@ -0,0 +1,3 @@
+{
+  "appName": "RAGFlow"
+}

web/src/hooks/logicHooks.ts

@@ -3,7 +3,8 @@ import { Pagination } from '@/interfaces/common';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
 import { PaginationProps } from 'antd';
-import { useCallback, useMemo, useState } from 'react';
+import axios from 'axios';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'umi';
 import { useSetModalState, useTranslate } from './commonHooks';
@@ -113,3 +114,22 @@ export const useSetPagination = (namespace: string) => {
 
   return setPagination;
 };
+
+export interface AppConf {
+  appName: string;
+}
+
+export const useFetchAppConf = () => {
+  const [appConf, setAppConf] = useState<AppConf>({} as AppConf);
+  const fetchAppConf = useCallback(async () => {
+    const ret = await axios.get('/conf.json');
+
+    setAppConf(ret.data);
+  }, []);
+
+  useEffect(() => {
+    fetchAppConf();
+  }, [fetchAppConf]);
+
+  return appConf;
+};

web/src/interfaces/database/file-manager.ts

@@ -12,6 +12,7 @@ export interface IFile {
   type: string;
   update_date: string;
   update_time: number;
+  source_type: string;
 }
 
 export interface IFolder {

web/src/layouts/components/header/index.less

@@ -18,6 +18,7 @@
 
 .appIcon {
   vertical-align: middle;
+  max-width: 36px;
 }
 
 .appName {

web/src/layouts/components/header/index.tsx

@@ -1,7 +1,6 @@
 import { ReactComponent as StarIon } from '@/assets/svg/chat-star.svg';
 import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg';
 import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
-import { ReactComponent as Logo } from '@/assets/svg/logo.svg';
 import { useTranslate } from '@/hooks/commonHooks';
 import { useNavigateWithFromState } from '@/hooks/routeHook';
 import { Layout, Radio, Space, theme } from 'antd';
@@ -9,6 +8,7 @@ import { useCallback, useMemo } from 'react';
 import { useLocation } from 'umi';
 import Toolbar from '../right-toolbar';
 
+import { useFetchAppConf } from '@/hooks/logicHooks';
 import styles from './index.less';
 
 const { Header } = Layout;
@@ -20,6 +20,7 @@ const RagHeader = () => {
   const navigate = useNavigateWithFromState();
   const { pathname } = useLocation();
   const { t } = useTranslate('header');
+  const appConf = useFetchAppConf();
 
   const tagsData = useMemo(
     () => [
@@ -56,8 +57,8 @@ const RagHeader = () => {
       }}
     >
       <Space size={12} onClick={handleLogoClick} className={styles.logoWrapper}>
-        <Logo className={styles.appIcon}></Logo>
+        <img src="/logo.svg" alt="" className={styles.appIcon} />
-        <span className={styles.appName}>RAGFlow</span>
+        <span className={styles.appName}>{appConf.appName}</span>
       </Space>
       <Space size={[0, 8]} wrap>
         <Radio.Group

web/src/pages/file-manager/action-cell/index.tsx

@@ -44,6 +44,7 @@ const ActionCell = ({
     setSelectedRowKeys,
   );
   const extension = getExtension(record.name);
+  const isKnowledgeBase = record.source_type === 'knowledgebase';
 
   const onDownloadDocument = () => {
     downloadFile({
@@ -67,36 +68,42 @@ const ActionCell = ({
 
   return (
     <Space size={0}>
-      <Tooltip title={t('addToKnowledge')}>
+      {isKnowledgeBase || (
-        <Button
+        <Tooltip title={t('addToKnowledge')}>
-          type="text"
+          <Button
-          className={styles.iconButton}
+            type="text"
-          onClick={onShowConnectToKnowledgeModal}
+            className={styles.iconButton}
-        >
+            onClick={onShowConnectToKnowledgeModal}
-          <LinkOutlined size={20} />
+          >
-        </Button>
+            <LinkOutlined size={20} />
-      </Tooltip>
+          </Button>
+        </Tooltip>
+      )}
 
-      <Tooltip title={t('rename', { keyPrefix: 'common' })}>
+      {isKnowledgeBase || (
-        <Button
+        <Tooltip title={t('rename', { keyPrefix: 'common' })}>
-          type="text"
+          <Button
-          disabled={beingUsed}
+            type="text"
-          onClick={onShowRenameModal}
+            disabled={beingUsed}
-          className={styles.iconButton}
+            onClick={onShowRenameModal}
-        >
+            className={styles.iconButton}
-          <EditOutlined size={20} />
+          >
-        </Button>
+            <EditOutlined size={20} />
-      </Tooltip>
+          </Button>
-      <Tooltip title={t('delete', { keyPrefix: 'common' })}>
+        </Tooltip>
-        <Button
+      )}
-          type="text"
+      {isKnowledgeBase || (
-          disabled={beingUsed}
+        <Tooltip title={t('delete', { keyPrefix: 'common' })}>
-          onClick={handleRemoveFile}
+          <Button
-          className={styles.iconButton}
+            type="text"
-        >
+            disabled={beingUsed}
-          <DeleteOutlined size={20} />
+            onClick={handleRemoveFile}
-        </Button>
+            className={styles.iconButton}
-      </Tooltip>
+          >
+            <DeleteOutlined size={20} />
+          </Button>
+        </Tooltip>
+      )}
       {record.type !== 'folder' && (
         <Tooltip title={t('download', { keyPrefix: 'common' })}>
           <Button

web/src/pages/file-manager/connect-to-knowledge-modal/index.tsx

@@ -1,7 +1,8 @@
 import { useTranslate } from '@/hooks/commonHooks';
 import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
 import { IModalProps } from '@/interfaces/common';
-import { Form, Modal, Select, SelectProps } from 'antd';
+import { filterOptionsByInput } from '@/utils/commonUtil';
+import { Form, Modal, Select } from 'antd';
 import { useEffect } from 'react';
 
 const ConnectToKnowledgeModal = ({
@@ -15,7 +16,7 @@ const ConnectToKnowledgeModal = ({
   const { list, fetchList } = useFetchKnowledgeList();
   const { t } = useTranslate('fileManager');
 
-  const options: SelectProps['options'] = list?.map((item) => ({
+  const options = list?.map((item) => ({
     label: item.name,
     value: item.id,
   }));
@@ -46,9 +47,12 @@ const ConnectToKnowledgeModal = ({
           <Select
             mode="multiple"
             allowClear
+            showSearch
             style={{ width: '100%' }}
             placeholder={t('pleaseSelect')}
             options={options}
+            optionFilterProp="children"
+            filterOption={filterOptionsByInput}
           />
         </Form.Item>
       </Form>

web/src/pages/file-manager/file-toolbar.tsx

@@ -46,6 +46,7 @@ const FileToolbar = ({
   const { handleInputChange, searchString } = useHandleSearchChange();
   const breadcrumbItems = useSelectBreadcrumbItems();
   const { handleBreadcrumbClick } = useHandleBreadcrumbClick();
+  const isKnowledgeBase = breadcrumbItems.at(-1)?.title === '.knowledgebase';
 
   const itemRender: BreadcrumbProps['itemRender'] = (
     currentRoute,
@@ -128,19 +129,21 @@ const FileToolbar = ({
     <div className={styles.filter}>
       <Breadcrumb items={breadcrumbItems} itemRender={itemRender} />
       <Space>
-        <Dropdown
+        {isKnowledgeBase || (
-          menu={{ items }}
+          <Dropdown
-          placement="bottom"
+            menu={{ items }}
-          arrow={false}
+            placement="bottom"
-          disabled={disabled}
+            arrow={false}
-        >
+            disabled={disabled}
-          <Button>
+          >
-            <Space>
+            <Button>
-              <b> {t('bulk')}</b>
+              <Space>
-              <DownOutlined />
+                <b> {t('bulk')}</b>
-            </Space>
+                <DownOutlined />
-          </Button>
+              </Space>
-        </Dropdown>
+            </Button>
+          </Dropdown>
+        )}
         <Input
           placeholder={t('searchFiles')}
           value={searchString}
@@ -150,11 +153,13 @@ const FileToolbar = ({
           prefix={<SearchOutlined />}
         />
 
-        <Dropdown menu={{ items: actionItems }} trigger={['click']}>
+        {isKnowledgeBase || (
-          <Button type="primary" icon={<PlusOutlined />}>
+          <Dropdown menu={{ items: actionItems }} trigger={['click']}>
-            {t('addFile')}
+            <Button type="primary" icon={<PlusOutlined />}>
-          </Button>
+              {t('addFile')}
-        </Dropdown>
+            </Button>
+          </Dropdown>
+        )}
       </Space>
     </div>
   );

web/src/utils/commonUtil.ts

@@ -60,3 +60,8 @@ export const sortLLmFactoryListBySpecifiedOrder = (list: IFactory[]) => {
 
   return finalList;
 };
+
+export const filterOptionsByInput = (
+  input: string,
+  option: { label: string; value: string } | undefined,
+) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase());