From f0a689d7aa3ae22b4453973b5585566316ae1b0a Mon Sep 17 00:00:00 2001 From: kaochannel154 Date: Fri, 24 Oct 2025 00:41:45 +0900 Subject: [PATCH 01/29] ui: add NodePanelHeader and wire to text/image; fix title padding and icon spacing; tidy EditableText padding control --- .../action-node-properties-panel/index.tsx | 32 ++++---- .../file-node-properties-panel/index.tsx | 17 ++--- .../index.tsx | 37 ++-------- .../query-node-properties-panel/index.tsx | 65 ++++++++--------- .../index.tsx | 58 ++------------- .../text-node-properties-panel/index.tsx | 14 ++-- .../trigger-node-properties-panel/index.tsx | 17 ++--- .../properties-panel/ui/node-panel-header.tsx | 73 +++++++++++++++++++ .../properties-panel/ui/properties-panel.tsx | 4 +- .../properties-panel/vector-store/index.tsx | 17 ++--- .../web-page-node-properties-panel/index.tsx | 18 ++--- .../src/ui/editable-text.tsx | 10 ++- 12 files changed, 177 insertions(+), 185 deletions(-) create mode 100644 internal-packages/workflow-designer-ui/src/editor/properties-panel/ui/node-panel-header.tsx diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/action-node-properties-panel/index.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/action-node-properties-panel/index.tsx index 8da0b24713..0886b1effd 100644 --- a/internal-packages/workflow-designer-ui/src/editor/properties-panel/action-node-properties-panel/index.tsx +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/action-node-properties-panel/index.tsx @@ -5,16 +5,14 @@ import { } from "@giselle-sdk/giselle/react"; import { useCallback } from "react"; import { Button } from "../../../ui/button"; -import { - PropertiesPanelContent, - PropertiesPanelHeader, - PropertiesPanelRoot, -} from "../ui"; +import { PropertiesPanelContent, PropertiesPanelRoot } from "../ui"; +import { NodePanelHeader } from "../ui/node-panel-header"; import { GitHubActionPropertiesPanel } from "./github-action-properties-panel"; import { useConnectedInputs } from "./lib"; export function ActionNodePropertiesPanel({ node }: { node: ActionNode }) { - const { data, updateNodeData, setUiNodeState } = useWorkflowDesigner(); + const { data, updateNodeData, deleteNode, setUiNodeState } = + useWorkflowDesigner(); const { isValid, connectedInputs } = useConnectedInputs(node.id, node.inputs); const { createAndStartGenerationRunner } = useNodeGenerations({ nodeId: node.id, @@ -55,19 +53,19 @@ export function ActionNodePropertiesPanel({ node }: { node: ActionNode }) { ]); return ( - { - updateNodeData(node, { name }); - }} - action={ - node.content.command.state.status === "unconfigured" ? null : ( - - ) - } + onChangeName={(name) => updateNodeData(node, { name })} + docsUrl="https://docs.giselles.ai/en/glossary/action-node" + onDelete={() => deleteNode(node.id)} /> + {node.content.command.state.status !== "unconfigured" && ( +
+ +
+ )} diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/index.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/index.tsx index a8cd8a8a4a..fef46da6f0 100644 --- a/internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/index.tsx +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/index.tsx @@ -1,10 +1,7 @@ import type { FileCategory, FileNode } from "@giselle-sdk/data-type"; import { useWorkflowDesigner } from "@giselle-sdk/giselle/react"; -import { - PropertiesPanelContent, - PropertiesPanelHeader, - PropertiesPanelRoot, -} from "../ui"; +import { PropertiesPanelContent, PropertiesPanelRoot } from "../ui"; +import { NodePanelHeader } from "../ui/node-panel-header"; import { FilePanel } from "./file-panel"; import type { FileTypeConfig } from "./file-panel-type"; @@ -24,15 +21,15 @@ const fileType: Record = { }; export function FileNodePropertiesPanel({ node }: { node: FileNode }) { - const { updateNodeData } = useWorkflowDesigner(); + const { updateNodeData, deleteNode } = useWorkflowDesigner(); return ( - { - updateNodeData(node, { name }); - }} + onChangeName={(name) => updateNodeData(node, { name })} + docsUrl="https://docs.giselles.ai/en/glossary/file-node" + onDelete={() => deleteNode(node.id)} /> diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx index 4cd28077f2..b69e12579e 100644 --- a/internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx @@ -32,6 +32,7 @@ import { PropertiesPanelRoot, ResizeHandle, } from "../ui"; +import { NodePanelHeader } from "../ui/node-panel-header"; import { GenerationPanel } from "./generation-panel"; import { InputPanel } from "./input-panel"; import { createDefaultModelData, updateModelId } from "./model-defaults"; @@ -161,39 +162,11 @@ export function ImageGenerationNodePropertiesPanel({ return ( {usageLimitsReached && } - { - updateNodeData(node, { name }); - }} - action={ - - } + onChangeName={(name) => updateNodeData(node, { name })} + docsUrl="https://docs.giselles.ai/en/glossary/image-node" + onDelete={() => updateNodeData(node, { archived: true })} /> diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/query-node-properties-panel/index.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/query-node-properties-panel/index.tsx index 76f1190376..bf34a1b6de 100644 --- a/internal-packages/workflow-designer-ui/src/editor/properties-panel/query-node-properties-panel/index.tsx +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/query-node-properties-panel/index.tsx @@ -16,17 +16,17 @@ import { Button } from "../../../ui/button"; import { useKeyboardShortcuts } from "../../hooks/use-keyboard-shortcuts"; import { PropertiesPanelContent, - PropertiesPanelHeader, PropertiesPanelRoot, ResizeHandle, } from "../ui"; +import { NodePanelHeader } from "../ui/node-panel-header"; import { GenerationPanel } from "./generation-panel"; import { QueryPanel } from "./query-panel"; import { SettingsPanel } from "./settings-panel"; import { useConnectedSources } from "./sources"; export function QueryNodePropertiesPanel({ node }: { node: QueryNode }) { - const { data, updateNodeData } = useWorkflowDesigner(); + const { data, updateNodeData, deleteNode } = useWorkflowDesigner(); const { createAndStartGenerationRunner, isGenerating, stopGenerationRunner } = useNodeGenerations({ nodeId: node.id, @@ -81,39 +81,38 @@ export function QueryNodePropertiesPanel({ node }: { node: QueryNode }) { return ( - { - updateNodeData(node, { name }); - }} - action={ - - } + onChangeName={(name) => updateNodeData(node, { name })} + docsUrl="https://docs.giselles.ai/en/glossary/query-node" + onDelete={() => deleteNode(node.id)} /> +
+ +
diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/index.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/index.tsx index 477502ed65..c4b21d4a8a 100644 --- a/internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/index.tsx +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/text-generation-node-properties-panel/index.tsx @@ -19,6 +19,7 @@ import { PropertiesPanelHeader, PropertiesPanelRoot, } from "../ui"; +import { NodePanelHeader } from "../ui/node-panel-header"; import { GenerationPanel } from "./generation-panel"; import { useConnectedOutputs } from "./outputs"; import { TextGenerationTabContent } from "./tab-content"; @@ -194,60 +195,11 @@ export function TextGenerationNodePropertiesPanel({ return ( {usageLimitsReached && } - { - updateNodeData(node, { name }); - }} - action={ -
- - window.open( - "https://docs.giselles.ai/en/glossary/text-node", - "_blank", - "noopener,noreferrer", - ) - } - > - - - - - - deleteNode(node.id)} - > - - -
- } + onChangeName={(name) => updateNodeData(node, { name })} + docsUrl="https://docs.giselles.ai/en/glossary/text-node" + onDelete={() => deleteNode(node.id)} /> diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/text-node-properties-panel/index.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/text-node-properties-panel/index.tsx index cf1a1dcd6e..1aafb6fae1 100644 --- a/internal-packages/workflow-designer-ui/src/editor/properties-panel/text-node-properties-panel/index.tsx +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/text-node-properties-panel/index.tsx @@ -3,23 +3,23 @@ import { useWorkflowDesigner } from "@giselle-sdk/giselle/react"; import { TextEditor } from "@giselle-sdk/text-editor/react"; import { PropertiesPanelContent, - PropertiesPanelHeader, PropertiesPanelRoot, ResizableSection, ResizableSectionGroup, } from "../ui"; +import { NodePanelHeader } from "../ui/node-panel-header"; export function TextNodePropertiesPanel({ node }: { node: TextNode }) { - const { updateNodeDataContent, updateNodeData } = useWorkflowDesigner(); + const { updateNodeDataContent, updateNodeData, deleteNode } = + useWorkflowDesigner(); return ( - { - updateNodeData(node, { name }); - }} + onChangeName={(name) => updateNodeData(node, { name })} + docsUrl="https://docs.giselles.ai/en/glossary/text-node" + onDelete={() => deleteNode(node.id)} /> diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/index.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/index.tsx index 5efbbb0a31..a4d513c1e1 100644 --- a/internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/index.tsx +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/index.tsx @@ -1,22 +1,19 @@ import type { TriggerNode } from "@giselle-sdk/data-type"; import { useWorkflowDesigner } from "@giselle-sdk/giselle/react"; -import { - PropertiesPanelContent, - PropertiesPanelHeader, - PropertiesPanelRoot, -} from "../ui"; +import { PropertiesPanelContent, PropertiesPanelRoot } from "../ui"; +import { NodePanelHeader } from "../ui/node-panel-header"; import { GitHubTriggerPropertiesPanel } from "./providers/github-trigger/github-trigger-properties-panel"; import { ManualTriggerPropertiesPanel } from "./providers/manual-trigger/manual-trigger-properties-panel"; export function TriggerNodePropertiesPanel({ node }: { node: TriggerNode }) { - const { updateNodeData } = useWorkflowDesigner(); + const { updateNodeData, deleteNode } = useWorkflowDesigner(); return ( - { - updateNodeData(node, { name }); - }} + onChangeName={(name) => updateNodeData(node, { name })} + docsUrl="https://docs.giselles.ai/en/glossary/trigger-node" + onDelete={() => deleteNode(node.id)} /> diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/ui/node-panel-header.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/ui/node-panel-header.tsx new file mode 100644 index 0000000000..8c3ac63be9 --- /dev/null +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/ui/node-panel-header.tsx @@ -0,0 +1,73 @@ +"use client"; + +import { IconBox } from "@giselle-internal/ui/icon-box"; +import type { NodeLike } from "@giselle-sdk/data-type"; +import { Trash2 as TrashIcon } from "lucide-react"; +import { PropertiesPanelHeader } from "./properties-panel"; + +export function NodePanelHeader({ + node, + docsUrl, + onChangeName, + onDelete, +}: { + node: NodeLike; + docsUrl?: string; + onChangeName?: (name?: string) => void; + onDelete?: () => void; +}) { + return ( + + {docsUrl && ( + + window.open(docsUrl, "_blank", "noopener,noreferrer") + } + > + + + + + + )} + {onDelete && ( + onDelete()} + > + + + )} + + } + /> + ); +} diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/ui/properties-panel.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/ui/properties-panel.tsx index 7f54ab6cca..da6b7cc218 100644 --- a/internal-packages/workflow-designer-ui/src/editor/properties-panel/ui/properties-panel.tsx +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/ui/properties-panel.tsx @@ -125,7 +125,9 @@ export function PropertiesPanelHeader({
{ if (value === defaultName(node)) { return; diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/vector-store/index.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/vector-store/index.tsx index d8652857b0..75bee44e88 100644 --- a/internal-packages/workflow-designer-ui/src/editor/properties-panel/vector-store/index.tsx +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/vector-store/index.tsx @@ -1,10 +1,7 @@ import type { VectorStoreNode } from "@giselle-sdk/data-type"; import { useWorkflowDesigner } from "@giselle-sdk/giselle/react"; -import { - PropertiesPanelContent, - PropertiesPanelHeader, - PropertiesPanelRoot, -} from "../ui"; +import { PropertiesPanelContent, PropertiesPanelRoot } from "../ui"; +import { NodePanelHeader } from "../ui/node-panel-header"; import { DocumentVectorStoreNodePropertiesPanel } from "./document"; import { GitHubVectorStoreNodePropertiesPanel } from "./github"; @@ -13,15 +10,15 @@ export function VectorStoreNodePropertiesPanel({ }: { node: VectorStoreNode; }) { - const { updateNodeData } = useWorkflowDesigner(); + const { updateNodeData, deleteNode } = useWorkflowDesigner(); return ( - { - updateNodeData(node, { name }); - }} + onChangeName={(name) => updateNodeData(node, { name })} + docsUrl="https://docs.giselles.ai/en/glossary/vector-store-node" + onDelete={() => deleteNode(node.id)} /> diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/web-page-node-properties-panel/index.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/web-page-node-properties-panel/index.tsx index 075ac2f37c..19555e9504 100644 --- a/internal-packages/workflow-designer-ui/src/editor/properties-panel/web-page-node-properties-panel/index.tsx +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/web-page-node-properties-panel/index.tsx @@ -16,11 +16,8 @@ import { Dialog } from "radix-ui"; import { type FormEventHandler, useCallback, useState } from "react"; import useSWR from "swr"; import { validateUrl } from "../../lib/validate-url"; -import { - PropertiesPanelContent, - PropertiesPanelHeader, - PropertiesPanelRoot, -} from "../ui"; +import { PropertiesPanelContent, PropertiesPanelRoot } from "../ui"; +import { NodePanelHeader } from "../ui/node-panel-header"; function WebPageListItem({ webpage, @@ -151,7 +148,8 @@ function WebPageListItem({ export function WebPageNodePropertiesPanel({ node }: { node: WebPageNode }) { const client = useGiselleEngine(); const { experimental_storage } = useFeatureFlag(); - const { data, updateNodeData, updateNodeDataContent } = useWorkflowDesigner(); + const { data, updateNodeData, deleteNode, updateNodeDataContent } = + useWorkflowDesigner(); const { error } = useToasts(); const handleSubmit = useCallback>( async (e) => { @@ -252,11 +250,11 @@ export function WebPageNodePropertiesPanel({ node }: { node: WebPageNode }) { return ( - { - updateNodeData(node, { name }); - }} + onChangeName={(name) => updateNodeData(node, { name })} + docsUrl="https://docs.giselles.ai/en/glossary/web-page-node" + onDelete={() => deleteNode(node.id)} />
diff --git a/internal-packages/workflow-designer-ui/src/ui/editable-text.tsx b/internal-packages/workflow-designer-ui/src/ui/editable-text.tsx index 9252dfbfb1..c51b3cf606 100644 --- a/internal-packages/workflow-designer-ui/src/ui/editable-text.tsx +++ b/internal-packages/workflow-designer-ui/src/ui/editable-text.tsx @@ -14,11 +14,15 @@ export function EditableText({ text, onValueChange, onClickToEditMode, + inputClassName, + buttonClassName, ...props }: HTMLAttributes & { text?: string; onValueChange?: (value: string) => void; onClickToEditMode?: (e: React.MouseEvent) => void; + inputClassName?: string; + buttonClassName?: string; }) { const [edit, setEdit] = useState(false); const inputRef = useRef(null); @@ -47,9 +51,10 @@ export function EditableText({ Date: Fri, 24 Oct 2025 10:27:21 +0900 Subject: [PATCH 02/29] image-gen: align layout with text-gen; move ModelPicker into PromptPanel; unify model parameter UI using SettingRow; remove duplicate provider/model selects --- .../index.tsx | 335 ++++++++++-------- .../models/fal.tsx | 16 +- .../models/openai.tsx | 61 ++-- .../prompt-panel.tsx | 181 +++++++--- 4 files changed, 370 insertions(+), 223 deletions(-) diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx index b69e12579e..9528ad4201 100644 --- a/internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/index.tsx @@ -9,6 +9,7 @@ import { isSupportedConnection, useNodeGenerations, useWorkflowDesigner, + useWorkflowDesignerStore, } from "@giselle-sdk/giselle/react"; import { falLanguageModels, @@ -16,25 +17,16 @@ import { openaiImageModels, } from "@giselle-sdk/language-model"; import clsx from "clsx/lite"; -import { CommandIcon, CornerDownLeft } from "lucide-react"; -import { Tabs } from "radix-ui"; -import { useCallback, useMemo } from "react"; -import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useUsageLimitsReached } from "../../../hooks/usage-limits"; import { Button } from "../../../ui/button"; import { UsageLimitWarning } from "../../../ui/usage-limit-warning"; import { useKeyboardShortcuts } from "../../hooks/use-keyboard-shortcuts"; import { useModelEligibility } from "../../lib/use-model-eligibility"; import { isPromptEmpty } from "../../lib/validate-prompt"; -import { - PropertiesPanelContent, - PropertiesPanelHeader, - PropertiesPanelRoot, - ResizeHandle, -} from "../ui"; +import { PropertiesPanelContent, PropertiesPanelRoot } from "../ui"; import { NodePanelHeader } from "../ui/node-panel-header"; import { GenerationPanel } from "./generation-panel"; -import { InputPanel } from "./input-panel"; import { createDefaultModelData, updateModelId } from "./model-defaults"; import { FalModelPanel, OpenAIImageModelPanel } from "./models"; import { PromptPanel } from "./prompt-panel"; @@ -52,19 +44,34 @@ export function ImageGenerationNodePropertiesPanel({ setUiNodeState, deleteConnection, } = useWorkflowDesigner(); - const { createAndStartGenerationRunner, isGenerating, stopGenerationRunner } = - useNodeGenerations({ - nodeId: node.id, - origin: { type: "studio", workspaceId: data.id }, - }); + const { createAndStartGenerationRunner, isGenerating } = useNodeGenerations({ + nodeId: node.id, + origin: { type: "studio", workspaceId: data.id }, + }); const { all: connectedSources } = useConnectedSources(node); const usageLimitsReached = useUsageLimitsReached(); const { error } = useToasts(); const checkEligibility = useModelEligibility(); + const [isPromptExpanded, setIsPromptExpanded] = useState(false); + const [isGenerationExpanded, setIsGenerationExpanded] = useState(false); + const [editorVersion, setEditorVersion] = useState(0); + const generateCtaRef = useRef(null); + const [_overlayBottomPx, setOverlayBottomPx] = useState(0); + const promptEditorRef = useRef(null); + const generationPanelRef = useRef(null); + const [promptTopPx, setPromptTopPx] = useState(0); + const [generationTopPx, setGenerationTopPx] = useState(0); + const uiState = useMemo(() => data.ui.nodeState[node.id], [data, node.id]); + // Subscribe live to the latest prompt (for expanded editor sync) + const livePrompt = useWorkflowDesignerStore((s) => { + const n = s.workspace.nodes.find((x) => x.id === node.id); + return (n?.content as { prompt?: string } | undefined)?.prompt; + }); + // Get available models for current provider const models = useMemo(() => { switch (node.content.llm.provider) { @@ -159,6 +166,71 @@ export function ImageGenerationNodePropertiesPanel({ error, ]); + useEffect(() => { + const el = generateCtaRef.current; + if (!el) { + setOverlayBottomPx(0); + return; + } + const update = () => setOverlayBottomPx(el.offsetHeight || 0); + update(); + const ro = new ResizeObserver(update); + ro.observe(el); + window.addEventListener("resize", update); + return () => { + ro.disconnect(); + window.removeEventListener("resize", update); + }; + }, []); + + useEffect(() => { + const el = promptEditorRef.current; + if (!el) { + setPromptTopPx(0); + return; + } + const update = () => { + const rect = el.getBoundingClientRect(); + const container = el.closest(".relative"); + const containerRect = container?.getBoundingClientRect(); + setPromptTopPx(containerRect ? rect.top - containerRect.top : 0); + }; + update(); + const ro = new ResizeObserver(update); + ro.observe(el); + window.addEventListener("resize", update); + window.addEventListener("scroll", update, true); + return () => { + ro.disconnect(); + window.removeEventListener("resize", update); + window.removeEventListener("scroll", update, true); + }; + }, []); + + useEffect(() => { + const el = generationPanelRef.current; + if (!el) { + setGenerationTopPx(0); + return; + } + const update = () => { + const rect = el.getBoundingClientRect(); + const container = el.closest(".relative"); + const containerRect = container?.getBoundingClientRect(); + setGenerationTopPx(containerRect ? rect.top - containerRect.top : 0); + }; + update(); + const ro = new ResizeObserver(update); + ro.observe(el); + window.addEventListener("resize", update); + window.addEventListener("scroll", update, true); + return () => { + ro.disconnect(); + window.removeEventListener("resize", update); + window.removeEventListener("scroll", update, true); + }; + }, []); + return ( {usageLimitsReached && } @@ -169,145 +241,112 @@ export function ImageGenerationNodePropertiesPanel({ onDelete={() => updateNodeData(node, { archived: true })} /> - - - - { - setUiNodeState(node.id, { tab }, { save: true }); - }} - > - - Prompt - Model - - - - - -
-
- - { - const updatedModel = updateModelId( - node.content.llm, - modelId, - ); +
+ +
- disconnectInvalidConnections(updatedModel); - updateNodeDataContent(node, { - ...node.content, - llm: updatedModel, - }); - }} - options={models} - /> -
-
- {node.content.llm.provider === "fal" && ( - - updateNodeDataContent(node, { - ...node.content, - llm: value, - }) - } - /> - )} - {node.content.llm.provider === "openai" && ( - - updateNodeDataContent(node, { - ...node.content, - llm: value, - }) - } - /> - )} - - - - - - - - - - - - + {/* Expanded prompt overlay */} +
+
+ {}} + editorVersion={editorVersion} + /> +
+
+ + {/* Expanded generation overlay */} +
+
+
+ ); } diff --git a/internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/models/fal.tsx b/internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/models/fal.tsx index 26f5cf1ee4..68297f1b72 100644 --- a/internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/models/fal.tsx +++ b/internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/models/fal.tsx @@ -1,4 +1,5 @@ import { Select } from "@giselle-internal/ui/select"; +import { SettingRow } from "@giselle-internal/ui/setting-row"; import { FalLanguageModelData } from "@giselle-sdk/data-type"; import { imageGenerationSizes } from "@giselle-sdk/language-model"; @@ -26,11 +27,14 @@ export function FalModelPanel({ }; return ( -
-
- +
+ + Size + + } + > -
+ -
- + + Quality + + } + > -
+ -
- + + Moderation + + } + >