/*
* author: Yagnik Poshiya
* organization: Webbrains Technologies Private Limited
*/
import { useEffect, useMemo, useState } from 'react';
import {
createWidgetPreviewSessionViaApi,
type WidgetPreviewSessionApiResult,
} from '@/lib/connected-agents/connected-agents-api-client';
import { ensureWidgetThemeColor } from '@/lib/connected-agents/widget-theme-color-config';
type PreviewTheme = 'light' | 'dark';
function escapeHtml(value: string): string {
return String(value)
.replace(/&/g, '&')
.replace(//g, '>');
}
function escapeAttr(value: string): string {
return escapeHtml(value).replace(/"/g, '"').replace(/'/g, ''');
}
function encodeGreetingForAttr(value: string): string {
return value.replace(/\r\n/g, '\n').replace(/\n/g, '\\n');
}
function detectAppTheme(): PreviewTheme {
if (typeof document === 'undefined') return 'dark';
return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
}
export function buildWidgetPreviewSrcDoc(input: {
widgetScriptSrc: string;
previewToken: string;
projectAgentId: string;
snapshotImageUrl: string;
projectName: string;
agentName: string;
defaultGreetings: string | null;
widgetThemeColor: string;
projectWebsiteUrl: string | null;
theme: PreviewTheme;
}): string {
const greeting = String(input.defaultGreetings ?? '').trim();
const greetingAttr = greeting
? `\n data-default-greetings="${escapeAttr(encodeGreetingForAttr(greeting))}"`
: '';
const themeMode = input.theme;
const isDark = themeMode === 'dark';
const bgColor = isDark
? 'radial-gradient(120% 95% at 50% 6%, rgba(148,163,184,0.12) 0%, rgba(23,23,23,1) 62%), linear-gradient(180deg, #1b1b1b 0%, #111315 100%)'
: 'radial-gradient(120% 95% at 50% 6%, rgba(121,85,50,0.16) 0%, rgba(245,246,248,1) 62%), linear-gradient(180deg, #ffffff 0%, #eef2f7 100%)';
const labelColor = isDark ? 'rgba(226,232,240,0.82)' : 'rgba(30,41,59,0.74)';
const websiteUrl = String(input.projectWebsiteUrl ?? '').trim();
const hasWebsiteUrl = websiteUrl.length > 0;
const snapshotImageUrl = String(input.snapshotImageUrl ?? '').trim();
const snapshotLayer = hasWebsiteUrl
? '![Website preview snapshot fallback]()
'
: '';
const previewLoader =
'Loading live website preview...
';
const previewLabel =
'YOUR WEBSITE HERE
';
return `
${escapeHtml(input.projectName || 'Agent Engine')} - Widget Preview
${previewLoader}
${snapshotLayer}
${previewLabel}
`;
}
export type ConnectedAgentWidgetPreviewState = {
loading: boolean;
error: string | null;
srcDoc: string;
session: Extract | null;
};
export function useConnectedAgentWidgetPreview(input: {
projectId: string;
projectAgentId: string;
}): ConnectedAgentWidgetPreviewState {
const projectId = String(input.projectId ?? '').trim();
const projectAgentId = String(input.projectAgentId ?? '').trim();
const snapshotImageUrl =
projectId && projectAgentId
? `/api/projects/${encodeURIComponent(projectId)}/connected-agents/${encodeURIComponent(projectAgentId)}/widget-preview-snapshot`
: '';
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [session, setSession] = useState | null>(null);
const [theme, setTheme] = useState(() => detectAppTheme());
useEffect(() => {
if (typeof document === 'undefined') return;
const root = document.documentElement;
const observer = new MutationObserver(() => {
setTheme(detectAppTheme());
});
observer.observe(root, {
attributes: true,
attributeFilter: ['class', 'data-theme'],
});
return () => observer.disconnect();
}, []);
useEffect(() => {
let active = true;
async function run() {
if (!projectId || !projectAgentId) {
if (!active) return;
setError('Missing project agent id for preview.');
setLoading(false);
return;
}
setLoading(true);
setError(null);
const res = await createWidgetPreviewSessionViaApi(projectId, projectAgentId);
if (!active) return;
if (!res.ok) {
setError(res.message || 'Could not start widget preview.');
setSession(null);
setLoading(false);
return;
}
setSession(res);
setLoading(false);
}
void run();
return () => {
active = false;
};
}, [projectId, projectAgentId]);
const srcDoc = useMemo(() => {
if (!session) return '';
return buildWidgetPreviewSrcDoc({
widgetScriptSrc: session.widgetScriptSrc,
previewToken: session.previewToken,
projectAgentId: session.projectAgentId,
snapshotImageUrl,
projectName: session.projectName,
agentName: session.agentName,
defaultGreetings: session.defaultGreetings,
widgetThemeColor: session.widgetThemeColor,
projectWebsiteUrl: session.projectWebsiteUrl,
theme,
});
}, [session, theme, snapshotImageUrl]);
return { loading, error, srcDoc, session };
}