Commit 569315ee authored by JzoNg's avatar JzoNg

add tip for chatbot orchestrate

parent 4c7941ad
...@@ -23,11 +23,13 @@ import TooltipPlus from '@/app/components/base/tooltip-plus' ...@@ -23,11 +23,13 @@ import TooltipPlus from '@/app/components/base/tooltip-plus'
export type AppFormProps = { export type AppFormProps = {
onConfirm: () => void onConfirm: () => void
onHide: () => void onHide: () => void
onTipChange: (tip: string) => void
} }
const AppForm = ({ const AppForm = ({
onConfirm, onConfirm,
onHide, onHide,
onTipChange,
}: AppFormProps) => { }: AppFormProps) => {
const { t } = useTranslation() const { t } = useTranslation()
const router = useRouter() const router = useRouter()
...@@ -89,7 +91,7 @@ const AppForm = ({ ...@@ -89,7 +91,7 @@ const AppForm = ({
return ( return (
<div className='overflow-y-auto'> <div className='overflow-y-auto'>
{/* app type */} {/* 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='py-2 text-sm leading-[20px] font-medium text-gray-900'>{t('app.newApp.captionAppType')}</div>
<div className='flex gap-2'> <div className='flex gap-2'>
<TooltipPlus <TooltipPlus
...@@ -149,7 +151,7 @@ const AppForm = ({ ...@@ -149,7 +151,7 @@ const AppForm = ({
</div> </div>
</div> </div>
{showChatBotType && ( {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='py-2 text-sm leading-[20px] font-medium text-gray-900'>{t('app.newApp.chatbotType')}</div>
<div className='flex gap-2'> <div className='flex gap-2'>
<div <div
...@@ -162,7 +164,12 @@ const AppForm = ({ ...@@ -162,7 +164,12 @@ const AppForm = ({
}} }}
> >
<div className='h-5 text-sm font-medium leading-5'>{t('app.newApp.basic')}</div> <div className='h-5 text-sm font-medium leading-5'>{t('app.newApp.basic')}</div>
<HelpCircle className='w-[14px] h-[14px] text-gray-400 hover:text-gray-500' /> <div
onMouseEnter={() => onTipChange('BASIC')}
onMouseLeave={() => onTipChange('')}
>
<HelpCircle className='w-[14px] h-[14px] text-gray-400 hover:text-gray-500' />
</div>
</div> </div>
<div <div
className={cn( className={cn(
...@@ -173,8 +180,13 @@ const AppForm = ({ ...@@ -173,8 +180,13 @@ const AppForm = ({
setAppMode('advanced-chat') 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>
<HelpCircle className='w-[14px] h-[14px] text-gray-400 hover:text-gray-500' /> <div
onMouseEnter={() => onTipChange('ADVANCED')}
onMouseLeave={() => onTipChange('')}
>
<HelpCircle className='w-[14px] h-[14px] text-gray-400 hover:text-gray-500' />
</div>
</div> </div>
</div> </div>
</div> </div>
......
'use client' 'use client'
import { useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import s from './style.module.css'
import NewAppDialog from './newAppDialog' import NewAppDialog from './newAppDialog'
import AppForm from './appForm' import AppForm from './appForm'
import AppList, { PageType } from '@/app/components/explore/app-list' import AppList, { PageType } from '@/app/components/explore/app-list'
...@@ -14,6 +16,7 @@ type CreateAppDialogProps = { ...@@ -14,6 +16,7 @@ type CreateAppDialogProps = {
const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) => { const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
const { t } = useTranslation() const { t } = useTranslation()
const [showInstruction, setShowInstruction] = useState<string>('')
return ( return (
<NewAppDialog <NewAppDialog
...@@ -26,13 +29,40 @@ const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) => ...@@ -26,13 +29,40 @@ const CreateAppDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) =>
{/* Heading */} {/* 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> <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 */} {/* app form */}
<AppForm onHide={onClose} onConfirm={onSuccess}/> <AppForm onHide={onClose} onConfirm={onSuccess} onTipChange={setShowInstruction}/>
</div> </div>
{/* template list */} {/* template list */}
<div className='grow flex flex-col h-full bg-gray-100'> <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> <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} /> <AppList pageType={PageType.CREATE} />
</div> </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 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}> <div className='absolute right-6 top-6 p-2 cursor-pointer z-20' onClick={onClose}>
<XClose className='w-4 h-4 text-gray-500' /> <XClose className='w-4 h-4 text-gray-500' />
......
.basicPic {
background-image: url('./basic.png')
}
.advancedPic {
background-image: url('./advanced.png')
}
...@@ -29,7 +29,11 @@ const translation = { ...@@ -29,7 +29,11 @@ const translation = {
workflowDescription: 'Description text here', workflowDescription: 'Description text here',
chatbotType: 'Chatbot orchestrate method', chatbotType: 'Chatbot orchestrate method',
basic: 'Basic Orchestrate', 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', captionName: 'App icon & name',
appNamePlaceholder: 'Give your app a name', appNamePlaceholder: 'Give your app a name',
captionDescription: 'Description', captionDescription: 'Description',
......
...@@ -28,7 +28,11 @@ const translation = { ...@@ -28,7 +28,11 @@ const translation = {
workflowDescription: 'Description text here', workflowDescription: 'Description text here',
chatbotType: '聊天助手编排方法', chatbotType: '聊天助手编排方法',
basic: '基础编排', basic: '基础编排',
workflow: '工作流编排', basicFor: '新手适用',
basicDescription: '基本编排允许使用简单的设置编排聊天机器人应用程序,而无需修改内置提示。 它适合初学者。',
advanced: '工作流编排',
advancedFor: '进阶用户适用',
advancedDescription: '工作流编排以工作流的形式编排聊天机器人,提供高度的自定义,包括编辑内置提示的能力。 它适合有经验的用户。',
captionName: '图标 & 名称', captionName: '图标 & 名称',
appNamePlaceholder: '给你的应用起个名字', appNamePlaceholder: '给你的应用起个名字',
captionDescription: '描述', captionDescription: '描述',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment