@htmlbricks/hb-messages-list 0.71.35 → 0.71.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +162 -38
- package/main.iife.js +1 -1
- package/main.iife.js.map +1 -1
- package/manifest.json +65 -65
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,59 +1,183 @@
|
|
|
1
|
-
# hb-messages-list
|
|
1
|
+
# `hb-messages-list`
|
|
2
|
+
|
|
3
|
+
**Category:** messaging · **Tags:** messaging, chat · **Package:** `@htmlbricks/hb-messages-list`
|
|
2
4
|
|
|
3
5
|
## Description
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
`hb-messages-list` renders a scrollable transcript of chat messages. Each row joins a message to its author from the `authors` list, aligns the current user (`me: true`) to one side and everyone else to the other, and can show names, avatars, timestamps, and optional per-message action buttons. When `options.bubbles` is enabled, self vs peer bubbles use different surfaces and expose distinct CSS parts; when it is off, messages use a shared neutral bubble part.
|
|
8
|
+
|
|
9
|
+
Messages are **filtered**: only items whose `authorId` matches an author in `authors` are shown. Avatars collapse for **consecutive** messages from the same author if the gap between timestamps is under **five minutes** (the avatar column still reserves space when avatars are enabled).
|
|
10
|
+
|
|
11
|
+
The component loads **Bootstrap Icons** (via the shadow root stylesheet) for action buttons: each action’s `icon` value becomes the `bi-{icon}` class name.
|
|
12
|
+
|
|
13
|
+
## Message content and `type`
|
|
14
|
+
|
|
15
|
+
The `TMessage.type` field supports `"text" | "image" | "video" | "audio" | "file" | "code"`. In the current markup, only **`code`** is rendered differently (language tag when `language` is set, then a `<pre><code>` block). All other types, including `image`, `video`, `audio`, and `file`, are shown as **plain text** in the message body (the `text` field). Fields such as `uri`, `status`, `system`, `reply`, and `quotedMessageId` are part of the public shape for integrators but are **not** interpreted for extra UI in this component.
|
|
16
|
+
|
|
17
|
+
## Default options
|
|
18
|
+
|
|
19
|
+
If `options` is omitted or partially provided (after JSON merge), defaults are:
|
|
20
|
+
|
|
21
|
+
| Option | Default | Effect |
|
|
22
|
+
|------------------|---------|--------|
|
|
23
|
+
| `showTimestamp` | `true` | Show time under or beside the message (grouped with the action row when `actions` is non-empty). |
|
|
24
|
+
| `showAvatar` | `true` | Avatar column and alignment spacers. |
|
|
25
|
+
| `showName` | `true` | Author row above the bubble; the current user is labeled **You**. |
|
|
26
|
+
| `bubbles` | `false` | If `true`, self vs peer bubble parts and styling; if `false`, neutral `message` part. |
|
|
27
|
+
|
|
28
|
+
**Note:** Parsed `options` are merged with internal defaults. Property keys inside JSON attribute values follow the TypeScript / runtime shape (for example `authorId`, `showTimestamp`, `isAI`); booleans use JSON `true` / `false`.
|
|
29
|
+
|
|
30
|
+
## Actions and events
|
|
31
|
+
|
|
32
|
+
When `actions` is a non-empty array, each message row renders small outline buttons. Each action is `{ "icon": string, "name": string }` where `icon` is a Bootstrap Icons suffix (for example `"clipboard"` → `bi-clipboard`).
|
|
33
|
+
|
|
34
|
+
| Event | `detail` |
|
|
35
|
+
|----------|----------|
|
|
36
|
+
| `action` | `{ messageId: string; action: string }` — `action` is the `name` from the clicked action. |
|
|
37
|
+
|
|
38
|
+
## Timestamps
|
|
39
|
+
|
|
40
|
+
Displayed times are derived with `Date` from `message.timestamp` (ISO strings from JSON are supported). Messages from **today** show time only; older messages show a locale-dependent date plus time.
|
|
41
|
+
|
|
42
|
+
## AI authors
|
|
43
|
+
|
|
44
|
+
If an author has `isAI: true`, the default avatar uses an AI-specific placeholder and a small **AI** badge appears when the avatar is visible.
|
|
45
|
+
|
|
46
|
+
## Custom element
|
|
47
|
+
|
|
48
|
+
`hb-messages-list`
|
|
49
|
+
|
|
50
|
+
## Attributes (snake_case; string values in HTML)
|
|
51
|
+
|
|
52
|
+
Complex props are **JSON strings** on attributes (the component parses them in effects). Arrays and objects must be valid JSON.
|
|
53
|
+
|
|
54
|
+
| Attribute | Required | Description |
|
|
55
|
+
|-------------|----------|-------------|
|
|
56
|
+
| `id` | No | Optional element id. |
|
|
57
|
+
| `style` | No | Optional host inline style (typed on the component; use as for any HTMLElement). |
|
|
58
|
+
| `messages` | Yes | JSON array of `TMessage`. Each message should include `authorId` matching an author `id`. |
|
|
59
|
+
| `authors` | Yes | JSON array of `TAuthor`. |
|
|
60
|
+
| `options` | No | JSON object: `showTimestamp`, `showAvatar`, `showName`, `bubbles` (all optional booleans). |
|
|
61
|
+
| `actions` | No | JSON array of `{ "icon": string, "name": string }` for per-message buttons. |
|
|
62
|
+
|
|
63
|
+
## Styling
|
|
64
|
+
|
|
65
|
+
### Bulma theme variables (`:host`)
|
|
66
|
+
|
|
67
|
+
Documented in `extra/docs.ts` — override on the host with **`--bulma-*`** (see [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/)).
|
|
68
|
+
|
|
69
|
+
| Variable | Purpose |
|
|
70
|
+
|----------|---------|
|
|
71
|
+
| `--bulma-primary` | Self bubble background and accents. |
|
|
72
|
+
| `--bulma-primary-invert` | Text on primary bubble background. |
|
|
73
|
+
| `--bulma-border` | Peer / neutral bubble borders. |
|
|
74
|
+
| `--bulma-text` | Default message and caption color inside bubbles. |
|
|
75
|
+
| `--bulma-text-weak` | Muted text (timestamps, You label). |
|
|
76
|
+
| `--bulma-scheme-main-bis` | Light bubble / neutral backgrounds. |
|
|
77
|
+
| `--bulma-radius-large` | Bubble corner radius. |
|
|
78
|
+
| `--bulma-radius-rounded` | Circular action buttons and avatars. |
|
|
79
|
+
|
|
80
|
+
### Component variables
|
|
81
|
+
|
|
82
|
+
| Variable | Default | Purpose |
|
|
83
|
+
|----------|---------|---------|
|
|
84
|
+
| `--hb-messages-list-max-height` | `600px` | Scrollable list max height. |
|
|
85
|
+
| `--hb-messages-list-padding` | `1rem` | Padding inside the host. |
|
|
86
|
+
| `--hb-messages-bubble-max-width-mobile` | `85%` | Max width of bubble content on small layouts. |
|
|
87
|
+
|
|
88
|
+
## CSS parts
|
|
89
|
+
|
|
90
|
+
Expose only on elements that are rendered for the current `options.bubbles` / layout branch.
|
|
91
|
+
|
|
92
|
+
| Part | When | Purpose |
|
|
93
|
+
|------|------|---------|
|
|
94
|
+
| `message-body` | Always (per message) | Inner content: text or code block. |
|
|
95
|
+
| `message-bubble-me` | `bubbles: true` | Bubble for the author with `me: true`. |
|
|
96
|
+
| `message-bubble-them` | `bubbles: true` | Bubble for other authors. |
|
|
97
|
+
| `message` | `bubbles: false` | Outer wrapper for the neutral bubble. |
|
|
98
|
+
| `message-timestamp` | When timestamps are shown | Timestamp label. |
|
|
99
|
+
|
|
100
|
+
## HTML slots
|
|
101
|
+
|
|
102
|
+
None.
|
|
6
103
|
|
|
7
104
|
## Types
|
|
8
105
|
|
|
9
106
|
```typescript
|
|
10
|
-
// type that is used to define a chat message
|
|
11
107
|
export type TMessage = {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
108
|
+
id: string;
|
|
109
|
+
text: string;
|
|
110
|
+
timestamp: Date;
|
|
111
|
+
type: "text" | "image" | "video" | "audio" | "file" | "code";
|
|
112
|
+
status?: "pending" | "sent" | "received" | "read";
|
|
113
|
+
system?: boolean;
|
|
114
|
+
reply?: boolean;
|
|
115
|
+
quotedMessageId?: string;
|
|
116
|
+
authorId?: string;
|
|
117
|
+
uri?: string;
|
|
118
|
+
language?: string; // for `type: "code"`
|
|
23
119
|
};
|
|
24
120
|
|
|
25
|
-
// type that is used to define a chat partecipant
|
|
26
121
|
export type TAuthor = {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
122
|
+
id: string;
|
|
123
|
+
name: string;
|
|
124
|
+
avatar?: string;
|
|
125
|
+
status?: "online" | "offline" | "away" | "busy";
|
|
126
|
+
me?: boolean;
|
|
127
|
+
isAI?: boolean;
|
|
33
128
|
};
|
|
34
129
|
|
|
35
130
|
export type Component = {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
icon: string;
|
|
48
|
-
name: string;
|
|
49
|
-
}[]
|
|
131
|
+
id?: string;
|
|
132
|
+
style?: string;
|
|
133
|
+
messages: TMessage[];
|
|
134
|
+
authors: TAuthor[];
|
|
135
|
+
options?: {
|
|
136
|
+
showTimestamp?: boolean;
|
|
137
|
+
showAvatar?: boolean;
|
|
138
|
+
showName?: boolean;
|
|
139
|
+
bubbles?: boolean;
|
|
140
|
+
};
|
|
141
|
+
actions?: { icon: string; name: string }[];
|
|
50
142
|
};
|
|
51
143
|
|
|
52
144
|
export type Events = {
|
|
53
|
-
|
|
145
|
+
action: { messageId: string; action: string };
|
|
54
146
|
};
|
|
55
147
|
```
|
|
56
148
|
|
|
57
|
-
|
|
149
|
+
## Examples
|
|
150
|
+
|
|
151
|
+
### Minimal markup
|
|
152
|
+
|
|
153
|
+
```html
|
|
154
|
+
<hb-messages-list
|
|
155
|
+
id="thread"
|
|
156
|
+
messages='[{"id":"m1","text":"Hello","timestamp":"2026-04-17T10:00:00.000Z","type":"text","authorId":"a1"}]'
|
|
157
|
+
authors='[{"id":"a1","name":"You","me":true},{"id":"a2","name":"Support"}]'
|
|
158
|
+
></hb-messages-list>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### With bubbles, actions, and options
|
|
162
|
+
|
|
163
|
+
```html
|
|
164
|
+
<hb-messages-list
|
|
165
|
+
id="messages-list-demo"
|
|
166
|
+
messages='[{"id":"m1","text":"Hi","timestamp":"2026-04-17T10:00:00.000Z","type":"text","authorId":"u1"}]'
|
|
167
|
+
authors='[{"id":"u1","name":"You","me":true}]'
|
|
168
|
+
options='{"bubbles":true,"showTimestamp":true,"showAvatar":true,"showName":true}'
|
|
169
|
+
actions='[{"icon":"clipboard","name":"copy"},{"icon":"trash","name":"delete"}]'
|
|
170
|
+
></hb-messages-list>
|
|
171
|
+
<script>
|
|
172
|
+
document.getElementById("messages-list-demo").addEventListener("action", (e) => {
|
|
173
|
+
console.log(e.detail.messageId, e.detail.action);
|
|
174
|
+
});
|
|
175
|
+
</script>
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
Use valid JSON for every attribute value; escape quotes as needed for inline HTML.
|
|
179
|
+
|
|
180
|
+
## Package metadata
|
|
58
181
|
|
|
59
|
-
|
|
182
|
+
- **Custom element:** `hb-messages-list`
|
|
183
|
+
- **Package:** `@htmlbricks/hb-messages-list`
|
package/main.iife.js
CHANGED
|
@@ -334,5 +334,5 @@
|
|
|
334
334
|
.svelte-1d5xrrt::after {box-sizing:inherit;}:host {--hb-messages-list-max-height: 600px;--hb-messages-list-padding: 1rem;--hb-messages-bubble-max-width-mobile: 85%;width:100%;padding:var(--hb-messages-list-padding);max-height:var(--hb-messages-list-max-height);}:host .message-wrapper.svelte-1d5xrrt:hover .message-bubble:where(.svelte-1d5xrrt) {box-shadow:0 4px 12px rgba(10, 10, 10, 0.12);}:host .author-name-wrapper.svelte-1d5xrrt {width:100%;}:host .author-name-wrapper.svelte-1d5xrrt .author-name-spacer:where(.svelte-1d5xrrt) {flex-shrink:0;width:40px;}:host .author-name-wrapper.svelte-1d5xrrt .author-name-content:where(.svelte-1d5xrrt) span:where(.svelte-1d5xrrt) {font-size:1.1rem;line-height:1.2;display:block;padding:0.25rem 0.5rem;border-radius:var(--bulma-radius-small, 0.25rem);}:host .author-name-wrapper.is-justify-content-flex-end.svelte-1d5xrrt .author-name-content:where(.svelte-1d5xrrt) {text-align:right;}:host .author-name-wrapper.is-justify-content-flex-start.svelte-1d5xrrt .author-name-content:where(.svelte-1d5xrrt) {text-align:left;}:host .message-bubble.svelte-1d5xrrt {position:relative;word-wrap:break-word;border-radius:var(--bulma-radius-large, 0.75rem);box-shadow:0 0.125em 0.25em rgba(10, 10, 10, 0.1);}:host .message-bubble.message-bubble--self.svelte-1d5xrrt {background-color:var(--bulma-primary, #00d1b2);color:var(--bulma-primary-invert, #fff);border:1px solid transparent;}:host .message-bubble.message-bubble--peer.svelte-1d5xrrt {background-color:var(--bulma-scheme-main-bis, #f5f5f5);border:1px solid var(--bulma-border, #dbdbdb);color:var(--bulma-text, #363636);}:host .message-bubble.message-bubble--neutral.svelte-1d5xrrt {background-color:var(--bulma-scheme-main-bis, #f5f5f5);border:1px solid var(--bulma-border, #dbdbdb);color:inherit;}:host .hb-code-pre.svelte-1d5xrrt {background-color:var(--bulma-scheme-invert, #1e1e1e);border:1px solid var(--bulma-border, #333);font-family:"Monaco", "Menlo", "Ubuntu Mono", monospace;font-size:0.875rem;overflow-x:auto;color:var(--bulma-text-invert, #d4d4d4);}:host .code-block.svelte-1d5xrrt pre:where(.svelte-1d5xrrt) code:where(.svelte-1d5xrrt) {color:inherit;background:transparent;}:host .message-actions.svelte-1d5xrrt .action-icon-btn:where(.svelte-1d5xrrt) {backdrop-filter:blur(4px);width:2rem;height:2rem;padding:0;border-radius:var(--bulma-radius-rounded, 9999px);}:host .message-actions.svelte-1d5xrrt .action-icon-btn:where(.svelte-1d5xrrt):hover {transform:scale(1.1);box-shadow:0 2px 8px rgba(10, 10, 10, 0.12);}:host .avatar-container.svelte-1d5xrrt .hb-messages-ai-badge:where(.svelte-1d5xrrt) {position:absolute;right:0;top:0;transform:translate(50%, -50%);z-index:1;font-size:0.5rem;padding:2px 4px;line-height:1;}:host .avatar-spacer.svelte-1d5xrrt {width:40px;}:host .message-timestamp.svelte-1d5xrrt,
|
|
335
335
|
:host .message-timestamp-only.svelte-1d5xrrt .message-timestamp:where(.svelte-1d5xrrt) {font-size:0.75rem;color:var(--bulma-text-weak, #7a7a7a);line-height:1;display:flex;align-items:center;white-space:nowrap;}
|
|
336
336
|
@media (max-width: 768px) {:host .message-bubble.svelte-1d5xrrt {max-width:var(--hb-messages-bubble-max-width-mobile);}:host .message-actions.svelte-1d5xrrt {margin-top:0.5rem;}
|
|
337
|
-
}`};function yi(e,t){Ve(t,!0),Ar(e,vi);function n(e,n){t.$$host.dispatchEvent(new CustomEvent(e,{detail:n}))}let r={showTimestamp:!0,
|
|
337
|
+
}`};function yi(e,t){Ve(t,!0),Ar(e,vi);function n(e,n){t.$$host.dispatchEvent(new CustomEvent(e,{detail:n}))}let r={showTimestamp:!0,showAvatar:!0,showName:!0,bubbles:!1},i=Vr(t,`id`,7,``),a=Vr(t,`messages`,7),o=Vr(t,`authors`,7),s=Vr(t,`options`,7,r),c=Vr(t,`actions`,23,()=>[]);function l(e=!1){return e?`data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIgZmlsbD0iIzYzNjZGMCIvPjxwYXRoIGQ9Ik0yMCAxMEMxNS41OCAxMCAxMiAxMy41OCAxMiAxOEMxMiAyMi40MiAxNS41OCAyNiAyMCAyNkMyNC40MiAyNiAyOCAyMi40MiAyOCAxOEMyOCAxMy41OCAyNC40MiAxMCAyMCAxMFpNMjAgMjRDMTYuNjkgMjQgMTQgMjEuMzEgMTQgMThDMTQgMTQuNjkgMTYuNjkgMTIgMjAgMTJDMjMuMzEgMTIgMjYgMTQuNjkgMjYgMThDMjYgMjEuMzEgMjMuMzEgMjQgMjAgMjRaIiBmaWxsPSJ3aGl0ZSIvPjxwYXRoIGQ9Ik0xNiAxNkgxNlYxOEgxNlYxNloiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTI0IDE2SDI0VjE4SDI0VjE2WiIgZmlsbD0id2hpdGUiLz48cGF0aCBkPSJNMTggMjBIMjJWMjJIMThWMjBaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==`:`data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIgZmlsbD0iIzZDNzU3NyIvPjxwYXRoIGQ9Ik0yMCAxMEMxNS41OCAxMCAxMiAxMy41OCAxMiAxOEMxMiAyMi40MiAxNS41OCAyNiAyMCAyNkMyNC40MiAyNiAyOCAyMi40MiAyOCAxOEMyOCAxMy41OCAyNC40MiAxMCAyMCAxMFpNMjAgMjRDMTYuNjkgMjQgMTQgMjEuMzEgMTQgMThDMTQgMTQuNjkgMTYuNjkgMTIgMjAgMTJDMjMuMzEgMTIgMjYgMTQuNjkgMjYgMThDMjYgMjEuMzEgMjMuMzEgMjQgMjAgMjRaIiBmaWxsPSJ3aGl0ZSIvPjxwYXRoIGQ9Ik0xNiAxNkgxNlYxOEgxNlYxNloiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTI0IDE2SDI0VjE4SDI0VjE2WiIgZmlsbD0id2hpdGUiLz48cGF0aCBkPSJNMTggMjBIMjJWMjJIMThWMjBaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==`}let u=kt(()=>!a()||!o()?[]:a()?.filter?.(e=>o()?.find?.(t=>t?.id&&e?.authorId&&t.id===e.authorId)?.id)?.map?.((e,t)=>{let n=o()?.find?.(t=>t.id===e.authorId),r=new Date(e.timestamp).toDateString()===new Date().toDateString(),i=new Date(e.timestamp),c=i.toLocaleTimeString().split(`:`)[0]+`:`+i.toLocaleTimeString().split(`:`)[1],l=i.toLocaleString().split(` `)[0]+` `+i.toLocaleTimeString().split(`:`)[0]+`:`+i.toLocaleTimeString().split(`:`)[1],u=r?c:l,d=t>0?a()[t-1]:null,f=!!(d&&d.authorId===e.authorId&&new Date(e.timestamp).getTime()-new Date(d.timestamp).getTime()<3e5),p=!!(s().showAvatar&&(!f||t===0));return{...e,author:n,dateString:u,showAvatar:p,isConsecutive:f}})||[]);fn(()=>{if(typeof a()==`string`)try{a(JSON.parse(a()))}catch(e){console.error(`error parsing messages`,e)}if(typeof c()==`string`)try{c(JSON.parse(c()))}catch(e){console.error(`error parsing actions`,e)}}),fn(()=>{if(typeof s()==`string`)try{s(JSON.parse(s())),s({...r,...s()})}catch(e){console.error(`error parsing options`,e)}}),fn(()=>{if(typeof o()==`string`)try{o(JSON.parse(o()))}catch(e){console.error(`error parsing authors`,e)}});var d={get id(){return i()},set id(e=``){i(e),dt()},get messages(){return a()},set messages(e){a(e),dt()},get authors(){return o()},set authors(e){o(e),dt()},get options(){return s()},set options(e=r){s(e),dt()},get actions(){return c()},set actions(e=[]){c(e),dt()}},f=cr();return kr(`1d5xrrt`,e=>{Q(e,Jr())}),Cr(tn(f),17,()=>X(u),e=>e.id,(e,t)=>{var r=_i(),i=tn(r),a=e=>{var n=Zr(),r=I(n),i=e=>{Q(e,Yr())};$(r,e=>{!X(t).author.me&&s().showAvatar&&e(i)});var a=L(r,2),o=I(a),c=I(o,!0);D(o),D(a);var l=L(a,2),u=e=>{Q(e,Xr())};$(l,e=>{X(t).author.me&&s().showAvatar&&e(u)}),D(n),z(()=>{Nr(n,1,`author-name-wrapper is-flex is-align-items-center mb-2 ${X(t).author.me?`is-justify-content-flex-end`:`is-justify-content-flex-start`}`,`svelte-1d5xrrt`),Nr(o,1,`has-text-weight-semibold ${X(t).author.me?`has-text-secondary`:`has-text-primary`}`,`svelte-1d5xrrt`),dr(c,X(t).author.me?`You`:X(t).author.name)}),Q(e,n)};$(i,e=>{s().showName&&e(a)});var o=L(i,2),u=I(o),d=e=>{var n=ti(),r=I(n),i=e=>{var n=$r(),r=I(n),i=L(r,2),a=e=>{Q(e,Qr())};$(i,e=>{X(t).author.isAI&&e(a)}),D(n),z(e=>{Lr(r,`src`,e),Lr(r,`alt`,X(t).author.name)},[()=>X(t).author.avatar||l(X(t).author.isAI)]),Q(e,n)},a=e=>{Q(e,ei())};$(r,e=>{X(t).showAvatar?e(i):e(a,-1)}),D(n),Q(e,n)};$(u,e=>{!X(t).author.me&&s().showAvatar&&e(d)});var f=L(u,2),p=I(f),m=e=>{var n=ai(),r=I(n),i=I(r),a=e=>{var n=ri(),r=I(n),i=e=>{var n=ni(),r=I(n),i=I(r,!0);D(r),D(n),z(()=>dr(i,X(t).language)),Q(e,n)};$(r,e=>{X(t).language&&e(i)});var a=L(r,2),o=I(a),s=I(o,!0);D(o),D(a),D(n),z(()=>dr(s,X(t).text)),Q(e,n)},o=e=>{var n=ii(),r=I(n,!0);D(n),z(()=>dr(r,X(t).text)),Q(e,n)};$(i,e=>{X(t).type===`code`?e(a):e(o,-1)}),D(r),D(n),z(()=>{Lr(n,`part`,`message-bubble-${X(t).author.me?`me`:`them`}`),Nr(n,1,`message-bubble px-4 py-4 ${X(t).author.me?`message-bubble--self`:`message-bubble--peer`}`,`svelte-1d5xrrt`)}),Q(e,n)},h=e=>{var n=li(),r=I(n),i=I(r),a=e=>{var n=si(),r=I(n),i=e=>{var n=oi(),r=I(n),i=I(r,!0);D(r),D(n),z(()=>dr(i,X(t).language)),Q(e,n)};$(r,e=>{X(t).language&&e(i)});var a=L(r,2),o=I(a),s=I(o,!0);D(o),D(a),D(n),z(()=>dr(s,X(t).text)),Q(e,n)},o=e=>{var n=ci(),r=I(n,!0);D(n),z(()=>dr(r,X(t).text)),Q(e,n)};$(i,e=>{X(t).type===`code`?e(a):e(o,-1)}),D(r),D(n),Q(e,n)};$(p,e=>{s().bubbles?e(m):e(h,-1)});var g=L(p,2),_=e=>{var r=fi(),i=I(r);Cr(i,17,c,yr,(e,r)=>{var i=ui(),a=I(i);D(i),z(()=>{Lr(i,`title`,X(r).name),Lr(i,`aria-label`,X(r).name),Nr(a,1,`bi bi-${X(r).icon??``}`,`svelte-1d5xrrt`)}),er(`click`,i,()=>n(`action`,{messageId:X(t).id,action:X(r).name})),Q(e,i)});var a=L(i,2),o=e=>{var n=di(),r=I(n,!0);D(n),z(()=>dr(r,X(t).dateString)),Q(e,n)};$(a,e=>{s().showTimestamp&&e(o)}),D(r),z(()=>Nr(r,1,`message-actions is-flex is-flex-wrap-wrap is-align-items-center is-gap-1 mt-2 ${X(t).author.me?`is-justify-content-flex-end`:`is-justify-content-flex-start`}`,`svelte-1d5xrrt`)),Q(e,r)},v=e=>{var n=pi(),r=I(n),i=I(r,!0);D(r),D(n),z(()=>{Nr(n,1,`message-timestamp-only is-flex mt-2 ${X(t).author.me?`is-justify-content-flex-end`:`is-justify-content-flex-start`}`,`svelte-1d5xrrt`),dr(i,X(t).dateString)}),Q(e,n)};$(g,e=>{c()?.length?e(_):s().showTimestamp&&e(v,1)}),D(f);var y=L(f,2),b=e=>{var n=gi(),r=I(n),i=e=>{var n=mi();z(e=>Lr(n,`src`,e),[()=>X(t).author.avatar||l(!1)]),Q(e,n)},a=e=>{Q(e,hi())};$(r,e=>{X(t).showAvatar?e(i):e(a,-1)}),D(n),Q(e,n)};$(y,e=>{X(t).author.me&&s().showAvatar&&e(b)}),D(o),z(()=>Nr(o,1,`message-wrapper is-flex mb-4 ${X(t).author.me?`is-justify-content-flex-end`:`is-justify-content-flex-start`}`,`svelte-1d5xrrt`)),Q(e,r)}),Q(e,f),He(d)}tr([`click`]),customElements.define(`hb-messages-list`,qr(yi,{id:{},messages:{},authors:{},options:{},actions:{}},[],[],{mode:`open`})),e.Component=yi})(this[`messages-list`]=this[`messages-list`]||{});
|
|
338
338
|
//# sourceMappingURL=main.iife.js.map
|