Feat: Modify the style of the agent page bright theme #3221 (#9162)

### What problem does this PR solve? Feat: Modify the style of the agent page bright theme #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-08 20:42:30 +08:00 · 2025-08-01 17:55:35 +08:00
parent 6591031bad
commit 8fd12b670e
26 changed files with 180 additions and 103 deletions
--- a/web/src/pages/agent/canvas/index.tsx
+++ b/web/src/pages/agent/canvas/index.tsx
@ -1,3 +1,4 @@
+import { useIsDarkTheme, useTheme } from '@/components/theme-provider';
 import {
  Tooltip,
  TooltipContent,
@ -144,6 +145,8 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {

  const { ref, showImage, hideImage, imgVisible, mouse } = useMoveNote();

+  const { theme } = useTheme();
+
  const onPaneClick = useCallback(() => {
    hideFormDrawer();
    if (imgVisible) {
@ -165,6 +168,8 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
    }
  };

+  const isDarkTheme = useIsDarkTheme();
+
  useHideFormSheetOnNodeDeletion({ hideFormDrawer });

  return (
@ -211,13 +216,15 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
          onEdgeMouseEnter={onEdgeMouseEnter}
          onEdgeMouseLeave={onEdgeMouseLeave}
          className="h-full"
-          colorMode="dark"
+          colorMode={theme}
          defaultEdgeOptions={{
            type: 'buttonEdge',
            markerEnd: 'logo',
            style: {
              strokeWidth: 1,
-              stroke: 'rgba(91, 93, 106, 1)',
+              stroke: isDarkTheme
+                ? 'rgba(91, 93, 106, 1)'
+                : 'rgba(151, 154, 171, 1)',
            },
            zIndex: 1001, // https://github.com/xyflow/xyflow/discussions/3498
          }}
--- a/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
+++ b/web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
@ -60,7 +60,7 @@ function AccordionOperators() {
      defaultValue={['item-1', 'item-2', 'item-3', 'item-4', 'item-5']}
    >
      <AccordionItem value="item-1">
-        <AccordionTrigger className="text-xl">AI</AccordionTrigger>
+        <AccordionTrigger className="text-xl">Foundation</AccordionTrigger>
        <AccordionContent className="flex flex-col gap-4 text-balance">
          <OperatorItemList
            operators={[Operator.Agent, Operator.Retrieval]}
--- a/web/src/pages/agent/canvas/node/handle.tsx
+++ b/web/src/pages/agent/canvas/node/handle.tsx
@ -36,7 +36,7 @@ export function CommonHandle({
          showModal();
        }}
      >
-        <Plus className="size-3 pointer-events-none" />
+        <Plus className="size-3 pointer-events-none text-text-title-invert" />
        {visible && (
          <InnerNextStepDropdown hideModal={hideModal}>
            <span></span>
--- a/web/src/pages/agent/components/background.tsx
+++ b/web/src/pages/agent/components/background.tsx
@ -1,7 +1,13 @@
+import { useIsDarkTheme } from '@/components/theme-provider';
 import { Background } from '@xyflow/react';

 export function AgentBackground() {
+  const isDarkTheme = useIsDarkTheme();
+
  return (
-    <Background color="rgba(255,255,255,0.15)" bgColor="rgba(11, 11, 12, 1)" />
+    <Background
+      color={isDarkTheme ? 'rgba(255,255,255,0.15)' : '#A8A9B3'}
+      bgColor={isDarkTheme ? 'rgba(11, 11, 12, 1)' : 'rgba(0, 0, 0, 0.05)'}
+    />
  );
 }
--- a/web/src/pages/agent/embed-dialog/index.tsx
+++ b/web/src/pages/agent/embed-dialog/index.tsx
@ -139,7 +139,7 @@ function EmbedDialog({
          </Form>
          <div>
            <span>Embed code</span>
-            <HightLightMarkdown dark>{text}</HightLightMarkdown>
+            <HightLightMarkdown>{text}</HightLightMarkdown>
          </div>
          <div className=" font-medium mt-4 mb-1">
            {t(isAgent ? 'flow' : 'chat', { keyPrefix: 'header' })}
--- a/web/src/pages/agent/form-sheet/next.tsx
+++ b/web/src/pages/agent/form-sheet/next.tsx
@ -103,11 +103,13 @@ const FormSheet = ({
              )}
              <X onClick={hideModal} />
            </div>
-            <span>
-              {t(
-                `${lowerFirst(operatorName === Operator.Tool ? clickedToolId : operatorName)}Description`,
-              )}
-            </span>
+            {isMcp || (
+              <span>
+                {t(
+                  `${lowerFirst(operatorName === Operator.Tool ? clickedToolId : operatorName)}Description`,
+                )}
+              </span>
+            )}
          </section>
        </SheetHeader>
        <section className="pt-4 overflow-auto flex-1">
--- a/web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx
+++ b/web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx
@ -37,10 +37,10 @@ const Menus = [
    label: 'Communication',
    list: [Operator.Email],
  },
-  {
-    label: 'Productivity',
-    list: [],
-  },
+  // {
+  //   label: 'Productivity',
+  //   list: [],
+  // },
  {
    label: 'Developer',
    list: [Operator.GitHub, Operator.ExeSQL, Operator.Code, Operator.Retrieval],
--- a/web/src/pages/agent/index.tsx
+++ b/web/src/pages/agent/index.tsx
@ -1,5 +1,4 @@
 import { PageHeader } from '@/components/page-header';
-import { useSwitchToDarkThemeOnMount } from '@/components/theme-provider';
 import {
  Breadcrumb,
  BreadcrumbItem,
@ -98,8 +97,6 @@ export default function Agent() {
  const { navigateToAgentLogs } = useNavigatePage();
  const time = useWatchAgentChange(chatDrawerVisible);

-  useSwitchToDarkThemeOnMount();
-
  return (
    <section className="h-full">
      <PageHeader>
--- a/web/src/pages/agent/log-sheet/workFlowTimeline.tsx
+++ b/web/src/pages/agent/log-sheet/workFlowTimeline.tsx
@ -21,7 +21,7 @@ import {
 import { ITraceData } from '@/interfaces/database/agent';
 import { cn } from '@/lib/utils';
 import { t } from 'i18next';
-import { get } from 'lodash';
+import { get, isEmpty } from 'lodash';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import JsonView from 'react18-json-view';
 import { Operator } from '../constant';
@ -46,7 +46,7 @@ export function JsonViewer({
        src={data}
        displaySize
        collapseStringsAfterLength={100000000000}
-        className="w-full h-[200px] break-words overflow-auto p-2 bg-slate-800"
+        className="w-full h-[200px] break-words overflow-auto p-2 bg-background-card"
      />
    </section>
  );
@ -219,9 +219,9 @@ export const WorkFlowTimeline = ({
                          </span>
                          <span
                            className={cn(
-                              'border-background  -end-1 -top-1 size-2 rounded-full border-2 bg-dot-green',
-                              { 'text-dot-green': x.data.error === null },
-                              { 'text-dot-red': x.data.error !== null },
+                              'border-background  -end-1 -top-1 size-2 rounded-full',
+                              { 'bg-dot-green': isEmpty(x.data.error) },
+                              { 'bg-dot-red': !isEmpty(x.data.error) },
                            )}
                          >
                            <span className="sr-only">Online</span>
--- a/web/src/pages/agent/operator-icon.tsx
+++ b/web/src/pages/agent/operator-icon.tsx
@ -1,5 +1,17 @@
+import { ReactComponent as ArxivIcon } from '@/assets/svg/arxiv.svg';
+import { ReactComponent as BingIcon } from '@/assets/svg/bing.svg';
+import { ReactComponent as CrawlerIcon } from '@/assets/svg/crawler.svg';
+import { ReactComponent as DuckIcon } from '@/assets/svg/duck.svg';
+import { ReactComponent as GithubIcon } from '@/assets/svg/github.svg';
+import { ReactComponent as GoogleScholarIcon } from '@/assets/svg/google-scholar.svg';
+import { ReactComponent as GoogleIcon } from '@/assets/svg/google.svg';
+import { ReactComponent as PubMedIcon } from '@/assets/svg/pubmed.svg';
+import { ReactComponent as TavilyIcon } from '@/assets/svg/tavily.svg';
+import { ReactComponent as WenCaiIcon } from '@/assets/svg/wencai.svg';
+import { ReactComponent as WikipediaIcon } from '@/assets/svg/wikipedia.svg';
+import { ReactComponent as YahooFinanceIcon } from '@/assets/svg/yahoo-finance.svg';
+
 import { IconFont } from '@/components/icon-font';
-import SvgIcon from '@/components/svg-icon';
 import { cn } from '@/lib/utils';
 import { HousePlus } from 'lucide-react';
 import { Operator } from './constant';
@ -27,19 +39,19 @@ export const OperatorIconMap = {
 };

 const SVGIconMap = {
-  [Operator.ArXiv]: 'arxiv',
-  [Operator.GitHub]: 'github',
-  [Operator.Bing]: 'bing',
-  [Operator.DuckDuckGo]: 'duck',
-  [Operator.Google]: 'google',
-  [Operator.GoogleScholar]: 'google-scholar',
-  [Operator.PubMed]: 'pubmed',
-  [Operator.TavilyExtract]: 'tavily',
-  [Operator.TavilySearch]: 'tavily',
-  [Operator.Wikipedia]: 'wikipedia',
-  [Operator.YahooFinance]: 'yahoo-finance',
-  [Operator.WenCai]: 'wencai',
-  [Operator.Crawler]: 'crawler',
+  [Operator.ArXiv]: ArxivIcon,
+  [Operator.GitHub]: GithubIcon,
+  [Operator.Bing]: BingIcon,
+  [Operator.DuckDuckGo]: DuckIcon,
+  [Operator.Google]: GoogleIcon,
+  [Operator.GoogleScholar]: GoogleScholarIcon,
+  [Operator.PubMed]: PubMedIcon,
+  [Operator.TavilyExtract]: TavilyIcon,
+  [Operator.TavilySearch]: TavilyIcon,
+  [Operator.Wikipedia]: WikipediaIcon,
+  [Operator.YahooFinance]: YahooFinanceIcon,
+  [Operator.WenCai]: WenCaiIcon,
+  [Operator.Crawler]: CrawlerIcon,
 };

 const Empty = () => {
@ -48,6 +60,7 @@ const Empty = () => {

 const OperatorIcon = ({ name, className }: IProps) => {
  const Icon = OperatorIconMap[name as keyof typeof OperatorIconMap] || Empty;
+  const SvgIcon = SVGIconMap[name as keyof typeof SVGIconMap] || Empty;

  if (name === Operator.Begin) {
    return (
@ -57,20 +70,10 @@ const OperatorIcon = ({ name, className }: IProps) => {
    );
  }

-  if (name in SVGIconMap) {
-    return (
-      <SvgIcon
-        name={SVGIconMap[name as keyof typeof SVGIconMap]}
-        width={20}
-        className={className}
-      ></SvgIcon>
-    );
-  }
-
  return typeof Icon === 'string' ? (
    <IconFont name={Icon} className={cn('size-5', className)}></IconFont>
  ) : (
-    <Icon width={20} className={cn('size-5 fill-current', className)}></Icon>
+    <SvgIcon className={cn('size-5 fill-current', className)}></SvgIcon>
  );
 };

--- a/web/src/pages/next-chats/share/index.tsx
+++ b/web/src/pages/next-chats/share/index.tsx
@ -4,7 +4,6 @@ import MessageItem from '@/components/next-message-item';
 import PdfDrawer from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
-import { useSwitchToDarkThemeOnMount } from '@/components/theme-provider';
 import { Button } from '@/components/ui/button';
 import { MessageType } from '@/constants/chat';
 import { useFetchAppConf } from '@/hooks/logic-hooks';
@ -101,8 +100,6 @@ const ChatContainer = () => {
    }
  }, [inputsData, showParameterDialog]);

-  useSwitchToDarkThemeOnMount();
-
  const handleInputsModalOk = (params: any[]) => {
    ok(params);
  };