robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/builder/inspector/fields/columnEditorShared.jsx

@@ -0,0 +1,217 @@
+/**
+ * Shared constants and components used by both ExtraColsEditor and ColumnsConfigEditor.
+ */
+import { Box, TextField, Switch, FormControlLabel, Typography, Divider } from '@mui/material'
+import ColumnFunctionEditor from './ColumnFunctionEditor'
+
+// ── Custom component lists ─────────────────────────────────────────────────────
+
+export const CUSTOM_CELL_RENDERER_OPTIONS = [
+  { value: 'ChipRenderer',      label: 'Chip (status badge)' },
+  { value: 'BooleanRenderer',   label: 'Boolean (check/cross)' },
+  { value: 'LinkRenderer',      label: 'Link' },
+  { value: 'CurrencyRenderer',  label: 'Currency' },
+  { value: 'DateRenderer',      label: 'Date' },
+  { value: 'ProgressRenderer',  label: 'Progress bar' },
+  { value: 'AvatarRenderer',    label: 'Avatar' },
+  { value: 'IconRenderer',      label: 'Icon (by name)' },
+]
+
+export const CUSTOM_CELL_EDITOR_OPTIONS = [
+  { value: 'MultiSelectEditor',   label: 'Multi Select' },
+  { value: 'SelectEditor',        label: 'Select (dropdown)' },
+  { value: 'AutocompleteEditor',  label: 'Autocomplete' },
+  { value: 'CheckboxEditor',      label: 'Checkbox (boolean)' },
+  { value: 'DateEditor',          label: 'Date picker' },
+  { value: 'NumberEditor',        label: 'Number' },
+]
+
+// Names of all our custom editors — used to detect known vs. truly custom
+export const KNOWN_CUSTOM_EDITORS   = CUSTOM_CELL_EDITOR_OPTIONS.map(o => o.value)
+export const KNOWN_CUSTOM_RENDERERS = CUSTOM_CELL_RENDERER_OPTIONS.map(o => o.value)
+
+// ── MultiSelect param helpers ─────────────────────────────────────────────────
+
+/**
+ * Build cellEditorParams value from structured ms_* fields.
+ * Returns:
+ *   - A JSON string when only static params are set
+ *   - A `return { ... }` string when asyncFetchOptions code is present
+ *     (convertStringToFunction will convert this to a function AG Grid calls)
+ */
+export function buildMultiSelectParams(col) {
+  const params = {}
+  if (col.ms_isSingle)            params.isSingle    = true
+  if (col.ms_fieldName?.trim())   params.fieldName   = col.ms_fieldName.trim()
+  if (col.ms_groupByField?.trim()) params.groupByField = col.ms_groupByField.trim()
+  if (col.ms_targetValue?.trim()) params.targetValue = col.ms_targetValue.trim()
+
+  const optStr = col.ms_options?.trim()
+  if (optStr) {
+    try {
+      params.options = JSON.parse(optStr)
+    } catch {
+      // Newline-separated plain strings → [{id, name}]
+      params.options = optStr.split('\n').filter(Boolean)
+        .map((s, i) => ({ id: i + 1, name: s.trim() }))
+    }
+  }
+
+  const asyncCode = col.ms_asyncFetchOptions?.trim()
+  if (asyncCode) {
+    const staticStr = Object.entries(params)
+      .map(([k, v]) => `${k}: ${JSON.stringify(v)}`)
+      .join(', ')
+    return `return { ${staticStr}${staticStr ? ', ' : ''}asyncFetchOptions: ${asyncCode} }`
+  }
+
+  return JSON.stringify(params)
+}
+
+/**
+ * Parse cellEditorParams string into structured ms_* fields.
+ * Only works for JSON-serialized params (not code-based).
+ */
+export function parseMultiSelectParams(cellEditorParams) {
+  if (!cellEditorParams) return {}
+  try { return JSON.parse(cellEditorParams) } catch { return {} }
+}
+
+export const MS_DEFAULTS = {
+  ms_options:           '',
+  ms_isSingle:          false,
+  ms_fieldName:         'name',
+  ms_groupByField:      '',
+  ms_targetValue:       '',
+  ms_asyncFetchOptions: '',
+}
+
+// ── Shared styles ─────────────────────────────────────────────────────────────
+
+const INPUT_SX = {
+  '& .MuiInputBase-root': { color: '#e0e0e0' },
+  '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+  '& .MuiInputLabel-root': { color: '#aaa' },
+}
+
+const CODE_SX = {
+  '& .MuiInputBase-root': {
+    fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+    fontSize: 12,
+    bgcolor: '#1e1e1e',
+    color: '#d4d4d4',
+  },
+  '& .MuiOutlinedInput-notchedOutline': { borderColor: '#444' },
+  '& .MuiInputLabel-root': { color: '#888' },
+}
+
+// ── MultiSelectParamsSection ──────────────────────────────────────────────────
+/**
+ * Structured params UI for MultiSelectEditor.
+ * Rendered inside ExtraColsEditor and ColumnsConfigEditor when
+ * cellEditor === 'MultiSelectEditor'.
+ *
+ * Props:
+ *   col       — the column / override object (must have ms_* fields)
+ *   update    — (key, value) => void
+ */
+export function MultiSelectParamsSection({ col, update }) {
+  return (
+    <Box mt={1.5}>
+      <Divider sx={{ borderColor: '#3a3f45', mb: 1.5 }} />
+      <Typography sx={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#90caf9', mb: 1.5 }}>
+        Multi Select Options
+      </Typography>
+
+      {/* Static options */}
+      <Box mb={1.5}>
+        <Typography sx={{ fontSize: 11, color: '#aaa', mb: 0.5 }}>
+          Static Options <span style={{ color: '#666' }}>(one per line, or JSON array)</span>
+        </Typography>
+        <TextField
+          value={col.ms_options}
+          onChange={e => update('ms_options', e.target.value)}
+          multiline
+          minRows={3}
+          maxRows={8}
+          fullWidth
+          size='small'
+          placeholder={'Apple\nBanana\nCherry\n\nor JSON: [{"id":1,"name":"Apple"},...]'}
+          sx={CODE_SX}
+        />
+      </Box>
+
+      {/* isSingle + fieldName */}
+      <Box display='flex' gap={2} alignItems='center' mb={1.5}>
+        <FormControlLabel
+          control={
+            <Switch
+              size='small'
+              checked={!!col.ms_isSingle}
+              onChange={e => update('ms_isSingle', e.target.checked)}
+              color='primary'
+            />
+          }
+          label={<Typography variant='caption'>Single select</Typography>}
+        />
+        <TextField
+          label='Field Name (label property)'
+          value={col.ms_fieldName}
+          onChange={e => update('ms_fieldName', e.target.value)}
+          size='small'
+          sx={{ flex: 1, ...INPUT_SX }}
+          InputLabelProps={{ shrink: true }}
+          placeholder='name'
+        />
+      </Box>
+
+      {/* groupByField + targetValue */}
+      <Box display='flex' gap={2} mb={1.5}>
+        <TextField
+          label='Group By Field (optional)'
+          value={col.ms_groupByField}
+          onChange={e => update('ms_groupByField', e.target.value)}
+          size='small'
+          sx={{ flex: 1, ...INPUT_SX }}
+          InputLabelProps={{ shrink: true }}
+          placeholder='category'
+        />
+        <TextField
+          label='Target Value (optional)'
+          value={col.ms_targetValue}
+          onChange={e => update('ms_targetValue', e.target.value)}
+          size='small'
+          sx={{ flex: 1, ...INPUT_SX }}
+          InputLabelProps={{ shrink: true }}
+          placeholder='id  (saves just the id)'
+        />
+      </Box>
+
+      {/* asyncFetchOptions code */}
+      <Box>
+        <Box display='flex' alignItems='center' gap={0.5} mb={0.5}>
+          <Typography sx={{ fontSize: 11, color: '#aaa' }}>
+            Async Options Loader <span style={{ color: '#666' }}>(overrides static options)</span>
+          </Typography>
+          <ColumnFunctionEditor
+            label='asyncFetchOptions'
+            type='asyncFetchOptions'
+            value={col.ms_asyncFetchOptions}
+            onChange={v => update('ms_asyncFetchOptions', v)}
+          />
+        </Box>
+        <TextField
+          value={col.ms_asyncFetchOptions}
+          onChange={e => update('ms_asyncFetchOptions', e.target.value)}
+          multiline
+          minRows={3}
+          maxRows={8}
+          fullWidth
+          size='small'
+          placeholder={'async (search) => {\n  // data, dataRef, reportRefs, setData available in scope\n  // const items = dataRef.myList ?? data.myList ?? []\n  // return items.filter(i => i.name.toLowerCase().includes(search.toLowerCase()))\n  const res = await fetch(`/api/items?q=${encodeURIComponent(search)}`)\n  return res.json()\n}'}
+          sx={CODE_SX}
+        />
+      </Box>
+    </Box>
+  )
+}

package/src/views/builder/sidebar/Sidebar.jsx

@@ -9,9 +9,11 @@ export default function Sidebar() {
 
   return (
     <Box
-      style={{
+      sx={{
         height: '100%',
-        borderRight: '1px solid #3a3f45'
+        borderRight: '1px solid',
+        borderColor: 'divider',
+        bgcolor: 'background.paper',
       }}
     >
       <SidebarTabs />

package/src/views/builder/sidebar/SidebarTabs.jsx

@@ -1,50 +1,61 @@
-import { Tabs, Tab } from '@mui/material'
+import { Tabs, Tab, Box } from '@mui/material'
 import { useState } from 'react'
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'
 import ComponentsTab from './tabs/Components/ComponentsTab'
 import TreeTab from './tabs/TreeTab'
 import ActionsTab from './tabs/ActionsTab'
+import TimersTab from './tabs/TimersTab'
 import ViewTab from 'views/builder/sidebar/tabs/ViewTab'
+import AiTab from './tabs/AiTab'
 
 export default function SidebarTabs() {
   const [tab, setTab] = useState(0)
 
   return (
-    <>
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
       <Tabs
         value={tab}
         onChange={(e, v) => setTab(v)}
         variant="scrollable"
         scrollButtons="auto"
         sx={{
-          bgcolor: '#3a3f45',
+          bgcolor: 'background.paper',
+          borderBottom: '1px solid',
+          borderColor: 'divider',
           minHeight: 48,
+          flexShrink: 0,
           '& .MuiTab-root': {
-            color: 'rgba(255, 255, 255, 0.7)',
+            color: 'text.secondary',
             minHeight: 48,
             textTransform: 'none',
             fontSize: '0.875rem',
             fontWeight: 500,
-            '&.Mui-selected': {
-              color: '#fff'
-            }
+            '&.Mui-selected': { color: 'text.primary' },
           },
-          '& .MuiTabs-indicator': {
-            backgroundColor: '#9c27b0',
-            height: 3
-          }
+          '& .MuiTabs-indicator': { backgroundColor: 'primary.main', height: 3 },
         }}
       >
         <Tab label="Components" />
         <Tab label="Tree" />
         <Tab label="Actions" />
-        <Tab label="Settings" />
+        <Tab label="Timers" />
         <Tab label="View" />
+        <Tab
+          label="AI"
+          icon={<AutoAwesomeIcon sx={{ fontSize: 14 }} />}
+          iconPosition="start"
+          sx={{ gap: 0.5 }}
+        />
       </Tabs>
 
-      {tab === 0 && <ComponentsTab />}
-      {tab === 1 && <TreeTab />}
-      {tab === 2 && <ActionsTab />}
-      {tab === 4 && <ViewTab />}
-    </>
+      <Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+        {tab === 0 && <ComponentsTab />}
+        {tab === 1 && <TreeTab />}
+        {tab === 2 && <ActionsTab />}
+        {tab === 3 && <TimersTab />}
+        {tab === 4 && <ViewTab />}
+        {tab === 5 && <AiTab />}
+      </Box>
+    </Box>
   )
 }

package/src/views/builder/sidebar/tabs/ActionsTab.jsx

@@ -4,11 +4,15 @@ import FieldWrapper from '../../inspector/fields/FieldWrapper'
 import JSEditor from '../../JSEditor'
 
 const DEFAULT_ACTION_CODE = `/**
- * @param {IFormData} form
- * @param {object} data
+ * @param {IFormData} form      - Current form field values
+ * @param {object}   data       - Reactive data state (read)
+ * @param {function} setData    - Write back to reactive data state (triggers re-render)
+ * @param {object}   dataRef    - Mutable non-reactive store (read/write, no re-render)
+ * @param {object}   reportRefs - Map of { [nodeId]: updateRef } for each ReportViewer
+ * @param {object}   urlParams  - { query, pathname, asPath } from the current page URL
  * @return {any}
  */
-async function Calculation(form, data) {
+async function Calculation(form, data, setData, dataRef, reportRefs, urlParams) {
   return {}
 }
 `

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

@@ -0,0 +1,193 @@
+import { useState } from 'react'
+import {
+  Dialog, DialogTitle, DialogContent, DialogActions,
+  Box, Button, Typography, Chip, Divider, IconButton,
+  Collapse,
+} from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ExpandLessIcon from '@mui/icons-material/ExpandLess'
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'
+
+// ── Type colour mapping (mirrors catalog sections roughly) ─────────────────
+
+const TYPE_COLORS = {
+  // structure
+  container: '#1565C0', card: '#1976D2', layout: '#0288D1',
+  'layout-cell': '#039BE5', wizard: '#7B1FA2', 'wizard-step': '#9C27B0',
+  repeater: '#00838F', menu: '#00695C', dialog: '#AD1457',
+  // fields
+  input: '#2E7D32', textarea: '#388E3C', number: '#43A047',
+  checkbox: '#558B2F', toggle: '#33691E', dropdown: '#1B5E20',
+  radio: '#004D40', autocomplete: '#006064', datepicker: '#0D47A1',
+  time: '#1A237E', tag: '#4A148C', richtext: '#880E4F', signature: '#B71C1C',
+  // static
+  label: '#E65100', header: '#BF360C', button: '#4E342E', divider: '#37474F',
+  image: '#546E7A', link: '#5D4037', banner: '#F57F17',
+  // data
+  'data-grid': '#6A1B9A', 'data-table-viewer': '#4527A0',
+  reportViewer: '#283593', viewRenderer: '#1A237E',
+}
+
+function typeColor(type) {
+  return TYPE_COLORS[type] ?? (type?.startsWith('kpi-') ? '#5D4037' : '#616161')
+}
+
+// ── Recursive tree node ────────────────────────────────────────────────────────
+
+function TreeNode({ node, depth = 0 }) {
+  const [open, setOpen] = useState(depth < 3)
+  if (!node) return null
+
+  // Extract a human-readable label from props (works on both simplified and transformed schemas)
+  const rawLabel =
+    node.props?.main?.label?.value    ??
+    node.props?.main?.label           ??
+    node.props?.main?.text?.value     ??
+    node.props?.main?.text            ??
+    node.props?.main?.key?.value      ??
+    node.props?.main?.key             ??
+    node.props?.label                 ??
+    node.props?.text                  ??
+    node.props?.key                   ??
+    null
+
+  const hasChildren = Array.isArray(node.children) && node.children.length > 0
+
+  return (
+    <Box sx={{ pl: depth > 0 ? 2 : 0 }}>
+      <Box
+        sx={{
+          display: 'flex', alignItems: 'center', gap: 0.75,
+          py: 0.4, px: 0.5, borderRadius: 1,
+          '&:hover': { bgcolor: 'action.hover' },
+        }}
+      >
+        {/* Expand toggle */}
+        {hasChildren ? (
+          <IconButton size='small' sx={{ p: 0, width: 18, height: 18 }}
+            onClick={() => setOpen(v => !v)}>
+            {open
+              ? <ExpandLessIcon sx={{ fontSize: 14, color: 'text.disabled' }} />
+              : <ExpandMoreIcon sx={{ fontSize: 14, color: 'text.disabled' }} />
+            }
+          </IconButton>
+        ) : (
+          <Box sx={{ width: 18 }} />
+        )}
+
+        {/* Type chip */}
+        <Chip
+          label={node.type}
+          size='small'
+          sx={{
+            height: 18, fontSize: 10, fontFamily: 'monospace',
+            bgcolor: typeColor(node.type), color: '#fff',
+            '& .MuiChip-label': { px: 0.75 },
+          }}
+        />
+
+        {/* Label */}
+        {rawLabel && (
+          <Typography variant='caption' sx={{ color: 'text.secondary', fontSize: 11 }} noWrap>
+            {String(rawLabel)}
+          </Typography>
+        )}
+
+        {/* Child count badge */}
+        {hasChildren && (
+          <Typography variant='caption' sx={{ color: 'text.disabled', fontSize: 10, ml: 'auto' }}>
+            {node.children.length}
+          </Typography>
+        )}
+      </Box>
+
+      {/* Children */}
+      {hasChildren && (
+        <Collapse in={open}>
+          <Box sx={{
+            ml: 1, pl: 1,
+            borderLeft: '1px dashed',
+            borderColor: 'divider',
+          }}>
+            {node.children.map((child, i) => (
+              <TreeNode key={i} node={child} depth={depth + 1} />
+            ))}
+          </Box>
+        </Collapse>
+      )}
+    </Box>
+  )
+}
+
+// ── Count all nodes recursively ────────────────────────────────────────────────
+
+function countNodes(node) {
+  if (!node) return 0
+  return 1 + (node.children ?? []).reduce((sum, c) => sum + countNodes(c), 0)
+}
+
+// ── Main dialog ────────────────────────────────────────────────────────────────
+
+export default function AiPreviewDialog({ open, aiSchema, aiMessage, onApply, onDiscard }) {
+  if (!aiSchema) return null
+
+  const total = countNodes(aiSchema.root)
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onDiscard}
+      maxWidth='sm'
+      fullWidth
+      PaperProps={{ sx: { maxHeight: '80vh', display: 'flex', flexDirection: 'column' } }}
+    >
+      <DialogTitle sx={{ pb: 1 }}>
+        <Box display='flex' alignItems='center' gap={1}>
+          <AutoAwesomeIcon sx={{ color: 'primary.main', fontSize: 20 }} />
+          <Typography variant='h6' sx={{ flex: 1 }}>AI Schema Proposal</Typography>
+          <Chip
+            label={`${total} component${total !== 1 ? 's' : ''}`}
+            size='small'
+            variant='outlined'
+            sx={{ fontSize: 11 }}
+          />
+        </Box>
+
+        {aiMessage && (
+          <Typography variant='body2' color='text.secondary' sx={{ mt: 0.75, fontStyle: 'italic' }}>
+            {aiMessage}
+          </Typography>
+        )}
+      </DialogTitle>
+
+      <Divider />
+
+      {/* Component tree */}
+      <DialogContent sx={{ flex: 1, overflow: 'auto', py: 1.5 }}>
+        <Typography variant='caption' color='text.disabled' sx={{ display: 'block', mb: 1 }}>
+          Component tree — click ▶ to expand
+        </Typography>
+        <TreeNode node={aiSchema.root} depth={0} />
+      </DialogContent>
+
+      <Divider />
+
+      <DialogActions sx={{ px: 2.5, py: 1.5, gap: 1 }}>
+        <Button onClick={onDiscard} color='inherit' size='small'>
+          Discard
+        </Button>
+        <Box sx={{ flex: 1 }} />
+        <Button
+          onClick={onApply}
+          variant='contained'
+          size='small'
+          startIcon={<CheckCircleOutlineIcon />}
+          color='primary'
+        >
+          Apply to Canvas
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,49 @@
+/**
+ * AI provider client for the Builder Assistant.
+ *
+ * Calls the local Next.js proxy route (/api/ai) instead of the AI provider
+ * directly — this keeps API keys server-side and avoids CORS restrictions.
+ *
+ * Configuration (.env.local):
+ *   NEXT_PUBLIC_AI_PROVIDER       claude | openai  (default: claude)
+ *   CLAUDE_API_KEY                Anthropic API key  ← no NEXT_PUBLIC_ prefix
+ *   NEXT_PUBLIC_CLAUDE_MODEL      e.g. claude-sonnet-4-6
+ *   OPENAI_API_KEY                OpenAI API key     ← no NEXT_PUBLIC_ prefix
+ *   NEXT_PUBLIC_OPENAI_MODEL      e.g. gpt-4o
+ */
+
+const PROVIDER_ID = process.env.NEXT_PUBLIC_AI_PROVIDER ?? 'claude'
+
+const MODEL_LABELS = {
+  claude: () => process.env.NEXT_PUBLIC_CLAUDE_MODEL ?? 'claude-sonnet-4-6',
+  openai: () => process.env.NEXT_PUBLIC_OPENAI_MODEL ?? 'gpt-4o',
+}
+
+/**
+ * Send a conversation to the AI via the local proxy.
+ *
+ * @param {Array<{role:'user'|'assistant', content:string}>} messages
+ * @param {string} systemPrompt
+ * @returns {Promise<string>}  raw text response
+ */
+export async function sendAiMessage(messages, systemPrompt) {
+  const res = await fetch('/api/ai', {
+    method:  'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body:    JSON.stringify({ messages, systemPrompt, provider: PROVIDER_ID }),
+  })
+
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}))
+    throw new Error(data.error ?? `Request failed (${res.status})`)
+  }
+
+  const data = await res.json()
+  return data.content ?? ''
+}
+
+/** Human-readable label for the active provider + model (shown in the tab header). */
+export function getProviderLabel() {
+  const modelFn = MODEL_LABELS[PROVIDER_ID] ?? MODEL_LABELS.claude
+  return `${PROVIDER_ID} · ${modelFn()}`
+}