ninegrid2 6.262.0 → 6.264.0

package/dist/ai/aiMessage.js

@@ -1,51 +1,18 @@
 import ninegrid from "../index.js";
 
-class aiMyMessage extends HTMLElement
+class aiIngMessage extends HTMLElement
 {
+	#message;
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
-
-	get server() {
-		return this.shadowRoot.querySelector('input[name="server"]:checked')?.value;
-	};
-	set server(v) {
-		const elem = this.shadowRoot.querySelector(`input[name="server"][value="${v}"]`);
-		if (elem) elem.checked = true;
-
-		this.shadowRoot.querySelectorAll('input[name="server"]').forEach(el => {
-			el.dispatchEvent(new Event("change"));
-		});
-
-		this.dispatchEvent(new CustomEvent(this.EVENT.MODEL_CHANGE, {
-			detail: { server: this.server, model: this.model }
-		}));
-	};
-
-	get model() {
-		return this.shadowRoot.querySelector(`#${this.server}Model`)?.value;
-	};
-	set model(v) {
-		const elem = this.shadowRoot.querySelector(`#${this.server}Model`);
-		if (elem) {
-			elem.value = v;
-			elem.dispatchEvent(new Event("change"));
-		}
-
-		/**
-		this.dispatchEvent(new CustomEvent("setting-change", {
-			detail: { server: this.server, model: this.model }
-		})); */
-	};
-
-	
 	
 	connectedCallback() {
+		//const message = this.getAttribute("message");
 
-		const msg = this.getAttribute("message");
-	
-		console.log(msg);
+		this.#message = ".";
 
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -53,43 +20,45 @@ class aiMyMessage extends HTMLElement
 				${ninegrid.getCustomPath(this,"aiMessage.css")}
 			</style>
 
-			<div class="line">
-				aaa
+			<div class="wrapper">
+				.
 			</div>
 		`;
 
 		this.#init();
 	};
 
-	
-
 	#init = () => {
+		const interval = setInterval(() => {
+			this.#message = this.#message.length < 3 ? this.#message + "." : "";
 
+			this.shadowRoot.querySelector(".wrapper").innerHTML = this.#message;
+		}, 500);
+	};
+}
 
-		return;
-
-		this.shadowRoot.querySelectorAll('input[name="server"]').forEach((radio) => {
-			radio.addEventListener("change", () => {
-				const server = this.shadowRoot.querySelector('input[name="server"]:checked').value;
+class aiMyMessage extends HTMLElement
+{
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		const message = this.getAttribute("message");
 
-				["openai","ollama"].forEach(v => {
-					this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
-						elem.style.display = (server === v) ? "flex" : "none";
-					});
-				});
-			});
-		});
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
+				${ninegrid.getCustomPath(this,"aiMessage.css")}
+			</style>
 
-		this.shadowRoot.querySelectorAll('#ollamaModel,#openaiModel,input[name="server"]').forEach(el => {
-			//console.log(el);
-			el.addEventListener("change", e => {
-				//console.log(e);
-				this.dispatchEvent(new CustomEvent(this.EVENT.MODEL_CHANGE, {
-					detail: { server: this.server, model: this.model }
-				}));
-			});
-		});
-	}
+			<div class="wrapper">
+				${message}
+			</div>
+		`;
+	};
 }
 
+customElements.define("nx-ai-ing-message", aiIngMessage);
 customElements.define("nx-ai-my-message", aiMyMessage);

package/dist/bundle.cjs.js

@@ -27282,52 +27282,19 @@ class aiSettings extends HTMLElement
 
 customElements.define("nx-ai-settings", aiSettings);
 
-class aiMyMessage extends HTMLElement
+class aiIngMessage extends HTMLElement
 {
+	#message;
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
-
-	get server() {
-		return this.shadowRoot.querySelector('input[name="server"]:checked')?.value;
-	};
-	set server(v) {
-		const elem = this.shadowRoot.querySelector(`input[name="server"][value="${v}"]`);
-		if (elem) elem.checked = true;
-
-		this.shadowRoot.querySelectorAll('input[name="server"]').forEach(el => {
-			el.dispatchEvent(new Event("change"));
-		});
-
-		this.dispatchEvent(new CustomEvent(this.EVENT.MODEL_CHANGE, {
-			detail: { server: this.server, model: this.model }
-		}));
-	};
-
-	get model() {
-		return this.shadowRoot.querySelector(`#${this.server}Model`)?.value;
-	};
-	set model(v) {
-		const elem = this.shadowRoot.querySelector(`#${this.server}Model`);
-		if (elem) {
-			elem.value = v;
-			elem.dispatchEvent(new Event("change"));
-		}
-
-		/**
-		this.dispatchEvent(new CustomEvent("setting-change", {
-			detail: { server: this.server, model: this.model }
-		})); */
-	};
-
-	
 	
 	connectedCallback() {
+		//const message = this.getAttribute("message");
 
-		const msg = this.getAttribute("message");
-	
-		console.log(msg);
+		this.#message = ".";
 
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -27335,23 +27302,47 @@ class aiMyMessage extends HTMLElement
 				${ninegrid.getCustomPath(this,"aiMessage.css")}
 			</style>
 
-			<div class="line">
-				aaa
+			<div class="wrapper">
+				.
 			</div>
 		`;
 
 		this.#init();
 	};
 
-	
-
 	#init = () => {
+		setInterval(() => {
+			this.#message = this.#message.length < 3 ? this.#message + "." : "";
 
+			this.shadowRoot.querySelector(".wrapper").innerHTML = this.#message;
+		}, 500);
+	};
+}
 
-		return;
+class aiMyMessage extends HTMLElement
+{
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
 	}
+	
+	connectedCallback() {
+		const message = this.getAttribute("message");
+
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
+				${ninegrid.getCustomPath(this,"aiMessage.css")}
+			</style>
+
+			<div class="wrapper">
+				${message}
+			</div>
+		`;
+	};
 }
 
+customElements.define("nx-ai-ing-message", aiIngMessage);
 customElements.define("nx-ai-my-message", aiMyMessage);
 
 //import $ from "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js";

package/dist/bundle.esm.js

@@ -27280,52 +27280,19 @@ class aiSettings extends HTMLElement
 
 customElements.define("nx-ai-settings", aiSettings);
 
-class aiMyMessage extends HTMLElement
+class aiIngMessage extends HTMLElement
 {
+	#message;
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
-
-	get server() {
-		return this.shadowRoot.querySelector('input[name="server"]:checked')?.value;
-	};
-	set server(v) {
-		const elem = this.shadowRoot.querySelector(`input[name="server"][value="${v}"]`);
-		if (elem) elem.checked = true;
-
-		this.shadowRoot.querySelectorAll('input[name="server"]').forEach(el => {
-			el.dispatchEvent(new Event("change"));
-		});
-
-		this.dispatchEvent(new CustomEvent(this.EVENT.MODEL_CHANGE, {
-			detail: { server: this.server, model: this.model }
-		}));
-	};
-
-	get model() {
-		return this.shadowRoot.querySelector(`#${this.server}Model`)?.value;
-	};
-	set model(v) {
-		const elem = this.shadowRoot.querySelector(`#${this.server}Model`);
-		if (elem) {
-			elem.value = v;
-			elem.dispatchEvent(new Event("change"));
-		}
-
-		/**
-		this.dispatchEvent(new CustomEvent("setting-change", {
-			detail: { server: this.server, model: this.model }
-		})); */
-	};
-
-	
 	
 	connectedCallback() {
+		//const message = this.getAttribute("message");
 
-		const msg = this.getAttribute("message");
-	
-		console.log(msg);
+		this.#message = ".";
 
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -27333,23 +27300,47 @@ class aiMyMessage extends HTMLElement
 				${ninegrid.getCustomPath(this,"aiMessage.css")}
 			</style>
 
-			<div class="line">
-				aaa
+			<div class="wrapper">
+				.
 			</div>
 		`;
 
 		this.#init();
 	};
 
-	
-
 	#init = () => {
+		setInterval(() => {
+			this.#message = this.#message.length < 3 ? this.#message + "." : "";
 
+			this.shadowRoot.querySelector(".wrapper").innerHTML = this.#message;
+		}, 500);
+	};
+}
 
-		return;
+class aiMyMessage extends HTMLElement
+{
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
 	}
+	
+	connectedCallback() {
+		const message = this.getAttribute("message");
+
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
+				${ninegrid.getCustomPath(this,"aiMessage.css")}
+			</style>
+
+			<div class="wrapper">
+				${message}
+			</div>
+		`;
+	};
 }
 
+customElements.define("nx-ai-ing-message", aiIngMessage);
 customElements.define("nx-ai-my-message", aiMyMessage);
 
 //import $ from "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js";

package/dist/css/aiMessage.css

@@ -1,12 +1,10 @@
 :host {
 	display: flex;
-	justify-content: flex-end;
 	padding: 5px;
 	max-width: 70%;
 	padding: 8px 16px;
 	border-radius: 8px;
 	font-size: 14px;
-	background-color: #fef01b;
 	text-align: left;
 	color: #333;
 	align-self: flex-end;
@@ -15,17 +13,6 @@
 }
 
 :host(nx-ai-my-message) {
-	display: flex;
 	justify-content: flex-end;
-	padding: 5px;
-	max-width: 70%;
-	padding: 8px 16px;
-	border-radius: 8px;
-	font-size: 14px;
-	background-color: red;
-	text-align: left;
-	color: #333;
-	align-self: flex-end;
-	position: relative;
-	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
-}
+	background-color: #fef01b;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.262.0",
+  "version": "6.264.0",
   "main": "dist/index.js",
   "exports": {
     "import": "./dist/index.js",

package/src/ai/aiMessage.js

@@ -1,51 +1,18 @@
 import ninegrid from "../index.js";
 
-class aiMyMessage extends HTMLElement
+class aiIngMessage extends HTMLElement
 {
+	#message;
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
-
-	get server() {
-		return this.shadowRoot.querySelector('input[name="server"]:checked')?.value;
-	};
-	set server(v) {
-		const elem = this.shadowRoot.querySelector(`input[name="server"][value="${v}"]`);
-		if (elem) elem.checked = true;
-
-		this.shadowRoot.querySelectorAll('input[name="server"]').forEach(el => {
-			el.dispatchEvent(new Event("change"));
-		});
-
-		this.dispatchEvent(new CustomEvent(this.EVENT.MODEL_CHANGE, {
-			detail: { server: this.server, model: this.model }
-		}));
-	};
-
-	get model() {
-		return this.shadowRoot.querySelector(`#${this.server}Model`)?.value;
-	};
-	set model(v) {
-		const elem = this.shadowRoot.querySelector(`#${this.server}Model`);
-		if (elem) {
-			elem.value = v;
-			elem.dispatchEvent(new Event("change"));
-		}
-
-		/**
-		this.dispatchEvent(new CustomEvent("setting-change", {
-			detail: { server: this.server, model: this.model }
-		})); */
-	};
-
-	
 	
 	connectedCallback() {
+		//const message = this.getAttribute("message");
 
-		const msg = this.getAttribute("message");
-	
-		console.log(msg);
+		this.#message = ".";
 
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -53,43 +20,45 @@ class aiMyMessage extends HTMLElement
 				${ninegrid.getCustomPath(this,"aiMessage.css")}
 			</style>
 
-			<div class="line">
-				aaa
+			<div class="wrapper">
+				.
 			</div>
 		`;
 
 		this.#init();
 	};
 
-	
-
 	#init = () => {
+		const interval = setInterval(() => {
+			this.#message = this.#message.length < 3 ? this.#message + "." : "";
 
+			this.shadowRoot.querySelector(".wrapper").innerHTML = this.#message;
+		}, 500);
+	};
+}
 
-		return;
-
-		this.shadowRoot.querySelectorAll('input[name="server"]').forEach((radio) => {
-			radio.addEventListener("change", () => {
-				const server = this.shadowRoot.querySelector('input[name="server"]:checked').value;
+class aiMyMessage extends HTMLElement
+{
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		const message = this.getAttribute("message");
 
-				["openai","ollama"].forEach(v => {
-					this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
-						elem.style.display = (server === v) ? "flex" : "none";
-					});
-				});
-			});
-		});
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
+				${ninegrid.getCustomPath(this,"aiMessage.css")}
+			</style>
 
-		this.shadowRoot.querySelectorAll('#ollamaModel,#openaiModel,input[name="server"]').forEach(el => {
-			//console.log(el);
-			el.addEventListener("change", e => {
-				//console.log(e);
-				this.dispatchEvent(new CustomEvent(this.EVENT.MODEL_CHANGE, {
-					detail: { server: this.server, model: this.model }
-				}));
-			});
-		});
-	}
+			<div class="wrapper">
+				${message}
+			</div>
+		`;
+	};
 }
 
+customElements.define("nx-ai-ing-message", aiIngMessage);
 customElements.define("nx-ai-my-message", aiMyMessage);

package/src/css/aiMessage.css

@@ -1,12 +1,10 @@
 :host {
 	display: flex;
-	justify-content: flex-end;
 	padding: 5px;
 	max-width: 70%;
 	padding: 8px 16px;
 	border-radius: 8px;
 	font-size: 14px;
-	background-color: #fef01b;
 	text-align: left;
 	color: #333;
 	align-self: flex-end;
@@ -15,17 +13,6 @@
 }
 
 :host(nx-ai-my-message) {
-	display: flex;
 	justify-content: flex-end;
-	padding: 5px;
-	max-width: 70%;
-	padding: 8px 16px;
-	border-radius: 8px;
-	font-size: 14px;
-	background-color: red;
-	text-align: left;
-	color: #333;
-	align-self: flex-end;
-	position: relative;
-	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
-}
+	background-color: #fef01b;
+}