add tip for chatbot orchestrate

web/app/components/app/create-app-dialog/appForm.tsx

@@ -23,11 +23,13 @@ import TooltipPlus from '@/app/components/base/tooltip-plus'
 export type AppFormProps = {
   onConfirm: () => void
   onHide: () => void
+  onTipChange: (tip: string) => void
 }
 
 const AppForm = ({
   onConfirm,
   onHide,
+  onTipChange,
 }: AppFormProps) => {
   const { t } = useTranslation()
   const router = useRouter()
@@ -89,7 +91,7 @@ const AppForm = ({
   return (
     <div className='overflow-y-auto'>
       {/* app type */}
-      <div className='pt-2 px-8 w-[480px]'>
+      <div className='py-2 px-8 w-[480px]'>
         <div className='py-2 text-sm leading-[20px] font-medium text-gray-900'>{t('app.newApp.captionAppType')}</div>
         <div className='flex gap-2'>
           <TooltipPlus
@@ -149,7 +151,7 @@ const AppForm = ({
         </div>
       </div>
       {showChatBotType && (
-        <div className='pt-2 px-8 w-[480px]'>
+        <div className='py-2 px-8 w-[480px]'>
           <div className='py-2 text-sm leading-[20px] font-medium text-gray-900'>{t('app.newApp.chatbotType')}</div>
           <div className='flex gap-2'>
             <div
@@ -162,8 +164,13 @@ const AppForm = ({
               }}
             >
               <div className='h-5 text-sm font-medium leading-5'>{t('app.newApp.basic')}</div>
+              <div
+                onMouseEnter={() => onTipChange('BASIC')}
+                onMouseLeave={() => onTipChange('')}
+              >
                 <HelpCircle className='w-[14px] h-[14px] text-gray-400 hover:text-gray-500' />
               </div>
+            </div>
             <div
               className={cn(
                 'relative grow flex-[50%] pl-3 py-2 pr-2 flex justify-between items-center rounded-lg border border-gray-100 bg-gray-25 text-gray-700 cursor-pointer hover:bg-white hover:shadow-xs hover:border-gray-300',
@@ -173,11 +180,16 @@ const AppForm = ({
                 setAppMode('advanced-chat')
               }}
             >
-              <div className='h-5 text-sm font-medium leading-5'>{t('app.newApp.workflow')}</div>
+              <div className='h-5 text-sm font-medium leading-5'>{t('app.newApp.advanced')}</div>
+              <div
+                onMouseEnter={() => onTipChange('ADVANCED')}
+                onMouseLeave={() => onTipChange('')}
+              >
                 <HelpCircle className='w-[14px] h-[14px] text-gray-400 hover:text-gray-500' />
               </div>
             </div>
           </div>
+        </div>
       )}
       {/* icon & name */}
       <div className='pt-2 px-8'>

web/app/components/app/create-app-dialog/index.tsx

 'use client'
-
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import s from './style.module.css'
 import NewAppDialog from './newAppDialog'
 import AppForm from './appForm'
 import AppList, { PageType } from '@/app/components/explore/app-list'
@@ -14,6 +16,7 @@ type CreateAppDialogProps = {
 
 const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
   const { t } = useTranslation()
+  const [showInstruction, setShowInstruction] = useState<string>('')
 
   return (
     <NewAppDialog
@@ -26,13 +29,40 @@ const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) =>
         {/* Heading */}
         <div className='shrink-0 pl-8 pr-6 pt-6 pb-3 bg-white rounded-ss-xl text-xl leading-[30px] font-semibold text-gray-900 z-10'>{t('app.newApp.startFromBlank')}</div>
         {/* app form */}
-        <AppForm onHide={onClose} onConfirm={onSuccess}/>
+        <AppForm onHide={onClose} onConfirm={onSuccess} onTipChange={setShowInstruction}/>
       </div>
       {/* template list */}
       <div className='grow flex flex-col h-full bg-gray-100'>
         <div className='shrink-0 pl-8 pr-6 pt-6 pb-3 bg-gray-100 rounded-se-xl text-xl leading-[30px] font-semibold text-gray-900 z-10'>{t('app.newApp.startFromTemplate')}</div>
         <AppList pageType={PageType.CREATE} />
       </div>
+      <div
+        className={cn(
+          'hidden absolute left-[452px] top-[68px] w-[376px] rounded-xl bg-white border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-lg',
+          showInstruction && '!block',
+        )}
+      >
+        {showInstruction === 'BASIC' && (
+          <>
+            <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain', s.basicPic)}/>
+            <div className='px-4 pb-2'>
+              <div className='text-gray-700 text-md leading-6 font-semibold'>{t('app.newApp.basic')}</div>
+              <div className='text-orange-500 text-xs leading-[18px] font-medium'>{t('app.newApp.basicFor')}</div>
+              <div className='mt-1 text-gray-500 text-sm leading-5'>{t('app.newApp.basicDescription')}</div>
+            </div>
+          </>
+        )}
+        {showInstruction === 'ADVANCED' && (
+          <>
+            <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain', s.advancedPic)}/>
+            <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 className='absolute top-6 left-[464px] w-8 h-8 p-1 bg-white border-2 border-gray-200 rounded-2xl text-xs leading-[20px] font-medium text-gray-500 cursor-default z-20'>OR</div>
       <div className='absolute right-6 top-6 p-2 cursor-pointer z-20' onClick={onClose}>
         <XClose className='w-4 h-4 text-gray-500' />

web/app/components/app/create-app-dialog/style.module.css

+.basicPic {
+  background-image: url('./basic.png')
+}
+
+.advancedPic {
+  background-image: url('./advanced.png')
+}

web/i18n/en-US/app.ts

@@ -29,7 +29,11 @@ const translation = {
     workflowDescription: 'Description text here',
     chatbotType: 'Chatbot orchestrate method',
     basic: 'Basic Orchestrate',
-    workflow: 'Workflow Orchestrate',
+    basicFor: 'FOR BEGINNERS',
+    basicDescription: 'Basic Orchestrate allows for the orchestration of a Chatbot app using simple settings, without the ability to modify built-in prompts. It is suitable for beginners.',
+    advanced: 'Workflow Orchestrate',
+    advancedFor: 'FOR ADVANCED USERS',
+    advancedDescription: 'Workflow Orchestrate orchestrates Chatbots in the form of workflows, offering a high degree of customization, including the ability to edit built-in prompts. It is suitable for experienced users.',
     captionName: 'App icon & name',
     appNamePlaceholder: 'Give your app a name',
     captionDescription: 'Description',

web/i18n/zh-Hans/app.ts

@@ -28,7 +28,11 @@ const translation = {
     workflowDescription: 'Description text here',
     chatbotType: '聊天助手编排方法',
     basic: '基础编排',
-    workflow: '工作流编排',
+    basicFor: '新手适用',
+    basicDescription: '基本编排允许使用简单的设置编排聊天机器人应用程序，而无需修改内置提示。 它适合初学者。',
+    advanced: '工作流编排',
+    advancedFor: '进阶用户适用',
+    advancedDescription: '工作流编排以工作流的形式编排聊天机器人，提供高度的自定义，包括编辑内置提示的能力。 它适合有经验的用户。',
     captionName: '图标 & 名称',
     appNamePlaceholder: '给你的应用起个名字',
     captionDescription: '描述',