Message

1<script lang="ts">
2	import type { Snippet } from "svelte";
3	import type { HTMLAttributes } from "svelte/elements";
4	import { cn } from "$UTILS$.js";
5 
6	let {
7		class: className,
8		from,
9		children,
10		...restProps
11	}: HTMLAttributes<HTMLDivElement> & {
12		/**
13		 * Determines the message's alignment and which group-scoped styles
14		 * (`is-user` / `is-assistant`) apply to `MessageContent` and
15		 * `MessageAvatar` descendants.
16		 */
17		from: "user" | "assistant";
18		/** Message body — typically a `MessageContent` and/or `MessageAvatar`. */
19		children?: Snippet;
20	} = $props();
21</script>
22 
23<div
24	data-slot="message"
25	class={cn(
26		"group flex w-full items-end justify-end gap-2 py-4",
27		from === "user" ? "is-user" : "is-assistant flex-row-reverse justify-end",
28		className
29	)}
30	{...restProps}
31>
32	{@render children?.()}
33</div>
34 
35<style>
36	:global(.is-user) {
37		--foreground: var(--primary-foreground);
38		--card: var(--primary);
39		--card-foreground: var(--primary-foreground);
40		--muted: color-mix(in oklab, var(--primary) 88%, var(--primary-foreground));
41		--muted-foreground: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
42		--border: color-mix(in oklab, var(--primary-foreground) 18%, transparent);
43	}
44</style>