right side
This commit is contained in:
parent
5233481f06
commit
7fb9e0d5d4
3 changed files with 128 additions and 68 deletions
|
|
@ -2,14 +2,15 @@ import { useState } from "react";
|
|||
import {
|
||||
Calendar,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
FileSearch,
|
||||
ListChecks,
|
||||
Mail,
|
||||
Paperclip,
|
||||
PenLine,
|
||||
Receipt,
|
||||
Send,
|
||||
Star,
|
||||
} from "lucide-react";
|
||||
import AgentInsight from "./AgentInsight";
|
||||
import AgentSpark from "./AgentSpark";
|
||||
|
|
@ -19,8 +20,8 @@ import { inboxContext } from "../utils/inboxSignals";
|
|||
const ICON = { size: 14, strokeWidth: 1.75 };
|
||||
|
||||
const cards = [
|
||||
{ key: "important", label: "Important emails", captionKey: "importantFromClients", captionSuffix: "from clients", icon: Star, tone: "rose" },
|
||||
{ key: "actionItems", label: "Action items", hint: "Need response", icon: ListChecks, tone: "blue" },
|
||||
{ key: "important", label: "Important emails", captionKey: "importantFromClients", captionSuffix: "from clients", icon: Mail, tone: "rose" },
|
||||
{ key: "actionItems", label: "Action items", hint: "Need your response", icon: ListChecks, tone: "blue" },
|
||||
{ key: "meetings", label: "Meetings mentioned", hint: "In your emails", icon: Calendar, tone: "green" },
|
||||
{ key: "invoices", label: "Invoices & bills", hint: "This week", icon: Receipt, tone: "amber" },
|
||||
];
|
||||
|
|
@ -42,8 +43,11 @@ export default function AgAgentPanel({
|
|||
}) {
|
||||
const { stats, needsReply, today, deadlines } = inboxContext(emails);
|
||||
const [agentQuery, setAgentQuery] = useState("");
|
||||
const [panelOpen, setPanelOpen] = useState(true);
|
||||
const firstName = account?.first_name || "there";
|
||||
const hasSignals = stats.important + stats.actionItems + stats.meetings + stats.invoices > 0;
|
||||
const activeCards = cards.filter((card) => (stats[card.key] || 0) > 0);
|
||||
const hasContext = needsReply.length > 0 || today.length > 0 || deadlines.length > 0;
|
||||
const hasSignals = activeCards.length > 0 || hasContext;
|
||||
|
||||
function submitAgentQuery(event) {
|
||||
event.preventDefault();
|
||||
|
|
@ -57,57 +61,68 @@ export default function AgAgentPanel({
|
|||
<section className="agent-panel" aria-label="AG Agent">
|
||||
<header className="agent-panel-head">
|
||||
<span className="agent-panel-mark" aria-hidden="true"><AgentSpark /></span>
|
||||
<div>
|
||||
<div className="agent-panel-title">
|
||||
<h2>AG Agent</h2>
|
||||
<p>Your email co-pilot</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="agent-panel-toggle"
|
||||
aria-expanded={panelOpen}
|
||||
aria-label={panelOpen ? "Collapse agent panel" : "Expand agent panel"}
|
||||
onClick={() => setPanelOpen((open) => !open)}
|
||||
>
|
||||
<ChevronDown size={16} strokeWidth={1.75} className={panelOpen ? "open" : ""} />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<AgentInsight insight={insight} />
|
||||
|
||||
{!insight && hasSignals && (
|
||||
<div className="agent-panel-hello">
|
||||
<strong>{greeting(firstName)}</strong>
|
||||
<span>Here's what needs your attention today.</span>
|
||||
</div>
|
||||
)}
|
||||
{panelOpen && (
|
||||
<div className="agent-panel-body">
|
||||
{!insight && hasSignals && (
|
||||
<div className="agent-panel-hello">
|
||||
<strong>{greeting(firstName)}</strong>
|
||||
<span>Here's what needs your attention today.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!insight && !hasSignals && (
|
||||
<div className="agent-caught-up">
|
||||
<p className="agent-caught-up-lead"><Check size={15} strokeWidth={2} /> You're all caught up.</p>
|
||||
<p>No urgent messages or outstanding actions.</p>
|
||||
<small>Inbox is quiet right now.</small>
|
||||
</div>
|
||||
)}
|
||||
{!insight && !hasSignals && (
|
||||
<div className="agent-caught-up">
|
||||
<p className="agent-caught-up-lead"><Check size={15} strokeWidth={2} /> You're all caught up.</p>
|
||||
<p>No urgent messages or outstanding actions.</p>
|
||||
<small>Inbox is quiet right now.</small>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!insight && hasSignals && (
|
||||
<div className="agent-stat-grid">
|
||||
{cards.map((card) => {
|
||||
const Icon = card.icon;
|
||||
const count = stats[card.key] || 0;
|
||||
const caption = card.captionKey && stats[card.captionKey]
|
||||
? `${stats[card.captionKey]} ${card.captionSuffix}`
|
||||
: card.hint;
|
||||
return (
|
||||
<button
|
||||
key={card.key}
|
||||
type="button"
|
||||
className={`agent-stat agent-stat-${card.tone}`}
|
||||
onClick={() => onQuickAction(card.key)}
|
||||
>
|
||||
<span className="agent-stat-icon"><Icon {...ICON} /></span>
|
||||
<strong>{count}</strong>
|
||||
<span>{card.label}</span>
|
||||
<small>{caption}</small>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{!insight && activeCards.length > 0 && (
|
||||
<div className="agent-stat-grid">
|
||||
{activeCards.map((card) => {
|
||||
const Icon = card.icon;
|
||||
const count = stats[card.key] || 0;
|
||||
const caption = card.captionKey && stats[card.captionKey]
|
||||
? `${stats[card.captionKey]} ${card.captionSuffix}`
|
||||
: card.hint;
|
||||
return (
|
||||
<button
|
||||
key={card.key}
|
||||
type="button"
|
||||
className={`agent-stat agent-stat-${card.tone}`}
|
||||
onClick={() => onQuickAction(card.key)}
|
||||
>
|
||||
<span className="agent-stat-icon"><Icon {...ICON} /></span>
|
||||
<strong>{count}</strong>
|
||||
<span>{card.label}</span>
|
||||
<small>{caption}</small>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!insight && focus && hasSignals && <p className="agent-panel-note">{focus}</p>}
|
||||
{!insight && focus && hasSignals && <p className="agent-panel-note">{focus}</p>}
|
||||
|
||||
<div className="agent-quick">
|
||||
<div className="agent-quick">
|
||||
<h3>Quick actions</h3>
|
||||
<div>
|
||||
<button type="button" className="agent-quick-btn agent-quick-btn-agent" onClick={() => onQuickAction("summarize")}>
|
||||
|
|
@ -126,10 +141,10 @@ export default function AgAgentPanel({
|
|||
<span className="agent-quick-icon"><ListChecks {...ICON} /></span>
|
||||
<span>Show action items</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!insight && today.length > 0 && (
|
||||
{!insight && today.length > 0 && (
|
||||
<section className="agent-context-block agent-agenda">
|
||||
<div className="agent-context-head">
|
||||
<h3>Today's agenda</h3>
|
||||
|
|
@ -148,10 +163,10 @@ export default function AgAgentPanel({
|
|||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{!insight && needsReply.length > 0 && (
|
||||
{!insight && needsReply.length > 0 && (
|
||||
<section className="agent-context-block">
|
||||
<h3>Needs attention</h3>
|
||||
<ul className="agent-attention-list">
|
||||
|
|
@ -168,10 +183,10 @@ export default function AgAgentPanel({
|
|||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{!insight && deadlines.length > 0 && (
|
||||
{!insight && deadlines.length > 0 && (
|
||||
<section className="agent-context-block agent-deadlines">
|
||||
<h3>Deadlines</h3>
|
||||
<ul>
|
||||
|
|
@ -182,10 +197,10 @@ export default function AgAgentPanel({
|
|||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<form className="agent-ask-input" onSubmit={submitAgentQuery}>
|
||||
<form className="agent-ask-input" onSubmit={submitAgentQuery}>
|
||||
<input
|
||||
value={agentQuery}
|
||||
onChange={(event) => setAgentQuery(event.target.value)}
|
||||
|
|
@ -196,8 +211,10 @@ export default function AgAgentPanel({
|
|||
</button>
|
||||
<button type="submit" className="agent-ask-send" aria-label="Send to agent" disabled={!agentQuery.trim()}>
|
||||
<Send size={15} strokeWidth={1.75} />
|
||||
</button>
|
||||
</form>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue