ninegrid2 6.565.0 → 6.567.0

package/dist/ai/aiContainer.js

@@ -16,8 +16,7 @@ class aiContainer extends HTMLElement
 	#qdrantClient;
 	//#elChat;
 
-	#geminiApiKey = "";
-	#openaiApiKey = "";
+	settings;		/** nx-ai-settings element */
 
 	constructor() {
 		super();
@@ -65,38 +64,24 @@ class aiContainer extends HTMLElement
 	get target() { return this.#target; };
 	set target(v) { this.#target = v; };
 
-	get geminiApiKey() { return this.#geminiApiKey; };
-	set geminiApiKey(v) { this.#geminiApiKey = v; };
-
-	get openaiApiKey() { return this.#openaiApiKey; };
-	set openaiApiKey(v) { this.#openaiApiKey = v; };
-
-	get ollamaUrl() { return this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#ollamaUrl").value; };
-	set ollamaUrl(v) { this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#ollamaUrl").value = v; };
-
-	get qdrantUrl() { return this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#qdrantUrl").value; };
-	set qdrantUrl(v) { this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#qdrantUrl").value = v; };
-
 	#createModel = () => {
-		const elSettings = this.shadowRoot.querySelector("nx-ai-settings");
-		if (!elSettings) return;
 
-		switch (elSettings.server) {
+		switch (this.settings.server) {
 			case "gemini":
-				this.#model = new ChatGoogleGenerativeAI({ model: elSettings.model, apiKey: this.geminiApiKey, temperature: 0,});
+				this.#model = new ChatGoogleGenerativeAI({ model: this.settings.model, apiKey: this.settings.geminiApiKey, temperature: 0,});
 				break;
 			case "openai":
-				this.#model = new ChatOpenAI({ model: elSettings.model, apiKey: this.openaiApiKey, temperature: 0, });
+				this.#model = new ChatOpenAI({ model: this.settings.model, apiKey: this.settings.openaiApiKey, temperature: 0, });
 				break;
 			case "ollama":
 				this.#model = new Ollama({
-					model: elSettings.model,
-					host: elSettings.ollamaUrl,
+					model: this.settings.model,
+					host: this.settings.ollamaUrl,
 				});
 				break;
 		}
 
-		this.#qdrantClient = new QdrantClient({ url: elSettings.qdrantUrl });
+		this.#qdrantClient = new QdrantClient({ url: this.settings.qdrantUrl });
 	};
 
 	#getColumnInfo = () => {
@@ -178,13 +163,10 @@ class aiContainer extends HTMLElement
 			new HumanMessage(prompt),
 		]);
 
-		const elSettings = this.shadowRoot.querySelector("nx-ai-settings");
-		if (!elSettings) throw new Error("nx-ai-settings missing !!!");
-
 		console.log(response);
 
 		let filterString;
-		switch (elSettings.server) {
+		switch (this.settings.server) {
 			case "openai":
 				filterString = this.#extractJsonSnippet(response.content.trim());
 				break;
@@ -331,6 +313,8 @@ class aiContainer extends HTMLElement
 
 	#init = (info) => {
 		
+		this.settings = this.shadowRoot.querySelector("nx-ai-settings");
+
 		//this.#elChat = this.shadowRoot.querySelector("nx-ai-chat");
 
 		this.shadowRoot.querySelector("textarea").addEventListener("keydown", this.#keydownHandler);
@@ -403,7 +387,7 @@ class aiContainer extends HTMLElement
         if (clickedIcon) clickedIcon.classList.add("active");
 
         // `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
-        this.shadowRoot.querySelector("nx-ai-settings").classList.toggle("expand", !!e.target.closest(".menu-setting"));
+        this.settings.classList.toggle("expand", !!e.target.closest(".menu-setting"));
     };
 }
 

package/dist/ai/aiSettings.js

@@ -9,12 +9,28 @@ class aiSettings extends HTMLElement
 		this.attachShadow({ mode: 'open' });
 	}
 
+	get geminiApiKey() { return this.shadowRoot.querySelector("#geminiApiKey").value; };
+	set geminiApiKey(v) { this.shadowRoot.querySelector("#geminiApiKey").value = v; };
+
+	get openaiApiKey() { this.shadowRoot.querySelector("#openaiApiKey").value };
+	set openaiApiKey(v) { this.shadowRoot.querySelector("#openaiApiKey").value = v; };
+
+	get ollamaUrl() { return this.shadowRoot.querySelector("#ollamaUrl").value; };
+	set ollamaUrl(v) { this.shadowRoot.querySelector("#ollamaUrl").value = v; };
+
+	get qdrantUrl() { return this.shadowRoot.querySelector("#qdrantUrl").value; };
+	set qdrantUrl(v) { this.shadowRoot.querySelector("#qdrantUrl").value = v; };
+
 	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"));
+		});
 	};
 
 	get model() {

package/dist/bundle.cjs.js

@@ -27525,12 +27525,28 @@ class aiSettings extends HTMLElement
 		this.attachShadow({ mode: 'open' });
 	}
 
+	get geminiApiKey() { return this.shadowRoot.querySelector("#geminiApiKey").value; };
+	set geminiApiKey(v) { this.shadowRoot.querySelector("#geminiApiKey").value = v; };
+
+	get openaiApiKey() { this.shadowRoot.querySelector("#openaiApiKey").value; };
+	set openaiApiKey(v) { this.shadowRoot.querySelector("#openaiApiKey").value = v; };
+
+	get ollamaUrl() { return this.shadowRoot.querySelector("#ollamaUrl").value; };
+	set ollamaUrl(v) { this.shadowRoot.querySelector("#ollamaUrl").value = v; };
+
+	get qdrantUrl() { return this.shadowRoot.querySelector("#qdrantUrl").value; };
+	set qdrantUrl(v) { this.shadowRoot.querySelector("#qdrantUrl").value = v; };
+
 	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"));
+		});
 	};
 
 	get model() {
@@ -54174,8 +54190,7 @@ class aiContainer extends HTMLElement
 	#qdrantClient;
 	//#elChat;
 
-	#geminiApiKey = "";
-	#openaiApiKey = "";
+	settings;		/** nx-ai-settings element */
 
 	constructor() {
 		super();
@@ -54223,38 +54238,24 @@ class aiContainer extends HTMLElement
 	get target() { return this.#target; };
 	set target(v) { this.#target = v; };
 
-	get geminiApiKey() { return this.#geminiApiKey; };
-	set geminiApiKey(v) { this.#geminiApiKey = v; };
-
-	get openaiApiKey() { return this.#openaiApiKey; };
-	set openaiApiKey(v) { this.#openaiApiKey = v; };
-
-	get ollamaUrl() { return this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#ollamaUrl").value; };
-	set ollamaUrl(v) { this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#ollamaUrl").value = v; };
-
-	get qdrantUrl() { return this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#qdrantUrl").value; };
-	set qdrantUrl(v) { this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#qdrantUrl").value = v; };
-
 	#createModel = () => {
-		const elSettings = this.shadowRoot.querySelector("nx-ai-settings");
-		if (!elSettings) return;
 
-		switch (elSettings.server) {
+		switch (this.settings.server) {
 			case "gemini":
-				this.#model = new googleGenai.ChatGoogleGenerativeAI({ model: elSettings.model, apiKey: this.geminiApiKey, temperature: 0,});
+				this.#model = new googleGenai.ChatGoogleGenerativeAI({ model: this.settings.model, apiKey: this.settings.geminiApiKey, temperature: 0,});
 				break;
 			case "openai":
-				this.#model = new openai.ChatOpenAI({ model: elSettings.model, apiKey: this.openaiApiKey, temperature: 0, });
+				this.#model = new openai.ChatOpenAI({ model: this.settings.model, apiKey: this.settings.openaiApiKey, temperature: 0, });
 				break;
 			case "ollama":
 				this.#model = new ollama.Ollama({
-					model: elSettings.model,
-					host: elSettings.ollamaUrl,
+					model: this.settings.model,
+					host: this.settings.ollamaUrl,
 				});
 				break;
 		}
 
-		this.#qdrantClient = new QdrantClient({ url: elSettings.qdrantUrl });
+		this.#qdrantClient = new QdrantClient({ url: this.settings.qdrantUrl });
 	};
 
 	#getColumnInfo = () => {
@@ -54336,13 +54337,10 @@ class aiContainer extends HTMLElement
 			new messages.HumanMessage(prompt),
 		]);
 
-		const elSettings = this.shadowRoot.querySelector("nx-ai-settings");
-		if (!elSettings) throw new Error("nx-ai-settings missing !!!");
-
 		console.log(response);
 
 		let filterString;
-		switch (elSettings.server) {
+		switch (this.settings.server) {
 			case "openai":
 				filterString = this.#extractJsonSnippet(response.content.trim());
 				break;
@@ -54463,6 +54461,8 @@ class aiContainer extends HTMLElement
 
 	#init = (info) => {
 		
+		this.settings = this.shadowRoot.querySelector("nx-ai-settings");
+
 		//this.#elChat = this.shadowRoot.querySelector("nx-ai-chat");
 
 		this.shadowRoot.querySelector("textarea").addEventListener("keydown", this.#keydownHandler);
@@ -54534,7 +54534,7 @@ class aiContainer extends HTMLElement
         if (clickedIcon) clickedIcon.classList.add("active");
 
         // `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
-        this.shadowRoot.querySelector("nx-ai-settings").classList.toggle("expand", !!e.target.closest(".menu-setting"));
+        this.settings.classList.toggle("expand", !!e.target.closest(".menu-setting"));
     };
 }
 

package/dist/bundle.esm.js

@@ -27523,12 +27523,28 @@ class aiSettings extends HTMLElement
 		this.attachShadow({ mode: 'open' });
 	}
 
+	get geminiApiKey() { return this.shadowRoot.querySelector("#geminiApiKey").value; };
+	set geminiApiKey(v) { this.shadowRoot.querySelector("#geminiApiKey").value = v; };
+
+	get openaiApiKey() { this.shadowRoot.querySelector("#openaiApiKey").value; };
+	set openaiApiKey(v) { this.shadowRoot.querySelector("#openaiApiKey").value = v; };
+
+	get ollamaUrl() { return this.shadowRoot.querySelector("#ollamaUrl").value; };
+	set ollamaUrl(v) { this.shadowRoot.querySelector("#ollamaUrl").value = v; };
+
+	get qdrantUrl() { return this.shadowRoot.querySelector("#qdrantUrl").value; };
+	set qdrantUrl(v) { this.shadowRoot.querySelector("#qdrantUrl").value = v; };
+
 	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"));
+		});
 	};
 
 	get model() {
@@ -54172,8 +54188,7 @@ class aiContainer extends HTMLElement
 	#qdrantClient;
 	//#elChat;
 
-	#geminiApiKey = "";
-	#openaiApiKey = "";
+	settings;		/** nx-ai-settings element */
 
 	constructor() {
 		super();
@@ -54221,38 +54236,24 @@ class aiContainer extends HTMLElement
 	get target() { return this.#target; };
 	set target(v) { this.#target = v; };
 
-	get geminiApiKey() { return this.#geminiApiKey; };
-	set geminiApiKey(v) { this.#geminiApiKey = v; };
-
-	get openaiApiKey() { return this.#openaiApiKey; };
-	set openaiApiKey(v) { this.#openaiApiKey = v; };
-
-	get ollamaUrl() { return this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#ollamaUrl").value; };
-	set ollamaUrl(v) { this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#ollamaUrl").value = v; };
-
-	get qdrantUrl() { return this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#qdrantUrl").value; };
-	set qdrantUrl(v) { this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#qdrantUrl").value = v; };
-
 	#createModel = () => {
-		const elSettings = this.shadowRoot.querySelector("nx-ai-settings");
-		if (!elSettings) return;
 
-		switch (elSettings.server) {
+		switch (this.settings.server) {
 			case "gemini":
-				this.#model = new ChatGoogleGenerativeAI({ model: elSettings.model, apiKey: this.geminiApiKey, temperature: 0,});
+				this.#model = new ChatGoogleGenerativeAI({ model: this.settings.model, apiKey: this.settings.geminiApiKey, temperature: 0,});
 				break;
 			case "openai":
-				this.#model = new ChatOpenAI({ model: elSettings.model, apiKey: this.openaiApiKey, temperature: 0, });
+				this.#model = new ChatOpenAI({ model: this.settings.model, apiKey: this.settings.openaiApiKey, temperature: 0, });
 				break;
 			case "ollama":
 				this.#model = new Ollama({
-					model: elSettings.model,
-					host: elSettings.ollamaUrl,
+					model: this.settings.model,
+					host: this.settings.ollamaUrl,
 				});
 				break;
 		}
 
-		this.#qdrantClient = new QdrantClient({ url: elSettings.qdrantUrl });
+		this.#qdrantClient = new QdrantClient({ url: this.settings.qdrantUrl });
 	};
 
 	#getColumnInfo = () => {
@@ -54334,13 +54335,10 @@ class aiContainer extends HTMLElement
 			new HumanMessage(prompt),
 		]);
 
-		const elSettings = this.shadowRoot.querySelector("nx-ai-settings");
-		if (!elSettings) throw new Error("nx-ai-settings missing !!!");
-
 		console.log(response);
 
 		let filterString;
-		switch (elSettings.server) {
+		switch (this.settings.server) {
 			case "openai":
 				filterString = this.#extractJsonSnippet(response.content.trim());
 				break;
@@ -54461,6 +54459,8 @@ class aiContainer extends HTMLElement
 
 	#init = (info) => {
 		
+		this.settings = this.shadowRoot.querySelector("nx-ai-settings");
+
 		//this.#elChat = this.shadowRoot.querySelector("nx-ai-chat");
 
 		this.shadowRoot.querySelector("textarea").addEventListener("keydown", this.#keydownHandler);
@@ -54532,7 +54532,7 @@ class aiContainer extends HTMLElement
         if (clickedIcon) clickedIcon.classList.add("active");
 
         // `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
-        this.shadowRoot.querySelector("nx-ai-settings").classList.toggle("expand", !!e.target.closest(".menu-setting"));
+        this.settings.classList.toggle("expand", !!e.target.closest(".menu-setting"));
     };
 }
 

package/package.json

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

package/src/ai/aiContainer.js

@@ -16,8 +16,7 @@ class aiContainer extends HTMLElement
 	#qdrantClient;
 	//#elChat;
 
-	#geminiApiKey = "";
-	#openaiApiKey = "";
+	settings;		/** nx-ai-settings element */
 
 	constructor() {
 		super();
@@ -65,38 +64,24 @@ class aiContainer extends HTMLElement
 	get target() { return this.#target; };
 	set target(v) { this.#target = v; };
 
-	get geminiApiKey() { return this.#geminiApiKey; };
-	set geminiApiKey(v) { this.#geminiApiKey = v; };
-
-	get openaiApiKey() { return this.#openaiApiKey; };
-	set openaiApiKey(v) { this.#openaiApiKey = v; };
-
-	get ollamaUrl() { return this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#ollamaUrl").value; };
-	set ollamaUrl(v) { this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#ollamaUrl").value = v; };
-
-	get qdrantUrl() { return this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#qdrantUrl").value; };
-	set qdrantUrl(v) { this.shadowRoot.querySelector("nx-ai-settings").shadowRoot.querySelector("#qdrantUrl").value = v; };
-
 	#createModel = () => {
-		const elSettings = this.shadowRoot.querySelector("nx-ai-settings");
-		if (!elSettings) return;
 
-		switch (elSettings.server) {
+		switch (this.settings.server) {
 			case "gemini":
-				this.#model = new ChatGoogleGenerativeAI({ model: elSettings.model, apiKey: this.geminiApiKey, temperature: 0,});
+				this.#model = new ChatGoogleGenerativeAI({ model: this.settings.model, apiKey: this.settings.geminiApiKey, temperature: 0,});
 				break;
 			case "openai":
-				this.#model = new ChatOpenAI({ model: elSettings.model, apiKey: this.openaiApiKey, temperature: 0, });
+				this.#model = new ChatOpenAI({ model: this.settings.model, apiKey: this.settings.openaiApiKey, temperature: 0, });
 				break;
 			case "ollama":
 				this.#model = new Ollama({
-					model: elSettings.model,
-					host: elSettings.ollamaUrl,
+					model: this.settings.model,
+					host: this.settings.ollamaUrl,
 				});
 				break;
 		}
 
-		this.#qdrantClient = new QdrantClient({ url: elSettings.qdrantUrl });
+		this.#qdrantClient = new QdrantClient({ url: this.settings.qdrantUrl });
 	};
 
 	#getColumnInfo = () => {
@@ -178,13 +163,10 @@ class aiContainer extends HTMLElement
 			new HumanMessage(prompt),
 		]);
 
-		const elSettings = this.shadowRoot.querySelector("nx-ai-settings");
-		if (!elSettings) throw new Error("nx-ai-settings missing !!!");
-
 		console.log(response);
 
 		let filterString;
-		switch (elSettings.server) {
+		switch (this.settings.server) {
 			case "openai":
 				filterString = this.#extractJsonSnippet(response.content.trim());
 				break;
@@ -331,6 +313,8 @@ class aiContainer extends HTMLElement
 
 	#init = (info) => {
 		
+		this.settings = this.shadowRoot.querySelector("nx-ai-settings");
+
 		//this.#elChat = this.shadowRoot.querySelector("nx-ai-chat");
 
 		this.shadowRoot.querySelector("textarea").addEventListener("keydown", this.#keydownHandler);
@@ -403,7 +387,7 @@ class aiContainer extends HTMLElement
         if (clickedIcon) clickedIcon.classList.add("active");
 
         // `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
-        this.shadowRoot.querySelector("nx-ai-settings").classList.toggle("expand", !!e.target.closest(".menu-setting"));
+        this.settings.classList.toggle("expand", !!e.target.closest(".menu-setting"));
     };
 }
 

package/src/ai/aiSettings.js

@@ -9,12 +9,28 @@ class aiSettings extends HTMLElement
 		this.attachShadow({ mode: 'open' });
 	}
 
+	get geminiApiKey() { return this.shadowRoot.querySelector("#geminiApiKey").value; };
+	set geminiApiKey(v) { this.shadowRoot.querySelector("#geminiApiKey").value = v; };
+
+	get openaiApiKey() { this.shadowRoot.querySelector("#openaiApiKey").value };
+	set openaiApiKey(v) { this.shadowRoot.querySelector("#openaiApiKey").value = v; };
+
+	get ollamaUrl() { return this.shadowRoot.querySelector("#ollamaUrl").value; };
+	set ollamaUrl(v) { this.shadowRoot.querySelector("#ollamaUrl").value = v; };
+
+	get qdrantUrl() { return this.shadowRoot.querySelector("#qdrantUrl").value; };
+	set qdrantUrl(v) { this.shadowRoot.querySelector("#qdrantUrl").value = v; };
+
 	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"));
+		});
 	};
 
 	get model() {