/* global React */ // Organization Settings — modal-style page with two cards: // 1. Company info — large textarea (everything about the company) // 2. Knowledge base — drag/drop upload (pdf, doc, docx, md, pptx) + preview const { useState: useOS, useEffect: useOE, useRef: useOR, useMemo: useOM } = React; const ALLOWED = { pdf: { mime: 'application/pdf', label: 'PDF', color: '#C65A42' }, doc: { mime: 'application/msword', label: 'DOC', color: '#2A5599' }, docx: { mime: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', label: 'DOCX', color: '#2A5599' }, md: { mime: 'text/markdown', label: 'MD', color: '#3F4A28' }, pptx: { mime: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', label: 'PPTX', color: '#B7791F' }, }; const ALLOWED_EXTS = Object.keys(ALLOWED); const ALLOWED_ACCEPT = ALLOWED_EXTS.map(e => '.' + e).join(','); function fmtBytes(n) { if (n == null || isNaN(n)) return '—'; if (n < 1024) return `${n} B`; if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`; return `${(n / 1024 / 1024).toFixed(2)} MB`; } function fmtDate(iso) { if (!iso) return '—'; try { const d = new Date(iso); return d.toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }); } catch { return iso; } } function extFromName(name) { const m = String(name || '').toLowerCase().match(/\.([a-z0-9]+)$/); return m ? m[1] : ''; } // Reads the JWT the auth flow stores in localStorage so /api/orgs/:id/settings // (which requireAuths) accepts our requests. Returns an empty object when // nothing is stored so the caller can spread it unconditionally. function osAuthHeaders() { let token = null; try { token = localStorage.getItem('pr.token'); } catch {} return token ? { Authorization: `Bearer ${token}` } : {}; } function OrgSettings({ orgId, orgName, onClose, onSaved, orgPicker }) { // orgPicker (super-admin only): { orgs: [{id,name}], onChange: (newId) => void } // When provided, the header renders a dropdown to switch between orgs in place. const [info, setInfo] = useOS(''); const [files, setFiles] = useOS([]); const [brand, setBrand] = useOS([]); const [loading, setLoading] = useOS(true); const [savingInfo, setSavingInfo] = useOS(false); const [savedFlash, setSavedFlash] = useOS(false); const [error, setError] = useOS(''); const [dragOver, setDragOver] = useOS(false); const [uploading, setUploading] = useOS(false); const [brandDragOver, setBrandDragOver] = useOS(false); const [brandUploading, setBrandUploading] = useOS(false); const [brandPreview, setBrandPreview] = useOS(null); const [activeFile, setActiveFile] = useOS(null); const [activePreview, setActivePreview] = useOS({ url: null, kind: null, error: null }); const fileInputRef = useOR(null); const brandInputRef = useOR(null); // Initial load useOE(() => { let cancelled = false; (async () => { try { const r = await fetch(`/api/orgs/${encodeURIComponent(orgId)}/settings`, { headers: { ...osAuthHeaders() }, }); const d = await r.json().catch(() => ({})); if (cancelled) return; setInfo(d?.settings?.info || ''); setFiles(d?.settings?.files || []); setBrand(d?.settings?.brand || []); } catch (e) { if (!cancelled) setError(String(e?.message || e)); } finally { if (!cancelled) setLoading(false); } })(); return () => { cancelled = true; }; }, [orgId]); // Auto-select first file for preview when files change useOE(() => { if (!activeFile && files.length) setActiveFile(files[0]); if (activeFile && !files.find(f => f.id === activeFile.id)) { setActiveFile(files[0] || null); } }, [files]); // Build preview when activeFile changes useOE(() => { setActivePreview({ url: null, kind: null, error: null }); if (!activeFile) return; const ext = activeFile.ext || extFromName(activeFile.name); if (!activeFile.dataUrl) { setActivePreview({ url: null, kind: ext, error: 'No preview available — file content was not stored.' }); return; } if (ext === 'pdf') { setActivePreview({ url: activeFile.dataUrl, kind: 'pdf', error: null }); } else if (ext === 'md') { // Decode the data URL → text try { const b64 = activeFile.dataUrl.split(',', 2)[1] || ''; const text = decodeURIComponent(escape(atob(b64))); setActivePreview({ url: text, kind: 'md', error: null }); } catch (e) { setActivePreview({ url: null, kind: 'md', error: 'Could not decode markdown.' }); } } else { // doc/docx/pptx — no in-browser preview, show metadata + download setActivePreview({ url: activeFile.dataUrl, kind: ext, error: null }); } }, [activeFile && activeFile.id]); // Saves company_info and returns whether the save succeeded. Used by the // Done button so we only close on success. const saveInfo = async () => { setSavingInfo(true); setError(''); try { const r = await fetch(`/api/orgs/${encodeURIComponent(orgId)}/settings`, { method: 'PUT', headers: { 'Content-Type': 'application/json', ...osAuthHeaders() }, body: JSON.stringify({ info }), }); if (!r.ok) { const d = await r.json().catch(() => ({})); throw new Error(d.error || `Save failed (${r.status})`); } onSaved && onSaved(); return true; } catch (e) { setError(String(e?.message || e)); return false; } finally { setSavingInfo(false); } }; // Done = save pending edits (company info — KB/brand-kit upload inline as // they're chosen) then close. We block close on save failure so the user // sees the error and doesn't lose their typed info. const handleDone = async () => { if (savingInfo || uploading || brandUploading) return; const ok = await saveInfo(); if (ok) onClose(); }; const handleFiles = async (fileList) => { setError(''); if (!fileList || !fileList.length) return; const list = Array.from(fileList); setUploading(true); try { for (const f of list) { const ext = extFromName(f.name); if (!ALLOWED_EXTS.includes(ext)) { setError(`Unsupported type: ${f.name}. Allowed: ${ALLOWED_EXTS.join(', ').toUpperCase()}.`); continue; } // Cap at ~6MB to avoid blowing localStorage. Real backend would stream. if (f.size > 6 * 1024 * 1024) { setError(`${f.name} is too large for the preview (>6 MB). Use a smaller file.`); continue; } const dataUrl = await new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result); r.onerror = rej; r.readAsDataURL(f); }); const r = await fetch(`/api/orgs/${encodeURIComponent(orgId)}/knowledge-base`, { method: 'POST', headers: { 'Content-Type': 'application/json', ...osAuthHeaders() }, body: JSON.stringify({ name: f.name, size: f.size, type: f.type || ALLOWED[ext]?.mime || '', ext, dataUrl, }), }); const d = await r.json().catch(() => ({})); if (r.ok && d.settings) { setFiles(d.settings.files || []); setActiveFile(d.file); } } } catch (e) { setError(String(e?.message || e)); } finally { setUploading(false); if (fileInputRef.current) fileInputRef.current.value = ''; } }; const removeFile = async (fileId) => { try { const r = await fetch(`/api/orgs/${encodeURIComponent(orgId)}/knowledge-base?fileId=${encodeURIComponent(fileId)}`, { method: 'DELETE', headers: { ...osAuthHeaders() }, }); const d = await r.json().catch(() => ({})); if (r.ok && d.settings) setFiles(d.settings.files || []); } catch (e) { setError(String(e?.message || e)); } }; // ----- Brand kit ----- // Brand kit accepts anything: logos, document templates, fonts, colors, images. // We classify by extension to render the right thumbnail. const BRAND_KIND = (ext) => { const e = (ext || '').toLowerCase(); if (['svg', 'png', 'jpg', 'jpeg', 'webp', 'gif'].includes(e)) return 'image'; if (['ttf', 'otf', 'woff', 'woff2'].includes(e)) return 'font'; if (['ai', 'eps', 'sketch', 'fig', 'xd'].includes(e)) return 'design'; if (['pdf'].includes(e)) return 'doc'; if (['doc', 'docx', 'pptx', 'ppt', 'key', 'xlsx'].includes(e)) return 'template'; return 'other'; }; const handleBrandFiles = async (fileList) => { setError(''); if (!fileList || !fileList.length) return; const list = Array.from(fileList); setBrandUploading(true); try { for (const f of list) { // Cap at ~6MB to avoid blowing localStorage. Real backend would stream. if (f.size > 6 * 1024 * 1024) { setError(`${f.name} is too large for the preview (>6 MB).`); continue; } const ext = extFromName(f.name); const dataUrl = await new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result); r.onerror = rej; r.readAsDataURL(f); }); const r = await fetch(`/api/orgs/${encodeURIComponent(orgId)}/brand-kit`, { method: 'POST', headers: { 'Content-Type': 'application/json', ...osAuthHeaders() }, body: JSON.stringify({ name: f.name, size: f.size, type: f.type || '', ext, kind: BRAND_KIND(ext), dataUrl, }), }); const d = await r.json().catch(() => ({})); if (r.ok && d.settings) setBrand(d.settings.brand || []); } } catch (e) { setError(String(e?.message || e)); } finally { setBrandUploading(false); if (brandInputRef.current) brandInputRef.current.value = ''; } }; const removeBrand = async (fileId) => { try { const r = await fetch(`/api/orgs/${encodeURIComponent(orgId)}/brand-kit?fileId=${encodeURIComponent(fileId)}`, { method: 'DELETE', headers: { ...osAuthHeaders() }, }); const d = await r.json().catch(() => ({})); if (r.ok && d.settings) setBrand(d.settings.brand || []); } catch (e) { setError(String(e?.message || e)); } }; const downloadBrand = (f) => { if (!f || !f.dataUrl) return; const a = document.createElement('a'); a.href = f.dataUrl; a.download = f.name || 'brand-asset'; document.body.appendChild(a); a.click(); a.remove(); }; return (
e.stopPropagation()} style={{ width: 1120, maxWidth: '100%', maxHeight: '92vh', background: 'var(--c-cream-50)', border: '1px solid var(--border-subtle)', borderRadius: 18, boxShadow: 'var(--shadow-float-lg)', display: 'flex', flexDirection: 'column', overflow: 'hidden', }}> {/* Header */}
Organization
{orgPicker && Array.isArray(orgPicker.orgs) ? (
Super admin · pick organization
) : (
{orgName || 'Company'} settings
)}
Company info and knowledge base. Visible only to admins.
{/* Body */}
{error && (
{error}
)} {/* Company info card */}

Company info

Everything about the company — used to ground every conversation.