robobyte-front-builder 1.0.17 → 1.0.21

package/src/views/builder/sidebar/tabs/AiTab/index.jsx

@@ -0,0 +1,409 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import {
+  Box, TextField, IconButton, Typography, CircularProgress,
+  Chip, Tooltip, Divider, Button, Alert,
+} from '@mui/material'
+import SendIcon        from '@mui/icons-material/Send'
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'
+import DeleteSweepIcon from '@mui/icons-material/DeleteSweep'
+import VisibilityIcon  from '@mui/icons-material/Visibility'
+import RefreshIcon     from '@mui/icons-material/Refresh'
+import CheckIcon       from '@mui/icons-material/Check'
+import UndoIcon        from '@mui/icons-material/Undo'
+import { useBuilder } from 'context/BuilderContext'
+import { sendAiMessage, getProviderLabel } from './aiProvider'
+import { buildSystemPrompt } from './systemPrompt'
+import { parseAiResponse, transformAiSchema } from './schemaTransformer'
+import { validateAiSchema } from './schemaValidator'
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const SYSTEM_PROMPT = buildSystemPrompt()
+
+const QUICK_PROMPTS = [
+  'Build a login form',
+  'Create a user registration form',
+  'Build a 3-column KPI dashboard',
+  'Add a data table with search',
+  'Build a wizard with 3 steps',
+]
+
+// ── Preview banner (rendered via portal over the whole page) ──────────────────
+
+function PreviewBanner({ message, onApply, onRevert }) {
+  if (typeof document === 'undefined') return null
+  return createPortal(
+    <Box sx={{
+      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 9999,
+      bgcolor: 'primary.dark',
+      color:   'primary.contrastText',
+      display: 'flex', alignItems: 'center',
+      px: 2, py: 0.75, gap: 1.5,
+      boxShadow: 4,
+    }}>
+      <AutoAwesomeIcon sx={{ fontSize: 15, opacity: 0.85 }} />
+      <Typography variant='body2' sx={{ flex: 1, fontWeight: 500, fontSize: 13 }} noWrap>
+        AI Preview — {message}
+      </Typography>
+      <Button
+        size='small'
+        onClick={onRevert}
+        startIcon={<UndoIcon sx={{ fontSize: 14 }} />}
+        sx={{
+          color: 'primary.contrastText',
+          borderColor: 'rgba(255,255,255,0.4)',
+          border: '1px solid',
+          fontSize: 12, py: 0.4, px: 1.2,
+          '&:hover': { bgcolor: 'rgba(255,255,255,0.12)' },
+        }}
+      >
+        Revert
+      </Button>
+      <Button
+        size='small'
+        onClick={onApply}
+        startIcon={<CheckIcon sx={{ fontSize: 14 }} />}
+        sx={{
+          bgcolor: 'primary.contrastText',
+          color:   'primary.dark',
+          fontSize: 12, py: 0.4, px: 1.2,
+          '&:hover': { bgcolor: 'grey.100' },
+        }}
+      >
+        Apply
+      </Button>
+    </Box>,
+    document.body
+  )
+}
+
+// ── Message bubbles ────────────────────────────────────────────────────────────
+
+function UserBubble({ text }) {
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 1 }}>
+      <Box sx={{
+        maxWidth: '85%', px: 1.5, py: 1,
+        bgcolor: 'primary.main', color: 'primary.contrastText',
+        borderRadius: '16px 16px 4px 16px',
+        fontSize: 13, lineHeight: 1.5,
+        whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+      }}>
+        {text}
+      </Box>
+    </Box>
+  )
+}
+
+function AiBubble({ content }) {
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'flex-start', mb: 1 }}>
+      <Box sx={{
+        maxWidth: '85%', px: 1.5, py: 1,
+        bgcolor: 'background.paper',
+        border: '1px solid', borderColor: 'divider',
+        borderRadius: '16px 16px 16px 4px',
+        fontSize: 13, lineHeight: 1.5,
+        whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+      }}>
+        {content}
+      </Box>
+    </Box>
+  )
+}
+
+function SchemaProposalBubble({ message, isPreviewing, onPreview }) {
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'flex-start', mb: 1 }}>
+      <Box sx={{
+        maxWidth: '90%', px: 1.5, py: 1.25,
+        bgcolor: 'background.paper',
+        border: '1px solid',
+        borderColor: isPreviewing ? 'success.main' : 'primary.main',
+        borderRadius: '16px 16px 16px 4px',
+      }}>
+        <Box display='flex' alignItems='center' gap={0.75} mb={0.75}>
+          <AutoAwesomeIcon sx={{ fontSize: 14, color: isPreviewing ? 'success.main' : 'primary.main' }} />
+          <Typography variant='caption' color={isPreviewing ? 'success.main' : 'primary.main'} fontWeight={600}>
+            {isPreviewing ? 'Previewing on canvas' : 'Schema ready'}
+          </Typography>
+        </Box>
+        <Typography sx={{ fontSize: 13, mb: 1, lineHeight: 1.5 }}>{message}</Typography>
+        {!isPreviewing && (
+          <Button
+            size='small'
+            variant='outlined'
+            startIcon={<VisibilityIcon />}
+            onClick={onPreview}
+            sx={{ fontSize: 12 }}
+          >
+            Preview on Canvas
+          </Button>
+        )}
+      </Box>
+    </Box>
+  )
+}
+
+function TypingIndicator() {
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'flex-start', mb: 1 }}>
+      <Box sx={{
+        px: 2, py: 1.25,
+        bgcolor: 'background.paper',
+        border: '1px solid', borderColor: 'divider',
+        borderRadius: '16px 16px 16px 4px',
+        display: 'flex', alignItems: 'center', gap: 0.5,
+      }}>
+        {[0, 1, 2].map(i => (
+          <Box key={i} sx={{
+            width: 6, height: 6, borderRadius: '50%',
+            bgcolor: 'text.disabled',
+            animation: 'pulse 1.2s ease-in-out infinite',
+            animationDelay: `${i * 0.2}s`,
+            '@keyframes pulse': {
+              '0%, 80%, 100%': { transform: 'scale(0.6)', opacity: 0.4 },
+              '40%':           { transform: 'scale(1)',   opacity: 1 },
+            },
+          }} />
+        ))}
+      </Box>
+    </Box>
+  )
+}
+
+// ── Main AI tab ────────────────────────────────────────────────────────────────
+
+export default function AiTab() {
+  const { schema, setSchema } = useBuilder()
+
+  // Chat messages: { id, role:'user'|'ai', kind:'text'|'schema', content?, aiSchema?, aiMessage? }
+  const [messages, setMessages] = useState([])
+  const [input,    setInput]    = useState('')
+  const [loading,  setLoading]  = useState(false)
+  const [error,    setError]    = useState(null)
+
+  // Preview: schema is already on the canvas; originalSchema lets us revert
+  // { originalSchema, aiSchema, aiMessage, msgId }
+  const [preview, setPreview] = useState(null)
+
+  const bottomRef = useRef(null)
+  const inputRef  = useRef(null)
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages, loading])
+
+  // ── Build messages for the API ─────────────────────────────────────────────
+  const buildApiMessages = useCallback((conversationMsgs, userText) => {
+    const history = conversationMsgs
+      .filter(m => m.kind === 'text' || (m.kind === 'schema' && m.role === 'ai'))
+      .map(m => ({
+        role:    m.role === 'user' ? 'user' : 'assistant',
+        content: m.role === 'ai' && m.kind === 'schema'
+          ? `${m.aiMessage}\n\`\`\`json\n${JSON.stringify({ type: 'schema', message: m.aiMessage, schema: m.aiSchema }, null, 2)}\n\`\`\``
+          : m.content,
+      }))
+
+    const userContent =
+      `<current_canvas_schema>\n${JSON.stringify(schema, null, 2)}\n</current_canvas_schema>\n\n${userText}`
+
+    return [...history, { role: 'user', content: userContent }]
+  }, [schema])
+
+  // ── Send ────────────────────────────────────────────────────────────────────
+  const handleSend = useCallback(async (text) => {
+    const trimmed = (text ?? input).trim()
+    if (!trimmed || loading) return
+
+    setInput('')
+    setError(null)
+
+    const userMsg = { id: Date.now(), role: 'user', kind: 'text', content: trimmed }
+    setMessages(prev => [...prev, userMsg])
+    setLoading(true)
+
+    try {
+      const apiMsgs = buildApiMessages(messages, trimmed)
+      const raw     = await sendAiMessage(apiMsgs, SYSTEM_PROMPT)
+      const parsed  = parseAiResponse(raw)
+
+      if (parsed.type === 'schema') {
+        const { valid, errors } = validateAiSchema(parsed.schema)
+        if (!valid) {
+          setMessages(prev => [...prev, {
+            id: Date.now() + 1, role: 'ai', kind: 'text',
+            content: `I generated a schema but it failed validation:\n• ${errors.join('\n• ')}\n\nCould you rephrase your request?`,
+          }])
+        } else {
+          const msgId = Date.now() + 1
+          setMessages(prev => [...prev, {
+            id: msgId, role: 'ai', kind: 'schema',
+            aiSchema: parsed.schema, aiMessage: parsed.message,
+          }])
+        }
+      } else {
+        setMessages(prev => [...prev, {
+          id: Date.now() + 1, role: 'ai', kind: 'text',
+          content: parsed.content,
+        }])
+      }
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+      inputRef.current?.focus()
+    }
+  }, [input, loading, messages, buildApiMessages])
+
+  // ── Preview on canvas ──────────────────────────────────────────────────────
+  const handlePreview = useCallback((aiSchema, aiMessage, msgId) => {
+    // If another preview is active, revert it first
+    if (preview) setSchema(preview.originalSchema)
+
+    try {
+      const transformed = transformAiSchema(aiSchema)
+      setPreview({ originalSchema: schema, aiSchema, aiMessage, msgId })
+      setSchema(transformed)
+    } catch (err) {
+      setError(`Preview failed: ${err.message}`)
+    }
+  }, [preview, schema, setSchema])
+
+  // ── Apply (keep schema, clear preview) ────────────────────────────────────
+  const handleApply = useCallback(() => {
+    setPreview(null)
+    setMessages(prev => [...prev, {
+      id: Date.now(), role: 'ai', kind: 'text',
+      content: '✅ Schema applied to canvas.',
+    }])
+  }, [])
+
+  // ── Revert (restore original, clear preview) ───────────────────────────────
+  const handleRevert = useCallback(() => {
+    if (preview?.originalSchema) setSchema(preview.originalSchema)
+    setPreview(null)
+  }, [preview, setSchema])
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() }
+  }
+
+  return (
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+
+      {/* ── Preview banner ── */}
+      {preview && (
+        <PreviewBanner
+          message={preview.aiMessage}
+          onApply={handleApply}
+          onRevert={handleRevert}
+        />
+      )}
+
+      {/* ── Header ── */}
+      <Box sx={{
+        px: 2, py: 1, flexShrink: 0,
+        display: 'flex', alignItems: 'center', gap: 1,
+        borderBottom: '1px solid', borderColor: 'divider',
+        bgcolor: 'background.paper',
+      }}>
+        <AutoAwesomeIcon sx={{ fontSize: 16, color: 'primary.main' }} />
+        <Typography variant='caption' fontWeight={600} sx={{ flex: 1 }}>
+          AI Builder
+        </Typography>
+        <Chip label={getProviderLabel()} size='small' variant='outlined' sx={{ fontSize: 10 }} />
+        {messages.length > 0 && (
+          <Tooltip title='Clear conversation'>
+            <IconButton size='small' onClick={() => {
+              if (preview) handleRevert()
+              setMessages([])
+              setError(null)
+            }}>
+              <DeleteSweepIcon sx={{ fontSize: 16 }} />
+            </IconButton>
+          </Tooltip>
+        )}
+      </Box>
+
+      {/* ── Messages ── */}
+      <Box sx={{ flex: 1, overflow: 'auto', px: 1.5, py: 1.5 }}>
+        {messages.length === 0 && !loading && (
+          <Box sx={{ textAlign: 'center', mt: 3 }}>
+            <AutoAwesomeIcon sx={{ fontSize: 32, color: 'text.disabled', mb: 1 }} />
+            <Typography variant='body2' color='text.disabled' sx={{ mb: 2 }}>
+              Describe the UI you want to build.
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
+              {QUICK_PROMPTS.map(p => (
+                <Chip
+                  key={p} label={p} size='small' variant='outlined' clickable
+                  onClick={() => handleSend(p)}
+                  sx={{ fontSize: 11, cursor: 'pointer' }}
+                />
+              ))}
+            </Box>
+          </Box>
+        )}
+
+        {messages.map(msg => {
+          if (msg.role === 'user') return <UserBubble key={msg.id} text={msg.content} />
+
+          if (msg.kind === 'schema') {
+            const isPreviewing = preview?.msgId === msg.id
+            return (
+              <SchemaProposalBubble
+                key={msg.id}
+                message={msg.aiMessage}
+                isPreviewing={isPreviewing}
+                onPreview={() => handlePreview(msg.aiSchema, msg.aiMessage, msg.id)}
+              />
+            )
+          }
+
+          return <AiBubble key={msg.id} content={msg.content} />
+        })}
+
+        {loading && <TypingIndicator />}
+
+        {error && (
+          <Alert severity='error' sx={{ mt: 1, fontSize: 12 }}
+            action={<IconButton size='small' onClick={() => setError(null)}><RefreshIcon fontSize='small' /></IconButton>}>
+            {error}
+          </Alert>
+        )}
+
+        <div ref={bottomRef} />
+      </Box>
+
+      <Divider />
+
+      {/* ── Input ── */}
+      <Box sx={{
+        px: 1.5, py: 1, flexShrink: 0,
+        bgcolor: 'background.paper',
+        display: 'flex', gap: 1, alignItems: 'flex-end',
+      }}>
+        <TextField
+          inputRef={inputRef}
+          fullWidth multiline maxRows={4} size='small'
+          placeholder='Describe what you want to build…'
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          disabled={loading}
+          sx={{ '& .MuiInputBase-root': { fontSize: 13 } }}
+        />
+        <IconButton
+          color='primary'
+          onClick={() => handleSend()}
+          disabled={!input.trim() || loading}
+          sx={{ mb: 0.25 }}
+        >
+          {loading ? <CircularProgress size={20} /> : <SendIcon fontSize='small' />}
+        </IconButton>
+      </Box>
+    </Box>
+  )
+}

package/src/views/builder/sidebar/tabs/AiTab/schemaTransformer.js

@@ -0,0 +1,102 @@
+/**
+ * Transform an AI-generated simplified schema into a full builder schema.
+ *
+ * AI produces:
+ *   { type:'input', props:{ label:'Name', key:'name' }, children:[] }
+ *
+ * Builder requires:
+ *   { id:'cmp_xxx', type:'input', props:{ main:{ label:{valueType:'value',value:'Name'}, ... }, style:{}, advanced:{} }, children:[] }
+ *
+ * This module handles the conversion so the AI never needs to deal with
+ * valueType wrappers or UUID generation.
+ */
+
+function uid() {
+  try { return `cmp_${crypto.randomUUID()}` }
+  catch { return `cmp_${Math.random().toString(36).slice(2, 11)}` }
+}
+
+function wrap(value) {
+  return { valueType: 'value', value }
+}
+
+function wrapGroup(rawProps = {}) {
+  const group = {}
+  for (const [k, v] of Object.entries(rawProps)) {
+    if (v === undefined || v === null) continue
+    group[k] = wrap(v)
+  }
+  return group
+}
+
+function buildProps(node) {
+  // AI nodes have:
+  //   node.props  → main group (component props like label, key, cols, gap …)
+  //   node.style  → style group (cell/visual styling like padding, backgroundColor …)
+  return {
+    main:     wrapGroup(node.props  ?? {}),
+    style:    wrapGroup(node.style  ?? {}),
+    advanced: {},
+  }
+}
+
+function transformNode(node) {
+  if (!node || typeof node !== 'object' || !node.type) return null
+  return {
+    id:       uid(),
+    type:     node.type,
+    props:    buildProps(node),
+    children: Array.isArray(node.children)
+      ? node.children.map(transformNode).filter(Boolean)
+      : [],
+  }
+}
+
+/**
+ * Convert the AI's simplified schema into a full builder schema.
+ * Returns { root, dialogs, actions, timers }.
+ * Throws if the AI schema is structurally invalid.
+ */
+export function transformAiSchema(aiSchema) {
+  if (!aiSchema || typeof aiSchema !== 'object') {
+    throw new Error('AI schema is not an object')
+  }
+  if (!aiSchema.root) {
+    throw new Error('AI schema is missing a root node')
+  }
+
+  const root    = transformNode(aiSchema.root)
+  root.id       = 'root'           // root always has a fixed id
+
+  return { root, dialogs: [], actions: [], timers: [] }
+}
+
+// ── Response parser ───────────────────────────────────────────────────────────
+
+/**
+ * Parse the raw text from the AI.
+ *
+ * Returns one of:
+ *   { type: 'schema',  schema: <simplified>, message: string, raw: string }
+ *   { type: 'message', content: string }
+ */
+export function parseAiResponse(text) {
+  // Look for a ```json ... ``` block
+  const match = text.match(/```json\s*([\s\S]*?)\s*```/)
+  if (match) {
+    try {
+      const data = JSON.parse(match[1])
+      if (data?.type === 'schema' && data?.schema) {
+        return {
+          type:    'schema',
+          schema:  data.schema,           // still simplified — caller transforms
+          message: data.message ?? 'Schema generated.',
+          raw:     text,
+        }
+      }
+    } catch {
+      // malformed JSON in the code block — fall through to plain message
+    }
+  }
+  return { type: 'message', content: text }
+}

package/src/views/builder/sidebar/tabs/AiTab/schemaValidator.js

@@ -0,0 +1,64 @@
+import { COMPONENT_SECTIONS } from 'views/builder/sidebar/tabs/Components/componentCatalog'
+
+/**
+ * Validate an AI-generated simplified schema before transformation.
+ * Operates on the raw AI output (no valueType wrappers, no IDs).
+ */
+
+// All types recognised by the builder (catalog + structural children)
+const VALID_TYPES = new Set([
+  'container',     // root is always a container
+  'layout-cell',   // child of layout
+  'wizard-step',   // child of wizard
+  ...COMPONENT_SECTIONS.flatMap(s => s.items.map(i => i.type)),
+])
+
+function validateNode(node, path, errors) {
+  if (!node || typeof node !== 'object') {
+    errors.push(`${path} is not an object`)
+    return
+  }
+  if (typeof node.type !== 'string' || !node.type) {
+    errors.push(`${path} is missing a "type" string`)
+    return
+  }
+  if (!VALID_TYPES.has(node.type)) {
+    errors.push(`${path}: unknown component type "${node.type}"`)
+  }
+  if (!Array.isArray(node.children)) {
+    errors.push(`${path}.children must be an array`)
+    return
+  }
+  // Structural nesting checks
+  if (node.type === 'layout') {
+    node.children.forEach((c, i) => {
+      if (c?.type !== 'layout-cell') {
+        errors.push(`${path}.children[${i}]: layout children must be layout-cell (got "${c?.type}")`)
+      }
+    })
+  }
+  if (node.type === 'wizard') {
+    node.children.forEach((c, i) => {
+      if (c?.type !== 'wizard-step') {
+        errors.push(`${path}.children[${i}]: wizard children must be wizard-step (got "${c?.type}")`)
+      }
+    })
+  }
+  node.children.forEach((child, i) => validateNode(child, `${path}.children[${i}]`, errors))
+}
+
+/**
+ * @param {object} aiSchema  - raw AI schema { root: { type, props, children } }
+ * @returns {{ valid: boolean, errors: string[] }}
+ */
+export function validateAiSchema(aiSchema) {
+  const errors = []
+  if (!aiSchema || typeof aiSchema !== 'object') {
+    return { valid: false, errors: ['Schema is not an object'] }
+  }
+  if (!aiSchema.root) {
+    return { valid: false, errors: ['Schema is missing root node'] }
+  }
+  validateNode(aiSchema.root, 'root', errors)
+  return { valid: errors.length === 0, errors }
+}