ninegrid2 6.256.0 → 6.258.0

package/dist/css/aiMessage.css

@@ -0,0 +1,31 @@
+: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;
+	position: relative;
+	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
+}
+
+: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);
+}

package/dist/etc/ngMaximize.js

@@ -77,9 +77,11 @@ class ngMaxPopup extends HTMLElement
 	}
 	
 	popup = () => {
-		//console.log(this.#owner.data);
-		this.#grd.data.assign(this.#owner.data.get());
-		this.shadowRoot.querySelector('dialog').showModal();
+		setTimeout(() => {
+			/** 생성 즉시 호출시 오류 (this.#grd.data null) */
+			this.#grd.data.assign(this.#owner.data.get());
+			this.shadowRoot.querySelector('dialog').showModal();
+		}, 100);
 	};
 }
 

package/dist/etc/ngMenu.js

@@ -133,7 +133,10 @@ class ngMenu extends HTMLElement
 					//if (ninegrid.j.querySelectorAll(this.#owner).hasClass("ng-maximize")) {
 						$('ng-max-popup', this.#owner.shadowRoot).remove();
 						$(this.#owner.shadowRoot).append($('<ng-max-popup></ng-max-popup>'));
+						//setTimeout(() => {
 						this.#owner.shadowRoot.querySelector("ng-max-popup").popup();
+						//}, 100);
+						
 					//}
 					break;
 				case "import":

package/dist/etc/ninegridContainer.js

@@ -661,12 +661,9 @@ class ninegridContainer extends HTMLElement
 		this.columns = new ngColumns(this);
 		
 		for (var s in this.dataManager) {		// 함수 복사
-			console.log(s);
-			
 			if (this.dataManager[s] instanceof Function && !["xxx"].includes(s)) {
 				this[s] = this.dataManager[s].bind(this);
 			} else if (["data","row","tree"].includes(s)) {
-
 				this[s] = this.dataManager[s];
 			}
 		}

package/dist/index.js

@@ -100,6 +100,7 @@ import "./etc/nxTopMenu.js";
 //import "./etc/object-observe.js";
 
 import "./ai/aiSettings.js";
+import "./ai/aiMessage.js";
 
 if (typeof window !== "undefined") {
 	//window.ninegrid = window.NG = ninegrid;

package/dist/utils/ninegrid.js

@@ -19,8 +19,6 @@ export class ninegrid {
             });
         }
 
-		console.log("shadow" in Element.prototype);
-		
 		if (!("shadow" in Element.prototype)) {
 			Object.defineProperty(Element.prototype, "shadow", {
 				get: function () {

package/package.json

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

package/src/ai/aiMessage.js

@@ -0,0 +1,95 @@
+//import ninegrid from "../index.js";
+
+class aiMyMessage extends HTMLElement
+{
+	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 msg = this.getAttribute("message");
+	
+		console.log(msg);
+
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/aiMessage.css";
+				${ninegrid.getCustomPath(this,"ngInputText.css")}
+			</style>
+
+			<div class="line">
+				aaa
+			</div>
+		`;
+
+		this.#init();
+	};
+
+	
+
+	#init = () => {
+
+
+		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 }
+				}));
+			});
+		});
+	}
+}
+
+customElements.define("nx-ai-my-message", aiMyMessage);

package/src/css/aiMessage.css

@@ -0,0 +1,31 @@
+: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;
+	position: relative;
+	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
+}
+
+: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);
+}

package/src/etc/ngMaximize.js

@@ -77,9 +77,11 @@ class ngMaxPopup extends HTMLElement
 	}
 	
 	popup = () => {
-		//console.log(this.#owner.data);
-		this.#grd.data.assign(this.#owner.data.get());
-		this.shadowRoot.querySelector('dialog').showModal();
+		setTimeout(() => {
+			/** 생성 즉시 호출시 오류 (this.#grd.data null) */
+			this.#grd.data.assign(this.#owner.data.get());
+			this.shadowRoot.querySelector('dialog').showModal();
+		}, 100);
 	};
 }
 

package/src/etc/ngMenu.js

@@ -133,7 +133,10 @@ class ngMenu extends HTMLElement
 					//if (ninegrid.j.querySelectorAll(this.#owner).hasClass("ng-maximize")) {
 						$('ng-max-popup', this.#owner.shadowRoot).remove();
 						$(this.#owner.shadowRoot).append($('<ng-max-popup></ng-max-popup>'));
+						//setTimeout(() => {
 						this.#owner.shadowRoot.querySelector("ng-max-popup").popup();
+						//}, 100);
+						
 					//}
 					break;
 				case "import":

package/src/etc/ninegridContainer.js

@@ -661,12 +661,9 @@ class ninegridContainer extends HTMLElement
 		this.columns = new ngColumns(this);
 		
 		for (var s in this.dataManager) {		// 함수 복사
-			console.log(s);
-			
 			if (this.dataManager[s] instanceof Function && !["xxx"].includes(s)) {
 				this[s] = this.dataManager[s].bind(this);
 			} else if (["data","row","tree"].includes(s)) {
-
 				this[s] = this.dataManager[s];
 			}
 		}

package/src/index.js

@@ -100,6 +100,7 @@ import "./etc/nxTopMenu.js";
 //import "./etc/object-observe.js";
 
 import "./ai/aiSettings.js";
+import "./ai/aiMessage.js";
 
 if (typeof window !== "undefined") {
 	//window.ninegrid = window.NG = ninegrid;

package/src/utils/ninegrid.js

@@ -19,8 +19,6 @@ export class ninegrid {
             });
         }
 
-		console.log("shadow" in Element.prototype);
-		
 		if (!("shadow" in Element.prototype)) {
 			Object.defineProperty(Element.prototype, "shadow", {
 				get: function () {