add debug-and-preview

web/app/components/workflow/debug-and-preview/chat-wrapper.tsx

+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

web/app/components/workflow/debug-and-preview/index.tsx

+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

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

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'}
         `}