Feat: Adjust the style of the note node #3221 (#9167)

### What problem does this PR solve? Feat: Adjust the style of the note node #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-08 20:42:30 +08:00 · 2025-08-01 20:21:19 +08:00
parent 01bf799a59
commit 21ddcd3c39
14 changed files with 24 additions and 15 deletions
--- a/web/public/iconfont.js
+++ b/web/public/iconfont.js
--- a/web/src/components/icon-font.tsx
+++ b/web/src/components/icon-font.tsx
@ -8,7 +8,7 @@ type IconFontType = {
 };

 export const IconFont = ({ name, className }: IconFontType) => (
-  <svg className={cn('fill-current size-4', className)}>
+  <svg className={cn('size-4', className)}>
    <use xlinkHref={`#icon-${name}`} />
  </svg>
 );
--- a/web/src/components/xyflow/base-node.tsx
+++ b/web/src/components/xyflow/base-node.tsx
@ -9,7 +9,7 @@ export const BaseNode = forwardRef<
  <div
    ref={ref}
    className={cn(
-      'relative rounded-md bg-card text-card-foreground',
+      'relative rounded bg-card text-card-foreground',
      className,
      selected ? 'border-muted-foreground shadow-lg' : '',
      'hover:ring-1',
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@ -1297,6 +1297,7 @@ This delimiter is used to split the input text into several text pieces echo of
      createAgent: 'Create Agent',
      stringTransform: 'Text Processing',
      userFillUp: 'Await Response',
+      userFillUpDescription: `Pauses the workflow and waits for the user's message before continuing.`,
      codeExec: 'Code',
      tavilySearch: 'Tavily Search',
      tavilySearchDescription: 'Search results via Tavily service.',
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@ -1251,6 +1251,8 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
      createAgent: 'Create Agent',
      stringTransform: '文本处理',
      userFillUp: '等待输入',
+      userFillUpDescription: `此组件会暂停当前的流程并等待用户发送消息，接收到消息之后再进行之后的流程。`,
+
      codeExec: '代码',
      tavilySearch: 'Tavily Search',
      tavilySearchDescription: '通过 Tavily 服务搜索结果',
--- a/web/src/pages/agent/canvas/node/node-wrapper.tsx
+++ b/web/src/pages/agent/canvas/node/node-wrapper.tsx
@ -7,7 +7,7 @@ export function NodeWrapper({ children, className, selected }: IProps) {
  return (
    <section
      className={cn(
-        'bg-text-title-invert p-2.5 rounded-md w-[200px] text-xs',
+        'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs',
        { 'border border-background-checked': selected },
        className,
      )}
--- a/web/src/pages/agent/canvas/node/note-node/index.tsx
+++ b/web/src/pages/agent/canvas/node/note-node/index.tsx
@ -47,13 +47,13 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {

  return (
    <NodeWrapper
-      className="p-0  w-full h-full flex flex-col rounded-md "
+      className="p-0  w-full h-full flex flex-col"
      selected={selected}
    >
      <NodeResizeControl minWidth={190} minHeight={128} style={controlStyle}>
        <ResizeIcon />
      </NodeResizeControl>
-      <section className="px-1 py-2 flex gap-2 bg-background-highlight items-center note-drag-handle rounded-s-md">
+      <section className="p-2 flex gap-2 bg-background-note items-center note-drag-handle rounded-t">
        <NotebookPen className="size-4" />
        <Form {...nameForm}>
          <form className="flex-1">
@ -67,6 +67,7 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
                      placeholder={t('flow.notePlaceholder')}
                      {...field}
                      type="text"
+                      className="bg-transparent border-none focus-visible:outline focus-visible:outline-text-sub-title"
                    />
                  </FormControl>
                  <FormMessage />
@ -86,7 +87,7 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
                <FormControl>
                  <Textarea
                    placeholder={t('flow.notePlaceholder')}
-                    className="resize-none rounded-none p-1 h-full overflow-auto bg-background-header-bar focus-visible:ring-0 border-none"
+                    className="resize-none rounded-none p-1 h-full overflow-auto bg-transparent focus-visible:ring-0 border-none"
                    {...field}
                  />
                </FormControl>
--- a/web/src/pages/agent/canvas/node/resize-icon.tsx
+++ b/web/src/pages/agent/canvas/node/resize-icon.tsx
@ -2,11 +2,11 @@ export function ResizeIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
+      width="14"
+      height="14"
      viewBox="0 0 24 24"
      strokeWidth="2"
-      stroke="#5025f9"
+      stroke="rgba(76, 164, 231, 1)"
      fill="none"
      strokeLinecap="round"
      strokeLinejoin="round"
--- a/web/src/pages/agent/constant.tsx
+++ b/web/src/pages/agent/constant.tsx
@ -932,6 +932,7 @@ export const NoDebugOperatorsList = [
  Operator.Switch,
  Operator.Iteration,
  Operator.UserFillUp,
+  Operator.IterationStart,
 ];

 export enum NodeHandleId {
--- a/web/src/pages/agent/log-sheet/workFlowTimeline.tsx
+++ b/web/src/pages/agent/log-sheet/workFlowTimeline.tsx
@ -22,7 +22,7 @@ import {
 import { ITraceData } from '@/interfaces/database/agent';
 import { cn } from '@/lib/utils';
 import { t } from 'i18next';
-import { get, isEmpty } from 'lodash';
+import { get, isEmpty, isEqual, uniqWith } from 'lodash';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import JsonView from 'react18-json-view';
 import { Operator } from '../constant';
@ -96,7 +96,7 @@ function getInputsOrOutputs(
    return inputsOrOutputs[0] || {};
  }

-  return inputsOrOutputs;
+  return uniqWith(inputsOrOutputs, isEqual); // TODO: Violence should not be used to
 }
 export const WorkFlowTimeline = ({
  currentEventListWithoutMessage,
--- a/web/src/pages/agent/operator-icon.tsx
+++ b/web/src/pages/agent/operator-icon.tsx
@ -71,7 +71,7 @@ const OperatorIcon = ({ name, className }: IProps) => {
  }

  return typeof Icon === 'string' ? (
-    <IconFont name={Icon} className={cn('size-5', className)}></IconFont>
+    <IconFont name={Icon} className={cn('size-5 ', className)}></IconFont>
  ) : (
    <SvgIcon className={cn('size-5 fill-current', className)}></SvgIcon>
  );
--- a/web/src/pages/agents/create-agent-form.tsx
+++ b/web/src/pages/agents/create-agent-form.tsx
@ -66,7 +66,7 @@ export function CreateAgentForm({ hideModal, onOk }: IModalProps<any>) {
            </FormItem>
          )}
        />
-        <FormField
+        {/* <FormField
          control={form.control}
          name="tag"
          render={({ field }) => (
@ -99,7 +99,7 @@ export function CreateAgentForm({ hideModal, onOk }: IModalProps<any>) {
              <FormMessage />
            </FormItem>
          )}
-        />
+        /> */}
      </form>
    </Form>
  );
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -50,6 +50,7 @@ module.exports = {
        'text-title-invert': 'var(--text-title-invert)',
        'background-header-bar': 'var(--background-header-bar)',
        'background-card': 'var(--background-card)',
+        'background-note': 'var(--background-note)',
        'background-checked': 'var(--background-checked)',
        'background-highlight': 'var(--background-highlight)',

--- a/web/tailwind.css
+++ b/web/tailwind.css
@ -85,6 +85,8 @@
    --text-title-invert: rgba(255, 255, 255, 1);
    --background-card: rgba(22, 22, 24, 0.05);

+    --background-note: rgba(22, 22, 24, 0.1);
+
    --background-checked: rgba(76, 164, 231, 1);
    --background-highlight: rgba(76, 164, 231, 0.1);

@ -196,6 +198,7 @@
    --text-title-invert: rgba(22, 22, 24, 1);

    --background-card: rgba(255, 255, 255, 0.05);
+    --background-note: rgba(255, 255, 255, 0.05);
    --background-checked: rgba(76, 164, 231, 1);

    --background-highlight: rgba(76, 164, 231, 0.1);