nodes-ui-flow / src /nodes /DialogFlowNode.jsx
markitzeroo's picture
Initial deploy: Dockerized FastAPI + React frontend
cfaaa6c verified
import { memo } from 'react';
import NodeShell from '../components/NodeShell.jsx';
import { useWorkflow } from '../context/WorkflowContext.jsx';
import { getNodeAccent } from '../lib/nodeRegistry.js';
function DialogFlowNode({ id, data, selected, type }) {
const { getNodeHandles } = useWorkflow();
const handles = getNodeHandles(type, data);
const runtime = data.runtime || {};
const messages = runtime.messages || [];
const minHeight = Math.max((data.height || 280) - 110, 160);
return (
<NodeShell
nodeId={id}
title={data.title}
accent={getNodeAccent(type)}
selected={selected}
status={runtime.status}
inputs={handles.inputs}
outputs={handles.outputs}
>
<div className="dialog-list nodrag" style={{ minHeight: `${minHeight}px` }}>
{runtime.cleared && messages.length === 0 ? (
<div className="dialog-empty">Ожидает выполнения...</div>
) : null}
{!runtime.cleared && messages.length === 0 ? (
<div className="dialog-empty">Подключите Script-ноду, чтобы увидеть диалог.</div>
) : null}
{messages.map((message, index) => (
<div key={`${message.type}-${index}`} className={`dialog-message dialog-message--${message.type}`}>
<span className="dialog-message__author">{message.type === 'user' ? 'Пользователь' : 'Персонаж'}</span>
<p>{message.text}</p>
</div>
))}
</div>
{runtime.error ? <div className="node-error">{runtime.error}</div> : null}
</NodeShell>
);
}
export default memo(DialogFlowNode);