/* AI-powered features: photo triage, chat widget, voice input, storm radar */
/* Uses /api/claude proxy (Vercel serverless), Web Speech API, NWS public API */
async function claudeComplete({ messages, max_tokens }) {
const res = await fetch('/api/claude', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ messages, max_tokens }),
});
if (!res.ok) {
const err = await res.text().catch(() => '');
throw new Error(`Claude proxy error (${res.status}): ${err || res.statusText}`);
}
const data = await res.json();
return data.text;
}
async function claudeCompleteStream({ messages, max_tokens, onDelta }) {
const res = await fetch('/api/claude', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ messages, max_tokens, stream: true }),
});
if (!res.ok) {
const err = await res.text().catch(() => '');
throw new Error(`Claude stream error (${res.status}): ${err || res.statusText}`);
}
const reader = res.body.getReader();
const decoder = new TextDecoder();
let full = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value, { stream: true });
full += chunk;
if (onDelta) onDelta(full);
}
return full;
}
/* =========================================================
1. AI PHOTO TRIAGE — Claude Vision estimates dent severity
========================================================= */
function PhotoTriage({ accent, onEstimate }) {
const [photos, setPhotos] = React.useState([]); // [{ file, dataUrl, id }]
const [analyzing, setAnalyzing] = React.useState(false);
const [result, setResult] = React.useState(null);
const [error, setError] = React.useState('');
const inputRef = React.useRef(null);
const readAsDataUrl = (file) => new Promise((res, rej) => {
const r = new FileReader();
r.onload = () => res(r.result);
r.onerror = rej;
r.readAsDataURL(file);
});
const addFiles = async (files) => {
const arr = Array.from(files).slice(0, 5 - photos.length);
const parsed = await Promise.all(arr.map(async f => ({
file: f, dataUrl: await readAsDataUrl(f), id: Math.random().toString(36).slice(2),
})));
setPhotos(p => [...p, ...parsed]);
setResult(null);
};
const removePhoto = (id) => setPhotos(p => p.filter(x => x.id !== id));
const analyze = async () => {
if (photos.length === 0) return;
setAnalyzing(true);
setError('');
try {
const content = [
{ type: 'text', text: `You are a paintless dent repair (PDR) estimator for an auto hail repair shop. Analyze these ${photos.length} photo(s) of a vehicle with hail damage. Return ONLY a JSON object with this exact shape (no prose, no markdown, no code fences):
{
"severity": 1-5 (1=minor 1-10 dents, 2=light 10-30, 3=moderate 30-80, 4=heavy 80-200, 5=total 200+),
"visibleDents": estimated integer,
"panelsAffected": ["hood","roof","trunk","fender","door"],
"largestDentSize": "dime"|"nickel"|"quarter"|"half-dollar"|"baseball",
"paintCracked": boolean,
"glassDamage": boolean,
"priceRange": "$350 - $900" style string,
"confidence": 0-1 decimal,
"notes": "one short sentence for the estimator"
}` },
...photos.map(p => ({
type: 'image',
source: { type: 'base64', media_type: p.file.type, data: p.dataUrl.split(',')[1] },
})),
];
const text = await claudeComplete({ messages: [{ role: 'user', content }] });
// Extract JSON even if model wrapped it
const m = text.match(/\{[\s\S]*\}/);
if (!m) throw new Error('No JSON found in response');
const parsed = JSON.parse(m[0]);
setResult(parsed);
if (onEstimate) onEstimate(parsed);
} catch (e) {
console.error(e);
setError('Could not analyze photos. Try again or skip — you can fill in severity manually.');
} finally {
setAnalyzing(false);
}
};
const severityLabels = ['Minor (1–10)','Light (10–30)','Moderate (30–80)','Heavy (80–200)','Total (200+)'];
return (
AI
Instant damage analysis
Upload 2–5 photos of your damage.
Our AI pre-scores the severity and pre-fills your estimate in ~10 seconds. Take them outside in daylight, one wide shot + closeups of the worst panels.
))}