From 3a8f516dfc16c14ad3965ca1a50236e13ff054e8 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 26 Aug 2024 11:48:33 +0800
Subject: [PATCH] more like this

---
 .../new-feature-panel/dialog-wrapper.tsx      |  4 +-
 .../base/features/new-feature-panel/index.tsx | 66 +++++++++++++++++--
 web/app/components/base/features/store.ts     |  3 +
 web/app/components/base/features/types.ts     |  4 ++
 web/app/components/workflow/features.tsx      |  3 +
 5 files changed, 74 insertions(+), 6 deletions(-)

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
index e03c05b5af..d1900c191f 100644
--- a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
+++ b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
@@ -35,7 +35,7 @@ const DialogWrapper = ({
         </Transition.Child>
 
         <div className="fixed inset-0">
-          <div className={cn('flex flex-col items-end justify-center min-h-full pb-2', inWorkflow ? 'pt-[112px]' : 'pt-[56px]')}>
+          <div className={cn('flex flex-col items-end justify-center min-h-full pb-2', inWorkflow ? 'pt-[112px]' : 'pt-[56px] pr-2')}>
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
@@ -45,7 +45,7 @@ const DialogWrapper = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className={cn('grow flex relative w-[420px] h-0 p-0 overflow-hidden text-left align-middle transition-all transform bg-components-panel-bg-alt border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] border-components-panel-border shadow-xl rounded-l-2xl', className)}>
+              <Dialog.Panel className={cn('grow flex relative w-[420px] h-0 p-0 overflow-hidden text-left align-middle transition-all transform bg-components-panel-bg-alt border-components-panel-border shadow-xl', inWorkflow ? 'border-t-[0.5px] border-l-[0.5px] border-b-[0.5px] rounded-l-2xl' : 'border-[0.5px] rounded', className)}>
                 {children}
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/app/components/base/features/new-feature-panel/index.tsx b/web/app/components/base/features/new-feature-panel/index.tsx
index bc807f8be4..af9f3a9c97 100644
--- a/web/app/components/base/features/new-feature-panel/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/index.tsx
@@ -1,16 +1,47 @@
+import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiCloseLine } from '@remixicon/react'
+import produce from 'immer'
+import {
+  RiCloseLine,
+  RiQuestionLine,
+  RiSparklingFill,
+} from '@remixicon/react'
 import DialogWrapper from '@/app/components/base/features/new-feature-panel/dialog-wrapper'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { FeatureEnum } from '@/app/components/base/features/types'
+import Switch from '@/app/components/base/switch'
+import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
   show: boolean
+  isChatMode: boolean
   disabled: boolean
-  onChange: () => void
+  onChange?: OnFeaturesChange
   onClose: () => void
 }
 
-const NewFeaturePanel = ({ show, onClose }: Props) => {
+const NewFeaturePanel = ({ show, isChatMode, onChange, onClose }: Props) => {
   const { t } = useTranslation()
+  const features = useFeatures(s => s.features)
+  const featuresStore = useFeaturesStore()
+
+  const handleChange = useCallback((type: FeatureEnum, enabled: boolean) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+
+    const newFeatures = produce(features, (draft) => {
+      draft[type] = {
+        ...draft[type],
+        enabled,
+      }
+    })
+    setFeatures(newFeatures)
+    if (onChange)
+      onChange(newFeatures)
+  }, [featuresStore, onChange])
 
   return (
     <DialogWrapper
@@ -18,6 +49,7 @@ const NewFeaturePanel = ({ show, onClose }: Props) => {
       onClose={onClose}
     >
       <div className='grow flex flex-col h-full'>
+        {/* header */}
         <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>
@@ -25,7 +57,33 @@ const NewFeaturePanel = ({ show, onClose }: Props) => {
           </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'>
+        {/* list */}
+        <div className='grow overflow-y-auto px-4 pb-4'>
+          {/* more like this */}
+          {!isChatMode && (
+            <div className='mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'>
+              <div className='mb-2 flex items-center gap-2'>
+                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
+                  <RiSparklingFill className='w-4 h-4 text-text-primary-on-surface' />
+                </div>
+                <div className='grow flex items-center text-text-secondary system-sm-semibold'>
+                  {t('appDebug.feature.moreLikeThis.title')}
+                  <Tooltip
+                    htmlContent={
+                      <div className='w-[180px]'>
+                        {t('appDebug.feature.moreLikeThis.tip')}
+                      </div>
+                    }
+                    selector='feature-more-like-this'
+                  >
+                    <div className='ml-0.5 p-px'><RiQuestionLine className='w-3.5 h-3.5 text-text-quaternary' /></div>
+                  </Tooltip>
+                </div>
+                <Switch className='shrink-0' onChange={value => handleChange(FeatureEnum.moreLikeThis, value)} defaultValue={!!features.moreLikeThis?.enabled} />
+              </div>
+              <div className='text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.moreLikeThis.description')}</div>
+            </div>
+          )}
         </div>
       </div>
     </DialogWrapper>
diff --git a/web/app/components/base/features/store.ts b/web/app/components/base/features/store.ts
index a4c08d12d6..306640a08e 100644
--- a/web/app/components/base/features/store.ts
+++ b/web/app/components/base/features/store.ts
@@ -22,6 +22,9 @@ export type FeaturesStore = ReturnType<typeof createFeaturesStore>
 export const createFeaturesStore = (initProps?: Partial<FeaturesState>) => {
   const DEFAULT_PROPS: FeaturesState = {
     features: {
+      moreLikeThis: {
+        enabled: false,
+      },
       opening: {
         enabled: false,
       },
diff --git a/web/app/components/base/features/types.ts b/web/app/components/base/features/types.ts
index cdf6b0da1f..57b91aa3e1 100644
--- a/web/app/components/base/features/types.ts
+++ b/web/app/components/base/features/types.ts
@@ -4,6 +4,8 @@ export type EnabledOrDisabled = {
   enabled?: boolean
 }
 
+export type MoreLikeThis = EnabledOrDisabled
+
 export type OpeningStatement = EnabledOrDisabled & {
   opening_statement?: string
   suggested_questions?: string[]
@@ -34,6 +36,7 @@ export type FileUpload = {
 }
 
 export enum FeatureEnum {
+  moreLikeThis = 'moreLikeThis',
   opening = 'opening',
   suggested = 'suggested',
   text2speech = 'text2speech',
@@ -44,6 +47,7 @@ export enum FeatureEnum {
 }
 
 export type Features = {
+  [FeatureEnum.moreLikeThis]?: MoreLikeThis
   [FeatureEnum.opening]?: OpeningStatement
   [FeatureEnum.suggested]?: SuggestedQuestionsAfterAnswer
   [FeatureEnum.text2speech]?: TextToSpeech
diff --git a/web/app/components/workflow/features.tsx b/web/app/components/workflow/features.tsx
index 43bbfa3a35..80421dfba1 100644
--- a/web/app/components/workflow/features.tsx
+++ b/web/app/components/workflow/features.tsx
@@ -4,6 +4,7 @@ import {
 } from 'react'
 import { useStore } from './store'
 import {
+  useIsChatMode,
   useNodesReadOnly,
   useNodesSyncDraft,
 } from './hooks'
@@ -11,6 +12,7 @@ import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 
 const Features = () => {
   const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
+  const isChatMode = useIsChatMode()
   const { nodesReadOnly } = useNodesReadOnly()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
 
@@ -21,6 +23,7 @@ const Features = () => {
   return (
     <NewFeaturePanel
       show
+      isChatMode={isChatMode}
       disabled={nodesReadOnly}
       onChange={handleFeaturesChange}
       onClose={() => setShowFeaturesPanel(false)}