fix(flow-builder): mover componentes para _components para evitar prerender do Next.js

2026-05-11 07:39:23 +02:00
parent 97bbd79ef3
commit 8015ee5233
3 changed files with 107 additions and 2 deletions
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { MessageSquare, Settings2, Image as ImageIcon } from 'lucide-react';
+
+interface MessageNodeProps {
+    data: {
+        label: string;
+        text?: string;
+        image?: string;
+    };
+    isConnectable: boolean;
+}
+
+export default function MessageNode({ data, isConnectable }: MessageNodeProps) {
+    return (
+        <div className="bg-[#121622] border border-blue-500/30 hover:border-blue-500 transition-colors rounded-2xl shadow-xl shadow-blue-500/5 min-w-[260px] max-w-[300px] overflow-hidden group">
+            
+            <Handle
+                type="target"
+                position={Position.Left}
+                isConnectable={isConnectable}
+                className="!w-4 !h-4 !bg-[#121622] !border-2 !border-slate-500"
+            />
+
+            {/* Header */}
+            <div className="px-4 py-3 border-b border-blue-500/20 bg-blue-500/5 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                    <div className="bg-blue-500/20 w-7 h-7 rounded-md flex items-center justify-center">
+                        <MessageSquare size={14} className="text-blue-400" />
+                    </div>
+                    <span className="text-sm font-bold text-slate-200">Envia Mensagem</span>
+                </div>
+                <button className="text-slate-400 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Settings2 size={16} />
+                </button>
+            </div>
+
+            {/* Body */}
+            <div className="p-4 bg-white/[0.01]">
+                {data.image && (
+                    <div className="w-full h-24 mb-3 rounded-lg border border-white/5 bg-black/40 flex items-center justify-center overflow-hidden relative">
+                         <ImageIcon size={20} className="text-slate-500 absolute z-0" />
+                         <img src={data.image} className="w-full h-full object-cover relative z-10" alt="Midia" />
+                    </div>
+                )}
+                <div className="text-xs text-slate-300 bg-white/5 p-3 rounded-lg border border-white/5 line-clamp-3 leading-relaxed">
+                    {data.text || "Olá, como posso ajudar? Isso é um nó de mensagem."}
+                </div>
+            </div>
+
+            <Handle
+                type="source"
+                position={Position.Right}
+                isConnectable={isConnectable}
+                className="!w-4 !h-4 !bg-[#121622] !border-2 !border-blue-500"
+            />
+        </div>
+    );
+}
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { Zap, Settings2 } from 'lucide-react';
+
+interface TriggerNodeProps {
+    data: {
+        label: string;
+        keyword?: string;
+    };
+    isConnectable: boolean;
+}
+
+export default function TriggerNode({ data, isConnectable }: TriggerNodeProps) {
+    return (
+        <div className="bg-[#121622] border-[1.5px] border-brand-500/50 rounded-2xl shadow-xl shadow-brand-500/10 min-w-[240px] overflow-hidden group hover:border-brand-500 transition-colors">
+            {/* Header */}
+            <div className="px-4 py-3 border-b border-brand-500/20 bg-brand-500/5 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                    <div className="bg-brand-500/20 w-7 h-7 rounded-md flex items-center justify-center">
+                        <Zap size={14} className="text-brand-400" />
+                    </div>
+                    <span className="text-sm font-bold text-slate-200">Trigger</span>
+                </div>
+                <button className="text-slate-400 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Settings2 size={16} />
+                </button>
+            </div>
+
+            {/* Body */}
+            <div className="p-4 bg-white/[0.01]">
+                <p className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-2">On exact match</p>
+                <div className="bg-black/40 border border-white/5 rounded-lg px-3 py-2 flex items-center text-brand-400 font-mono text-sm max-w-full overflow-hidden text-ellipsis">
+                    {data.keyword || '#welcome'}
+                </div>
+            </div>
+
+            {/* Source Handle (Bottom or Right) */}
+            <Handle
+                type="source"
+                position={Position.Right}
+                isConnectable={isConnectable}
+                className="!w-4 !h-4 !bg-[#121622] !border-2 !border-brand-500"
+            />
+        </div>
+    );
+}
@@ -18,8 +18,8 @@ import { ArrowLeft, Save, Play, MessageSquare, Zap, Clock, Image as ImageIcon }
 import Link from 'next/link';

 // --- Custom Nodes Types Implementation ---
-import MessageNode from './components/MessageNode';
-import TriggerNode from './components/TriggerNode';
+import MessageNode from './_components/MessageNode';
+import TriggerNode from './_components/TriggerNode';

 const nodeTypes = {
    messageNode: MessageNode,