Theme switch support (infiniflow#3568)

### What problem does this PR solve? - [x] New Feature (non-breaking change which adds functionality) --------- Co-authored-by: Yingfeng <yingfeng.zhang@gmail.com> Co-authored-by: Jin Hai <haijin.chn@gmail.com>
isthaison · Dec 10, 2024 · d5a322a · d5a322a
1 parent 7d4f1c0
commit d5a322a
Show file tree

Hide file tree

Showing 85 changed files with 1,032 additions and 511 deletions.
diff --git a/.gitignore b/.gitignore
@@ -35,4 +35,6 @@ rag/res/deepdoc
 sdk/python/ragflow.egg-info/
 sdk/python/build/
 sdk/python/dist/
-sdk/python/ragflow_sdk.egg-info/
+sdk/python/ragflow_sdk.egg-info/
+huggingface.co/
+nltk_data/
diff --git a/docker/docker-compose-base.yml b/docker/docker-compose-base.yml
@@ -74,7 +74,7 @@ services:
     command:
       --max_connections=1000
       --character-set-server=utf8mb4
-      --collation-server=utf8mb4_general_ci
+      --collation-server=utf8mb4_unicode_ci
       --default-authentication-plugin=mysql_native_password
       --tls_version="TLSv1.2,TLSv1.3"
       --init-file /data/application/init.sql

diff --git a/rag/svr/task_executor.py b/rag/svr/task_executor.py
@@ -260,7 +260,7 @@ def build_chunks(task, progress_callback):
 
 def init_kb(row, vector_size: int):
     idxnm = search.index_name(row["tenant_id"])
-    return settings.docStoreConn.createIdx(idxnm, row["kb_id"], vector_size)
+    return settings.docStoreConn.createIdx(idxnm, row.get("kb_id",""), vector_size)
 
 
 def embedding(docs, mdl, parser_config=None, callback=None):

diff --git a/web/src/app.tsx b/web/src/app.tsx
@@ -1,7 +1,7 @@
 import i18n from '@/locales/config';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { App, ConfigProvider, ConfigProviderProps } from 'antd';
+import { App, ConfigProvider, ConfigProviderProps, theme } from 'antd';
 import enUS from 'antd/locale/en_US';
 import vi_VN from 'antd/locale/vi_VN';
 import zhCN from 'antd/locale/zh_CN';
@@ -14,7 +14,7 @@ import weekOfYear from 'dayjs/plugin/weekOfYear';
 import weekYear from 'dayjs/plugin/weekYear';
 import weekday from 'dayjs/plugin/weekday';
 import React, { ReactNode, useEffect, useState } from 'react';
-import { ThemeProvider } from './components/theme-provider';
+import { ThemeProvider, useTheme } from './components/theme-provider';
 import storage from './utils/authorization-util';
 
 dayjs.extend(customParseFormat);
@@ -35,7 +35,8 @@ const queryClient = new QueryClient();
 
 type Locale = ConfigProviderProps['locale'];
 
-const RootProvider = ({ children }: React.PropsWithChildren) => {
+function Root({ children }: React.PropsWithChildren) {
+  const { theme: themeragflow } = useTheme();
   const getLocale = (lng: string) =>
     AntLanguageMap[lng as keyof typeof AntLanguageMap] ?? enUS;
 
@@ -46,6 +47,28 @@ const RootProvider = ({ children }: React.PropsWithChildren) => {
     setLocal(getLocale(lng));
   });
 
+  return (
+    <>
+      <ConfigProvider
+        theme={{
+          token: {
+            fontFamily: 'Inter',
+          },
+          algorithm:
+            themeragflow === 'dark'
+              ? theme.darkAlgorithm
+              : theme.defaultAlgorithm,
+        }}
+        locale={locale}
+      >
+        <App> {children}</App>
+      </ConfigProvider>
+      <ReactQueryDevtools buttonPosition={'top-left'} />
+    </>
+  );
+}
+
+const RootProvider = ({ children }: React.PropsWithChildren) => {
   useEffect(() => {
     // Because the language is saved in the backend, a token is required to obtain the api. However, the login page cannot obtain the language through the getUserInfo api, so the language needs to be saved in localstorage.
     const lng = storage.getLanguage();
@@ -57,22 +80,11 @@ const RootProvider = ({ children }: React.PropsWithChildren) => {
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider defaultTheme="light" storageKey="ragflow-ui-theme">
-        <ConfigProvider
-          theme={{
-            token: {
-              fontFamily: 'Inter',
-            },
-          }}
-          locale={locale}
-        >
-          <App> {children}</App>
-        </ConfigProvider>
-        <ReactQueryDevtools buttonPosition={'top-left'} />
+        <Root>{children}</Root>
       </ThemeProvider>
     </QueryClientProvider>
   );
 };
-
 export function rootContainer(container: ReactNode) {
   return <RootProvider>{container}</RootProvider>;
 }
diff --git a/web/src/assets/icon/Icon.tsx b/web/src/assets/icon/Icon.tsx
diff --git a/web/src/assets/svg/api.svg b/web/src/assets/svg/api.svg
diff --git a/web/src/assets/svg/delete.svg b/web/src/assets/svg/delete.svg
diff --git a/web/src/assets/svg/prompt.svg b/web/src/assets/svg/prompt.svg
diff --git a/web/src/components/api-service/chat-overview-modal/index.less b/web/src/components/api-service/chat-overview-modal/index.less
@@ -16,4 +16,5 @@
 .apiLinkText {
   .linkText();
   margin: 0 !important;
+  background-color: rgba(255, 255, 255, 0.1);
 }
diff --git a/web/src/components/api-service/embed-modal/index.less b/web/src/components/api-service/embed-modal/index.less
@@ -4,5 +4,5 @@
 
 .codeText {
   padding: 10px;
-  background-color: #e8e8ea;
+  background-color: #ffffff09;
 }
diff --git a/web/src/components/editable-cell.tsx b/web/src/components/editable-cell.tsx
@@ -90,7 +90,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
         <Input ref={inputRef} onPressEnter={save} onBlur={save} />
       </Form.Item>
     ) : (
-      <div onClick={toggleEdit} className="truncate">
+      <div onClick={toggleEdit} className="editable-cell-value-wrap">
         <Text>{children}</Text>
       </div>
     );

diff --git a/web/src/components/highlight-markdown/index.less b/web/src/components/highlight-markdown/index.less
@@ -15,5 +15,5 @@
   white-space: break-spaces;
   background-color: rgba(129, 139, 152, 0.12);
   border-radius: 4px;
-  color: rgb(31, 35, 40);
+  color: var(--ant-color-text-base);
 }
diff --git a/web/src/components/indented-tree/indented-tree.tsx b/web/src/components/indented-tree/indented-tree.tsx
@@ -312,80 +312,96 @@ function fallbackRender({ error }: FallbackProps) {
 const IndentedTree = ({ data, show, style = {} }: IProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const graphRef = useRef<Graph | null>(null);
+  const assignIds = React.useCallback(function assignIds(
+    node: TreeData,
+    parentId: string = '',
+    index = 0,
+  ) {
+    if (!node.id) node.id = parentId ? `${parentId}-${index}` : 'root';
+    if (node.children) {
+      node.children.forEach((child, idx) => assignIds(child, node.id, idx));
+    }
+  }, []);
 
-  const render = useCallback(async (data: TreeData) => {
-    const graph: Graph = new Graph({
-      container: containerRef.current!,
-      x: 60,
-      node: {
-        type: 'indented',
-        style: {
-          size: (d) => [d.id.length * 6 + 10, 20],
-          labelBackground: (datum) => datum.id === rootId,
-          labelBackgroundRadius: 0,
-          labelBackgroundFill: '#576286',
-          labelFill: (datum) => (datum.id === rootId ? '#fff' : '#666'),
-          labelText: (d) => d.style?.labelText || d.id,
-          labelTextAlign: (datum) => (datum.id === rootId ? 'center' : 'left'),
-          labelTextBaseline: 'top',
-          color: (datum: any) => {
-            const depth = graph.getAncestorsData(datum.id, 'tree').length - 1;
-            return COLORS[depth % COLORS.length] || '#576286';
+  const render = useCallback(
+    async (data: TreeData) => {
+      const graph: Graph = new Graph({
+        container: containerRef.current!,
+        x: 60,
+        node: {
+          type: 'indented',
+          style: {
+            size: (d) => [d.id.length * 6 + 10, 20],
+            labelBackground: (datum) => datum.id === rootId,
+            labelBackgroundRadius: 0,
+            labelBackgroundFill: '#576286',
+            labelFill: (datum) => (datum.id === rootId ? '#fff' : '#666'),
+            labelText: (d) => d.style?.labelText || d.id,
+            labelTextAlign: (datum) =>
+              datum.id === rootId ? 'center' : 'left',
+            labelTextBaseline: 'top',
+            color: (datum: any) => {
+              const depth = graph.getAncestorsData(datum.id, 'tree').length - 1;
+              return COLORS[depth % COLORS.length] || '#576286';
+            },
           },
-        },
-        state: {
-          selected: {
-            lineWidth: 0,
-            labelFill: '#40A8FF',
-            labelBackground: true,
-            labelFontWeight: 'normal',
-            labelBackgroundFill: '#e8f7ff',
-            labelBackgroundRadius: 10,
+          state: {
+            selected: {
+              lineWidth: 0,
+              labelFill: '#40A8FF',
+              labelBackground: true,
+              labelFontWeight: 'normal',
+              labelBackgroundFill: '#e8f7ff',
+              labelBackgroundRadius: 10,
+            },
           },
         },
-      },
-      edge: {
-        type: 'indented',
-        style: {
-          radius: 16,
-          lineWidth: 2,
-          sourcePort: 'out',
-          targetPort: 'in',
-          stroke: (datum: any) => {
-            const depth = graph.getAncestorsData(datum.source, 'tree').length;
-            return COLORS[depth % COLORS.length] || 'black';
+        edge: {
+          type: 'indented',
+          style: {
+            radius: 16,
+            lineWidth: 2,
+            sourcePort: 'out',
+            targetPort: 'in',
+            stroke: (datum: any) => {
+              const depth = graph.getAncestorsData(datum.source, 'tree').length;
+              return COLORS[depth % COLORS.length] || 'black';
+            },
           },
         },
-      },
-      layout: {
-        type: 'indented',
-        direction: 'LR',
-        isHorizontal: true,
-        indent: 40,
-        getHeight: () => 20,
-        getVGap: () => 10,
-      },
-      behaviors: [
-        'scroll-canvas',
-        'collapse-expand-tree',
-        {
-          type: 'click-select',
-          enable: (event: any) =>
-            event.targetType === 'node' && event.target.id !== rootId,
+        layout: {
+          type: 'indented',
+          direction: 'LR',
+          isHorizontal: true,
+          indent: 40,
+          getHeight: () => 20,
+          getVGap: () => 10,
         },
-      ],
-    });
+        behaviors: [
+          'scroll-canvas',
+          'collapse-expand-tree',
+          {
+            type: 'click-select',
+            enable: (event: any) =>
+              event.targetType === 'node' && event.target.id !== rootId,
+          },
+        ],
+      });
 
-    if (graphRef.current) {
-      graphRef.current.destroy();
-    }
+      if (graphRef.current) {
+        graphRef.current.destroy();
+      }
 
-    graphRef.current = graph;
+      graphRef.current = graph;
 
-    graph?.setData(treeToGraphData(data));
+      assignIds(data);
 
-    graph?.render();
-  }, []);
+      graph?.setData(treeToGraphData(data));
+
+      graph?.render();
+    },
+    [assignIds],
+  );
 
   useEffect(() => {
     if (!isEmpty(data)) {

diff --git a/web/src/components/llm-setting-items/index.tsx b/web/src/components/llm-setting-items/index.tsx
@@ -269,7 +269,7 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
                     >
                       <Slider
                         className={styles.variableSlider}
-                        max={8192}
+                        max={128000}
                         disabled={disabled}
                       />
                     </Form.Item>
@@ -278,7 +278,7 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
                     <InputNumber
                       disabled={disabled}
                       className={styles.sliderInputNumber}
-                      max={8192}
+                      max={128000}
                       min={0}
                     />
                   </Form.Item>

diff --git a/web/src/components/message-input/index.less b/web/src/components/message-input/index.less
@@ -1,6 +1,6 @@
 .messageInputWrapper {
   margin-right: 20px;
-  background-color: #f5f5f8;
+  background-color: rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   :global(.ant-input-affix-wrapper) {
     border-bottom-right-radius: 0;