From f489736e06fc558e617bad5a69de7b43de6622fd Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Wed, 21 Feb 2024 20:23:03 +0800
Subject: [PATCH] add debug-and-preview

---
 .../debug-and-preview/chat-wrapper.tsx        | 30 +++++++++++++++++++
 .../workflow/debug-and-preview/index.tsx      | 21 +++++++++++++
 web/app/components/workflow/index.tsx         |  6 ++--
 .../nodes/_base/components/add-node/index.tsx |  2 +-
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 web/app/components/workflow/debug-and-preview/chat-wrapper.tsx
 create mode 100644 web/app/components/workflow/debug-and-preview/index.tsx

diff --git a/web/app/components/workflow/debug-and-preview/chat-wrapper.tsx b/web/app/components/workflow/debug-and-preview/chat-wrapper.tsx
new file mode 100644
index 0000000000..1542ff624f
--- /dev/null
+++ b/web/app/components/workflow/debug-and-preview/chat-wrapper.tsx
@@ -0,0 +1,30 @@
+import Chat from '@/app/components/base/chat/chat'
+import { useChat } from '@/app/components/base/chat/chat/hooks'
+
+const ChatWrapper = () => {
+  const {
+    handleStop,
+    isResponsing,
+    suggestedQuestions,
+  } = useChat()
+
+  return (
+    <Chat
+      chatList={[]}
+      isResponsing={isResponsing}
+      chatContainerclassName='px-4'
+      chatContainerInnerClassName='px-4'
+      chatFooterClassName='pb-4'
+      chatFooterInnerClassName='px-4'
+      onSend={() => {}}
+      onStopResponding={handleStop}
+      chatNode={(
+        <div className='h-[150px] rounded-xl bg-white shadow-xs'></div>
+      )}
+      allToolIcons={{}}
+      suggestedQuestions={suggestedQuestions}
+    />
+  )
+}
+
+export default ChatWrapper
diff --git a/web/app/components/workflow/debug-and-preview/index.tsx b/web/app/components/workflow/debug-and-preview/index.tsx
new file mode 100644
index 0000000000..970b2096c5
--- /dev/null
+++ b/web/app/components/workflow/debug-and-preview/index.tsx
@@ -0,0 +1,21 @@
+import type { FC } from 'react'
+import ChatWrapper from './chat-wrapper'
+
+const DebugAndPreview: FC = () => {
+  return (
+    <div
+      className='flex flex-col absolute top-14 right-0 bottom-2 w-[400px] rounded-l-2xl border border-black/[0.02] shadow-xl z-10'
+      style={{ background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)' }}
+    >
+      <div className='shrink-0 flex items-center justify-between px-4 pt-3 pb-2'>
+        Debug and Preview
+        <div className='h-8' />
+      </div>
+      <div className='grow rounded-b-2xl'>
+        <ChatWrapper />
+      </div>
+    </div>
+  )
+}
+
+export default DebugAndPreview
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index c55506e386..2a76e0128b 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -18,7 +18,8 @@ import Header from './header'
 import CustomNode, {
   Panel,
 } from './nodes'
-import AppInfoPanel from './app-info-panel'
+// import AppInfoPanel from './app-info-panel'
+import DebugAndPreview from './debug-and-preview'
 import ZoomInOut from './zoom-in-out'
 import CustomEdge from './custom-edge'
 import type { Node } from './types'
@@ -40,7 +41,8 @@ const Workflow = () => {
   return (
     <div className='relative w-full h-full'>
       <Header />
-      <AppInfoPanel />
+      {/* <AppInfoPanel /> */}
+      <DebugAndPreview />
       <Panel />
       <ZoomInOut />
       <ReactFlow
diff --git a/web/app/components/workflow/nodes/_base/components/add-node/index.tsx b/web/app/components/workflow/nodes/_base/components/add-node/index.tsx
index 8e91423173..1444d022bb 100644
--- a/web/app/components/workflow/nodes/_base/components/add-node/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-node/index.tsx
@@ -70,7 +70,7 @@ const AddNode: FC<AddNodeProps> = ({
         ref={buttonRef}
         onClick={handleAdd}
         className={`
-          hidden absolute -bottom-2 left-1/2 -translate-x-1/2 items-center justify-center 
+          hidden absolute -right-2 top-4 items-center justify-center 
           w-4 h-4 rounded-full bg-primary-600 cursor-pointer z-10 group-hover:flex
           ${buttonShouldShow && '!flex'}
         `}