robobyte-front-builder 1.0.19 → 1.0.23

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

@@ -0,0 +1,131 @@
+/**
+ * Build a Together AI fine-tuning JSONL file from session-log entries.
+ *
+ * Together accepts the OpenAI conversational fine-tune format:
+ *   {"messages": [
+ *      {"role": "system",    "content": "<system prompt>"},
+ *      {"role": "user",      "content": "<user instruction>"},
+ *      {"role": "assistant", "content": "<assistant reply>"}
+ *   ]}
+ * One example per line.
+ *
+ * For each session-log entry:
+ *   - system    = full system prompt from buildSystemPrompt()
+ *   - user      = entry.prompt   (skipped if empty)
+ *   - assistant = a brief explanation + ```json {...} ``` block carrying the
+ *                 simplified schema. Identical to OUTPUT_FORMAT in the system
+ *                 prompt so the model learns to produce the same shape.
+ *
+ * End-to-end fine-tune workflow:
+ *
+ *   1. Save examples in the UI Builder / Print Builder. They are auto-logged
+ *      to localStorage (rbb:sessionLogs:v1).
+ *   2. Open Session Logs dialog → fill in the `prompt` field for each entry
+ *      that should be used for training. Entries without a prompt are
+ *      excluded from the export.
+ *   3. Click "Export for Together fine-tuning" → downloads .jsonl.
+ *   4. CLI: `pip install together && export TOGETHER_API_KEY=…`
+ *           `together files check  rbb-finetune-…jsonl`
+ *           `together files upload rbb-finetune-…jsonl \
+ *               --type jsonl --purpose fine-tune`
+ *           (the --type flag is required — Together rejects the upload
+ *           with "invalid type, only JsonL, parquet, csv are allowed"
+ *           if the request omits file_type, even when the extension
+ *           is .jsonl.)
+ *           (note the returned file id, then:)
+ *           `together fine-tuning create \
+ *               --training-file <file-id> \
+ *               --model meta-llama/Llama-3.3-70B-Instruct-Reference \
+ *               --lora`
+ *   5. Wait for the job to finish (Together emails you, or `together
+ *      fine-tuning list`).
+ *   6. Deploy as a Dedicated Endpoint, or use serverless if supported for
+ *      that base model.
+ *   7. In .env.local set:
+ *        NEXT_PUBLIC_AI_PROVIDER=together
+ *        TOGETHER_API_KEY=...
+ *        NEXT_PUBLIC_TOGETHER_MODEL=<your-fine-tune-id>
+ *      The /api/ai proxy already supports the `together` provider.
+ */
+
+import { buildSystemPrompt } from './systemPrompt'
+import { simplifyFullSchema } from './schemaTransformer'
+
+/**
+ * Build the assistant content for one example. Mirrors OUTPUT_FORMAT in the
+ * system prompt: a brief explanation followed by one fenced JSON block.
+ */
+function buildAssistantContent(entry, simplifiedSchema) {
+  const innerMessage = (entry.notes && entry.notes.trim())
+    ? entry.notes.trim()
+    : `Generated ${entry.builder === 'print' ? 'print layout' : 'view'} schema.`
+
+  const payload = {
+    type:    'schema',
+    message: innerMessage,
+    schema:  simplifiedSchema,
+  }
+  return `${innerMessage}\n\n\`\`\`json\n${JSON.stringify(payload, null, 2)}\n\`\`\``
+}
+
+/**
+ * Convert eligible entries into one Together-fine-tune training example each.
+ * Returns an array of { messages: [...] } objects. Entries are skipped if:
+ *   - prompt is empty (no instruction text → can't be a (instruction, output) pair)
+ *   - the simplified schema has no root (transformer failed)
+ *
+ * Returns { examples, skipped } so callers can warn the user about losses.
+ */
+export function buildTrainingExamples(entries) {
+  const systemPrompt = buildSystemPrompt()
+  const examples = []
+  const skipped  = []
+
+  for (const entry of entries) {
+    const userMessage = (entry.prompt ?? '').trim()
+    if (!userMessage) {
+      skipped.push({ id: entry.id, reason: 'empty prompt' })
+      continue
+    }
+    const simplified = simplifyFullSchema(entry.schema)
+    if (!simplified.root) {
+      skipped.push({ id: entry.id, reason: 'unusable schema' })
+      continue
+    }
+    const assistantContent = buildAssistantContent(entry, simplified)
+    examples.push({
+      messages: [
+        { role: 'system',    content: systemPrompt },
+        { role: 'user',      content: userMessage },
+        { role: 'assistant', content: assistantContent },
+      ],
+    })
+  }
+  return { examples, skipped }
+}
+
+/** Serialize examples as JSONL — one JSON object per line. */
+export function buildTrainingJSONL(entries) {
+  const { examples, skipped } = buildTrainingExamples(entries)
+  const jsonl = examples.map(ex => JSON.stringify(ex)).join('\n')
+  return { jsonl, count: examples.length, skipped }
+}
+
+/** Trigger a JSONL file download. Returns { count, skipped }. */
+export function exportTrainingJSONL(entries) {
+  if (typeof window === 'undefined') return { count: 0, skipped: [] }
+  const { jsonl, count, skipped } = buildTrainingJSONL(entries)
+  if (count === 0) return { count: 0, skipped }
+
+  const blob = new Blob([jsonl + '\n'], { type: 'application/jsonl' })
+  const url  = URL.createObjectURL(blob)
+  const a    = document.createElement('a')
+  const stamp = new Date().toISOString().slice(0, 10)
+  a.href     = url
+  a.download = `rbb-finetune-${stamp}.jsonl`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+  return { count, skipped }
+}

package/src/views/builder/sidebar/tabs/Components/ComponentsTab.jsx

@@ -6,7 +6,11 @@ import PostService from 'services/PostService'
 import { Endpoints } from 'services/Endpoints'
 import fetchReportDataByPageId from 'services/reportData/fetchReportData'
 
-export default function ComponentsTab() {
+/**
+ * @param {object} [props.sections] - Optional custom section list (e.g. print catalog).
+ *   When provided, widget fetching is skipped and only these sections are shown.
+ */
+export default function ComponentsTab({ sections: sectionsProp }) {
   const [q, setQ] = useState('')
   const [widgets, setWidgets] = useState([])
 
@@ -25,46 +29,42 @@ export default function ComponentsTab() {
   }
 
   const sections = useMemo(() => {
-    // 1) Group widgets (manual groupBy — Object.groupBy requires Chrome 117+ / Node 21+)
-    const safeWidgets = Array.isArray(widgets) ? widgets : []
-    const grouped = safeWidgets.reduce((acc, x) => {
-      const key = x.widgetCategory?.name ?? 'Widgets'
-      ;(acc[key] ??= []).push(x)
-      return acc
-    }, {})
-    // 2) Convert grouped → sections
-    const newSections = Object.entries(grouped).map(([key, items]) => ({
-      key,
-      title: key,
-      items: items.map(item => ({
-        id: item.id,
-        label: item.name,
-        type: key,
-        value: item.value
+    // If a custom sections list is provided (e.g. print catalog), use it directly
+    // without merging widgets and without fetching from the API.
+    const baseComponents = sectionsProp ?? (() => {
+      const safeWidgets = Array.isArray(widgets) ? widgets : []
+      const grouped = safeWidgets.reduce((acc, x) => {
+        const key = x.widgetCategory?.name ?? 'Widgets'
+        ;(acc[key] ??= []).push(x)
+        return acc
+      }, {})
+      const widgetSections = Object.entries(grouped).map(([categoryName, items]) => ({
+        key: `widget__${categoryName}`,
+        title: categoryName,
+        items: items.map(item => ({
+          id: item.id,
+          label: item.name,
+          type: 'widget',
+          value: item.value
+        }))
       }))
-    }))
-    console.log(newSections)
+      return [...COMPONENT_SECTIONS, ...widgetSections]
+    })()
 
-    // 3) Merge with existing sections
-    const components = [...COMPONENT_SECTIONS, ...newSections]
+    if (!q) return baseComponents
 
-    // 4) If no search → return all
-    if (!q) return components
-
-    // 5) Filter
     const v = q.toLowerCase().trim()
-
-    return components
+    return baseComponents
       .map(section => ({
         ...section,
         items: section.items.filter(x => x.label.toLowerCase().includes(v) || x.type.toLowerCase().includes(v))
       }))
       .filter(section => section.items.length > 0)
-  }, [q, widgets])
+  }, [q, widgets, sectionsProp])
 
   useEffect(() => {
-    handleGetWidgets()
-  }, [])
+    if (!sectionsProp) handleGetWidgets()
+  }, [sectionsProp])
   return (
     <Box
       sx={{
@@ -85,7 +85,7 @@ export default function ComponentsTab() {
       {sections.map(section => (
         <Section key={section.key} title={section.title}>
           {section.items.map(item => (
-            <ComponentItem key={item.type} component={item} />
+            <ComponentItem key={item.id ?? item.type} component={item} />
           ))}
         </Section>
       ))}

package/src/views/builder/sidebar/tabs/Components/componentCatalog.js

@@ -4,11 +4,9 @@ export const COMPONENT_SECTIONS = [
     title: 'Fields',
     items: [
       { type: 'autocomplete', label: 'AutoComplete', icon: '📋' },
-      { type: 'calendar', label: 'Calendar', icon: '📆' },
       { type: 'checkbox', label: 'Checkbox', icon: '☑️' },
       { type: 'datepicker', label: 'DatePicker', icon: '📅' },
       { type: 'dropdown', label: 'Dropdown', icon: '⬇️' },
-      { type: 'google-map', label: 'Google Map', icon: '📍' },
       { type: 'input', label: 'Input', icon: '✏️' },
       { type: 'number', label: 'Number format', icon: '🔢' },
       { type: 'radio', label: 'Radio group', icon: '🔘' },
@@ -17,8 +15,7 @@ export const COMPONENT_SECTIONS = [
       { type: 'tag', label: 'Tag picker', icon: '🏷️' },
       { type: 'textarea', label: 'Text area', icon: '📄' },
       { type: 'time', label: 'Time picker', icon: '⏱️' },
-      { type: 'toggle', label: 'Toggle', icon: '🎚️' },
-      { type: 'upload', label: 'Uploader', icon: '⬆️' }
+      { type: 'toggle', label: 'Toggle', icon: '🎚️' }
     ]
   },
 
@@ -35,10 +32,12 @@ export const COMPONENT_SECTIONS = [
       { type: 'menu', label: 'Menu', icon: '📑' },
       { type: 'progress-circle', label: 'Progress circle', icon: '⭕' },
       { type: 'progress-line', label: 'Progress line', icon: '➖' },
-      { type: 'qrcode', label: 'QR Code', icon: '🔲' },
-      { type: 'tooltip', label: 'Tooltip', icon: '❓' },
-      { type: 'reportViewer', label: 'Report Viewer', icon: '🎚️' },
-
+      { type: 'popover', label: 'Popover', icon: '💬' },
+      { type: 'banner', label: 'Banner', icon: '🔔' },
+      { type: 'reportViewer',      label: 'Report Viewer', icon: '🎚️' },
+      { type: 'data-table-viewer', label: 'Data Table',   icon: '⊞'  },
+      { type: 'treeView',          label: 'Tree View',    icon: '🌲'  },
+      { type: 'viewRenderer',      label: 'View Renderer', icon: '🪟' },
     ]
   },
 
@@ -48,22 +47,45 @@ export const COMPONENT_SECTIONS = [
     items: [
       { type: 'breadcrumb', label: 'Breadcrumb', icon: '≫' },
       { type: 'card', label: 'Card', icon: '▭' },
-      { type: 'cell', label: 'Cell', icon: '▢' },
-      { type: 'column', label: 'Column', icon: '▮' },
-      { type: 'column-group', label: 'Column group', icon: '▦' },
       { type: 'container', label: 'Container', icon: '▢' },
-      { type: 'header-cell', label: 'Header cell', icon: '▣' },
       { type: 'repeater', label: 'Repeater', icon: '⟲' },
-      { type: 'tab', label: 'Tab', icon: '▤' },
-      { type: 'table', label: 'Table', icon: '▤' },
       { type: 'wizard', label: 'Wizard', icon: '①②' },
-      { type: 'wizard-step', label: 'Wizard step', icon: '①' },
-      { type: 'layout', label: 'Layout Grid', icon: '▦' }
+      { type: 'layout', label: 'Layout Grid', icon: '▦' },
+      { type: 'data-grid',     label: 'Data Grid',     icon: '🗃️' },
+      { type: 'excel-upload', label: 'Excel Upload',  icon: '📊' }
+    ]
+  },
+  {
+    key: 'dialogs',
+    title: 'Dialogs',
+    items: [
+      { type: 'dialog', label: 'Dialog', icon: '🪟' },
+    ]
+  },
+
+  {
+    key: 'kpi',
+    title: 'KPI & Data Viz',
+    items: [
+      { type: 'kpi-metric',       label: 'Metric',          icon: '🔢' },
+      { type: 'kpi-trend',        label: 'Trend',           icon: '📈' },
+      { type: 'kpi-badge',        label: 'Badge',           icon: '🏷️' },
+      { type: 'kpi-status-dot',   label: 'Status Dot',      icon: '🔵' },
+      { type: 'kpi-icon-box',     label: 'Icon Box',        icon: '⬛' },
+      { type: 'kpi-rating',       label: 'Rating',          icon: '⭐' },
+      { type: 'kpi-countdown',    label: 'Countdown',       icon: '⏳' },
+      { type: 'kpi-avatar-group', label: 'Avatar Group',    icon: '👥' },
+      { type: 'kpi-tag-list',     label: 'Tag List',        icon: '🏷️' },
+      { type: 'kpi-chart',        label: 'Chart',           icon: '📊' },
+      { type: 'kpi-gauge',        label: 'Gauge',           icon: '🕐' },
+      { type: 'kpi-donut',        label: 'Donut Chart',     icon: '🍩' },
+      { type: 'kpi-funnel',       label: 'Funnel',          icon: '🔽' },
+      { type: 'kpi-bullet',       label: 'Bullet Chart',    icon: '📏' },
+      { type: 'kpi-comparison',   label: 'Comparison Bars', icon: '📊' },
+      { type: 'kpi-color-scale',  label: 'Color Scale',     icon: '🌈' },
+      { type: 'kpi-heatmap',      label: 'Heatmap Grid',    icon: '🔥' },
+      { type: 'kpi-timeline',     label: 'Timeline',        icon: '📅' },
+      { type: 'kpi-step-stage',   label: 'Step / Stage',    icon: '➡️' },
     ]
   },
-  // {
-  //   key: 'widgets',
-  //   title: 'Widgets',
-  //   items: []
-  // }
 ]

package/src/views/builder/sidebar/tabs/Components/printComponentCatalog.js

@@ -0,0 +1,81 @@
+/**
+ * Component catalog for the Print Layout builder.
+ * Only display/layout components that make sense in a printed document.
+ */
+export const PRINT_COMPONENT_SECTIONS = [
+  {
+    key: 'print-layout',
+    title: 'Layout',
+    items: [
+      { type: 'layout',    label: 'Layout Grid', icon: '▦' },
+      { type: 'container', label: 'Container',   icon: '▢' },
+      { type: 'card',      label: 'Card',        icon: '▭' },
+      { type: 'divider',   label: 'Divider',     icon: '➖' },
+    ]
+  },
+  {
+    key: 'print-text',
+    title: 'Text',
+    items: [
+      { type: 'header',     label: 'Header',      icon: '🔠' },
+      { type: 'label',      label: 'Label',       icon: '🏷️' },
+      { type: 'richtext',   label: 'Rich Text',   icon: '🖋️' },
+      { type: 'link',       label: 'Link',        icon: '🔗' },
+      { type: 'banner',     label: 'Banner',      icon: '🔔' },
+      { type: 'pageNumber', label: 'Page Number', icon: '#' },
+    ]
+  },
+  {
+    key: 'print-media',
+    title: 'Media',
+    items: [
+      { type: 'image',     label: 'Image',     icon: '🖼️' },
+      { type: 'qrcode',   label: 'QR Code',   icon: '🔲' },
+      { type: 'signature', label: 'Signature', icon: '✍️' },
+    ]
+  },
+  {
+    key: 'print-form',
+    title: 'Form Fields',
+    items: [
+      { type: 'checkbox', label: 'Checkbox',    icon: '☑️' },
+      { type: 'radio',    label: 'Radio Group', icon: '🔘' },
+    ]
+  },
+  {
+    key: 'print-data',
+    title: 'Data',
+    items: [
+      { type: 'reportViewer',      label: 'Report Viewer', icon: '🎚️' },
+      { type: 'data-table-viewer', label: 'Data Table',   icon: '⊞'  },
+      { type: 'treeView',          label: 'Tree View',    icon: '🌲'  },
+      { type: 'table',             label: 'Table',        icon: '▤'  },
+      { type: 'repeater',       label: 'Repeater',         icon: '⟲'  },
+      { type: 'progress-circle', label: 'Progress Circle', icon: '⭕' },
+      { type: 'progress-line',   label: 'Progress Line',   icon: '➖' },
+    ]
+  },
+
+  {
+    key: 'print-kpi',
+    title: 'KPI & Data Viz',
+    items: [
+      { type: 'kpi-metric',      label: 'Metric',         icon: '🔢' },
+      { type: 'kpi-trend',       label: 'Trend',          icon: '📈' },
+      { type: 'kpi-badge',       label: 'Badge',          icon: '🏷️' },
+      { type: 'kpi-status-dot',  label: 'Status Dot',     icon: '🔵' },
+      { type: 'kpi-icon-box',    label: 'Icon Box',       icon: '⬛' },
+      { type: 'kpi-chart',       label: 'Chart',          icon: '📊' },
+      { type: 'kpi-gauge',       label: 'Gauge',          icon: '🕐' },
+      { type: 'kpi-donut',       label: 'Donut Chart',    icon: '🍩' },
+      { type: 'kpi-bullet',      label: 'Bullet Chart',   icon: '📏' },
+      { type: 'kpi-comparison',  label: 'Comparison Bars',icon: '📊' },
+      { type: 'kpi-color-scale', label: 'Color Scale',    icon: '🌈' },
+      { type: 'kpi-heatmap',     label: 'Heatmap Grid',   icon: '🔥' },
+      { type: 'kpi-timeline',    label: 'Timeline',       icon: '📅' },
+      { type: 'kpi-tag-list',    label: 'Tag List',       icon: '🏷️' },
+      { type: 'kpi-avatar-group',label: 'Avatar Group',   icon: '👥' },
+      { type: 'kpi-step-stage',  label: 'Step / Stage',   icon: '➡️' },
+    ]
+  },
+]