ide-assi 0.2.0 → 0.3.0

package/dist/components/ideAssi.js

@@ -0,0 +1,190 @@
+//import ninegrid from "../index.js";
+import ninegrid from "ninegrid2";
+
+class ideAssi extends HTMLElement
+{
+	#ing = false;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+
+		const textareaText = "나에게 무엇이든 물어봐...";
+		
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideAssi.css";
+				${ninegrid.getCustomPath(this,"ideAssi.css")}
+			</style>
+
+			<div class="wrapper">
+				<div class="container">
+					<div class="head">
+						<div class="logo"></div>
+					</div>
+					<nx-ai-chat></nx-ai-chat>
+					<div class="foot">
+						<textarea name="ask" id="q" name="q" rows="4" placeholder="${textareaText}"></textarea>
+					</div>
+				</div>
+				<div class="menu">
+					<div class="collapse-icon"></div>
+					<div class="menu-icon menu-filter active"></div>
+					<div class="menu-icon menu-general"></div>
+					<div class="menu-icon menu-setting"></div>
+				</div>
+			</div>
+
+			<div class="expand-icon"></div>
+		`;
+
+		requestAnimationFrame(() => {
+			this.#init();
+		});
+	};
+
+
+	#init = (info) => {
+		
+		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));
+	};
+
+
+	#getMenuInfo = (question) => {
+		let arr = [];
+
+		ninegrid.querySelectorAll("nx-side-menu-item[url][title]").forEach(elem => {
+			arr.push({
+				//menuId: elem.getAttribute("menu-id"),
+				url: elem.getAttribute("url"),
+				title: elem.getAttribute("title"),
+			})
+		});
+
+		return arr;
+	};
+
+	#getTableInfo = async (question) => {
+		const response = await fetch("/api/meta/tables", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				//filename: "HelloWorld.java",
+				//filename: "Test.jsx",
+				//content: js
+			})
+		});
+
+		console.log(response);
+
+	};
+
+
+	/**
+	 * 1. 소스 명칭 package 예) tmpl.population
+	 * 2. 소스가 없으면 소스 생성
+	 * 3.
+	 */
+	#generateSource = async (question) => {
+
+		const menuInfo = this.#getMenuInfo();
+		const tableInfo = await this.#getTableInfo();
+	};
+
+	#keydownHandler = async (e) => {
+		if (e.key !== "Enter") return;
+
+		e.preventDefault();
+
+		const question = e.target.value.trim();
+		if (!question) return;
+
+		if (this.#ing) return;
+		this.#ing = true;
+
+		/**
+		 * setTimeout 없으면, 맥에서 한글 잔상이 남음
+		 * setTimeout 내에서 e.target이 nx-ai-container가 된다.
+		 */
+		setTimeout(() => {
+			this.shadowRoot.querySelector("textarea").value = "";
+		});
+
+		const elAiChat = this.shadowRoot.querySelector("nx-ai-chat");
+
+		elAiChat.add("me", question);
+		elAiChat.add("ing", question);
+
+		try {
+			this.#generateSource(question);
+		} catch (error) {
+			console.error(error);
+			elAiChat.add("ai", error);
+		}
+
+		/**
+		try {
+			const code = `
+				package tmpl.generated;
+				
+				public class HelloWorld {
+					public String sayHello() {
+						return "Hello from generated class!";
+					}
+				}
+				`;
+
+			const js = `
+const Home = () => {
+	const wrapStyle = {
+		backgroundColor: "white",
+		color: "black",
+		padding: "0px",
+		textAlign: "center",
+		fontSize: "18px",
+		height: "100%",
+	};
+	
+	return (
+		<div style={wrapStyle}>
+			11111
+		</div>
+	);
+};
+
+export default Home;
+`;
+
+
+			await fetch("/api/files/js", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					//filename: "HelloWorld.java",
+					filename: "Test.jsx",
+					content: js
+				})
+			});
+		} catch (error) {
+			console.error(error);
+			//elAiChat.add("ai", error);
+		}
+		*/
+
+		this.#ing = false;
+	}
+
+	#toggleCollapseHandler = () => {
+		this.classList.toggle("collapse");
+	};
+}
+
+customElements.define("ide-assi", ideAssi);

package/dist/index.js

@@ -1,8 +1 @@
-class HelloCard extends HTMLElement {
-    connectedCallback() {
-        this.innerHTML = `<div style="padding:1rem;border:1px solid #ddd;">
-      안녕하세요, <b>${this.getAttribute("name") ?? "게스트"}</b>!
-    </div>`;
-    }
-}
-customElements.define("hello-card", HelloCard);
+import "./components/ideAssi.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -30,6 +30,7 @@
     "@langchain/openai": "^0.x.x",
     "exceljs": "^4.4.0",
     "jquery": "^3.6.0",
+    "ninegrid2": "^6.650.0",
     "react": "^19.1.0"
   },
   "peerDependencies": {

package/src/components/ideAssi.js

@@ -0,0 +1,189 @@
+import ninegrid from "ninegrid2";
+
+class ideAssi extends HTMLElement
+{
+	#ing = false;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+
+		const textareaText = "나에게 무엇이든 물어봐...";
+		
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideAssi.css";
+				${ninegrid.getCustomPath(this,"ideAssi.css")}
+			</style>
+
+			<div class="wrapper">
+				<div class="container">
+					<div class="head">
+						<div class="logo"></div>
+					</div>
+					<nx-ai-chat></nx-ai-chat>
+					<div class="foot">
+						<textarea name="ask" id="q" name="q" rows="4" placeholder="${textareaText}"></textarea>
+					</div>
+				</div>
+				<div class="menu">
+					<div class="collapse-icon"></div>
+					<div class="menu-icon menu-filter active"></div>
+					<div class="menu-icon menu-general"></div>
+					<div class="menu-icon menu-setting"></div>
+				</div>
+			</div>
+
+			<div class="expand-icon"></div>
+		`;
+
+		requestAnimationFrame(() => {
+			this.#init();
+		});
+	};
+
+
+	#init = (info) => {
+		
+		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));
+	};
+
+
+	#getMenuInfo = (question) => {
+		let arr = [];
+
+		ninegrid.querySelectorAll("nx-side-menu-item[url][title]").forEach(elem => {
+			arr.push({
+				//menuId: elem.getAttribute("menu-id"),
+				url: elem.getAttribute("url"),
+				title: elem.getAttribute("title"),
+			})
+		});
+
+		return arr;
+	};
+
+	#getTableInfo = async (question) => {
+		const response = await fetch("/api/meta/tables", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				//filename: "HelloWorld.java",
+				//filename: "Test.jsx",
+				//content: js
+			})
+		});
+
+		console.log(response);
+
+	};
+
+
+	/**
+	 * 1. 소스 명칭 package 예) tmpl.population
+	 * 2. 소스가 없으면 소스 생성
+	 * 3.
+	 */
+	#generateSource = async (question) => {
+
+		const menuInfo = this.#getMenuInfo();
+		const tableInfo = await this.#getTableInfo();
+	};
+
+	#keydownHandler = async (e) => {
+		if (e.key !== "Enter") return;
+
+		e.preventDefault();
+
+		const question = e.target.value.trim();
+		if (!question) return;
+
+		if (this.#ing) return;
+		this.#ing = true;
+
+		/**
+		 * setTimeout 없으면, 맥에서 한글 잔상이 남음
+		 * setTimeout 내에서 e.target이 nx-ai-container가 된다.
+		 */
+		setTimeout(() => {
+			this.shadowRoot.querySelector("textarea").value = "";
+		});
+
+		const elAiChat = this.shadowRoot.querySelector("nx-ai-chat");
+
+		elAiChat.add("me", question);
+		elAiChat.add("ing", question);
+
+		try {
+			this.#generateSource(question);
+		} catch (error) {
+			console.error(error);
+			elAiChat.add("ai", error);
+		}
+
+		/**
+		try {
+			const code = `
+				package tmpl.generated;
+				
+				public class HelloWorld {
+					public String sayHello() {
+						return "Hello from generated class!";
+					}
+				}
+				`;
+
+			const js = `
+const Home = () => {
+	const wrapStyle = {
+		backgroundColor: "white",
+		color: "black",
+		padding: "0px",
+		textAlign: "center",
+		fontSize: "18px",
+		height: "100%",
+	};
+	
+	return (
+		<div style={wrapStyle}>
+			11111
+		</div>
+	);
+};
+
+export default Home;
+`;
+
+
+			await fetch("/api/files/js", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					//filename: "HelloWorld.java",
+					filename: "Test.jsx",
+					content: js
+				})
+			});
+		} catch (error) {
+			console.error(error);
+			//elAiChat.add("ai", error);
+		}
+		*/
+
+		this.#ing = false;
+	}
+
+	#toggleCollapseHandler = () => {
+		this.classList.toggle("collapse");
+	};
+}
+
+customElements.define("ide-assi", ideAssi);

package/src/index.js

@@ -1,8 +1 @@
-class HelloCard extends HTMLElement {
-    connectedCallback() {
-        this.innerHTML = `<div style="padding:1rem;border:1px solid #ddd;">
-      안녕하세요, <b>${this.getAttribute("name") ?? "게스트"}</b>!
-    </div>`;
-    }
-}
-customElements.define("hello-card", HelloCard);
+import "./components/ideAssi.js";