Fix: The compiler operator icon is not displaying on the pipeline log page. (#17545)

web/src/components/operator-icon.tsx

@@ -10,9 +10,15 @@ import {
   HousePlus,
   Infinity as InfinityIcon,
   LogOut,
+  LucideBlocks,
+  LucideFile,
+  LucideFilePlay,
+  LucideFileStack,
+  LucideHeading,
+  LucideListPlus,
 } from 'lucide-react';
 import { Component } from 'react';
-import { Operator } from './constant';
+import { Operator } from '../constants/agent';
 
 interface IProps {
   name: Operator;
@@ -64,7 +70,13 @@ export const LucideIconMap = {
   [Operator.ExitLoop]: LogOut,
   [Operator.DocGenerator]: FileText,
   [Operator.Browser]: Globe,
-  [Operator.Compilation]: Columns3Cog,
+  [Operator.Compiler]: Columns3Cog,
+  [Operator.File]: LucideFile,
+  [Operator.Parser]: LucideFilePlay,
+  [Operator.Tokenizer]: LucideListPlus,
+  [Operator.TokenChunker]: LucideBlocks,
+  [Operator.TitleChunker]: LucideHeading,
+  [Operator.Extractor]: LucideFileStack,
 };
 
 const Empty = () => {

web/src/constants/agent.tsx

@@ -114,7 +114,7 @@ export enum Operator {
   TokenChunker = 'TokenChunker',
   TitleChunker = 'TitleChunker',
   Extractor = 'Extractor',
-  Compilation = 'Compiler',
+  Compiler = 'Compiler',
   Loop = 'Loop',
   LoopStart = 'LoopItem',
   ExitLoop = 'ExitLoop',

web/src/pages/agent/canvas/node/begin-node.tsx

@@ -14,7 +14,7 @@ import {
 import { BeginFormSchemaType } from '../../form/begin-form/schema';
 import { useBuildWebhookUrl } from '../../hooks/use-build-webhook-url';
 import { useIsPipeline } from '../../hooks/use-is-pipeline';
-import OperatorIcon from '../../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import { LabelCard } from './card';
 import { CommonHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';

web/src/pages/agent/canvas/node/chunker-node.tsx

@@ -2,7 +2,7 @@ import { IRagNode } from '@/interfaces/database/agent';
 import { NodeProps, Position } from '@xyflow/react';
 import { PropsWithChildren, memo } from 'react';
 import { NodeHandleId, Operator } from '../../constant';
-import OperatorIcon from '../../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import { LabelCard } from './card';
 import { CommonHandle } from './handle';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';

web/src/pages/agent/canvas/node/dropdown/accordion-operators.tsx

@@ -174,8 +174,8 @@ export function PipelineAccordionOperators({
       ...restrictSingleOperatorOnCanvas([Operator.Parser, Operator.Tokenizer]),
     ];
     list.push(Operator.Extractor);
-    if (getOperatorTypeFromId(nodeId) !== Operator.Compilation) {
-      list.push(Operator.Compilation);
+    if (getOperatorTypeFromId(nodeId) !== Operator.Compiler) {
+      list.push(Operator.Compiler);
     }
     return list;
   }, [getOperatorTypeFromId, nodeId, restrictSingleOperatorOnCanvas]);
@@ -192,7 +192,7 @@ export function PipelineAccordionOperators({
   const showChunker = useMemo(() => {
     return (
       getOperatorTypeFromId(nodeId) !== Operator.Extractor &&
-      getOperatorTypeFromId(nodeId) !== Operator.Compilation &&
+      getOperatorTypeFromId(nodeId) !== Operator.Compiler &&
       chunkerOperators.length > 0
     );
   }, [chunkerOperators.length, getOperatorTypeFromId, nodeId]);

web/src/pages/agent/canvas/node/dropdown/operator-item-list.tsx

@@ -7,7 +7,7 @@ import {
 import { Operator } from '@/constants/agent';
 import { IModalProps } from '@/interfaces/common';
 import { AgentInstanceContext, HandleContext } from '@/pages/agent/context';
-import OperatorIcon from '@/pages/agent/operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import { Position } from '@xyflow/react';
 import { lowerFirst } from 'lodash';
 import { createContext, useContext } from 'react';

web/src/pages/agent/canvas/node/file-node.tsx

@@ -11,7 +11,7 @@ import {
   Operator,
 } from '../../constant';
 import { BeginQuery } from '../../interface';
-import OperatorIcon from '../../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import { CommonHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
 import styles from './index.module.less';

web/src/pages/agent/canvas/node/iteration-node.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 import { NodeProps, NodeResizeControl, Position } from '@xyflow/react';
 import { memo } from 'react';
 import { NodeHandleId, Operator } from '../../constant';
-import OperatorIcon from '../../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import { CommonHandle, LeftEndHandle } from './handle';
 import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';

web/src/pages/agent/canvas/node/node-header.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils';
 import { memo } from 'react';
 import { Operator } from '../../constant';
-import OperatorIcon from '../../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 interface IProps {
   id: string;
   label: string;

web/src/pages/agent/canvas/node/tool-node.tsx

@@ -6,7 +6,7 @@ import { memo } from 'react';
 import { NodeHandleId, Operator } from '../../constant';
 import { ToolCard } from '../../form/agent-form/agent-tools';
 import { useFindMcpById } from '../../hooks/use-find-mcp-by-id';
-import OperatorIcon from '../../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import useGraphStore from '../../store';
 import { NodeWrapper } from './node-wrapper';
 

web/src/pages/agent/constant/index.tsx

@@ -759,7 +759,7 @@ export const RestrictedUpstreamMap = {
   [Operator.TitleChunker]: [Operator.Begin],
   [Operator.Tokenizer]: [Operator.Begin],
   [Operator.Extractor]: [Operator.Begin],
-  [Operator.Compilation]: [Operator.Begin],
+  [Operator.Compiler]: [Operator.Begin],
   [Operator.File]: [Operator.Begin],
   [Operator.Loop]: [Operator.Begin],
   [Operator.LoopStart]: [Operator.Begin],
@@ -811,7 +811,7 @@ export const NodeMap = {
   [Operator.TokenChunker]: 'chunkerNode',
   [Operator.TitleChunker]: 'chunkerNode',
   [Operator.Extractor]: 'contextNode',
-  [Operator.Compilation]: 'compilationNode',
+  [Operator.Compiler]: 'compilationNode',
   [Operator.DataOperations]: 'dataOperationsNode',
   [Operator.ListOperations]: 'listOperationsNode',
   [Operator.VariableAssigner]: 'variableAssignerNode',
@@ -858,7 +858,7 @@ export const NoDebugOperatorsList = [
   Operator.TokenChunker,
   Operator.TitleChunker,
   Operator.Extractor,
-  Operator.Compilation,
+  Operator.Compiler,
   Operator.Tool,
   Operator.Loop,
 ];
@@ -870,7 +870,7 @@ export const NoCopyOperatorsList = [
   Operator.TokenChunker,
   Operator.TitleChunker,
   Operator.Extractor,
-  Operator.Compilation,
+  Operator.Compiler,
 ];
 
 export enum NodeHandleId {

web/src/pages/agent/form-sheet/form-config-map.tsx

@@ -180,7 +180,7 @@ export const FormConfigMap = {
   [Operator.Extractor]: {
     component: ExtractorForm,
   },
-  [Operator.Compilation]: {
+  [Operator.Compiler]: {
     component: CompilationForm,
   },
   [Operator.DataOperations]: {

web/src/pages/agent/form-sheet/next.tsx

@@ -15,7 +15,7 @@ import { Operator } from '../constant';
 import { AgentFormContext } from '../context';
 import { RunTooltip } from '../flow-tooltip';
 import { useIsMcp } from '../hooks/use-is-mcp';
-import OperatorIcon from '../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import useGraphStore from '../store';
 import { needsSingleStepDebugging } from '../utils';
 import { FormConfigMap } from './form-config-map';

web/src/pages/agent/form/agent-form/agent-tools.tsx

@@ -20,7 +20,7 @@ import { Operator } from '../../constant';
 import { AgentInstanceContext } from '../../context';
 import { useFindMcpById } from '../../hooks/use-find-mcp-by-id';
 import { INextOperatorForm } from '../../interface';
-import OperatorIcon from '../../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import useGraphStore from '../../store';
 import { filterDownstreamAgentNodeIds } from '../../utils/filter-downstream-nodes';
 import { ToolPopover } from './tool-popover';

web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx

@@ -9,7 +9,7 @@ import {
 } from '@/components/ui/command';
 import { useListMcpServer } from '@/hooks/use-mcp-request';
 import { Operator } from '@/pages/agent/constant';
-import OperatorIcon from '@/pages/agent/operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import { t } from 'i18next';
 import { lowerFirst } from 'lodash';
 import { LucidePlus } from 'lucide-react';

web/src/pages/agent/hooks/use-add-node.ts

@@ -185,7 +185,7 @@ export const useInitializeOperatorParams = () => {
         sys_prompt: t('flow.prompts.system.summary'),
         prompts: t('flow.prompts.user.summary'),
       },
-      [Operator.Compilation]: initialCompilationValues,
+      [Operator.Compiler]: initialCompilationValues,
       [Operator.DataOperations]: initialDataOperationsValues,
       [Operator.ListOperations]: initialListOperationsValues,
       [Operator.VariableAssigner]: initialVariableAssignerValues,

web/src/pages/agent/hooks/use-build-options.tsx

@@ -1,7 +1,7 @@
 import { buildUpstreamNodeOutputOptions } from '@/utils/canvas-util';
 import { useMemo } from 'react';
 import { Operator } from '../constant';
-import OperatorIcon from '../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import useGraphStore from '../store';
 
 export function useBuildNodeOutputOptions(nodeId?: string) {

web/src/pages/agent/hooks/use-get-begin-query.tsx

@@ -26,7 +26,7 @@ import {
 import { AgentFormContext } from '../context';
 import { buildBeginInputListFromObject } from '../form/begin-form/utils';
 import { BeginQuery } from '../interface';
-import OperatorIcon from '../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import useGraphStore from '../store';
 import {
   useFindAgentStructuredOutputLabelByValue,

web/src/pages/agent/log-sheet/tool-timeline-item.tsx

@@ -15,7 +15,7 @@ import { cn } from '@/lib/utils';
 import { isEmpty } from 'lodash';
 import { Operator } from '../constant';
 import { JsonViewer } from '../form/components/json-viewer';
-import OperatorIcon, { SVGIconMap } from '../operator-icon';
+import OperatorIcon, { SVGIconMap } from '@/components/operator-icon';
 import { getToolOperatorName } from './tool-name';
 import { toLowerCaseStringAndDeleteChar, typeMap } from './workflow-timeline';
 type IToolIcon =

web/src/pages/agent/log-sheet/workflow-timeline.tsx

@@ -27,7 +27,7 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { Operator } from '../constant';
 import { JsonViewer } from '../form/components/json-viewer';
 import { useCacheChatLog } from '../hooks/use-cache-chat-log';
-import OperatorIcon from '../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import ToolTimelineItem from './tool-timeline-item';
 type LogFlowTimelineProps = Pick<
   ReturnType<typeof useCacheChatLog>,

web/src/pages/agent/pipeline-log-sheet/dataflow-timeline.tsx

@@ -14,7 +14,7 @@ import { isEmpty } from 'lodash';
 import { File } from 'lucide-react';
 import { useCallback } from 'react';
 import { Operator } from '../constant';
-import OperatorIcon from '../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 import useGraphStore from '../store';
 
 export type DataflowTimelineProps = {

web/src/pages/agent/webhook-sheet/timeline.tsx

@@ -28,7 +28,7 @@ import { Operator } from '../constant';
 import { JsonViewer } from '../form/components/json-viewer';
 import { useCacheChatLog } from '../hooks/use-cache-chat-log';
 import ToolTimelineItem from '../log-sheet/tool-timeline-item';
-import OperatorIcon from '../operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 type LogFlowTimelineProps = Pick<
   ReturnType<typeof useCacheChatLog>,
   'currentEventListWithoutMessage' | 'currentMessageId'

web/src/pages/dataflow-result/components/time-line/index.tsx

@@ -1,51 +1,7 @@
 import { CustomTimeline, TimelineNode } from '@/components/originui/timeline';
-import {
-  LucideBlocks,
-  LucideFile,
-  LucideFilePlay,
-  LucideFileStack,
-  LucideHeading,
-  LucideListPlus,
-} from 'lucide-react';
 import { useMemo } from 'react';
-import { TimelineNodeType } from '../../constant';
 import { IPipelineFileLogDetail } from '../../interface';
 
-export type ITimelineNodeObj = {
-  title: string;
-  icon: JSX.Element;
-  clickable?: boolean;
-  type: TimelineNodeType;
-};
-
-export const TimelineNodeObj = {
-  [TimelineNodeType.begin]: {
-    title: 'File',
-    icon: <LucideFile className="size-[1em]" />,
-    clickable: false,
-  },
-  [TimelineNodeType.parser]: {
-    title: 'Parser',
-    icon: <LucideFilePlay className="size-[1em]" />,
-  },
-  [TimelineNodeType.contextGenerator]: {
-    title: 'Context Generator',
-    icon: <LucideFileStack className="size-[1em]" />,
-  },
-  [TimelineNodeType.titleChunker]: {
-    title: 'Title Chunker',
-    icon: <LucideHeading className="size-[1em]" />,
-  },
-  [TimelineNodeType.tokenChunker]: {
-    title: 'Token Chunker',
-    icon: <LucideBlocks className="size-[1em]" />,
-  },
-  [TimelineNodeType.tokenizer]: {
-    title: 'Tokenizer',
-    icon: <LucideListPlus className="size-[1em]" />,
-    clickable: false,
-  },
-};
 export interface TimelineDataFlowProps {
   activeId: number | string;
   activeFunc: (id: number | string, step: TimelineNode) => void;

web/src/pages/dataflow-result/constant.ts

@@ -10,6 +10,7 @@ export enum TimelineNodeType {
   titleChunker = 'titleChunker',
   tokenChunker = 'tokenChunker',
   tokenizer = 'tokenizer',
+  compiler = 'compiler',
   end = 'end',
 }
 

web/src/pages/dataflow-result/hooks.ts

@@ -10,10 +10,17 @@ import { buildChunkHighlights } from '@/utils/document-util';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { t } from 'i18next';
 import { camelCase, upperFirst } from 'lodash';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  createElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { IHighlight } from 'react-pdf-highlighter';
 import { useParams, useSearchParams } from 'react-router';
-import { ITimelineNodeObj, TimelineNodeObj } from './components/time-line';
+import OperatorIcon from '@/components/operator-icon';
+import { Operator } from '@/constants/agent';
 import {
   ChunkTextMode,
   PipelineResultSearchParams,
@@ -214,17 +221,16 @@ export const useRerunDataflow = ({
 
 export const useTimelineDataFlow = (data: IPipelineFileLogDetail) => {
   const timelineNodes: TimelineNode[] = useMemo(() => {
-    const nodes: Array<ITimelineNodeObj & { id: number | string }> = [];
-    console.log('time-->', data);
+    const nodes: Array<
+      TimelineNode & { detail: { value: IDslComponent; key: string } }
+    > = [];
     const times = data?.dsl?.components;
     const graphNodes = data?.dsl?.graph?.nodes;
     if (times) {
       const getNode = (key: string, index: number, type: TimelineNodeType) => {
         const node = times[key].obj;
         const graphNode = graphNodes?.find((item) => item.id === key);
-        const name = camelCase(
-          node.component_name,
-        ) as keyof typeof TimelineNodeObj;
+        const name = camelCase(node.component_name);
 
         let tempType = type;
         if (name === TimelineNodeType.parser) {
@@ -237,9 +243,19 @@ export const useTimelineDataFlow = (data: IPipelineFileLogDetail) => {
         ) {
           tempType = name;
         }
+        const operatorName = upperFirst(name) as keyof typeof Operator;
         const timeNode = {
-          ...TimelineNodeObj[name],
+          icon: Operator[operatorName]
+            ? createElement(OperatorIcon, {
+                name: Operator[operatorName],
+              })
+            : undefined,
           title: graphNode?.data?.name,
+          clickable: ![
+            TimelineNodeType.begin,
+            TimelineNodeType.tokenizer,
+            TimelineNodeType.compiler,
+          ].includes(name as TimelineNodeType),
           id: index,
           className: 'w-32',
           completed: false,
@@ -248,26 +264,18 @@ export const useTimelineDataFlow = (data: IPipelineFileLogDetail) => {
           ),
           type: tempType,
           detail: { value: times[key], key: key },
-        } as ITimelineNodeObj & {
-          id: number | string;
-          className: string;
-          completed: boolean;
-          date: string;
-          type: TimelineNodeType;
+        } as TimelineNode & {
           detail: { value: IDslComponent; key: string };
         };
-        console.log('timeNodetype-->', type);
         nodes.push(timeNode);
 
         if (times[key].downstream && times[key].downstream.length > 0) {
           const nextKey = times[key].downstream[0];
 
-          // nodes.push(timeNode);
           getNode(nextKey, index + 1, tempType);
         }
       };
       getNode(upperFirst(TimelineNodeType.begin), 1, TimelineNodeType.begin);
-      // setTimelineNodeArr(nodes as unknown as ITimelineNodeObj & {id: number | string})
     }
     return nodes;
   }, [data]);

web/src/utils/canvas-util.tsx

@@ -4,7 +4,7 @@ import {
   Operator,
 } from '@/constants/agent';
 import { BaseNode } from '@/interfaces/database/agent';
-import OperatorIcon from '@/pages/agent/operator-icon';
+import OperatorIcon from '@/components/operator-icon';
 
 import { Edge } from '@xyflow/react';
 import { get, isEmpty } from 'lodash';