ai-message

1import {
2  Avatar,
3  AvatarFallback,
4  AvatarImage,
5} from '@repo/shadcn-ui/components/ui/avatar';
6import type { ComponentProps, HTMLAttributes } from 'react';
7import { cn } from '@repo/shadcn-ui/lib/utils';
8 
9export type AIMessageProps = HTMLAttributes<HTMLDivElement> & {
10  from: 'user' | 'assistant';
11};
12 
13export const AIMessage = ({ className, from, ...props }: AIMessageProps) => (
14  <div
15    className={cn(
16      'group flex w-full items-end justify-end gap-2 py-4',
17      from === 'user' ? 'is-user' : 'is-assistant flex-row-reverse justify-end',
18      '[&>div]:max-w-[80%]',
19      className
20    )}
21    {...props}
22  />
23);
24 
25export type AIMessageContentProps = HTMLAttributes<HTMLDivElement>;
26 
27export const AIMessageContent = ({
28  children,
29  className,
30  ...props
31}: AIMessageContentProps) => (
32  <div
33    className={cn(
34      'flex flex-col gap-2 rounded-lg px-4 py-3 text-sm',
35      'bg-muted text-foreground',
36      'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',
37      className
38    )}
39    {...props}
40  >
41    <div className="is-user:dark">{children}</div>
42  </div>
43);
44 
45export type AIMessageAvatarProps = ComponentProps<typeof Avatar> & {
46  src: string;
47  name?: string;
48};
49 
50export const AIMessageAvatar = ({
51  src,
52  name,
53  className,
54  ...props
55}: AIMessageAvatarProps) => (
56  <Avatar className={cn('size-8', className)} {...props}>
57    <AvatarImage alt="" className="mt-0 mb-0" src={src} />
58    <AvatarFallback>{name?.slice(0, 2) || 'ME'}</AvatarFallback>
59  </Avatar>
60);