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)

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>
 );

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',

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.',

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 服务搜索结果',

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,
       )}

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>

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"

web/src/pages/agent/constant.tsx

@@ -932,6 +932,7 @@ export const NoDebugOperatorsList = [
   Operator.Switch,
   Operator.Iteration,
   Operator.UserFillUp,
+  Operator.IterationStart,
 ];
 
 export enum NodeHandleId {

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,

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>
   );

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>
   );

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)',
 

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);