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)
2025-05-29 17:45:33 +08:00 · 2024-05-11 16:03:07 +08:00 · 2024-05-11 16:03:07 +08:00 · 91b4a18c47
commit 91b4a18c47
parent 33eaf6fa2e
12 changed files with 104 additions and 83 deletions
--- a/web/.umirc.ts
+++ b/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' },
    },
--- a/web/src/assets/logo.png
+++ b/web/src/assets/logo.png
--- a/web/src/assets/svg/logo.svg
+++ b/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>
--- a/web/src/conf.json
+++ b/web/src/conf.json
@ -0,0 +1,3 @@
+{
+  "appName": "RAGFlow"
+}
--- a/web/src/hooks/logicHooks.ts
+++ b/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;
+};
--- a/web/src/interfaces/database/file-manager.ts
+++ b/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 {
--- a/web/src/layouts/components/header/index.less
+++ b/web/src/layouts/components/header/index.less
@ -18,6 +18,7 @@

 .appIcon {
  vertical-align: middle;
+  max-width: 36px;
 }

 .appName {
--- a/web/src/layouts/components/header/index.tsx
+++ b/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
--- a/web/src/pages/file-manager/action-cell/index.tsx
+++ b/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,6 +68,7 @@ const ActionCell = ({

  return (
    <Space size={0}>
+      {isKnowledgeBase || (
        <Tooltip title={t('addToKnowledge')}>
          <Button
            type="text"
@ -76,7 +78,9 @@ const ActionCell = ({
            <LinkOutlined size={20} />
          </Button>
        </Tooltip>
+      )}

+      {isKnowledgeBase || (
        <Tooltip title={t('rename', { keyPrefix: 'common' })}>
          <Button
            type="text"
@ -87,6 +91,8 @@ const ActionCell = ({
            <EditOutlined size={20} />
          </Button>
        </Tooltip>
+      )}
+      {isKnowledgeBase || (
        <Tooltip title={t('delete', { keyPrefix: 'common' })}>
          <Button
            type="text"
@ -97,6 +103,7 @@ const ActionCell = ({
            <DeleteOutlined size={20} />
          </Button>
        </Tooltip>
+      )}
      {record.type !== 'folder' && (
        <Tooltip title={t('download', { keyPrefix: 'common' })}>
          <Button
--- a/web/src/pages/file-manager/connect-to-knowledge-modal/index.tsx
+++ b/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>
--- a/web/src/pages/file-manager/file-toolbar.tsx
+++ b/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,6 +129,7 @@ const FileToolbar = ({
    <div className={styles.filter}>
      <Breadcrumb items={breadcrumbItems} itemRender={itemRender} />
      <Space>
+        {isKnowledgeBase || (
          <Dropdown
            menu={{ items }}
            placement="bottom"
@ -141,6 +143,7 @@ const FileToolbar = ({
              </Space>
            </Button>
          </Dropdown>
+        )}
        <Input
          placeholder={t('searchFiles')}
          value={searchString}
@ -150,11 +153,13 @@ const FileToolbar = ({
          prefix={<SearchOutlined />}
        />

+        {isKnowledgeBase || (
          <Dropdown menu={{ items: actionItems }} trigger={['click']}>
            <Button type="primary" icon={<PlusOutlined />}>
              {t('addFile')}
            </Button>
          </Dropdown>
+        )}
      </Space>
    </div>
  );
--- a/web/src/utils/commonUtil.ts
+++ b/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());