Suyash091/agentic.email
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI enhancement

Browse source
This commit is contained in:
debu-2 2026-10-03 22:34:34 +05:30
parent 23239c5cb6
commit 53922952c6
13 changed files with 1076 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

176
frontend/src/components/AgAgentPanel.jsx
View file

@ -1,13 +1,17 @@
import {
Calendar,
CalendarClock,
FileSearch,
ListChecks,
PenLine,
MessageCircle,
Receipt,
Sparkles,
Star,
} from "lucide-react";
import { inboxIntelligence } from "../utils/inboxSignals";
import AgentInsight from "./AgentInsight";
import AgentSpark from "./AgentSpark";
import { inboxContext } from "../utils/inboxSignals";
const ICON = { size: 16, strokeWidth: 1.75 };
function greeting(name) {
const hour = new Date().getHours();
@ -16,44 +20,28 @@ function greeting(name) {
}
const cards = [
{
key: "important",
label: "Important emails",
hint: "Need a look",
icon: Star,
tone: "rose",
},
{
key: "actionItems",
label: "Action items",
hint: "Need your response",
icon: ListChecks,
tone: "blue",
},
{
key: "meetings",
label: "Meetings mentioned",
hint: "In this view",
icon: Calendar,
tone: "green",
},
{
key: "invoices",
label: "Invoices & bills",
hint: "This week",
icon: Receipt,
tone: "amber",
},
{ key: "important", label: "Important", hint: "Need a look", icon: Star, tone: "rose" },
{ key: "actionItems", label: "Actions", hint: "Need response", icon: ListChecks, tone: "blue" },
{ key: "meetings", label: "Meetings", hint: "Mentioned", icon: Calendar, tone: "green" },
{ key: "invoices", label: "Invoices", hint: "This week", icon: Receipt, tone: "amber" },
];
export default function AgAgentPanel({ account, emails, focus, onQuickAction }) {
const stats = inboxIntelligence(emails);
export default function AgAgentPanel({
account,
emails,
focus,
insight,
onQuickAction,
onOpenEmail,
}) {
const { stats, needsReply, today, deadlines } = inboxContext(emails);
const firstName = account?.first_name || "there";
const hasSignals = stats.important + stats.actionItems + stats.meetings + stats.invoices > 0;
return (
<section className="agent-panel" aria-label="AG Agent">
<header className="agent-panel-head">
<span className="agent-panel-mark" aria-hidden="true"><Sparkles size={15} /></span>
<span className="agent-panel-mark" aria-hidden="true"><AgentSpark /></span>
<div>
<h2>AG Agent</h2>
<p>Your email co-pilot</p>
@ -62,49 +50,113 @@ export default function AgAgentPanel({ account, emails, focus, onQuickAction })
<div className="agent-panel-hello">
<strong>{greeting(firstName)}</strong>
<span>Here&apos;s what needs your attention.</span>
{focus && <p>{focus}</p>}
{!insight && (
hasSignals ? (
<span>Here&apos;s what needs your attention.</span>
) : (
<span>You&apos;re all caught up. No urgent messages or outstanding actions.</span>
)
)}
{!insight && focus && <p>{focus}</p>}
</div>
<div className="agent-stat-grid">
{cards.map((card) => {
const Icon = card.icon;
const count = stats[card.key] || 0;
return (
<button
key={card.key}
type="button"
className={`agent-stat agent-stat-${card.tone}`}
onClick={() => onQuickAction(card.key)}
>
<Icon size={15} />
<strong>{count}</strong>
<span>{card.label}</span>
<small>{card.key === "important" && stats.importantFromClients
? `${stats.importantFromClients} from clients`
: card.hint}</small>
<AgentInsight insight={insight} />
{!insight && hasSignals ? (
<div className="agent-stat-grid">
{cards.map((card) => {
const Icon = card.icon;
const count = stats[card.key] || 0;
return (
<button
key={card.key}
type="button"
className={`agent-stat agent-stat-${card.tone}`}
onClick={() => onQuickAction(card.key)}
>
<Icon {...ICON} />
<strong>{count}</strong>
<span>{card.label}</span>
<small>{card.key === "important" && stats.importantFromClients
? `${stats.importantFromClients} from clients`
: card.hint}</small>
</button>
);
})}
</div>
) : !insight && (
<div className="agent-caught-up">
<MessageCircle {...ICON} />
<p>Inbox is quiet right now.</p>
{stats.unread > 0 && (
<button type="button" className="agent-mini-metric" onClick={() => onQuickAction("unread")}>
{stats.unread} unread
</button>
);
})}
</div>
)}
</div>
)}
<div className="agent-quick">
<h3>Quick actions</h3>
<div>
<button type="button" onClick={() => onQuickAction("summarize")}>
<Sparkles size={14} /> Summarize inbox
<button type="button" className="agent-action subtle" onClick={() => onQuickAction("summarize")}>
<AgentSpark /> Summarize inbox
</button>
<button type="button" onClick={() => onQuickAction("draft")}>
<PenLine size={14} /> Draft replies
<button type="button" className="agent-action subtle" onClick={() => onQuickAction("draft")}>
<AgentSpark /> Draft replies
</button>
<button type="button" onClick={() => onQuickAction("attachments")}>
<FileSearch size={14} /> Find attachments
<FileSearch {...ICON} /> Find attachments
</button>
<button type="button" onClick={() => onQuickAction("actions")}>
<ListChecks size={14} /> Show action items
<ListChecks {...ICON} /> Show action items
</button>
</div>
</div>
{!insight && today.length > 0 && (
<section className="agent-context-block">
<h3>Today</h3>
<ul>
{today.map((item) => (
<li key={`${item.time}-${item.label}`}>
<time>{item.time}</time>
<span>{item.label}</span>
</li>
))}
</ul>
</section>
)}
{!insight && needsReply.length > 0 && (
<section className="agent-context-block">
<h3>Needs reply</h3>
<ul>
{needsReply.map((item) => (
<li key={item.id}>
<button type="button" onClick={() => onOpenEmail?.(item.id)}>
<span>{item.name}</span>
<em>{item.age}</em>
</button>
</li>
))}
</ul>
</section>
)}
{!insight && deadlines.length > 0 && (
<section className="agent-context-block">
<h3><CalendarClock size={16} strokeWidth={1.75} /> Deadlines</h3>
<ul>
{deadlines.map((item) => (
<li key={`${item.label}-${item.due}`}>
<span>{item.label}</span>
<em>{item.due}</em>
</li>
))}
</ul>
</section>
)}
</section>
);
}