Skip to content

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

chore: output lines

parent 65ac4ded
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 154 deletions
web/app/(commonLayout)/workflow/nodes/page.tsx
View file @ b4437ccd
...@@ -48,7 +48,7 @@ const Page: FC = () => { ...@@ -48,7 +48,7 @@ const Page: FC = () => {
* 2 directAnswer 3: llm 5: questionClassifier * 2 directAnswer 3: llm 5: questionClassifier
* 7 Code, 8 TemplateTransform * 7 Code, 8 TemplateTransform
*/ */
selectedNodeId='8' selectedNodeId='3'
/> />
</div> </div>
) )
......
web/app/components/workflow/nodes/code/panel.tsx
View file @ b4437ccd
...@@ -33,32 +33,37 @@ const Panel: FC = () => { ...@@ -33,32 +33,37 @@ const Panel: FC = () => {
handleCodeLanguageChange, handleCodeLanguageChange,
} = useConfig(mockData) } = useConfig(mockData)
return ( return (
<div className='mt-2 px-4 space-y-4'> <div className='mt-2'>
<Field <div className='px-4 pb-4 space-y-4'>
title={t(`${i18nPrefix}.inputVars`)} <Field
operations={ title={t(`${i18nPrefix}.inputVars`)}
<AddButton onClick={handleAddVariable} /> operations={
} <AddButton onClick={handleAddVariable} />
> }
<VarList >
readonly={readOnly} <VarList
list={inputs.variables} readonly={readOnly}
onChange={handleVarListChange} list={inputs.variables}
/> onChange={handleVarListChange}
</Field>
<Split />
<CodeEditor
title={
<TypeSelector
list={codeLanguages}
value={inputs.code_language}
onChange={handleCodeLanguageChange}
/> />
} </Field>
value={inputs.code} <Split />
onChange={handleCodeChange} <CodeEditor
/> title={
<TypeSelector
list={codeLanguages}
value={inputs.code_language}
onChange={handleCodeLanguageChange}
/>
}
value={inputs.code}
onChange={handleCodeChange}
/>
</div>
<Split /> <Split />
<div className='px-4 pt-4 pb-2'>
output var
</div>
</div> </div>
) )
} }
......
web/app/components/workflow/nodes/direct-answer/use-config.ts
View file @ b4437ccd
import { useCallback, useState } from 'react' import { useCallback, useState } from 'react'
import produce from 'immer' import produce from 'immer'
import type { Variable } from '../../types' import useVarList from '../_base/hooks/use-var-list'
import type { DirectAnswerNodeType } from './types' import type { DirectAnswerNodeType } from './types'
const useConfig = (initInputs: DirectAnswerNodeType) => { const useConfig = (initInputs: DirectAnswerNodeType) => {
const [inputs, setInputs] = useState<DirectAnswerNodeType>(initInputs) const [inputs, setInputs] = useState<DirectAnswerNodeType>(initInputs)
// variables // variables
const handleVarListChange = useCallback((newList: Variable[]) => { const { handleVarListChange, handleAddVariable } = useVarList<DirectAnswerNodeType>({
const newInputs = produce(inputs, (draft) => { inputs,
draft.variables = newList setInputs,
}) })
setInputs(newInputs)
}, [inputs, setInputs])
const handleAddVariable = useCallback(() => {
const newInputs = produce(inputs, (draft) => {
draft.variables.push({
variable: '',
value_selector: [],
})
})
setInputs(newInputs)
}, [inputs, setInputs])
const handleAnswerChange = useCallback((value: string) => { const handleAnswerChange = useCallback((value: string) => {
const newInputs = produce(inputs, (draft) => { const newInputs = produce(inputs, (draft) => {
......
web/app/components/workflow/nodes/llm/panel.tsx
View file @ b4437ccd
...@@ -29,80 +29,85 @@ const Panel: FC = () => { ...@@ -29,80 +29,85 @@ const Panel: FC = () => {
// const isChatMode = modelMode === 'chat' // const isChatMode = modelMode === 'chat'
return ( return (
<div className='mt-2 px-4 space-y-4'> <div className='mt-2'>
<Field <div className='px-4 pb-4 space-y-4'>
title={t(`${i18nPrefix}.model`)} <Field
> title={t(`${i18nPrefix}.model`)}
<ModelParameterModal >
popupClassName='!w-[387px]' <ModelParameterModal
isAdvancedMode={true} popupClassName='!w-[387px]'
mode={model?.mode} isAdvancedMode={true}
provider={model?.provider} mode={model?.mode}
completionParams={model.completion_params} provider={model?.provider}
modelId={model.name} completionParams={model.completion_params}
setModel={handleModelChanged} modelId={model.name}
onCompletionParamsChange={handleCompletionParamsChange} setModel={handleModelChanged}
hideDebugWithMultipleModel onCompletionParamsChange={handleCompletionParamsChange}
debugWithMultipleModel={false} hideDebugWithMultipleModel
/> debugWithMultipleModel={false}
</Field> />
</Field>
<Field
title={t(`${i18nPrefix}.variables`)}
operations={
<AddButton onClick={handleAddVariable} />
}
>
<VarList
readonly={readOnly}
list={inputs.variables}
onChange={handleVarListChange}
/>
</Field>
<Field <Field
title={t(`${i18nPrefix}.context`)} title={t(`${i18nPrefix}.variables`)}
operations={ operations={
<Switch <AddButton onClick={handleAddVariable} />
defaultValue={inputs.context.enabled} }
onChange={toggleContextEnabled} >
size='md' <VarList
readonly={readOnly}
list={inputs.variables}
onChange={handleVarListChange}
/> />
} </Field>
>
{inputs.context.enabled <Field
? ( title={t(`${i18nPrefix}.context`)}
<div>Context</div> operations={
) <Switch
: null} defaultValue={inputs.context.enabled}
</Field> onChange={toggleContextEnabled}
<Field size='md'
title={t(`${i18nPrefix}.prompt`)} />
> }
Prompt >
</Field> {inputs.context.enabled
? (
<div>Context</div>
)
: null}
</Field>
<Field
title={t(`${i18nPrefix}.prompt`)}
>
Prompt
</Field>
<Split />
<Field
title={t(`${i18nPrefix}.vision`)}
inline
>
Vision
</Field>
</div>
<Split /> <Split />
<Field <div className='px-4 pt-4 pb-2'>
title={t(`${i18nPrefix}.vision`)} <OutputVars>
inline <>
> <VarItem
Vision name='output'
</Field> type='string'
description={t(`${i18nPrefix}.outputVars.output`)}
/>
<VarItem
name='usage'
type='object'
description={t(`${i18nPrefix}.outputVars.usage`)}
/>
</>
</OutputVars>
</div>
<OutputVars>
<>
<VarItem
name='output'
type='string'
description={t(`${i18nPrefix}.outputVars.output`)}
/>
<VarItem
name='usage'
type='object'
description={t(`${i18nPrefix}.outputVars.usage`)}
/>
</>
</OutputVars>
</div> </div>
) )
} }
......
web/app/components/workflow/nodes/template-transform/node.tsx
View file @ b4437ccd
...@@ -2,7 +2,8 @@ import type { FC } from 'react' ...@@ -2,7 +2,8 @@ import type { FC } from 'react'
const Node: FC = () => { const Node: FC = () => {
return ( return (
<div>template-transform</div> // No summary content
<div></div>
) )
} }
......
web/app/components/workflow/nodes/template-transform/panel.tsx
View file @ b4437ccd
...@@ -23,49 +23,54 @@ const Panel: FC = () => { ...@@ -23,49 +23,54 @@ const Panel: FC = () => {
handleCodeChange, handleCodeChange,
} = useConfig(mockData) } = useConfig(mockData)
return ( return (
<div className='mt-2 px-4 space-y-4'> <div className='mt-2'>
<Field <div className='px-4 pb-4 space-y-4'>
title={t(`${i18nPrefix}.inputVars`)}
operations={ <Field
<AddButton onClick={handleAddVariable} /> title={t(`${i18nPrefix}.inputVars`)}
} operations={
> <AddButton onClick={handleAddVariable} />
<VarList }
readonly={readOnly} >
list={inputs.variables} <VarList
onChange={handleVarListChange} readonly={readOnly}
list={inputs.variables}
onChange={handleVarListChange}
/>
</Field>
<Split />
<CodeEditor
title={
<div className='uppercase'>{t(`${i18nPrefix}.code`)}</div>
}
headerRight={
<div className='flex items-center'>
<a
className='flex items-center space-x-0.5 h-[18px] text-xs font-normal text-gray-500'
href="https://jinja.palletsprojects.com/en/3.1.x/templates/"
target='_blank'>
<span>{t(`${i18nPrefix}.codeSupportTip`)}</span>
<HelpCircle className='w-3 h-3' />
</a>
<div className='mx-1.5 w-px h-3 bg-gray-200'></div>
</div>
}
value={inputs.template}
onChange={handleCodeChange}
/> />
</Field> </div>
<Split /> <Split />
<CodeEditor <div className='px-4 pt-4 pb-2'>
title={ <OutputVars>
<div className='uppercase'>{t(`${i18nPrefix}.code`)}</div> <>
} <VarItem
headerRight={ name='output'
<div className='flex items-center'> type='string'
<a description={t(`${i18nPrefix}.outputVars.output`)}
className='flex items-center space-x-0.5 h-[18px] text-xs font-normal text-gray-500' />
href="https://jinja.palletsprojects.com/en/3.1.x/templates/" </>
target='_blank'> </OutputVars>
<span>{t(`${i18nPrefix}.codeSupportTip`)}</span> </div>
<HelpCircle className='w-3 h-3' />
</a>
<div className='mx-1.5 w-px h-3 bg-gray-200'></div>
</div>
}
value={inputs.template}
onChange={handleCodeChange}
/>
<Split />
<OutputVars>
<>
<VarItem
name='output'
type='string'
description={t(`${i18nPrefix}.outputVars.output`)}
/>
</>
</OutputVars>
</div> </div>
) )
} }
......
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