mlogclub
64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import type { ReactNode } from "react"
|
|
|
|
import { Bubble, BubbleContent } from "@/components/ui/bubble"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export type ConversationMessageVariant =
|
|
| "customer"
|
|
| "agent"
|
|
| "ai"
|
|
| "system"
|
|
| "recalled"
|
|
|
|
type ConversationMessageBubbleProps = {
|
|
variant: ConversationMessageVariant
|
|
children: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
function getBubbleVariant(variant: ConversationMessageVariant) {
|
|
switch (variant) {
|
|
case "customer":
|
|
return "secondary" as const
|
|
case "system":
|
|
return "muted" as const
|
|
case "ai":
|
|
return "tinted" as const
|
|
case "agent":
|
|
return "default" as const
|
|
case "recalled":
|
|
return "outline" as const
|
|
default:
|
|
return "secondary" as const
|
|
}
|
|
}
|
|
|
|
function getContentClassName(variant: ConversationMessageVariant) {
|
|
switch (variant) {
|
|
case "agent":
|
|
return "bg-emerald-600 text-white"
|
|
case "system":
|
|
return "border-dashed text-muted-foreground"
|
|
case "recalled":
|
|
return "border-dashed bg-muted/40 text-muted-foreground"
|
|
default:
|
|
return undefined
|
|
}
|
|
}
|
|
|
|
export function ConversationMessageBubble({
|
|
variant,
|
|
children,
|
|
className,
|
|
}: ConversationMessageBubbleProps) {
|
|
return (
|
|
<Bubble variant={getBubbleVariant(variant)}>
|
|
<BubbleContent className={cn("rounded-2xl px-4 py-3 leading-6", getContentClassName(variant), className)}>
|
|
{children}
|
|
</BubbleContent>
|
|
</Bubble>
|
|
)
|
|
}
|