blob: 36df751c0505474d1cca69903d750cd9d369a855 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
export interface XeblogConvProps {
name: string;
mood: string;
title?: string;
children: HTMLElement[];
standalone?: boolean;
aiModel?: string;
}
const ConvSnippet = ({
name,
mood,
children,
title,
standalone,
aiModel,
}: XeblogConvProps) => {
const nameLower = name.toLowerCase();
name = name.replace(" ", "_");
return (
<div
className={`flex space-x-2 bg-bg-soft dark:bg-bgDark-soft mx-auto min-h-fit
lg:w-[80ch] sm:w-[65ch] w-full
lg:p-4 p-2
// Base styles for all messages
mt-0 mb-0 rounded-none
// First message styles
first:mt-4 first:rounded-t-lg first:pb-2
// Last message styles
last:mb-4 last:rounded-b-lg last:pt-1
// Middle message top/bottom adjustment
[&:not(:first-child)]:-mt-[1px] [&:not(:first-child)]:py-1`}
>
{/* Avatar Container */}
<div className="h-16 not-prose">
<img
className="h-16 w-16 rounded-xs"
alt={`${name} is ${mood}`}
loading="lazy"
src={`https://stickers.xeiaso.net/sticker/${nameLower}/${mood}`}
/>
</div>
{/* Message Content */}
<div className="flex-1 min-w-0">
{/* Username */}
<span className="font-semibold text-sm block mb-1">
<a href={`/characters#${nameLower}`}>{name}</a>
{!!title && (
<>
{" ("}
{title}
{")"}
</>
)}
</span>
<span className="mx-auto" />
{/* Message Body */}
<div className="text-fg-1 dark:text-fgDark-1 text-sm prose-p:my-2">
{children}
</div>
{/* AI Model Footer */}
{aiModel && (
<div>
<span className="pt-2 text-xs text-[#a3a6aa]">
Generated by {aiModel}
</span>
</div>
)}
</div>
</div>
);
};
export default ConvSnippet;
|
