From 687661eef7328e80fc03d269cb7230ad8661b88a Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 23 Aug 2024 16:12:03 +0800
Subject: [PATCH] new style of feature panel

---
 .../new-feature-panel/dialog-wrapper.tsx      | 57 +++++++++++++
 .../base/features/new-feature-panel/index.tsx | 36 ++++++++
 web/app/components/workflow/features.tsx      | 82 +++++++++----------
 web/i18n/en-US/workflow.ts                    |  1 +
 web/i18n/zh-Hans/workflow.ts                  |  1 +
 5 files changed, 135 insertions(+), 42 deletions(-)
 create mode 100644 web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
 create mode 100644 web/app/components/base/features/new-feature-panel/index.tsx

diff --git a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
new file mode 100644
index 0000000000..f076c186c5
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
@@ -0,0 +1,57 @@
+import { Fragment, useCallback } from 'react'
+import type { ReactNode } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import cn from '@/utils/classnames'
+
+type DialogProps = {
+  className?: string
+  children: ReactNode
+  show: boolean
+  onClose?: () => void
+}
+
+const DialogWrapper = ({
+  className,
+  children,
+  show,
+  onClose,
+}: DialogProps) => {
+  const close = useCallback(() => onClose?.(), [onClose])
+  return (
+    <Transition appear show={show} as={Fragment}>
+      <Dialog as="div" className="relative z-40" onClose={close}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black bg-opacity-25" />
+        </Transition.Child>
+
+        <div className="fixed inset-0">
+          <div className="flex flex-col items-end justify-center min-h-full pt-[112px] pb-2">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className={cn('grow relative w-[420px] h-[calc(100vh-120px)] p-0 overflow-hidden text-left align-middle transition-all transform border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] border-components-panel-border shadow-xl rounded-l-2xl', className)}>
+                {children}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition >
+  )
+}
+
+export default DialogWrapper
diff --git a/web/app/components/base/features/new-feature-panel/index.tsx b/web/app/components/base/features/new-feature-panel/index.tsx
new file mode 100644
index 0000000000..fb35a45c8b
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/index.tsx
@@ -0,0 +1,36 @@
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
+import DialogWrapper from '@/app/components/base/features/new-feature-panel/dialog-wrapper'
+
+type Props = {
+  show: boolean
+  disabled: boolean
+  onChange: () => void
+  onClose: () => void
+}
+
+const NewFeaturePanel = ({ show, onClose }: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <DialogWrapper
+      className='flex'
+      show={show}
+      onClose={onClose}
+    >
+      <div className='grow flex flex-col h-full bg-components-panel-bg-alt'>
+        <div className='shrink-0 flex justify-between p-4 pb-3'>
+          <div>
+            <div className='text-text-primary system-xl-semibold'>{t('workflow.common.features')}</div>
+            <div className='text-text-tertiary body-xs-regular'>{t('workflow.common.featuresDescription')}</div>
+          </div>
+          <div className='w-8 h-8 p-2 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
+        </div>
+        <div className='grow overflow-y-auto pb-4'>
+        </div>
+      </div>
+    </DialogWrapper>
+  )
+}
+
+export default NewFeaturePanel
diff --git a/web/app/components/workflow/features.tsx b/web/app/components/workflow/features.tsx
index 60a47bf177..43bbfa3a35 100644
--- a/web/app/components/workflow/features.tsx
+++ b/web/app/components/workflow/features.tsx
@@ -2,22 +2,14 @@ import {
   memo,
   useCallback,
 } from 'react'
-import { useTranslation } from 'react-i18next'
-import { RiCloseLine } from '@remixicon/react'
 import { useStore } from './store'
 import {
-  useIsChatMode,
   useNodesReadOnly,
   useNodesSyncDraft,
 } from './hooks'
-import {
-  FeaturesChoose,
-  FeaturesPanel,
-} from '@/app/components/base/features'
+import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 
 const Features = () => {
-  const { t } = useTranslation()
-  const isChatMode = useIsChatMode()
   const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
   const { nodesReadOnly } = useNodesReadOnly()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
@@ -27,39 +19,45 @@ const Features = () => {
   }, [handleSyncWorkflowDraft])
 
   return (
-    <div className='fixed top-16 left-2 bottom-2 w-[600px] rounded-2xl border-[0.5px] border-gray-200 bg-white shadow-xl z-10'>
-      <div className='flex items-center justify-between px-4 pt-3'>
-        {t('workflow.common.features')}
-        <div className='flex items-center'>
-          {
-            isChatMode && (
-              <>
-                <FeaturesChoose
-                  disabled={nodesReadOnly}
-                  onChange={handleFeaturesChange}
-                />
-                <div className='mx-3 w-[1px] h-[14px] bg-gray-200'></div>
-              </>
-            )
-          }
-          <div
-            className='flex items-center justify-center w-6 h-6 cursor-pointer'
-            onClick={() => setShowFeaturesPanel(false)}
-          >
-            <RiCloseLine className='w-4 h-4 text-gray-500' />
-          </div>
-        </div>
-      </div>
-      <div className='p-4'>
-        <FeaturesPanel
-          disabled={nodesReadOnly}
-          onChange={handleFeaturesChange}
-          openingStatementProps={{
-            onAutoAddPromptVariable: () => {},
-          }}
-        />
-      </div>
-    </div>
+    <NewFeaturePanel
+      show
+      disabled={nodesReadOnly}
+      onChange={handleFeaturesChange}
+      onClose={() => setShowFeaturesPanel(false)}
+    />
+    // <div className='fixed top-16 left-2 bottom-2 w-[600px] rounded-2xl border-[0.5px] border-gray-200 bg-white shadow-xl z-10'>
+    //   <div className='flex items-center justify-between px-4 pt-3'>
+    //     {t('workflow.common.features')}
+    //     <div className='flex items-center'>
+    //       {
+    //         isChatMode && (
+    //           <>
+    //             <FeaturesChoose
+    //               disabled={nodesReadOnly}
+    //               onChange={handleFeaturesChange}
+    //             />
+    //             <div className='mx-3 w-[1px] h-[14px] bg-gray-200'></div>
+    //           </>
+    //         )
+    //       }
+    //       <div
+    //         className='flex items-center justify-center w-6 h-6 cursor-pointer'
+    //         onClick={() => setShowFeaturesPanel(false)}
+    //       >
+    //         <RiCloseLine className='w-4 h-4 text-gray-500' />
+    //       </div>
+    //     </div>
+    //   </div>
+    //   <div className='p-4'>
+    //     <FeaturesPanel
+    //       disabled={nodesReadOnly}
+    //       onChange={handleFeaturesChange}
+    //       openingStatementProps={{
+    //         onAutoAddPromptVariable: () => {},
+    //       }}
+    //     />
+    //   </div>
+    // </div>
   )
 }
 
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 2c99e08228..4ff7bf452f 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -19,6 +19,7 @@ const translation = {
     goBackToEdit: 'Go back to editor',
     conversationLog: 'Conversation Log',
     features: 'Features',
+    featuresDescription: 'Enhance web app user experience',
     debugAndPreview: 'Preview',
     restart: 'Restart',
     currentDraft: 'Current Draft',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 1c12c2244b..03c43d0fda 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -19,6 +19,7 @@ const translation = {
     goBackToEdit: '返回编辑模式',
     conversationLog: '对话记录',
     features: '功能',
+    featuresDescription: '增强 web app 用户体验',
     debugAndPreview: '预览',
     restart: '重新开始',
     currentDraft: '当前草稿',