ide-assi 0.46.0 → 0.47.0

package/dist/bundle.cjs.js

@@ -193405,6 +193405,7 @@ class IdeAi
 
 class IdeAssi extends HTMLElement
 {
+	settings;
 	#ai;
 	#ing = false;
 
@@ -193426,6 +193427,8 @@ class IdeAssi extends HTMLElement
 			</style>
 
 			<div class="wrapper">
+				<ide-assi-settings></ide-assi-settings>
+			
 				<div class="container">
 					<div class="head">
 						<div class="logo"></div>
@@ -193453,13 +193456,14 @@ class IdeAssi extends HTMLElement
 
 
 	#init = (info) => {
-		
+		this.settings = this.shadowRoot.querySelector("nx-ai-settings");
+
 		this.shadowRoot.querySelector("textarea").addEventListener("keydown", this.#keydownHandler);
 
 		this.shadowRoot.querySelector(".expand-icon").addEventListener("click", this.#toggleCollapseHandler);
 		this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", this.#toggleCollapseHandler);
 
-		//this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.addEventListener("click", this.#menuClickHandler));
+		this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.addEventListener("click", this.#menuClickHandler));
 	};
 
 
@@ -193553,6 +193557,19 @@ export default Home;
 	#toggleCollapseHandler = () => {
 		this.classList.toggle("collapse");
 	};
+
+	#menuClickHandler = (e) => {
+
+		// 모든 `.menu-icon`에서 `active` 클래스 제거
+		this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.classList.remove("active"));
+
+		// 클릭한 `.menu-icon`에 `active` 클래스 추가
+		const clickedIcon = e.target.closest(".menu-icon");
+		if (clickedIcon) clickedIcon.classList.add("active");
+
+		// `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
+		this.settings.classList.toggle("expand", !!e.target.closest(".menu-setting"));
+	};
 }
 
 customElements.define("ide-assi", IdeAssi);

package/dist/bundle.esm.js

@@ -193401,6 +193401,7 @@ class IdeAi
 
 class IdeAssi extends HTMLElement
 {
+	settings;
 	#ai;
 	#ing = false;
 
@@ -193422,6 +193423,8 @@ class IdeAssi extends HTMLElement
 			</style>
 
 			<div class="wrapper">
+				<ide-assi-settings></ide-assi-settings>
+			
 				<div class="container">
 					<div class="head">
 						<div class="logo"></div>
@@ -193449,13 +193452,14 @@ class IdeAssi extends HTMLElement
 
 
 	#init = (info) => {
-		
+		this.settings = this.shadowRoot.querySelector("nx-ai-settings");
+
 		this.shadowRoot.querySelector("textarea").addEventListener("keydown", this.#keydownHandler);
 
 		this.shadowRoot.querySelector(".expand-icon").addEventListener("click", this.#toggleCollapseHandler);
 		this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", this.#toggleCollapseHandler);
 
-		//this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.addEventListener("click", this.#menuClickHandler));
+		this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.addEventListener("click", this.#menuClickHandler));
 	};
 
 
@@ -193549,6 +193553,19 @@ export default Home;
 	#toggleCollapseHandler = () => {
 		this.classList.toggle("collapse");
 	};
+
+	#menuClickHandler = (e) => {
+
+		// 모든 `.menu-icon`에서 `active` 클래스 제거
+		this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.classList.remove("active"));
+
+		// 클릭한 `.menu-icon`에 `active` 클래스 추가
+		const clickedIcon = e.target.closest(".menu-icon");
+		if (clickedIcon) clickedIcon.classList.add("active");
+
+		// `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
+		this.settings.classList.toggle("expand", !!e.target.closest(".menu-setting"));
+	};
 }
 
 customElements.define("ide-assi", IdeAssi);

package/dist/components/ideAssi.js

@@ -3,6 +3,7 @@ import { IdeAi } from "./ideAi.js";
 
 export class IdeAssi extends HTMLElement
 {
+	settings;
 	#ai;
 	#ing = false;
 
@@ -24,6 +25,8 @@ export class IdeAssi extends HTMLElement
 			</style>
 
 			<div class="wrapper">
+				<ide-assi-settings></ide-assi-settings>
+			
 				<div class="container">
 					<div class="head">
 						<div class="logo"></div>
@@ -51,13 +54,14 @@ export class IdeAssi extends HTMLElement
 
 
 	#init = (info) => {
-		
+		this.settings = this.shadowRoot.querySelector("nx-ai-settings");
+
 		this.shadowRoot.querySelector("textarea").addEventListener("keydown", this.#keydownHandler);
 
 		this.shadowRoot.querySelector(".expand-icon").addEventListener("click", this.#toggleCollapseHandler);
 		this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", this.#toggleCollapseHandler);
 
-		//this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.addEventListener("click", this.#menuClickHandler));
+		this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.addEventListener("click", this.#menuClickHandler));
 	};
 
 
@@ -151,6 +155,19 @@ export default Home;
 	#toggleCollapseHandler = () => {
 		this.classList.toggle("collapse");
 	};
+
+	#menuClickHandler = (e) => {
+
+		// 모든 `.menu-icon`에서 `active` 클래스 제거
+		this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.classList.remove("active"));
+
+		// 클릭한 `.menu-icon`에 `active` 클래스 추가
+		const clickedIcon = e.target.closest(".menu-icon");
+		if (clickedIcon) clickedIcon.classList.add("active");
+
+		// `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
+		this.settings.classList.toggle("expand", !!e.target.closest(".menu-setting"));
+	};
 }
 
 customElements.define("ide-assi", IdeAssi);

package/dist/components/ideAssiSettings.js

@@ -0,0 +1,147 @@
+import ninegrid from "ninegrid2";
+
+class ideAssiSettings extends HTMLElement
+{
+	constructor() {
+		console.log("construct");
+
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	get geminiApiKey() { return this.shadowRoot.querySelector("#geminiApiKey").value; };
+	set geminiApiKey(v) { this.shadowRoot.querySelector("#geminiApiKey").value = v; };
+
+	get openaiApiKey() { return 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() {
+		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() {
+	
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
+				${ninegrid.getCustomPath(this,"ai.css")}
+			</style>
+
+			<div class="line subject">
+				<label for="server">Server:</label>
+			</div>
+			<div class="line contents">
+				<label><input name="server" type="radio" value="gemini" checked>Gemini</label>
+				<label><input name="server" type="radio" value="openai">Open AI</label>
+				<label><input name="server" type="radio" value="ollama">Ollama</label>
+			</div>
+			<div class="line gemini-bak" style="display:none;">
+				<label>API Key: <input id="geminiApiKey" value=""/></label>
+			</div>
+			<div class="line openai-bak" style="display:none;">
+				<label>API Key: <input id="openaiApiKey" value=""/></label>
+			</div>
+			<div class="line subject ollama">
+				<label for="ollamaUrl">Server Url:</label>
+			</div>
+			<div class="line contents ollama">
+				<input type="text" id="ollamaUrl" value="http://localhost:11434"/></label>
+			</div>
+			<div class="line subject ollama">
+				<label for="ollamaModel">Model:</label>
+			</div>
+			<div class="line contents ollama">
+				<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>
+			</div>
+			<div class="line subject gemini">
+				<label for="geminiModel">Model:</label>
+			</div>
+			<div class="line contents gemini">
+				<select id="geminiModel">
+					<option value="gemini-2.5-flash-preview-04-17">gemini-2.5-flash-preview-04-17</option>
+					<option value="gemini-pro">gemini-pro</option>
+				</select>
+			</div>
+			<div class="line subject openai">
+				<label for="openaiModel">Model:</label>
+			</div>
+			<div class="line contents openai">
+				<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>
+			</div>
+			
+			<div class="line subject qdrant">
+				<label for="qdrantUrl">Qdrant Url:</label>
+			</div>
+			<div class="line contents qdrant">
+				<input type="text" id="qdrantUrl" value="http://localhost:6333"/>
+			</div>
+
+			<div class="line subject analyze">
+				<input id="chkAnalyze" type="checkbox" checked> <input id="txtAnalyze" type="number" value="100"><label>건 미만인 경우 데이타 분석 요청</label>
+			</div>
+		`;
+
+		this.#init();
+
+		setTimeout(() => {
+        	this.server = "gemini";
+    	}, 0);
+	};
+
+	
+
+	#init = () => {
+
+		this.shadowRoot.querySelectorAll('input[name="server"]').forEach((radio) => {
+			radio.addEventListener("change", () => {
+				const server = this.shadowRoot.querySelector('input[name="server"]:checked').value;
+
+				["gemini","openai","ollama"].forEach(v => {
+					this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
+						elem.style.display = (server === v) ? "flex" : "none";
+					});
+				});
+			});
+		});
+	}
+}
+
+customElements.define("ide-assi-settings", ideAssiSettings);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideAssi.js

@@ -3,6 +3,7 @@ import { IdeAi } from "./ideAi.js";
 
 export class IdeAssi extends HTMLElement
 {
+	settings;
 	#ai;
 	#ing = false;
 
@@ -24,6 +25,8 @@ export class IdeAssi extends HTMLElement
 			</style>
 
 			<div class="wrapper">
+				<ide-assi-settings></ide-assi-settings>
+			
 				<div class="container">
 					<div class="head">
 						<div class="logo"></div>
@@ -51,13 +54,14 @@ export class IdeAssi extends HTMLElement
 
 
 	#init = (info) => {
-		
+		this.settings = this.shadowRoot.querySelector("nx-ai-settings");
+
 		this.shadowRoot.querySelector("textarea").addEventListener("keydown", this.#keydownHandler);
 
 		this.shadowRoot.querySelector(".expand-icon").addEventListener("click", this.#toggleCollapseHandler);
 		this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", this.#toggleCollapseHandler);
 
-		//this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.addEventListener("click", this.#menuClickHandler));
+		this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.addEventListener("click", this.#menuClickHandler));
 	};
 
 
@@ -151,6 +155,19 @@ export default Home;
 	#toggleCollapseHandler = () => {
 		this.classList.toggle("collapse");
 	};
+
+	#menuClickHandler = (e) => {
+
+		// 모든 `.menu-icon`에서 `active` 클래스 제거
+		this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.classList.remove("active"));
+
+		// 클릭한 `.menu-icon`에 `active` 클래스 추가
+		const clickedIcon = e.target.closest(".menu-icon");
+		if (clickedIcon) clickedIcon.classList.add("active");
+
+		// `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
+		this.settings.classList.toggle("expand", !!e.target.closest(".menu-setting"));
+	};
 }
 
 customElements.define("ide-assi", IdeAssi);

package/src/components/ideAssiSettings.js

@@ -0,0 +1,147 @@
+import ninegrid from "ninegrid2";
+
+class ideAssiSettings extends HTMLElement
+{
+	constructor() {
+		console.log("construct");
+
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	get geminiApiKey() { return this.shadowRoot.querySelector("#geminiApiKey").value; };
+	set geminiApiKey(v) { this.shadowRoot.querySelector("#geminiApiKey").value = v; };
+
+	get openaiApiKey() { return 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() {
+		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() {
+	
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
+				${ninegrid.getCustomPath(this,"ai.css")}
+			</style>
+
+			<div class="line subject">
+				<label for="server">Server:</label>
+			</div>
+			<div class="line contents">
+				<label><input name="server" type="radio" value="gemini" checked>Gemini</label>
+				<label><input name="server" type="radio" value="openai">Open AI</label>
+				<label><input name="server" type="radio" value="ollama">Ollama</label>
+			</div>
+			<div class="line gemini-bak" style="display:none;">
+				<label>API Key: <input id="geminiApiKey" value=""/></label>
+			</div>
+			<div class="line openai-bak" style="display:none;">
+				<label>API Key: <input id="openaiApiKey" value=""/></label>
+			</div>
+			<div class="line subject ollama">
+				<label for="ollamaUrl">Server Url:</label>
+			</div>
+			<div class="line contents ollama">
+				<input type="text" id="ollamaUrl" value="http://localhost:11434"/></label>
+			</div>
+			<div class="line subject ollama">
+				<label for="ollamaModel">Model:</label>
+			</div>
+			<div class="line contents ollama">
+				<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>
+			</div>
+			<div class="line subject gemini">
+				<label for="geminiModel">Model:</label>
+			</div>
+			<div class="line contents gemini">
+				<select id="geminiModel">
+					<option value="gemini-2.5-flash-preview-04-17">gemini-2.5-flash-preview-04-17</option>
+					<option value="gemini-pro">gemini-pro</option>
+				</select>
+			</div>
+			<div class="line subject openai">
+				<label for="openaiModel">Model:</label>
+			</div>
+			<div class="line contents openai">
+				<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>
+			</div>
+			
+			<div class="line subject qdrant">
+				<label for="qdrantUrl">Qdrant Url:</label>
+			</div>
+			<div class="line contents qdrant">
+				<input type="text" id="qdrantUrl" value="http://localhost:6333"/>
+			</div>
+
+			<div class="line subject analyze">
+				<input id="chkAnalyze" type="checkbox" checked> <input id="txtAnalyze" type="number" value="100"><label>건 미만인 경우 데이타 분석 요청</label>
+			</div>
+		`;
+
+		this.#init();
+
+		setTimeout(() => {
+        	this.server = "gemini";
+    	}, 0);
+	};
+
+	
+
+	#init = () => {
+
+		this.shadowRoot.querySelectorAll('input[name="server"]').forEach((radio) => {
+			radio.addEventListener("change", () => {
+				const server = this.shadowRoot.querySelector('input[name="server"]:checked').value;
+
+				["gemini","openai","ollama"].forEach(v => {
+					this.shadowRoot.querySelectorAll('.' + v).forEach((elem) => {
+						elem.style.display = (server === v) ? "flex" : "none";
+					});
+				});
+			});
+		});
+	}
+}
+
+customElements.define("ide-assi-settings", ideAssiSettings);