From 58da9c3c11b27257ce09fc553952b02b51c63101 Mon Sep 17 00:00:00 2001 From: zhsama Date: Tue, 20 Jan 2026 20:01:50 +0800 Subject: [PATCH] refactor: Refactor context generation modal and improve type safety # Conflicts: # web/i18n/en-US/workflow.json # web/i18n/zh-Hans/workflow.json --- .../app/text-generate/item/index.tsx | 52 ++++---- .../context-generate-modal/index.tsx | 125 +++++++++--------- web/eslint-suppressions.json | 7 +- web/i18n/en-US/workflow.json | 11 ++ web/i18n/ja-JP/workflow.json | 10 ++ web/i18n/zh-Hans/workflow.json | 1 + web/i18n/zh-Hant/workflow.json | 10 ++ web/service/debug.ts | 36 +++-- 8 files changed, 151 insertions(+), 101 deletions(-) diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx index 78f4f426f5..8176fa97ab 100644 --- a/web/app/components/app/text-generate/item/index.tsx +++ b/web/app/components/app/text-generate/item/index.tsx @@ -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 = ({ 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) } diff --git a/web/app/components/workflow/nodes/tool/components/context-generate-modal/index.tsx b/web/app/components/workflow/nodes/tool/components/context-generate-modal/index.tsx index a64001b4c3..c859f75294 100644 --- a/web/app/components/workflow/nodes/tool/components/context-generate-modal/index.tsx +++ b/web/app/components/workflow/nodes/tool/components/context-generate-modal/index.tsx @@ -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 = ({ 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(localModel || { - name: '', - provider: '', - mode: AppModeEnum.CHAT as unknown as ModelModeType.chat, - completion_params: defaultCompletionParams, + const [modelOverride, setModelOverride] = useState(() => { + 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(() => { + 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 = ({ 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 = ({ ...model, completion_params: newParams as CompletionParams, } - setModel(newModel) + setModelOverride(newModel) localStorage.setItem('auto-gen-model', JSON.stringify(newModel)) }, [model]) const chatListRef = useRef(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 = ({ 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 = ({ } 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 = ({ const draggingRef = useRef(false) const dragStartRef = useRef({ startY: 0, startHeight: 0 }) - const handleResizeStart = useCallback((event: React.MouseEvent) => { + const handleResizeStart = useCallback((event: React.PointerEvent) => { draggingRef.current = true dragStartRef.current = { startY: event.clientY, @@ -504,12 +505,14 @@ const ContextGenerateModal: FC = ({ /> -
-
+
{t('nodes.tool.contextGenerate.output', { ns: 'workflow' })} diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json index 65648030c8..24b29129cb 100644 --- a/web/eslint-suppressions.json +++ b/web/eslint-suppressions.json @@ -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 diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json index cad36d593f..143595a83d 100644 --- a/web/i18n/en-US/workflow.json +++ b/web/i18n/en-US/workflow.json @@ -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", diff --git a/web/i18n/ja-JP/workflow.json b/web/i18n/ja-JP/workflow.json index b38ccfc8ad..4118019bb5 100644 --- a/web/i18n/ja-JP/workflow.json +++ b/web/i18n/ja-JP/workflow.json @@ -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": "変数を挿入する", diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json index aef9a33e03..014950f296 100644 --- a/web/i18n/zh-Hans/workflow.json +++ b/web/i18n/zh-Hans/workflow.json @@ -1017,6 +1017,7 @@ "skillSidebar.loadError": "加载文件失败", "skillSidebar.menu.cannotMoveToDescendant": "无法将文件夹移动到其子文件夹中", "skillSidebar.menu.cannotMoveToSelf": "无法将文件夹移动到自身内部", + "skillSidebar.menu.cannotMoveToSelf": "无法将文件夹移动到自身内部", "skillSidebar.menu.copy": "复制", "skillSidebar.menu.copyNotSupported": "暂不支持复制功能", "skillSidebar.menu.createError": "创建失败", diff --git a/web/i18n/zh-Hant/workflow.json b/web/i18n/zh-Hant/workflow.json index 64848d881e..d9866f311a 100644 --- a/web/i18n/zh-Hant/workflow.json +++ b/web/i18n/zh-Hant/workflow.json @@ -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": "插入變數", diff --git a/web/service/debug.ts b/web/service/debug.ts index 120162e96e..cb245afce4 100644 --- a/web/service/debug.ts +++ b/web/service/debug.ts @@ -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 + completion_params?: CompletionParams } } @@ -57,7 +58,24 @@ export type ContextGenerateResponse = { error: string } -export const sendChatMessage = async (appId: string, body: Record, { 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, { 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, { onData, onCompleted, onError, onMessageReplace }: { +export const sendCompletionMessage = async (appId: string, body: Record, { onData, onCompleted, onError, onMessageReplace }: { onData: IOnData onCompleted: IOnCompleted onError: IOnError @@ -93,7 +111,7 @@ export const sendCompletionMessage = async (appId: string, body: Record { +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) => { +export const generateBasicAppFirstTimeRule = (body: Record) => { return post('/rule-generate', { body, }) } -export const generateRule = (body: Record) => { +export const generateRule = (body: Record) => { return post('/instruction-generate', { body, }) @@ -159,5 +177,5 @@ export const fetchTextGenerationMessage = ({ appId, messageId, }: { appId: string, messageId: string }) => { - return get>(`/apps/${appId}/messages/${messageId}`) + return get>(`/apps/${appId}/messages/${messageId}`) }