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.
110 lines
4.5 KiB
TypeScript
110 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import { Icon } from "@iconify/react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const ACCENT = "#F59E0B"
|
|
|
|
type ChatMessage = {
|
|
role: "user" | "assistant"
|
|
text: string
|
|
tool?: { icon: string; label: string }
|
|
}
|
|
|
|
const MESSAGES: ChatMessage[] = [
|
|
{
|
|
role: "user",
|
|
text: "Résume le fil « Atelier Nord » et prépare une réponse pour décaler à jeudi.",
|
|
},
|
|
{
|
|
role: "assistant",
|
|
tool: { icon: "mdi:email-search-outline", label: "Recherche dans Ultimail" },
|
|
text: "3 messages trouvés. Léa propose mardi 14h, Vincent a un conflit. En résumé : validation du devis OK, reste à caler la date.",
|
|
},
|
|
{
|
|
role: "assistant",
|
|
tool: { icon: "mdi:file-document-edit-outline", label: "Brouillon de réponse" },
|
|
text: "Brouillon prêt : « Bonjour Léa, jeudi 14h vous conviendrait-il ? Je joins le lien UltiMeet. »",
|
|
},
|
|
]
|
|
|
|
/** Aperçu statique du chat UltiAI avec appels d'outils et streaming. */
|
|
export function UltiaiChatDemo() {
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="landing-glass-strong flex h-[22rem] flex-col overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)] sm:h-[26rem]">
|
|
<div className="flex items-center gap-2.5 border-b border-[var(--landing-line)] px-4 py-3">
|
|
<img
|
|
src="/ultiai-mark.svg"
|
|
alt=""
|
|
className="size-6 object-contain"
|
|
aria-hidden
|
|
/>
|
|
<span className="text-sm font-semibold tracking-tight">UltiAI</span>
|
|
<span
|
|
className="ml-auto flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium"
|
|
style={{ backgroundColor: `${ACCENT}1f`, color: ACCENT }}
|
|
>
|
|
<Icon icon="mdi:circle" className="size-2" aria-hidden />
|
|
Contexte mail actif
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-1 flex-col gap-3 overflow-hidden p-4">
|
|
{MESSAGES.map((message, index) => (
|
|
<div
|
|
key={index}
|
|
className={cn(
|
|
"flex flex-col gap-1.5",
|
|
message.role === "user" ? "items-end" : "items-start"
|
|
)}
|
|
>
|
|
{message.tool ? (
|
|
<span className="flex items-center gap-1.5 rounded-full border border-[var(--landing-line)] bg-[var(--landing-chip)] px-2.5 py-1 text-[11px] font-medium text-[var(--landing-muted)]">
|
|
<Icon icon={message.tool.icon} className="size-3.5" style={{ color: ACCENT }} aria-hidden />
|
|
{message.tool.label}
|
|
</span>
|
|
) : null}
|
|
<div
|
|
className={cn(
|
|
"max-w-[85%] rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed",
|
|
message.role === "user"
|
|
? "rounded-br-md text-[#202124]"
|
|
: "rounded-bl-md bg-[var(--landing-chip)] text-[var(--landing-fg)]"
|
|
)}
|
|
style={message.role === "user" ? { backgroundColor: ACCENT } : undefined}
|
|
>
|
|
{message.text}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<div className="flex items-center gap-1.5 self-start rounded-2xl rounded-bl-md bg-[var(--landing-chip)] px-3.5 py-3">
|
|
<span className="size-1.5 animate-pulse rounded-full bg-[var(--landing-muted)]" />
|
|
<span className="size-1.5 animate-pulse rounded-full bg-[var(--landing-muted)] [animation-delay:120ms]" />
|
|
<span className="size-1.5 animate-pulse rounded-full bg-[var(--landing-muted)] [animation-delay:240ms]" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-[var(--landing-line)] p-3">
|
|
<div className="flex items-center gap-2 rounded-full border border-[var(--landing-line)] bg-[var(--landing-bg)] px-3.5 py-2">
|
|
<span className="flex-1 truncate text-sm text-[var(--landing-muted)]">
|
|
Demandez quelque chose à UltiAI…
|
|
</span>
|
|
<span
|
|
className="flex size-7 items-center justify-center rounded-full text-[#202124]"
|
|
style={{ backgroundColor: ACCENT }}
|
|
>
|
|
<Icon icon="mdi:arrow-up" className="size-4" aria-hidden />
|
|
</span>
|
|
</div>
|
|
</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 — l'assistant lit le contexte et propose, rien n'est envoyé.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|