Skip to content

D
dify
Commit 60f6ab03 authored by Joel's avatar Joel
Browse files
Options

feat: webapp support paragraph

parent cb86a80c
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 121 deletions
web/app/components/share/text-generation/config-scence/index.tsx
View file @ 60f6ab03
......@@ -8,23 +8,19 @@ import Select from '@/app/components/base/select'
import type { SiteInfo } from '@/models/share'
import type { PromptConfig } from '@/models/debug'
import Button from '@/app/components/base/button'
import { DEFAULT_VALUE_MAX_LEN } from '@/config'
import { DEFAULT_PARAGRAPH_VALUE_MAX_LEN, DEFAULT_VALUE_MAX_LEN } from '@/config'
export type IConfigSenceProps = {
siteInfo: SiteInfo
promptConfig: PromptConfig
inputs: Record<string, any>
onInputsChange: (inputs: Record<string, any>) => void
query: string
onQueryChange: (query: string) => void
onSend: () => void
}
const ConfigSence: FC<IConfigSenceProps> = ({
promptConfig,
inputs,
onInputsChange,
query,
onQueryChange,
onSend,
}) => {
const { t } = useTranslation()
......@@ -38,61 +34,59 @@ const ConfigSence: FC<IConfigSenceProps> = ({
<div className='w-full mt-4' key={item.key}>
<label className='text-gray-900 text-sm font-medium'>{item.name}</label>
<div className='mt-2'>
{item.type === 'select'
? (
<Select
className='w-full'
defaultValue={inputs[item.key]}
onSelect={(i) => { onInputsChange({ ...inputs, [item.key]: i.value }) }}
items={(item.options || []).map(i => ({ name: i, value: i }))}
allowSearch={false}
bgClassName='bg-gray-50'
/>
)
: (
<input
type="text"
className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
value={inputs[item.key]}
onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }}
maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
/>
)}
{item.type === 'select' && (
<Select
className='w-full'
defaultValue={inputs[item.key]}
onSelect={(i) => { onInputsChange({ ...inputs, [item.key]: i.value }) }}
items={(item.options || []).map(i => ({ name: i, value: i }))}
allowSearch={false}
bgClassName='bg-gray-50'
/>
)}
{item.type === 'string' && (
<input
type="text"
className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
value={inputs[item.key]}
onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }}
maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
/>
)}
{item.type === 'paragraph' && (
<textarea
className="block w-full h-[104px] p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 "
placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
value={inputs[item.key]}
onChange={(e) => { onInputsChange({ ...inputs, [item.key]: e.target.value }) }}
maxLength={item.max_length || DEFAULT_PARAGRAPH_VALUE_MAX_LEN}
/>
)}
</div>
</div>
))}
{promptConfig.prompt_variables.length > 0 && (
<div className='mt-6 h-[1px] bg-gray-100'></div>
<div className='mt-4 h-[1px] bg-gray-100'></div>
)}
<div className='w-full mt-5'>
<label className='text-gray-900 text-sm font-medium'>{t('share.generation.queryTitle')}</label>
<div className="mt-2 overflow-hidden rounded-lg bg-gray-50 ">
<div className="px-4 py-2 bg-gray-50 rounded-t-lg">
<textarea
value={query}
onChange={(e) => { onQueryChange(e.target.value) }}
rows={4}
className="w-full px-0 text-sm text-gray-900 border-0 bg-gray-50 focus:outline-none placeholder:bg-gray-50"
placeholder={t('share.generation.queryPlaceholder') as string}
required
>
</textarea>
</div>
<div className="flex items-center justify-between px-3 py-2">
<div className="flex pl-0 space-x-1 sm:pl-2">
<span className="bg-gray-100 text-gray-500 text-xs font-medium mr-2 px-2.5 py-0.5 rounded cursor-pointer">{query?.length}</span>
</div>
<Button
type="primary"
className='w-[80px] !h-8 !p-0'
onClick={onSend}
disabled={!query || query === ''}
>
<PlayIcon className="shrink-0 w-4 h-4 mr-1" aria-hidden="true" />
<span className='uppercase text-[13px]'>{t('share.generation.run')}</span>
</Button>
</div>
<div className='w-full mt-4'>
<div className="flex items-center justify-between">
<Button
className='w-[58px] !h-8 !p-3'
onClick={onSend}
disabled={false}
>
<span className='text-[13px]'>{t('common.operation.clear')}</span>
</Button>
<Button
type="primary"
className='!h-8 !pl-3 !pr-4'
onClick={onSend}
disabled={false}
>
<PlayIcon className="shrink-0 w-4 h-4 mr-1" aria-hidden="true" />
<span className='text-[13px]'>{t('share.generation.run')}</span>
</Button>
</div>
</div>
</form>
......
web/app/components/share/text-generation/index.tsx
View file @ 60f6ab03
......@@ -49,7 +49,6 @@ const TextGeneration: FC<IMainProps> = ({
const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
const [moreLikeThisConfig, setMoreLikeThisConfig] = useState<MoreLikeThisConfig | null>(null)
const [isResponsing, { setTrue: setResponsingTrue, setFalse: setResponsingFalse }] = useBoolean(false)
const [query, setQuery] = useState('')
const [completionRes, setCompletionRes] = useState('')
const { notify } = Toast
const isNoData = !completionRes
......@@ -125,14 +124,8 @@ const TextGeneration: FC<IMainProps> = ({
if (!checkCanSend())
return
if (!query) {
logError(t('appDebug.errorMessage.queryRequired'))
return false
}
const data = {
inputs,
query,
}
setMessageId(null)
......@@ -188,7 +181,11 @@ const TextGeneration: FC<IMainProps> = ({
changeLanguage(siteInfo.default_language)
const { user_input_form, more_like_this }: any = appParams
const prompt_variables = userInputsFormToPromptVariables(user_input_form)
// TODO: test paragraph type
const prompt_variables = userInputsFormToPromptVariables(user_input_form).map(item => ({
...item,
type: 'paragraph',
}))
setPromptConfig({
prompt_template: '', // placeholder for feture
prompt_variables,
......@@ -331,8 +328,6 @@ const TextGeneration: FC<IMainProps> = ({
inputs={inputs}
onInputsChange={setInputs}
promptConfig={promptConfig}
query={query}
onQueryChange={setQuery}
onSend={handleSend}
/>
)}
......
web/i18n/lang/share-app.en.ts
View file @ 60f6ab03
const translation = {
common: {
welcome: "Welcome to use",
appUnavailable: "App is unavailable",
appUnkonwError: "App is unavailable"
welcome: 'Welcome to use',
appUnavailable: 'App is unavailable',
appUnkonwError: 'App is unavailable',
},
chat: {
newChat: "New chat",
newChatDefaultName: "New conversation",
powerBy: "Powered by",
prompt: "Prompt",
privatePromptConfigTitle: "Conversation settings",
publicPromptConfigTitle: "Initial Prompt",
configStatusDes: "Before start, you can modify conversation settings",
newChat: 'New chat',
newChatDefaultName: 'New conversation',
powerBy: 'Powered by',
prompt: 'Prompt',
privatePromptConfigTitle: 'Conversation settings',
publicPromptConfigTitle: 'Initial Prompt',
configStatusDes: 'Before start, you can modify conversation settings',
configDisabled:
"Previous session settings have been used for this session.",
startChat: "Start Chat",
'Previous session settings have been used for this session.',
startChat: 'Start Chat',
privacyPolicyLeft:
"Please read the ",
'Please read the ',
privacyPolicyMiddle:
"privacy policy",
'privacy policy',
privacyPolicyRight:
" provided by the app developer.",
' provided by the app developer.',
},
generation: {
tabs: {
create: "Create",
saved: "Saved",
create: 'Create',
saved: 'Saved',
},
savedNoData: {
title: "You haven't saved a result yet!",
title: 'You haven\'t saved a result yet!',
description: 'Start generating content, and find your saved results here.',
startCreateContent: 'Start create content'
startCreateContent: 'Start create content',
},
title: "AI Completion",
queryTitle: "Query content",
queryPlaceholder: "Write your query content...",
run: "RUN",
copy: "Copy",
resultTitle: "AI Completion",
noData: "AI will give you what you want here.",
title: 'AI Completion',
queryTitle: 'Query content',
queryPlaceholder: 'Write your query content...',
run: 'Execute',
copy: 'Copy',
resultTitle: 'AI Completion',
noData: 'AI will give you what you want here.',
},
};
}
export default translation;
export default translation
web/i18n/lang/share-app.zh.ts
View file @ 60f6ab03
const translation = {
common: {
welcome: "欢迎使用",
appUnavailable: "应用不可用",
appUnkonwError: "应用不可用",
welcome: '欢迎使用',
appUnavailable: '应用不可用',
appUnkonwError: '应用不可用',
},
chat: {
newChat: "新对话",
newChatDefaultName: "新的对话",
powerBy: "Powered by",
prompt: "提示词",
privatePromptConfigTitle: "对话设置",
publicPromptConfigTitle: "对话前提示词",
configStatusDes: "开始前，您可以修改对话设置",
configDisabled: "此次会话已使用上次会话表单",
startChat: "开始对话",
privacyPolicyLeft: "请阅读由该应用开发者提供的",
privacyPolicyMiddle: "隐私政策",
privacyPolicyRight: "。",
newChat: '新对话',
newChatDefaultName: '新的对话',
powerBy: 'Powered by',
prompt: '提示词',
privatePromptConfigTitle: '对话设置',
publicPromptConfigTitle: '对话前提示词',
configStatusDes: '开始前，您可以修改对话设置',
configDisabled: '此次会话已使用上次会话表单',
startChat: '开始对话',
privacyPolicyLeft: '请阅读由该应用开发者提供的',
privacyPolicyMiddle: '隐私政策',
privacyPolicyRight: '。',
},
generation: {
tabs: {
create: "创建",
saved: "已保存",
create: '创建',
saved: '已保存',
},
savedNoData: {
title: "您还没有保存结果！",
title: '您还没有保存结果！',
description: '开始生成内容，您可以在这里找到保存的结果。',
startCreateContent: '开始生成内容'
startCreateContent: '开始生成内容',
},
title: "AI 智能书写",
queryTitle: "查询内容",
queryPlaceholder: "请输入文本内容",
run: "运行",
copy: "拷贝",
resultTitle: "AI 书写",
noData: "AI 会在这里给你惊喜。",
title: 'AI 智能书写',
queryTitle: '查询内容',
queryPlaceholder: '请输入文本内容',
run: '运行',
copy: '拷贝',
resultTitle: 'AI 书写',
noData: 'AI 会在这里给你惊喜。',
},
};
}
export default translation;
export default translation
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