Initial commit
This commit is contained in:
饺子大魔王
@@ -0,0 +1,47 @@
|
||||
import type { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { memo } from 'react'
|
||||
import Textarea from '@/app/components/base/textarea'
|
||||
|
||||
interface InputProps {
|
||||
form: any
|
||||
value: string
|
||||
onChange: (variable: string, value: string) => void
|
||||
}
|
||||
const FormInput: FC<InputProps> = ({
|
||||
form,
|
||||
value,
|
||||
onChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const {
|
||||
type,
|
||||
label,
|
||||
required,
|
||||
max_length,
|
||||
variable,
|
||||
} = form
|
||||
|
||||
if (type === 'paragraph') {
|
||||
return (
|
||||
<Textarea
|
||||
value={value}
|
||||
className='resize-none'
|
||||
onChange={e => onChange(variable, e.target.value)}
|
||||
placeholder={`${label}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
className='grow h-9 rounded-lg bg-gray-100 px-2.5 outline-none appearance-none'
|
||||
value={value || ''}
|
||||
maxLength={max_length}
|
||||
onChange={e => onChange(variable, e.target.value)}
|
||||
placeholder={`${label}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(FormInput)
|
||||
@@ -0,0 +1,117 @@
|
||||
import { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useChatWithHistoryContext } from '../context'
|
||||
import Input from './form-input'
|
||||
import { PortalSelect } from '@/app/components/base/select'
|
||||
import { InputVarType } from '@/app/components/workflow/types'
|
||||
import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
|
||||
|
||||
const Form = () => {
|
||||
const { t } = useTranslation()
|
||||
const {
|
||||
appParams,
|
||||
inputsForms,
|
||||
newConversationInputs,
|
||||
newConversationInputsRef,
|
||||
handleNewConversationInputsChange,
|
||||
isMobile,
|
||||
} = useChatWithHistoryContext()
|
||||
|
||||
const handleFormChange = useCallback((variable: string, value: any) => {
|
||||
handleNewConversationInputsChange({
|
||||
...newConversationInputsRef.current,
|
||||
[variable]: value,
|
||||
})
|
||||
}, [newConversationInputsRef, handleNewConversationInputsChange])
|
||||
|
||||
const renderField = (form: any) => {
|
||||
const {
|
||||
label,
|
||||
required,
|
||||
variable,
|
||||
options,
|
||||
} = form
|
||||
|
||||
if (form.type === 'text-input' || form.type === 'paragraph') {
|
||||
return (
|
||||
<Input
|
||||
form={form}
|
||||
value={newConversationInputs[variable]}
|
||||
onChange={handleFormChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
if (form.type === 'number') {
|
||||
return (
|
||||
<input
|
||||
className="grow h-9 rounded-lg bg-gray-100 px-2.5 outline-none appearance-none"
|
||||
type="number"
|
||||
value={newConversationInputs[variable] || ''}
|
||||
onChange={e => handleFormChange(variable, e.target.value)}
|
||||
placeholder={`${label}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
if (form.type === InputVarType.singleFile) {
|
||||
return (
|
||||
<FileUploaderInAttachmentWrapper
|
||||
value={newConversationInputs[variable] ? [newConversationInputs[variable]] : []}
|
||||
onChange={files => handleFormChange(variable, files[0])}
|
||||
fileConfig={{
|
||||
allowed_file_types: form.allowed_file_types,
|
||||
allowed_file_extensions: form.allowed_file_extensions,
|
||||
allowed_file_upload_methods: form.allowed_file_upload_methods,
|
||||
number_limits: 1,
|
||||
fileUploadConfig: (appParams as any).system_parameters,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
if (form.type === InputVarType.multiFiles) {
|
||||
return (
|
||||
<FileUploaderInAttachmentWrapper
|
||||
value={newConversationInputs[variable]}
|
||||
onChange={files => handleFormChange(variable, files)}
|
||||
fileConfig={{
|
||||
allowed_file_types: form.allowed_file_types,
|
||||
allowed_file_extensions: form.allowed_file_extensions,
|
||||
allowed_file_upload_methods: form.allowed_file_upload_methods,
|
||||
number_limits: form.max_length,
|
||||
fileUploadConfig: (appParams as any).system_parameters,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<PortalSelect
|
||||
popupClassName='w-[200px]'
|
||||
value={newConversationInputs[variable]}
|
||||
items={options.map((option: string) => ({ value: option, name: option }))}
|
||||
onSelect={item => handleFormChange(variable, item.value as string)}
|
||||
placeholder={`${label}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (!inputsForms.length)
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className='mb-4 py-2'>
|
||||
{
|
||||
inputsForms.map(form => (
|
||||
<div
|
||||
key={form.variable}
|
||||
className={`flex mb-3 last-of-type:mb-0 text-sm text-gray-900 ${isMobile && '!flex-wrap'}`}
|
||||
>
|
||||
<div className={`shrink-0 mr-2 py-2 w-[128px] ${isMobile && '!w-full'}`}>{form.label}</div>
|
||||
{renderField(form)}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Form
|
||||
@@ -0,0 +1,172 @@
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useChatWithHistoryContext } from '../context'
|
||||
import Form from './form'
|
||||
import Button from '@/app/components/base/button'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
import { MessageDotsCircle } from '@/app/components/base/icons/src/vender/solid/communication'
|
||||
import { Edit02 } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import { Star06 } from '@/app/components/base/icons/src/vender/solid/shapes'
|
||||
import LogoSite from '@/app/components/base/logo/logo-site'
|
||||
|
||||
const ConfigPanel = () => {
|
||||
const { t } = useTranslation()
|
||||
const {
|
||||
appData,
|
||||
inputsForms,
|
||||
handleStartChat,
|
||||
showConfigPanelBeforeChat,
|
||||
isMobile,
|
||||
} = useChatWithHistoryContext()
|
||||
const [collapsed, setCollapsed] = useState(true)
|
||||
const customConfig = appData?.custom_config
|
||||
const site = appData?.site
|
||||
|
||||
return (
|
||||
<div className='flex flex-col max-h-[80%] w-full max-w-[720px]'>
|
||||
<div
|
||||
className={`
|
||||
grow rounded-xl overflow-y-auto
|
||||
${showConfigPanelBeforeChat && 'border-[0.5px] border-gray-100 shadow-lg'}
|
||||
${!showConfigPanelBeforeChat && collapsed && 'border border-indigo-100'}
|
||||
${!showConfigPanelBeforeChat && !collapsed && 'border-[0.5px] border-gray-100 shadow-lg'}
|
||||
`}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
flex flex-wrap px-6 py-4 rounded-t-xl bg-indigo-25
|
||||
${isMobile && '!px-4 !py-3'}
|
||||
`}
|
||||
>
|
||||
{
|
||||
showConfigPanelBeforeChat && (
|
||||
<>
|
||||
<div className='flex items-center h-8 text-2xl font-semibold text-gray-800'>
|
||||
<AppIcon
|
||||
iconType={appData?.site?.icon_type}
|
||||
icon={appData?.site?.icon}
|
||||
background='transparent'
|
||||
imageUrl={appData?.site?.icon_url}
|
||||
size='small'
|
||||
className="mr-2"
|
||||
/>
|
||||
{appData?.site?.title}
|
||||
</div>
|
||||
{
|
||||
appData?.site?.description && (
|
||||
<div className='mt-2 w-full text-sm text-gray-500'>
|
||||
{appData?.site?.description}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
!showConfigPanelBeforeChat && collapsed && (
|
||||
<>
|
||||
<Star06 className='mr-1 mt-1 w-4 h-4 text-indigo-600' />
|
||||
<div className='grow py-[3px] text-[13px] text-indigo-600 leading-[18px] font-medium'>
|
||||
{t('share.chat.configStatusDes')}
|
||||
</div>
|
||||
<Button
|
||||
variant='secondary-accent'
|
||||
size='small'
|
||||
className='shrink-0'
|
||||
onClick={() => setCollapsed(false)}
|
||||
>
|
||||
<Edit02 className='mr-1 w-3 h-3' />
|
||||
{t('common.operation.edit')}
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
!showConfigPanelBeforeChat && !collapsed && (
|
||||
<>
|
||||
<Star06 className='mr-1 mt-1 w-4 h-4 text-indigo-600' />
|
||||
<div className='grow py-[3px] text-[13px] text-indigo-600 leading-[18px] font-medium'>
|
||||
{t('share.chat.privatePromptConfigTitle')}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
!collapsed && !showConfigPanelBeforeChat && (
|
||||
<div className='p-6 rounded-b-xl'>
|
||||
<Form />
|
||||
<div className={`pl-[136px] flex items-center ${isMobile && '!pl-0'}`}>
|
||||
<Button
|
||||
variant='primary'
|
||||
className='mr-2'
|
||||
onClick={() => {
|
||||
setCollapsed(true)
|
||||
handleStartChat()
|
||||
}}
|
||||
>
|
||||
{t('common.operation.save')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setCollapsed(true)}
|
||||
>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
showConfigPanelBeforeChat && (
|
||||
<div className='p-6 rounded-b-xl'>
|
||||
<Form />
|
||||
<Button
|
||||
className={`${inputsForms.length && !isMobile && 'ml-[136px]'}`}
|
||||
variant='primary'
|
||||
size='large'
|
||||
onClick={handleStartChat}
|
||||
>
|
||||
<MessageDotsCircle className='mr-2 w-4 h-4 text-white' />
|
||||
{t('share.chat.startChat')}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
showConfigPanelBeforeChat && (site || customConfig) && (
|
||||
<div className='mt-4 flex flex-wrap justify-between items-center py-2 text-xs text-gray-400'>
|
||||
{site?.privacy_policy
|
||||
? <div className={`flex items-center ${isMobile && 'w-full justify-end'}`}>{t('share.chat.privacyPolicyLeft')}
|
||||
<a
|
||||
className='text-gray-500 px-1'
|
||||
href={site?.privacy_policy}
|
||||
target='_blank' rel='noopener noreferrer'>{t('share.chat.privacyPolicyMiddle')}</a>
|
||||
{t('share.chat.privacyPolicyRight')}
|
||||
</div>
|
||||
: <div>
|
||||
</div>}
|
||||
{
|
||||
customConfig?.remove_webapp_brand
|
||||
? null
|
||||
: (
|
||||
<div className={`flex items-center justify-end ${isMobile && 'w-full'}`}>
|
||||
<div className='flex items-center pr-3 space-x-3'>
|
||||
<span className='uppercase'>{t('share.chat.poweredBy')}</span>
|
||||
{
|
||||
customConfig?.replace_webapp_logo
|
||||
? <img src={customConfig?.replace_webapp_logo} alt='logo' className='block w-auto h-5' />
|
||||
: <LogoSite className='!h-5' />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConfigPanel
|
||||
Reference in New Issue
Block a user