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.
107 lines
4.4 KiB
TypeScript
107 lines
4.4 KiB
TypeScript
"use client"
|
|
|
|
import { Icon } from "@iconify/react"
|
|
import { ULTIAI_TOOL_GROUPS } from "@/lib/ai/ultiai-tool-groups"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const ACCENT = "#F59E0B"
|
|
|
|
const TOOL_ICONS: Record<string, string> = {
|
|
mail: "mdi:email-outline",
|
|
drive: "mdi:folder-outline",
|
|
contacts: "mdi:card-account-details-outline",
|
|
agenda: "mdi:calendar-outline",
|
|
search: "mdi:magnify",
|
|
web_search: "mdi:web",
|
|
}
|
|
|
|
// Groupes désactivés dans l'aperçu pour illustrer les permissions fines.
|
|
const DISABLED_GROUPS = new Set(["web_search"])
|
|
|
|
const TRACE = [
|
|
{ icon: "mdi:email-search-outline", label: "mail.search", detail: "« facture » · 3 résultats" },
|
|
{ icon: "mdi:label-outline", label: "mail.addLabel", detail: "Comptabilité" },
|
|
{ icon: "mdi:folder-move-outline", label: "drive.move", detail: "→ /Factures/2026" },
|
|
]
|
|
|
|
/** Aperçu statique des groupes d'outils MCP et d'une trace d'exécution. */
|
|
export function UltiaiToolsDemo() {
|
|
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:tools" className="size-5" style={{ color: ACCENT }} aria-hidden />
|
|
<span className="text-sm font-semibold tracking-tight">Outils MCP exposés</span>
|
|
<span className="ml-auto text-[11px] font-medium text-[var(--landing-muted)]">
|
|
X-Ulti-Enabled-Tools
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2 p-4">
|
|
{ULTIAI_TOOL_GROUPS.map((group) => {
|
|
const enabled = !DISABLED_GROUPS.has(group.id)
|
|
return (
|
|
<div
|
|
key={group.id}
|
|
className={cn(
|
|
"flex items-center gap-2.5 rounded-xl border px-3 py-2.5 transition-colors",
|
|
enabled
|
|
? "border-[var(--landing-line)] bg-[var(--landing-chip)]/40"
|
|
: "border-dashed border-[var(--landing-line)] opacity-50"
|
|
)}
|
|
>
|
|
<span
|
|
className="flex size-8 shrink-0 items-center justify-center rounded-lg"
|
|
style={{
|
|
backgroundColor: enabled ? `${ACCENT}1f` : "transparent",
|
|
color: enabled ? ACCENT : "var(--landing-muted)",
|
|
}}
|
|
>
|
|
<Icon icon={TOOL_ICONS[group.id] ?? "mdi:tools"} className="size-4" aria-hidden />
|
|
</span>
|
|
<span className="min-w-0 flex-1 truncate text-sm font-medium">
|
|
{group.label}
|
|
</span>
|
|
<Icon
|
|
icon={enabled ? "mdi:toggle-switch" : "mdi:toggle-switch-off-outline"}
|
|
className="size-5 shrink-0"
|
|
style={{ color: enabled ? ACCENT : "var(--landing-muted)" }}
|
|
aria-hidden
|
|
/>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
<div className="border-t border-[var(--landing-line)] bg-[var(--landing-bg)]/60 p-4">
|
|
<p className="mb-2.5 flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:console" className="size-3.5" aria-hidden />
|
|
Trace d'exécution
|
|
</p>
|
|
<ul className="flex flex-col gap-1.5">
|
|
{TRACE.map((step, index) => (
|
|
<li key={index} className="flex items-center gap-2.5 text-sm">
|
|
<Icon
|
|
icon="mdi:check-circle"
|
|
className="size-4 shrink-0"
|
|
style={{ color: ACCENT }}
|
|
aria-hidden
|
|
/>
|
|
<Icon icon={step.icon} className="size-4 shrink-0 text-[var(--landing-muted)]" aria-hidden />
|
|
<code className="font-mono text-[13px] font-medium text-[var(--landing-fg)]">
|
|
{step.label}
|
|
</code>
|
|
<span className="truncate text-xs text-[var(--landing-muted)]">{step.detail}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</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 — chaque groupe d'outils s'active ou se coupe par compte.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|