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/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>
-        <span className={styles.appName}>RAGFlow</span>
+        <img src="/logo.svg" alt="" className={styles.appIcon} />
+        <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')}>
-        <Button
-          type="text"
-          className={styles.iconButton}
-          onClick={onShowConnectToKnowledgeModal}
-        >
-          <LinkOutlined size={20} />
-        </Button>
-      </Tooltip>
+      {isKnowledgeBase || (
+        <Tooltip title={t('addToKnowledge')}>
+          <Button
+            type="text"
+            className={styles.iconButton}
+            onClick={onShowConnectToKnowledgeModal}
+          >
+            <LinkOutlined size={20} />
+          </Button>
+        </Tooltip>
+      )}
 
-      <Tooltip title={t('rename', { keyPrefix: 'common' })}>
-        <Button
-          type="text"
-          disabled={beingUsed}
-          onClick={onShowRenameModal}
-          className={styles.iconButton}
-        >
-          <EditOutlined size={20} />
-        </Button>
-      </Tooltip>
-      <Tooltip title={t('delete', { keyPrefix: 'common' })}>
-        <Button
-          type="text"
-          disabled={beingUsed}
-          onClick={handleRemoveFile}
-          className={styles.iconButton}
-        >
-          <DeleteOutlined size={20} />
-        </Button>
-      </Tooltip>
+      {isKnowledgeBase || (
+        <Tooltip title={t('rename', { keyPrefix: 'common' })}>
+          <Button
+            type="text"
+            disabled={beingUsed}
+            onClick={onShowRenameModal}
+            className={styles.iconButton}
+          >
+            <EditOutlined size={20} />
+          </Button>
+        </Tooltip>
+      )}
+      {isKnowledgeBase || (
+        <Tooltip title={t('delete', { keyPrefix: 'common' })}>
+          <Button
+            type="text"
+            disabled={beingUsed}
+            onClick={handleRemoveFile}
+            className={styles.iconButton}
+          >
+            <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
-          menu={{ items }}
-          placement="bottom"
-          arrow={false}
-          disabled={disabled}
-        >
-          <Button>
-            <Space>
-              <b> {t('bulk')}</b>
-              <DownOutlined />
-            </Space>
-          </Button>
-        </Dropdown>
+        {isKnowledgeBase || (
+          <Dropdown
+            menu={{ items }}
+            placement="bottom"
+            arrow={false}
+            disabled={disabled}
+          >
+            <Button>
+              <Space>
+                <b> {t('bulk')}</b>
+                <DownOutlined />
+              </Space>
+            </Button>
+          </Dropdown>
+        )}
         <Input
           placeholder={t('searchFiles')}
           value={searchString}
@@ -150,11 +153,13 @@ const FileToolbar = ({
           prefix={<SearchOutlined />}
         />
 
-        <Dropdown menu={{ items: actionItems }} trigger={['click']}>
-          <Button type="primary" icon={<PlusOutlined />}>
-            {t('addFile')}
-          </Button>
-        </Dropdown>
+        {isKnowledgeBase || (
+          <Dropdown menu={{ items: actionItems }} trigger={['click']}>
+            <Button type="primary" icon={<PlusOutlined />}>
+              {t('addFile')}
+            </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());