Feat/auto rule generate (#300)

This commit is contained in:
Joel 2023-06-06 10:52:02 +08:00 committed by GitHub
parent e61c84ca72
commit 6483beb096
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 808 additions and 460 deletions

View File

@ -1,26 +1,29 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import cn from 'classnames'
import ConfirmAddVar from './confirm-add-var'
import BlockInput from '@/app/components/base/block-input'
import type { PromptVariable } from '@/models/debug'
import Tooltip from '@/app/components/base/tooltip'
import { AppType } from '@/types/app'
import { getNewVar } from '@/utils/var'
import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import ConfirmAddVar from './confirm-add-var'
export type IPromptProps = {
mode: AppType
promptTemplate: string
promptVariables: PromptVariable[]
onChange: (promp: string, promptVariables: PromptVariable[]) => void
readonly?: boolean
onChange?: (promp: string, promptVariables: PromptVariable[]) => void
}
const Prompt: FC<IPromptProps> = ({
mode,
promptTemplate,
promptVariables,
readonly = false,
onChange,
}) => {
const { t } = useTranslation()
@ -45,35 +48,39 @@ const Prompt: FC<IPromptProps> = ({
showConfirmAddVar()
return
}
onChange(newTemplates, [])
onChange?.(newTemplates, [])
}
const handleAutoAdd = (isAdd: boolean) => {
return () => {
onChange(newTemplates, isAdd ? newPromptVariables : [])
onChange?.(newTemplates, isAdd ? newPromptVariables : [])
hideConfirmAddVar()
}
}
return (
<div className='relative rounded-xl border border-[#2D0DEE] bg-gray-25'>
<div className={cn(!readonly ? 'border border-[#2D0DEE] bg-gray-25' : 'bg-gray-50', 'relative rounded-xl')}>
<div className="flex items-center h-11 pl-3 gap-1">
<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M3.00001 0.100098C3.21218 0.100098 3.41566 0.184383 3.56569 0.334412C3.71572 0.484441 3.80001 0.687924 3.80001 0.900098V1.7001H4.60001C4.81218 1.7001 5.01566 1.78438 5.16569 1.93441C5.31572 2.08444 5.40001 2.28792 5.40001 2.5001C5.40001 2.71227 5.31572 2.91575 5.16569 3.06578C5.01566 3.21581 4.81218 3.3001 4.60001 3.3001H3.80001V4.1001C3.80001 4.31227 3.71572 4.51575 3.56569 4.66578C3.41566 4.81581 3.21218 4.9001 3.00001 4.9001C2.78783 4.9001 2.58435 4.81581 2.43432 4.66578C2.28429 4.51575 2.20001 4.31227 2.20001 4.1001V3.3001H1.40001C1.18783 3.3001 0.98435 3.21581 0.834321 3.06578C0.684292 2.91575 0.600006 2.71227 0.600006 2.5001C0.600006 2.28792 0.684292 2.08444 0.834321 1.93441C0.98435 1.78438 1.18783 1.7001 1.40001 1.7001H2.20001V0.900098C2.20001 0.687924 2.28429 0.484441 2.43432 0.334412C2.58435 0.184383 2.78783 0.100098 3.00001 0.100098ZM3.00001 8.1001C3.21218 8.1001 3.41566 8.18438 3.56569 8.33441C3.71572 8.48444 3.80001 8.68792 3.80001 8.9001V9.7001H4.60001C4.81218 9.7001 5.01566 9.78438 5.16569 9.93441C5.31572 10.0844 5.40001 10.2879 5.40001 10.5001C5.40001 10.7123 5.31572 10.9158 5.16569 11.0658C5.01566 11.2158 4.81218 11.3001 4.60001 11.3001H3.80001V12.1001C3.80001 12.3123 3.71572 12.5158 3.56569 12.6658C3.41566 12.8158 3.21218 12.9001 3.00001 12.9001C2.78783 12.9001 2.58435 12.8158 2.43432 12.6658C2.28429 12.5158 2.20001 12.3123 2.20001 12.1001V11.3001H1.40001C1.18783 11.3001 0.98435 11.2158 0.834321 11.0658C0.684292 10.9158 0.600006 10.7123 0.600006 10.5001C0.600006 10.2879 0.684292 10.0844 0.834321 9.93441C0.98435 9.78438 1.18783 9.7001 1.40001 9.7001H2.20001V8.9001C2.20001 8.68792 2.28429 8.48444 2.43432 8.33441C2.58435 8.18438 2.78783 8.1001 3.00001 8.1001ZM8.60001 0.100098C8.77656 0.100041 8.94817 0.158388 9.0881 0.266047C9.22802 0.373706 9.32841 0.52463 9.37361 0.695298L10.3168 4.2601L13 5.8073C13.1216 5.87751 13.2226 5.9785 13.2928 6.10011C13.363 6.22173 13.4 6.35967 13.4 6.5001C13.4 6.64052 13.363 6.77847 13.2928 6.90008C13.2226 7.02169 13.1216 7.12268 13 7.1929L10.3168 8.7409L9.37281 12.3049C9.32753 12.4754 9.22716 12.6262 9.08732 12.7337C8.94748 12.8413 8.77602 12.8996 8.59961 12.8996C8.42319 12.8996 8.25173 12.8413 8.11189 12.7337C7.97205 12.6262 7.87169 12.4754 7.82641 12.3049L6.88321 8.7401L4.20001 7.1929C4.0784 7.12268 3.97742 7.02169 3.90721 6.90008C3.837 6.77847 3.80004 6.64052 3.80004 6.5001C3.80004 6.35967 3.837 6.22173 3.90721 6.10011C3.97742 5.9785 4.0784 5.87751 4.20001 5.8073L6.88321 4.2593L7.82721 0.695298C7.87237 0.524762 7.97263 0.373937 8.1124 0.266291C8.25216 0.158646 8.42359 0.100217 8.60001 0.100098Z" fill="#5850EC" />
</svg>
<div className="h2">{mode === AppType.chat ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}</div>
<Tooltip
htmlContent={<div className='w-[180px]'>
{t('appDebug.promptTip')}
</div>}
selector='config-prompt-tooltip'>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.66667 11.1667H8V8.5H7.33333M8 5.83333H8.00667M14 8.5C14 9.28793 13.8448 10.0681 13.5433 10.7961C13.2417 11.5241 12.7998 12.1855 12.2426 12.7426C11.6855 13.2998 11.0241 13.7417 10.2961 14.0433C9.56815 14.3448 8.78793 14.5 8 14.5C7.21207 14.5 6.43185 14.3448 5.7039 14.0433C4.97595 13.7417 4.31451 13.2998 3.75736 12.7426C3.20021 12.1855 2.75825 11.5241 2.45672 10.7961C2.15519 10.0681 2 9.28793 2 8.5C2 6.9087 2.63214 5.38258 3.75736 4.25736C4.88258 3.13214 6.4087 2.5 8 2.5C9.5913 2.5 11.1174 3.13214 12.2426 4.25736C13.3679 5.38258 14 6.9087 14 8.5Z" stroke="#9CA3AF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Tooltip>
{!readonly && (
<Tooltip
htmlContent={<div className='w-[180px]'>
{t('appDebug.promptTip')}
</div>}
selector='config-prompt-tooltip'>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.66667 11.1667H8V8.5H7.33333M8 5.83333H8.00667M14 8.5C14 9.28793 13.8448 10.0681 13.5433 10.7961C13.2417 11.5241 12.7998 12.1855 12.2426 12.7426C11.6855 13.2998 11.0241 13.7417 10.2961 14.0433C9.56815 14.3448 8.78793 14.5 8 14.5C7.21207 14.5 6.43185 14.3448 5.7039 14.0433C4.97595 13.7417 4.31451 13.2998 3.75736 12.7426C3.20021 12.1855 2.75825 11.5241 2.45672 10.7961C2.15519 10.0681 2 9.28793 2 8.5C2 6.9087 2.63214 5.38258 3.75736 4.25736C4.88258 3.13214 6.4087 2.5 8 2.5C9.5913 2.5 11.1174 3.13214 12.2426 4.25736C13.3679 5.38258 14 6.9087 14 8.5Z" stroke="#9CA3AF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Tooltip>
)}
</div>
<BlockInput
readonly={readonly}
value={promptTemplate}
onConfirm={(value: string, vars: string[]) => {
handleChange(value, vars)
@ -82,7 +89,7 @@ const Prompt: FC<IPromptProps> = ({
{isShowConfirmAddVar && (
<ConfirmAddVar
varNameArr={newPromptVariables.map((v) => v.name)}
varNameArr={newPromptVariables.map(v => v.name)}
onConfrim={handleAutoAdd(true)}
onCancel={handleAutoAdd(false)}
onHide={hideConfirmAddVar}

View File

@ -2,29 +2,28 @@
import type { FC } from 'react'
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import Panel from '../base/feature-panel'
import Tooltip from '@/app/components/base/tooltip'
import type { PromptVariable } from '@/models/debug'
import { Cog8ToothIcon, TrashIcon } from '@heroicons/react/24/outline'
import { useBoolean } from 'ahooks'
import EditModel from './config-model'
import { DEFAULT_VALUE_MAX_LEN, getMaxVarNameLength } from '@/config'
import { getNewVar } from '@/utils/var'
import Panel from '../base/feature-panel'
import OperationBtn from '../base/operation-btn'
import Switch from '@/app/components/base/switch'
import IconTypeIcon from './input-type-icon'
import { checkKeys } from '@/utils/var'
import Toast from '@/app/components/base/toast'
import s from './style.module.css'
import VarIcon from '../base/icons/var-icon'
import EditModel from './config-model'
import IconTypeIcon from './input-type-icon'
import s from './style.module.css'
import Tooltip from '@/app/components/base/tooltip'
import type { PromptVariable } from '@/models/debug'
import { DEFAULT_VALUE_MAX_LEN, getMaxVarNameLength } from '@/config'
import { checkKeys, getNewVar } from '@/utils/var'
import Switch from '@/app/components/base/switch'
import Toast from '@/app/components/base/toast'
export type IConfigVarProps = {
promptVariables: PromptVariable[]
onPromptVariablesChange: (promptVariables: PromptVariable[]) => void
readonly?: boolean
onPromptVariablesChange?: (promptVariables: PromptVariable[]) => void
}
const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChange }) => {
const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVariablesChange }) => {
const { t } = useTranslation()
const hasVar = promptVariables.length > 0
const promptVariableObj = (() => {
@ -39,16 +38,17 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChan
if (!(key in promptVariableObj))
return
const newPromptVariables = promptVariables.map((item) => {
if (item.key === key)
if (item.key === key) {
return {
...item,
[updateKey]: newValue
[updateKey]: newValue,
}
}
return item
})
onPromptVariablesChange(newPromptVariables)
onPromptVariablesChange?.(newPromptVariables)
}
const batchUpdatePromptVariable = (key: string, updateKeys: string[], newValues: any[]) => {
@ -66,53 +66,55 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChan
return item
})
onPromptVariablesChange(newPromptVariables)
onPromptVariablesChange?.(newPromptVariables)
}
const updatePromptKey = (index: number, newKey: string) => {
const { isValid, errorKey, errorMessageKey } = checkKeys([newKey], true)
if (!isValid) {
Toast.notify({
type: 'error',
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey })
message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
})
return
}
const newPromptVariables = promptVariables.map((item, i) => {
if (i === index)
if (i === index) {
return {
...item,
key: newKey,
}
}
return item
})
onPromptVariablesChange(newPromptVariables)
onPromptVariablesChange?.(newPromptVariables)
}
const updatePromptNameIfNameEmpty = (index: number, newKey: string) => {
if (!newKey) return
if (!newKey)
return
const newPromptVariables = promptVariables.map((item, i) => {
if (i === index && !item.name)
if (i === index && !item.name) {
return {
...item,
name: newKey,
}
}
return item
})
onPromptVariablesChange(newPromptVariables)
onPromptVariablesChange?.(newPromptVariables)
}
const handleAddVar = () => {
const newVar = getNewVar('')
onPromptVariablesChange([...promptVariables, newVar])
onPromptVariablesChange?.([...promptVariables, newVar])
}
const handleRemoveVar = (index: number) => {
onPromptVariablesChange(promptVariables.filter((_, i) => i !== index))
onPromptVariablesChange?.(promptVariables.filter((_, i) => i !== index))
}
const [currKey, setCurrKey] = useState<string | null>(null)
@ -132,16 +134,18 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChan
title={
<div className='flex items-center gap-2'>
<div>{t('appDebug.variableTitle')}</div>
<Tooltip htmlContent={<div className='w-[180px]'>
{t('appDebug.variableTip')}
</div>} selector='config-var-tooltip'>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.66667 11.1667H8V8.5H7.33333M8 5.83333H8.00667M14 8.5C14 9.28793 13.8448 10.0681 13.5433 10.7961C13.2417 11.5241 12.7998 12.1855 12.2426 12.7426C11.6855 13.2998 11.0241 13.7417 10.2961 14.0433C9.56815 14.3448 8.78793 14.5 8 14.5C7.21207 14.5 6.43185 14.3448 5.7039 14.0433C4.97595 13.7417 4.31451 13.2998 3.75736 12.7426C3.20021 12.1855 2.75825 11.5241 2.45672 10.7961C2.15519 10.0681 2 9.28793 2 8.5C2 6.9087 2.63214 5.38258 3.75736 4.25736C4.88258 3.13214 6.4087 2.5 8 2.5C9.5913 2.5 11.1174 3.13214 12.2426 4.25736C13.3679 5.38258 14 6.9087 14 8.5Z" stroke="#9CA3AF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Tooltip>
{!readonly && (
<Tooltip htmlContent={<div className='w-[180px]'>
{t('appDebug.variableTip')}
</div>} selector='config-var-tooltip'>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.66667 11.1667H8V8.5H7.33333M8 5.83333H8.00667M14 8.5C14 9.28793 13.8448 10.0681 13.5433 10.7961C13.2417 11.5241 12.7998 12.1855 12.2426 12.7426C11.6855 13.2998 11.0241 13.7417 10.2961 14.0433C9.56815 14.3448 8.78793 14.5 8 14.5C7.21207 14.5 6.43185 14.3448 5.7039 14.0433C4.97595 13.7417 4.31451 13.2998 3.75736 12.7426C3.20021 12.1855 2.75825 11.5241 2.45672 10.7961C2.15519 10.0681 2 9.28793 2 8.5C2 6.9087 2.63214 5.38258 3.75736 4.25736C4.88258 3.13214 6.4087 2.5 8 2.5C9.5913 2.5 11.1174 3.13214 12.2426 4.25736C13.3679 5.38258 14 6.9087 14 8.5Z" stroke="#9CA3AF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Tooltip>
)}
</div>
}
headerRight={<OperationBtn type="add" onClick={handleAddVar} />}
headerRight={!readonly ? <OperationBtn type="add" onClick={handleAddVar} /> : null}
>
{!hasVar && (
<div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.notSetVar')}</div>
@ -153,8 +157,13 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChan
<tr className='uppercase'>
<td>{t('appDebug.variableTable.key')}</td>
<td>{t('appDebug.variableTable.name')}</td>
<td>{t('appDebug.variableTable.optional')}</td>
<td>{t('appDebug.variableTable.action')}</td>
{!readonly && (
<>
<td>{t('appDebug.variableTable.optional')}</td>
<td>{t('appDebug.variableTable.action')}</td>
</>
)}
</tr>
</thead>
<tbody className="text-gray-700">
@ -163,42 +172,57 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChan
<td className="w-[160px] border-b border-gray-100 pl-3">
<div className='flex items-center space-x-1'>
<IconTypeIcon type={type} />
<input
type="text"
placeholder="key"
value={key}
onChange={e => updatePromptKey(index, e.target.value)}
onBlur={e => updatePromptNameIfNameEmpty(index, e.target.value)}
maxLength={getMaxVarNameLength(name)}
className="h-6 leading-6 block w-full rounded-md border-0 py-1.5 text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
/>
{!readonly
? (
<input
type="text"
placeholder="key"
value={key}
onChange={e => updatePromptKey(index, e.target.value)}
onBlur={e => updatePromptNameIfNameEmpty(index, e.target.value)}
maxLength={getMaxVarNameLength(name)}
className="h-6 leading-6 block w-full rounded-md border-0 py-1.5 text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
/>
)
: (
<div className='h-6 leading-6 text-[13px] text-gray-700'>{key}</div>
)}
</div>
</td>
<td className="py-1 border-b border-gray-100">
<input
type="text"
placeholder={key}
value={name}
onChange={e => updatePromptVariable(key, 'name', e.target.value)}
maxLength={getMaxVarNameLength(name)}
className="h-6 leading-6 block w-full rounded-md border-0 py-1.5 text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
/>
</td>
<td className='w-[84px] border-b border-gray-100'>
<div className='flex items-center h-full'>
<Switch defaultValue={!required} size='md' onChange={(value) => updatePromptVariable(key, 'required', !value)} />
</div>
</td>
<td className='w-20 border-b border-gray-100'>
<div className='flex h-full items-center space-x-1'>
<div className='flex items-center justify-items-center w-6 h-6 text-gray-500 cursor-pointer' onClick={() => handleConfig(key)}>
<Cog8ToothIcon width={16} height={16} />
</div>
<div className='flex items-center justify-items-center w-6 h-6 text-gray-500 cursor-pointer' onClick={() => handleRemoveVar(index)} >
<TrashIcon width={16} height={16} />
</div>
</div>
{!readonly
? (
<input
type="text"
placeholder={key}
value={name}
onChange={e => updatePromptVariable(key, 'name', e.target.value)}
maxLength={getMaxVarNameLength(name)}
className="h-6 leading-6 block w-full rounded-md border-0 py-1.5 text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
/>)
: (
<div className='h-6 leading-6 text-[13px] text-gray-700'>{name}</div>
)}
</td>
{!readonly && (
<>
<td className='w-[84px] border-b border-gray-100'>
<div className='flex items-center h-full'>
<Switch defaultValue={!required} size='md' onChange={value => updatePromptVariable(key, 'required', !value)} />
</div>
</td>
<td className='w-20 border-b border-gray-100'>
<div className='flex h-full items-center space-x-1'>
<div className='flex items-center justify-items-center w-6 h-6 text-gray-500 cursor-pointer' onClick={() => handleConfig(key)}>
<Cog8ToothIcon width={16} height={16} />
</div>
<div className='flex items-center justify-items-center w-6 h-6 text-gray-500 cursor-pointer' onClick={() => handleRemoveVar(index)} >
<TrashIcon width={16} height={16} />
</div>
</div>
</td>
</>
)}
</tr>
))}
</tbody>
@ -212,11 +236,12 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, onPromptVariablesChan
isShow={isShowEditModal}
onClose={hideEditModal}
onConfirm={({ type, value }) => {
if (type === 'string') {
if (type === 'string')
batchUpdatePromptVariable(currKey as string, ['type', 'max_length'], [type, value || DEFAULT_VALUE_MAX_LEN])
} else {
else
batchUpdatePromptVariable(currKey as string, ['type', 'options'], [type, value || []])
}
hideEditModal()
}}
/>

View File

@ -0,0 +1,33 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import Button from '@/app/components/base/button'
export type IAutomaticBtnProps = {
onClick: () => void
}
const leftIcon = (
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.31346 0.905711C4.21464 0.708087 4.01266 0.583252 3.79171 0.583252C3.57076 0.583252 3.36877 0.708087 3.26996 0.905711L2.81236 1.82091C2.64757 2.15048 2.59736 2.24532 2.53635 2.32447C2.47515 2.40386 2.40398 2.47503 2.32459 2.53623C2.24544 2.59724 2.1506 2.64745 1.82103 2.81224L0.905833 3.26984C0.708209 3.36865 0.583374 3.57064 0.583374 3.79159C0.583374 4.01254 0.708209 4.21452 0.905833 4.31333L1.82103 4.77094C2.1506 4.93572 2.24544 4.98593 2.32459 5.04694C2.40398 5.10814 2.47515 5.17931 2.53635 5.2587C2.59736 5.33785 2.64758 5.43269 2.81236 5.76226L3.26996 6.67746C3.36877 6.87508 3.57076 6.99992 3.79171 6.99992C4.01266 6.99992 4.21465 6.87508 4.31346 6.67746L4.77106 5.76226C4.93584 5.43269 4.98605 5.33786 5.04707 5.2587C5.10826 5.17931 5.17943 5.10814 5.25883 5.04694C5.33798 4.98593 5.43282 4.93572 5.76238 4.77094L6.67758 4.31333C6.87521 4.21452 7.00004 4.01254 7.00004 3.79159C7.00004 3.57064 6.87521 3.36865 6.67758 3.26984L5.76238 2.81224C5.43282 2.64745 5.33798 2.59724 5.25883 2.53623C5.17943 2.47503 5.10826 2.40386 5.04707 2.32447C4.98605 2.24532 4.93584 2.15048 4.77106 1.82091L4.31346 0.905711Z" fill="#444CE7"/>
<path d="M11.375 1.74992C11.375 1.42775 11.1139 1.16659 10.7917 1.16659C10.4695 1.16659 10.2084 1.42775 10.2084 1.74992V2.62492H9.33337C9.01121 2.62492 8.75004 2.88609 8.75004 3.20825C8.75004 3.53042 9.01121 3.79159 9.33337 3.79159H10.2084V4.66659C10.2084 4.98875 10.4695 5.24992 10.7917 5.24992C11.1139 5.24992 11.375 4.98875 11.375 4.66659V3.79159H12.25C12.5722 3.79159 12.8334 3.53042 12.8334 3.20825C12.8334 2.88609 12.5722 2.62492 12.25 2.62492H11.375V1.74992Z" fill="#444CE7"/>
<path d="M3.79171 9.33325C3.79171 9.01109 3.53054 8.74992 3.20837 8.74992C2.88621 8.74992 2.62504 9.01109 2.62504 9.33325V10.2083H1.75004C1.42787 10.2083 1.16671 10.4694 1.16671 10.7916C1.16671 11.1138 1.42787 11.3749 1.75004 11.3749H2.62504V12.2499C2.62504 12.5721 2.88621 12.8333 3.20837 12.8333C3.53054 12.8333 3.79171 12.5721 3.79171 12.2499V11.3749H4.66671C4.98887 11.3749 5.25004 11.1138 5.25004 10.7916C5.25004 10.4694 4.98887 10.2083 4.66671 10.2083H3.79171V9.33325Z" fill="#444CE7"/>
<path d="M10.4385 6.73904C10.3396 6.54142 10.1377 6.41659 9.91671 6.41659C9.69576 6.41659 9.49377 6.54142 9.39496 6.73904L8.84014 7.84869C8.67535 8.17826 8.62514 8.27309 8.56413 8.35225C8.50293 8.43164 8.43176 8.50281 8.35237 8.56401C8.27322 8.62502 8.17838 8.67523 7.84881 8.84001L6.73917 9.39484C6.54154 9.49365 6.41671 9.69564 6.41671 9.91659C6.41671 10.1375 6.54154 10.3395 6.73917 10.4383L7.84881 10.9932C8.17838 11.1579 8.27322 11.2082 8.35237 11.2692C8.43176 11.3304 8.50293 11.4015 8.56413 11.4809C8.62514 11.5601 8.67535 11.6549 8.84014 11.9845L9.39496 13.0941C9.49377 13.2918 9.69576 13.4166 9.91671 13.4166C10.1377 13.4166 10.3396 13.2918 10.4385 13.0941L10.9933 11.9845C11.1581 11.6549 11.2083 11.5601 11.2693 11.4809C11.3305 11.4015 11.4017 11.3304 11.481 11.2692C11.5602 11.2082 11.655 11.1579 11.9846 10.9932L13.0942 10.4383C13.2919 10.3395 13.4167 10.1375 13.4167 9.91659C13.4167 9.69564 13.2919 9.49365 13.0942 9.39484L11.9846 8.84001C11.655 8.67523 11.5602 8.62502 11.481 8.56401C11.4017 8.50281 11.3305 8.43164 11.2693 8.35225C11.2083 8.27309 11.1581 8.17826 10.9933 7.84869L10.4385 6.73904Z" fill="#444CE7"/>
</svg>
)
const AutomaticBtn: FC<IAutomaticBtnProps> = ({
onClick,
}) => {
const { t } = useTranslation()
return (
<Button className='flex space-x-2 items-center !h-8'
onClick={onClick}
>
{leftIcon}
<span className='text-xs font-semibold text-primary-600 uppercase'>{t('appDebug.operation.automatic')}</span>
</Button>
)
}
export default React.memo(AutomaticBtn)

View File

@ -0,0 +1,205 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import Toast from '@/app/components/base/toast'
import { generateRule } from '@/service/debug'
import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
import { AppType } from '@/types/app'
import ConfigVar from '@/app/components/app/configuration/config-var'
import OpeningStatement from '@/app/components/app/configuration/features/chat-group/opening-statement'
import GroupName from '@/app/components/app/configuration/base/group-name'
import Loading from '@/app/components/base/loading'
import Confirm from '@/app/components/base/confirm'
const noDataIcon = (
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.4998 51.3333V39.6666M10.4998 16.3333V4.66663M4.6665 10.5H16.3332M4.6665 45.5H16.3332M30.3332 6.99996L26.2868 17.5206C25.6287 19.2315 25.2997 20.0869 24.7881 20.8065C24.3346 21.4442 23.7774 22.0014 23.1397 22.4549C22.4202 22.9665 21.5647 23.2955 19.8538 23.9535L9.33317 28L19.8539 32.0464C21.5647 32.7044 22.4202 33.0334 23.1397 33.5451C23.7774 33.9985 24.3346 34.5557 24.7881 35.1934C25.2997 35.913 25.6287 36.7684 26.2868 38.4793L30.3332 49L34.3796 38.4793C35.0376 36.7684 35.3666 35.913 35.8783 35.1934C36.3317 34.5557 36.8889 33.9985 37.5266 33.5451C38.2462 33.0334 39.1016 32.7044 40.8125 32.0464L51.3332 28L40.8125 23.9535C39.1016 23.2955 38.2462 22.9665 37.5266 22.4549C36.8889 22.0014 36.3317 21.4442 35.8783 20.8065C35.3666 20.0869 35.0376 19.2315 34.3796 17.5206L30.3332 6.99996Z" stroke="#EAECF0" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
)
export type AutomaticRes = {
prompt: string
variables: string[]
opening_statement: string
}
export type IGetAutomaticResProps = {
mode: AppType
isShow: boolean
onClose: () => void
onFinished: (res: AutomaticRes) => void
}
const genIcon = (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.6665 1.33332C3.6665 0.965133 3.36803 0.666656 2.99984 0.666656C2.63165 0.666656 2.33317 0.965133 2.33317 1.33332V2.33332H1.33317C0.964981 2.33332 0.666504 2.6318 0.666504 2.99999C0.666504 3.36818 0.964981 3.66666 1.33317 3.66666H2.33317V4.66666C2.33317 5.03485 2.63165 5.33332 2.99984 5.33332C3.36803 5.33332 3.6665 5.03485 3.6665 4.66666V3.66666H4.6665C5.03469 3.66666 5.33317 3.36818 5.33317 2.99999C5.33317 2.6318 5.03469 2.33332 4.6665 2.33332H3.6665V1.33332Z" fill="white"/>
<path d="M3.6665 11.3333C3.6665 10.9651 3.36803 10.6667 2.99984 10.6667C2.63165 10.6667 2.33317 10.9651 2.33317 11.3333V12.3333H1.33317C0.964981 12.3333 0.666504 12.6318 0.666504 13C0.666504 13.3682 0.964981 13.6667 1.33317 13.6667H2.33317V14.6667C2.33317 15.0348 2.63165 15.3333 2.99984 15.3333C3.36803 15.3333 3.6665 15.0348 3.6665 14.6667V13.6667H4.6665C5.03469 13.6667 5.33317 13.3682 5.33317 13C5.33317 12.6318 5.03469 12.3333 4.6665 12.3333H3.6665V11.3333Z" fill="white"/>
<path d="M9.28873 1.76067C9.18971 1.50321 8.94235 1.33332 8.6665 1.33332C8.39066 1.33332 8.1433 1.50321 8.04427 1.76067L6.88815 4.76658C6.68789 5.28727 6.62495 5.43732 6.53887 5.55838C6.4525 5.67986 6.34637 5.78599 6.2249 5.87236C6.10384 5.95844 5.95379 6.02137 5.43309 6.22164L2.42718 7.37776C2.16972 7.47678 1.99984 7.72414 1.99984 7.99999C1.99984 8.27584 2.16972 8.5232 2.42718 8.62222L5.43309 9.77834C5.95379 9.97861 6.10384 10.0415 6.2249 10.1276C6.34637 10.214 6.4525 10.3201 6.53887 10.4416C6.62495 10.5627 6.68789 10.7127 6.88816 11.2334L8.04427 14.2393C8.1433 14.4968 8.39066 14.6667 8.6665 14.6667C8.94235 14.6667 9.18971 14.4968 9.28873 14.2393L10.4449 11.2334C10.6451 10.7127 10.7081 10.5627 10.7941 10.4416C10.8805 10.3201 10.9866 10.214 11.1081 10.1276C11.2292 10.0415 11.3792 9.97861 11.8999 9.77834L14.9058 8.62222C15.1633 8.5232 15.3332 8.27584 15.3332 7.99999C15.3332 7.72414 15.1633 7.47678 14.9058 7.37776L11.8999 6.22164C11.3792 6.02137 11.2292 5.95844 11.1081 5.87236C10.9866 5.78599 10.8805 5.67986 10.7941 5.55838C10.7081 5.43732 10.6451 5.28727 10.4449 4.76658L9.28873 1.76067Z" fill="white"/>
</svg>
)
const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
mode,
isShow,
onClose,
// appId,
onFinished,
}) => {
const { t } = useTranslation()
const [audiences, setAudiences] = React.useState<string>('')
const [hopingToSolve, setHopingToSolve] = React.useState<string>('')
const isValid = () => {
if (audiences.trim() === '') {
Toast.notify({
type: 'error',
message: t('appDebug.automatic.audiencesRequired'),
})
return false
}
if (hopingToSolve.trim() === '') {
Toast.notify({
type: 'error',
message: t('appDebug.automatic.problemRequired'),
})
return false
}
return true
}
const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false)
const [res, setRes] = React.useState<AutomaticRes | null>(null)
const renderLoading = (
<div className='grow flex flex-col items-center justify-center h-full space-y-3'>
<Loading />
<div className='text-[13px] text-gray-400'>{t('appDebug.automatic.loading')}</div>
</div>
)
const renderNoData = (
<div className='grow flex flex-col items-center justify-center h-full space-y-3'>
{noDataIcon}
<div className='text-[13px] text-gray-400'>{t('appDebug.automatic.noData')}</div>
</div>
)
const onGenerate = async () => {
if (!isValid())
return
if (isLoading)
return
setLoadingTrue()
try {
const res = await generateRule({
audiences,
hoping_to_solve: hopingToSolve,
})
setRes(res as AutomaticRes)
}
finally {
setLoadingFalse()
}
}
const [showConfirmOverwrite, setShowConfirmOverwrite] = React.useState(false)
return (
<Modal
isShow={isShow}
onClose={onClose}
className='min-w-[1120px] !p-0'
closable
>
<div className='flex h-[680px]'>
<div className='w-[480px] shrink-0 px-8 py-6 h-full overflow-y-auto border-r border-gray-100'>
<div>
<div className='mb-1 text-xl font-semibold text-primary-600'>{t('appDebug.automatic.title')}</div>
<div className='text-[13px] font-normal text-gray-500'>{t('appDebug.automatic.description')}</div>
</div>
{/* inputs */}
<div className='mt-12 space-y-5'>
<div className='space-y-2'>
<div className='text-[13px] font-medium text-gray-900'>{t('appDebug.automatic.intendedAudience')}</div>
<input className="w-full h-8 px-3 text-[13px] font-normal bg-gray-50 rounded-lg" placeholder={t('appDebug.automatic.intendedAudiencePlaceHolder') as string} value={audiences} onChange={e => setAudiences(e.target.value)} />
</div>
<div className='space-y-2'>
<div className='text-[13px] font-medium text-gray-900'>{t('appDebug.automatic.solveProblem')}</div>
<textarea className="w-full h-[200px] overflow-y-auto p-3 text-[13px] font-normal bg-gray-50 rounded-lg" placeholder={t('appDebug.automatic.solveProblemPlaceHolder') as string} value={hopingToSolve} onChange={e => setHopingToSolve(e.target.value)} />
</div>
<div className='mt-6 flex justify-end'>
<Button
className='flex space-x-2 items-center !h-8'
type='primary'
onClick={onGenerate}
disabled={isLoading}
>
{genIcon}
<span className='text-xs font-semibold text-white uppercase'>{t('appDebug.automatic.generate')}</span>
</Button>
</div>
</div>
</div>
{(!isLoading && res) && (
<div className='grow px-8 pt-6 h-full overflow-y-auto'>
<div className='mb-4 w-1/2 text-lg font-medium text-gray-900'>{t('appDebug.automatic.resTitle')}</div>
<ConfigPrompt
mode={mode}
promptTemplate={res?.prompt || ''}
promptVariables={[]}
readonly
/>
{(res?.variables?.length && res?.variables?.length > 0)
? (
<ConfigVar
promptVariables={res?.variables.map(key => ({ key, name: key, type: 'string', required: true })) || []}
readonly
/>
)
: ''}
{(mode === AppType.chat && res?.opening_statement) && (
<div className='mt-7'>
<GroupName name={t('appDebug.feature.groupChat.title')} />
<OpeningStatement
value={res?.opening_statement || ''}
readonly
/>
</div>
)}
<div className='sticky bottom-0 flex justify-end right-0 py-4'>
<Button onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button type='primary' className='ml-2' onClick={() => {
setShowConfirmOverwrite(true)
}}>{t('appDebug.automatic.apply')}</Button>
</div>
</div>
)}
{isLoading && renderLoading}
{(!isLoading && !res) && renderNoData}
{showConfirmOverwrite && (
<Confirm
title={t('appDebug.automatic.overwriteTitle')}
content={t('appDebug.automatic.overwriteMessage')}
isShow={showConfirmOverwrite}
onClose={() => setShowConfirmOverwrite(false)}
onConfirm={() => {
setShowConfirmOverwrite(false)
onFinished(res as AutomaticRes)
}}
onCancel={() => setShowConfirmOverwrite(false)}
/>
)}
</div>
</Modal>
)
}
export default React.memo(GetAutomaticRes)

View File

@ -3,19 +3,22 @@ import type { FC } from 'react'
import React from 'react'
import { useContext } from 'use-context-selector'
import produce from 'immer'
import AddFeatureBtn from './feature/add-feature-btn'
import ChooseFeature from './feature/choose-feature'
import useFeature from './feature/use-feature'
import ConfigContext from '@/context/debug-configuration'
import { useBoolean } from 'ahooks'
import DatasetConfig from '../dataset-config'
import ChatGroup from '../features/chat-group'
import ExperienceEnchanceGroup from '../features/experience-enchance-group'
import Toolbox from '../toolbox'
import AddFeatureBtn from './feature/add-feature-btn'
import AutomaticBtn from './automatic/automatic-btn'
import type { AutomaticRes } from './automatic/get-automatic-res'
import GetAutomaticResModal from './automatic/get-automatic-res'
import ChooseFeature from './feature/choose-feature'
import useFeature from './feature/use-feature'
import ConfigContext from '@/context/debug-configuration'
import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
import ConfigVar from '@/app/components/app/configuration/config-var'
import type { PromptVariable } from '@/models/debug'
import { AppType } from '@/types/app'
import { useBoolean } from 'ahooks'
const Config: FC = () => {
const {
@ -29,7 +32,7 @@ const Config: FC = () => {
moreLikeThisConifg,
setMoreLikeThisConifg,
suggestedQuestionsAfterAnswerConfig,
setSuggestedQuestionsAfterAnswerConfig
setSuggestedQuestionsAfterAnswerConfig,
} = useContext(ConfigContext)
const isChatApp = mode === AppType.chat
@ -41,9 +44,8 @@ const Config: FC = () => {
draft.configs.prompt_variables = [...draft.configs.prompt_variables, ...newVariables]
})
if (modelConfig.configs.prompt_template !== newTemplate) {
if (modelConfig.configs.prompt_template !== newTemplate)
setFormattingChanged(true)
}
setPrevPromptConfig(modelConfig.configs)
setModelConfig(newModelConfig)
@ -59,7 +61,7 @@ const Config: FC = () => {
const [showChooseFeature, {
setTrue: showChooseFeatureTrue,
setFalse: showChooseFeatureFalse
setFalse: showChooseFeatureFalse,
}] = useBoolean(false)
const { featureConfig, handleFeatureChange } = useFeature({
introduction,
@ -81,14 +83,24 @@ const Config: FC = () => {
const hasChatConfig = isChatApp && (featureConfig.openingStatement || featureConfig.suggestedQuestionsAfterAnswer)
const hasToolbox = false
const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
const handleAutomaticRes = (res: AutomaticRes) => {
const newModelConfig = produce(modelConfig, (draft) => {
draft.configs.prompt_template = res.prompt
draft.configs.prompt_variables = res.variables.map(key => ({ key, name: key, type: 'string', required: true }))
})
setModelConfig(newModelConfig)
setPrevPromptConfig(modelConfig.configs)
if (mode === AppType.chat)
setIntroduction(res.opening_statement)
showAutomaticFalse()
}
return (
<>
<div className="pb-[20px]">
<div className='flex justify-between items-center mb-4'>
<AddFeatureBtn onClick={showChooseFeatureTrue} />
<div>
{/* AutoMatic */}
</div>
<AutomaticBtn onClick={showAutomaticTrue}/>
</div>
{showChooseFeature && (
@ -100,6 +112,14 @@ const Config: FC = () => {
onChange={handleFeatureChange}
/>
)}
{showAutomatic && (
<GetAutomaticResModal
mode={mode as AppType}
isShow={showAutomatic}
onClose={showAutomaticFalse}
onFinished={handleAutomaticRes}
/>
)}
{/* Template */}
<ConfigPrompt
mode={mode as AppType}
@ -124,9 +144,8 @@ const Config: FC = () => {
isShowOpeningStatement={featureConfig.openingStatement}
openingStatementConfig={
{
promptTemplate,
value: introduction,
onChange: setIntroduction
onChange: setIntroduction,
}
}
isShowSuggestedQuestionsAfterAnswer={featureConfig.suggestedQuestionsAfterAnswer}
@ -139,7 +158,6 @@ const Config: FC = () => {
<ExperienceEnchanceGroup />
)}
{/* Toolbox */}
{
hasToolbox && (

View File

@ -17,9 +17,9 @@ import { getNewVar } from '@/utils/var'
import { varHighlightHTML } from '@/app/components/app/configuration/base/var-highlight'
export type IOpeningStatementProps = {
promptTemplate: string
value: string
onChange: (value: string) => void
readonly?: boolean
onChange?: (value: string) => void
}
// regex to match the {{}} and replace it with a span
@ -27,6 +27,7 @@ const regex = /\{\{([^}]+)\}\}/g
const OpeningStatement: FC<IOpeningStatementProps> = ({
value = '',
readonly,
onChange,
}) => {
const { t } = useTranslation()
@ -64,6 +65,8 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
.replace(/\n/g, '<br />')
const handleEdit = () => {
if (readonly)
return
setFocus()
}
@ -93,11 +96,11 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
return
}
setBlur()
onChange(tempValue)
onChange?.(tempValue)
}
const cancelAutoAddVar = () => {
onChange(tempValue)
onChange?.(tempValue)
hideConfirmAddVar()
setBlur()
}
@ -106,15 +109,15 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
const newModelConfig = produce(modelConfig, (draft) => {
draft.configs.prompt_variables = [...draft.configs.prompt_variables, ...notIncludeKeys.map(key => getNewVar(key))]
})
onChange(tempValue)
onChange?.(tempValue)
setModelConfig(newModelConfig)
hideConfirmAddVar()
setBlur()
}
const headerRight = (
const headerRight = !readonly ? (
<OperationBtn type='edit' actionName={hasValue ? '' : t('appDebug.openingStatement.writeOpner') as string} onClick={handleEdit} />
)
) : null
return (
<Panel
@ -130,30 +133,28 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
isFocus={isFocus}
>
<div className='text-gray-700 text-sm'>
{(hasValue || (!hasValue && isFocus))
? (
<>
{isFocus
? (
<textarea
ref={inputRef}
value={tempValue}
rows={3}
onChange={e => setTempValue(e.target.value)}
className="w-full px-0 text-sm border-0 bg-transparent focus:outline-none "
placeholder={t('appDebug.openingStatement.placeholder') as string}
>
</textarea>
)
: (
<div dangerouslySetInnerHTML={{
__html: coloredContent,
}}></div>
)}
{(hasValue || (!hasValue && isFocus)) ? (
<>
{isFocus
? (
<textarea
ref={inputRef}
value={tempValue}
rows={3}
onChange={e => setTempValue(e.target.value)}
className="w-full px-0 text-sm border-0 bg-transparent focus:outline-none "
placeholder={t('appDebug.openingStatement.placeholder') as string}
>
</textarea>
)
: (
<div dangerouslySetInnerHTML={{
__html: coloredContent,
}}></div>
)}
{/* Operation Bar */}
{isFocus
&& (
{/* Operation Bar */}
{isFocus && (
<div className='mt-2 flex items-center justify-between'>
<div className='text-xs text-gray-500'>{t('appDebug.openingStatement.varTip')}</div>
@ -164,9 +165,9 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
</div>
)}
</>) : (
<div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.openingStatement.noDataPlaceHolder')}</div>
)}
</>) : (
<div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.openingStatement.noDataPlaceHolder')}</div>
)}
{isShowConfirmAddVar && (
<ConfirmAddVar

View File

@ -33,12 +33,14 @@ export type IBlockInputProps = {
value: string
className?: string // wrapper class
highLightClassName?: string // class for the highlighted text default is text-blue-500
readonly?: boolean
onConfirm?: (value: string, keys: string[]) => void
}
const BlockInput: FC<IBlockInputProps> = ({
value = '',
className,
readonly = false,
onConfirm,
}) => {
const { t } = useTranslation()
@ -113,7 +115,7 @@ const BlockInput: FC<IBlockInputProps> = ({
const editAreaClassName = 'focus:outline-none bg-transparent text-sm'
const textAreaContent = (
<div className='h-[180px] overflow-y-auto' onClick={() => setIsEditing(true)}>
<div className={classNames(readonly ? 'max-h-[180px] pb-5' : 'h-[180px]', ' overflow-y-auto')} onClick={() => !readonly && setIsEditing(true)}>
{isEditing
? <div className='h-full px-4 py-1'>
<textarea
@ -141,35 +143,37 @@ const BlockInput: FC<IBlockInputProps> = ({
<div className={classNames('block-input w-full overflow-y-auto border-none rounded-lg')}>
{textAreaContent}
{/* footer */}
<div className='flex item-center h-14 px-4'>
{isContentChanged
? (
<div className='flex items-center justify-between w-full'>
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{currentValue.length}</div>
<div className='flex space-x-2'>
<Button
onClick={handleCancel}
className='w-20 !h-8 !text-[13px]'
>
{t('common.operation.cancel')}
</Button>
<Button
onClick={handleSubmit}
type="primary"
className='w-20 !h-8 !text-[13px]'
>
{t('common.operation.confirm')}
</Button>
</div>
{!readonly && (
<div className='flex item-center h-14 px-4'>
{isContentChanged
? (
<div className='flex items-center justify-between w-full'>
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{currentValue?.length}</div>
<div className='flex space-x-2'>
<Button
onClick={handleCancel}
className='w-20 !h-8 !text-[13px]'
>
{t('common.operation.cancel')}
</Button>
<Button
onClick={handleSubmit}
type="primary"
className='w-20 !h-8 !text-[13px]'
>
{t('common.operation.confirm')}
</Button>
</div>
</div>
)
: (
<p className="leading-5 text-xs text-gray-500">
{t('appDebug.promptTip')}
</p>
)}
</div>
</div>
)
: (
<p className="leading-5 text-xs text-gray-500">
{t('appDebug.promptTip')}
</p>
)}
</div>
)}
</div>
)

View File

@ -1,36 +1,36 @@
/* eslint-disable no-mixed-operators */
'use client'
import React, { useState, useRef, useEffect, useLayoutEffect } from 'react'
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import type { File, PreProcessingRule, Rules, FileIndexingEstimateResponse as IndexingEstimateResponse } from '@/models/datasets'
import {
fetchDefaultProcessRule,
createFirstDocument,
createDocument,
fetchFileIndexingEstimate as didFetchFileIndexingEstimate,
} from '@/service/datasets'
import type { CreateDocumentReq, createDocumentResponse, FullDocumentDetail } from '@/models/datasets'
import Button from '@/app/components/base/button'
import PreviewItem from './preview-item'
import Loading from '@/app/components/base/loading'
import { XMarkIcon } from '@heroicons/react/20/solid'
import cn from 'classnames'
import s from './index.module.css'
import Link from 'next/link'
import PreviewItem from './preview-item'
import s from './index.module.css'
import type { CreateDocumentReq, File, FullDocumentDetail, FileIndexingEstimateResponse as IndexingEstimateResponse, PreProcessingRule, Rules, createDocumentResponse } from '@/models/datasets'
import {
createDocument,
createFirstDocument,
fetchFileIndexingEstimate as didFetchFileIndexingEstimate,
fetchDefaultProcessRule,
} from '@/service/datasets'
import Button from '@/app/components/base/button'
import Loading from '@/app/components/base/loading'
import Toast from '@/app/components/base/toast'
import { formatNumber } from '@/utils/format'
type StepTwoProps = {
isSetting?: boolean,
isSetting?: boolean
documentDetail?: FullDocumentDetail
hasSetAPIKEY: boolean,
onSetting: () => void,
datasetId?: string,
indexingType?: string,
file?: File,
onStepChange?: (delta: number) => void,
updateIndexingTypeCache?: (type: string) => void,
hasSetAPIKEY: boolean
onSetting: () => void
datasetId?: string
indexingType?: string
file?: File
onStepChange?: (delta: number) => void
updateIndexingTypeCache?: (type: string) => void
updateResultCache?: (res: createDocumentResponse) => void
onSave?: () => void
onCancel?: () => void
@ -71,8 +71,10 @@ const StepTwo = ({
const [defaultConfig, setDefaultConfig] = useState<Rules>()
const hasSetIndexType = !!indexingType
const [indexType, setIndexType] = useState<IndexingType>(
indexingType ||
hasSetAPIKEY ? IndexingType.QUALIFIED : IndexingType.ECONOMICAL
indexingType
|| hasSetAPIKEY
? IndexingType.QUALIFIED
: IndexingType.ECONOMICAL,
)
const [showPreview, { setTrue: setShowPreview, setFalse: hidePreview }] = useBoolean()
const [customFileIndexingEstimate, setCustomFileIndexingEstimate] = useState<IndexingEstimateResponse | null>(null)
@ -82,19 +84,19 @@ const StepTwo = ({
})()
const scrollHandle = (e: any) => {
if (e.target.scrollTop > 0) {
if (e.target.scrollTop > 0)
setScrolled(true)
} else {
else
setScrolled(false)
}
}
const previewScrollHandle = (e: any) => {
if (e.target.scrollTop > 0) {
if (e.target.scrollTop > 0)
setPreviewScrolled(true)
} else {
else
setPreviewScrolled(false)
}
}
const getFileName = (name: string) => {
const arr = name.split('.')
@ -102,18 +104,17 @@ const StepTwo = ({
}
const getRuleName = (key: string) => {
if (key === 'remove_extra_spaces') {
if (key === 'remove_extra_spaces')
return t('datasetCreation.stepTwo.removeExtraSpaces')
}
if (key === 'remove_urls_emails') {
if (key === 'remove_urls_emails')
return t('datasetCreation.stepTwo.removeUrlEmails')
}
if (key === 'remove_stopwords') {
if (key === 'remove_stopwords')
return t('datasetCreation.stepTwo.removeStopwords')
}
}
const ruleChangeHandle = (id: string) => {
const newRules = rules.map(rule => {
const newRules = rules.map((rule) => {
if (rule.id === id) {
return {
id: rule.id,
@ -132,13 +133,23 @@ const StepTwo = ({
}
}
const fetchFileIndexingEstimate = async () => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
const res = await didFetchFileIndexingEstimate(getFileIndexingEstimateParams())
if (segmentationType === SegmentType.CUSTOM)
setCustomFileIndexingEstimate(res)
else
setAutomaticFileIndexingEstimate(res)
}
const confirmChangeCustomConfig = async () => {
setCustomFileIndexingEstimate(null)
setShowPreview()
await fetchFileIndexingEstimate()
}
const getIndexing_technique = () => indexingType ? indexingType : indexType
const getIndexing_technique = () => indexingType || indexType
const getProcessRule = () => {
const processRule: any = {
@ -168,16 +179,6 @@ const StepTwo = ({
return params
}
const fetchFileIndexingEstimate = async () => {
const res = await didFetchFileIndexingEstimate(getFileIndexingEstimateParams())
if (segmentationType === SegmentType.CUSTOM) {
setCustomFileIndexingEstimate(res)
}
else {
setAutomaticFileIndexingEstimate(res)
}
}
const getCreationParams = () => {
let params
if (isSetting) {
@ -185,7 +186,8 @@ const StepTwo = ({
original_document_id: documentDetail?.id,
process_rule: getProcessRule(),
} as CreateDocumentReq
} else {
}
else {
params = {
data_source: {
type: 'upload_file',
@ -226,25 +228,25 @@ const StepTwo = ({
}
const getDefaultMode = () => {
if (documentDetail) {
if (documentDetail)
setSegmentationType(documentDetail.dataset_process_rule.mode)
}
}
const createHandle = async () => {
try {
let res;
let res
const params = getCreationParams()
if (!datasetId) {
res = await createFirstDocument({
body: params
body: params,
})
updateIndexingTypeCache && updateIndexingTypeCache(indexType)
updateResultCache && updateResultCache(res)
} else {
}
else {
res = await createDocument({
datasetId,
body: params
body: params,
})
updateIndexingTypeCache && updateIndexingTypeCache(indexType)
updateResultCache && updateResultCache({
@ -257,7 +259,7 @@ const StepTwo = ({
catch (err) {
Toast.notify({
type: 'error',
message: err + '',
message: `${err}`,
})
}
}
@ -266,35 +268,36 @@ const StepTwo = ({
// fetch rules
if (!isSetting) {
getRules()
} else {
}
else {
getRulesFromDetail()
getDefaultMode()
}
}, [])
useEffect(() => {
scrollRef.current?.addEventListener('scroll', scrollHandle);
scrollRef.current?.addEventListener('scroll', scrollHandle)
return () => {
scrollRef.current?.removeEventListener('scroll', scrollHandle);
scrollRef.current?.removeEventListener('scroll', scrollHandle)
}
}, [])
useLayoutEffect(() => {
if (showPreview) {
previewScrollRef.current?.addEventListener('scroll', previewScrollHandle);
previewScrollRef.current?.addEventListener('scroll', previewScrollHandle)
return () => {
previewScrollRef.current?.removeEventListener('scroll', previewScrollHandle);
previewScrollRef.current?.removeEventListener('scroll', previewScrollHandle)
}
}
}, [showPreview])
useEffect(() => {
// get indexing type by props
if (indexingType) {
if (indexingType)
setIndexType(indexingType as IndexingType)
} else {
else
setIndexType(hasSetAPIKEY ? IndexingType.QUALIFIED : IndexingType.ECONOMICAL)
}
}, [hasSetAPIKEY, indexingType, datasetId])
useEffect(() => {
@ -302,7 +305,8 @@ const StepTwo = ({
setAutomaticFileIndexingEstimate(null)
setShowPreview()
fetchFileIndexingEstimate()
} else {
}
else {
hidePreview()
setCustomFileIndexingEstimate(null)
}
@ -320,7 +324,7 @@ const StepTwo = ({
className={cn(
s.radioItem,
s.segmentationItem,
segmentationType === SegmentType.AUTO && s.active
segmentationType === SegmentType.AUTO && s.active,
)}
onClick={() => setSegmentationType(SegmentType.AUTO)}
>
@ -355,7 +359,7 @@ const StepTwo = ({
type="text"
className={s.input}
placeholder={t('datasetCreation.stepTwo.separatorPlaceholder') || ''} value={segmentIdentifier}
onChange={(e) => setSegmentIdentifier(e.target.value)}
onChange={e => setSegmentIdentifier(e.target.value)}
/>
</div>
</div>
@ -366,7 +370,7 @@ const StepTwo = ({
type="number"
className={s.input}
placeholder={t('datasetCreation.stepTwo.separatorPlaceholder') || ''} value={max}
onChange={(e) => setMax(Number(e.target.value))}
onChange={e => setMax(Number(e.target.value))}
/>
</div>
</div>
@ -403,9 +407,8 @@ const StepTwo = ({
hasSetIndexType && '!w-full',
)}
onClick={() => {
if (hasSetAPIKEY) {
if (hasSetAPIKEY)
setIndexType(IndexingType.QUALIFIED)
}
}}
>
<span className={cn(s.typeIcon, s.qualified)} />
@ -418,11 +421,13 @@ const StepTwo = ({
<div className={s.tip}>{t('datasetCreation.stepTwo.qualifiedTip')}</div>
<div className='pb-0.5 text-xs font-medium text-gray-500'>{t('datasetCreation.stepTwo.emstimateCost')}</div>
{
!!fileIndexingEstimate ? (
<div className='text-xs font-medium text-gray-800'>{formatNumber(fileIndexingEstimate.tokens)} tokens(<span className='text-yellow-500'>${formatNumber(fileIndexingEstimate.total_price)}</span>)</div>
) : (
<div className={s.calculating}>{t('datasetCreation.stepTwo.calculating')}</div>
)
fileIndexingEstimate
? (
<div className='text-xs font-medium text-gray-800'>{formatNumber(fileIndexingEstimate.tokens)} tokens(<span className='text-yellow-500'>${formatNumber(fileIndexingEstimate.total_price)}</span>)</div>
)
: (
<div className={s.calculating}>{t('datasetCreation.stepTwo.calculating')}</div>
)
}
</div>
{!hasSetAPIKEY && (
@ -434,7 +439,6 @@ const StepTwo = ({
</div>
)}
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.ECONOMICAL)) && (
<div
className={cn(
@ -476,51 +480,58 @@ const StepTwo = ({
<div className='mb-2 text-xs font-medium text-gray-500'>{t('datasetCreation.stepTwo.emstimateSegment')}</div>
<div className='flex items-center text-sm leading-6 font-medium text-gray-800'>
{
!!fileIndexingEstimate ? (
<div className='text-xs font-medium text-gray-800'>{formatNumber(fileIndexingEstimate.total_segments)} </div>
) : (
<div className={s.calculating}>{t('datasetCreation.stepTwo.calculating')}</div>
)
fileIndexingEstimate
? (
<div className='text-xs font-medium text-gray-800'>{formatNumber(fileIndexingEstimate.total_segments)} </div>
)
: (
<div className={s.calculating}>{t('datasetCreation.stepTwo.calculating')}</div>
)
}
</div>
</div>
</div>
{!isSetting ? (
<div className='flex items-center mt-8 py-2'>
<Button onClick={() => onStepChange && onStepChange(-1)}>{t('datasetCreation.stepTwo.lastStep')}</Button>
<div className={s.divider} />
<Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
</div>
) : (
<div className='flex items-center mt-8 py-2'>
<Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
<Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
</div>
)}
{!isSetting
? (
<div className='flex items-center mt-8 py-2'>
<Button onClick={() => onStepChange && onStepChange(-1)}>{t('datasetCreation.stepTwo.lastStep')}</Button>
<div className={s.divider} />
<Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
</div>
)
: (
<div className='flex items-center mt-8 py-2'>
<Button type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
<Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
</div>
)}
</div>
</div>
</div>
{(showPreview) ? (
<div ref={previewScrollRef} className={cn(s.previewWrap, 'relativeh-full overflow-y-scroll border-l border-[#F2F4F7]')}>
<div className={cn(s.previewHeader, previewScrolled && `${s.fixed} pb-3`, ' flex items-center justify-between px-8')}>
<span>{t('datasetCreation.stepTwo.previewTitle')}</span>
<div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
<XMarkIcon className='h-4 w-4'></XMarkIcon>
{(showPreview)
? (
<div ref={previewScrollRef} className={cn(s.previewWrap, 'relativeh-full overflow-y-scroll border-l border-[#F2F4F7]')}>
<div className={cn(s.previewHeader, previewScrolled && `${s.fixed} pb-3`, ' flex items-center justify-between px-8')}>
<span>{t('datasetCreation.stepTwo.previewTitle')}</span>
<div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
<XMarkIcon className='h-4 w-4'></XMarkIcon>
</div>
</div>
<div className='my-4 px-8 space-y-4'>
{fileIndexingEstimate?.preview
? (
<>
{fileIndexingEstimate?.preview.map((item, index) => (
<PreviewItem key={item} content={item} index={index + 1} />
))}
</>
)
: <div className='flex items-center justify-center h-[200px]'><Loading type='area'></Loading></div>
}
</div>
</div>
<div className='my-4 px-8 space-y-4'>
{fileIndexingEstimate?.preview ? (
<>
{fileIndexingEstimate?.preview.map((item, index) => (
<PreviewItem key={item} content={item} index={index + 1} />
))}
</>
) : <div className='flex items-center justify-center h-[200px]'><Loading type='area'></Loading></div>
}
</div>
</div>
) :
(<div className={cn(s.sideTip)}>
)
: (<div className={cn(s.sideTip)}>
<div className={s.tipCard}>
<span className={s.icon} />
<div className={s.title}>{t('datasetCreation.stepTwo.sideTipTitle')}</div>

View File

@ -1,5 +1,5 @@
'use client'
import React, { useState, useCallback, useEffect } from 'react'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import { useContext } from 'use-context-selector'
@ -7,7 +7,8 @@ import { useRouter } from 'next/navigation'
import DatasetDetailContext from '@/context/dataset-detail'
import type { FullDocumentDetail } from '@/models/datasets'
import { fetchTenantInfo } from '@/service/common'
import { fetchDocumentDetail, MetadataType } from '@/service/datasets'
import type { MetadataType } from '@/service/datasets'
import { fetchDocumentDetail } from '@/service/datasets'
import Loading from '@/app/components/base/loading'
import StepTwo from '@/app/components/datasets/create/step-two'
@ -15,8 +16,8 @@ import AccountSetting from '@/app/components/header/account-setting'
import AppUnavailable from '@/app/components/base/app-unavailable'
type DocumentSettingsProps = {
datasetId: string;
documentId: string;
datasetId: string
documentId: string
}
const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
@ -48,18 +49,18 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
const detail = await fetchDocumentDetail({
datasetId,
documentId,
params: { metadata: 'without' as MetadataType }
params: { metadata: 'without' as MetadataType },
})
setDocumentDetail(detail)
} catch (e) {
}
catch (e) {
setHasError(true)
}
})()
}, [datasetId, documentId])
if (hasError) {
if (hasError)
return <AppUnavailable code={500} unknownReason={t('datasetCreation.error.unavailable') as string} />
}
return (
<div className='flex' style={{ height: 'calc(100vh - 56px)' }}>

View File

@ -1,16 +1,17 @@
const translation = {
pageTitle: "Prompt Engineering",
pageTitle: 'Prompt Engineering',
operation: {
applyConfig: "Publish",
resetConfig: "Reset",
addFeature: "Add Feature",
stopResponding: "Stop responding",
applyConfig: 'Publish',
resetConfig: 'Reset',
addFeature: 'Add Feature',
automatic: 'Automatic',
stopResponding: 'Stop responding',
},
notSetAPIKey: {
title: "LLM provider key has not been set",
trailFinished: "Trail finished",
description: "The LLM provider key has not been set, and it needs to be set before debugging.",
settingBtn: "Go to settings",
title: 'LLM provider key has not been set',
trailFinished: 'Trail finished',
description: 'The LLM provider key has not been set, and it needs to be set before debugging.',
settingBtn: 'Go to settings',
},
trailUseGPT4Info: {
title: 'Does not support gpt-4 now',
@ -19,14 +20,14 @@ const translation = {
feature: {
groupChat: {
title: 'Chat enhance',
description: 'Add pre-conversation settings for apps can enhance user experience.'
description: 'Add pre-conversation settings for apps can enhance user experience.',
},
groupExperience: {
title: 'Experience enhance',
},
conversationOpener: {
title: "Conversation remakers",
description: "In a chat app, the first sentence that the AI actively speaks to the user is usually used as a welcome."
title: 'Conversation remakers',
description: 'In a chat app, the first sentence that the AI actively speaks to the user is usually used as a welcome.',
},
suggestedQuestionsAfterAnswer: {
title: 'Follow-up',
@ -35,105 +36,122 @@ const translation = {
tryToAsk: 'Try to ask',
},
moreLikeThis: {
title: "More like this",
description: "Generate multiple texts at once, and then edit and continue to generate",
generateNumTip: "Number of each generated times",
tip: "Using this feature will incur additional tokens overhead"
title: 'More like this',
description: 'Generate multiple texts at once, and then edit and continue to generate',
generateNumTip: 'Number of each generated times',
tip: 'Using this feature will incur additional tokens overhead',
},
dataSet: {
title: "Context",
noData: "You can import datasets as context",
words: "Words",
textBlocks: "Text Blocks",
selectTitle: "Select reference dataset",
selected: "Datasets selected",
noDataSet: "No dataset found",
toCreate: "Go to create",
notSupportSelectMulti: 'Currently only support one dataset'
}
title: 'Context',
noData: 'You can import datasets as context',
words: 'Words',
textBlocks: 'Text Blocks',
selectTitle: 'Select reference dataset',
selected: 'Datasets selected',
noDataSet: 'No dataset found',
toCreate: 'Go to create',
notSupportSelectMulti: 'Currently only support one dataset',
},
},
automatic: {
title: 'Automated application orchestration',
description: 'Describe your scenario, Dify will orchestrate an application for you.',
intendedAudience: 'Who is the intended audience?',
intendedAudiencePlaceHolder: 'e.g. Student',
solveProblem: 'What problems do they hope AI can solve for them?',
solveProblemPlaceHolder: 'e.g. Assessing academic performance',
generate: 'Generate',
audiencesRequired: 'Audiences required',
problemRequired: 'Problem required',
resTitle: 'We have orchestrated the following application for you.',
apply: 'Apply this orchestration',
noData: 'Describe your use case on the left, the orchestration preview will show here.',
loading: 'Orchestrating the application for you...',
overwriteTitle: 'Override existing configuration?',
overwriteMessage: 'Applying this orchestration will override existing configuration.',
},
resetConfig: {
title: "Confirm reset?",
title: 'Confirm reset?',
message:
"Reset discards changes, restoring the last published configuration.",
'Reset discards changes, restoring the last published configuration.',
},
errorMessage: {
nameOfKeyRequired: "name of the key: {{key}} required",
valueOfVarRequired: "Variables value can not be empty",
queryRequired: "Request text is required.",
nameOfKeyRequired: 'name of the key: {{key}} required',
valueOfVarRequired: 'Variables value can not be empty',
queryRequired: 'Request text is required.',
waitForResponse:
"Please wait for the response to the previous message to complete.",
'Please wait for the response to the previous message to complete.',
},
chatSubTitle: "Pre Prompt",
completionSubTitle: "Prefix Prompt",
chatSubTitle: 'Pre Prompt',
completionSubTitle: 'Prefix Prompt',
promptTip:
"Prompts guide AI responses with instructions and constraints. Insert variables like {{input}}. This prompt won't be visible to users.",
formattingChangedTitle: "Formatting changed",
'Prompts guide AI responses with instructions and constraints. Insert variables like {{input}}. This prompt won\'t be visible to users.',
formattingChangedTitle: 'Formatting changed',
formattingChangedText:
"Modifying the formatting will reset the debug area, are you sure?",
variableTitle: "Variables",
'Modifying the formatting will reset the debug area, are you sure?',
variableTitle: 'Variables',
variableTip:
"Users fill variables in a form, automatically replacing variables in the prompt.",
notSetVar: "Variables allow users to introduce prompt words or opening remarks when filling out forms. You can try entering \"{{input}}\" in the prompt words.",
autoAddVar: "Undefined variables referenced in pre-prompt, are you want to add them in user input form?",
'Users fill variables in a form, automatically replacing variables in the prompt.',
notSetVar: 'Variables allow users to introduce prompt words or opening remarks when filling out forms. You can try entering "{{input}}" in the prompt words.',
autoAddVar: 'Undefined variables referenced in pre-prompt, are you want to add them in user input form?',
variableTable: {
key: "Variable Key",
name: "User Input Field Name",
optional: "Optional",
type: "Input Type",
action: "Actions",
typeString: "String",
typeSelect: "Select",
key: 'Variable Key',
name: 'User Input Field Name',
optional: 'Optional',
type: 'Input Type',
action: 'Actions',
typeString: 'String',
typeSelect: 'Select',
},
varKeyError: {
canNoBeEmpty: "Variable key can not be empty",
tooLong: "Variable key: {{key}} too length. Can not be longer then 16 characters",
notValid: "Variable key: {{key}} is invalid. Can only contain letters, numbers, and underscores",
notStartWithNumber: "Variable key: {{key}} can not start with a number",
canNoBeEmpty: 'Variable key can not be empty',
tooLong: 'Variable key: {{key}} too length. Can not be longer then 16 characters',
notValid: 'Variable key: {{key}} is invalid. Can only contain letters, numbers, and underscores',
notStartWithNumber: 'Variable key: {{key}} can not start with a number',
},
variableConig: {
modalTitle: "Field settings",
description: "Setting for variable {{varName}}",
modalTitle: 'Field settings',
description: 'Setting for variable {{varName}}',
fieldType: 'Field type',
string: 'Text',
select: 'Select',
notSet: 'Not set, try typing {{input}} in the prefix prompt',
stringTitle: "Form text box options",
maxLength: "Max length",
options: "Options",
addOption: "Add option",
stringTitle: 'Form text box options',
maxLength: 'Max length',
options: 'Options',
addOption: 'Add option',
},
openingStatement: {
title: "Opening remarks",
add: "Add",
writeOpner: "Write remarks",
placeholder: "Write your remarks message here",
title: 'Opening remarks',
add: 'Add',
writeOpner: 'Write remarks',
placeholder: 'Write your remarks message here',
noDataPlaceHolder:
"Starting the conversation with the user can help AI establish a closer connection with them in conversational applications.",
'Starting the conversation with the user can help AI establish a closer connection with them in conversational applications.',
varTip: 'You can use variables, try type {{variable}}',
tooShort: "At least 20 words of initial prompt are required to generate an opening remarks for the conversation.",
notIncludeKey: "The initial prompt does not include the variable: {{key}}. Please add it to the initial prompt.",
tooShort: 'At least 20 words of initial prompt are required to generate an opening remarks for the conversation.',
notIncludeKey: 'The initial prompt does not include the variable: {{key}}. Please add it to the initial prompt.',
},
modelConfig: {
model: "Model",
setTone: "Set tone of responses",
title: "Model and Parameters",
model: 'Model',
setTone: 'Set tone of responses',
title: 'Model and Parameters',
},
inputs: {
title: "Debugging and Previewing",
noPrompt: "Try write some prompt in pre-prompt input",
userInputField: "User Input Field",
noVar: "Fill in the value of the variable, which will be automatically replaced in the prompt word every time a new session is started.",
title: 'Debugging and Previewing',
noPrompt: 'Try write some prompt in pre-prompt input',
userInputField: 'User Input Field',
noVar: 'Fill in the value of the variable, which will be automatically replaced in the prompt word every time a new session is started.',
chatVarTip:
"Fill in the value of the variable, which will be automatically replaced in the prompt word every time a new session is started",
'Fill in the value of the variable, which will be automatically replaced in the prompt word every time a new session is started',
completionVarTip:
"Fill in the value of the variable, which will be automatically replaced in the prompt words every time a question is submitted.",
previewTitle: "Prompt preview",
queryTitle: "Query content",
queryPlaceholder: "Please enter the request text.",
run: "RUN",
'Fill in the value of the variable, which will be automatically replaced in the prompt words every time a question is submitted.',
previewTitle: 'Prompt preview',
queryTitle: 'Query content',
queryPlaceholder: 'Please enter the request text.',
run: 'RUN',
},
result: "Output Text",
};
result: 'Output Text',
}
export default translation;
export default translation

View File

@ -1,16 +1,17 @@
const translation = {
pageTitle: "提示词编排",
pageTitle: '提示词编排',
operation: {
applyConfig: "发布",
resetConfig: "重置",
addFeature: "添加功能",
stopResponding: "停止响应",
applyConfig: '发布',
resetConfig: '重置',
addFeature: '添加功能',
automatic: '自动编排',
stopResponding: '停止响应',
},
notSetAPIKey: {
title: "LLM 提供者的密钥未设置",
trailFinished: "试用已结束",
description: "在调试之前需要设置 LLM 提供者的密钥。",
settingBtn: "去设置",
title: 'LLM 提供者的密钥未设置',
trailFinished: '试用已结束',
description: '在调试之前需要设置 LLM 提供者的密钥。',
settingBtn: '去设置',
},
trailUseGPT4Info: {
title: '当前不支持使用 gpt-4',
@ -19,14 +20,14 @@ const translation = {
feature: {
groupChat: {
title: '聊天增强',
description: '为聊天型应用添加预对话设置,可以提升用户体验。'
description: '为聊天型应用添加预对话设置,可以提升用户体验。',
},
groupExperience: {
title: '体验增强',
},
conversationOpener: {
title: "对话开场白",
description: "在对话型应用中,让 AI 主动说第一段话可以拉近与用户间的距离。"
title: '对话开场白',
description: '在对话型应用中,让 AI 主动说第一段话可以拉近与用户间的距离。',
},
suggestedQuestionsAfterAnswer: {
title: '下一步问题建议',
@ -35,100 +36,117 @@ const translation = {
tryToAsk: '试着问问',
},
moreLikeThis: {
title: "更多类似的",
title: '更多类似的',
description: '一次生成多条文本,可在此基础上编辑并继续生成',
generateNumTip: "每次生成数",
tip: "使用此功能将会额外消耗 tokens"
generateNumTip: '每次生成数',
tip: '使用此功能将会额外消耗 tokens',
},
dataSet: {
title: "上下文",
noData: "您可以导入数据集作为上下文",
words: "词",
textBlocks: "文本块",
selectTitle: "选择引用数据集",
selected: "个数据集被选中",
noDataSet: "未找到数据集",
toCreate: "去创建",
notSupportSelectMulti: '目前只支持引用一个数据集'
}
title: '上下文',
noData: '您可以导入数据集作为上下文',
words: '词',
textBlocks: '文本块',
selectTitle: '选择引用数据集',
selected: '个数据集被选中',
noDataSet: '未找到数据集',
toCreate: '去创建',
notSupportSelectMulti: '目前只支持引用一个数据集',
},
},
automatic: {
title: '自动编排',
description: '描述您的场景Dify 将为您编排一个应用。',
intendedAudience: '目标用户是谁?',
intendedAudiencePlaceHolder: '例如:学生',
solveProblem: '希望 AI 为他们解决什么问题?',
solveProblemPlaceHolder: '例如:评估学业水平',
generate: '生成',
audiencesRequired: '目标用户必填',
problemRequired: '解决问题必填',
resTitle: '我们为您编排了以下应用程序',
apply: '应用',
noData: '在左侧描述您的用例,编排预览将在此处显示。',
loading: '为您编排应用程序中…',
overwriteTitle: '覆盖现有配置?',
overwriteMessage: '应用此编排将覆盖现有配置。',
},
resetConfig: {
title: "确认重置?",
message: "重置将丢失当前页面所有修改,恢复至上次发布时的配置",
title: '确认重置?',
message: '重置将丢失当前页面所有修改,恢复至上次发布时的配置',
},
errorMessage: {
nameOfKeyRequired: "变量 {{key}} 对应的名称必填",
valueOfVarRequired: "变量值必填",
queryRequired: "主要文本必填",
waitForResponse: "请等待上条信息响应完成",
nameOfKeyRequired: '变量 {{key}} 对应的名称必填',
valueOfVarRequired: '变量值必填',
queryRequired: '主要文本必填',
waitForResponse: '请等待上条信息响应完成',
},
chatSubTitle: "对话前提示词",
completionSubTitle: "前缀提示词",
chatSubTitle: '对话前提示词',
completionSubTitle: '前缀提示词',
promptTip:
"提示词用于对 AI 的回复做出一系列指令和约束。可插入表单变量,例如 {{input}}。这段提示词不会被最终用户所看到。",
formattingChangedTitle: "编排已改变",
formattingChangedText: "修改编排将重置调试区域,确定吗?",
variableTitle: "变量",
notSetVar: "变量能使用户输入表单引入提示词或开场白,你可以试试在提示词中输入输入 {{input}}",
'提示词用于对 AI 的回复做出一系列指令和约束。可插入表单变量,例如 {{input}}。这段提示词不会被最终用户所看到。',
formattingChangedTitle: '编排已改变',
formattingChangedText: '修改编排将重置调试区域,确定吗?',
variableTitle: '变量',
notSetVar: '变量能使用户输入表单引入提示词或开场白,你可以试试在提示词中输入输入 {{input}}',
variableTip:
"变量将以表单形式让用户在对话前填写,用户填写的表单内容将自动替换提示词中的变量。",
autoAddVar: "提示词中引用了未定义的变量,是否自动添加到用户输入表单中?",
'变量将以表单形式让用户在对话前填写,用户填写的表单内容将自动替换提示词中的变量。',
autoAddVar: '提示词中引用了未定义的变量,是否自动添加到用户输入表单中?',
variableTable: {
key: "变量 Key",
name: "字段名称",
optional: "可选",
type: "类型",
action: "操作",
typeString: "文本",
typeSelect: "下拉选项",
key: '变量 Key',
name: '字段名称',
optional: '可选',
type: '类型',
action: '操作',
typeString: '文本',
typeSelect: '下拉选项',
},
varKeyError: {
canNoBeEmpty: "变量不能为空",
tooLong: "变量: {{key}} 长度太长。不能超过 16 个字符",
notValid: "变量: {{key}} 非法。只能包含英文字符,数字和下划线",
notStartWithNumber: "变量: {{key}} 不能以数字开头",
canNoBeEmpty: '变量不能为空',
tooLong: '变量: {{key}} 长度太长。不能超过 16 个字符',
notValid: '变量: {{key}} 非法。只能包含英文字符,数字和下划线',
notStartWithNumber: '变量: {{key}} 不能以数字开头',
},
variableConig: {
modalTitle: "变量设置",
description: "设置变量 {{varName}}",
modalTitle: '变量设置',
description: '设置变量 {{varName}}',
fieldType: '字段类型',
string: '文本',
select: '下拉选项',
notSet: '未设置,在 Prompt 中输入 {{input}} 试试',
stringTitle: "文本框设置",
maxLength: "最大长度",
options: "选项",
addOption: "添加选项",
stringTitle: '文本框设置',
maxLength: '最大长度',
options: '选项',
addOption: '添加选项',
},
openingStatement: {
title: "对话开场白",
add: "添加开场白",
writeOpner: "编写开场白",
placeholder: "请在这里输入开场白",
title: '对话开场白',
add: '添加开场白',
writeOpner: '编写开场白',
placeholder: '请在这里输入开场白',
noDataPlaceHolder:
"在对话型应用中,让 AI 主动说第一段话可以拉近与用户间的距离。",
'在对话型应用中,让 AI 主动说第一段话可以拉近与用户间的距离。',
varTip: '你可以使用变量, 试试输入 {{variable}}',
tooShort: "对话前提示词至少 20 字才能生成开场白",
notIncludeKey: "前缀提示词中不包含变量 {{key}}。请在前缀提示词中添加该变量",
tooShort: '对话前提示词至少 20 字才能生成开场白',
notIncludeKey: '前缀提示词中不包含变量 {{key}}。请在前缀提示词中添加该变量',
},
modelConfig: {
model: "语言模型",
setTone: "模型设置",
title: "模型及参数",
model: '语言模型',
setTone: '模型设置',
title: '模型及参数',
},
inputs: {
title: "调试与预览",
noPrompt: "尝试在对话前提示框中编写一些提示词",
userInputField: "用户输入",
noVar: "填入变量的值,每次启动新会话时该变量将自动替换提示词中的变量。",
chatVarTip: "填入变量的值,该值将在每次开启一个新会话时自动替换到提示词中",
completionVarTip: "填入变量的值,该值将在每次提交问题时自动替换到提示词中",
previewTitle: "提示词预览",
queryTitle: "查询内容",
queryPlaceholder: "请输入文本内容",
run: "运行",
title: '调试与预览',
noPrompt: '尝试在对话前提示框中编写一些提示词',
userInputField: '用户输入',
noVar: '填入变量的值,每次启动新会话时该变量将自动替换提示词中的变量。',
chatVarTip: '填入变量的值,该值将在每次开启一个新会话时自动替换到提示词中',
completionVarTip: '填入变量的值,该值将在每次提交问题时自动替换到提示词中',
previewTitle: '提示词预览',
queryTitle: '查询内容',
queryPlaceholder: '请输入文本内容',
run: '运行',
},
result: "结果",
};
result: '结果',
}
export default translation;
export default translation

View File

@ -102,8 +102,8 @@ const translation = {
sideTipContent: 'After the document finishes indexing, the dataset can be integrated into the application as context, you can find the context setting in the prompt orchestration page. You can also create it as an independent ChatGPT indexing plugin for release.',
modelTitle: 'Are you sure to stop embedding?',
modelContent: 'If you need to resume processing later, you will continue from where you left off.',
modelButtonConfirm: "Confirm",
modelButtonCancel: 'Cancel'
modelButtonConfirm: 'Confirm',
modelButtonCancel: 'Cancel',
},
}

View File

@ -101,9 +101,9 @@ const translation = {
sideTipTitle: '接下来做什么',
sideTipContent: '当文档完成索引处理后,数据集即可集成至应用内作为上下文使用,你可以在提示词编排页找到上下文设置。你也可以创建成可独立使用的 ChatGPT 索引插件发布。',
modelTitle: '确认停止索引过程吗?',
modelContent:'如果您需要稍后恢复处理,则从停止处继续。',
modelButtonConfirm: "确认停止",
modelButtonCancel: '取消'
modelContent: '如果您需要稍后恢复处理,则从停止处继续。',
modelButtonConfirm: '确认停止',
modelButtonCancel: '取消',
},
}

View File

@ -1,16 +1,17 @@
import { ssePost, get, IOnData, IOnCompleted, IOnError } from './base'
import type { IOnCompleted, IOnData, IOnError } from './base'
import { get, post, ssePost } from './base'
export const sendChatMessage = async (appId: string, body: Record<string, any>, { onData, onCompleted, onError, getAbortController }: {
onData: IOnData
onCompleted: IOnCompleted
onError: IOnError,
onError: IOnError
getAbortController?: (abortController: AbortController) => void
}) => {
return ssePost(`apps/${appId}/chat-messages`, {
body: {
...body,
response_mode: 'streaming'
}
response_mode: 'streaming',
},
}, { onData, onCompleted, onError, getAbortController })
}
@ -22,8 +23,8 @@ export const sendCompletionMessage = async (appId: string, body: Record<string,
return ssePost(`apps/${appId}/completion-messages`, {
body: {
...body,
response_mode: 'streaming'
}
response_mode: 'streaming',
},
}, { onData, onCompleted, onError })
}
@ -34,7 +35,13 @@ export const fetchSuggestedQuestions = (appId: string, messageId: string) => {
export const fetchConvesationMessages = (appId: string, conversation_id: string) => {
return get(`apps/${appId}/chat-messages`, {
params: {
conversation_id
}
conversation_id,
},
})
}
export const generateRule = (body: Record<string, any>) => {
return post('/rule-generate', {
body,
})
}