@c2n/chat-input 0.0.6 → 0.0.7
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 +22 -2
- package/dist/chat-input.js +218 -110
- package/package.json +18 -6
- package/react.d.ts +24 -0
- package/react.js +3 -0
- package/types/src/chat-input.d.ts +114 -67
- package/types/src/chat-input.d.ts.map +1 -1
- package/vue.d.ts +40 -0
- package/vue.js +3 -0
package/README.md
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
-
#
|
|
1
|
+
# `@c2n/chat-input`
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
An auto-growing Lit message composer with keyboard submission, a built-in send button, slotted toolbar actions and native form participation.
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm install @c2n/chat-input
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<script type="module">
|
|
11
|
+
import '@c2n/chat-input'
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<c2-chat-input aria-label="Message" placeholder="Ask anything…"></c2-chat-input>
|
|
15
|
+
|
|
16
|
+
<script>
|
|
17
|
+
document.querySelector('c2-chat-input').addEventListener('submit-message', (event) => {
|
|
18
|
+
console.log(event.detail)
|
|
19
|
+
})
|
|
20
|
+
</script>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Enter submits, while Shift+Enter and Alt+Enter insert a newline. The `toolbar` and `send-icon` slots customize the action row. See `custom-elements.json` for the complete API and theming surface.
|
package/dist/chat-input.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import { LitElement, html,
|
|
2
|
-
import {
|
|
1
|
+
import { LitElement, html, unsafeCSS } from "lit";
|
|
2
|
+
import { property, query, state } from "lit/decorators.js";
|
|
3
|
+
import { customElement } from "@c2n/core/element-helper.js";
|
|
3
4
|
import { redispatchEvent } from "@c2n/core/dom-helper.js";
|
|
5
|
+
import { ifDefined } from "lit/directives/if-defined.js";
|
|
4
6
|
import { live } from "lit/directives/live.js";
|
|
5
|
-
import { styleMap } from "lit/directives/style-map.js";
|
|
6
|
-
import { addClasses } from "@c2n/core/css-helper.js";
|
|
7
|
-
import { classMap } from "lit/directives/class-map.js";
|
|
8
7
|
//#region src/chat-input.scss?inline
|
|
9
|
-
var chat_input_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: block;\n}\n\n
|
|
8
|
+
var chat_input_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: block;\n max-width: 100%;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.container {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: var(--c2-chat-input__container--gap,8px);\n width: 100%;\n padding: var(--c2-chat-input__container--padding,10px);\n border: var(--c2-chat-input__container--border,1px solid #bcbcc6);\n border-radius: var(--c2-chat-input__container--border-radius,16px);\n background: var(--c2-chat-input__container--background,#ffffff);\n color: var(--c2-chat-input__container--color,#18181b);\n cursor: text;\n transition: border-color 250ms cubic-bezier(0.2, 0, 0, 1), box-shadow 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.container:hover {\n border: var(--c2-chat-input__container__hover--border,1px solid #a1a1aa);\n}\n\n.container:focus-within {\n border: var(--c2-chat-input__container__focus--border,1px solid #476ef9);\n box-shadow: var(--c2-chat-input__container__focus--box-shadow,0 0 0 3px rgba(71, 110, 249, 0.2));\n}\n\n.container:has(.textarea:invalid) {\n border: var(--c2-chat-input__container__invalid--border,1px solid #dc2626);\n}\n\n.container:has(.textarea:invalid):focus-within {\n box-shadow: var(--c2-chat-input__container__invalid__focus--box-shadow,0 0 0 3px rgba(220, 38, 38, 0.2));\n}\n\n.textarea {\n box-sizing: border-box;\n display: block;\n width: 100%;\n min-width: 0;\n max-height: var(--c2-chat-input__textarea--max-height,192px);\n margin: 0;\n padding: var(--c2-chat-input__textarea--padding,2px);\n resize: none;\n overflow-x: hidden;\n overflow-y: auto;\n border: 0;\n outline: 0;\n background: transparent;\n color: inherit;\n font-family: var(--c2-chat-input__textarea--font-family,inherit);\n font-size: var(--c2-chat-input__textarea--font-size,14px);\n line-height: var(--c2-chat-input__textarea--line-height,22px);\n caret-color: var(--c2-chat-input__textarea--caret-color,currentColor);\n text-align: inherit;\n scrollbar-width: thin;\n scrollbar-color: color-mix(in srgb, currentColor 22%, transparent) transparent;\n}\n\n.textarea::placeholder {\n color: var(--c2-chat-input__placeholder--color,#71717a);\n opacity: 1;\n}\n\n.actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--c2-chat-input__actions--gap,6px);\n min-width: 0;\n}\n\n.toolbar {\n display: flex;\n flex: 1;\n align-items: center;\n gap: var(--c2-chat-input__actions--gap,6px);\n min-width: 0;\n}\n\n.send-button {\n --c2-feather-icon--size: var(--c2-chat-input__send-icon--size,18px);\n all: unset;\n box-sizing: border-box;\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--c2-chat-input__send-button--size,32px);\n height: var(--c2-chat-input__send-button--size,32px);\n border-radius: var(--c2-chat-input__send-button--border-radius,10px);\n background: var(--c2-chat-input__send-button--background,rgb(2, 101, 220));\n color: var(--c2-chat-input__send-button--color,#ffffff);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background-color 250ms cubic-bezier(0.2, 0, 0, 1), opacity 250ms cubic-bezier(0.2, 0, 0, 1), transform 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.send-button:hover:not(:disabled) {\n background: var(--c2-chat-input__send-button__hover--background,rgb(1, 84, 184));\n}\n\n.send-button:active:not(:disabled) {\n background: var(--c2-chat-input__send-button__active--background,rgb(1, 70, 154));\n transform: scale(0.96);\n}\n\n.send-button:focus-visible {\n outline: var(--c2-chat-input__send-button__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n outline-offset: 2px;\n}\n\n.send-button:disabled {\n cursor: default;\n opacity: var(--c2-chat-input__send-button__disabled--opacity,0.38);\n}\n\n.send-button slot,\n.send-button svg,\n.send-button ::slotted(*) {\n display: block;\n width: var(--c2-chat-input__send-icon--size,18px);\n height: var(--c2-chat-input__send-icon--size,18px);\n}\n\n:host([disabled]) .container {\n cursor: not-allowed;\n opacity: var(--c2-chat-input__container__disabled--opacity,0.5);\n}\n\n:host([disabled]) .container:hover {\n border: var(--c2-chat-input__container--border,1px solid #bcbcc6);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .container,\n .send-button {\n transition: none;\n }\n}";
|
|
10
9
|
//#endregion
|
|
11
10
|
//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
|
|
12
11
|
function __decorate(decorators, target, key, desc) {
|
|
@@ -20,147 +19,256 @@ function __decorate(decorators, target, key, desc) {
|
|
|
20
19
|
var ChatInput = class ChatInput extends LitElement {
|
|
21
20
|
constructor(..._args) {
|
|
22
21
|
super(..._args);
|
|
22
|
+
this.internals = this.attachInternals();
|
|
23
|
+
this.customValidityMessage = "";
|
|
23
24
|
this.placeholder = "";
|
|
24
25
|
this.value = "";
|
|
26
|
+
this.name = "";
|
|
27
|
+
this.disabled = false;
|
|
28
|
+
this.required = false;
|
|
29
|
+
this.maxLength = -1;
|
|
30
|
+
this.minLength = -1;
|
|
31
|
+
this.minRows = 1;
|
|
32
|
+
this.enterBehavior = "submit";
|
|
33
|
+
this.ariaLabel = null;
|
|
34
|
+
this.sendLabel = "Send message";
|
|
25
35
|
this.dirty = false;
|
|
26
|
-
this.
|
|
27
|
-
this.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
};
|
|
32
|
-
this.inputDimensions = null;
|
|
36
|
+
this.disabledByForm = false;
|
|
37
|
+
this.resizeFrame = 0;
|
|
38
|
+
}
|
|
39
|
+
static {
|
|
40
|
+
this.formAssociated = true;
|
|
33
41
|
}
|
|
34
42
|
static {
|
|
35
43
|
this.styles = unsafeCSS(chat_input_default);
|
|
36
44
|
}
|
|
37
|
-
|
|
38
|
-
|
|
45
|
+
static {
|
|
46
|
+
this.shadowRootOptions = {
|
|
47
|
+
...LitElement.shadowRootOptions,
|
|
48
|
+
delegatesFocus: true
|
|
49
|
+
};
|
|
39
50
|
}
|
|
51
|
+
/** The containing form, when this control is associated with one. */
|
|
52
|
+
get form() {
|
|
53
|
+
return this.internals.form;
|
|
54
|
+
}
|
|
55
|
+
/** Labels associated with this form control. */
|
|
56
|
+
get labels() {
|
|
57
|
+
return this.internals.labels;
|
|
58
|
+
}
|
|
59
|
+
get validity() {
|
|
60
|
+
return this.internals.validity;
|
|
61
|
+
}
|
|
62
|
+
get validationMessage() {
|
|
63
|
+
return this.internals.validationMessage;
|
|
64
|
+
}
|
|
65
|
+
get willValidate() {
|
|
66
|
+
return this.internals.willValidate;
|
|
67
|
+
}
|
|
68
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
69
|
+
if (name === "value" && this.dirty) return;
|
|
70
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
71
|
+
}
|
|
72
|
+
/** Focuses the native textarea. */
|
|
40
73
|
focus(options) {
|
|
41
|
-
this.focused = true;
|
|
42
74
|
this.input?.focus(options);
|
|
43
75
|
}
|
|
44
|
-
|
|
45
|
-
this.
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
76
|
+
blur() {
|
|
77
|
+
this.input?.blur();
|
|
78
|
+
}
|
|
79
|
+
/** Selects all message text. */
|
|
80
|
+
select() {
|
|
81
|
+
this.input?.select();
|
|
82
|
+
}
|
|
83
|
+
/** Selects a range using native UTF-16 character offsets. */
|
|
84
|
+
setSelectionRange(start, end, direction) {
|
|
85
|
+
this.input?.setSelectionRange(start, end, direction);
|
|
86
|
+
}
|
|
87
|
+
/** Whether the user has edited the value since the last reset. */
|
|
88
|
+
isDirty() {
|
|
89
|
+
return this.dirty;
|
|
90
|
+
}
|
|
91
|
+
/** Restores the initial `value` attribute and clears the dirty state. */
|
|
92
|
+
reset() {
|
|
93
|
+
this.dirty = false;
|
|
94
|
+
this.value = this.getAttribute("value") ?? "";
|
|
95
|
+
}
|
|
96
|
+
formResetCallback() {
|
|
97
|
+
this.reset();
|
|
98
|
+
}
|
|
99
|
+
formDisabledCallback(disabled) {
|
|
100
|
+
this.disabledByForm = disabled && !this.hasAttribute("disabled");
|
|
101
|
+
}
|
|
102
|
+
formStateRestoreCallback(state) {
|
|
103
|
+
if (typeof state === "string") this.value = state;
|
|
104
|
+
}
|
|
105
|
+
/** Checks the native textarea constraints. Await `updateComplete` after changing properties. */
|
|
106
|
+
checkValidity() {
|
|
107
|
+
return this.internals.checkValidity();
|
|
108
|
+
}
|
|
109
|
+
/** Shows the browser's native validation feedback. */
|
|
110
|
+
reportValidity() {
|
|
111
|
+
return this.internals.reportValidity();
|
|
112
|
+
}
|
|
113
|
+
/** Sets or clears the native validation message. */
|
|
114
|
+
setCustomValidity(message) {
|
|
115
|
+
this.customValidityMessage = message;
|
|
116
|
+
this.input?.setCustomValidity(message);
|
|
117
|
+
this.syncFormState();
|
|
118
|
+
this.requestUpdate();
|
|
119
|
+
}
|
|
120
|
+
updated(changed) {
|
|
121
|
+
this.syncFormState();
|
|
122
|
+
if (changed.has("value") || changed.has("minRows")) this.scheduleInputHeightUpdate();
|
|
123
|
+
}
|
|
124
|
+
disconnectedCallback() {
|
|
125
|
+
super.disconnectedCallback();
|
|
126
|
+
cancelAnimationFrame(this.resizeFrame);
|
|
127
|
+
}
|
|
128
|
+
syncFormState() {
|
|
129
|
+
this.internals.setFormValue(this.effectiveDisabled ? null : this.value, this.value);
|
|
130
|
+
if (!this.input || this.effectiveDisabled) {
|
|
131
|
+
this.internals.setValidity({});
|
|
132
|
+
return;
|
|
55
133
|
}
|
|
56
|
-
|
|
57
|
-
this.
|
|
134
|
+
this.input.setCustomValidity(this.customValidityMessage);
|
|
135
|
+
this.internals.setValidity(this.input.validity, this.input.validationMessage, this.input);
|
|
58
136
|
}
|
|
59
|
-
|
|
137
|
+
get effectiveDisabled() {
|
|
138
|
+
return this.disabled || this.disabledByForm;
|
|
139
|
+
}
|
|
140
|
+
get canSubmit() {
|
|
141
|
+
const lengthIsValid = (this.minLength < 0 || this.value.length >= this.minLength) && (this.maxLength < 0 || this.value.length <= this.maxLength);
|
|
142
|
+
return !this.effectiveDisabled && !!this.value.trim() && !this.customValidityMessage && lengthIsValid && (this.input?.validity.valid ?? true);
|
|
143
|
+
}
|
|
144
|
+
handleInput(event) {
|
|
145
|
+
this.dirty = true;
|
|
60
146
|
this.value = event.target.value;
|
|
61
147
|
this.updateInputHeight();
|
|
62
148
|
redispatchEvent(this, event);
|
|
63
149
|
}
|
|
64
|
-
|
|
65
|
-
const input = this.input;
|
|
66
|
-
if (input) {
|
|
67
|
-
if (!this.inputDimensions) {
|
|
68
|
-
const computedStyleMap = input.computedStyleMap();
|
|
69
|
-
this.inputDimensions = {
|
|
70
|
-
top: computedStyleMap.get("padding-top").value,
|
|
71
|
-
bottom: computedStyleMap.get("padding-bottom").value
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
this.input.style.height = "";
|
|
75
|
-
this.input.style.height = `${this.input?.scrollHeight - this.inputDimensions.top - this.inputDimensions.bottom}px`;
|
|
76
|
-
this.calculateScrollbarPosition();
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
handleFocusin(event) {
|
|
80
|
-
this.focused = true;
|
|
150
|
+
handleChange(event) {
|
|
81
151
|
redispatchEvent(this, event);
|
|
82
152
|
}
|
|
83
|
-
|
|
84
|
-
if (!event.defaultPrevented) this.focus();
|
|
85
|
-
}
|
|
86
|
-
redispatchEvent(event) {
|
|
153
|
+
handleSelect(event) {
|
|
87
154
|
redispatchEvent(this, event);
|
|
88
155
|
}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
156
|
+
handleKeydown(event) {
|
|
157
|
+
if (event.key !== "Enter" || event.isComposing || event.keyCode === 229) return;
|
|
158
|
+
if (event.altKey) {
|
|
159
|
+
event.preventDefault();
|
|
160
|
+
const input = this.input;
|
|
161
|
+
if (!input) return;
|
|
162
|
+
input.setRangeText("\n", input.selectionStart, input.selectionEnd, "end");
|
|
163
|
+
input.dispatchEvent(new InputEvent("input", {
|
|
164
|
+
bubbles: true,
|
|
165
|
+
composed: true,
|
|
166
|
+
data: "\n",
|
|
167
|
+
inputType: "insertLineBreak"
|
|
168
|
+
}));
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
if (this.enterBehavior !== "submit" || event.shiftKey) return;
|
|
172
|
+
event.preventDefault();
|
|
173
|
+
this.submitMessage();
|
|
92
174
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
this.dispatchEvent(new CustomEvent("submit-message", {
|
|
175
|
+
async submitMessage() {
|
|
176
|
+
if (!this.canSubmit) return;
|
|
177
|
+
if (!this.dispatchEvent(new CustomEvent("submit-message", {
|
|
96
178
|
bubbles: true,
|
|
97
179
|
cancelable: true,
|
|
180
|
+
composed: true,
|
|
98
181
|
detail: this.value
|
|
99
|
-
}));
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
this.
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
renderScrollbar() {
|
|
112
|
-
if (!this.scrollBarHeight) return nothing;
|
|
113
|
-
const style = {
|
|
114
|
-
transform: `translate3d(0px, ${this.scrollBarPosition}px, 0px)`,
|
|
115
|
-
height: `${this.scrollBarHeight}px`
|
|
116
|
-
};
|
|
117
|
-
return html`<div class="scrollbar-track">
|
|
118
|
-
<div class="scrollbar-thumb" style="${styleMap(style)}"></div>
|
|
119
|
-
</div>`;
|
|
182
|
+
}))) return;
|
|
183
|
+
this.dirty = true;
|
|
184
|
+
this.value = "";
|
|
185
|
+
await this.updateComplete;
|
|
186
|
+
this.updateInputHeight();
|
|
187
|
+
this.focus();
|
|
188
|
+
}
|
|
189
|
+
updateInputHeight() {
|
|
190
|
+
if (!this.input) return;
|
|
191
|
+
this.input.style.height = "auto";
|
|
192
|
+
const height = this.input.scrollHeight;
|
|
193
|
+
if (height > 0) this.input.style.height = `${height}px`;
|
|
120
194
|
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
195
|
+
scheduleInputHeightUpdate() {
|
|
196
|
+
cancelAnimationFrame(this.resizeFrame);
|
|
197
|
+
this.resizeFrame = requestAnimationFrame(() => {
|
|
198
|
+
this.resizeFrame = 0;
|
|
199
|
+
this.updateInputHeight();
|
|
200
|
+
});
|
|
124
201
|
}
|
|
125
202
|
render() {
|
|
126
|
-
const classes = { "focus-within": this.focused };
|
|
127
|
-
addClasses(this, classes);
|
|
128
203
|
return html`
|
|
129
|
-
<div class="
|
|
130
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
204
|
+
<div class="container" part="container">
|
|
205
|
+
<textarea
|
|
206
|
+
class="textarea"
|
|
207
|
+
part="textarea"
|
|
208
|
+
name=${ifDefined(this.name || void 0)}
|
|
209
|
+
aria-label=${ifDefined(this.ariaLabel || void 0)}
|
|
210
|
+
.value=${live(this.value)}
|
|
211
|
+
placeholder=${this.placeholder}
|
|
212
|
+
rows=${Math.max(1, this.minRows)}
|
|
213
|
+
autocomplete="off"
|
|
214
|
+
enterkeyhint=${this.enterBehavior === "submit" ? "send" : "enter"}
|
|
215
|
+
maxlength=${ifDefined(this.maxLength >= 0 ? this.maxLength : void 0)}
|
|
216
|
+
minlength=${ifDefined(this.minLength >= 0 ? this.minLength : void 0)}
|
|
217
|
+
?disabled=${this.effectiveDisabled}
|
|
218
|
+
?required=${this.required}
|
|
219
|
+
@input=${this.handleInput}
|
|
220
|
+
@change=${this.handleChange}
|
|
221
|
+
@select=${this.handleSelect}
|
|
222
|
+
@keydown=${this.handleKeydown}
|
|
223
|
+
></textarea>
|
|
224
|
+
<div class="actions" part="actions">
|
|
225
|
+
<div class="toolbar" part="toolbar">
|
|
148
226
|
<slot name="toolbar"></slot>
|
|
149
227
|
</div>
|
|
150
|
-
|
|
228
|
+
<button
|
|
229
|
+
class="send-button"
|
|
230
|
+
part="send-button"
|
|
231
|
+
type="button"
|
|
232
|
+
aria-label=${this.sendLabel}
|
|
233
|
+
title=${this.sendLabel}
|
|
234
|
+
?disabled=${!this.canSubmit}
|
|
235
|
+
@click=${this.submitMessage}
|
|
236
|
+
>
|
|
237
|
+
<slot name="send-icon">
|
|
238
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
239
|
+
<path d="m22 2-7 20-4-9-9-4Z"></path>
|
|
240
|
+
<path d="M22 2 11 13"></path>
|
|
241
|
+
</svg>
|
|
242
|
+
</slot>
|
|
243
|
+
</button>
|
|
151
244
|
</div>
|
|
152
245
|
</div>
|
|
153
246
|
`;
|
|
154
247
|
}
|
|
155
248
|
};
|
|
156
|
-
__decorate([property(
|
|
157
|
-
__decorate([property(
|
|
249
|
+
__decorate([property()], ChatInput.prototype, "placeholder", void 0);
|
|
250
|
+
__decorate([property()], ChatInput.prototype, "value", void 0);
|
|
251
|
+
__decorate([property()], ChatInput.prototype, "name", void 0);
|
|
252
|
+
__decorate([property({
|
|
253
|
+
type: Boolean,
|
|
254
|
+
reflect: true
|
|
255
|
+
})], ChatInput.prototype, "disabled", void 0);
|
|
256
|
+
__decorate([property({
|
|
257
|
+
type: Boolean,
|
|
258
|
+
reflect: true
|
|
259
|
+
})], ChatInput.prototype, "required", void 0);
|
|
260
|
+
__decorate([property({ type: Number })], ChatInput.prototype, "maxLength", void 0);
|
|
261
|
+
__decorate([property({ type: Number })], ChatInput.prototype, "minLength", void 0);
|
|
262
|
+
__decorate([property({
|
|
263
|
+
type: Number,
|
|
264
|
+
attribute: "min-rows"
|
|
265
|
+
})], ChatInput.prototype, "minRows", void 0);
|
|
266
|
+
__decorate([property({ attribute: "enter-behavior" })], ChatInput.prototype, "enterBehavior", void 0);
|
|
267
|
+
__decorate([property({ attribute: "aria-label" })], ChatInput.prototype, "ariaLabel", void 0);
|
|
268
|
+
__decorate([property({ attribute: "send-label" })], ChatInput.prototype, "sendLabel", void 0);
|
|
158
269
|
__decorate([state()], ChatInput.prototype, "dirty", void 0);
|
|
159
|
-
__decorate([state()], ChatInput.prototype, "
|
|
160
|
-
__decorate([
|
|
161
|
-
__decorate([state()], ChatInput.prototype, "focused", void 0);
|
|
162
|
-
__decorate([query(".input")], ChatInput.prototype, "input", void 0);
|
|
163
|
-
__decorate([eventOptions({ passive: true })], ChatInput.prototype, "handleNavContentScroll", null);
|
|
270
|
+
__decorate([state()], ChatInput.prototype, "disabledByForm", void 0);
|
|
271
|
+
__decorate([query("textarea")], ChatInput.prototype, "input", void 0);
|
|
164
272
|
ChatInput = __decorate([customElement("c2-chat-input")], ChatInput);
|
|
165
273
|
//#endregion
|
|
166
274
|
export { ChatInput };
|
package/package.json
CHANGED
|
@@ -1,18 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c2n/chat-input",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/chat-input.js",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": {
|
|
8
|
-
"
|
|
9
|
-
"
|
|
8
|
+
"types": "./types/src/chat-input.d.ts",
|
|
9
|
+
"default": "./dist/chat-input.js"
|
|
10
|
+
},
|
|
11
|
+
"./react": {
|
|
12
|
+
"types": "./react.d.ts",
|
|
13
|
+
"default": "./react.js"
|
|
14
|
+
},
|
|
15
|
+
"./vue": {
|
|
16
|
+
"types": "./vue.d.ts",
|
|
17
|
+
"default": "./vue.js"
|
|
10
18
|
},
|
|
11
19
|
"./custom-elements.json": "./custom-elements.json"
|
|
12
20
|
},
|
|
13
21
|
"files": [
|
|
14
22
|
"dist",
|
|
15
|
-
"types"
|
|
23
|
+
"types",
|
|
24
|
+
"react.d.ts",
|
|
25
|
+
"react.js",
|
|
26
|
+
"vue.d.ts",
|
|
27
|
+
"vue.js"
|
|
16
28
|
],
|
|
17
29
|
"keywords": [
|
|
18
30
|
"chat-input",
|
|
@@ -49,12 +61,12 @@
|
|
|
49
61
|
}
|
|
50
62
|
},
|
|
51
63
|
"dependencies": {
|
|
52
|
-
"@c2n/core": "0.0.
|
|
64
|
+
"@c2n/core": "0.0.7",
|
|
53
65
|
"lit": "3.3.3"
|
|
54
66
|
},
|
|
55
67
|
"devDependencies": {
|
|
56
68
|
"@c2n/config": "*"
|
|
57
69
|
},
|
|
58
70
|
"customElements": "custom-elements.json",
|
|
59
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
|
|
60
72
|
}
|
package/react.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// GENERATED by @c2n/framework-types. Do not edit by hand.
|
|
2
|
+
//
|
|
3
|
+
// JSX types for the custom elements of @c2n/chat-input. Import once, anywhere in the program:
|
|
4
|
+
//
|
|
5
|
+
// import '@c2n/chat-input/react'
|
|
6
|
+
//
|
|
7
|
+
// Register the elements at module scope before React renders, or React writes an object prop as an
|
|
8
|
+
// attribute and it stringifies.
|
|
9
|
+
|
|
10
|
+
import type { DetailedHTMLProps, HTMLAttributes } from 'react'
|
|
11
|
+
import type { ChatInput } from '@c2n/chat-input'
|
|
12
|
+
|
|
13
|
+
/** Standard React host-element attributes plus the element's own public properties. */
|
|
14
|
+
type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
|
|
15
|
+
|
|
16
|
+
declare module 'react' {
|
|
17
|
+
namespace JSX {
|
|
18
|
+
interface IntrinsicElements {
|
|
19
|
+
'c2-chat-input': C2Props<ChatInput>
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export {}
|
package/react.js
ADDED
|
@@ -1,81 +1,128 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, type PropertyValues } from 'lit';
|
|
2
|
+
import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
|
|
3
|
+
/** Events fired by {@link ChatInput}, keyed for `addEventListener`. */
|
|
4
|
+
export interface ChatInputEventMap {
|
|
5
|
+
input: InputEvent;
|
|
6
|
+
change: Event;
|
|
7
|
+
select: Event;
|
|
8
|
+
'submit-message': CustomEvent<string>;
|
|
9
|
+
}
|
|
10
|
+
export interface ChatInput {
|
|
11
|
+
addEventListener: TypedAddEventListener<ChatInput, ChatInputEventMap>;
|
|
12
|
+
removeEventListener: TypedRemoveEventListener<ChatInput, ChatInputEventMap>;
|
|
13
|
+
}
|
|
2
14
|
/**
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
* @slot send-icon
|
|
6
|
-
*
|
|
7
|
-
* @event {CustomEvent} submit-message
|
|
8
|
-
* @cssproperty {border-radius} [--c2-chat-input--border-top-left-radius=4px]
|
|
9
|
-
* @cssproperty {border-radius} [--c2-chat-input--border-top-right-radius=4px]
|
|
10
|
-
* @cssproperty {border-radius} [--c2-chat-input--border-bottom-left-radius=4px]
|
|
11
|
-
* @cssproperty {border-radius} [--c2-chat-input--border-bottom-right-radius=4px]
|
|
12
|
-
*
|
|
13
|
-
* @cssproperty {padding} [--c2-chat-input--padding-top=8px]
|
|
14
|
-
* @cssproperty {padding} [--c2-chat-input--padding-right=8px]
|
|
15
|
-
* @cssproperty {padding} [--c2-chat-input--padding-bottom=8px]
|
|
16
|
-
* @cssproperty {padding} [--c2-chat-input--padding-left=8px]
|
|
17
|
-
*
|
|
18
|
-
* @cssproperty {border} [--c2-chat-input--border-top=1px solid rgb(177, 177, 177)]
|
|
19
|
-
* @cssproperty {border} [--c2-chat-input--border-right=1px solid rgb(177, 177, 177)]
|
|
20
|
-
* @cssproperty {border} [--c2-chat-input--border-bottom=1px solid rgb(177, 177, 177)]
|
|
21
|
-
* @cssproperty {border} [--c2-chat-input--border-left=1px solid rgb(177, 177, 177)]
|
|
22
|
-
*
|
|
23
|
-
* @cssproperty {color} [--c2-chat-input--color=rgb(34, 34, 34)]
|
|
24
|
-
* @cssproperty {background} [--c2-chat-input--background=rgb(255, 255, 255)]
|
|
25
|
-
*
|
|
26
|
-
* @cssproperty {font-size} [--c2-chat-input--font-size=14px]
|
|
27
|
-
* @cssproperty {font-weight} --c2-chat-input--font-weight
|
|
28
|
-
* @cssproperty {font-style} --c2-chat-input--font-style
|
|
29
|
-
* @cssproperty {font-family} --c2-chat-input--font-family
|
|
30
|
-
* @cssproperty {line-height} [--c2-chat-input--line-height=24px]
|
|
31
|
-
* @cssproperty {max-height} [--c2-chat-input--max-height=25vh]
|
|
32
|
-
*
|
|
33
|
-
* @cssproperty {opacity} [--c2-chat-input__placeholder--opacity=0.5]
|
|
34
|
-
* @cssproperty {font-weight} --c2-chat-input__placeholder--font-weight
|
|
35
|
-
* @cssproperty {font-style} --c2-chat-input__placeholder--font-style
|
|
36
|
-
* @cssproperty {color} --c2-chat-input__placeholder--color
|
|
37
|
-
*
|
|
38
|
-
* @cssproperty {pixel} [--c2-chat-input__send-icon--width=24px]
|
|
39
|
-
* @cssproperty {pixel} [--c2-chat-input__send-icon--height=24px]
|
|
40
|
-
* @cssproperty {opacity} [--c2-chat-input__send-icon--opacity=0.5]
|
|
41
|
-
* @cssproperty {color} --c2-chat-input__send-icon--color
|
|
42
|
-
* @cssproperty {color} --c2-chat-input__send-icon__active--color
|
|
43
|
-
*
|
|
44
|
-
* @cssproperty {border} --c2-chat-input__focus--border-top
|
|
45
|
-
* @cssproperty {border} --c2-chat-input__focus--border-right
|
|
46
|
-
* @cssproperty {border} --c2-chat-input__focus--border-bottom
|
|
47
|
-
* @cssproperty {border} --c2-chat-input__focus--border-left
|
|
48
|
-
*
|
|
49
|
-
* @cssproperty {color} --c2-chat-input__focus--color
|
|
50
|
-
* @cssproperty {background} --c2-chat-input__focus--background
|
|
51
|
-
*
|
|
15
|
+
* Auto-growing message composer with slotted actions and an accessible send button.
|
|
52
16
|
*
|
|
17
|
+
* @tag c2-chat-input
|
|
18
|
+
* @slot toolbar - Actions displayed before the send button, such as attachment or voice controls.
|
|
19
|
+
* @slot send-icon - Icon displayed inside the send button.
|
|
20
|
+
* @event {InputEvent} input - Fired on each edit, after `value` is updated.
|
|
21
|
+
* @event {Event} change - Fired when an edit is committed.
|
|
22
|
+
* @event {Event} select - Fired when text is selected.
|
|
23
|
+
* @event {CustomEvent<string>} submit-message - Fired with the current message. Cancel the event to keep the value in the composer.
|
|
24
|
+
* @cssproperty {border} [--c2-chat-input__container--border=1px solid #bcbcc6]
|
|
25
|
+
* @cssproperty {border-radius} [--c2-chat-input__container--border-radius=16px]
|
|
26
|
+
* @cssproperty {color} [--c2-chat-input__container--background=#ffffff]
|
|
27
|
+
* @cssproperty {color} [--c2-chat-input__container--color=#18181b]
|
|
28
|
+
* @cssproperty {padding} [--c2-chat-input__container--padding=10px]
|
|
29
|
+
* @cssproperty {pixel} [--c2-chat-input__container--gap=8px]
|
|
30
|
+
* @cssproperty {border} [--c2-chat-input__container__hover--border=1px solid #a1a1aa]
|
|
31
|
+
* @cssproperty {border} [--c2-chat-input__container__focus--border=1px solid #476ef9]
|
|
32
|
+
* @cssproperty {box-shadow} [--c2-chat-input__container__focus--box-shadow=0 0 0 3px rgba(71, 110, 249, 0.2)]
|
|
33
|
+
* @cssproperty {border} [--c2-chat-input__container__invalid--border=1px solid #dc2626]
|
|
34
|
+
* @cssproperty {box-shadow} [--c2-chat-input__container__invalid__focus--box-shadow=0 0 0 3px rgba(220, 38, 38, 0.2)]
|
|
35
|
+
* @cssproperty {opacity} [--c2-chat-input__container__disabled--opacity=0.5]
|
|
36
|
+
* @cssproperty {pixel} [--c2-chat-input__textarea--max-height=192px]
|
|
37
|
+
* @cssproperty {padding} [--c2-chat-input__textarea--padding=2px]
|
|
38
|
+
* @cssproperty {font-family} [--c2-chat-input__textarea--font-family=inherit]
|
|
39
|
+
* @cssproperty {font-size} [--c2-chat-input__textarea--font-size=14px]
|
|
40
|
+
* @cssproperty {pixel} [--c2-chat-input__textarea--line-height=22px]
|
|
41
|
+
* @cssproperty {color} [--c2-chat-input__textarea--caret-color=currentColor]
|
|
42
|
+
* @cssproperty {color} [--c2-chat-input__placeholder--color=#71717a]
|
|
43
|
+
* @cssproperty {pixel} [--c2-chat-input__actions--gap=6px]
|
|
44
|
+
* @cssproperty {pixel} [--c2-chat-input__send-button--size=32px]
|
|
45
|
+
* @cssproperty {border-radius} [--c2-chat-input__send-button--border-radius=10px]
|
|
46
|
+
* @cssproperty {color} [--c2-chat-input__send-button--background=rgb(2, 101, 220)]
|
|
47
|
+
* @cssproperty {color} [--c2-chat-input__send-button--color=#ffffff]
|
|
48
|
+
* @cssproperty {color} [--c2-chat-input__send-button__hover--background=rgb(1, 84, 184)]
|
|
49
|
+
* @cssproperty {color} [--c2-chat-input__send-button__active--background=rgb(1, 70, 154)]
|
|
50
|
+
* @cssproperty {outline} [--c2-chat-input__send-button__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
|
|
51
|
+
* @cssproperty {opacity} [--c2-chat-input__send-button__disabled--opacity=0.38]
|
|
52
|
+
* @cssproperty {pixel} [--c2-chat-input__send-icon--size=18px]
|
|
53
53
|
*/
|
|
54
54
|
export declare class ChatInput extends LitElement {
|
|
55
|
+
static formAssociated: boolean;
|
|
55
56
|
static styles: import("lit").CSSResult;
|
|
57
|
+
static shadowRootOptions: ShadowRootInit;
|
|
58
|
+
private readonly internals;
|
|
59
|
+
private customValidityMessage;
|
|
60
|
+
/** Hint shown while the composer is empty. */
|
|
56
61
|
placeholder: string;
|
|
62
|
+
/** Current message text. Set this property to update the composer programmatically. */
|
|
57
63
|
value: string;
|
|
64
|
+
/** Name used when the composer participates in a form. */
|
|
65
|
+
name: string;
|
|
66
|
+
/** Disables editing, sending, and form submission. */
|
|
67
|
+
disabled: boolean;
|
|
68
|
+
/** Requires a nonempty message for form validation. */
|
|
69
|
+
required: boolean;
|
|
70
|
+
/** Maximum message length; -1 means unlimited. */
|
|
71
|
+
maxLength: number;
|
|
72
|
+
/** Minimum message length; -1 means no minimum. */
|
|
73
|
+
minLength: number;
|
|
74
|
+
/** Minimum number of visible text rows before the composer grows. */
|
|
75
|
+
minRows: number;
|
|
76
|
+
/** Controls whether unmodified Enter submits or inserts a newline. */
|
|
77
|
+
enterBehavior: 'submit' | 'newline';
|
|
78
|
+
/** Accessible name forwarded to the inner textarea. */
|
|
79
|
+
ariaLabel: string | null;
|
|
80
|
+
/** Accessible name for the send button. */
|
|
81
|
+
sendLabel: string;
|
|
58
82
|
private dirty;
|
|
59
|
-
private
|
|
60
|
-
private
|
|
61
|
-
private
|
|
62
|
-
|
|
63
|
-
|
|
83
|
+
private disabledByForm;
|
|
84
|
+
private input?;
|
|
85
|
+
private resizeFrame;
|
|
86
|
+
/** The containing form, when this control is associated with one. */
|
|
87
|
+
get form(): HTMLFormElement | null;
|
|
88
|
+
/** Labels associated with this form control. */
|
|
89
|
+
get labels(): NodeList;
|
|
90
|
+
get validity(): ValidityState;
|
|
91
|
+
get validationMessage(): string;
|
|
92
|
+
get willValidate(): boolean;
|
|
93
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
94
|
+
/** Focuses the native textarea. */
|
|
95
|
+
focus(options?: FocusOptions): void;
|
|
96
|
+
blur(): void;
|
|
97
|
+
/** Selects all message text. */
|
|
98
|
+
select(): void;
|
|
99
|
+
/** Selects a range using native UTF-16 character offsets. */
|
|
100
|
+
setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void;
|
|
101
|
+
/** Whether the user has edited the value since the last reset. */
|
|
64
102
|
isDirty(): boolean;
|
|
65
|
-
|
|
66
|
-
|
|
103
|
+
/** Restores the initial `value` attribute and clears the dirty state. */
|
|
104
|
+
reset(): void;
|
|
105
|
+
formResetCallback(): void;
|
|
106
|
+
formDisabledCallback(disabled: boolean): void;
|
|
107
|
+
formStateRestoreCallback(state: string | File | FormData | null): void;
|
|
108
|
+
/** Checks the native textarea constraints. Await `updateComplete` after changing properties. */
|
|
109
|
+
checkValidity(): boolean;
|
|
110
|
+
/** Shows the browser's native validation feedback. */
|
|
111
|
+
reportValidity(): boolean;
|
|
112
|
+
/** Sets or clears the native validation message. */
|
|
113
|
+
setCustomValidity(message: string): void;
|
|
114
|
+
protected updated(changed: PropertyValues<this>): void;
|
|
115
|
+
disconnectedCallback(): void;
|
|
116
|
+
private syncFormState;
|
|
117
|
+
private get effectiveDisabled();
|
|
118
|
+
private get canSubmit();
|
|
119
|
+
private handleInput;
|
|
120
|
+
private handleChange;
|
|
121
|
+
private handleSelect;
|
|
67
122
|
private handleKeydown;
|
|
68
|
-
|
|
123
|
+
private submitMessage;
|
|
69
124
|
private updateInputHeight;
|
|
70
|
-
|
|
71
|
-
protected forwardFocusin(event: Event): void;
|
|
72
|
-
private redispatchEvent;
|
|
73
|
-
protected handleFocusout(event: Event): void;
|
|
74
|
-
private dispatchSubmitEvent;
|
|
75
|
-
private handleNavContentScroll;
|
|
76
|
-
private calculateScrollbarPosition;
|
|
77
|
-
private renderScrollbar;
|
|
78
|
-
attributeChangedCallback(attribute: string, newValue: string | null, oldValue: string | null): void;
|
|
125
|
+
private scheduleInputHeightUpdate;
|
|
79
126
|
render(): import("lit-html").TemplateResult<1>;
|
|
80
127
|
}
|
|
81
128
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chat-input.d.ts","sourceRoot":"","sources":["../../src/chat-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"chat-input.d.ts","sourceRoot":"","sources":["../../src/chat-input.ts"],"names":[],"mappings":"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"}
|
package/vue.d.ts
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
// GENERATED by @c2n/framework-types. Do not edit by hand.
|
|
2
|
+
//
|
|
3
|
+
// Vue template types for the custom elements of @c2n/chat-input. Import once, anywhere in the program:
|
|
4
|
+
//
|
|
5
|
+
// import '@c2n/chat-input/vue'
|
|
6
|
+
//
|
|
7
|
+
// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
|
|
8
|
+
// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
|
|
9
|
+
|
|
10
|
+
import type { DefineComponent, HTMLAttributes } from 'vue'
|
|
11
|
+
import type { ChatInput, ChatInputEventMap } from '@c2n/chat-input'
|
|
12
|
+
|
|
13
|
+
/** The element's own public properties, plus every attribute Vue understands on a host element. */
|
|
14
|
+
type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
|
|
15
|
+
|
|
16
|
+
declare module 'vue' {
|
|
17
|
+
interface GlobalComponents {
|
|
18
|
+
'c2-chat-input': DefineComponent<
|
|
19
|
+
C2Props<ChatInput> & {
|
|
20
|
+
'min-rows'?: unknown
|
|
21
|
+
'enter-behavior'?: unknown
|
|
22
|
+
'aria-label'?: unknown
|
|
23
|
+
'send-label'?: unknown
|
|
24
|
+
onSubmitMessage?: (event: ChatInputEventMap['submit-message']) => void
|
|
25
|
+
onInput?: (event: ChatInputEventMap['input']) => void
|
|
26
|
+
onChange?: (event: ChatInputEventMap['change']) => void
|
|
27
|
+
onSelect?: (event: ChatInputEventMap['select']) => void
|
|
28
|
+
}
|
|
29
|
+
>
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
declare module '@vue/runtime-dom' {
|
|
34
|
+
interface HTMLAttributes {
|
|
35
|
+
/** Vue's own definition omits it, and slotting a plain element into a component needs it. */
|
|
36
|
+
slot?: string
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export {}
|
package/vue.js
ADDED