"use client"; import type { ReactNode } from "react"; import Markdown from "react-markdown"; import remarkGfm from "remark-gfm"; import { LibraryIcon } from "@/components/registry/primitives/core/library-icon"; import { Prose } from "@/components/registry/primitives/core/prose"; import { Image } from "@/components/registry/primitives/editables/image"; import { cn } from "@/lib/registry/cn"; import type { ChatMessage as ChatMessageModel } from "./chat.types"; /** * Visual mode for the message row. * - `"bubbles"` Both roles render as filled rounded bubbles. Familiar * and didactic — used by the chat-preview showcase to * demonstrate the message-block primitive standalone. * - `"minimal"` Assistant renders as plain prose with a small avatar * in the start margin (ChatGPT / Claude.ai shape). User * keeps a subtle muted pill bubble with an asymmetric * tail corner. Easier on the eye for long replies and * matches the new ai-chat shell. */ export type ChatMessageStyle = "bubbles" | "minimal"; export interface ChatMessageProps { message: ChatMessageModel; /** * Label shown beside the assistant's name. Accepts a string OR a * ReactNode so callers can pass a Sitecore `` slot * and authors can click-to-edit the assistant name in Pages chrome. */ assistantLabel?: ReactNode; userLabel?: ReactNode; className?: string; /** Visual mode. Defaults to `"bubbles"`. */ style?: ChatMessageStyle; /** * Tailwind classes layered onto the assistant bubble (ring color, * background tint, etc.) — e.g. `"ring-primary/30 bg-primary/5"`. * Optional; defaults to the neutral card chrome. Has no effect on * user or system bubbles. In `"minimal"` mode this targets the * avatar circle ring + background instead of a bubble. */ assistantBubbleClass?: string; /** * Tailwind classes for the assistant icon color — e.g. * `"text-primary"`. Pairs with `assistantBubbleClass` so the icon and * ring read as one tinted unit. */ assistantIconClass?: string; /** * Resolved URL for the assistant avatar. Only rendered in `"minimal"` * mode (where the avatar circle in the start margin is the primary * identity affordance). Pass `undefined` to fall back to a generic * bot icon. */ assistantAvatarSrc?: string; } const formatTimestamp = (value?: string) => { if (!value) return undefined; const date = new Date(value); if (Number.isNaN(date.getTime())) return undefined; const hours = String(date.getUTCHours()).padStart(2, "0"); const minutes = String(date.getUTCMinutes()).padStart(2, "0"); return `${hours}:${minutes} UTC`; }; /** Derived role flags + label shared by both visual modes. */ type ResolvedRole = { isUser: boolean; isSystem: boolean; isAssistant: boolean; label: ReactNode; }; const resolveRole = ( message: ChatMessageModel, assistantLabel: ReactNode, userLabel: ReactNode, ): ResolvedRole => { const isUser = message.role === "user"; const isSystem = message.role === "system"; return { isUser, isSystem, isAssistant: !isUser && !isSystem, label: isUser ? userLabel : isSystem ? "System" : assistantLabel, }; }; /** Minimal mode: prose + start-margin avatar for assistant/system. */ function MinimalChatMessage({ message, role, className, assistantBubbleClass, assistantIconClass, assistantAvatarSrc, timestamp, streamingCursor, }: { message: ChatMessageModel; role: ResolvedRole; className?: string; assistantBubbleClass?: string; assistantIconClass?: string; assistantAvatarSrc?: string; timestamp?: string; streamingCursor: ReactNode; }) { const { isUser, isSystem, isAssistant, label } = role; return (

{!isUser ? (

{isAssistant && assistantAvatarSrc ? ( // Editable (plain-{src} branch renders an unoptimized // ): avatars are author-supplied CDN URLs; the next/image // remote-pattern allowlist would otherwise need every customer's // CDN host. ) : ( )}

) : null}

{label} {timestamp ? {timestamp} : null}

{isAssistant ? ( // Assistant replies are LLM-generated and routinely include // markdown: bold, headings, lists, fenced code, tables. The // previous plain-text render leaked literal `**heading**` // tokens into the UI. `remark-gfm` adds GitHub-flavored // markdown (tables, strikethrough, autolinks, task lists). // The streaming cursor sits outside the Markdown subtree so // it doesn't get parsed.

{message.content} {streamingCursor}

) : (

{message.content} {streamingCursor}

)}

); } /** Bubbles mode: both roles render as filled rounded bubbles. */ function BubbleChatMessage({ message, role, className, assistantBubbleClass, assistantIconClass, timestamp, streamingCursor, }: { message: ChatMessageModel; role: ResolvedRole; className?: string; assistantBubbleClass?: string; assistantIconClass?: string; timestamp?: string; streamingCursor: ReactNode; }) { const { isUser, isSystem, isAssistant, label } = role; return (

{!isUser ? ( ) : null} {label} {timestamp ? ( {timestamp} ) : null}

{/* `text-inherit` defeats globals.css's base `p { color: var(--muted-foreground); }` rule. Without it the parent bubble's `text-{scheme}-foreground` loses to the base rule and the user message text reads as dark muted on the saturated colored bubble (visible "dark text on dark blue" regression). The bubble owns the text colour now, via its parent class — the `

` just inherits. */}

{message.content} {streamingCursor}

); } /** * Renders an individual chat bubble with role-specific styling. */ export function ChatMessage({ message, assistantLabel = "Assistant", userLabel = "You", className, style = "bubbles", assistantBubbleClass, assistantIconClass, assistantAvatarSrc, }: ChatMessageProps) { const role = resolveRole(message, assistantLabel, userLabel); const timestamp = formatTimestamp(message.createdAt); const streamingCursor = message.status === "streaming" ? ( | ) : null; // Minimal: assistant/system render as prose with an avatar in the // start margin, user keeps a subtle muted pill bubble. User content // text leans on `text-foreground` rather than the saturated // `text-primary-foreground` so the bubble reads as "your message" // without aggressively pulling the eye. if (style === "minimal") { return ( ); } return ( ); } export default ChatMessage;

Chat Message

Showcase

Chat Message