Message

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
2import {
3  Tooltip,
4  TooltipContent,
5  TooltipProvider,
6  TooltipTrigger,
7} from "@/components/ui/tooltip"
8import { cn } from "@/lib/utils"
9import { Markdown } from "./markdown"
10 
11export type MessageProps = {
12  children: React.ReactNode
13  className?: string
14} & React.HTMLProps<HTMLDivElement>
15 
16const Message = ({ children, className, ...props }: MessageProps) => (
17  <div className={cn("flex gap-3", className)} {...props}>
18    {children}
19  </div>
20)
21 
22export type MessageAvatarProps = {
23  src: string
24  alt: string
25  fallback?: string
26  delayMs?: number
27  className?: string
28}
29 
30const MessageAvatar = ({
31  src,
32  alt,
33  fallback,
34  delayMs,
35  className,
36}: MessageAvatarProps) => {
37  return (
38    <Avatar className={cn("h-8 w-8 shrink-0", className)}>
39      <AvatarImage src={src} alt={alt} />
40      {fallback && (
41        <AvatarFallback delayMs={delayMs}>{fallback}</AvatarFallback>
42      )}
43    </Avatar>
44  )
45}
46 
47export type MessageContentProps = {
48  children: React.ReactNode
49  markdown?: boolean
50  className?: string
51} & React.ComponentProps<typeof Markdown> &
52  React.HTMLProps<HTMLDivElement>
53 
54const MessageContent = ({
55  children,
56  markdown = false,
57  className,
58  ...props
59}: MessageContentProps) => {
60  const classNames = cn(
61    "rounded-lg p-2 text-foreground bg-secondary prose break-words whitespace-normal",
62    className
63  )
64 
65  return markdown ? (
66    <Markdown className={classNames} {...props}>
67      {children as string}
68    </Markdown>
69  ) : (
70    <div className={classNames} {...props}>
71      {children}
72    </div>
73  )
74}
75 
76export type MessageActionsProps = {
77  children: React.ReactNode
78  className?: string
79} & React.HTMLProps<HTMLDivElement>
80 
81const MessageActions = ({
82  children,
83  className,
84  ...props
85}: MessageActionsProps) => (
86  <div
87    className={cn("text-muted-foreground flex items-center gap-2", className)}
88    {...props}
89  >
90    {children}
91  </div>
92)
93 
94export type MessageActionProps = {
95  className?: string
96  tooltip: React.ReactNode
97  children: React.ReactNode
98  side?: "top" | "bottom" | "left" | "right"
99} & React.ComponentProps<typeof Tooltip>
100 
101const MessageAction = ({
102  tooltip,
103  children,
104  className,
105  side = "top",
106  ...props
107}: MessageActionProps) => {
108  return (
109    <TooltipProvider>
110      <Tooltip {...props}>
111        <TooltipTrigger asChild>{children}</TooltipTrigger>
112        <TooltipContent side={side} className={className}>
113          {tooltip}
114// … truncated