class EmbedPreview { constructor() { this.params = this.parseURLParams(); this.config = this.getInitialConfig(); this.init(); } parseURLParams() { const urlParams = new URLSearchParams(window.location.search); const params = {}; for (const [key, value] of urlParams.entries()) { params[key] = decodeURIComponent(value); } return params; } getInitialConfig() { return { prompt: this.params.prompt || '', context: this.params.context ? this.params.context.split(',').map(c => c.trim()) : [], model: this.params.model || 'gpt-4o', mode: this.params.agentMode || 'chat', thinking: this.params.thinking === 'true', max: this.params.max === 'true', lightColor: this.params.lightColor || '#3b82f6', darkColor: this.params.darkColor || '#60a5fa', themeMode: this.params.themeMode || 'auto' }; } init() { this.setupColors(); this.setupElements(); this.render(); } setupColors() { const root = document.documentElement; // Determine if we should use dark mode let isDarkMode; if (this.config.themeMode === 'light') { isDarkMode = false; } else if (this.config.themeMode === 'dark') { isDarkMode = true; } else { // Auto mode - use system preference isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; } const baseColor = isDarkMode ? this.config.darkColor : this.config.lightColor; // Convert hex to RGB const hexToRgb = (hex) => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; }; // Convert RGB to HSL const rgbToHsl = (r, g, b) => { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break; case g: h = ((b - r) / d + 2) / 6; break; case b: h = ((r - g) / d + 4) / 6; break; } } return { h: h * 360, s: s * 100, l: l * 100 }; }; // Convert HSL to RGB const hslToRgb = (h, s, l) => { h /= 360; s /= 100; l /= 100; let r, g, b; if (s === 0) { r = g = b = l; } else { const hue2rgb = (p, q, t) => { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1/6) return p + (q - p) * 6 * t; if (t < 1/2) return q; if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; }; const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }; }; const rgb = hexToRgb(baseColor); if (rgb) { // Get HSL values for color manipulation const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); // Set primary color root.style.setProperty('--primary', `${rgb.r} ${rgb.g} ${rgb.b}`); // Generate color scheme based on primary color if (isDarkMode) { // Dark mode: darker backgrounds, lighter text const bgHsl = { ...hsl, s: Math.min(hsl.s * 0.15, 20), l: 8 }; const bg = hslToRgb(bgHsl.h, bgHsl.s, bgHsl.l); const mutedHsl = { ...hsl, s: Math.min(hsl.s * 0.2, 25), l: 15 }; const muted = hslToRgb(mutedHsl.h, mutedHsl.s, mutedHsl.l); const borderHsl = { ...hsl, s: Math.min(hsl.s * 0.25, 30), l: 20 }; const border = hslToRgb(borderHsl.h, borderHsl.s, borderHsl.l); root.style.setProperty('--background', `${bg.r} ${bg.g} ${bg.b}`); root.style.setProperty('--foreground', '248 250 252'); root.style.setProperty('--muted', `${muted.r} ${muted.g} ${muted.b}`); root.style.setProperty('--muted-foreground', '148 163 184'); root.style.setProperty('--border', `${border.r} ${border.g} ${border.b}`); } else { // Light mode: lighter backgrounds, darker text const bgHsl = { ...hsl, s: Math.min(hsl.s * 0.05, 5), l: 99 }; const bg = hslToRgb(bgHsl.h, bgHsl.s, bgHsl.l); const mutedHsl = { ...hsl, s: Math.min(hsl.s * 0.1, 10), l: 97 }; const muted = hslToRgb(mutedHsl.h, mutedHsl.s, mutedHsl.l); const borderHsl = { ...hsl, s: Math.min(hsl.s * 0.15, 15), l: 92 }; const border = hslToRgb(borderHsl.h, borderHsl.s, borderHsl.l); root.style.setProperty('--background', `${bg.r} ${bg.g} ${bg.b}`); root.style.setProperty('--foreground', '15 23 42'); root.style.setProperty('--muted', `${muted.r} ${muted.g} ${muted.b}`); root.style.setProperty('--muted-foreground', '100 116 139'); root.style.setProperty('--border', `${border.r} ${border.g} ${border.b}`); } // Set accent (slightly different from primary) const accentHsl = { ...hsl, l: Math.min(hsl.l + 10, 90) }; const accent = hslToRgb(accentHsl.h, accentHsl.s, accentHsl.l); root.style.setProperty('--accent', `${accent.r} ${accent.g} ${accent.b}`); } this.isDarkMode = isDarkMode; } setupElements() { const copyButton = document.getElementById('copy-button'); if (copyButton) { copyButton.addEventListener('click', () => this.handleCopy()); } } render() { this.renderContextPills(); this.renderPromptText(); this.renderSettingsPills(); } renderContextPills() { const container = document.getElementById('context-pills'); if (!container) return; container.innerHTML = ''; this.config.context.forEach(context => { const pill = this.createContextPill(context); container.appendChild(pill); }); } createContextPill(context) { const pill = document.createElement('div'); pill.className = 'px-2 py-0.5 rounded-lg text-[0.65rem] font-medium animate-slide-in flex items-center gap-1'; let icon = ''; // Use dynamic color classes for all pills if (this.isDarkMode) { pill.className += ' bg-dynamic-primary/10 text-dynamic-foreground border border-dynamic-primary/30'; } else { pill.className += ' bg-dynamic-primary/0 text-dynamic-foreground border border-dynamic-primary/20'; } if (context.startsWith('@')) { // @mentions - just show the text pill.innerHTML = '' + context + ''; } else if (context.startsWith('http://') || context.startsWith('https://')) { // Web URLs show world icon icon = ''; pill.innerHTML = icon + '' + context + ''; } else if (context.startsWith('#')) { // Any hashtag context shows image icon icon = ''; // Remove hash from display pill.innerHTML = icon + '' + context.substring(1) + ''; } else if (context.includes('.')) { // File context (contains a dot) icon = ''; pill.innerHTML = icon + '' + context + ''; } else { // Generic context pill.innerHTML = '' + context + ''; } return pill; } renderPromptText() { const promptText = document.getElementById('prompt-text'); const placeholder = document.getElementById('prompt-placeholder'); if (!promptText || !placeholder) return; if (this.config.prompt) { promptText.innerHTML = this.highlightMentions(this.config.prompt); placeholder.style.display = 'none'; } else { promptText.innerHTML = ''; placeholder.style.display = 'block'; } } renderSettingsPills() { const container = document.getElementById('settings-pills'); if (!container) return; container.innerHTML = ''; // Mode pill (first) const modePill = this.createSettingPill(this.capitalizeFirst(this.config.mode), 'mode'); container.appendChild(modePill); // Model pill (second) const modelPill = this.createSettingPill(this.config.model, 'model'); container.appendChild(modelPill); // Thinking pill (if enabled) if (this.config.thinking) { const thinkingPill = this.createSettingPill('Thinking', 'thinking'); container.appendChild(thinkingPill); } // MAX pill (if enabled) if (this.config.max) { const maxPill = this.createSettingPill('MAX', 'max'); container.appendChild(maxPill); } } createSettingPill(text, type) { const pill = document.createElement('div'); pill.className = 'rounded-full text-xs font-medium flex items-center gap-1.5'; let icon = ''; // Use different styling based on pill type if (type === 'mode') { // Mode pill keeps the background if (this.isDarkMode) { pill.className += ' px-3 py-2 bg-dynamic-primary/20 text-dynamic-foreground border border-dynamic-primary/30'; } else { pill.className += ' px-3 py-2 bg-dynamic-primary/10 text-dynamic-foreground border border-dynamic-primary/20'; } } else { // Model, thinking, and max pills only have text color pill.className += ' pl-1 text-dynamic-primary'; } switch (type) { case 'model': pill.innerHTML = '' + text + ''; break; case 'mode': // Add icon based on mode type const modeType = text.toLowerCase(); switch (modeType) { case 'agent': icon = ''; break; case 'chat': icon = ''; break; case 'manual': icon = ''; break; case 'cloud': icon = ''; break; default: icon = ''; } pill.innerHTML = icon + '' + text + ''; break; case 'thinking': // Brain icon for thinking mode icon = ''; pill.innerHTML = icon + '' + text + ''; break; case 'max': // Lightning bolt icon for MAX mode icon = ''; pill.innerHTML = icon + '' + text + ''; break; } return pill; } highlightMentions(text) { return text.replace(/@(\w+)/g, '@$1'); } capitalizeFirst(str) { return str.charAt(0).toUpperCase() + str.slice(1); } async handleCopy() { if (!this.config.prompt) { this.showNotification('No prompt to copy'); return; } await this.copyToClipboard(this.config.prompt); this.showNotification('Prompt copied to clipboard!'); } async copyToClipboard(text) { if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(text); } else { // Fallback const textArea = document.createElement('textarea'); textArea.value = text; textArea.style.position = 'fixed'; textArea.style.left = '-999999px'; textArea.style.top = '-999999px'; document.body.appendChild(textArea); textArea.focus(); textArea.select(); document.execCommand('copy'); textArea.remove(); } } showNotification(message) { const notification = document.getElementById('notification'); if (!notification) return; notification.textContent = message; notification.classList.remove('opacity-0'); notification.classList.add('opacity-100'); setTimeout(() => { notification.classList.remove('opacity-100'); notification.classList.add('opacity-0'); }, 2000); } } // Initialize when DOM is ready document.addEventListener('DOMContentLoaded', () => { window.embedPreview = new EmbedPreview(); }); // Expose API for external usage window.EmbedPreviewAPI = { getPrompt: () => window.embedPreview?.config.prompt, setPrompt: (prompt) => { if (window.embedPreview) { window.embedPreview.config.prompt = prompt; window.embedPreview.renderPromptText(); } }, updateConfig: (config) => { if (window.embedPreview) { Object.assign(window.embedPreview.config, config); window.embedPreview.render(); } } };