@htmlbricks/hb-messages-send 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 +121 -20
- package/manifest.json +63 -36
- package/package.json +1 -1
- package/types/webcomponent.type.d.ts +19 -4
- package/types/webcomponent_events.type.d.json +58 -26
package/README.md
CHANGED
|
@@ -1,33 +1,134 @@
|
|
|
1
|
-
# hb-messages-send
|
|
1
|
+
# `hb-messages-send`
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**Category:** messaging · **Tags:** messaging, chat · **Package:** `@htmlbricks/hb-messages-send`
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Overview
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
`hb-messages-send` is a message composer for chat-style UIs. Users type in a textarea, optionally attach files, toggle tag chips, and send with the send control or **Enter** (**Shift+Enter** inserts a newline). When the message is sent, the element dispatches a **`sendMessage`** custom event whose `detail` carries the current text, your optional **`id`**, the selected tag ids, and the staged files.
|
|
8
|
+
|
|
9
|
+
The UI is built with **Bulma 1.x** inside the shadow root. **Bootstrap Icons** are loaded from jsDelivr in the component head for attach, send, tag, maximize, and file-type icons.
|
|
10
|
+
|
|
11
|
+
## Behavior
|
|
12
|
+
|
|
13
|
+
- **Text:** Bound to the composer. The send button stays disabled until there is non-empty text **or** at least one attached file.
|
|
14
|
+
- **Send:** Click the send button, or press **Enter** without **Shift**. An empty composer with no files logs a console warning and does not dispatch.
|
|
15
|
+
- **Expandable (`expandable`):** When enabled, the textarea grows with content up to an internal cap; when that cap is reached, a **maximize / minimize** control appears so users can expand the writing area (400px height while maximized).
|
|
16
|
+
- **Files (`files`):** If you pass a `files` configuration object, a paperclip control appears. **`mode: "single"`** keeps at most one file; **`mode: "multiple"`** allows many. Images get a thumbnail preview; other types show an icon by MIME type. Users can remove attachments before sending.
|
|
17
|
+
- **Tags (`tags`):** Optional chip buttons built from your definitions. Each tag must have an **`id`** (used in the event payload). **`icon`** is the Bootstrap Icons glyph name **without** the `bi-` prefix (the markup uses `bi bi-{icon}`). **`label`** is shown on the chip. **`color`** is optional; if omitted, the component picks a color for that chip.
|
|
18
|
+
|
|
19
|
+
## Styling (Bulma and CSS variables)
|
|
20
|
+
|
|
21
|
+
The component forwards Bulma’s light theme and CSS variables on `:host`. Prefer **`--bulma-*`** (and the component **`--tag-color`**) from the host page to match your site theme. See [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/).
|
|
22
|
+
|
|
23
|
+
| Variable | Role |
|
|
24
|
+
|----------|------|
|
|
25
|
+
| `--bulma-primary` | Send button background. |
|
|
26
|
+
| `--bulma-primary-invert` | Icon color on the send button. |
|
|
27
|
+
| `--bulma-link` | Focus ring, file-attach accent, maximize control. |
|
|
28
|
+
| `--bulma-border` | Panel and file card borders. |
|
|
29
|
+
| `--bulma-text` | Default input and label color for readable text on the composer surface. |
|
|
30
|
+
| `--bulma-text-weak` | Muted text and disabled send state. |
|
|
31
|
+
| `--bulma-scheme-main` | Composer surface background. |
|
|
32
|
+
| `--bulma-scheme-main-bis` | File strip and toolbar background. |
|
|
33
|
+
| `--tag-color` | Accent for tag and file controls (per-tag overrides use inline `--tag-color` from each tag’s `color` or a fallback palette). |
|
|
34
|
+
|
|
35
|
+
### CSS parts
|
|
36
|
+
|
|
37
|
+
None.
|
|
38
|
+
|
|
39
|
+
### HTML slots
|
|
40
|
+
|
|
41
|
+
None.
|
|
42
|
+
|
|
43
|
+
## Custom element
|
|
44
|
+
|
|
45
|
+
`hb-messages-send`
|
|
46
|
+
|
|
47
|
+
## Attributes and properties (HTML consumers)
|
|
48
|
+
|
|
49
|
+
Web component **attributes** are strings. Use **`yes`** / **`no`** for booleans where noted (the implementation also treats the string **`true`** as enabled for **`expandable`**). Pass **objects and arrays as JSON strings** (e.g. `tags`, `files`).
|
|
50
|
+
|
|
51
|
+
| Name | Required | Description |
|
|
52
|
+
|------|----------|-------------|
|
|
53
|
+
| `id` | No | String echoed back on **`sendMessage`** so you can correlate the composer instance (e.g. thread or channel id). |
|
|
54
|
+
| `text` | No | Initial / current message text. |
|
|
55
|
+
| `expandable` | No | **`yes`** / **`no`** (or **`true`** / other) — taller minimum textarea, auto-grow, and maximize affordance when content hits the cap. |
|
|
56
|
+
| `tags` | No | JSON array of `{ id: string; label?: string; icon?: string; color?: string }`. **`id`** is required for selection; **`icon`** is a Bootstrap Icons name without the `bi-` prefix. |
|
|
57
|
+
| `files` | No | JSON object `{ "mode": "single" \| "multiple" }`. When set, the file attach control is shown and enforces single vs multi selection. |
|
|
58
|
+
|
|
59
|
+
The authoring **`Component`** type may list **`style`** for TypeScript wrappers; the inner UI is themed with **CSS variables** on `:host`, not that prop.
|
|
60
|
+
|
|
61
|
+
## Events
|
|
62
|
+
|
|
63
|
+
| Name | `detail` shape |
|
|
64
|
+
|------|----------------|
|
|
65
|
+
| `sendMessage` | **`text`:** `string` — composer text. **`id`:** `string` — value of the `id` prop. **`tags`:** `string[]` — ids of tags the user toggled on. **`files`:** array of staged items (`MessageSendFileItem`): **`id`**, **`name`**, **`mimetype`**, **`fileSize`**, **`content`** (`File`), optional **`objectUrl`**. Use **`detail.files.map((f) => f.content)`** when you need plain **`File`** instances. |
|
|
66
|
+
|
|
67
|
+
## TypeScript (authoring / wrappers)
|
|
8
68
|
|
|
9
69
|
```typescript
|
|
70
|
+
export type MessageSendFileItem = {
|
|
71
|
+
id: string;
|
|
72
|
+
name: string;
|
|
73
|
+
mimetype: string;
|
|
74
|
+
fileSize: number;
|
|
75
|
+
content: File;
|
|
76
|
+
objectUrl?: string;
|
|
77
|
+
};
|
|
78
|
+
|
|
10
79
|
export type Component = {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
80
|
+
id?: string;
|
|
81
|
+
style?: string;
|
|
82
|
+
text?: string;
|
|
83
|
+
expandable?: boolean;
|
|
84
|
+
tags?: {
|
|
85
|
+
label?: string;
|
|
86
|
+
icon?: string;
|
|
87
|
+
id: string;
|
|
88
|
+
color?: string;
|
|
89
|
+
}[];
|
|
90
|
+
files?: {
|
|
91
|
+
mode: "single" | "multiple";
|
|
92
|
+
};
|
|
24
93
|
};
|
|
25
94
|
|
|
26
95
|
export type Events = {
|
|
27
|
-
|
|
96
|
+
sendMessage: {
|
|
97
|
+
text?: string;
|
|
98
|
+
id: string;
|
|
99
|
+
tags: string[];
|
|
100
|
+
files: MessageSendFileItem[];
|
|
101
|
+
};
|
|
28
102
|
};
|
|
29
103
|
```
|
|
30
104
|
|
|
31
|
-
|
|
105
|
+
## Examples
|
|
106
|
+
|
|
107
|
+
### Minimal
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<hb-messages-send expandable="yes"></hb-messages-send>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Tags, single file, and initial text
|
|
32
114
|
|
|
33
|
-
|
|
115
|
+
```html
|
|
116
|
+
<hb-messages-send
|
|
117
|
+
id="thread-42"
|
|
118
|
+
text="Reply here…"
|
|
119
|
+
expandable="yes"
|
|
120
|
+
tags='[{"id":"idea","label":"Idea","icon":"lightbulb"},{"id":"bug","label":"Bug","icon":"bug-fill"}]'
|
|
121
|
+
files='{"mode":"single"}'
|
|
122
|
+
></hb-messages-send>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Listen for sends (vanilla JS)
|
|
126
|
+
|
|
127
|
+
```javascript
|
|
128
|
+
const el = document.querySelector("hb-messages-send");
|
|
129
|
+
el.addEventListener("sendMessage", (e) => {
|
|
130
|
+
const { text, id, tags, files } = e.detail;
|
|
131
|
+
const blobs = files.map((f) => f.content);
|
|
132
|
+
// Upload blobs, append to thread, clear composer via property if needed, etc.
|
|
133
|
+
});
|
|
134
|
+
```
|
package/manifest.json
CHANGED
|
@@ -12,32 +12,7 @@
|
|
|
12
12
|
"properties": {
|
|
13
13
|
"files": {
|
|
14
14
|
"items": {
|
|
15
|
-
"
|
|
16
|
-
"properties": {
|
|
17
|
-
"lastModified": {
|
|
18
|
-
"type": "number"
|
|
19
|
-
},
|
|
20
|
-
"name": {
|
|
21
|
-
"type": "string"
|
|
22
|
-
},
|
|
23
|
-
"size": {
|
|
24
|
-
"type": "number"
|
|
25
|
-
},
|
|
26
|
-
"type": {
|
|
27
|
-
"type": "string"
|
|
28
|
-
},
|
|
29
|
-
"webkitRelativePath": {
|
|
30
|
-
"type": "string"
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
"required": [
|
|
34
|
-
"lastModified",
|
|
35
|
-
"name",
|
|
36
|
-
"size",
|
|
37
|
-
"type",
|
|
38
|
-
"webkitRelativePath"
|
|
39
|
-
],
|
|
40
|
-
"type": "object"
|
|
15
|
+
"$ref": "#/definitions/MessageSendFileItem"
|
|
41
16
|
},
|
|
42
17
|
"type": "array"
|
|
43
18
|
},
|
|
@@ -66,6 +41,63 @@
|
|
|
66
41
|
"sendMessage"
|
|
67
42
|
],
|
|
68
43
|
"type": "object"
|
|
44
|
+
},
|
|
45
|
+
"MessageSendFileItem": {
|
|
46
|
+
"additionalProperties": false,
|
|
47
|
+
"description": "Staged file row emitted on `sendMessage` (internal shape from the composer).",
|
|
48
|
+
"properties": {
|
|
49
|
+
"content": {
|
|
50
|
+
"additionalProperties": false,
|
|
51
|
+
"properties": {
|
|
52
|
+
"lastModified": {
|
|
53
|
+
"type": "number"
|
|
54
|
+
},
|
|
55
|
+
"name": {
|
|
56
|
+
"type": "string"
|
|
57
|
+
},
|
|
58
|
+
"size": {
|
|
59
|
+
"type": "number"
|
|
60
|
+
},
|
|
61
|
+
"type": {
|
|
62
|
+
"type": "string"
|
|
63
|
+
},
|
|
64
|
+
"webkitRelativePath": {
|
|
65
|
+
"type": "string"
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
"required": [
|
|
69
|
+
"lastModified",
|
|
70
|
+
"name",
|
|
71
|
+
"size",
|
|
72
|
+
"type",
|
|
73
|
+
"webkitRelativePath"
|
|
74
|
+
],
|
|
75
|
+
"type": "object"
|
|
76
|
+
},
|
|
77
|
+
"fileSize": {
|
|
78
|
+
"type": "number"
|
|
79
|
+
},
|
|
80
|
+
"id": {
|
|
81
|
+
"type": "string"
|
|
82
|
+
},
|
|
83
|
+
"mimetype": {
|
|
84
|
+
"type": "string"
|
|
85
|
+
},
|
|
86
|
+
"name": {
|
|
87
|
+
"type": "string"
|
|
88
|
+
},
|
|
89
|
+
"objectUrl": {
|
|
90
|
+
"type": "string"
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
"required": [
|
|
94
|
+
"id",
|
|
95
|
+
"name",
|
|
96
|
+
"mimetype",
|
|
97
|
+
"fileSize",
|
|
98
|
+
"content"
|
|
99
|
+
],
|
|
100
|
+
"type": "object"
|
|
69
101
|
}
|
|
70
102
|
}
|
|
71
103
|
},
|
|
@@ -190,7 +222,7 @@
|
|
|
190
222
|
"name": "--bulma-text",
|
|
191
223
|
"valueType": "color",
|
|
192
224
|
"defaultValue": "#363636",
|
|
193
|
-
"description": "
|
|
225
|
+
"description": "Controls the default composer input and label color so typed messages and helper copy remain readable on your chosen panel background."
|
|
194
226
|
},
|
|
195
227
|
{
|
|
196
228
|
"name": "--bulma-text-weak",
|
|
@@ -213,16 +245,11 @@
|
|
|
213
245
|
{
|
|
214
246
|
"name": "--tag-color",
|
|
215
247
|
"valueType": "color",
|
|
216
|
-
"defaultValue": "",
|
|
217
|
-
"description": "Per-tag and file-button border/fill (
|
|
248
|
+
"defaultValue": "#485fc7",
|
|
249
|
+
"description": "Per-tag and file-button border/fill (defaults from `--bulma-link` inline in markup)."
|
|
218
250
|
}
|
|
219
251
|
],
|
|
220
|
-
"parts": [
|
|
221
|
-
{
|
|
222
|
-
"name": "testpart",
|
|
223
|
-
"description": "test css part on 2 div tag"
|
|
224
|
-
}
|
|
225
|
-
]
|
|
252
|
+
"parts": []
|
|
226
253
|
},
|
|
227
254
|
"contributors": [],
|
|
228
255
|
"htmlSlots": [],
|
|
@@ -303,5 +330,5 @@
|
|
|
303
330
|
"size": {},
|
|
304
331
|
"iifePath": "main.iife.js",
|
|
305
332
|
"repoName": "@htmlbricks/hb-messages-send",
|
|
306
|
-
"version": "0.71.
|
|
333
|
+
"version": "0.71.37"
|
|
307
334
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@htmlbricks/hb-messages-send",
|
|
3
|
-
"version": "0.71.
|
|
3
|
+
"version": "0.71.37",
|
|
4
4
|
"contributors": [],
|
|
5
5
|
"description": "Message composer with auto-growing textarea (optional `expandable` and maximize control), Enter-to-send, file attachments with previews (`files.mode` single or multiple), and optional `tags` as toggleable chips. Dispatches `sendMessage` with `text`, selected `tags`, and staged `files` when the user sends.",
|
|
6
6
|
"licenses": [
|
|
@@ -1,3 +1,13 @@
|
|
|
1
|
+
/** Staged file row emitted on `sendMessage` (internal shape from the composer). */
|
|
2
|
+
export type MessageSendFileItem = {
|
|
3
|
+
id: string;
|
|
4
|
+
name: string;
|
|
5
|
+
mimetype: string;
|
|
6
|
+
fileSize: number;
|
|
7
|
+
content: File;
|
|
8
|
+
objectUrl?: string;
|
|
9
|
+
};
|
|
10
|
+
|
|
1
11
|
export type Component = {
|
|
2
12
|
id?: string;
|
|
3
13
|
style?: string;
|
|
@@ -6,14 +16,19 @@ export type Component = {
|
|
|
6
16
|
tags?: {
|
|
7
17
|
label?: string;
|
|
8
18
|
icon?: string;
|
|
9
|
-
id: string
|
|
19
|
+
id: string;
|
|
10
20
|
color?: string;
|
|
11
|
-
}[]
|
|
21
|
+
}[];
|
|
12
22
|
files?: {
|
|
13
23
|
mode: "single" | "multiple";
|
|
14
|
-
}
|
|
24
|
+
};
|
|
15
25
|
};
|
|
16
26
|
|
|
17
27
|
export type Events = {
|
|
18
|
-
sendMessage: {
|
|
28
|
+
sendMessage: {
|
|
29
|
+
text?: string;
|
|
30
|
+
id: string;
|
|
31
|
+
tags: string[];
|
|
32
|
+
files: MessageSendFileItem[];
|
|
33
|
+
};
|
|
19
34
|
};
|
|
@@ -10,32 +10,7 @@
|
|
|
10
10
|
"properties": {
|
|
11
11
|
"files": {
|
|
12
12
|
"items": {
|
|
13
|
-
"
|
|
14
|
-
"properties": {
|
|
15
|
-
"lastModified": {
|
|
16
|
-
"type": "number"
|
|
17
|
-
},
|
|
18
|
-
"name": {
|
|
19
|
-
"type": "string"
|
|
20
|
-
},
|
|
21
|
-
"size": {
|
|
22
|
-
"type": "number"
|
|
23
|
-
},
|
|
24
|
-
"type": {
|
|
25
|
-
"type": "string"
|
|
26
|
-
},
|
|
27
|
-
"webkitRelativePath": {
|
|
28
|
-
"type": "string"
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
"required": [
|
|
32
|
-
"lastModified",
|
|
33
|
-
"name",
|
|
34
|
-
"size",
|
|
35
|
-
"type",
|
|
36
|
-
"webkitRelativePath"
|
|
37
|
-
],
|
|
38
|
-
"type": "object"
|
|
13
|
+
"$ref": "#/definitions/MessageSendFileItem"
|
|
39
14
|
},
|
|
40
15
|
"type": "array"
|
|
41
16
|
},
|
|
@@ -64,6 +39,63 @@
|
|
|
64
39
|
"sendMessage"
|
|
65
40
|
],
|
|
66
41
|
"type": "object"
|
|
42
|
+
},
|
|
43
|
+
"MessageSendFileItem": {
|
|
44
|
+
"additionalProperties": false,
|
|
45
|
+
"description": "Staged file row emitted on `sendMessage` (internal shape from the composer).",
|
|
46
|
+
"properties": {
|
|
47
|
+
"content": {
|
|
48
|
+
"additionalProperties": false,
|
|
49
|
+
"properties": {
|
|
50
|
+
"lastModified": {
|
|
51
|
+
"type": "number"
|
|
52
|
+
},
|
|
53
|
+
"name": {
|
|
54
|
+
"type": "string"
|
|
55
|
+
},
|
|
56
|
+
"size": {
|
|
57
|
+
"type": "number"
|
|
58
|
+
},
|
|
59
|
+
"type": {
|
|
60
|
+
"type": "string"
|
|
61
|
+
},
|
|
62
|
+
"webkitRelativePath": {
|
|
63
|
+
"type": "string"
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"required": [
|
|
67
|
+
"lastModified",
|
|
68
|
+
"name",
|
|
69
|
+
"size",
|
|
70
|
+
"type",
|
|
71
|
+
"webkitRelativePath"
|
|
72
|
+
],
|
|
73
|
+
"type": "object"
|
|
74
|
+
},
|
|
75
|
+
"fileSize": {
|
|
76
|
+
"type": "number"
|
|
77
|
+
},
|
|
78
|
+
"id": {
|
|
79
|
+
"type": "string"
|
|
80
|
+
},
|
|
81
|
+
"mimetype": {
|
|
82
|
+
"type": "string"
|
|
83
|
+
},
|
|
84
|
+
"name": {
|
|
85
|
+
"type": "string"
|
|
86
|
+
},
|
|
87
|
+
"objectUrl": {
|
|
88
|
+
"type": "string"
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"required": [
|
|
92
|
+
"id",
|
|
93
|
+
"name",
|
|
94
|
+
"mimetype",
|
|
95
|
+
"fileSize",
|
|
96
|
+
"content"
|
|
97
|
+
],
|
|
98
|
+
"type": "object"
|
|
67
99
|
}
|
|
68
100
|
}
|
|
69
101
|
}
|