From 1ba3d3acd6ecf253249f2f3b97e53868bee81cd9 Mon Sep 17 00:00:00 2001
From: crazywoola <100913391+crazywoola@users.noreply.github.com>
Date: Mon, 26 Aug 2024 11:00:57 +0800
Subject: [PATCH] feat: replace show/hide workflow_steps with switch (#7627)

---
 .../app/overview/settings/index.tsx           | 21 ++++++++++++-------
 web/i18n/en-US/app-overview.ts                |  4 +++-
 web/i18n/zh-Hans/app-overview.ts              |  4 +++-
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index a67093183a..9e5d838ce6 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -215,14 +215,19 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           defaultValue={language}
           onSelect={item => setLanguage(item.value as Language)}
         />
-        {(appInfo.mode === 'workflow' || appInfo.mode === 'advanced-chat') && <>
-          <div className={`mt-6 mb-2 font-medium ${s.settingTitle} text-gray-900 `}>{t(`${prefixSettings}.workflow.title`)}</div>
-          <SimpleSelect
-            items={[{ name: t(`${prefixSettings}.workflow.show`), value: 'true' }, { name: t(`${prefixSettings}.workflow.hide`), value: 'false' }]}
-            defaultValue={inputInfo.show_workflow_steps ? 'true' : 'false'}
-            onSelect={item => setInputInfo({ ...inputInfo, show_workflow_steps: item.value === 'true' })}
-          />
-        </>}
+        <div className='w-full mt-8'>
+          <p className='system-xs-medium text-gray-500'>{t(`${prefixSettings}.workflow.title`)}</p>
+          <div className='flex justify-between items-center'>
+            <div className='font-medium system-sm-semibold flex-grow text-gray-900'>{t(`${prefixSettings}.workflow.subTitle`)}</div>
+            <Switch
+              disabled={!(appInfo.mode === 'workflow' || appInfo.mode === 'advanced-chat')}
+              defaultValue={inputInfo.show_workflow_steps}
+              onChange={v => setInputInfo({ ...inputInfo, show_workflow_steps: v })}
+            />
+          </div>
+          <p className='body-xs-regular text-gray-500'>{t(`${prefixSettings}.workflow.showDesc`)}</p>
+        </div>
+
         {isChat && <> <div className={`mt-8 font-medium ${s.settingTitle} text-gray-900`}>{t(`${prefixSettings}.chatColorTheme`)}</div>
           <p className={`mt-1 ${s.settingsTip} text-gray-500`}>{t(`${prefixSettings}.chatColorThemeDesc`)}</p>
           <input className={`w-full mt-2 rounded-lg h-10 box-border px-3 ${s.projectName} bg-gray-100`}
diff --git a/web/i18n/en-US/app-overview.ts b/web/i18n/en-US/app-overview.ts
index d5f619887d..0b48c8135d 100644
--- a/web/i18n/en-US/app-overview.ts
+++ b/web/i18n/en-US/app-overview.ts
@@ -45,9 +45,11 @@ const translation = {
         webDescPlaceholder: 'Enter the description of the WebApp',
         language: 'Language',
         workflow: {
-          title: 'Workflow Steps',
+          title: 'Workflow',
+          subTitle: 'Workflow Details',
           show: 'Show',
           hide: 'Hide',
+          showDesc: 'Show or hide workflow details in WebApp',
         },
         chatColorTheme: 'Chat color theme',
         chatColorThemeDesc: 'Set the color theme of the chatbot',
diff --git a/web/i18n/zh-Hans/app-overview.ts b/web/i18n/zh-Hans/app-overview.ts
index 7b4f61fc13..6cc4ea1b0a 100644
--- a/web/i18n/zh-Hans/app-overview.ts
+++ b/web/i18n/zh-Hans/app-overview.ts
@@ -45,9 +45,11 @@ const translation = {
         webDescPlaceholder: '请输入 WebApp 的描述',
         language: '语言',
         workflow: {
-          title: '工作流详情',
+          title: '工作流',
+          subTitle: '工作流详情',
           show: '显示',
           hide: '隐藏',
+          showDesc: '在 WebApp 中展示或者隐藏工作流详情',
         },
         chatColorTheme: '聊天颜色主题',
         chatColorThemeDesc: '设置聊天机器人的颜色主题',