From c7ee8ac1c73f5b21920cd7adc158a2404e607073 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Mon, 19 Feb 2024 19:06:21 +0800
Subject: [PATCH] add app-info-panel

---
 .../vender/line/files/file-check-02.svg       |  5 +
 .../src/vender/line/files/FileCheck02.json    | 39 ++++++++
 .../src/vender/line/files/FileCheck02.tsx     | 16 ++++
 .../base/icons/src/vender/line/files/index.ts |  1 +
 .../components/workflow/app-info-panel.tsx    | 58 +++++++++++
 web/app/components/workflow/block-icon.tsx    |  1 +
 web/app/components/workflow/index.tsx         |  4 +
 .../components/workflow/nodes/_base/panel.tsx |  2 +-
 web/app/components/workflow/nodes/index.tsx   |  5 +-
 web/app/components/workflow/zoom-in-out.tsx   | 96 +++++++++++++++++++
 10 files changed, 224 insertions(+), 3 deletions(-)
 create mode 100644 web/app/components/base/icons/assets/vender/line/files/file-check-02.svg
 create mode 100644 web/app/components/base/icons/src/vender/line/files/FileCheck02.json
 create mode 100644 web/app/components/base/icons/src/vender/line/files/FileCheck02.tsx
 create mode 100644 web/app/components/workflow/app-info-panel.tsx
 create mode 100644 web/app/components/workflow/zoom-in-out.tsx

diff --git a/web/app/components/base/icons/assets/vender/line/files/file-check-02.svg b/web/app/components/base/icons/assets/vender/line/files/file-check-02.svg
new file mode 100644
index 0000000000..931593c06e
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/line/files/file-check-02.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="file-check-02">
+<path id="Icon" d="M13.3337 8.33301V4.53301C13.3337 3.4129 13.3337 2.85285 13.1157 2.42503C12.9239 2.0487 12.618 1.74274 12.2416 1.55099C11.8138 1.33301 11.2538 1.33301 10.1337 1.33301H5.86699C4.74689 1.33301 4.18683 1.33301 3.75901 1.55099C3.38269 1.74274 3.07673 2.0487 2.88498 2.42503C2.66699 2.85285 2.66699 3.4129 2.66699 4.53301V11.4663C2.66699 12.5864 2.66699 13.1465 2.88498 13.5743C3.07673 13.9506 3.38269 14.2566 3.75901 14.4484C4.18683 14.6663 4.74689 14.6663 5.86699 14.6663H8.00033M9.33366 7.33301H5.33366M6.66699 9.99967H5.33366M10.667 4.66634H5.33366M9.66699 12.6663L11.0003 13.9997L14.0003 10.9997" stroke="#344054" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/web/app/components/base/icons/src/vender/line/files/FileCheck02.json b/web/app/components/base/icons/src/vender/line/files/FileCheck02.json
new file mode 100644
index 0000000000..9a2e063c0a
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/line/files/FileCheck02.json
@@ -0,0 +1,39 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "file-check-02"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon",
+							"d": "M13.3337 8.33301V4.53301C13.3337 3.4129 13.3337 2.85285 13.1157 2.42503C12.9239 2.0487 12.618 1.74274 12.2416 1.55099C11.8138 1.33301 11.2538 1.33301 10.1337 1.33301H5.86699C4.74689 1.33301 4.18683 1.33301 3.75901 1.55099C3.38269 1.74274 3.07673 2.0487 2.88498 2.42503C2.66699 2.85285 2.66699 3.4129 2.66699 4.53301V11.4663C2.66699 12.5864 2.66699 13.1465 2.88498 13.5743C3.07673 13.9506 3.38269 14.2566 3.75901 14.4484C4.18683 14.6663 4.74689 14.6663 5.86699 14.6663H8.00033M9.33366 7.33301H5.33366M6.66699 9.99967H5.33366M10.667 4.66634H5.33366M9.66699 12.6663L11.0003 13.9997L14.0003 10.9997",
+							"stroke": "currentColor",
+							"stroke-width": "1.25",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "FileCheck02"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/line/files/FileCheck02.tsx b/web/app/components/base/icons/src/vender/line/files/FileCheck02.tsx
new file mode 100644
index 0000000000..78fa61c127
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/line/files/FileCheck02.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './FileCheck02.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'FileCheck02'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/files/index.ts b/web/app/components/base/icons/src/vender/line/files/index.ts
index 5dc424bb17..0b018cf7ca 100644
--- a/web/app/components/base/icons/src/vender/line/files/index.ts
+++ b/web/app/components/base/icons/src/vender/line/files/index.ts
@@ -1,5 +1,6 @@
 export { default as ClipboardCheck } from './ClipboardCheck'
 export { default as Clipboard } from './Clipboard'
 export { default as File02 } from './File02'
+export { default as FileCheck02 } from './FileCheck02'
 export { default as FileDownload02 } from './FileDownload02'
 export { default as FilePlus02 } from './FilePlus02'
diff --git a/web/app/components/workflow/app-info-panel.tsx b/web/app/components/workflow/app-info-panel.tsx
new file mode 100644
index 0000000000..6201f3639f
--- /dev/null
+++ b/web/app/components/workflow/app-info-panel.tsx
@@ -0,0 +1,58 @@
+import type { FC } from 'react'
+import { memo } from 'react'
+import BlockIcon from './block-icon'
+import { BlockEnum } from './types'
+import { useWorkflowContext } from './context'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import { FileCheck02 } from '@/app/components/base/icons/src/vender/line/files'
+
+const AppInfoPanel: FC = () => {
+  const { selectedNode } = useWorkflowContext()
+
+  if (selectedNode)
+    return null
+
+  return (
+    <div className='absolute top-14 right-2 bottom-2 w-[420px] bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl z-10 overflow-y-auto'>
+      <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5'>
+        <div className='flex pt-4 px-4 pb-1'>
+          <div className='mr-3 w-10 h-10'></div>
+          <div className='mt-2 text-base font-semibold text-gray-900'>
+            Fitness and Nutrition Expert
+          </div>
+        </div>
+        <div className='px-4 py-[13px] text-xs leading-[18px] text-gray-500'>
+          A Fitness and Nutrition Expert specializes in guiding individuals towards healthier lifestyles through exercise and diet.
+        </div>
+        <div className='flex items-center px-4 h-[42px] text-[13px] font-semibold text-gray-700'>
+          <FileCheck02 className='mr-1 w-4 h-4' />
+          Checklist(2)
+        </div>
+      </div>
+      <div className='py-2'>
+        <div className='px-4 py-2 text-xs text-gray-400'>
+          Make sure all issues are resolved before publishing
+        </div>
+        <div className='px-4 py-2'>
+          <div className='border-[0.5px] border-gray-200 bg-white shadow-xs rounded-lg'>
+            <div className='flex items-center p-2 h-9 text-xs font-medium text-gray-700'>
+              <BlockIcon
+                type={BlockEnum.Start}
+                className='mr-1.5'
+              />
+              Start
+            </div>
+            <div className='px-3 py-2 border-t-[0.5px] border-t-black/[0.02] bg-gray-25 rounded-b-lg'>
+              <div className='flex text-xs leading-[18px] text-gray-500'>
+                <AlertTriangle className='mt-[3px] mr-2 w-3 h-3 text-[#F79009]' />
+                This step is not connected to anything
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default memo(AppInfoPanel)
diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx
index bd269eeaa6..21fd624fe8 100644
--- a/web/app/components/workflow/block-icon.tsx
+++ b/web/app/components/workflow/block-icon.tsx
@@ -37,6 +37,7 @@ const getIcon = (type: BlockEnum, className: string) => {
     [BlockEnum.QuestionClassifier]: <QuestionClassifier className={className} />,
     [BlockEnum.TemplateTransform]: <TemplatingTransform className={className} />,
     [BlockEnum.VariableAssigner]: <VariableX className={className} />,
+    [BlockEnum.Tool]: <VariableX className={className} />,
   }[type]
 }
 const ICON_CONTAINER_BG_COLOR_MAP: Record<string, string> = {
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index f0f1d536b1..4bcbafdcc6 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -17,6 +17,8 @@ import Header from './header'
 import CustomNode, {
   Panel,
 } from './nodes'
+import AppInfoPanel from './app-info-panel'
+import ZoomInOut from './zoom-in-out'
 import CustomEdge from './custom-edge'
 import type { Node } from './types'
 
@@ -36,7 +38,9 @@ const Workflow = () => {
   return (
     <div className='relative w-full h-full'>
       <Header />
+      <AppInfoPanel />
       <Panel />
+      <ZoomInOut />
       <ReactFlow
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx
index ae9abd2af0..62d3f3127f 100644
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@@ -22,7 +22,7 @@ const BasePanel: FC<BasePanelProps> = ({
   } = useWorkflowContext()
 
   return (
-    <div className='absolute top-2 right-2 bottom-2 w-[420px] bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl z-20 overflow-y-auto'>
+    <div className='absolute top-14 right-2 bottom-2 w-[420px] bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl z-10 overflow-y-auto'>
       <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5'>
         <div className='flex items-center px-4 pt-3'>
           <BlockIcon
diff --git a/web/app/components/workflow/nodes/index.tsx b/web/app/components/workflow/nodes/index.tsx
index d43cd93806..e3654fc12f 100644
--- a/web/app/components/workflow/nodes/index.tsx
+++ b/web/app/components/workflow/nodes/index.tsx
@@ -34,11 +34,12 @@ const CustomNode = ({
 
 export const Panel = () => {
   const { selectedNode } = useWorkflowContext()
-  const PanelComponent = PanelMap[selectedNode?.data.type || '']
 
-  if (!PanelComponent)
+  if (!selectedNode)
     return null
 
+  const PanelComponent = PanelMap[selectedNode.data.type]
+
   return (
     <PanelComponent />
   )
diff --git a/web/app/components/workflow/zoom-in-out.tsx b/web/app/components/workflow/zoom-in-out.tsx
new file mode 100644
index 0000000000..f7d2f6f4a3
--- /dev/null
+++ b/web/app/components/workflow/zoom-in-out.tsx
@@ -0,0 +1,96 @@
+import type { FC } from 'react'
+import {
+  Fragment,
+  memo,
+  useState,
+} from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { SearchLg } from '@/app/components/base/icons/src/vender/line/general'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+
+const ZOOM_IN_OUT_OPTIONS = [
+  [
+    {
+      key: 'in',
+      text: 'Zoom In',
+    },
+    {
+      key: 'out',
+      text: 'Zoom Out',
+    },
+  ],
+  [
+    {
+      key: 'to50',
+      text: 'Zoom to 50%',
+    },
+    {
+      key: 'to100',
+      text: 'Zoom to 100%',
+    },
+  ],
+  [
+    {
+      key: 'fit',
+      text: 'Zoom to Fit',
+    },
+  ],
+]
+
+const ZoomInOut: FC = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      placement='top-start'
+      open={open}
+      onOpenChange={setOpen}
+      offset={4}
+    >
+      <PortalToFollowElemTrigger asChild onClick={() => setOpen(v => !v)}>
+        <div className={`
+          absolute left-6 bottom-6
+          flex items-center px-2.5 h-9 cursor-pointer rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg
+          text-[13px] text-gray-500 z-10
+        `}>
+          <SearchLg className='mr-1 w-4 h-4' />
+          100%
+          <ChevronDown className='ml-1 w-4 h-4' />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent>
+        <div className='w-[168px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg'>
+          {
+            ZOOM_IN_OUT_OPTIONS.map((options, i) => (
+              <Fragment key={i}>
+                {
+                  i !== 0 && (
+                    <div className='h-[1px] bg-gray-100' />
+                  )
+                }
+                <div className='p-1'>
+                  {
+                    options.map(option => (
+                      <div
+                        key={option.key}
+                        className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer text-sm text-gray-700'
+                      >
+                        {option.text}
+                      </div>
+                    ))
+                  }
+                </div>
+              </Fragment>
+            ))
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(ZoomInOut)