email box empty styling
This commit is contained in:
parent
1ee8a58117
commit
5cb49f4cb1
19 changed files with 547 additions and 67 deletions
|
|
@ -5,6 +5,7 @@ import {
|
|||
ChevronDown,
|
||||
ChevronRight,
|
||||
ClipboardList,
|
||||
CircleHelp,
|
||||
FileSearch,
|
||||
FileText,
|
||||
ListChecks,
|
||||
|
|
@ -12,9 +13,11 @@ import {
|
|||
Paperclip,
|
||||
PenLine,
|
||||
Send,
|
||||
Settings,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import AgentInsight from "./AgentInsight";
|
||||
import AgentSpark from "./AgentSpark";
|
||||
import SenderAvatar from "./SenderAvatar";
|
||||
import { inboxContext } from "../utils/inboxSignals";
|
||||
|
||||
|
|
@ -57,7 +60,7 @@ const cards = [
|
|||
function greeting(name) {
|
||||
const hour = new Date().getHours();
|
||||
const period = hour < 12 ? "Good morning" : hour < 17 ? "Good afternoon" : "Good evening";
|
||||
return `${period}, ${name}!`;
|
||||
return `${period}, ${name}`;
|
||||
}
|
||||
|
||||
function statCaption(card, stats) {
|
||||
|
|
@ -79,6 +82,9 @@ export default function AgAgentPanel({
|
|||
focus,
|
||||
insight,
|
||||
loading = false,
|
||||
mailboxEmpty = false,
|
||||
isBrandNewMailbox = false,
|
||||
onCompose,
|
||||
onQuickAction,
|
||||
onOpenEmail,
|
||||
onAgentAsk,
|
||||
|
|
@ -89,6 +95,9 @@ export default function AgAgentPanel({
|
|||
const firstName = account?.first_name || "there";
|
||||
const allMetricsZero = metricTotal(stats) === 0;
|
||||
const hasQuery = agentQuery.trim().length > 0;
|
||||
const showOnboarding = !insight && !loading && mailboxEmpty && isBrandNewMailbox;
|
||||
const showQuietEmpty = !insight && !loading && mailboxEmpty && !isBrandNewMailbox;
|
||||
const showFullPanel = !insight && !loading && !mailboxEmpty;
|
||||
|
||||
function submitAgentQuery(event) {
|
||||
event.preventDefault();
|
||||
|
|
@ -126,7 +135,13 @@ export default function AgAgentPanel({
|
|||
{!insight && (
|
||||
<div className="agent-panel-hello">
|
||||
<strong>{greeting(firstName)}</strong>
|
||||
<span>Here's what needs your attention today.</span>
|
||||
<span>
|
||||
{showOnboarding
|
||||
? "Your new inbox is ready."
|
||||
: showQuietEmpty
|
||||
? "Nothing needs your attention right now."
|
||||
: "Here's what needs your attention today."}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -137,16 +152,28 @@ export default function AgAgentPanel({
|
|||
</div>
|
||||
)}
|
||||
|
||||
{!insight && !loading && allMetricsZero && (
|
||||
{showOnboarding && (
|
||||
<div className="agent-ready-card">
|
||||
<p className="agent-ready-lead">
|
||||
<Check size={14} strokeWidth={2} /> AGMail is ready
|
||||
</p>
|
||||
<p>
|
||||
No messages yet. I'll start organizing and surfacing important
|
||||
items as email arrives.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showQuietEmpty && (
|
||||
<div className="agent-caught-up">
|
||||
<p className="agent-caught-up-lead">
|
||||
<Check size={14} strokeWidth={2} /> You're all caught up.
|
||||
</p>
|
||||
<p>No urgent messages or outstanding actions.</p>
|
||||
<p>Your inbox is clear for now.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!insight && !loading && !allMetricsZero && (
|
||||
{showFullPanel && !allMetricsZero && (
|
||||
<div className="agent-stat-grid">
|
||||
{cards.map((card) => {
|
||||
const Icon = card.icon;
|
||||
|
|
@ -173,42 +200,91 @@ export default function AgAgentPanel({
|
|||
</div>
|
||||
)}
|
||||
|
||||
{!insight && focus && !allMetricsZero && <p className="agent-panel-note">{focus}</p>}
|
||||
{showFullPanel && allMetricsZero && (
|
||||
<div className="agent-caught-up">
|
||||
<p className="agent-caught-up-lead">
|
||||
<Check size={14} strokeWidth={2} /> You're all caught up.
|
||||
</p>
|
||||
<p>No urgent messages or outstanding actions.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!insight && focus && showFullPanel && !allMetricsZero && (
|
||||
<p className="agent-panel-note">{focus}</p>
|
||||
)}
|
||||
|
||||
<section className="agent-quick">
|
||||
<h3>Quick actions</h3>
|
||||
<h3>{showOnboarding ? "Quick start" : "Quick actions"}</h3>
|
||||
<div className="agent-quick-grid">
|
||||
<button type="button" className="agent-quick-btn" onClick={() => onQuickAction("summarize")}>
|
||||
<Sparkles {...ICON_SM} className="agent-quick-icon agent-quick-icon-purple" />
|
||||
<span>Summarize inbox</span>
|
||||
</button>
|
||||
<button type="button" className="agent-quick-btn" onClick={() => onQuickAction("draft")}>
|
||||
<PenLine {...ICON_SM} className="agent-quick-icon agent-quick-icon-purple" />
|
||||
<span>Draft replies</span>
|
||||
</button>
|
||||
<button type="button" className="agent-quick-btn" onClick={() => onQuickAction("attachments")}>
|
||||
<FileSearch {...ICON_SM} className="agent-quick-icon agent-quick-icon-muted" />
|
||||
<span>Find attachments</span>
|
||||
</button>
|
||||
<button type="button" className="agent-quick-btn" onClick={() => onQuickAction("actions")}>
|
||||
<ListChecks {...ICON_SM} className="agent-quick-icon agent-quick-icon-slate" />
|
||||
<span>Show action items</span>
|
||||
</button>
|
||||
{showOnboarding ? (
|
||||
<>
|
||||
<button type="button" className="agent-quick-btn" onClick={() => onQuickAction("learn")}>
|
||||
<AgentSpark className="agent-quick-icon agent-quick-icon-purple" />
|
||||
<span>Meet AG Agent</span>
|
||||
</button>
|
||||
<button type="button" className="agent-quick-btn" onClick={() => onCompose?.()}>
|
||||
<PenLine {...ICON_SM} className="agent-quick-icon agent-quick-icon-purple" />
|
||||
<span>Compose email</span>
|
||||
</button>
|
||||
<button type="button" className="agent-quick-btn" onClick={() => onQuickAction("preferences")}>
|
||||
<Settings {...ICON_SM} className="agent-quick-icon agent-quick-icon-muted" />
|
||||
<span>Set preferences</span>
|
||||
</button>
|
||||
<button type="button" className="agent-quick-btn" onClick={() => onQuickAction("learn")}>
|
||||
<CircleHelp {...ICON_SM} className="agent-quick-icon agent-quick-icon-slate" />
|
||||
<span>Learn AGMail</span>
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="agent-quick-btn"
|
||||
onClick={() => onQuickAction("summarize")}
|
||||
disabled={mailboxEmpty}
|
||||
>
|
||||
<Sparkles {...ICON_SM} className="agent-quick-icon agent-quick-icon-purple" />
|
||||
<span>Summarize inbox</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="agent-quick-btn"
|
||||
onClick={() => onQuickAction("draft")}
|
||||
disabled={mailboxEmpty}
|
||||
>
|
||||
<PenLine {...ICON_SM} className="agent-quick-icon agent-quick-icon-purple" />
|
||||
<span>Draft replies</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="agent-quick-btn"
|
||||
onClick={() => onQuickAction("attachments")}
|
||||
disabled={mailboxEmpty}
|
||||
>
|
||||
<FileSearch {...ICON_SM} className="agent-quick-icon agent-quick-icon-muted" />
|
||||
<span>Find attachments</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="agent-quick-btn"
|
||||
onClick={() => onQuickAction("actions")}
|
||||
disabled={mailboxEmpty}
|
||||
>
|
||||
<ListChecks {...ICON_SM} className="agent-quick-icon agent-quick-icon-slate" />
|
||||
<span>Show action items</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{!insight && (
|
||||
{showFullPanel && !insight && (
|
||||
<section className="agent-context-block agent-agenda">
|
||||
<div className="agent-context-head">
|
||||
<h3>Today's agenda</h3>
|
||||
<button type="button" className="agent-context-link">View calendar</button>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div className="agent-loading-rows" aria-hidden="true">
|
||||
<span className="agent-loading-pulse" />
|
||||
<span className="agent-loading-pulse short" />
|
||||
</div>
|
||||
) : today.length > 0 ? (
|
||||
{today.length > 0 ? (
|
||||
<ul className="agent-agenda-list">
|
||||
{today.map((item) => (
|
||||
<li key={`${item.time}-${item.label}`} className="agent-agenda-row">
|
||||
|
|
@ -228,14 +304,10 @@ export default function AgAgentPanel({
|
|||
</section>
|
||||
)}
|
||||
|
||||
{!insight && (
|
||||
{showFullPanel && !insight && (
|
||||
<section className="agent-context-block agent-attention-block">
|
||||
<h3>Needs attention</h3>
|
||||
{loading ? (
|
||||
<div className="agent-loading-rows" aria-hidden="true">
|
||||
<span className="agent-loading-pulse" />
|
||||
</div>
|
||||
) : needsReply.length > 0 ? (
|
||||
{needsReply.length > 0 ? (
|
||||
<ul className="agent-attention-list">
|
||||
{needsReply.slice(0, 3).map((item) => (
|
||||
<li key={item.id}>
|
||||
|
|
@ -259,7 +331,7 @@ export default function AgAgentPanel({
|
|||
</section>
|
||||
)}
|
||||
|
||||
{!insight && deadlines.length > 0 && (
|
||||
{showFullPanel && !insight && deadlines.length > 0 && (
|
||||
<section className="agent-context-block agent-deadlines">
|
||||
<h3>Deadlines</h3>
|
||||
<ul>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue