fix: UX improvements for inline template mode switching
All checks were successful
Deploy Development / deploy (push) Successful in 46s
Build Test / pytest-backend (push) Successful in 8s
Build Test / lint-backend (push) Successful in 0s
Build Test / build-frontend (push) Successful in 15s

**Issue 1: Prompt selector loses value**
- When switching Reference→Inline→Reference, the dropdown was empty
- Root cause: Switching to Inline deleted prompt_slug
- Fix: Keep prompt_slug when activating inline_template
- Now: Both modes preserve their values independently

**Issue 2: Workflow overview shows 'kein Prompt'**
- Nodes with inline templates showed misleading 'kein Prompt' text
- Root cause: AnalysisNode only checked prompt_name/prompt_slug
- Fix: Check inline_template and display '✏️ Inline-Template'
- Now: Clear visual distinction between modes

Files:
- WorkflowEditorPage.jsx: Preserve prompt_slug on mode switch
- AnalysisNode.jsx: Add isInlineMode detection and display

Part 3: Inline Prompts - UX polish
This commit is contained in:
Lars 2026-04-11 10:31:05 +02:00
parent c0525cf2d2
commit 8d89b23db1
2 changed files with 11 additions and 5 deletions

View File

@ -5,16 +5,22 @@ import { Handle, Position } from 'reactflow'
*
* Properties:
* - data.label: Node-Label
* - data.prompt_slug: Slug des referenzierten Basis-Prompts
* - data.prompt_slug: Slug des referenzierten Basis-Prompts (Reference Mode)
* - data.inline_template: Inline Prompt-Template (Inline Mode)
* - data.prompt_name: Name des Prompts (optional, für Display)
* - data.questions: Array von Question Augmentations
* - selected: Boolean
*/
export function AnalysisNode({ data, selected }) {
const hasQuestions = data.questions?.length > 0
const promptName = data.prompt_name || (data.prompt_slug ? `Prompt: ${data.prompt_slug}` : 'Kein Prompt')
const questionCount = data.questions?.length || 0
// Part 3: Inline Prompts - Zeige "Inline-Template" oder Prompt-Namen
const isInlineMode = data.inline_template !== null && data.inline_template !== undefined
const promptName = isInlineMode
? '✏️ Inline-Template'
: (data.prompt_name || (data.prompt_slug ? `Prompt: ${data.prompt_slug}` : 'Kein Prompt'))
return (
<div className={`workflow-node analysis-node ${selected ? 'selected' : ''}`}>
<div className="node-header">

View File

@ -520,9 +520,9 @@ export default function WorkflowEditorPage() {
checked={isInlineMode}
onChange={() => {
// Wechsel zu Inline Mode
// WICHTIG: prompt_slug NICHT löschen, damit er beim Zurückwechseln noch da ist
handleNodeUpdate(selectedNode.id, {
prompt_slug: null, // Reference löschen
inline_template: selectedNode.data.inline_template || '' // Behalte existierendes template
inline_template: selectedNode.data.inline_template || '' // Aktiviere Inline Mode
})
}}
style={{ marginRight: '8px' }}
@ -542,7 +542,7 @@ export default function WorkflowEditorPage() {
const promptSlug = e.target.value
const selectedPrompt = availablePrompts.find(p => p.slug === promptSlug)
handleNodeUpdate(selectedNode.id, {
prompt_slug: promptSlug || '',
prompt_slug: promptSlug,
prompt_name: selectedPrompt?.name || null,
inline_template: null
})