@c2n/chat-input 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Chat-Input
+
+// TODO

package/dist/chat-input.js

@@ -0,0 +1,166 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, eventOptions, property, query, state } from "lit/decorators.js";
+import { redispatchEvent } from "@c2n/core/dom-helper.js";
+import { live } from "lit/directives/live.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { addClasses } from "@c2n/core/css-helper.js";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/chat-input.scss?inline
+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.c2-chat-input {\n  display: flex;\n  flex-direction: column;\n}\n.c2-chat-input .c2-chat-input-wrapper {\n  flex: 1;\n  display: flex;\n  cursor: text;\n  position: relative;\n  align-self: stretch;\n  justify-self: stretch;\n  border-top: var(--c2-chat-input--border-top,1px solid rgb(177, 177, 177));\n  border-bottom: var(--c2-chat-input--border-bottom,1px solid rgb(177, 177, 177));\n  border-right: var(--c2-chat-input--border-right,1px solid rgb(177, 177, 177));\n  border-left: var(--c2-chat-input--border-left,1px solid rgb(177, 177, 177));\n  border-top-left-radius: var(--c2-chat-input--border-top-left-radius,4px);\n  border-top-right-radius: var(--c2-chat-input--border-top-right-radius,4px);\n  border-bottom-left-radius: var(--c2-chat-input--border-bottom-left-radius,4px);\n  border-bottom-right-radius: var(--c2-chat-input--border-bottom-right-radius,4px);\n  color: var(--c2-chat-input--color,rgb(34, 34, 34));\n  background: var(--c2-chat-input--background,rgb(255, 255, 255));\n  gap: 4px;\n}\n.c2-chat-input .c2-chat-input-wrapper .input {\n  resize: none;\n  scrollbar-width: none;\n  overscroll-behavior: none;\n  touch-action: pan-y;\n  z-index: 0;\n  width: 100%;\n  flex: 1;\n  border: none;\n  outline: none;\n  caret-color: inherit;\n  text-align: inherit;\n  border-radius: inherit;\n  color: inherit;\n  background: transparent;\n  overflow: visible;\n  text-wrap: wrap;\n  text-indent: 0;\n  max-height: var(--c2-chat-input--max-height,25vh);\n  padding-top: var(--c2-chat-input--padding-top,8px);\n  padding-bottom: var(--c2-chat-input--padding-bottom,8px);\n  padding-left: var(--c2-chat-input--padding-left,8px);\n  padding-right: calc(var(--c2-chat-input__send-icon--width,24px) + 2 * var(--c2-chat-input--padding-right,8px) + 6px);\n  font-size: var(--c2-chat-input--font-size,14px);\n  font-weight: var(--c2-chat-input--font-weight);\n  font-style: var(--c2-chat-input--font-style);\n  font-family: var(--c2-chat-input--font-family);\n  line-height: var(--c2-chat-input--line-height,24px);\n}\n.c2-chat-input .c2-chat-input-wrapper .input::placeholder {\n  font-weight: var(--c2-chat-input__placeholder--font-weight);\n  font-style: var(--c2-chat-input__placeholder--font-style);\n  color: var(--c2-chat-input__placeholder--color);\n  opacity: var(--c2-chat-input__placeholder--opacity,0.5);\n}\n.c2-chat-input .c2-chat-input-wrapper .input::-webkit-scrollbar {\n  display: none;\n}\n.c2-chat-input .c2-chat-input-wrapper .scrollbar-track {\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  width: 6px;\n  cursor: default;\n  z-index: 7;\n  padding: 2px;\n}\n.c2-chat-input .c2-chat-input-wrapper .scrollbar-track .scrollbar-thumb {\n  display: none;\n  position: absolute;\n  width: 6px;\n  right: 2px;\n  top: 0;\n}\n.c2-chat-input .c2-chat-input-wrapper .scrollbar-track .scrollbar-thumb:after {\n  content: \"\";\n  position: absolute;\n  inset: 2px 0;\n  width: 100%;\n  border-radius: 6px;\n  background: var(--color-scrollbar, rgba(0, 0, 0, 0.15));\n}\n.c2-chat-input .c2-chat-input-wrapper:hover .scrollbar-track .scrollbar-thumb {\n  display: block;\n}\n.c2-chat-input .c2-chat-input-wrapper .send-button-wrapper {\n  display: flex;\n  position: absolute;\n  right: 0px;\n  bottom: 0px;\n  padding-right: calc(var(--c2-chat-input--padding-right,8px) + 6px);\n  padding-top: var(--c2-chat-input--padding-top,8px);\n  padding-bottom: var(--c2-chat-input--padding-bottom,8px);\n  padding-left: var(--c2-chat-input--padding-right,8px);\n}\n.c2-chat-input .c2-chat-input-wrapper .send-button-wrapper button {\n  border: none;\n  outline: none;\n  cursor: pointer;\n  padding: 0px;\n  margin: 0px;\n  background: none;\n  line-height: 0px;\n  opacity: var(--c2-chat-input__send-icon--opacity,0.5);\n}\n.c2-chat-input .c2-chat-input-wrapper .send-button-wrapper button slot[name=send-icon] svg {\n  color: var(--c2-chat-input__send-icon--opacity,0.5);\n  width: var(--c2-chat-input__send-icon--width,24px);\n  height: var(--c2-chat-input__send-icon--height,24px);\n}\n.c2-chat-input .c2-chat-input-wrapper .send-button-wrapper button ::slotted(svg) {\n  color: var(--c2-chat-input__send-icon--opacity,0.5);\n  width: var(--c2-chat-input__send-icon--width,24px);\n  height: var(--c2-chat-input__send-icon--height,24px);\n}\n.c2-chat-input .c2-chat-input-wrapper .send-button-wrapper button:hover {\n  opacity: 1;\n}\n.c2-chat-input .c2-chat-input-wrapper .send-button-wrapper button[active] {\n  opacity: 1;\n}\n.c2-chat-input .c2-chat-input-wrapper .send-button-wrapper button[active] slot[name=send-icon] svg {\n  color: var(--c2-chat-input__send-icon__active--color);\n}\n.c2-chat-input .c2-chat-input-wrapper .send-button-wrapper button[active] ::slotted(svg) {\n  color: var(--c2-chat-input__send-icon__active--color);\n}\n.c2-chat-input.focus-within .c2-chat-input-wrapper {\n  border-top: var(--c2-chat-input__focus--border-top,var(--c2-chat-input--border-top,1px solid rgb(177, 177, 177)));\n  border-bottom: var(--c2-chat-input__focus--border-bottom,var(--c2-chat-input--border-bottom,1px solid rgb(177, 177, 177)));\n  border-right: var(--c2-chat-input__focus--border-right,var(--c2-chat-input--border-right,1px solid rgb(177, 177, 177)));\n  border-left: var(--c2-chat-input__focus--border-left,var(--c2-chat-input--border-left,1px solid rgb(177, 177, 177)));\n  color: var(--c2-chat-input__focus--color,var(--c2-chat-input--color,rgb(34, 34, 34)));\n  background: var(--c2-chat-input__focus--background,var(--c2-chat-input--background,rgb(255, 255, 255)));\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/chat-input.ts
+var ChatInput = class ChatInput extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.placeholder = "";
+		this.value = "";
+		this.dirty = false;
+		this.scrollBarPosition = 0;
+		this.scrollBarHeight = 0;
+		this.focused = false;
+		this.handleFocus = () => {
+			this.focus();
+		};
+		this.inputDimensions = null;
+	}
+	static {
+		this.styles = unsafeCSS(chat_input_default);
+	}
+	isDirty() {
+		return this.dirty;
+	}
+	focus(options) {
+		this.focused = true;
+		this.input?.focus(options);
+	}
+	async handleKeydown(event) {
+		this.dirty = true;
+		if (event.altKey) {
+			if (event.key == "Enter") {
+				this.value = this.value + "\n";
+				event.preventDefault();
+			}
+		} else if (event.key == "Enter") {
+			this.dispatchSubmitEvent();
+			this.value = "";
+			event.preventDefault();
+		}
+		await this.updateComplete;
+		this.updateInputHeight();
+	}
+	async handleInput(event) {
+		this.value = event.target.value;
+		this.updateInputHeight();
+		redispatchEvent(this, event);
+	}
+	updateInputHeight() {
+		const input = this.input;
+		if (input) {
+			if (!this.inputDimensions) {
+				const computedStyleMap = input.computedStyleMap();
+				this.inputDimensions = {
+					top: computedStyleMap.get("padding-top").value,
+					bottom: computedStyleMap.get("padding-bottom").value
+				};
+			}
+			this.input.style.height = "";
+			this.input.style.height = `${this.input?.scrollHeight - this.inputDimensions.top - this.inputDimensions.bottom}px`;
+			this.calculateScrollbarPosition();
+		}
+	}
+	handleFocusin(event) {
+		this.focused = true;
+		redispatchEvent(this, event);
+	}
+	forwardFocusin(event) {
+		if (!event.defaultPrevented) this.focus();
+	}
+	redispatchEvent(event) {
+		redispatchEvent(this, event);
+	}
+	handleFocusout(event) {
+		this.focused = false;
+		redispatchEvent(this, event);
+	}
+	dispatchSubmitEvent() {
+		console.log("submit-message", this.value);
+		this.dispatchEvent(new CustomEvent("submit-message", {
+			bubbles: true,
+			cancelable: true,
+			detail: this.value
+		}));
+	}
+	handleNavContentScroll() {
+		this.calculateScrollbarPosition();
+	}
+	calculateScrollbarPosition() {
+		if (this.input.scrollHeight - this.input.clientHeight > 0) {
+			const ratio = this.input.clientHeight / this.input.scrollHeight;
+			this.scrollBarHeight = this.input.clientHeight * ratio;
+			this.scrollBarPosition = this.input.scrollTop * ratio;
+		} else this.scrollBarHeight = 0;
+	}
+	renderScrollbar() {
+		if (!this.scrollBarHeight) return nothing;
+		const style = {
+			transform: `translate3d(0px, ${this.scrollBarPosition}px,  0px)`,
+			height: `${this.scrollBarHeight}px`
+		};
+		return html`<div class="scrollbar-track">
+      <div class="scrollbar-thumb" style="${styleMap(style)}"></div>
+    </div>`;
+	}
+	attributeChangedCallback(attribute, newValue, oldValue) {
+		if (attribute === "value" && this.dirty) return;
+		super.attributeChangedCallback(attribute, newValue, oldValue);
+	}
+	render() {
+		const classes = { "focus-within": this.focused };
+		addClasses(this, classes);
+		return html`
+      <div class="c2-chat-input ${classMap(classes)}">
+        <div class="c2-chat-input-wrapper">
+          <textarea
+            class="input"
+            tabindex="0"
+            .value=${live(this.value)}
+            placeholder=${this.placeholder || ""}
+            autocomplete="off"
+            rows="1"
+            @change=${this.redispatchEvent}
+            @select=${this.redispatchEvent}
+            @focusin=${this.handleFocusin}
+            @focusout=${this.handleFocusout}
+            @keydown=${this.handleKeydown}
+            @input=${this.handleInput}
+            @scroll=${this.handleNavContentScroll}
+          >
+          </textarea>
+          <div class="toolbar">
+            <slot name="toolbar"></slot>
+          </div>
+          ${this.renderScrollbar()}
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: String })], ChatInput.prototype, "placeholder", void 0);
+__decorate([property({ type: String })], ChatInput.prototype, "value", void 0);
+__decorate([state()], ChatInput.prototype, "dirty", void 0);
+__decorate([state()], ChatInput.prototype, "scrollBarPosition", void 0);
+__decorate([state()], ChatInput.prototype, "scrollBarHeight", void 0);
+__decorate([state()], ChatInput.prototype, "focused", void 0);
+__decorate([query(".input")], ChatInput.prototype, "input", void 0);
+__decorate([eventOptions({ passive: true })], ChatInput.prototype, "handleNavContentScroll", null);
+ChatInput = __decorate([customElement("c2-chat-input")], ChatInput);
+//#endregion
+export { ChatInput };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@c2n/chat-input",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/chat-input.js",
+  "exports": {
+    ".": {
+      "default": "./dist/chat-input.js",
+      "types": "./types/src/chat-input.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "chat-input",
+    "web component",
+    "lit"
+  ],
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/chat-input.d.ts

@@ -0,0 +1,86 @@
+import { LitElement } from 'lit';
+/**
+ * @tag c2-chat-input
+ *
+ * @slot send-icon
+ *
+ * @event {CustomEvent} submit-message
+ * @cssproperty {border-radius} [--c2-chat-input--border-top-left-radius=4px]
+ * @cssproperty {border-radius} [--c2-chat-input--border-top-right-radius=4px]
+ * @cssproperty {border-radius} [--c2-chat-input--border-bottom-left-radius=4px]
+ * @cssproperty {border-radius} [--c2-chat-input--border-bottom-right-radius=4px]
+ *
+ * @cssproperty {padding} [--c2-chat-input--padding-top=8px]
+ * @cssproperty {padding} [--c2-chat-input--padding-right=8px]
+ * @cssproperty {padding} [--c2-chat-input--padding-bottom=8px]
+ * @cssproperty {padding} [--c2-chat-input--padding-left=8px]
+ *
+ * @cssproperty {border} [--c2-chat-input--border-top=1px solid rgb(177, 177, 177)]
+ * @cssproperty {border} [--c2-chat-input--border-right=1px solid rgb(177, 177, 177)]
+ * @cssproperty {border} [--c2-chat-input--border-bottom=1px solid rgb(177, 177, 177)]
+ * @cssproperty {border} [--c2-chat-input--border-left=1px solid rgb(177, 177, 177)]
+ *
+ * @cssproperty {color} [--c2-chat-input--color=rgb(34, 34, 34)]
+ * @cssproperty {background} [--c2-chat-input--background=rgb(255, 255, 255)]
+ *
+ * @cssproperty {font-size} [--c2-chat-input--font-size=14px]
+ * @cssproperty {font-weight} --c2-chat-input--font-weight
+ * @cssproperty {font-style} --c2-chat-input--font-style
+ * @cssproperty {font-family} --c2-chat-input--font-family
+ * @cssproperty {line-height} [--c2-chat-input--line-height=24px]
+ * @cssproperty {max-height} [--c2-chat-input--max-height=25vh]
+ *
+ * @cssproperty {opacity} [--c2-chat-input__placeholder--opacity=0.5]
+ * @cssproperty {font-weight} --c2-chat-input__placeholder--font-weight
+ * @cssproperty {font-style} --c2-chat-input__placeholder--font-style
+ * @cssproperty {color} --c2-chat-input__placeholder--color
+ *
+ * @cssproperty {pixel} [--c2-chat-input__send-icon--width=24px]
+ * @cssproperty {pixel} [--c2-chat-input__send-icon--height=24px]
+ * @cssproperty {opacity} [--c2-chat-input__send-icon--opacity=0.5]
+ * @cssproperty {color} --c2-chat-input__send-icon--color
+ * @cssproperty {color} --c2-chat-input__send-icon__active--color
+ *
+ * @cssproperty {border} --c2-chat-input__focus--border-top
+ * @cssproperty {border} --c2-chat-input__focus--border-right
+ * @cssproperty {border} --c2-chat-input__focus--border-bottom
+ * @cssproperty {border} --c2-chat-input__focus--border-left
+ *
+ * @cssproperty {color} --c2-chat-input__focus--color
+ * @cssproperty {background} --c2-chat-input__focus--background
+ *
+ *
+ */
+export declare class ChatInput extends LitElement {
+    static styles: import("lit").CSSResult;
+    placeholder: string;
+    value: string;
+    private dirty;
+    private scrollBarPosition;
+    private scrollBarHeight;
+    private focused;
+    private readonly input?;
+    handleFocus: () => void;
+    isDirty(): boolean;
+    private inputDimensions;
+    focus(options?: FocusOptions | undefined): void;
+    private handleKeydown;
+    protected handleInput(event: InputEvent): Promise<void>;
+    private updateInputHeight;
+    protected handleFocusin(event: Event): void;
+    protected forwardFocusin(event: Event): void;
+    private redispatchEvent;
+    protected handleFocusout(event: Event): void;
+    private dispatchSubmitEvent;
+    private handleNavContentScroll;
+    private calculateScrollbarPosition;
+    private renderScrollbar;
+    attributeChangedCallback(attribute: string, newValue: string | null, oldValue: string | null): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-chat-input': ChatInput;
+    }
+}
+//# sourceMappingURL=chat-input.d.ts.map

package/types/src/chat-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-input.d.ts","sourceRoot":"","sources":["../../src/chat-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAS1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAoB;IAEd,WAAW,SAAK;IAChB,KAAK,SAAK;IAG7B,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,iBAAiB,CAAI;IAC7B,OAAO,CAAC,eAAe,CAAI;IAC3B,OAAO,CAAC,OAAO,CAAQ;IAGf,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAqB;IAE7D,WAAW,aAEV;IAED,OAAO;IAIP,OAAO,CAAC,eAAe,CAA+C;IAE7D,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI;YAK1C,aAAa;cAgBX,WAAW,CAAC,KAAK,EAAE,UAAU;IAM7C,OAAO,CAAC,iBAAiB;IAgBzB,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK;IAKpC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK;IAIrC,OAAO,CAAC,eAAe;IAIvB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK;IAYrC,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,eAAe;IA2Bd,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAU5F,MAAM;CAgChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAA;KAC3B;CACF"}