AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 20:19:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat/application config user input field collapse (#643)

Browse Source
This commit is contained in:
zxhlyh 2023-07-26 10:27:52 +08:00 committed by GitHub
parent f8bae897e5
commit 1d6829f400
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 85 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
web/app/components/app/configuration/prompt-value-panel/index.tsx
View File

@ -1,6 +1,6 @@
'use client' 'use client'
import type { FC } from 'react' import type { FC } from 'react'
import React from 'react' import React, { useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector' import { useContext } from 'use-context-selector'
import { import {
@ -13,6 +13,7 @@ import { AppType } from '@/types/app'
import Select from '@/app/components/base/select' import Select from '@/app/components/base/select'
import { DEFAULT_VALUE_MAX_LEN } from '@/config' import { DEFAULT_VALUE_MAX_LEN } from '@/config'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
import { ChevronDown, ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
export type IPromptValuePanelProps = { export type IPromptValuePanelProps = {
appType: AppType appType: AppType
@ -37,6 +38,8 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
}) => { }) => {
const { t } = useTranslation() const { t } = useTranslation()
const { modelConfig, inputs, setInputs } = useContext(ConfigContext) const { modelConfig, inputs, setInputs } = useContext(ConfigContext)
const [promptPreviewCollapse, setPromptPreviewCollapse] = useState(false)
const [userInputFieldCollapse, setUserInputFieldCollapse] = useState(false)
const promptTemplate = modelConfig.configs.prompt_template const promptTemplate = modelConfig.configs.prompt_template
const promptVariables = modelConfig.configs.prompt_variables.filter(({ key, name }) => { const promptVariables = modelConfig.configs.prompt_variables.filter(({ key, name }) => {
return key && key?.trim() && name && name?.trim() return key && key?.trim() && name && name?.trim()
@ -63,12 +66,19 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
} }
const promptPreview = ( const promptPreview = (
<div className='pt-3 pb-4 rounded-t-xl bg-indigo-25'> <div className='py-3 rounded-t-xl bg-indigo-25'>
<div className="px-4"> <div className="px-4">
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1 cursor-pointer" onClick={() => setPromptPreviewCollapse(!promptPreviewCollapse)}>
{starIcon} {starIcon}
<div className="text-xs font-medium text-indigo-600 uppercase">{t('appDebug.inputs.previewTitle')}</div> <div className="text-xs font-medium text-indigo-600 uppercase">{t('appDebug.inputs.previewTitle')}</div>
{
promptPreviewCollapse
? <ChevronRight className='w-3 h-3 text-gray-700' />
: <ChevronDown className='w-3 h-3 text-gray-700' />
}
</div> </div>
{
!promptPreviewCollapse && (
<div className='mt-2 leading-normal'> <div className='mt-2 leading-normal'>
{ {
(promptTemplate && promptTemplate?.trim()) (promptTemplate && promptTemplate?.trim())
@ -86,26 +96,38 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
) )
} }
</div> </div>
)
}
</div> </div>
</div> </div>
) )
return ( return (
<div className="pb-5 border border-gray-200 bg-white rounded-xl" style={{ <div className="pb-3 border border-gray-200 bg-white rounded-xl" style={{
boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)', boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
}}> }}>
{promptPreview} {promptPreview}
<div className="mt-5 px-4"> <div className={'mt-3 px-4 bg-white'}>
<div className='mb-4 '> <div className={
<div className='flex items-center space-x-1'> `${!userInputFieldCollapse && 'mb-2'}`
}>
<div className='flex items-center space-x-1 cursor-pointer' onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}>
<div className='flex items-center justify-center w-4 h-4'><VarIcon /></div> <div className='flex items-center justify-center w-4 h-4'><VarIcon /></div>
<div className='text-sm font-semibold text-gray-800'>{t('appDebug.inputs.userInputField')}</div> <div className='text-xs font-medium text-gray-800'>{t('appDebug.inputs.userInputField')}</div>
{
userInputFieldCollapse
? <ChevronRight className='w-3 h-3 text-gray-700' />
: <ChevronDown className='w-3 h-3 text-gray-700' />
}
</div> </div>
{appType === AppType.completion && promptVariables.length > 0 && ( {appType === AppType.completion && promptVariables.length > 0 && !userInputFieldCollapse && (
<div className="mt-1 text-xs leading-normal text-gray-500">{t('appDebug.inputs.completionVarTip')}</div> <div className="mt-1 text-xs leading-normal text-gray-500">{t('appDebug.inputs.completionVarTip')}</div>
)} )}
</div> </div>
{
!userInputFieldCollapse && (
<>
{ {
promptVariables.length > 0 promptVariables.length > 0
? ( ? (
@ -144,12 +166,15 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
<div className='text-xs text-gray-500'>{t('appDebug.inputs.noVar')}</div> <div className='text-xs text-gray-500'>{t('appDebug.inputs.noVar')}</div>
) )
} }
</>
)
}
</div> </div>
{ {
appType === AppType.completion && ( appType === AppType.completion && (
<div className='px-4'> <div className='px-4'>
<div className="mt-5 border-b border-gray-100"></div> <div className="mt-3 border-b border-gray-100"></div>
<div className="mt-4"> <div className="mt-4">
<div> <div>
<div className="text-[13px] text-gray-900 font-medium">{t('appDebug.inputs.queryTitle')}</div> <div className="text-[13px] text-gray-900 font-medium">{t('appDebug.inputs.queryTitle')}</div>