From f2363fc4583782c53b9f3aa4da7a4a7cc864c3f6 Mon Sep 17 00:00:00 2001 From: crazywoola <427733928@qq.com> Date: Fri, 26 Dec 2025 12:40:38 +0800 Subject: [PATCH] feat: use new styles --- .../workflow/hooks/use-workflow-vibe.tsx | 22 +- .../workflow/panel/vibe-panel/index.tsx | 225 ++++++++++++------ .../workflow/store/workflow/panel-slice.ts | 4 + 3 files changed, 181 insertions(+), 70 deletions(-) diff --git a/web/app/components/workflow/hooks/use-workflow-vibe.tsx b/web/app/components/workflow/hooks/use-workflow-vibe.tsx index 705147cac1..33c51953ef 100644 --- a/web/app/components/workflow/hooks/use-workflow-vibe.tsx +++ b/web/app/components/workflow/hooks/use-workflow-vibe.tsx @@ -326,6 +326,20 @@ export const useWorkflowVibe = () => { } }, [defaultModel]) + const getLatestModelConfig = useCallback(() => { + if (typeof window === 'undefined') + return modelConfig + const stored = localStorage.getItem('auto-gen-model') + if (!stored) + return modelConfig + try { + return JSON.parse(stored) as Model + } + catch { + return modelConfig + } + }, [modelConfig]) + const availableNodesList = useMemo(() => { if (!nodesMetaDataMap) return [] @@ -650,7 +664,8 @@ export const useWorkflowVibe = () => { return } - if (!modelConfig && !isMermaidFlowchart(trimmed)) { + const latestModelConfig = getLatestModelConfig() + if (!latestModelConfig && !isMermaidFlowchart(trimmed)) { Toast.notify({ type: 'error', message: t('workflow.vibe.modelUnavailable') }) return } @@ -667,6 +682,7 @@ export const useWorkflowVibe = () => { showVibePanel: true, isVibeGenerating: true, vibePanelMermaidCode: '', + vibePanelInstruction: trimmed, })) try { @@ -701,7 +717,7 @@ export const useWorkflowVibe = () => { if (!isMermaidFlowchart(trimmed)) { const { error, flowchart } = await generateFlowchart({ instruction: trimmed, - model_config: modelConfig, + model_config: latestModelConfig, available_nodes: availableNodesPayload, existing_nodes: existingNodesPayload, available_tools: toolsPayload, @@ -738,7 +754,6 @@ export const useWorkflowVibe = () => { availableNodesList, getNodesReadOnly, handleSyncWorkflowDraft, - modelConfig, nodeTypeLookup, nodesMetaDataMap, saveStateToHistory, @@ -746,6 +761,7 @@ export const useWorkflowVibe = () => { t, toolLookup, toolOptions, + getLatestModelConfig, ]) const handleRegenerate = useCallback(async () => { diff --git a/web/app/components/workflow/panel/vibe-panel/index.tsx b/web/app/components/workflow/panel/vibe-panel/index.tsx index af5b947bdc..684cf4d96e 100644 --- a/web/app/components/workflow/panel/vibe-panel/index.tsx +++ b/web/app/components/workflow/panel/vibe-panel/index.tsx @@ -1,13 +1,23 @@ 'use client' import type { FC } from 'react' -import { RiCheckLine, RiCloseLine, RiLoader2Line, RiRefreshLine } from '@remixicon/react' -import { useCallback } from 'react' +import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations' +import type { CompletionParams, Model } from '@/types/app' +import { RiCheckLine, RiRefreshLine } from '@remixicon/react' +import { useCallback, useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' +import ResPlaceholder from '@/app/components/app/configuration/config/automatic/res-placeholder' import Button from '@/app/components/base/button' +import { Generator } from '@/app/components/base/icons/src/vender/other' +import Loading from '@/app/components/base/loading' import Flowchart from '@/app/components/base/mermaid' -import { cn } from '@/utils/classnames' -import { VIBE_ACCEPT_EVENT, VIBE_REGENERATE_EVENT } from '../../constants' +import Modal from '@/app/components/base/modal' +import Textarea from '@/app/components/base/textarea' +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 { ModelModeType } from '@/types/app' +import { VIBE_ACCEPT_EVENT, VIBE_COMMAND_EVENT, VIBE_REGENERATE_EVENT } from '../../constants' import { useStore } from '../../store' const VibePanel: FC = () => { @@ -18,6 +28,57 @@ const VibePanel: FC = () => { const setVibePanelMermaidCode = useStore(s => s.setVibePanelMermaidCode) const isVibeGenerating = useStore(s => s.isVibeGenerating) const setIsVibeGenerating = useStore(s => s.setIsVibeGenerating) + const vibePanelInstruction = useStore(s => s.vibePanelInstruction) + const setVibePanelInstruction = useStore(s => s.setVibePanelInstruction) + + const localModel = localStorage.getItem('auto-gen-model') + ? JSON.parse(localStorage.getItem('auto-gen-model') as string) as Model + : null + const [model, setModel] = useState(localModel || { + name: '', + provider: '', + mode: ModelModeType.chat, + completion_params: {} as CompletionParams, + }) + 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) + } + else { + setModel(prev => ({ + ...prev, + name: defaultModel.model, + provider: defaultModel.provider.provider, + })) + } + } + }, [defaultModel]) + + const handleModelChange = useCallback((newValue: { modelId: string, provider: string, mode?: string, features?: string[] }) => { + const newModel = { + ...model, + provider: newValue.provider, + name: newValue.modelId, + mode: newValue.mode as ModelModeType, + } + setModel(newModel) + localStorage.setItem('auto-gen-model', JSON.stringify(newModel)) + }, [model]) + + const handleCompletionParamsChange = useCallback((newParams: FormValue) => { + const newModel = { + ...model, + completion_params: newParams as CompletionParams, + } + setModel(newModel) + localStorage.setItem('auto-gen-model', JSON.stringify(newModel)) + }, [model]) const handleClose = useCallback(() => { setShowVibePanel(false) @@ -25,6 +86,13 @@ const VibePanel: FC = () => { setIsVibeGenerating(false) }, [setShowVibePanel, setVibePanelMermaidCode, setIsVibeGenerating]) + const handleGenerate = useCallback(() => { + const event = new CustomEvent(VIBE_COMMAND_EVENT, { + detail: { dsl: vibePanelInstruction }, + }) + document.dispatchEvent(event) + }, [vibePanelInstruction]) + const handleAccept = useCallback(() => { if (vibePanelMermaidCode) { const event = new CustomEvent(VIBE_ACCEPT_EVENT, { @@ -44,78 +112,101 @@ const VibePanel: FC = () => { if (!showVibePanel) return null - return ( -
- {/* Header */} -
-
- {t('workflow.vibe.panelTitle')} -
- -
+ const renderLoading = ( +
+ +
{t('workflow.vibe.generatingFlowchart')}
+
+ ) - {/* Content */} -
- {isVibeGenerating && !vibePanelMermaidCode - ? ( -
- -
- {t('workflow.vibe.generatingFlowchart')} + return ( + +
+
+
+
{t('app.gotoAnything.actions.vibeTitle')}
+
{t('app.gotoAnything.actions.vibeDesc')}
+
+
+ +
+
+
{t('appDebug.generate.instruction')}
+