diff --git a/frontend/src/components/AgAgentPanel.jsx b/frontend/src/components/AgAgentPanel.jsx index 2aea570..efc7b4a 100644 --- a/frontend/src/components/AgAgentPanel.jsx +++ b/frontend/src/components/AgAgentPanel.jsx @@ -1,29 +1,26 @@ +import { useState } from "react"; import { Calendar, - CalendarClock, + Check, + ChevronRight, FileSearch, ListChecks, - MessageCircle, + PenLine, Receipt, + Send, Star, } from "lucide-react"; 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(); - const period = hour < 12 ? "Good morning" : hour < 17 ? "Good afternoon" : "Good evening"; - return `${period}, ${name}`; -} +const ICON = { size: 14, strokeWidth: 1.75 }; const cards = [ - { 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" }, + { 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: "meetings", label: "Meetings mentioned", hint: "On calendar", icon: Calendar, tone: "green" }, + { key: "invoices", label: "Invoices & bills", hint: "This week", icon: Receipt, tone: "amber" }, ]; export default function AgAgentPanel({ @@ -33,11 +30,20 @@ export default function AgAgentPanel({ insight, onQuickAction, onOpenEmail, + onAgentAsk, }) { const { stats, needsReply, today, deadlines } = inboxContext(emails); - const firstName = account?.first_name || "there"; + const [agentQuery, setAgentQuery] = useState(""); const hasSignals = stats.important + stats.actionItems + stats.meetings + stats.invoices > 0; + function submitAgentQuery(event) { + event.preventDefault(); + const query = agentQuery.trim(); + if (!query) return; + onAgentAsk?.(query); + setAgentQuery(""); + } + return (
@@ -48,25 +54,24 @@ export default function AgAgentPanel({
-
- {greeting(firstName)} - {!insight && ( - hasSignals ? ( - Here's what needs your attention. - ) : ( - You're all caught up. No urgent messages or outstanding actions. - ) - )} - {!insight && focus &&

{focus}

} -
- - {!insight && hasSignals ? ( + {!insight && !hasSignals && ( +
+

You're all caught up.

+

No urgent messages or outstanding actions.

+ Inbox is quiet right now. +
+ )} + + {!insight && hasSignals && (
{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 ( ); })}
- ) : !insight && ( -
- -

Inbox is quiet right now.

- {stats.unread > 0 && ( - - )} -
)} + {!insight && focus && hasSignals &&

{focus}

} +

Quick actions

- - - -
{!insight && today.length > 0 && ( -
-

Today

+
+
+

Today's agenda

+ +
    {today.map((item) => ( -
  • - - {item.label} +
  • +
    • ))}
@@ -130,13 +133,13 @@ export default function AgAgentPanel({ {!insight && needsReply.length > 0 && (
-

Needs reply

-
    - {needsReply.map((item) => ( +

    Needs attention

    +
      + {needsReply.slice(0, 3).map((item) => (
      • ))} @@ -145,8 +148,8 @@ export default function AgAgentPanel({ )} {!insight && deadlines.length > 0 && ( -
      -

      Deadlines

      +
      +

      Deadlines

        {deadlines.map((item) => (
      • @@ -157,6 +160,17 @@ export default function AgAgentPanel({
      )} + +
      + setAgentQuery(event.target.value)} + placeholder="Ask about your emails..." + /> + +
      ); } diff --git a/frontend/src/components/DashboardPage.jsx b/frontend/src/components/DashboardPage.jsx index fff4931..204d204 100644 --- a/frontend/src/components/DashboardPage.jsx +++ b/frontend/src/components/DashboardPage.jsx @@ -64,7 +64,7 @@ function SidebarSection({ title, children, className = "" }) { } function NavBadge({ value }) { - if (!value) return null; + if (!value || value <= 0) return null; return {value}; } @@ -86,6 +86,7 @@ export default function DashboardPage() { starred: 0, important: 0, drafts: 0, + actionItems: 0, labels: {}, }); const handleStats = useCallback((stats) => setMailStats(stats), []); @@ -237,7 +238,7 @@ export default function DashboardPage() { type="button" onClick={() => selectMailItem(label)} > - + {label} @@ -271,8 +272,9 @@ export default function DashboardPage() { type="button" onClick={() => selectAgentItem(label, actionKey)} > - + {label} + ))} diff --git a/frontend/src/components/MailRow.jsx b/frontend/src/components/MailRow.jsx index 08d12b7..451134b 100644 --- a/frontend/src/components/MailRow.jsx +++ b/frontend/src/components/MailRow.jsx @@ -11,7 +11,7 @@ import SenderAvatar from "./SenderAvatar"; import { senderDisplayName } from "../utils/senderAvatar"; import { attachmentCount, emailLabels } from "../utils/inboxSignals"; -const ICON = { size: 16, strokeWidth: 1.75 }; +const ICON = { size: 14, strokeWidth: 1.75 }; function formatTimestamp(value) { if (!value) return ""; @@ -98,58 +98,58 @@ export default function MailRow({ className={`mailbox-star${starred ? " active" : ""}`} onClick={(event) => stop(event, () => onToggleStar?.(email, !starred))} aria-label={starred ? "Unstar message" : "Star message"} + title={starred ? "Unstar" : "Star"} aria-pressed={starred} > -
      - {unread &&