From 90c8d9d27bef0c6ec5e3efee11096d9e643a8596 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Tue, 5 Mar 2024 11:57:51 +0800
Subject: [PATCH] service

---
 .../workflow/block-selector/hooks.ts          | 13 ++++++
 .../workflow/block-selector/tabs.tsx          |  6 ++-
 web/app/components/workflow/index.tsx         | 44 ++++++++++++++-----
 web/i18n/en-US/workflow.ts                    | 13 ++++++
 web/i18n/zh-Hans/workflow.ts                  | 13 ++++++
 5 files changed, 76 insertions(+), 13 deletions(-)
 create mode 100644 web/app/components/workflow/block-selector/hooks.ts

diff --git a/web/app/components/workflow/block-selector/hooks.ts b/web/app/components/workflow/block-selector/hooks.ts
new file mode 100644
index 0000000000..b4238d0579
--- /dev/null
+++ b/web/app/components/workflow/block-selector/hooks.ts
@@ -0,0 +1,13 @@
+import { useTranslation } from 'react-i18next'
+import { BLOCKS } from './constants'
+
+export const useBlocks = () => {
+  const { t } = useTranslation()
+
+  return BLOCKS.map((block) => {
+    return {
+      ...block,
+      title: t(`workflow.blocks.${block.type}`),
+    }
+  })
+}
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index 03fa52bf97..7bb5714296 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -3,13 +3,14 @@ import {
   memo,
   useState,
 } from 'react'
+import { groupBy } from 'lodash-es'
 import BlockIcon from '../block-icon'
 import type { BlockEnum } from '../types'
 import {
   BLOCK_CLASSIFICATIONS,
-  BLOCK_GROUP_BY_CLASSIFICATION,
   TABS,
 } from './constants'
+import { useBlocks } from './hooks'
 
 export type TabsProps = {
   onSelect: (type: BlockEnum) => void
@@ -18,6 +19,7 @@ const Tabs: FC<TabsProps> = ({
   onSelect,
 }) => {
   const [activeTab, setActiveTab] = useState(TABS[0].key)
+  const blocks = useBlocks()
 
   return (
     <div>
@@ -52,7 +54,7 @@ const Tabs: FC<TabsProps> = ({
                 )
               }
               {
-                BLOCK_GROUP_BY_CLASSIFICATION[classification].map(block => (
+                groupBy(blocks, 'classification')[classification].map(block => (
                   <div
                     key={block.type}
                     className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 365e9fb416..f3ccde06b9 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import {
   memo,
+  useMemo,
 } from 'react'
 import { useParams } from 'next/navigation'
 import useSWR from 'swr'
@@ -112,21 +113,42 @@ const WorkflowWrap: FC<WorkflowProps> = ({
   edges,
 }) => {
   const appId = useParams().appId
-  const { isLoading, error } = useSWR(`/apps/${appId}/workflows/draft`, fetchWorkflowDraft)
+  const { data, isLoading, error } = useSWR(`/apps/${appId}/workflows/draft`, fetchWorkflowDraft)
+
+  const startNode = {
+    id: `${Date.now()}`,
+    data: NodeInitialData.start,
+    position: {
+      x: 100,
+      y: 100,
+    },
+  }
+
+  const nodesData = useMemo(() => {
+    if (nodes)
+      return nodes
+
+    if (data)
+      return data.graph.nodes
+
+    return [startNode]
+  }, [data, nodes])
+  const edgesData = useMemo(() => {
+    if (edges)
+      return edges
+
+    if (data)
+      return data.graph.edges
+
+    return []
+  }, [data, nodes])
 
   if (error) {
     syncWorkflowDraft({
       url: `/apps/${appId}/workflows/draft`,
       params: {
         graph: {
-          nodes: [{
-            id: `${Date.now()}`,
-            data: NodeInitialData.start,
-            position: {
-              x: 100,
-              y: 100,
-            },
-          }],
+          nodes: [startNode],
           edges: [],
         },
         features: {},
@@ -144,8 +166,8 @@ const WorkflowWrap: FC<WorkflowProps> = ({
     <ReactFlowProvider>
       <FeaturesProvider>
         <Workflow
-          nodes={nodes}
-          edges={edges}
+          nodes={nodesData}
+          edges={edgesData}
         />
       </FeaturesProvider>
     </ReactFlowProvider>
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index f7450f2a46..65e52cfd7f 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -1,4 +1,17 @@
 const translation = {
+  blocks: {
+    'start': 'Start',
+    'end': 'End',
+    'direct-answer': 'Direct Answer',
+    'llm': 'LLM',
+    'knowledge-retrieval': 'Knowledge Retrieval',
+    'question-classifier': 'Question Classifier',
+    'if-else': 'IF/ELSE',
+    'code': 'Code',
+    'template-transform': 'Templating Transform',
+    'http-request': 'HTTP Request',
+    'variable-assigner': 'Variable Assigner',
+  },
   nodes: {
     common: {
       outputVars: 'Output Variables',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index d4d6410bd9..98fc805a3e 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -1,4 +1,17 @@
 const translation = {
+  blocks: {
+    'start': '开始',
+    'end': '结束',
+    'direct-answer': '直接回答',
+    'llm': 'LLM',
+    'knowledge-retrieval': '知识检索',
+    'question-classifier': '问题分类器',
+    'if-else': '条件分支',
+    'code': '代码',
+    'template-transform': '模板转换',
+    'http-request': 'HTTP 请求',
+    'variable-assigner': '变量赋值',
+  },
   nodes: {
     common: {
       outputVars: '输出变量',