message

1import { cn } from "~/lib/utils.ts";
2 
3import type { Component, ComponentProps } from "solid-js";
4 
5import { splitProps } from "solid-js";
6 
7const MessageGroup: Component<ComponentProps<"div">> = (props) => {
8  const [local, others] = splitProps(props, ["class"]);
9  return (
10    <div
11      data-slot="message-group"
12      class={cn("gap-2 flex min-w-0 flex-col", local.class)}
13      {...others}
14    />
15  );
16};
17 
18type MessageProps = ComponentProps<"div"> & { align?: "start" | "end" };
19 
20const Message: Component<MessageProps> = (props) => {
21  const [local, others] = splitProps(props, ["class", "align"]);
22  return (
23    <div
24      data-slot="message"
25      data-align={local.align ?? "start"}
26      class={cn(
27        "gap-2 text-sm group/message relative flex w-full min-w-0 data-[align=end]:flex-row-reverse",
28        local.class,
29      )}
30      {...others}
31    />
32  );
33};
34 
35const MessageAvatar: Component<ComponentProps<"div">> = (props) => {
36  const [local, others] = splitProps(props, ["class"]);
37  return (
38    <div
39      data-slot="message-avatar"
40      class={cn(
41        "min-w-8 group-has-data-[slot=message-footer]/message:-translate-y-8 flex w-fit shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted",
42        local.class,
43      )}
44      {...others}
45    />
46  );
47};
48 
49const MessageContent: Component<ComponentProps<"div">> = (props) => {
50  const [local, others] = splitProps(props, ["class"]);
51  return (
52    <div
53      data-slot="message-content"
54      class={cn(
55        "gap-2.5 group-data-[align=end]/message:*:data-slot:self-end wrap-break-word flex w-full min-w-0 flex-col",
56        local.class,
57      )}
58      {...others}
59    />
60  );
61};
62 
63const MessageHeader: Component<ComponentProps<"div">> = (props) => {
64  const [local, others] = splitProps(props, ["class"]);
65  return (
66    <div
67      data-slot="message-header"
68      class={cn(
69        "px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 flex min-w-0 max-w-full items-center",
70        local.class,
71      )}
72      {...others}
73    />
74  );
75};
76 
77const MessageFooter: Component<ComponentProps<"div">> = (props) => {
78  const [local, others] = splitProps(props, ["class"]);
79  return (
80    <div
81      data-slot="message-footer"
82      class={cn(
83        "px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 flex min-w-0 max-w-full items-center group-data-[align=end]/message:justify-end",
84        local.class,
85      )}
86// … truncated