youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 10:28:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Refactor context generation modal and improve type safety

Browse Source 
# Conflicts:
#	web/i18n/en-US/workflow.json
#	web/i18n/zh-Hans/workflow.json
This commit is contained in:
zhsama
2026-01-20 20:01:50 +08:00
parent 68d36ff3ed
commit 58da9c3c11
8 changed files with 151 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
web/app/components/app/text-generate/item/index.tsx
View File

@ -1,6 +1,6 @@
'use client'
import type { FC } from 'react'
import type { FeedbackType } from '@/app/components/base/chat/chat/type'
import type { FeedbackType, IChatItem } from '@/app/components/base/chat/chat/type'
import type { WorkflowProcess } from '@/app/components/base/chat/types'
import type { SiteInfo } from '@/models/share'
import {
@ -172,30 +172,32 @@ const GenerationItem: FC<IGenerationItemProps> = ({
appId: params.appId as string,
messageId: messageId!,
})
const logItem = Array.isArray(data.message)
? {
...data,
log: [
...data.message,
...(data.message[data.message.length - 1].role !== 'assistant'
? [
{
role: 'assistant',
text: data.answer,
files: data.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
},
]
: []),
],
}
: {
...data,
log: [typeof data.message === 'string'
? {
text: data.message,
}
: data.message],
}
const assistantFiles = data.message_files?.filter(file => file.belongs_to === 'assistant') || []
const normalizedMessage = typeof data.message === 'string'
? { role: 'user', text: data.message }
: data.message
const baseLog = Array.isArray(normalizedMessage) ? normalizedMessage : [normalizedMessage]
const log = Array.isArray(normalizedMessage)
? [
...normalizedMessage,
...(normalizedMessage.length > 0 && normalizedMessage[normalizedMessage.length - 1].role !== 'assistant'
? [
{
role: 'assistant',
text: data.answer || '',
files: assistantFiles,
},
]
: []),
]
: baseLog
const logItem: IChatItem = {
id: data.id || messageId || '',
content: data.answer || '',
isAnswer: true,
log,
message_files: data.message_files,
}
setCurrentLogItem(logItem)
setShowPromptLogModal(true)
}

125
web/app/components/workflow/nodes/tool/components/context-generate-modal/index.tsx
View File

@ -1,36 +1,34 @@
'use client'
import type { FC } from 'react'
import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
import type { CodeNodeType } from '@/app/components/workflow/nodes/code/types'
import type { OutputVar } from '@/app/components/workflow/nodes/code/types'
import type { CodeNodeType, OutputVar } from '@/app/components/workflow/nodes/code/types'
import type { ContextGenerateMessage, ContextGenerateResponse } from '@/service/debug'
import type { AppModeEnum, CompletionParams, Model, ModelModeType } from '@/types/app'
import {
RiSendPlaneLine,
} from '@remixicon/react'
import type { CompletionParams, Model, ModelModeType } from '@/types/app'
import { RiSendPlaneLine } from '@remixicon/react'
import { useSessionStorageState } from 'ahooks'
import useBoolean from 'ahooks/lib/useBoolean'
import * as React from 'react'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ResPlaceholder from '@/app/components/app/configuration/config/automatic/res-placeholder'
import VersionSelector from '@/app/components/app/configuration/config/automatic/version-selector'
import Button from '@/app/components/base/button'
import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
import Input from '@/app/components/base/input'
import Loading from '@/app/components/base/loading'
import Modal from '@/app/components/base/modal'
import Toast from '@/app/components/base/toast'
import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
import VersionSelector from '@/app/components/app/configuration/config/automatic/version-selector'
import ResPlaceholder from '@/app/components/app/configuration/config/automatic/res-placeholder'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import { useNodeDataUpdate } from '@/app/components/workflow/hooks/use-node-data-update'
import { useHooksStore } from '@/app/components/workflow/hooks-store'
import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
import { useNodeDataUpdate } from '@/app/components/workflow/hooks/use-node-data-update'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
import { NodeRunningStatus, VarType } from '@/app/components/workflow/types'
import { generateContext } from '@/service/debug'
import { AppModeEnum } from '@/types/app'
import { cn } from '@/utils/classnames'
import useContextGenData from './use-context-gen-data'
@ -45,6 +43,15 @@ type Props = {
const minCodeHeight = 220
const minOutputHeight = 160
const splitHandleHeight = 6
const defaultCompletionParams: CompletionParams = {
temperature: 0.7,
max_tokens: 0,
top_p: 0,
echo: false,
stop: [],
presence_penalty: 0,
frequency_penalty: 0,
}
const normalizeCodeLanguage = (value?: string) => {
if (value === CodeLanguage.javascript)
@ -133,53 +140,42 @@ const ContextGenerateModal: FC<Props> = ({
const [inputValue, setInputValue] = useState('')
const [isGenerating, { setTrue: setGeneratingTrue, setFalse: setGeneratingFalse }] = useBoolean(false)
const defaultCompletionParams = {
temperature: 0.7,
max_tokens: 0,
top_p: 0,
echo: false,
stop: [],
presence_penalty: 0,
frequency_penalty: 0,
}
const localModel = localStorage.getItem('auto-gen-model')
? JSON.parse(localStorage.getItem('auto-gen-model') as string) as Model
: null
const [model, setModel] = React.useState<Model>(localModel || {
name: '',
provider: '',
mode: AppModeEnum.CHAT as unknown as ModelModeType.chat,
completion_params: defaultCompletionParams,
const [modelOverride, setModelOverride] = useState<Model | null>(() => {
const stored = localStorage.getItem('auto-gen-model')
if (!stored)
return null
const parsed = JSON.parse(stored) as Model
return {
...parsed,
completion_params: {
...defaultCompletionParams,
...parsed.completion_params,
},
}
})
const {
defaultModel,
} = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textGeneration)
useEffect(() => {
if (defaultModel) {
const localModel = localStorage.getItem('auto-gen-model')
? JSON.parse(localStorage.getItem('auto-gen-model') || '')
: null
if (localModel) {
setModel({
...localModel,
completion_params: {
...defaultCompletionParams,
...localModel.completion_params,
},
})
}
else {
setModel(prev => ({
...prev,
name: defaultModel.model,
provider: defaultModel.provider.provider,
}))
const model = useMemo<Model>(() => {
if (modelOverride)
return modelOverride
if (!defaultModel) {
return {
name: '',
provider: '',
mode: AppModeEnum.CHAT as unknown as ModelModeType.chat,
completion_params: defaultCompletionParams,
}
}
}, [defaultModel])
return {
name: defaultModel.model,
provider: defaultModel.provider.provider,
mode: AppModeEnum.CHAT as unknown as ModelModeType.chat,
completion_params: defaultCompletionParams,
}
}, [defaultModel, modelOverride])
const handleModelChange = useCallback((newValue: { modelId: string, provider: string, mode?: string, features?: string[] }) => {
const newModel = {
@ -188,7 +184,7 @@ const ContextGenerateModal: FC<Props> = ({
name: newValue.modelId,
mode: newValue.mode as ModelModeType,
}
setModel(newModel)
setModelOverride(newModel)
localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
}, [model])
@ -197,16 +193,19 @@ const ContextGenerateModal: FC<Props> = ({
...model,
completion_params: newParams as CompletionParams,
}
setModel(newModel)
setModelOverride(newModel)
localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
}, [model])
const chatListRef = useRef<HTMLDivElement>(null)
const promptMessageCount = promptMessages?.length ?? 0
useEffect(() => {
if (!chatListRef.current)
return
if (promptMessageCount === 0 && !isGenerating)
return
chatListRef.current.scrollTop = chatListRef.current.scrollHeight
}, [promptMessages, isGenerating])
}, [promptMessageCount, isGenerating])
const handleGenerate = useCallback(async () => {
const trimmed = inputValue.trim()
@ -215,7 +214,8 @@ const ContextGenerateModal: FC<Props> = ({
if (!flowId || !toolNodeId || !paramKey)
return
const nextMessages = [...(promptMessages || []), { role: 'user', content: trimmed }]
const userMessage: ContextGenerateMessage = { role: 'user', content: trimmed }
const nextMessages: ContextGenerateMessage[] = [...(promptMessages ?? []), userMessage]
setPromptMessages(nextMessages)
setInputValue('')
setGeneratingTrue()
@ -242,7 +242,8 @@ const ContextGenerateModal: FC<Props> = ({
}
const assistantMessage = response.message || t('nodes.tool.contextGenerate.defaultAssistantMessage', { ns: 'workflow' })
setPromptMessages([...nextMessages, { role: 'assistant', content: assistantMessage }])
const assistantEntry: ContextGenerateMessage = { role: 'assistant', content: assistantMessage }
setPromptMessages([...nextMessages, assistantEntry])
addVersion(response)
}
finally {
@ -326,7 +327,7 @@ const ContextGenerateModal: FC<Props> = ({
const draggingRef = useRef(false)
const dragStartRef = useRef({ startY: 0, startHeight: 0 })
const handleResizeStart = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
const handleResizeStart = useCallback((event: React.PointerEvent<HTMLButtonElement>) => {
draggingRef.current = true
dragStartRef.current = {
startY: event.clientY,
@ -504,12 +505,14 @@ const ContextGenerateModal: FC<Props> = ({
/>
</div>
</div>
<div
className="flex h-[6px] cursor-row-resize items-center justify-center"
onMouseDown={handleResizeStart}
<button
type="button"
className="flex h-[6px] w-full cursor-row-resize items-center justify-center bg-transparent p-0"
aria-label={t('nodes.tool.contextGenerate.resizeHandle', { ns: 'workflow' })}
onPointerDown={handleResizeStart}
>
<div className="h-1 w-8 rounded-full bg-divider-subtle" />
</div>
</button>
<div className="flex min-h-[160px] flex-1 flex-col overflow-hidden rounded-lg border border-components-panel-border bg-components-panel-bg">
<div className="px-3 pb-1 pt-2 text-xs font-semibold uppercase text-text-tertiary">
{t('nodes.tool.contextGenerate.output', { ns: 'workflow' })}

7
web/eslint-suppressions.json
View File

@ -589,7 +589,7 @@
"count": 3
},
"ts/no-explicit-any": {
"count": 4
"count": 3
}
},
"app/components/app/text-generate/item/result-tab.tsx": {
@ -4363,11 +4363,6 @@
"count": 8
}
},
"service/debug.ts": {
"ts/no-explicit-any": {
"count": 7
}
},
"service/explore.ts": {
"ts/no-explicit-any": {
"count": 1

11
web/i18n/en-US/workflow.json
View File

@ -786,6 +786,16 @@
"nodes.tool.agentPlaceholder": "Tell me the {{paramKey}}...",
"nodes.tool.assembleVariables": "Assemble variables",
"nodes.tool.authorize": "Authorize",
"nodes.tool.contextGenerate.apply": "Apply",
"nodes.tool.contextGenerate.code": "Code",
"nodes.tool.contextGenerate.codeBlock": "Code Block",
"nodes.tool.contextGenerate.defaultAssistantMessage": "I've finished, please have a check on it.",
"nodes.tool.contextGenerate.generating": "Generating...",
"nodes.tool.contextGenerate.inputPlaceholder": "Ask for change...",
"nodes.tool.contextGenerate.output": "Output",
"nodes.tool.contextGenerate.resizeHandle": "Resize handle",
"nodes.tool.contextGenerate.run": "Run",
"nodes.tool.contextGenerate.title": "Assemble Variables",
"nodes.tool.inputVars": "Input Variables",
"nodes.tool.insertPlaceholder1": "Type or press",
"nodes.tool.insertPlaceholder2": "insert variable",
@ -1025,6 +1035,7 @@
"skillSidebar.loadError": "Failed to load files",
"skillSidebar.menu.cannotMoveToDescendant": "Cannot move a folder into its descendant",
"skillSidebar.menu.cannotMoveToSelf": "Cannot move a folder into itself",
"skillSidebar.menu.cannotMoveToSelf": "Cannot move a folder into itself",
"skillSidebar.menu.copy": "Copy",
"skillSidebar.menu.copyNotSupported": "Copy is not supported yet",
"skillSidebar.menu.createError": "Failed to create item",

10
web/i18n/ja-JP/workflow.json
View File

@ -767,6 +767,16 @@
"nodes.tool.agentPlaceholder": "{{paramKey}} を教えてください...",
"nodes.tool.assembleVariables": "変数を組み立てる",
"nodes.tool.authorize": "認証する",
"nodes.tool.contextGenerate.apply": "適用",
"nodes.tool.contextGenerate.code": "コード",
"nodes.tool.contextGenerate.codeBlock": "コードブロック",
"nodes.tool.contextGenerate.defaultAssistantMessage": "完了しました。確認してください。",
"nodes.tool.contextGenerate.generating": "生成中...",
"nodes.tool.contextGenerate.inputPlaceholder": "変更を依頼...",
"nodes.tool.contextGenerate.output": "出力",
"nodes.tool.contextGenerate.resizeHandle": "サイズ調整ハンドル",
"nodes.tool.contextGenerate.run": "実行",
"nodes.tool.contextGenerate.title": "変数を組み立てる",
"nodes.tool.inputVars": "入力変数",
"nodes.tool.insertPlaceholder1": "タイプするか押してください",
"nodes.tool.insertPlaceholder2": "変数を挿入する",

1
web/i18n/zh-Hans/workflow.json
View File

@ -1017,6 +1017,7 @@
"skillSidebar.loadError": "加载文件失败",
"skillSidebar.menu.cannotMoveToDescendant": "无法将文件夹移动到其子文件夹中",
"skillSidebar.menu.cannotMoveToSelf": "无法将文件夹移动到自身内部",
"skillSidebar.menu.cannotMoveToSelf": "无法将文件夹移动到自身内部",
"skillSidebar.menu.copy": "复制",
"skillSidebar.menu.copyNotSupported": "暂不支持复制功能",
"skillSidebar.menu.createError": "创建失败",

10
web/i18n/zh-Hant/workflow.json
View File

@ -767,6 +767,16 @@
"nodes.tool.agentPlaceholder": "告訴我 {{paramKey}}...",
"nodes.tool.assembleVariables": "組裝變數",
"nodes.tool.authorize": "授權",
"nodes.tool.contextGenerate.apply": "套用",
"nodes.tool.contextGenerate.code": "程式碼",
"nodes.tool.contextGenerate.codeBlock": "程式碼區塊",
"nodes.tool.contextGenerate.defaultAssistantMessage": "我已完成，請查看。",
"nodes.tool.contextGenerate.generating": "生成中...",
"nodes.tool.contextGenerate.inputPlaceholder": "請求修改...",
"nodes.tool.contextGenerate.output": "輸出",
"nodes.tool.contextGenerate.resizeHandle": "調整大小把手",
"nodes.tool.contextGenerate.run": "執行",
"nodes.tool.contextGenerate.title": "組裝變數",
"nodes.tool.inputVars": "輸入變數",
"nodes.tool.insertPlaceholder1": "輸入或按壓",
"nodes.tool.insertPlaceholder2": "插入變數",

36
web/service/debug.ts
View File

@ -1,7 +1,8 @@
import type { IOnCompleted, IOnData, IOnError, IOnFile, IOnMessageEnd, IOnMessageReplace, IOnThought } from './base'
import type { FileEntity } from '@/app/components/base/file-uploader/types'
import type { ModelParameterRule } from '@/app/components/header/account-setting/model-provider-page/declarations'
import type { ChatPromptConfig, CompletionPromptConfig } from '@/models/debug'
import type { AppModeEnum, ModelModeType } from '@/types/app'
import type { AppModeEnum, CompletionParams, ModelModeType } from '@/types/app'
import { get, post, ssePost } from './base'
export type BasicAppFirstRes = {
@ -39,7 +40,7 @@ export type ContextGenerateRequest = {
model_config: {
provider: string
name: string
completion_params?: Record<string, any>
completion_params?: CompletionParams
}
}
@ -57,7 +58,24 @@ export type ContextGenerateResponse = {
error: string
}
export const sendChatMessage = async (appId: string, body: Record<string, any>, { onData, onCompleted, onThought, onFile, onError, getAbortController, onMessageEnd, onMessageReplace }: {
export type TextGenerationMessageFile = FileEntity & {
belongs_to?: 'assistant' | 'user' | string
}
export type TextGenerationMessageItem = {
role: 'assistant' | 'user' | 'system'
text: string
files?: TextGenerationMessageFile[]
}
export type TextGenerationMessageResponse = {
id?: string
answer?: string
message: string | TextGenerationMessageItem | TextGenerationMessageItem[]
message_files?: TextGenerationMessageFile[]
}
export const sendChatMessage = async (appId: string, body: Record<string, unknown>, { onData, onCompleted, onThought, onFile, onError, getAbortController, onMessageEnd, onMessageReplace }: {
onData: IOnData
onCompleted: IOnCompleted
onFile: IOnFile
@ -79,7 +97,7 @@ export const stopChatMessageResponding = async (appId: string, taskId: string) =
return post(`apps/${appId}/chat-messages/${taskId}/stop`)
}
export const sendCompletionMessage = async (appId: string, body: Record<string, any>, { onData, onCompleted, onError, onMessageReplace }: {
export const sendCompletionMessage = async (appId: string, body: Record<string, unknown>, { onData, onCompleted, onError, onMessageReplace }: {
onData: IOnData
onCompleted: IOnCompleted
onError: IOnError
@ -93,7 +111,7 @@ export const sendCompletionMessage = async (appId: string, body: Record<string,
}, { onData, onCompleted, onError, onMessageReplace })
}
export const fetchSuggestedQuestions = (appId: string, messageId: string, getAbortController?: any) => {
export const fetchSuggestedQuestions = (appId: string, messageId: string, getAbortController?: (abortController: AbortController) => void) => {
return get(
`apps/${appId}/chat-messages/${messageId}/suggested-questions`,
{},
@ -103,7 +121,7 @@ export const fetchSuggestedQuestions = (appId: string, messageId: string, getAbo
)
}
export const fetchConversationMessages = (appId: string, conversation_id: string, getAbortController?: any) => {
export const fetchConversationMessages = (appId: string, conversation_id: string, getAbortController?: (abortController: AbortController) => void) => {
return get(`apps/${appId}/chat-messages`, {
params: {
conversation_id,
@ -113,13 +131,13 @@ export const fetchConversationMessages = (appId: string, conversation_id: string
})
}
export const generateBasicAppFirstTimeRule = (body: Record<string, any>) => {
export const generateBasicAppFirstTimeRule = (body: Record<string, unknown>) => {
return post<BasicAppFirstRes>('/rule-generate', {
body,
})
}
export const generateRule = (body: Record<string, any>) => {
export const generateRule = (body: Record<string, unknown>) => {
return post<GenRes>('/instruction-generate', {
body,
})
@ -159,5 +177,5 @@ export const fetchTextGenerationMessage = ({
appId,
messageId,
}: { appId: string, messageId: string }) => {
return get<Promise<any>>(`/apps/${appId}/messages/${messageId}`)
return get<Promise<TextGenerationMessageResponse>>(`/apps/${appId}/messages/${messageId}`)
}