Message text

onChange('text', event.target.value)} placeholder="Write a helpful message…" /></label>
        <details className="variable-picker"><summary><Plus size={14} /> Insert variable</summary><div>{CONTACT_FIELDS.slice(0, 4).map((field) => <button key={field.value} onClick={() => onChange('text', `${String(config.text ?? '')}{{${field.value}}}`)}>{field.label}<code>{`{{${field.value}}}`}</code></button>)}{fields.map((field) => <button key={field.key} onClick={() => onChange('text', `${String(config.text ?? '')}{{custom.${field.key}}}`)}>{field.name}<code>{`{{custom.${field.key}}}`}</code></button>)}</div></details>
        <div className="preview-card"><span className="eyebrow">MESSAGE PREVIEW</span><p>{String(config.text || 'Your message will appear here…').replace(/\{\{contact.first_name\}\}/g, 'Alex').replace(/\{\{contact.last_name\}\}/g, 'Morgan').replace(/\{\{custom\.[\w-]+\}\}/g, 'Example')}</p></div>
    </div>;
    if (node.data.type === 'condition') {
        const rules = Array.isArray(config.rules) ? config.rules as Array<Record<string, unknown>> : [];
        const updateRule = (index: number, key: string, value: unknown) => onChange('rules', rules.map((rule, ruleIndex) => ruleIndex === index ? { ...rule, [key]: value } : rule));
        return <div className="settings-form"><label>Match rules<select value={String(config.logic ?? 'and')} onChange={(event) => onChange('logic', event.target.value)}><option value="and">All rules (AND)</option><option value="or">Any rule (OR)</option></select></label>
            {rules.map((rule, index) => <div className="rule-editor" key={index}><div className="rule-head"><b>Rule {index + 1}</b>{rules.length > 1 && <button className="text-button danger-text" onClick={() => onChange('rules', rules.filter((_, ruleIndex) => ruleIndex !== index))}>Remove</button>}</div>
                <select value={String(rule.field ?? '')} onChange={(event) => updateRule(index, 'field', event.target.value)}>{allFields.map((field) => <option key={field.value} value={field.value}>{field.label}</option>)}</select>
                <select value={String(rule.operator ?? 'equals')} onChange={(event) => updateRule(index, 'operator', event.target.value)}>{OPERATORS.map((operator) => <option key={operator} value={operator}>{operator.replaceAll('_', ' ')}</option>)}</select>
                {!['is_empty', 'is_not_empty'].includes(String(rule.operator)) && (['in', 'not_in'].includes(String(rule.operator))
                    ? <input value={Array.isArray(rule.value) ? rule.value.join(', ') : ''} onChange={(event) => updateRule(index, 'value', event.target.value.split(',').map((value) => value.trim()).filter(Boolean))} placeholder="Comma-separated values" />
                    : <input value={String(rule.value ?? '')} onChange={(event) => updateRule(index, 'value', event.target.value)} placeholder="Value" />)}
            </div>)}
            <button className="button button-outline full-button" onClick={() => onChange('rules', [...rules, { field: allFields[0].value, operator: 'equals', value: '' }])}><Plus size={15} /> Add rule</button>
            <div className="condition-output"><span className="yes-output">YES</span><span className="no-output">NO</span></div>
        </div>;
    }
    if (node.data.type === 'delay') return <div className="settings-form"><div className="section-hint">Pause this flow for a period of time.</div><label>Wait<div className="inline-fields"><input type="number" min="1" value={Number(config.amount ?? 1)} onChange={(event) => onChange('amount', Number(event.target.value))} /><select value={String(config.unit ?? 'minutes')} onChange={(event) => onChange('unit', event.target.value)}>{['seconds', 'minutes', 'hours', 'days'].map((unit) => <option key={unit}>{unit}</option>)}</select></div></label><div className="field-note"><Clock3 size={14} /> This step resumes automatically after the delay.</div></div>;
    if (node.data.type === 'add_tag' || node.data.type === 'remove_tag') return <div className="settings-form"><div className="section-hint">{node.data.type === 'add_tag' ? 'Attach a tag to this contact.' : 'Remove a tag from this contact.'}</div><label>Select tag<select value={String(config.tag_id ?? '')} onChange={(event) => onChange('tag_id', Number(event.target.value) || null)}><option value="">Choose a tag…</option>{tags.map((tag) => <option value={tag.id} key={tag.id}>{tag.name}</option>)}</select></label>{tags.length === 0 && <div className="field-note">No tags in this workspace yet. Create one from Contacts.</div>}</div>;
    if (node.data.type === 'set_field' || node.data.type === 'clear_field') {
        const fieldValue = String(config.field ?? 'custom.');
        const field = allFields.find((option) => option.value === fieldValue);
        return <div className="settings-form"><div className="section-hint">{node.data.type === 'set_field' ? 'Update a contact or custom field.' : 'Clear a contact or custom field value.'}</div><label>Field<select value={fieldValue} onChange={(event) => onChange('field', event.target.value)}>{allFields.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}</select></label>
            {node.data.type === 'set_field' && field && <label>Value{field.type === 'boolean' ? <select value={String(config.value ?? 'true')} onChange={(event) => onChange('value', event.target.value === 'true')}><option value="true">True</option><option value="false">False</option></select>
                : field.type === 'multi_select' ? <select multiple value={Array.isArray(config.value) ? config.value.map(String) : []} onChange={(event) => onChange('value', Array.from(event.target.selectedOptions, (option) => option.value))}>{(fields.find((item) => `custom.${item.key}` === field.value)?.options ?? []).map((option) => <option key={option}>{option}</option>)}</select>
                : field.type === 'select' ? <select value={String(config.value ?? '')} onChange={(event) => onChange('value', event.target.value)}><option value="">Choose…</option>{(fields.find((item) => `custom.${item.key}` === field.value)?.options ?? []).map((option) => <option key={option}>{option}</option>)}</select>
                : <input type={field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : field.type === 'email' ? 'email' : 'text'} value={String(config.value ?? '')} onChange={(event) => onChange('value', field.type === 'number' ? Number(event.target.value) : event.target.value)} />}</label>}
        </div>;
    }
    if (node.data.type === 'http_request') return <div className="settings-form"><div className="section-hint">Send a secure request to an allowlisted endpoint.</div><label>Method<select value={String(config.method ?? 'GET')} onChange={(event) => onChange('method', event.target.value)}>{['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].map((method) => <option key={method}>{method}</option>)}</select></label><label>URL<input value={String(config.url ?? '')} onChange={(event) => onChange('url', event.target.value)} placeholder="https://api.example.com/endpoint" /></label><KeyValueEditor label="Headers" value={config.headers} onChange={(value) => onChange('headers', value)} /><KeyValueEditor label="Query parameters" value={config.query} onChange={(value) => onChange('query', value)} /><label>JSON body<textarea className="code-input" rows={6} value={rawBody} onChange={(event) => { setRawBody(event.target.value); try { onChange('body', JSON.parse(event.target.value)); setBodyError(''); } catch { setBodyError('Enter valid JSON before saving or publishing this node.'); } }} spellCheck={false} /></label>{bodyError && <div role="alert" className="alert-error">{bodyError}</div>}<label>Timeout (seconds)<input type="number" min="1" max="30" value={Number(config.timeout ?? 10)} onChange={(event) => onChange('timeout', Number(event.target.value))} /></label><div className="field-note"><AlertTriangle size={14} /> The server blocks private networks and non-allowlisted hosts.</div></div>;
    if (node.data.type === 'start_flow') return <div className="settings-form"><div className="section-hint">Start another published flow for this contact.</div><label>Published flow<select value={String(config.flow_id ?? '')} onChange={(event) => onChange('flow_id', Number(event.target.value) || null)}><option value="">Choose a flow…</option>{flows.map((item) => <option value={item.id} key={item.id}>{item.name}{item.id === currentFlow.id ? ' (current)' : ''}</option>)}</select></label>{flows.length === 0 && <div className="field-note">Publish another flow first. Recursive calls are blocked by the runtime.</div>}</div>;
    if (node.data.type === 'ai_agent') return <div className="settings-form">
        <div className="section-hint">Run an active workspace AI agent using its attached knowledge and registered tools.</div>
        <label>AI Agent *<select value={String(config.agent_id ?? '')} onChange={(event) => {
            const selected = agents.find((agent) => agent.id === Number(event.target.value));
            onChange('agent_id', selected?.id ?? null);
            onChange('agent_name', selected?.name ?? '');
        }}><option value="">Choose an agent…</option>{agents.map((agent) => <option value={agent.id} key={agent.id}>{agent.name}</option>)}</select></label>
        {agents.length === 0 && <div className="field-note"><AlertTriangle size={14} /> No active AI agents in this workspace.</div>}
        <label className="ai-node-toggle"><input type="checkbox" checked={config.send_response !== false} onChange={(event) => onChange('send_response', event.target.checked)} /> Send response to customer</label>
        <label>Save response as<input value={String(config.save_response_as ?? '')} onChange={(event) => onChange('save_response_as', event.target.value)} placeholder="ai_response" /></label>
        {!/^[A-Za-z][A-Za-z0-9_]{0,63}$/.test(String(config.save_response_as ?? '')) && <div role="alert" className="field-note"><AlertTriangle size={14} /> Use a simple variable name, such as ai_response.</div>}
        <div className="field-note">Later flow nodes can read this with <code>{`{{var.${String(config.save_response_as || 'ai_response')}}}`}</code>.</div>
    </div>;
    return <div className="settings-form"><div className="section-hint">This step has no additional settings.</div></div>;
}

export function FlowBuilderPage() {
    const { id } = useParams();
    const { current } = useApp();
    const [flow, setFlow] = useState<Flow | null>(null);
    const [initialGraph, setInitialGraph] = useState<FlowGraph | null>(null);
    const [error, setError] = useState('');
    useEffect(() => {
        if (!current || !id) return;
        let active = true;
        void Promise.all([flowsApi.get(current.workspace.id, Number(id)), flowsApi.graph(current.workspace.id, Number(id))])
            .then(([loadedFlow, graph]) => { if (active) { setFlow(loadedFlow); setInitialGraph(graph); } })
            .catch((cause: Error) => { if (active) setError(cause.message); });
        return () => { active = false; };
    }, [current?.workspace.id, id]);
    if (error) return <div className="builder-loading"><div role="alert" className="alert-error">{error}</div><Link className="button button-outline" to="/app/automation/flows">Back to flows</Link></div>;
    if (!flow || !initialGraph) return <div className="builder-loading"><LoaderCircle className="spin" size={24} /><span>Opening flow builder…</span></div>;
    return <ReactFlowProvider><FlowBuilderCanvas key={`${flow.id}-${current?.workspace.id}`} flow={flow} initialGraph={initialGraph} onFlowChange={setFlow} /></ReactFlowProvider>;
}

Test this automation