File size: 2,200 Bytes
921d377 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | import React from 'react';
export const INTENT_COPY = {
understand: {
icon: '📚',
title: 'Understand something',
description: 'Explain a concept, doc, or idea clearly.',
placeholder: 'What would you like me to explain?',
},
decide: {
icon: '🧠',
title: 'Make a decision',
description: 'Compare options and recommend next steps.',
placeholder: 'What decision are you trying to make?',
},
summarize: {
icon: '📝',
title: 'Create a summary',
description: 'Turn content into a concise, useful recap.',
placeholder: 'What should I summarize?',
},
research: {
icon: '🔍',
title: 'Research a topic',
description: 'Gather sources and synthesize key points.',
placeholder: 'What topic should I research?',
},
};
export function AgentIntentTiles({ value, onChange, }) {
const intents = ['understand', 'decide', 'summarize', 'research'];
return (<div className="mt-6">
<div className="text-sm text-white/70">What do you want help with?</div>
<div className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
{intents.map((intent) => {
const c = INTENT_COPY[intent];
const active = value === intent;
return (<button key={intent} type="button" onClick={() => onChange(intent)} className={[
'text-left rounded-2xl border transition-all',
'px-4 py-4',
active
? 'bg-white/10 border-white/30 shadow-[0_10px_40px_rgba(0,0,0,0.35)]'
: 'bg-black/20 border-white/10 hover:bg-black/30 hover:border-white/20',
].join(' ')}>
<div className="flex items-start gap-3">
<div className="text-xl leading-none mt-0.5">{c.icon}</div>
<div>
<div className="text-base font-semibold text-white">{c.title}</div>
<div className="mt-1 text-sm text-white/60 leading-relaxed">{c.description}</div>
</div>
</div>
</button>);
})}
</div>
</div>);
}
|