Theme switch support (#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>
2025-12-30 08:35:33 +08:00 · 2024-12-10 10:42:04 +07:00
parent 7d4f1c0645
commit d5a322a352
85 changed files with 1041 additions and 520 deletions
--- a/web/src/pages/flow/canvas/node/begin-node.tsx
+++ b/web/src/pages/flow/canvas/node/begin-node.tsx
@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import get from 'lodash/get';
@ -18,12 +19,16 @@ import styles from './index.less';
 export function BeginNode({ selected, data }: NodeProps<NodeData>) {
  const { t } = useTranslation();
  const query: BeginQuery[] = get(data, 'form.query', []);
-
+  const { theme } = useTheme();
  return (
    <section
-      className={classNames(styles.ragNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.ragNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        type="source"
--- a/web/src/pages/flow/canvas/node/categorize-node.tsx
+++ b/web/src/pages/flow/canvas/node/categorize-node.tsx
@ -1,4 +1,5 @@
 import LLMLabel from '@/components/llm-select/llm-label';
+import { useTheme } from '@/components/theme-provider';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
@ -11,12 +12,16 @@ import NodeHeader from './node-header';

 export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
  const { positions } = useBuildCategorizeHandlePositions({ data, id });
-
+  const { theme } = useTheme();
  return (
    <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        type="target"
--- a/web/src/pages/flow/canvas/node/generate-node.tsx
+++ b/web/src/pages/flow/canvas/node/generate-node.tsx
@ -1,4 +1,5 @@
 import LLMLabel from '@/components/llm-select/llm-label';
+import { useTheme } from '@/components/theme-provider';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
@ -17,12 +18,16 @@ export function GenerateNode({
 }: NodeProps<NodeData>) {
  const parameters: IGenerateParameter[] = get(data, 'form.parameters', []);
  const getLabel = useGetComponentLabelByValue(id);
-
+  const { theme } = useTheme();
  return (
    <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        id="c"
--- a/web/src/pages/flow/canvas/node/index.less
+++ b/web/src/pages/flow/canvas/node/index.less
@ -10,9 +10,11 @@
  width: 200px;
 }

+.dark {
+  background: rgb(63, 63, 63) !important;
+}
 .ragNode {
  .commonNode();
-
  .nodeName {
    font-size: 10px;
    color: black;
@ -95,7 +97,7 @@
  min-width: 140px;
  width: auto;
  height: 100%;
-  padding: 0;
+  padding: 8px;
  border-radius: 10px;
  min-height: 128px;
  .noteTitle {
@ -105,6 +107,13 @@
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
+  .noteTitleDark {
+    background-color: #edfcff;
+    font-size: 12px;
+    padding: 6px 6px 4px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
  .noteForm {
    margin-top: 4px;
    height: calc(100% - 50px);
--- a/web/src/pages/flow/canvas/node/index.tsx
+++ b/web/src/pages/flow/canvas/node/index.tsx
@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import classNames from 'classnames';
 import { Handle, NodeProps, Position } from 'reactflow';
 import { NodeData } from '../../interface';
@ -11,11 +12,16 @@ export function RagNode({
  isConnectable = true,
  selected,
 }: NodeProps<NodeData>) {
+  const { theme } = useTheme();
  return (
    <section
-      className={classNames(styles.ragNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.ragNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        id="c"
--- a/web/src/pages/flow/canvas/node/invoke-node.tsx
+++ b/web/src/pages/flow/canvas/node/invoke-node.tsx
@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
@ -15,12 +16,17 @@ export function InvokeNode({
  selected,
 }: NodeProps<NodeData>) {
  const { t } = useTranslation();
+  const { theme } = useTheme();
  const url = get(data, 'form.url');
  return (
    <section
-      className={classNames(styles.ragNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.ragNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        id="c"
--- a/web/src/pages/flow/canvas/node/keyword-node.tsx
+++ b/web/src/pages/flow/canvas/node/keyword-node.tsx
@ -1,4 +1,5 @@
 import LLMLabel from '@/components/llm-select/llm-label';
+import { useTheme } from '@/components/theme-provider';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { Handle, NodeProps, Position } from 'reactflow';
@ -13,11 +14,16 @@ export function KeywordNode({
  isConnectable = true,
  selected,
 }: NodeProps<NodeData>) {
+  const { theme } = useTheme();
  return (
    <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        id="c"
--- a/web/src/pages/flow/canvas/node/logic-node.tsx
+++ b/web/src/pages/flow/canvas/node/logic-node.tsx
@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import classNames from 'classnames';
 import { Handle, NodeProps, Position } from 'reactflow';
 import { NodeData } from '../../interface';
@ -11,11 +12,16 @@ export function LogicNode({
  isConnectable = true,
  selected,
 }: NodeProps<NodeData>) {
+  const { theme } = useTheme();
  return (
    <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        id="c"
--- a/web/src/pages/flow/canvas/node/message-node.tsx
+++ b/web/src/pages/flow/canvas/node/message-node.tsx
@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
@ -14,12 +15,16 @@ export function MessageNode({
  selected,
 }: NodeProps<NodeData>) {
  const messages: string[] = get(data, 'form.messages', []);
-
+  const { theme } = useTheme();
  return (
    <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        id="c"
--- a/web/src/pages/flow/canvas/node/note-node.tsx
+++ b/web/src/pages/flow/canvas/node/note-node.tsx
@ -5,6 +5,7 @@ import { NodeData } from '../../interface';
 import NodeDropdown from './dropdown';

 import SvgIcon from '@/components/svg-icon';
+import { useTheme } from '@/components/theme-provider';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@ -23,6 +24,7 @@ const controlStyle = {
 function NoteNode({ data, id }: NodeProps<NodeData>) {
  const { t } = useTranslation();
  const [form] = Form.useForm();
+  const { theme } = useTheme();

  const { name, handleNameBlur, handleNameChange } = useHandleNodeNameChange({
    id,
@ -48,10 +50,15 @@ function NoteNode({ data, id }: NodeProps<NodeData>) {
          }}
        ></SvgIcon>
      </NodeResizeControl>
-      <section className={styles.noteNode}>
+      <section
+        className={classNames(
+          styles.noteNode,
+          theme === 'dark' ? styles.dark : '',
+        )}
+      >
        <Flex
          justify={'space-between'}
-          className={classNames(styles.noteTitle, 'note-drag-handle')}
+          className={classNames('note-drag-handle')}
          align="center"
          gap={6}
        >
--- a/web/src/pages/flow/canvas/node/popover.tsx
+++ b/web/src/pages/flow/canvas/node/popover.tsx
@ -5,6 +5,7 @@ import JsonView from 'react18-json-view';
 import 'react18-json-view/src/style.css';
 import { useGetComponentLabelByValue, useReplaceIdWithText } from '../../hooks';

+import { useTheme } from '@/components/theme-provider';
 import {
  Popover,
  PopoverContent,
@ -29,6 +30,7 @@ export function NextNodePopover({ children, nodeId, name }: IProps) {
  const { t } = useTranslate('flow');

  const { data } = useFetchFlow();
+  const { theme } = useTheme();
  const component = useMemo(() => {
    return get(data, ['dsl', 'components', nodeId], {});
  }, [nodeId, data]);
@ -64,7 +66,16 @@ export function NextNodePopover({ children, nodeId, name }: IProps) {
        <div className="flex w-full gap-4 flex-col">
          <div className="flex flex-col space-y-1.5">
            <span className="font-semibold text-[14px]">{t('input')}</span>
-            <div className="bg-gray-100 p-1 rounded">
+            <div
+              style={
+                theme === 'dark'
+                  ? {
+                      backgroundColor: 'rgba(150, 150, 150, 0.2)',
+                    }
+                  : {}
+              }
+              className={`bg-gray-100 p-1 rounded`}
+            >
              <Table>
                <TableHeader>
                  <TableRow>
@ -85,7 +96,16 @@ export function NextNodePopover({ children, nodeId, name }: IProps) {
          </div>
          <div className="flex flex-col space-y-1.5">
            <span className="font-semibold text-[14px]">{t('output')}</span>
-            <div className="bg-gray-100 p-1 rounded">
+            <div
+              style={
+                theme === 'dark'
+                  ? {
+                      backgroundColor: 'rgba(150, 150, 150, 0.2)',
+                    }
+                  : {}
+              }
+              className="bg-gray-100 p-1 rounded"
+            >
              <JsonView
                src={replacedOutput}
                displaySize={30}
--- a/web/src/pages/flow/canvas/node/relevant-node.tsx
+++ b/web/src/pages/flow/canvas/node/relevant-node.tsx
@ -4,6 +4,7 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import { NodeData } from '../../interface';
 import { RightHandleStyle } from './handle-icon';

+import { useTheme } from '@/components/theme-provider';
 import { get } from 'lodash';
 import { useReplaceIdWithName } from '../../hooks';
 import styles from './index.less';
@ -13,12 +14,16 @@ export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
  const yes = get(data, 'form.yes');
  const no = get(data, 'form.no');
  const replaceIdWithName = useReplaceIdWithName();
-
+  const { theme } = useTheme();
  return (
    <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        type="target"
--- a/web/src/pages/flow/canvas/node/retrieval-node.tsx
+++ b/web/src/pages/flow/canvas/node/retrieval-node.tsx
@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { UserOutlined } from '@ant-design/icons';
 import { Avatar, Flex } from 'antd';
@ -17,6 +18,7 @@ export function RetrievalNode({
  selected,
 }: NodeProps<NodeData>) {
  const knowledgeBaseIds: string[] = get(data, 'form.kb_ids', []);
+  const { theme } = useTheme();
  const { list: knowledgeList } = useFetchKnowledgeList(true);
  const knowledgeBases = useMemo(() => {
    return knowledgeBaseIds.map((x) => {
@ -31,9 +33,13 @@ export function RetrievalNode({

  return (
    <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        id="c"
--- a/web/src/pages/flow/canvas/node/rewrite-node.tsx
+++ b/web/src/pages/flow/canvas/node/rewrite-node.tsx
@ -1,4 +1,5 @@
 import LLMLabel from '@/components/llm-select/llm-label';
+import { useTheme } from '@/components/theme-provider';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { Handle, NodeProps, Position } from 'reactflow';
@ -13,11 +14,16 @@ export function RewriteNode({
  isConnectable = true,
  selected,
 }: NodeProps<NodeData>) {
+  const { theme } = useTheme();
  return (
    <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        id="c"
--- a/web/src/pages/flow/canvas/node/switch-node.tsx
+++ b/web/src/pages/flow/canvas/node/switch-node.tsx
@ -1,3 +1,4 @@
+import { useTheme } from '@/components/theme-provider';
 import { Divider, Flex } from 'antd';
 import classNames from 'classnames';
 import { Handle, NodeProps, Position } from 'reactflow';
@ -55,12 +56,16 @@ const ConditionBlock = ({

 export function SwitchNode({ id, data, selected }: NodeProps<NodeData>) {
  const { positions } = useBuildSwitchHandlePositions({ data, id });
-
+  const { theme } = useTheme();
  return (
    <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        type="target"
--- a/web/src/pages/flow/canvas/node/template-node.tsx
+++ b/web/src/pages/flow/canvas/node/template-node.tsx
@ -7,6 +7,7 @@ import { IGenerateParameter, NodeData } from '../../interface';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import NodeHeader from './node-header';

+import { useTheme } from '@/components/theme-provider';
 import styles from './index.less';

 export function TemplateNode({
@ -17,12 +18,17 @@ export function TemplateNode({
 }: NodeProps<NodeData>) {
  const parameters: IGenerateParameter[] = get(data, 'form.parameters', []);
  const getLabel = useGetComponentLabelByValue(id);
-
+  const { theme } = useTheme();
  return (
    <section
-      className={classNames(styles.logicNode, {
-        [styles.selectedNode]: selected,
-      })}
+      className={classNames(
+        styles.logicNode,
+        theme === 'dark' ? styles.dark : '',
+
+        {
+          [styles.selectedNode]: selected,
+        },
+      )}
    >
      <Handle
        id="c"