ninegrid2 6.109.0 → 6.111.0

package/dist/ai/aiSettings.js

@@ -2,8 +2,6 @@
 
 class aiSettings extends HTMLElement
 {
-	#model;
-
 	constructor() {
 		console.log("construct");
 
@@ -11,23 +9,23 @@ class aiSettings extends HTMLElement
 		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;
+	};
+
 	get model() {
-		return this.#model?.value || "";
+		return this.shadowRoot.querySelector(`#${this.server}Model`)?.value;
 	};
 	set model(v) {
-		console.log(v, this.#model);
-
-		//this.#model = v;
-
-		this.shadowRoot.querySelector("#model").value = this.#model = v;
-		
-		//this.#model.value = v;
-		
-
-		//if (this.#model) {
-        //    this.#model.value = v;
-        //}
+		const elem = this.shadowRoot.querySelector(`#${this.server}Model`);
+		if (elem) elem.value = v;
 	};
+
+	
 	
 	connectedCallback() {
 	
@@ -49,6 +47,10 @@ class aiSettings extends HTMLElement
 					justify-content: center;
 					align-items: center;
 					opacity: 0;
+					flex-direction: column;
+					align-items: flex-start;
+					padding-left: 16px;
+					gap: 16px;
 					transform: translateX(100%);
 					transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 				}
@@ -57,21 +59,69 @@ class aiSettings extends HTMLElement
 					display: flex;
 					animation: slideLeft 0.3s ease-out forwards;
 				}
+
+				.class {
+					display: flex;
+
+				}
 			</style>
 
-			<div">
-				<div>
-					<label for="model">Model:</label>
-					<input id="model" value="${this.#model}"/>
-				</div>
+			<div class="line">
+				<label for="server">Server:</label>
+				<label><input name="server" type="radio" value="openai" checked>Open AI</label>
+				<label><input name="server" type="radio" value="ollama">Ollama</label>
+			</div>
+			<div class="line openai">
+				<label>API Key: <input id="openaiApiKey" value="${this.openaiApiKey}"/></label>
+			</div>
+			<div class="line ollama">
+				<label>Url: <input id="ollamaUrl" value="${this.ollamaUrl}"/></label>
+			</div>
+			<div class="line openai">
+				<label>
+					Model:
+					<select id="openaiModel">
+						<option value="gpt-4">gpt-4</option>
+						<option value="gpt-4o">gpt-4o</option>
+						<option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
+					</select>
+				</label>
+			</div>
+			<div class="line ollama">
+				<label>
+					Model:
+					<select id="ollamaModel">
+						<option value="phi4:14b">phi4:14b</option>
+						<option value="llama3.1:8b">llama3.1:8b</option>
+						<option value="mistral:7b">mistral:7b</option>
+					</select>
+				</label>
 			</div>
 		`;
 
-		//this.#model = this.shadowRoot.querySelector("#model");
-
-		//console.log(this.#model);
-		//this.classList.add("ai-settings");
+		this.#init();
 	};
+
+	
+
+	#init = () => {
+
+		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 => {
+					console.log(v);
+					this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
+						console.log(elem);
+						elem.style.display = (server === v) ? "flex" : "none";
+					});
+				});
+			});
+		});
+
+		this.shadowRoot.querySelector('input[name="server"][value="ollama"]').checked = true;
+	}
 }
 
 customElements.define("nx-ai-settings", aiSettings);

package/dist/bundle.cjs.js

@@ -27294,8 +27294,6 @@ customElements.define("nx-top-menu", nxTopMenu);
 
 class aiSettings extends HTMLElement
 {
-	#model;
-
 	constructor() {
 		console.log("construct");
 
@@ -27303,23 +27301,23 @@ class aiSettings extends HTMLElement
 		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;
+	};
+
 	get model() {
-		return this.#model?.value || "";
+		return this.shadowRoot.querySelector(`#${this.server}Model`)?.value;
 	};
 	set model(v) {
-		console.log(v, this.#model);
-
-		//this.#model = v;
-
-		this.shadowRoot.querySelector("#model").value = this.#model = v;
-		
-		//this.#model.value = v;
-		
-
-		//if (this.#model) {
-        //    this.#model.value = v;
-        //}
+		const elem = this.shadowRoot.querySelector(`#${this.server}Model`);
+		if (elem) elem.value = v;
 	};
+
+	
 	
 	connectedCallback() {
 	
@@ -27341,6 +27339,10 @@ class aiSettings extends HTMLElement
 					justify-content: center;
 					align-items: center;
 					opacity: 0;
+					flex-direction: column;
+					align-items: flex-start;
+					padding-left: 16px;
+					gap: 16px;
 					transform: translateX(100%);
 					transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 				}
@@ -27349,21 +27351,69 @@ class aiSettings extends HTMLElement
 					display: flex;
 					animation: slideLeft 0.3s ease-out forwards;
 				}
+
+				.class {
+					display: flex;
+
+				}
 			</style>
 
-			<div">
-				<div>
-					<label for="model">Model:</label>
-					<input id="model" value="${this.#model}"/>
-				</div>
+			<div class="line">
+				<label for="server">Server:</label>
+				<label><input name="server" type="radio" value="openai" checked>Open AI</label>
+				<label><input name="server" type="radio" value="ollama">Ollama</label>
+			</div>
+			<div class="line openai">
+				<label>API Key: <input id="openaiApiKey" value="${this.openaiApiKey}"/></label>
+			</div>
+			<div class="line ollama">
+				<label>Url: <input id="ollamaUrl" value="${this.ollamaUrl}"/></label>
+			</div>
+			<div class="line openai">
+				<label>
+					Model:
+					<select id="openaiModel">
+						<option value="gpt-4">gpt-4</option>
+						<option value="gpt-4o">gpt-4o</option>
+						<option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
+					</select>
+				</label>
+			</div>
+			<div class="line ollama">
+				<label>
+					Model:
+					<select id="ollamaModel">
+						<option value="phi4:14b">phi4:14b</option>
+						<option value="llama3.1:8b">llama3.1:8b</option>
+						<option value="mistral:7b">mistral:7b</option>
+					</select>
+				</label>
 			</div>
 		`;
 
-		//this.#model = this.shadowRoot.querySelector("#model");
-
-		//console.log(this.#model);
-		//this.classList.add("ai-settings");
+		this.#init();
 	};
+
+	
+
+	#init = () => {
+
+		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 => {
+					console.log(v);
+					this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
+						console.log(elem);
+						elem.style.display = (server === v) ? "flex" : "none";
+					});
+				});
+			});
+		});
+
+		this.shadowRoot.querySelector('input[name="server"][value="ollama"]').checked = true;
+	}
 }
 
 customElements.define("nx-ai-settings", aiSettings);

package/dist/bundle.esm.js

@@ -27292,8 +27292,6 @@ customElements.define("nx-top-menu", nxTopMenu);
 
 class aiSettings extends HTMLElement
 {
-	#model;
-
 	constructor() {
 		console.log("construct");
 
@@ -27301,23 +27299,23 @@ class aiSettings extends HTMLElement
 		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;
+	};
+
 	get model() {
-		return this.#model?.value || "";
+		return this.shadowRoot.querySelector(`#${this.server}Model`)?.value;
 	};
 	set model(v) {
-		console.log(v, this.#model);
-
-		//this.#model = v;
-
-		this.shadowRoot.querySelector("#model").value = this.#model = v;
-		
-		//this.#model.value = v;
-		
-
-		//if (this.#model) {
-        //    this.#model.value = v;
-        //}
+		const elem = this.shadowRoot.querySelector(`#${this.server}Model`);
+		if (elem) elem.value = v;
 	};
+
+	
 	
 	connectedCallback() {
 	
@@ -27339,6 +27337,10 @@ class aiSettings extends HTMLElement
 					justify-content: center;
 					align-items: center;
 					opacity: 0;
+					flex-direction: column;
+					align-items: flex-start;
+					padding-left: 16px;
+					gap: 16px;
 					transform: translateX(100%);
 					transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 				}
@@ -27347,21 +27349,69 @@ class aiSettings extends HTMLElement
 					display: flex;
 					animation: slideLeft 0.3s ease-out forwards;
 				}
+
+				.class {
+					display: flex;
+
+				}
 			</style>
 
-			<div">
-				<div>
-					<label for="model">Model:</label>
-					<input id="model" value="${this.#model}"/>
-				</div>
+			<div class="line">
+				<label for="server">Server:</label>
+				<label><input name="server" type="radio" value="openai" checked>Open AI</label>
+				<label><input name="server" type="radio" value="ollama">Ollama</label>
+			</div>
+			<div class="line openai">
+				<label>API Key: <input id="openaiApiKey" value="${this.openaiApiKey}"/></label>
+			</div>
+			<div class="line ollama">
+				<label>Url: <input id="ollamaUrl" value="${this.ollamaUrl}"/></label>
+			</div>
+			<div class="line openai">
+				<label>
+					Model:
+					<select id="openaiModel">
+						<option value="gpt-4">gpt-4</option>
+						<option value="gpt-4o">gpt-4o</option>
+						<option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
+					</select>
+				</label>
+			</div>
+			<div class="line ollama">
+				<label>
+					Model:
+					<select id="ollamaModel">
+						<option value="phi4:14b">phi4:14b</option>
+						<option value="llama3.1:8b">llama3.1:8b</option>
+						<option value="mistral:7b">mistral:7b</option>
+					</select>
+				</label>
 			</div>
 		`;
 
-		//this.#model = this.shadowRoot.querySelector("#model");
-
-		//console.log(this.#model);
-		//this.classList.add("ai-settings");
+		this.#init();
 	};
+
+	
+
+	#init = () => {
+
+		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 => {
+					console.log(v);
+					this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
+						console.log(elem);
+						elem.style.display = (server === v) ? "flex" : "none";
+					});
+				});
+			});
+		});
+
+		this.shadowRoot.querySelector('input[name="server"][value="ollama"]').checked = true;
+	}
 }
 
 customElements.define("nx-ai-settings", aiSettings);

package/package.json

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

package/src/ai/aiSettings.js

@@ -2,8 +2,6 @@
 
 class aiSettings extends HTMLElement
 {
-	#model;
-
 	constructor() {
 		console.log("construct");
 
@@ -11,23 +9,23 @@ class aiSettings extends HTMLElement
 		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;
+	};
+
 	get model() {
-		return this.#model?.value || "";
+		return this.shadowRoot.querySelector(`#${this.server}Model`)?.value;
 	};
 	set model(v) {
-		console.log(v, this.#model);
-
-		//this.#model = v;
-
-		this.shadowRoot.querySelector("#model").value = this.#model = v;
-		
-		//this.#model.value = v;
-		
-
-		//if (this.#model) {
-        //    this.#model.value = v;
-        //}
+		const elem = this.shadowRoot.querySelector(`#${this.server}Model`);
+		if (elem) elem.value = v;
 	};
+
+	
 	
 	connectedCallback() {
 	
@@ -49,6 +47,10 @@ class aiSettings extends HTMLElement
 					justify-content: center;
 					align-items: center;
 					opacity: 0;
+					flex-direction: column;
+					align-items: flex-start;
+					padding-left: 16px;
+					gap: 16px;
 					transform: translateX(100%);
 					transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 				}
@@ -57,21 +59,69 @@ class aiSettings extends HTMLElement
 					display: flex;
 					animation: slideLeft 0.3s ease-out forwards;
 				}
+
+				.class {
+					display: flex;
+
+				}
 			</style>
 
-			<div">
-				<div>
-					<label for="model">Model:</label>
-					<input id="model" value="${this.#model}"/>
-				</div>
+			<div class="line">
+				<label for="server">Server:</label>
+				<label><input name="server" type="radio" value="openai" checked>Open AI</label>
+				<label><input name="server" type="radio" value="ollama">Ollama</label>
+			</div>
+			<div class="line openai">
+				<label>API Key: <input id="openaiApiKey" value="${this.openaiApiKey}"/></label>
+			</div>
+			<div class="line ollama">
+				<label>Url: <input id="ollamaUrl" value="${this.ollamaUrl}"/></label>
+			</div>
+			<div class="line openai">
+				<label>
+					Model:
+					<select id="openaiModel">
+						<option value="gpt-4">gpt-4</option>
+						<option value="gpt-4o">gpt-4o</option>
+						<option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
+					</select>
+				</label>
+			</div>
+			<div class="line ollama">
+				<label>
+					Model:
+					<select id="ollamaModel">
+						<option value="phi4:14b">phi4:14b</option>
+						<option value="llama3.1:8b">llama3.1:8b</option>
+						<option value="mistral:7b">mistral:7b</option>
+					</select>
+				</label>
 			</div>
 		`;
 
-		//this.#model = this.shadowRoot.querySelector("#model");
-
-		//console.log(this.#model);
-		//this.classList.add("ai-settings");
+		this.#init();
 	};
+
+	
+
+	#init = () => {
+
+		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 => {
+					console.log(v);
+					this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
+						console.log(elem);
+						elem.style.display = (server === v) ? "flex" : "none";
+					});
+				});
+			});
+		});
+
+		this.shadowRoot.querySelector('input[name="server"][value="ollama"]').checked = true;
+	}
 }
 
 customElements.define("nx-ai-settings", aiSettings);