[ISSUE-1] Add src/components/nodes/InteractionNode.tsx - Modular NPC system

src/components/nodes/InteractionNode.tsx

@@ -0,0 +1,120 @@
+import { memo, useState } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import { MessageSquare, ChevronDown, ChevronUp } from 'lucide-react';
+import type { InteractionNodeData } from '../../types/nodes';
+
+export const InteractionNode = memo(({ data }: NodeProps) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const nodeData = data as InteractionNodeData;
+
+  const handleChange = (field: keyof InteractionNodeData, value: string | undefined) => {
+    Object.assign(nodeData, { [field]: value });
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-xl border-2 border-purple-500 min-w-[350px]">
+      {/* Node Header */}
+      <div className="bg-purple-500 text-white px-4 py-2 rounded-t-lg flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <MessageSquare className="h-4 w-4" />
+          <span className="font-semibold text-sm">Interaction</span>
+        </div>
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="text-white hover:bg-purple-600 rounded p-1 transition-colors"
+        >
+          {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+        </button>
+      </div>
+
+      {/* Input Handle */}
+      <Handle
+        type="target"
+        position={Position.Left}
+        className="w-3 h-3 bg-purple-500 border-2 border-white"
+      />
+
+      {/* Node Content */}
+      {isExpanded && (
+        <div className="p-4 space-y-3">
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-2">
+              Interaction Type
+            </label>
+            <select
+              value={nodeData.interactionType}
+              onChange={(e) => handleChange('interactionType', e.target.value)}
+              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+            >
+              <option value="none">None</option>
+              <option value="dialogue">Dialogue</option>
+              <option value="script">Script</option>
+              <option value="shop">Shop</option>
+              <option value="heal">Heal</option>
+            </select>
+          </div>
+
+          {nodeData.interactionType === 'dialogue' && (
+            <div>
+              <label className="block text-xs font-medium text-gray-700 mb-1">
+                Dialogue Reference
+              </label>
+              <input
+                type="text"
+                value={nodeData.dialogueReference || ''}
+                onChange={(e) => handleChange('dialogueReference', e.target.value)}
+                className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                placeholder="cobblemon:my_dialogue"
+              />
+              <p className="mt-1 text-xs text-gray-500">
+                Reference to a dialogue configuration
+              </p>
+            </div>
+          )}
+
+          {nodeData.interactionType === 'script' && (
+            <div>
+              <label className="block text-xs font-medium text-gray-700 mb-1">
+                Script Reference
+              </label>
+              <input
+                type="text"
+                value={nodeData.scriptReference || ''}
+                onChange={(e) => handleChange('scriptReference', e.target.value)}
+                className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                placeholder="cobblemon:interaction_script"
+              />
+              <p className="mt-1 text-xs text-gray-500">
+                MoLang script for custom interactions
+              </p>
+            </div>
+          )}
+
+          {nodeData.interactionType === 'none' && (
+            <div className="text-xs text-gray-500 italic py-4 text-center">
+              No interaction configured
+            </div>
+          )}
+
+          {(nodeData.interactionType === 'shop' || nodeData.interactionType === 'heal') && (
+            <div className="text-xs text-gray-500 italic py-2">
+              {nodeData.interactionType === 'shop'
+                ? 'Shop interaction - configure items in data'
+                : 'Heal interaction - heals player Pokemon'}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Output Handle */}
+      <Handle
+        type="source"
+        position={Position.Right}
+        className="w-3 h-3 bg-purple-500 border-2 border-white"
+      />
+    </div>
+  );
+});
+
+InteractionNode.displayName = 'InteractionNode';