ninegrid2 6.263.0 → 6.265.0

package/dist/ai/aiMessage.js

@@ -1,48 +1,53 @@
 import ninegrid from "../index.js";
 
-class aiMyMessage extends HTMLElement
+class aiMessage extends HTMLElement
 {
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
+	
+	connectedCallback() {
+		const message = this.getAttribute("message");
 
-	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.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
+				${ninegrid.getCustomPath(this,"aiMessage.css")}
+			</style>
 
-		this.shadowRoot.querySelectorAll('input[name="server"]').forEach(el => {
-			el.dispatchEvent(new Event("change"));
-		});
+			<div class="chat-message">
+				${message}
+			</div>
 
-		this.dispatchEvent(new CustomEvent(this.EVENT.MODEL_CHANGE, {
-			detail: { server: this.server, model: this.model }
-		}));
-	};
+			<div class="chat-menu">
+				<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
+					<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+				</svg>
+			</div>
+		`;
 
-	get model() {
-		return this.shadowRoot.querySelector(`#${this.server}Model`)?.value;
+		this.#init();
 	};
-	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 }
-		})); */
+
+	#init = () => {
+		
 	};
+}
 
-	
+class aiIngMessage extends HTMLElement
+{
+	#message;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
 	
 	connectedCallback() {
-		const message = this.getAttribute("message");
+		//const message = this.getAttribute("message");
+
+		this.#message = ".";
 
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -50,43 +55,45 @@ class aiMyMessage extends HTMLElement
 				${ninegrid.getCustomPath(this,"aiMessage.css")}
 			</style>
 
-			<div class="wrapper">
-				${message}
+			<div class="chat-message">
+				.
 			</div>
 		`;
 
 		this.#init();
 	};
 
-	
-
 	#init = () => {
+		const interval = setInterval(() => {
+			this.#message = this.#message.length < 3 ? this.#message + "." : "";
+			this.shadowRoot.querySelector(".chat-message").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;
-
-				["openai","ollama"].forEach(v => {
-					this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
-						elem.style.display = (server === v) ? "flex" : "none";
-					});
-				});
-			});
-		});
-
-		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 }
-				}));
-			});
-		});
+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="chat-message">
+				${message}
+			</div>
+		`;
+	};
 }
 
+customElements.define("nx-ai-message", aiMessage);
+customElements.define("nx-ai-ing-message", aiIngMessage);
 customElements.define("nx-ai-my-message", aiMyMessage);

package/dist/bundle.cjs.js

@@ -27282,49 +27282,54 @@ class aiSettings extends HTMLElement
 
 customElements.define("nx-ai-settings", aiSettings);
 
-class aiMyMessage extends HTMLElement
+class aiMessage extends HTMLElement
 {
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
+	
+	connectedCallback() {
+		const message = this.getAttribute("message");
 
-	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.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
+				${ninegrid.getCustomPath(this,"aiMessage.css")}
+			</style>
 
-		this.shadowRoot.querySelectorAll('input[name="server"]').forEach(el => {
-			el.dispatchEvent(new Event("change"));
-		});
+			<div class="chat-message">
+				${message}
+			</div>
 
-		this.dispatchEvent(new CustomEvent(this.EVENT.MODEL_CHANGE, {
-			detail: { server: this.server, model: this.model }
-		}));
-	};
+			<div class="chat-menu">
+				<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
+					<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+				</svg>
+			</div>
+		`;
 
-	get model() {
-		return this.shadowRoot.querySelector(`#${this.server}Model`)?.value;
+		this.#init();
 	};
-	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 }
-		})); */
+	#init = () => {
+		
 	};
+}
 
-	
+class aiIngMessage extends HTMLElement
+{
+	#message;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
 	
 	connectedCallback() {
-		const message = this.getAttribute("message");
+		//const message = this.getAttribute("message");
+
+		this.#message = ".";
 
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -27332,23 +27337,47 @@ class aiMyMessage extends HTMLElement
 				${ninegrid.getCustomPath(this,"aiMessage.css")}
 			</style>
 
-			<div class="wrapper">
-				${message}
+			<div class="chat-message">
+				.
 			</div>
 		`;
 
 		this.#init();
 	};
 
-	
-
 	#init = () => {
+		setInterval(() => {
+			this.#message = this.#message.length < 3 ? this.#message + "." : "";
+			this.shadowRoot.querySelector(".chat-message").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="chat-message">
+				${message}
+			</div>
+		`;
+	};
 }
 
+customElements.define("nx-ai-message", aiMessage);
+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,49 +27280,54 @@ class aiSettings extends HTMLElement
 
 customElements.define("nx-ai-settings", aiSettings);
 
-class aiMyMessage extends HTMLElement
+class aiMessage extends HTMLElement
 {
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
+	
+	connectedCallback() {
+		const message = this.getAttribute("message");
 
-	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.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
+				${ninegrid.getCustomPath(this,"aiMessage.css")}
+			</style>
 
-		this.shadowRoot.querySelectorAll('input[name="server"]').forEach(el => {
-			el.dispatchEvent(new Event("change"));
-		});
+			<div class="chat-message">
+				${message}
+			</div>
 
-		this.dispatchEvent(new CustomEvent(this.EVENT.MODEL_CHANGE, {
-			detail: { server: this.server, model: this.model }
-		}));
-	};
+			<div class="chat-menu">
+				<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
+					<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+				</svg>
+			</div>
+		`;
 
-	get model() {
-		return this.shadowRoot.querySelector(`#${this.server}Model`)?.value;
+		this.#init();
 	};
-	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 }
-		})); */
+	#init = () => {
+		
 	};
+}
 
-	
+class aiIngMessage extends HTMLElement
+{
+	#message;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
 	
 	connectedCallback() {
-		const message = this.getAttribute("message");
+		//const message = this.getAttribute("message");
+
+		this.#message = ".";
 
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -27330,23 +27335,47 @@ class aiMyMessage extends HTMLElement
 				${ninegrid.getCustomPath(this,"aiMessage.css")}
 			</style>
 
-			<div class="wrapper">
-				${message}
+			<div class="chat-message">
+				.
 			</div>
 		`;
 
 		this.#init();
 	};
 
-	
-
 	#init = () => {
+		setInterval(() => {
+			this.#message = this.#message.length < 3 ? this.#message + "." : "";
+			this.shadowRoot.querySelector(".chat-message").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="chat-message">
+				${message}
+			</div>
+		`;
+	};
 }
 
+customElements.define("nx-ai-message", aiMessage);
+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/package.json

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

package/src/ai/aiMessage.js

@@ -1,48 +1,53 @@
 import ninegrid from "../index.js";
 
-class aiMyMessage extends HTMLElement
+class aiMessage extends HTMLElement
 {
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
+	
+	connectedCallback() {
+		const message = this.getAttribute("message");
 
-	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.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
+				${ninegrid.getCustomPath(this,"aiMessage.css")}
+			</style>
 
-		this.shadowRoot.querySelectorAll('input[name="server"]').forEach(el => {
-			el.dispatchEvent(new Event("change"));
-		});
+			<div class="chat-message">
+				${message}
+			</div>
 
-		this.dispatchEvent(new CustomEvent(this.EVENT.MODEL_CHANGE, {
-			detail: { server: this.server, model: this.model }
-		}));
-	};
+			<div class="chat-menu">
+				<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
+					<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+				</svg>
+			</div>
+		`;
 
-	get model() {
-		return this.shadowRoot.querySelector(`#${this.server}Model`)?.value;
+		this.#init();
 	};
-	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 }
-		})); */
+
+	#init = () => {
+		
 	};
+}
 
-	
+class aiIngMessage extends HTMLElement
+{
+	#message;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
 	
 	connectedCallback() {
-		const message = this.getAttribute("message");
+		//const message = this.getAttribute("message");
+
+		this.#message = ".";
 
 		this.shadowRoot.innerHTML = `
 			<style>
@@ -50,43 +55,45 @@ class aiMyMessage extends HTMLElement
 				${ninegrid.getCustomPath(this,"aiMessage.css")}
 			</style>
 
-			<div class="wrapper">
-				${message}
+			<div class="chat-message">
+				.
 			</div>
 		`;
 
 		this.#init();
 	};
 
-	
-
 	#init = () => {
+		const interval = setInterval(() => {
+			this.#message = this.#message.length < 3 ? this.#message + "." : "";
+			this.shadowRoot.querySelector(".chat-message").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;
-
-				["openai","ollama"].forEach(v => {
-					this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
-						elem.style.display = (server === v) ? "flex" : "none";
-					});
-				});
-			});
-		});
-
-		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 }
-				}));
-			});
-		});
+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="chat-message">
+				${message}
+			</div>
+		`;
+	};
 }
 
+customElements.define("nx-ai-message", aiMessage);
+customElements.define("nx-ai-ing-message", aiIngMessage);
 customElements.define("nx-ai-my-message", aiMyMessage);