From 13174aac18b5ef2b1f013cbc206c6a916cf92d8d Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Thu, 7 Mar 2024 11:21:59 +0800
Subject: [PATCH] debug and preview

---
 .../panel/debug-and-preview/chat-wrapper.tsx  |  9 ++--
 .../panel/debug-and-preview/index.tsx         |  7 ++-
 .../panel/debug-and-preview/user-input.tsx    | 47 +++++++++++++++++++
 web/app/components/workflow/panel/record.tsx  | 13 ++++-
 .../components/workflow/panel/run-history.tsx |  4 +-
 web/i18n/en-US/workflow.ts                    |  3 ++
 web/i18n/zh-Hans/workflow.ts                  |  3 ++
 7 files changed, 76 insertions(+), 10 deletions(-)
 create mode 100644 web/app/components/workflow/panel/debug-and-preview/user-input.tsx

diff --git a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
index 1542ff624f..4aca3ed2b9 100644
--- a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
@@ -1,26 +1,25 @@
+import UserInput from './user-input'
 import Chat from '@/app/components/base/chat/chat'
 import { useChat } from '@/app/components/base/chat/chat/hooks'
 
 const ChatWrapper = () => {
   const {
     handleStop,
-    isResponsing,
+    isResponding,
     suggestedQuestions,
   } = useChat()
 
   return (
     <Chat
       chatList={[]}
-      isResponsing={isResponsing}
+      isResponding={isResponding}
       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>
-      )}
+      chatNode={<UserInput />}
       allToolIcons={{}}
       suggestedQuestions={suggestedQuestions}
     />
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index 6b84be64e4..3ca359f011 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -1,14 +1,17 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 import ChatWrapper from './chat-wrapper'
 
 const DebugAndPreview: FC = () => {
+  const { t } = useTranslation()
+
   return (
     <div
       className='flex flex-col w-[400px] h-full rounded-l-2xl border border-black/[0.02] shadow-xl'
       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='shrink-0 flex items-center justify-between px-4 pt-3 pb-2 font-semibold text-gray-900'>
+        {t('workflow.common.debugAndPreview').toLocaleUpperCase()}
         <div className='h-8' />
       </div>
       <div className='grow rounded-b-2xl'>
diff --git a/web/app/components/workflow/panel/debug-and-preview/user-input.tsx b/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
new file mode 100644
index 0000000000..2fb37aa457
--- /dev/null
+++ b/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
@@ -0,0 +1,47 @@
+import {
+  memo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+
+const UserInput = () => {
+  const { t } = useTranslation()
+  const [expanded, setExpanded] = useState(true)
+
+  return (
+    <div
+      className={`
+        rounded-xl border
+        ${!expanded ? 'bg-indigo-25 border-indigo-100 shadow-none' : 'bg-white shadow-xs border-transparent'}
+      `}
+    >
+      <div
+        className={`
+          flex items-center px-2 pt-4 h-[18px] text-[13px] font-semibold cursor-pointer
+          ${!expanded ? 'text-indigo-800' : 'text-gray-800'}
+        `}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <ChevronDown
+          className={`mr-1 w-3 h-3 ${!expanded ? '-rotate-90 text-indigo-600' : 'text-gray-300'}`}
+        />
+        {t('workflow.panel.userInputField').toLocaleUpperCase()}
+      </div>
+      <div className='px-2 pt-1 pb-3'>
+        {
+          expanded && (
+            <div className='py-2 text-[13px] text-gray-900'>
+              <div className='flex px-4 py-1'>
+                <div className='shrink-0 mr-4 leading-8'>Service Name</div>
+                <input className='grow px-3 h-8 appearance-none outline-none rounded-lg bg-gray-100' />
+              </div>
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+export default memo(UserInput)
diff --git a/web/app/components/workflow/panel/record.tsx b/web/app/components/workflow/panel/record.tsx
index dd7ef18861..f88a3f681d 100644
--- a/web/app/components/workflow/panel/record.tsx
+++ b/web/app/components/workflow/panel/record.tsx
@@ -1,14 +1,23 @@
+import { memo } from 'react'
 import Run from '../run'
+import { useStore } from '../store'
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 
 const Record = () => {
   return (
     <div className='flex flex-col w-[400px] h-full rounded-2xl border-[0.5px] border-gray-200 shadow-xl bg-white'>
-      <div className='p-4 pb-1 text-base font-semibold text-gray-900'>
+      <div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
         Test Run#5
+        <div
+          className='flex items-center justify-center w-6 h-6 cursor-pointer'
+          onClick={() => useStore.setState({ runTaskId: '' })}
+        >
+          <XClose className='w-4 h-4 text-gray-500' />
+        </div>
       </div>
       <Run activeTab='RESULT' appId='' />
     </div>
   )
 }
 
-export default Record
+export default memo(Record)
diff --git a/web/app/components/workflow/panel/run-history.tsx b/web/app/components/workflow/panel/run-history.tsx
index 22bc4e0e59..b21eade3ee 100644
--- a/web/app/components/workflow/panel/run-history.tsx
+++ b/web/app/components/workflow/panel/run-history.tsx
@@ -1,16 +1,18 @@
 import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import { AlertCircle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { useStore } from '@/app/components/workflow/store'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
 const RunHistory = () => {
+  const { t } = useTranslation()
   const appDetail = useAppStore(state => state.appDetail)
 
   return (
     <div className='ml-2 w-[200px] h-full bg-white border-[0.5px] border-gray-200 shadow-xl rounded-l-2xl'>
       <div className='flex items-center justify-between px-4 pt-3 text-base font-semibold text-gray-900'>
-        Run History
+        {t('workflow.common.runHistory')}
         <div
           className='flex items-center justify-center w-6 h-6 cursor-pointer'
           onClick={() => useStore.setState({ showRunHistory: false })}
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 961dd4a0c8..8a478643f3 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -47,6 +47,9 @@ const translation = {
     zoomTo100: 'Zoom to 100%',
     zoomToFit: 'Zoom to Fit',
   },
+  panel: {
+    userInputField: 'User Input Field',
+  },
   nodes: {
     common: {
       outputVars: 'Output Variables',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 93ec1562a8..a828ff4e29 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -47,6 +47,9 @@ const translation = {
     zoomTo100: '放大到 100%',
     zoomToFit: '自适应视图',
   },
+  panel: {
+    userInputField: '用户输入字段',
+  },
   nodes: {
     common: {
       outputVars: '输出变量',