From d86ef15d9a14a31eeb03357863bdb36417612418 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 7 Mar 2024 21:39:15 +0800
Subject: [PATCH] add tip for switch

---
 web/app/components/app-sidebar/app-info.tsx   |  38 ++++++++++++++++--
 .../{switch-modal => }/completion.png         | Bin
 .../app-sidebar/{switch-modal => }/expert.png | Bin
 .../components/app-sidebar/style.module.css   |   8 ++++
 web/i18n/en-US/app.ts                         |   1 +
 web/i18n/zh-Hans/app.ts                       |   1 +
 6 files changed, 45 insertions(+), 3 deletions(-)
 rename web/app/components/app-sidebar/{switch-modal => }/completion.png (100%)
 rename web/app/components/app-sidebar/{switch-modal => }/expert.png (100%)

diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index 567f9796a9..314429f317 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -4,6 +4,7 @@ import { useContext, useContextSelector } from 'use-context-selector'
 import cn from 'classnames'
 import React, { useCallback, useState } from 'react'
 import AppIcon from '../base/app-icon'
+import s from './style.module.css'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -39,6 +40,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
   const [showEditModal, setShowEditModal] = useState(false)
   const [showDuplicateModal, setShowDuplicateModal] = useState(false)
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+  const [showSwitchTip, setShowSwitchTip] = useState<string>('')
 
   const mutateApps = useContextSelector(
     AppsContext,
@@ -191,7 +193,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1002]'>
-          <div className='w-[320px] bg-white rounded-2xl shadow-xl'>
+          <div className='relative w-[320px] bg-white rounded-2xl shadow-xl'>
             {/* header */}
             <div className={cn('flex pl-4 pt-3 pr-3', !appDetail.description && 'pb-2')}>
               <div className='shrink-0 mr-2'>
@@ -232,7 +234,6 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
               <div className='px-4 py-2 text-gray-500 text-xs leading-[18px]'>{appDetail.description}</div>
             )}
             {/* operations */}
-            <div></div>
             <Divider className="!my-1" />
             <div className="w-full py-1">
               <div className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer' onClick={() => {
@@ -241,7 +242,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
               }}>
                 <span className='text-gray-700 text-sm leading-5'>{t('app.editApp')}</span>
               </div>
-              {appDetail.mode !== 'completion' && (
+              {appDetail.mode !== 'completion' && appDetail.model_config.prompt_type !== 'advanced' && (
                 <>
                   <div className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer' onClick={() => {
                     setOpen(false)
@@ -254,6 +255,19 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                   </div>
                 </>
               )}
+              {(appDetail.mode === 'completion' || appDetail.model_config.prompt_type === 'advanced') && (
+                <>
+                  <Divider className="!my-1" />
+                  <div
+                    className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer'
+                    onMouseEnter={() => setShowSwitchTip(appDetail.mode)}
+                    onMouseLeave={() => setShowSwitchTip('')}
+                    onClick={() => setShowSwitchTip(appDetail.mode)}
+                  >
+                    <span className='text-gray-700 text-sm leading-5'>{t('app.switch')}</span>
+                  </div>
+                </>
+              )}
               <Divider className="!my-1" />
               <div className='group h-9 py-2 px-3 mx-1 flex items-center hover:bg-red-50 rounded-lg cursor-pointer' onClick={() => {
                 setOpen(false)
@@ -264,6 +278,24 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                 </span>
               </div>
             </div>
+            {/* switch tip */}
+            <div
+              className={cn(
+                'hidden absolute left-[324px] top-0 w-[376px] rounded-xl bg-white border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-lg',
+                showSwitchTip && '!block',
+              )}
+            >
+              <div className={cn(
+                'w-full h-[256px] bg-center bg-no-repeat bg-contain',
+                showSwitchTip === 'chat' && s.expertPic,
+                showSwitchTip === 'completion' && s.completionPic,
+              )}/>
+              <div className='px-4 pb-2'>
+                <div className='text-gray-700 text-md leading-6 font-semibold'>{t('app.newApp.advanced')}</div>
+                <div className='text-orange-500 text-xs leading-[18px] font-medium'>{t('app.newApp.advancedFor')}</div>
+                <div className='mt-1 text-gray-500 text-sm leading-5'>{t('app.newApp.advancedDescription')}</div>
+              </div>
+            </div>
           </div>
         </PortalToFollowElemContent>
         {showEditModal && (
diff --git a/web/app/components/app-sidebar/switch-modal/completion.png b/web/app/components/app-sidebar/completion.png
similarity index 100%
rename from web/app/components/app-sidebar/switch-modal/completion.png
rename to web/app/components/app-sidebar/completion.png
diff --git a/web/app/components/app-sidebar/switch-modal/expert.png b/web/app/components/app-sidebar/expert.png
similarity index 100%
rename from web/app/components/app-sidebar/switch-modal/expert.png
rename to web/app/components/app-sidebar/expert.png
diff --git a/web/app/components/app-sidebar/style.module.css b/web/app/components/app-sidebar/style.module.css
index 77570ef376..722b35bc71 100644
--- a/web/app/components/app-sidebar/style.module.css
+++ b/web/app/components/app-sidebar/style.module.css
@@ -1,3 +1,11 @@
 .sidebar {
     border-right: 1px solid #F3F4F6;
+}
+
+.completionPic {
+background-image: url('./completion.png')
+}
+  
+.expertPic {
+background-image: url('./expert.png')
 }
\ No newline at end of file
diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts
index 933a02a6ef..3bcd636457 100644
--- a/web/i18n/en-US/app.ts
+++ b/web/i18n/en-US/app.ts
@@ -66,6 +66,7 @@ const translation = {
     ok: 'OK',
     cancel: 'Cancel',
   },
+  switch: 'Switch to Workflow Orchestrate',
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/app.ts b/web/i18n/zh-Hans/app.ts
index 70bdf279e6..3946c99730 100644
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@@ -65,6 +65,7 @@ const translation = {
     ok: '确认',
     cancel: '取消',
   },
+  switch: '迁移为工作流编排',
 }
 
 export default translation