/* AI Builder — Kai chat + live preview + inspector */ const INITIAL_DEF = { title: 'Revenue Pulse', subtitle: 'Weekly revenue with region breakdown', blocks: [ { id: 'b1', type: 'header', bound: true, props: { title: 'Revenue Pulse', subtitle: 'Weekly revenue with region breakdown' } }, { id: 'b2', type: 'filters', bound: false, props: { items: [{ label: 'Region', value: 'All regions' }, { label: 'Period', value: 'Last 13 weeks' }] } }, { id: 'b3', type: 'kpis', bound: false, props: { items: [ { label: 'Gross revenue', value: null, trend: null }, { label: 'Orders', value: null, trend: null }, { label: 'AOV', value: null, trend: null }, { label: 'Refund rate', value: null, trend: null }, ] } }, { id: 'b4', type: 'chart', bound: false, props: { title: 'Revenue by week', sub: 'Last 13 weeks · stacked by region' } }, { id: 'b5', type: 'table', bound: false, props: { title: 'Top customers', sub: 'By revenue this period' } }, ], }; const TEMPLATE_DEF = { ...INITIAL_DEF, blocks: INITIAL_DEF.blocks.map((b) => ({ ...b, bound: false, source: undefined })), }; const BLANK_DEF = { title: 'Untitled App', subtitle: 'Start from code or ask Kai to scaffold the first version.', blocks: [], }; const DRAFT_PROMPT = 'Build a weekly revenue dashboard with a region filter and a YoY comparison chart. Use snowflake.prod.orders.'; const DRAFT_DEF = { title: 'Drafting your page…', subtitle: 'Kai is composing the layout.', blocks: [], }; const DRAFT_STEPS = [ { block: { id: 'b1', type: 'header', bound: true, props: { title: 'Revenue Pulse', subtitle: 'Weekly revenue with region breakdown' } }, message: 'Starting with the hero title and subtitle.', }, { block: { id: 'b2', type: 'filters', bound: false, props: { items: [{ label: 'Region', value: 'All regions' }, { label: 'Period', value: 'Last 13 weeks' }] } }, message: 'Added the filter bar for region and period.', }, { block: { id: 'b3', type: 'kpis', bound: false, props: { items: [ { label: 'Gross revenue', value: null, trend: null }, { label: 'Orders', value: null, trend: null }, { label: 'AOV', value: null, trend: null }, { label: 'Refund rate', value: null, trend: null }, ] } }, message: 'Building the KPI row to surface key metrics.', }, { block: { id: 'b4', type: 'chart', bound: false, props: { title: 'Revenue by week', sub: 'Last 13 weeks · stacked by region' } }, message: 'Drafted the main revenue trend chart.', }, { block: { id: 'b5', type: 'table', bound: false, props: { title: 'Top customers', sub: 'By revenue this period' } }, message: 'Adding the top customers table to round out the page.', }, ]; const SOURCE_OPTIONS = [ { id: 'snowflake.prod.orders', label: 'snowflake.prod.orders', desc: 'Order-level revenue and transactions.' }, { id: 'events.prod.pageviews', label: 'events.prod.pageviews', desc: 'User engagement and session behavior.' }, { id: 'sales.prod.invoices', label: 'sales.prod.invoices', desc: 'Invoice lines and customer performance.' }, ]; const PROJECT_SLUG = 'active-project'; const TAKEN_URL_SLUGS = new Set(['revenue-pulse', 'marketing-mix', 'supply-chain-risk']); const ENTRY_TEMPLATES = [ { id: 'executive-dashboard', label: 'Executive dashboard', desc: 'Headline KPIs, trends, and summary narrative for leadership reviews.', prompt: 'Build an executive dashboard with key KPIs, trends, and a short performance summary.', preview: 'dashboard', category: 'Dashboard' }, { id: 'internal-tool', label: 'Internal tool', desc: 'Operational table views with actions, filters, and task-focused workflows.', prompt: 'Create an internal operations tool with filters, table actions, and a review workflow.', preview: 'table', category: 'Operations' }, { id: 'simulator', label: 'Simulator', desc: 'Scenario inputs and projected outcomes for what-if analysis.', prompt: 'Build a simulator with adjustable inputs, scenario comparisons, and projected outcomes.', preview: 'simulator', category: 'Analysis' }, { id: 'kpi-board', label: 'KPI board', desc: 'Dense scorecard layout for business metrics and performance checks.', prompt: 'Create a KPI board with headline metrics, trend charts, and exception callouts.', preview: 'kpi', category: 'Dashboard' }, { id: 'approval-flow', label: 'Approval flow', desc: 'Requests, status tracking, and reviewer actions in one guided app.', prompt: 'Build an approval flow app with request details, status tracking, and reviewer actions.', preview: 'approval', category: 'Operations' }, { id: 'ai-app', label: 'AI app', desc: 'Prompt-centric experience with generated insights and suggested next steps.', prompt: 'Create an AI-powered app that summarizes records, flags anomalies, and recommends next steps.', preview: 'ai', category: 'AI' }, ]; const createBuildProgress = () => ({ current: 0, total: DRAFT_STEPS.length, steps: DRAFT_STEPS.map((step, index) => ({ label: step.message, status: index === 0 ? 'active' : 'pending', })), }); const initialMessages = [ { role: 'user', text: 'Build a weekly revenue dashboard with a region filter and a YoY comparison chart. Use snowflake.prod.orders.' }, { role: 'kai', text: 'Drafted a 5-block page. Chart is unbound — I can wire it to orders.amount × week(order_date) once you confirm.', action: { title: 'Created page', diff: [{ op: 'add', path: 'header' }, { op: 'add', path: 'filters' }, { op: 'add', path: 'kpis[4]' }, { op: 'add', path: 'chart' }, { op: 'add', path: 'table' }] } }, ]; const CODE_EXPLORER_FILES = [ { id: 'app-definition.json', label: 'app-definition.json', section: 'root' }, { id: 'package.json', label: 'package.json', section: 'root' }, { id: 'src/index.ts', label: 'index.ts', section: 'src' }, { id: 'src/components/chart.tsx', label: 'chart.tsx', section: 'src/components' }, { id: 'src/components/table.tsx', label: 'table.tsx', section: 'src/components' }, { id: 'src/components/filters.tsx', label: 'filters.tsx', section: 'src/components' }, ]; const CODE_FILE_SNIPPETS = { 'package.json': '{\n "name": "data-app",\n "private": true,\n "scripts": { "start": "keboola-app dev" }\n}', 'src/index.ts': 'import { mountApp } from "./app";\n\nmountApp();\n', 'src/components/chart.tsx': 'export const RevenueChart = () => {\n return null;\n};\n', 'src/components/table.tsx': 'export const TopCustomersTable = () => {\n return null;\n};\n', 'src/components/filters.tsx': 'export const FiltersBar = () => {\n return null;\n};\n', }; const Builder = ({ navigate, appId }) => { const [rawAppId, builderQuery = ''] = String(appId || '').split('?'); const requestedInspectTab = React.useMemo(() => { const params = new URLSearchParams(builderQuery); return params.get('inspect') === 'data' ? 'data' : 'tree'; }, [builderQuery]); const [selected, setSelected] = React.useState('b4'); const [selectedBlockIds, setSelectedBlockIds] = React.useState(['b4']); const [device, setDevice] = React.useState('desktop'); const isNewEntry = rawAppId === 'new' || rawAppId === 'new:entry'; const isScratch = rawAppId && rawAppId.startsWith('new:scratch'); const isNewAi = rawAppId && rawAppId.startsWith('new:ai'); const isTemplate = rawAppId && rawAppId.startsWith('new:template'); const [builderStage, setBuilderStage] = React.useState(isNewEntry ? 'entry' : 'standard'); const [view, setView] = React.useState(isScratch ? 'code' : 'preview'); const [codePreviewCollapsed, setCodePreviewCollapsed] = React.useState(false); const [activeCodeFile, setActiveCodeFile] = React.useState('app-definition.json'); const [explorerOpen, setExplorerOpen] = React.useState({ root: true, src: true, components: true }); const [tab, setTab] = React.useState(requestedInspectTab); const [treePageOpen, setTreePageOpen] = React.useState(true); const [treeBlocksOpen, setTreeBlocksOpen] = React.useState(true); const initialDef = isNewEntry ? BLANK_DEF : (isScratch ? BLANK_DEF : (isNewAi ? DRAFT_DEF : (isTemplate ? TEMPLATE_DEF : INITIAL_DEF))); const [def, setDef] = React.useState(initialDef); const [messages, setMessages] = React.useState(isNewAi ? [ { role: 'user', text: DRAFT_PROMPT }, { role: 'kai', text: 'Which data source should I use? Pick one to start the app.', action: null }, ] : (isScratch ? [{ role: 'kai', text: 'Blank code editor ready. Ask Kai to scaffold the first blocks, or author the app definition manually.', action: { title: 'Opened blank editor', diff: [{ op: 'add', path: 'app definition = empty' }] } }] : (isTemplate ? [{ role: 'kai', text: 'Template loaded. You can customize the layout, connect data, or switch to code view.', action: { title: 'Loaded template', diff: [{ op: 'add', path: 'template blocks' }] } }] : (isNewEntry ? [] : initialMessages)))); const [input, setInput] = React.useState(''); const [selectedSources, setSelectedSources] = React.useState((isNewAi || isTemplate || isNewEntry) ? [] : ['snowflake.prod.orders']); const [selectionStage, setSelectionStage] = React.useState(isNewAi ? 'source' : 'ready'); const [kaiSuggestedSources, setKaiSuggestedSources] = React.useState([]); const [kaiSelectedSourceIds, setKaiSelectedSourceIds] = React.useState([]); const [pendingKaiBuild, setPendingKaiBuild] = React.useState(null); const [buildStepsOpen, setBuildStepsOpen] = React.useState(true); const [generating, setGenerating] = React.useState(false); const [genBlockId, setGenBlockId] = React.useState(null); const [showBinding, setShowBinding] = React.useState(false); const [bindingTarget, setBindingTarget] = React.useState(null); const [showAppSettings, setShowAppSettings] = React.useState(false); const [showGitConnectModal, setShowGitConnectModal] = React.useState(false); const [gitConnectError, setGitConnectError] = React.useState(''); const [gitConnectDraft, setGitConnectDraft] = React.useState({ repositoryUrl: '', branch: 'main', provider: 'GitHub', }); const [settingsErrors, setSettingsErrors] = React.useState({}); const [publishHint, setPublishHint] = React.useState(''); const [appSettings, setAppSettings] = React.useState({ name: '', urlSlug: '', visibility: 'Private', description: '', isPublished: false, }); const [codeViewHeight, setCodeViewHeight] = React.useState(null); const [entryPrompt, setEntryPrompt] = React.useState(''); const [entrySelectedSourceIds, setEntrySelectedSourceIds] = React.useState([]); const [isPromoting, setIsPromoting] = React.useState(false); const [transitionNote, setTransitionNote] = React.useState(''); const [templateFilterCategory, setTemplateFilterCategory] = React.useState(null); const draftTimers = React.useRef([]); const promoteTimerRef = React.useRef(null); const streamRef = React.useRef(null); const codeEditorRef = React.useRef(null); const codeModeLayoutRef = React.useRef(null); const codeViewRef = React.useRef(null); const resizeStateRef = React.useRef(null); const MIN_CODE_HEIGHT = 200; const MIN_PREVIEW_HEIGHT = 180; const LAYOUT_GAP_AND_SPLITTER = 22; const [codeText, setCodeText] = React.useState(() => JSON.stringify(initialDef, null, 2)); const isEditingAppDefinition = activeCodeFile === 'app-definition.json'; const activeCodeFileText = isEditingAppDefinition ? codeText : (CODE_FILE_SNIPPETS[activeCodeFile] || ''); React.useEffect(() => { if (streamRef.current) streamRef.current.scrollTop = streamRef.current.scrollHeight; }, [messages, generating]); React.useEffect(() => { if (!selected) { setSelectedBlockIds([]); return; } setSelectedBlockIds(prev => (prev.includes(selected) ? prev : [selected])); }, [selected]); React.useEffect(() => { const availableIds = new Set(def.blocks.map(b => b.id)); setSelectedBlockIds(prev => prev.filter(id => availableIds.has(id))); setSelected(prev => (prev && availableIds.has(prev) ? prev : null)); }, [def.blocks]); React.useEffect(() => { setTab(requestedInspectTab); }, [requestedInspectTab, rawAppId]); React.useEffect(() => { setCodeText(JSON.stringify(def, null, 2)); }, [def]); React.useEffect(() => { if (view !== 'code' || !selected || !codeEditorRef.current) return; const marker = `"id": "${selected}"`; const idx = codeText.indexOf(marker); if (idx === -1) return; codeEditorRef.current.focus(); codeEditorRef.current.setSelectionRange(idx, idx + marker.length); }, [selected, view, codeText]); React.useEffect(() => { return () => { draftTimers.current.forEach(clearTimeout); if (promoteTimerRef.current) clearTimeout(promoteTimerRef.current); }; }, []); React.useEffect(() => { return () => { document.body.style.removeProperty('cursor'); document.body.style.removeProperty('user-select'); }; }, []); const onCodeResizeMove = React.useCallback((e) => { const resizeState = resizeStateRef.current; if (!resizeState) return; const layoutEl = codeModeLayoutRef.current; if (!layoutEl) return; const minCodeHeight = MIN_CODE_HEIGHT; const minPreviewHeight = codePreviewCollapsed ? 0 : MIN_PREVIEW_HEIGHT; const maxCodeHeight = Math.max(minCodeHeight, layoutEl.clientHeight - minPreviewHeight - LAYOUT_GAP_AND_SPLITTER); const delta = resizeState.startY - e.clientY; const nextHeight = Math.min(maxCodeHeight, Math.max(minCodeHeight, resizeState.startHeight + delta)); setCodeViewHeight(nextHeight); }, [codePreviewCollapsed, LAYOUT_GAP_AND_SPLITTER, MIN_CODE_HEIGHT, MIN_PREVIEW_HEIGHT]); React.useEffect(() => { if (view !== 'code' || codePreviewCollapsed || codeViewHeight == null) return; const layoutEl = codeModeLayoutRef.current; if (!layoutEl) return; const maxCodeHeight = Math.max(MIN_CODE_HEIGHT, layoutEl.clientHeight - MIN_PREVIEW_HEIGHT - LAYOUT_GAP_AND_SPLITTER); if (codeViewHeight > maxCodeHeight) setCodeViewHeight(maxCodeHeight); }, [codePreviewCollapsed, codeViewHeight, view, LAYOUT_GAP_AND_SPLITTER, MIN_CODE_HEIGHT, MIN_PREVIEW_HEIGHT]); const stopCodeResize = React.useCallback(() => { resizeStateRef.current = null; window.removeEventListener('mousemove', onCodeResizeMove); window.removeEventListener('mouseup', stopCodeResize); document.body.style.removeProperty('cursor'); document.body.style.removeProperty('user-select'); }, [onCodeResizeMove]); const startCodeResize = React.useCallback((e) => { if (codePreviewCollapsed) return; if (!codeViewRef.current) return; e.preventDefault(); resizeStateRef.current = { startY: e.clientY, startHeight: codeViewRef.current.offsetHeight, }; document.body.style.cursor = 'row-resize'; document.body.style.userSelect = 'none'; window.addEventListener('mousemove', onCodeResizeMove); window.addEventListener('mouseup', stopCodeResize); }, [codePreviewCollapsed, onCodeResizeMove, stopCodeResize]); const updateLatestBuildMessage = (updater) => { setMessages(prev => { const next = [...prev]; for (let i = next.length - 1; i >= 0; i -= 1) { if (next[i].buildProgress) { next[i] = updater(next[i]); break; } } return next; }); }; const startDraftBuild = (sourceId) => { draftTimers.current.forEach(clearTimeout); draftTimers.current = []; setDef(DRAFT_DEF); setSelected(null); setGenerating(true); const selectedSource = sourceId || selectedSources[0] || 'snowflake.prod.orders'; DRAFT_STEPS.forEach((step, index) => { draftTimers.current.push(setTimeout(() => { const boundStepBlock = { ...step.block, bound: true, source: selectedSource }; setDef(d => ({ ...d, blocks: [...d.blocks, boundStepBlock] })); updateLatestBuildMessage((msg) => ({ ...msg, text: `Building page... ${index + 1}/${DRAFT_STEPS.length}`, buildProgress: { ...msg.buildProgress, current: index + 1, steps: msg.buildProgress.steps.map((s, sIdx) => ({ ...s, status: sIdx < index + 1 ? 'done' : sIdx === index + 1 ? 'active' : 'pending', })), }, })); if (index === DRAFT_STEPS.length - 1) { draftTimers.current.push(setTimeout(() => { setDef(d => ({ ...d, title: 'Revenue Pulse', subtitle: 'Weekly revenue with region breakdown', })); setSelected('b1'); updateLatestBuildMessage((msg) => ({ ...msg, text: 'Draft complete. The page is ready to review in preview mode.', action: { title: 'Drafted page', diff: DRAFT_STEPS.map((s, i) => ({ op: 'add', path: `blocks[${i}] = ${s.block.type}` })), }, buildProgress: { ...msg.buildProgress, current: DRAFT_STEPS.length, steps: msg.buildProgress.steps.map((s) => ({ ...s, status: 'done' })), }, })); setGenerating(false); }, 900)); } }, 900 + index * 900)); }); }; const chooseSource = (source) => { setSelectedSources([source.id]); setSelectionStage('ready'); setBuildStepsOpen(true); setMessages(m => [ ...m, { role: 'user', text: `Use ${source.label}` }, { role: 'kai', text: `Using ${source.label}. Building your page now...`, action: null, buildProgress: createBuildProgress(), }, ]); startDraftBuild(source.id); }; const handlePreviewBlockSelection = (blockId) => { if (selectedBlockIds.includes(blockId)) { const next = selectedBlockIds.filter(id => id !== blockId); setSelectedBlockIds(next); if (selected === blockId) setSelected(next[next.length - 1] || null); return; } const next = [...selectedBlockIds, blockId]; setSelectedBlockIds(next); setSelected(blockId); }; const promoteToStandard = ({ note } = {}) => { if (promoteTimerRef.current) clearTimeout(promoteTimerRef.current); setTransitionNote(note || 'Kai is setting up your workspace...'); setIsPromoting(true); setBuilderStage('transition'); promoteTimerRef.current = setTimeout(() => { setBuilderStage('standard'); setIsPromoting(false); setTransitionNote(''); }, 320); }; const suggestDataSourcesForInput = (inputText) => { const text = (inputText || '').toLowerCase(); const keywords = { finance: ['revenue', 'sales', 'finance', 'order', 'invoice', 'kpi', 'executive', 'dashboard'], marketing: ['traffic', 'events', 'campaign', 'conversion', 'attribution', 'engagement'], crm: ['customer', 'lead', 'opportunit', 'pipeline', 'account'], }; const score = (sourceId) => { const id = sourceId.toLowerCase(); let points = 0; if (keywords.finance.some(k => text.includes(k) && (id.includes('orders') || id.includes('invoice')))) points += 3; if (keywords.marketing.some(k => text.includes(k) && (id.includes('events') || id.includes('pageview')))) points += 3; if (keywords.crm.some(k => text.includes(k) && (id.includes('customer') || id.includes('salesforce') || id.includes('opportunit')))) points += 3; if (text.includes('table') || text.includes('data') || text.includes('report')) points += 1; return points; }; const ranked = DATA_SOURCES .map(source => ({ source, points: score(source.id) })) .sort((a, b) => b.points - a.points) .map(item => item.source); return ranked.slice(0, 4); }; const startKaiDataSuggestion = ({ type, prompt, template }) => { const hintText = type === 'template' ? `${template.label} ${template.prompt}` : prompt; const suggestions = suggestDataSourcesForInput(hintText); promoteToStandard({ note: type === 'template' ? `Kai is preparing ${template.label}...` : 'Kai is preparing your first draft...' }); setView('preview'); setSelectionStage('suggest'); setKaiSuggestedSources(suggestions); setKaiSelectedSourceIds([]); setPendingKaiBuild({ type, prompt, template }); setInput(''); setMessages(m => [ ...m, { role: 'user', text: type === 'template' ? `Use ${template.label} template` : prompt }, { role: 'kai', text: type === 'template' ? `I found data sources relevant for the ${template.label} template. Select which ones to use before I continue.` : 'I found relevant data sources for your prompt. Select which ones to use before I continue.', action: null, }, ]); }; const confirmKaiSuggestedDataSelection = (skip = false) => { if (!pendingKaiBuild) return; const chosenIds = skip ? [] : kaiSelectedSourceIds; if (pendingKaiBuild.type === 'template' && pendingKaiBuild.template) { completeTemplateBuild(pendingKaiBuild.template, chosenIds); } else if (pendingKaiBuild.type === 'prompt' && pendingKaiBuild.prompt) { completePromptBuild(pendingKaiBuild.prompt, chosenIds); } setPendingKaiBuild(null); setKaiSuggestedSources([]); setKaiSelectedSourceIds([]); }; const openPromptBuild = (prompt, sourceIds = []) => { const trimmedPrompt = (prompt || '').trim(); if (!trimmedPrompt) return; const resolvedSourceIds = Array.isArray(sourceIds) ? sourceIds : (sourceIds ? [sourceIds] : []); if (resolvedSourceIds.length > 0) { completePromptBuild(trimmedPrompt, resolvedSourceIds); return; } startKaiDataSuggestion({ type: 'prompt', prompt: trimmedPrompt }); }; const completePromptBuild = (prompt, sourceIds) => { const primarySourceId = sourceIds[0] || null; promoteToStandard({ note: 'Kai is turning your prompt into a first draft...' }); setView('preview'); setSelectionStage('ready'); setBuildStepsOpen(true); setSelectedSources(sourceIds); setEntryPrompt(prompt); setInput(''); setMessages(m => [ ...m, { role: 'user', text: sourceIds.length > 1 ? `Use ${sourceIds.join(', ')}.` : sourceIds.length === 1 ? `Use ${sourceIds[0]}.` : 'Skip data for now.' }, { role: 'kai', text: sourceIds.length > 0 ? `Using ${sourceIds.join(', ')}. Building your page now...` : 'Drafting your page now without data.', action: null, buildProgress: createBuildProgress(), }, ]); startDraftBuild(primarySourceId); }; const openTemplateBuild = (template) => { startKaiDataSuggestion({ type: 'template', template }); }; const completeTemplateBuild = (template, sourceIds) => { const nextDef = { ...TEMPLATE_DEF, title: template.label, subtitle: template.prompt, }; promoteToStandard({ note: `Kai is loading the ${template.label} template...` }); setView('preview'); setSelectionStage('ready'); setSelected('b1'); setDef(nextDef); setSelectedSources(sourceIds); setMessages(m => [ ...m, { role: 'user', text: sourceIds.length > 1 ? `Use ${sourceIds.join(', ')}.` : sourceIds.length === 1 ? `Use ${sourceIds[0]}.` : 'Load template as is.' }, { role: 'kai', text: `Loaded the ${template.label} template${sourceIds.length > 0 ? ` with ${sourceIds.length === 1 ? sourceIds[0] : sourceIds.length + ' sources'} selected` : ''}. You can refine the blocks, bind data, or edit in code view.`, action: { title: 'Loaded template', diff: [{ op: 'add', path: `${template.id} template` }] }, }, ]); }; const openScratchBuild = (mode, gitConfig = null) => { promoteToStandard({ note: mode === 'git' ? 'Kai is opening your repository workspace...' : 'Kai is opening a blank builder workspace...' }); setView('code'); setSelectionStage('ready'); setPendingKaiBuild(null); setKaiSuggestedSources([]); setKaiSelectedSourceIds([]); setSelected(null); setDef(BLANK_DEF); setSelectedSources(entrySelectedSourceIds); setMessages([ { role: 'kai', text: mode === 'git' ? `Git repository connected${gitConfig?.repositoryUrl ? ` (${gitConfig.repositoryUrl}${gitConfig.branch ? `#${gitConfig.branch}` : ''})` : ''}. The blank app definition is ready in code view.` : 'Blank code editor ready. Start from the app definition or ask Kai to scaffold the first version.', action: { title: mode === 'git' ? 'Connected Git repository' : 'Opened blank code editor', diff: [{ op: 'add', path: 'app definition = empty' }], }, }, ]); }; const openGitConnectModal = () => { setGitConnectError(''); setShowGitConnectModal(true); }; const connectGitRepository = (nextDraft) => { const repositoryUrl = (nextDraft.repositoryUrl || '').trim(); const branch = (nextDraft.branch || '').trim() || 'main'; const normalized = { ...nextDraft, repositoryUrl, branch }; if (!repositoryUrl) { setGitConnectError('Repository URL is required.'); return; } if (!/^https?:\/\/.+\/.+/.test(repositoryUrl)) { setGitConnectError('Enter a valid repository URL, for example https://github.com/org/repo.'); return; } setGitConnectError(''); setGitConnectDraft(normalized); setShowGitConnectModal(false); openScratchBuild('git', normalized); }; const selectedBlock = def.blocks.find(b => b.id === selected); const selectedBlocks = selectedBlockIds .map(id => def.blocks.find(b => b.id === id)) .filter(Boolean); const selectedBlockLabel = selectedBlock ? ({ header: 'Header', filters: 'Filter bar', kpis: 'KPI row', chart: 'Chart', table: 'Table', alert: 'Alert feed' }[selectedBlock.type] || selectedBlock.type) : null; const entrySelectedSources = DATA_SOURCES .filter(source => entrySelectedSourceIds.includes(source.id)) .map(source => ({ ...source, label: source.id })); const entrySelectedSource = entrySelectedSources[0] || null; const toggleEntrySource = (sourceId) => { setEntrySelectedSourceIds(prev => ( prev.includes(sourceId) ? prev.filter(id => id !== sourceId) : [...prev, sourceId] )); }; const appendEntryPromptToken = (token) => { setEntryPrompt(prev => (prev ? `${prev} ${token}` : token)); }; const submitEntryPrompt = () => { openPromptBuild(entryPrompt, entrySelectedSourceIds); }; const sendPrompt = (text) => { if (selectionStage === 'source' || selectionStage === 'suggest') return; if (!text.trim()) return; const userMsg = { role: 'user', text }; setMessages(m => [...m, userMsg]); setInput(''); setGenerating(true); setTimeout(() => { const t = text.toLowerCase(); if (t.includes('anomaly') || t.includes('alert')) { const newBlock = { id: 'b6', type: 'alert', bound: true, props: { title: 'Anomaly feed', rows: [ { t: 'Revenue − 18% vs forecast', sub: 'Week 42 · North region', sev: 'warn' }, { t: 'Orders spike + 312%', sub: 'Week 43 · bot traffic suspected', sev: 'info' }, ] } }; setGenBlockId('b6'); setDef(d => ({ ...d, blocks: [...d.blocks, newBlock] })); setMessages(m => [...m, { role: 'kai', text: 'Added an anomaly feed below the table. It\'s bound to the same source — I flagged rows where weekly revenue deviates > 2σ from a rolling forecast.', action: { title: 'Added anomaly feed', diff: [{ op: 'add', path: 'blocks[5] = alert' }] } }]); setTimeout(() => setGenBlockId(null), 1400); } else if (t.includes('yoy') || t.includes('year')) { setMessages(m => [...m, { role: 'kai', text: 'Updated the revenue chart to overlay the same week last year as a dashed line.', action: { title: 'Updated chart · YoY overlay', diff: [{ op: 'mod', path: 'chart.series[+prior_year]' }] } }]); } else if (t.includes('remove') || t.includes('delete') || t.includes('drop')) { setDef(d => ({ ...d, blocks: d.blocks.filter(b => b.id !== 'b5') })); setMessages(m => [...m, { role: 'kai', text: 'Removed the top customers table. You can undo from the chip.', action: { title: 'Removed block', diff: [{ op: 'rm', path: 'blocks[4] = table' }] } }]); } else { setMessages(m => [...m, { role: 'kai', text: 'I can do that. Which region column should I use — orders.region_code or customers.country?', action: null }]); } setGenerating(false); }, 900); }; const bindBlock = (blockId) => { setBindingTarget(blockId); setShowBinding(true); }; const completeBinding = (blockId, source) => { setDef(d => ({ ...d, blocks: d.blocks.map(b => b.id === blockId ? { ...b, bound: true, source } : b) })); setShowBinding(false); setMessages(m => [...m, { role: 'kai', text: `Bound ${blockId === 'b3' ? 'the KPI row' : blockId === 'b4' ? 'the chart' : 'the block'} to ${source}. Preview is live.`, action: { title: 'Data bound', diff: [{ op: 'mod', path: `${blockId}.source = ${source}` }] } }]); }; const bindAll = () => { const source = selectedSources[0] || 'snowflake.prod.orders'; setDef(d => ({ ...d, blocks: d.blocks.map(b => ({ ...b, bound: true, source: b.source || source })) })); setMessages(m => [...m, { role: 'kai', text: `Bound all blocks to ${source}. Preview reflects the latest data.`, action: { title: 'Bound all blocks', diff: [{ op: 'mod', path: `all blocks.source = ${source}` }] } }]); }; const reorderBlocks = React.useCallback((draggedId, targetId = null) => { if (!draggedId) return; if (targetId !== null && draggedId === targetId) return; setDef(d => { const fromIndex = d.blocks.findIndex(b => b.id === draggedId); if (fromIndex === -1) return d; const nextBlocks = [...d.blocks]; const [movedBlock] = nextBlocks.splice(fromIndex, 1); if (targetId === null) { nextBlocks.push(movedBlock); } else { const toIndex = nextBlocks.findIndex(b => b.id === targetId); if (toIndex === -1) return d; nextBlocks.splice(toIndex, 0, movedBlock); } return { ...d, blocks: nextBlocks }; }); }, []); const unboundCount = def.blocks.filter(b => !b.bound).length; const backTarget = rawAppId && !rawAppId.startsWith('new') ? `detail:${rawAppId}` : 'directory'; const activeApp = APPS.find(a => a.id === rawAppId); const builderAppName = appSettings.name || activeApp?.name || (builderStage !== 'standard' ? 'New app' : (isScratch ? 'New app (Scratch)' : isTemplate ? 'New app (Template)' : isNewAi ? 'New app (Kai draft)' : def.title)); const builderAppDesc = activeApp?.desc || (isScratch ? 'Blank app in code mode.' : isTemplate ? 'Template selected, ready to customize.' : isNewAi ? 'Kai-generated app in progress.' : 'Builder session'); const builderAppIcon = activeApp?.icon || 'DA'; const syncSelectionFromCursor = (value, cursorPos) => { const beforeCursor = value.slice(0, cursorPos); const idPattern = /"id"\s*:\s*"([^"]+)"/g; let match; let lastId = null; while ((match = idPattern.exec(beforeCursor)) !== null) { lastId = match[1]; } if (lastId && def.blocks.some(b => b.id === lastId)) { setSelected(lastId); } }; const handleCodeChange = (value, cursorPos) => { setCodeText(value); syncSelectionFromCursor(value, cursorPos); try { const parsed = JSON.parse(value); if (!parsed || !Array.isArray(parsed.blocks)) return; setDef(parsed); } catch { // Keep editing experience fluid while JSON is temporarily invalid. } }; React.useEffect(() => { const fallbackName = activeApp?.name || (builderStage !== 'standard' ? 'New app' : (def.title || 'New app')); setAppSettings(prev => ({ ...prev, name: prev.name || fallbackName, urlSlug: prev.urlSlug || fallbackName.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''), })); }, [activeApp, builderStage, def.title]); const validateSettings = React.useCallback((settings) => { const errors = {}; const name = (settings.name || '').trim(); const slug = (settings.urlSlug || '').trim(); if (!name) errors.name = 'App name is required.'; if (!slug) { errors.urlSlug = 'URL slug is required.'; } else { if (slug !== slug.toLowerCase()) errors.urlSlug = 'URL slug must be lowercase.'; else if (slug.includes(' ')) errors.urlSlug = 'URL slug cannot contain spaces.'; else if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(slug)) { errors.urlSlug = 'Use lowercase letters, numbers, and hyphens only.'; } else if (!appSettings.isPublished && TAKEN_URL_SLUGS.has(slug)) { errors.urlSlug = 'This URL is already in use. Choose another slug.'; } } return errors; }, [appSettings.isPublished]); const appUrl = `apps.keboola.io/${PROJECT_SLUG}/${appSettings.urlSlug || 'new-app'}`; const saveAppSettings = (nextSettings) => { const nextErrors = validateSettings(nextSettings); setSettingsErrors(nextErrors); if (Object.keys(nextErrors).length > 0) return; setAppSettings(nextSettings); if (nextSettings.name && builderStage === 'standard') { setDef(d => ({ ...d, title: nextSettings.name })); } setPublishHint(''); setShowAppSettings(false); }; const handlePublish = () => { if (builderStage !== 'standard') return; const nextErrors = validateSettings(appSettings); setSettingsErrors(nextErrors); if (Object.keys(nextErrors).length > 0) { setPublishHint('Fix App Settings before publishing.'); setShowAppSettings(true); return; } setAppSettings(prev => ({ ...prev, isPublished: true })); setPublishHint('Published successfully. URL is now locked.'); setMessages(m => [...m, { role: 'kai', text: `Published ${appSettings.name || 'app'} at ${appUrl}.`, action: { title: 'Published app', diff: [{ op: 'mod', path: 'app.status = published' }] } }]); }; return ( <>
/ navigate('directory')} style={{ cursor: 'pointer' }}>Data Apps / {builderAppName} {builderStage === 'standard' && ( 0 ? 'unbound' : 'draft'}> {unboundCount > 0 ? `${unboundCount} unbound` : 'Draft'} )}
Undo Redo <>
setShowAppSettings(true)}>App Settings Preview Publish
{publishHint && (
{publishHint}
)}
{builderStage !== 'entry' && (
K
Kai
{builderStage === 'transition' ? 'preparing workspace...' : (selectionStage === 'source' ? 'waiting for source' : selectionStage === 'suggest' ? 'waiting for data selection' : generating ? 'drafting changes…' : 'ready')}
{builderStage === 'transition' ? (
K
Kai
{transitionNote || 'Setting up your builder session...'}
) : (
{messages.map((m, i) => (
{m.role === 'kai' ? 'K' : 'JN'}
{m.role === 'kai' ? 'Kai' : 'You'} {i === 0 ? '14:02' : i === 1 ? '14:02' : 'just now'}
{m.text}
{m.buildProgress && (
{buildStepsOpen && (
{m.buildProgress.steps.map((step, stepIdx) => (
{step.status === 'done' ? '✓' : step.status === 'active' ? '…' : '○'} {step.label}
))}
)}
)} {m.action && (
{I.sparkle} {m.action.title}
{m.action.diff.map((d, j) => ( {d.op === 'rm' ? '−' : '+'} {d.path}{j < m.action.diff.length - 1 ? ' · ' : ''} ))}
)}
))} {generating && (
K
Kai
)}
)} {builderStage !== 'transition' && (
{selectionStage === 'source' && (
Pick a data source
{SOURCE_OPTIONS.map(source => ( ))}
)} {selectionStage === 'suggest' && (
Suggested data sources
{kaiSuggestedSources.map(source => ( ))}
confirmKaiSuggestedDataSelection(true)}>Skip for now confirmKaiSuggestedDataSelection(false)}> Use selected ({kaiSelectedSourceIds.length})
)}
{selectedBlocks.length > 0 && (
{selectedBlocks.map(block => ( {I.link} Context: {({ header: 'Header', filters: 'Filter bar', kpis: 'KPI row', chart: 'Chart', table: 'Table', alert: 'Alert feed' }[block.type] || block.type)} ({block.id}) ))}
)}