@runtypelabs/react-flow 0.1.0

package/src/components/nodes/PromptNode.tsx

@@ -0,0 +1,270 @@
+import React, { memo, useCallback, useState } from 'react'
+import type { NodeProps } from '@xyflow/react'
+import { BaseNode, BrainIcon, NODE_HEADER_COLORS } from './BaseNode'
+import type { RuntypeNodeData, PromptStepConfig, FlowStep } from '../../types'
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = {
+  field: {
+    marginBottom: '12px',
+  },
+  label: {
+    display: 'block',
+    fontSize: '11px',
+    fontWeight: 600,
+    color: '#6b7280',
+    marginBottom: '4px',
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.03em',
+  },
+  input: {
+    width: '100%',
+    padding: '8px 10px',
+    fontSize: '12px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    backgroundColor: '#f9fafb',
+    color: '#1f2937',
+    outline: 'none',
+    transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
+  },
+  textarea: {
+    width: '100%',
+    padding: '8px 10px',
+    fontSize: '12px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    backgroundColor: '#f9fafb',
+    color: '#1f2937',
+    outline: 'none',
+    resize: 'vertical' as const,
+    minHeight: '60px',
+    fontFamily: 'inherit',
+    transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
+  },
+  select: {
+    width: '100%',
+    padding: '8px 10px',
+    fontSize: '12px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    backgroundColor: '#f9fafb',
+    color: '#1f2937',
+    outline: 'none',
+    cursor: 'pointer',
+  },
+  row: {
+    display: 'flex',
+    gap: '8px',
+  },
+  modeBadge: (isAgent: boolean) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '2px 8px',
+    borderRadius: '12px',
+    fontSize: '10px',
+    fontWeight: 600,
+    backgroundColor: isAgent ? '#dbeafe' : '#f3e8ff',
+    color: isAgent ? '#1d4ed8' : '#7c3aed',
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.05em',
+  }),
+  preview: {
+    fontSize: '11px',
+    color: '#6b7280',
+    backgroundColor: '#f3f4f6',
+    padding: '8px',
+    borderRadius: '6px',
+    fontFamily: 'monospace',
+    whiteSpace: 'pre-wrap' as const,
+    wordBreak: 'break-word' as const,
+    maxHeight: '80px',
+    overflow: 'auto',
+  },
+}
+
+// ============================================================================
+// Prompt Node Component
+// ============================================================================
+
+export const PromptNode = memo(function PromptNode(props: NodeProps) {
+  const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
+  const { step, onChange } = data
+  const config = step.config as PromptStepConfig
+  
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const handleChange = useCallback(
+    (field: keyof PromptStepConfig, value: unknown) => {
+      onChange?.(id, {
+        config: {
+          ...config,
+          [field]: value,
+        },
+      } as Partial<FlowStep>)
+    },
+    [id, config, onChange]
+  )
+
+  const handleNameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(id, { name: e.target.value })
+    },
+    [id, onChange]
+  )
+
+  const isAgentMode = config.mode === 'agent'
+
+  return (
+    <BaseNode
+      data={data}
+      selected={selected}
+      id={id}
+      typeLabel="AI Prompt"
+      icon={<BrainIcon />}
+      headerColor={NODE_HEADER_COLORS.prompt}
+    >
+      <div style={styles.field}>
+        <label style={styles.label}>Step Name</label>
+        <input
+          style={styles.input}
+          value={step.name}
+          onChange={handleNameChange}
+          placeholder="Enter step name"
+          onKeyDown={(e) => e.stopPropagation()}
+          onFocus={(e) => {
+            e.target.style.borderColor = '#6366f1'
+            e.target.style.boxShadow = '0 0 0 2px rgba(99, 102, 241, 0.1)'
+          }}
+          onBlur={(e) => {
+            e.target.style.borderColor = '#e5e7eb'
+            e.target.style.boxShadow = 'none'
+          }}
+        />
+      </div>
+
+      <div style={styles.field}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
+          <label style={styles.label}>Mode</label>
+          <span style={styles.modeBadge(isAgentMode)}>
+            {isAgentMode ? 'Agent' : 'Instruction'}
+          </span>
+        </div>
+        <select
+          style={styles.select}
+          value={config.mode || 'instruction'}
+          onChange={(e) => handleChange('mode', e.target.value)}
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          <option value="instruction">Instruction Mode</option>
+          <option value="agent">Agent Mode</option>
+        </select>
+      </div>
+
+      <div style={styles.field}>
+        <label style={styles.label}>Model</label>
+        <input
+          style={styles.input}
+          value={config.model || ''}
+          onChange={(e) => handleChange('model', e.target.value)}
+          placeholder="e.g., gpt-4, claude-3-sonnet"
+          onKeyDown={(e) => e.stopPropagation()}
+        />
+      </div>
+
+      <div style={styles.field}>
+        <label style={styles.label}>User Prompt</label>
+        <textarea
+          style={styles.textarea}
+          value={config.userPrompt || ''}
+          onChange={(e) => handleChange('userPrompt', e.target.value)}
+          placeholder="Enter your prompt..."
+          rows={3}
+          onKeyDown={(e) => e.stopPropagation()}
+        />
+      </div>
+
+      {isExpanded && (
+        <>
+          {config.systemPrompt !== undefined && (
+            <div style={styles.field}>
+              <label style={styles.label}>System Prompt</label>
+              <textarea
+                style={styles.textarea}
+                value={config.systemPrompt || ''}
+                onChange={(e) => handleChange('systemPrompt', e.target.value)}
+                placeholder="System instructions..."
+                rows={2}
+                onKeyDown={(e) => e.stopPropagation()}
+              />
+            </div>
+          )}
+
+          <div style={styles.row}>
+            <div style={{ ...styles.field, flex: 1 }}>
+              <label style={styles.label}>Response Format</label>
+              <select
+                style={styles.select}
+                value={config.responseFormat || 'text'}
+                onChange={(e) => handleChange('responseFormat', e.target.value)}
+                onKeyDown={(e) => e.stopPropagation()}
+              >
+                <option value="text">Text</option>
+                <option value="json">JSON</option>
+                <option value="markdown">Markdown</option>
+                <option value="html">HTML</option>
+              </select>
+            </div>
+            <div style={{ ...styles.field, flex: 1 }}>
+              <label style={styles.label}>Temperature</label>
+              <input
+                style={styles.input}
+                type="number"
+                min="0"
+                max="2"
+                step="0.1"
+                value={config.temperature ?? 0.7}
+                onChange={(e) => handleChange('temperature', parseFloat(e.target.value))}
+                onKeyDown={(e) => e.stopPropagation()}
+              />
+            </div>
+          </div>
+
+          <div style={styles.field}>
+            <label style={styles.label}>Output Variable</label>
+            <input
+              style={styles.input}
+              value={config.outputVariable || ''}
+              onChange={(e) => handleChange('outputVariable', e.target.value)}
+              placeholder="result"
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+          </div>
+        </>
+      )}
+
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{
+          width: '100%',
+          padding: '6px',
+          fontSize: '11px',
+          color: '#6366f1',
+          backgroundColor: 'transparent',
+          border: '1px dashed #e5e7eb',
+          borderRadius: '6px',
+          cursor: 'pointer',
+          marginTop: '4px',
+        }}
+      >
+        {isExpanded ? 'Show Less' : 'Show More Options'}
+      </button>
+    </BaseNode>
+  )
+})
+
+export default PromptNode
+

package/src/components/nodes/SendEmailNode.tsx

@@ -0,0 +1,311 @@
+import React, { memo, useCallback, useState } from 'react'
+import type { NodeProps } from '@xyflow/react'
+import { BaseNode, MailIcon, NODE_HEADER_COLORS } from './BaseNode'
+import type { RuntypeNodeData, SendEmailStepConfig, FlowStep } from '../../types'
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = {
+  field: {
+    marginBottom: '12px',
+  },
+  label: {
+    display: 'block',
+    fontSize: '11px',
+    fontWeight: 600,
+    color: '#6b7280',
+    marginBottom: '4px',
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.03em',
+  },
+  input: {
+    width: '100%',
+    padding: '8px 10px',
+    fontSize: '12px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    backgroundColor: '#f9fafb',
+    color: '#1f2937',
+    outline: 'none',
+    transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
+  },
+  textarea: {
+    width: '100%',
+    padding: '8px 10px',
+    fontSize: '12px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    backgroundColor: '#f9fafb',
+    color: '#1f2937',
+    outline: 'none',
+    resize: 'vertical' as const,
+    minHeight: '80px',
+    fontFamily: 'inherit',
+    transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
+  },
+  select: {
+    width: '100%',
+    padding: '8px 10px',
+    fontSize: '12px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    backgroundColor: '#f9fafb',
+    color: '#1f2937',
+    outline: 'none',
+    cursor: 'pointer',
+  },
+  row: {
+    display: 'flex',
+    gap: '8px',
+  },
+  emailPreview: {
+    backgroundColor: '#f8fafc',
+    border: '1px solid #e2e8f0',
+    borderRadius: '8px',
+    padding: '10px',
+    marginTop: '8px',
+  },
+  previewHeader: {
+    fontSize: '10px',
+    color: '#64748b',
+    marginBottom: '4px',
+  },
+  previewValue: {
+    fontSize: '12px',
+    color: '#1e293b',
+    fontWeight: 500,
+    marginBottom: '8px',
+    wordBreak: 'break-all' as const,
+  },
+  variableHint: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '2px 6px',
+    borderRadius: '4px',
+    fontSize: '10px',
+    backgroundColor: '#f0f9ff',
+    color: '#0369a1',
+    fontFamily: 'monospace',
+    marginRight: '4px',
+    marginTop: '4px',
+  },
+}
+
+// ============================================================================
+// Send Email Node Component
+// ============================================================================
+
+export const SendEmailNode = memo(function SendEmailNode(props: NodeProps) {
+  const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
+  const { step, onChange } = data
+  const config = step.config as SendEmailStepConfig
+  
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const handleChange = useCallback(
+    (field: keyof SendEmailStepConfig, value: unknown) => {
+      onChange?.(id, {
+        config: {
+          ...config,
+          [field]: value,
+        },
+      } as Partial<FlowStep>)
+    },
+    [id, config, onChange]
+  )
+
+  const handleNameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(id, { name: e.target.value })
+    },
+    [id, onChange]
+  )
+
+  // Check for template variables in fields
+  const hasVariables = (value: string) => /\{\{[\w._]+\}\}/.test(value)
+
+  return (
+    <BaseNode
+      data={data}
+      selected={selected}
+      id={id}
+      typeLabel="Send Email"
+      icon={<MailIcon />}
+      headerColor={NODE_HEADER_COLORS['send-email']}
+    >
+      <div style={styles.field}>
+        <label style={styles.label}>Step Name</label>
+        <input
+          style={styles.input}
+          value={step.name}
+          onChange={handleNameChange}
+          placeholder="Enter step name"
+          onKeyDown={(e) => e.stopPropagation()}
+        />
+      </div>
+
+      <div style={styles.field}>
+        <label style={styles.label}>To</label>
+        <input
+          style={styles.input}
+          value={config.to || ''}
+          onChange={(e) => handleChange('to', e.target.value)}
+          placeholder="recipient@example.com or {{_record.metadata.email}}"
+          onKeyDown={(e) => e.stopPropagation()}
+        />
+        {hasVariables(config.to || '') && (
+          <span style={styles.variableHint}>Uses variable</span>
+        )}
+      </div>
+
+      <div style={styles.field}>
+        <label style={styles.label}>Subject</label>
+        <input
+          style={styles.input}
+          value={config.subject || ''}
+          onChange={(e) => handleChange('subject', e.target.value)}
+          placeholder="Your subject line"
+          onKeyDown={(e) => e.stopPropagation()}
+        />
+      </div>
+
+      <div style={styles.field}>
+        <label style={styles.label}>HTML Content</label>
+        <textarea
+          style={styles.textarea}
+          value={config.html || ''}
+          onChange={(e) => handleChange('html', e.target.value)}
+          placeholder="<p>Your email content...</p>&#10;&#10;Use {{variable}} for dynamic content"
+          rows={4}
+          onKeyDown={(e) => e.stopPropagation()}
+        />
+      </div>
+
+      {isExpanded && (
+        <>
+          <div style={styles.field}>
+            <label style={styles.label}>From</label>
+            <input
+              style={styles.input}
+              value={config.from || ''}
+              onChange={(e) => handleChange('from', e.target.value)}
+              placeholder="no-reply@messages.runtype.com"
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+          </div>
+
+          <div style={styles.row}>
+            <div style={{ ...styles.field, flex: 1 }}>
+              <label style={styles.label}>CC</label>
+              <input
+                style={styles.input}
+                value={config.cc || ''}
+                onChange={(e) => handleChange('cc', e.target.value)}
+                placeholder="cc@example.com"
+                onKeyDown={(e) => e.stopPropagation()}
+              />
+            </div>
+            <div style={{ ...styles.field, flex: 1 }}>
+              <label style={styles.label}>BCC</label>
+              <input
+                style={styles.input}
+                value={config.bcc || ''}
+                onChange={(e) => handleChange('bcc', e.target.value)}
+                placeholder="bcc@example.com"
+                onKeyDown={(e) => e.stopPropagation()}
+              />
+            </div>
+          </div>
+
+          <div style={styles.field}>
+            <label style={styles.label}>Reply To</label>
+            <input
+              style={styles.input}
+              value={config.replyTo || ''}
+              onChange={(e) => handleChange('replyTo', e.target.value)}
+              placeholder="reply@example.com"
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+          </div>
+
+          <div style={styles.field}>
+            <label style={styles.label}>Plain Text (Fallback)</label>
+            <textarea
+              style={styles.textarea}
+              value={config.text || ''}
+              onChange={(e) => handleChange('text', e.target.value)}
+              placeholder="Plain text version of your email..."
+              rows={2}
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+          </div>
+
+          <div style={styles.row}>
+            <div style={{ ...styles.field, flex: 1 }}>
+              <label style={styles.label}>On Error</label>
+              <select
+                style={styles.select}
+                value={config.errorHandling || 'fail'}
+                onChange={(e) => handleChange('errorHandling', e.target.value)}
+                onKeyDown={(e) => e.stopPropagation()}
+              >
+                <option value="fail">Fail</option>
+                <option value="continue">Continue</option>
+                <option value="default">Use Default</option>
+              </select>
+            </div>
+            <div style={{ ...styles.field, flex: 1 }}>
+              <label style={styles.label}>Output Variable</label>
+              <input
+                style={styles.input}
+                value={config.outputVariable || ''}
+                onChange={(e) => handleChange('outputVariable', e.target.value)}
+                placeholder="email_result"
+                onKeyDown={(e) => e.stopPropagation()}
+              />
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Email Preview */}
+      {(config.to || config.subject) && (
+        <div style={styles.emailPreview}>
+          <div style={styles.previewHeader}>Preview</div>
+          {config.to && (
+            <div style={styles.previewValue}>
+              <strong>To:</strong> {config.to}
+            </div>
+          )}
+          {config.subject && (
+            <div style={styles.previewValue}>
+              <strong>Subject:</strong> {config.subject}
+            </div>
+          )}
+        </div>
+      )}
+
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{
+          width: '100%',
+          padding: '6px',
+          fontSize: '11px',
+          color: '#6366f1',
+          backgroundColor: 'transparent',
+          border: '1px dashed #e5e7eb',
+          borderRadius: '6px',
+          cursor: 'pointer',
+          marginTop: '8px',
+        }}
+      >
+        {isExpanded ? 'Show Less' : 'Show More Options'}
+      </button>
+    </BaseNode>
+  )
+})
+
+export default SendEmailNode
+