efaaf16f60
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Refactored metadata for contacts, administration, and Ulticards pages to utilize dynamic app names and descriptions. - Introduced new product pages for Ultiai, Ultical, Ulticards, Ultidrive, Ultimail, and Ultimeet with appropriate metadata. - Enhanced layout components to ensure consistent styling and functionality across new product sections. - Updated various components to replace hardcoded labels with dynamic references to improve maintainability and consistency.
98 lines
3.6 KiB
TypeScript
98 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
import { Icon } from "@iconify/react"
|
|
|
|
const ACCENT = "#F59E0B"
|
|
|
|
type TriageItem = {
|
|
sender: string
|
|
subject: string
|
|
label: string
|
|
labelColor: string
|
|
reason: string
|
|
}
|
|
|
|
const ITEMS: TriageItem[] = [
|
|
{
|
|
sender: "Stripe",
|
|
subject: "Votre reçu de paiement — 149 €",
|
|
label: "Comptabilité",
|
|
labelColor: "#34A853",
|
|
reason: "Reçu de paiement → archivé et étiqueté.",
|
|
},
|
|
{
|
|
sender: "Léa Fontaine",
|
|
subject: "Re: Atelier Nord — proposition de date",
|
|
label: "À traiter",
|
|
labelColor: "#EA4335",
|
|
reason: "Demande de réponse → priorité haute.",
|
|
},
|
|
{
|
|
sender: "Newsletter Produit",
|
|
subject: "Les nouveautés de juin sont là",
|
|
label: "Veille",
|
|
labelColor: "#4285F4",
|
|
reason: "Contenu informatif → boîte secondaire.",
|
|
},
|
|
]
|
|
|
|
/** Aperçu statique du tri IA : règle LLM qui classe et explique son choix. */
|
|
export function UltiaiTriageDemo() {
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="landing-glass-strong overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)]">
|
|
<div className="flex items-center gap-2.5 border-b border-[var(--landing-line)] px-4 py-3">
|
|
<Icon icon="mdi:creation-outline" className="size-5" style={{ color: ACCENT }} aria-hidden />
|
|
<span className="text-sm font-semibold tracking-tight">Règle de tri IA</span>
|
|
</div>
|
|
|
|
<div className="border-b border-[var(--landing-line)] bg-[var(--landing-chip)]/30 px-4 py-3">
|
|
<p className="text-[11px] font-medium uppercase tracking-wide text-[var(--landing-muted)]">
|
|
Prompt de la règle
|
|
</p>
|
|
<p className="mt-1 text-sm leading-relaxed text-[var(--landing-fg)]">
|
|
« Classe chaque mail entrant selon le contexte de mon activité : comptabilité,
|
|
à traiter ou veille. »
|
|
</p>
|
|
</div>
|
|
|
|
<ul className="flex flex-col divide-y divide-[var(--landing-line)]">
|
|
{ITEMS.map((item) => (
|
|
<li key={item.subject} className="flex items-start gap-3 px-4 py-3">
|
|
<span
|
|
className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold text-white"
|
|
style={{ backgroundColor: item.labelColor }}
|
|
aria-hidden
|
|
>
|
|
{item.sender.charAt(0)}
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="truncate text-sm font-medium text-[var(--landing-fg)]">
|
|
{item.sender}
|
|
</span>
|
|
<span
|
|
className="ml-auto shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium"
|
|
style={{ backgroundColor: `${item.labelColor}1f`, color: item.labelColor }}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</div>
|
|
<p className="truncate text-sm text-[var(--landing-muted)]">{item.subject}</p>
|
|
<p className="mt-1 flex items-center gap-1.5 text-xs text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:robot-outline" className="size-3.5 shrink-0" style={{ color: ACCENT }} aria-hidden />
|
|
{item.reason}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<p className="flex items-start gap-2 text-sm text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:incognito" className="mt-0.5 size-4 shrink-0" aria-hidden />
|
|
Aperçu statique — le LLM classe à la réception selon votre prompt.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|