ninegrid2 6.500.0 → 6.502.0

package/dist/ai/aiContainer.js

@@ -2,7 +2,10 @@ import ninegrid from "../index.js";
 
 class aiContainer extends HTMLElement
 {
-	
+	#target;
+	#ing = false;
+	//#elChat;
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -47,13 +50,159 @@ class aiContainer extends HTMLElement
 		});
 	};
 
+	get target() {
+		return this.#target;
+	};
+	set target(v) {
+		this.#target = v;
+	}
+
+	#getColumnInfo = () => {
+		let colInfo = "";
+
+		console.log(this.#target, this.#target.tagName);
+
+		this.#target.columns.info().forEach(info => {
+			colInfo += `- "${info.name}": ${info.desc}, ${info.type}\n`;
+		});
+
+		console.log(colInfo);
+	};
+
+	#generateQdrantFilter = async (userInput) => {
+
+		//console.log(document.querySelector("nine-grid").body.querySelector(`thead [data-col="6"]`));
+		//console.log(document.querySelector("nine-grid").columns.info());
+
+		let colInfo = "";
+		document.querySelector("nine-grid").columns.info().forEach(info => {
+			colInfo += `- "${info.name}": ${info.desc}, ${info.type}\n`;
+		});
+
+		//console.log(colInfo);
+
+		// Qdrant 필터로 변환하기 위한 프롬프트 엔지니어링
+		// 중요: 실제 컬렉션의 payload 필드와 그 데이터 타입을 정확히 알려줘야 Gemini가 올바른 필터를 생성합니다.
+		const prompt = `
+			자연어 쿼리를 Qdrant 필터 JSON 객체로 변환하는 AI 비서입니다.
+
+			Qdrant 컬렉션에서 사용 가능한 메타데이터 필드와 유형은 다음과 같습니다.:
+			${colInfo}
+
+			필터 생성 규칙:
+			1. 위에 제공된 필드만 사용하십시오. 새로운 필드를 만들지 마십시오.
+			2. 조건이 명확하게 지정되지 않았거나 모호한 경우 필터에 포함하지 마십시오.
+			3. AND 조건에는 'must', OR 조건에는 'should', NOT 조건에는 'must_not'을 사용하십시오.
+			4. 문자열 일치에는 'match.text'를 사용하십시오.
+			5. 숫자 범위에는 'range.gte', 'range.lte', 'range.gt', 'range.lt'를 사용하십시오.
+			6. 특정 값을 포함하는 배열에는 'contains', 'match.any' 또는 'match.all'을 사용하십시오.
+			7. 출력은 Qdrant 필터를 나타내는 유효한 JSON 객체여야 합니다.
+			8. 적용 가능한 필터가 없는 경우 빈 JSON 객체인 {}를 반환합니다.
+			
+			예:
+			- "500달러 미만의 전자제품 찾기" -> {"must": [{"key": "category", "match": {"text": "electronics"}}, {"key": "price", "range": {"lt": 500}}]}
+			- "John Doe 또는 Jane Smith의 책 보기" -> {"should": [{"key": "author", "match": {"text": "John Doe"}}, {"key": "author", "match": {"text": "Jane Smith"}}]}
+			- "재고 있는 품목(의류 제외)" -> {"must": [{"key": "in_stock", "match": {"text": true}}], "must_not": [{"key": "category", "match": {"text": "clothing"}}]}
+			- "다음이 포함된 제품 'new_arrival' 태그" -> {"must": [{"key": "tags", "match": {"text": "new_arrival"}}]}
+			- "2020년 이후 출판된 도서" -> {"must": [{"key": "published_year", "range": {"gt": 2020}}]}
+			
+			이제 다음 사용자 쿼리를 변환해 보겠습니다.
+			사용자 쿼리: "${userInput}"
+			
+			Qdrant 필터 JSON:
+		`;
+
+		try {
+			const response = await chatModel.invoke([
+				new SystemMessage("You are a helpful assistant."),
+				new HumanMessage(prompt),
+			]);
+
+			let filterString = response.content.trim();
+			if (filterString.startsWith("```json")) {
+				filterString = filterString.replace("```json", "");
+				const idx = filterString.indexOf("```");
+				if (idx > 0) {
+					filterString = filterString.substring(0, idx);
+					//console.log(filterString.substring(idx+3));
+				}
+			}
+			//filterString = filterString.replaceAll('"value"', '"text"')
+			console.log("Generated Filter String:", filterString);
+
+			// Gemini가 JSON 모드나 Structured Output을 지원하지 않는 경우, 직접 파싱 시도
+			// 안정적인 JSON 파싱을 위해 'JSON Mode' 또는 Function Calling 사용을 강력히 권장
+			// LangChain의 SelfQueryRetriever를 사용하면 이 부분을 자동화할 수 있습니다.
+			try {
+				return JSON.parse(filterString);
+			} catch (parseError) {
+				console.error("Failed to parse filter string as JSON:", parseError);
+				console.error("String that failed to parse:", filterString);
+				return null; // 파싱 실패 시 null 반환 또는 적절한 에러 처리
+			}
+
+		} catch (error) {
+			console.error("Error generating Qdrant filter with Gemini:", error);
+			return null;
+		}
+	}
+
+	#q1 = () => {
+		this.#getColumnInfo();
+	};
+
+	#q2 = () => {
+this.#getColumnInfo();
+	};
+
+	#q3 = () => {
+this.#getColumnInfo();
+	};
+
 	#init = (info) => {
+		
+		//this.#elChat = this.shadowRoot.querySelector("nx-ai-chat");
+
+		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));
 	};
 
+	#keydownHandler = (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.value = "";
+		});
+
+		this.shadowRoot.querySelector("nx-ai-chat").add("me", question);
+		this.shadowRoot.querySelector("nx-ai-chat").add("ing", question);
+
+		if (this.shadowRoot.querySelector(".menu-filter").classList.contains("active")) {
+			this.#q1();
+		}
+		else if (this.shadowRoot.querySelector(".menu-general").classList.contains("active")) {
+			this.#q2();
+		}
+		else {
+			this.#q3();
+		}
+
+		this.#ing = false;
+	}
+
 	#toggleCollapseHandler = () => {
         this.classList.toggle("collapse");
     };

package/dist/bundle.cjs.js

@@ -27856,7 +27856,10 @@ customElements.define("nx-ai-chat", aiChat);
 
 class aiContainer extends HTMLElement
 {
-	
+	#target;
+	#ing = false;
+	//#elChat;
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -27901,13 +27904,159 @@ class aiContainer extends HTMLElement
 		});
 	};
 
+	get target() {
+		return this.#target;
+	};
+	set target(v) {
+		this.#target = v;
+	}
+
+	#getColumnInfo = () => {
+		let colInfo = "";
+
+		console.log(this.#target, this.#target.tagName);
+
+		this.#target.columns.info().forEach(info => {
+			colInfo += `- "${info.name}": ${info.desc}, ${info.type}\n`;
+		});
+
+		console.log(colInfo);
+	};
+
+	#generateQdrantFilter = async (userInput) => {
+
+		//console.log(document.querySelector("nine-grid").body.querySelector(`thead [data-col="6"]`));
+		//console.log(document.querySelector("nine-grid").columns.info());
+
+		let colInfo = "";
+		document.querySelector("nine-grid").columns.info().forEach(info => {
+			colInfo += `- "${info.name}": ${info.desc}, ${info.type}\n`;
+		});
+
+		//console.log(colInfo);
+
+		// Qdrant 필터로 변환하기 위한 프롬프트 엔지니어링
+		// 중요: 실제 컬렉션의 payload 필드와 그 데이터 타입을 정확히 알려줘야 Gemini가 올바른 필터를 생성합니다.
+		const prompt = `
+			자연어 쿼리를 Qdrant 필터 JSON 객체로 변환하는 AI 비서입니다.
+
+			Qdrant 컬렉션에서 사용 가능한 메타데이터 필드와 유형은 다음과 같습니다.:
+			${colInfo}
+
+			필터 생성 규칙:
+			1. 위에 제공된 필드만 사용하십시오. 새로운 필드를 만들지 마십시오.
+			2. 조건이 명확하게 지정되지 않았거나 모호한 경우 필터에 포함하지 마십시오.
+			3. AND 조건에는 'must', OR 조건에는 'should', NOT 조건에는 'must_not'을 사용하십시오.
+			4. 문자열 일치에는 'match.text'를 사용하십시오.
+			5. 숫자 범위에는 'range.gte', 'range.lte', 'range.gt', 'range.lt'를 사용하십시오.
+			6. 특정 값을 포함하는 배열에는 'contains', 'match.any' 또는 'match.all'을 사용하십시오.
+			7. 출력은 Qdrant 필터를 나타내는 유효한 JSON 객체여야 합니다.
+			8. 적용 가능한 필터가 없는 경우 빈 JSON 객체인 {}를 반환합니다.
+			
+			예:
+			- "500달러 미만의 전자제품 찾기" -> {"must": [{"key": "category", "match": {"text": "electronics"}}, {"key": "price", "range": {"lt": 500}}]}
+			- "John Doe 또는 Jane Smith의 책 보기" -> {"should": [{"key": "author", "match": {"text": "John Doe"}}, {"key": "author", "match": {"text": "Jane Smith"}}]}
+			- "재고 있는 품목(의류 제외)" -> {"must": [{"key": "in_stock", "match": {"text": true}}], "must_not": [{"key": "category", "match": {"text": "clothing"}}]}
+			- "다음이 포함된 제품 'new_arrival' 태그" -> {"must": [{"key": "tags", "match": {"text": "new_arrival"}}]}
+			- "2020년 이후 출판된 도서" -> {"must": [{"key": "published_year", "range": {"gt": 2020}}]}
+			
+			이제 다음 사용자 쿼리를 변환해 보겠습니다.
+			사용자 쿼리: "${userInput}"
+			
+			Qdrant 필터 JSON:
+		`;
+
+		try {
+			const response = await chatModel.invoke([
+				new SystemMessage("You are a helpful assistant."),
+				new HumanMessage(prompt),
+			]);
+
+			let filterString = response.content.trim();
+			if (filterString.startsWith("```json")) {
+				filterString = filterString.replace("```json", "");
+				const idx = filterString.indexOf("```");
+				if (idx > 0) {
+					filterString = filterString.substring(0, idx);
+					//console.log(filterString.substring(idx+3));
+				}
+			}
+			//filterString = filterString.replaceAll('"value"', '"text"')
+			console.log("Generated Filter String:", filterString);
+
+			// Gemini가 JSON 모드나 Structured Output을 지원하지 않는 경우, 직접 파싱 시도
+			// 안정적인 JSON 파싱을 위해 'JSON Mode' 또는 Function Calling 사용을 강력히 권장
+			// LangChain의 SelfQueryRetriever를 사용하면 이 부분을 자동화할 수 있습니다.
+			try {
+				return JSON.parse(filterString);
+			} catch (parseError) {
+				console.error("Failed to parse filter string as JSON:", parseError);
+				console.error("String that failed to parse:", filterString);
+				return null; // 파싱 실패 시 null 반환 또는 적절한 에러 처리
+			}
+
+		} catch (error) {
+			console.error("Error generating Qdrant filter with Gemini:", error);
+			return null;
+		}
+	}
+
+	#q1 = () => {
+		this.#getColumnInfo();
+	};
+
+	#q2 = () => {
+this.#getColumnInfo();
+	};
+
+	#q3 = () => {
+this.#getColumnInfo();
+	};
+
 	#init = (info) => {
+		
+		//this.#elChat = this.shadowRoot.querySelector("nx-ai-chat");
+
+		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));
 	};
 
+	#keydownHandler = (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.value = "";
+		});
+
+		this.shadowRoot.querySelector("nx-ai-chat").add("me", question);
+		this.shadowRoot.querySelector("nx-ai-chat").add("ing", question);
+
+		if (this.shadowRoot.querySelector(".menu-filter").classList.contains("active")) {
+			this.#q1();
+		}
+		else if (this.shadowRoot.querySelector(".menu-general").classList.contains("active")) {
+			this.#q2();
+		}
+		else {
+			this.#q3();
+		}
+
+		this.#ing = false;
+	}
+
 	#toggleCollapseHandler = () => {
         this.classList.toggle("collapse");
     };

package/dist/bundle.esm.js

@@ -27854,7 +27854,10 @@ customElements.define("nx-ai-chat", aiChat);
 
 class aiContainer extends HTMLElement
 {
-	
+	#target;
+	#ing = false;
+	//#elChat;
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -27899,13 +27902,159 @@ class aiContainer extends HTMLElement
 		});
 	};
 
+	get target() {
+		return this.#target;
+	};
+	set target(v) {
+		this.#target = v;
+	}
+
+	#getColumnInfo = () => {
+		let colInfo = "";
+
+		console.log(this.#target, this.#target.tagName);
+
+		this.#target.columns.info().forEach(info => {
+			colInfo += `- "${info.name}": ${info.desc}, ${info.type}\n`;
+		});
+
+		console.log(colInfo);
+	};
+
+	#generateQdrantFilter = async (userInput) => {
+
+		//console.log(document.querySelector("nine-grid").body.querySelector(`thead [data-col="6"]`));
+		//console.log(document.querySelector("nine-grid").columns.info());
+
+		let colInfo = "";
+		document.querySelector("nine-grid").columns.info().forEach(info => {
+			colInfo += `- "${info.name}": ${info.desc}, ${info.type}\n`;
+		});
+
+		//console.log(colInfo);
+
+		// Qdrant 필터로 변환하기 위한 프롬프트 엔지니어링
+		// 중요: 실제 컬렉션의 payload 필드와 그 데이터 타입을 정확히 알려줘야 Gemini가 올바른 필터를 생성합니다.
+		const prompt = `
+			자연어 쿼리를 Qdrant 필터 JSON 객체로 변환하는 AI 비서입니다.
+
+			Qdrant 컬렉션에서 사용 가능한 메타데이터 필드와 유형은 다음과 같습니다.:
+			${colInfo}
+
+			필터 생성 규칙:
+			1. 위에 제공된 필드만 사용하십시오. 새로운 필드를 만들지 마십시오.
+			2. 조건이 명확하게 지정되지 않았거나 모호한 경우 필터에 포함하지 마십시오.
+			3. AND 조건에는 'must', OR 조건에는 'should', NOT 조건에는 'must_not'을 사용하십시오.
+			4. 문자열 일치에는 'match.text'를 사용하십시오.
+			5. 숫자 범위에는 'range.gte', 'range.lte', 'range.gt', 'range.lt'를 사용하십시오.
+			6. 특정 값을 포함하는 배열에는 'contains', 'match.any' 또는 'match.all'을 사용하십시오.
+			7. 출력은 Qdrant 필터를 나타내는 유효한 JSON 객체여야 합니다.
+			8. 적용 가능한 필터가 없는 경우 빈 JSON 객체인 {}를 반환합니다.
+			
+			예:
+			- "500달러 미만의 전자제품 찾기" -> {"must": [{"key": "category", "match": {"text": "electronics"}}, {"key": "price", "range": {"lt": 500}}]}
+			- "John Doe 또는 Jane Smith의 책 보기" -> {"should": [{"key": "author", "match": {"text": "John Doe"}}, {"key": "author", "match": {"text": "Jane Smith"}}]}
+			- "재고 있는 품목(의류 제외)" -> {"must": [{"key": "in_stock", "match": {"text": true}}], "must_not": [{"key": "category", "match": {"text": "clothing"}}]}
+			- "다음이 포함된 제품 'new_arrival' 태그" -> {"must": [{"key": "tags", "match": {"text": "new_arrival"}}]}
+			- "2020년 이후 출판된 도서" -> {"must": [{"key": "published_year", "range": {"gt": 2020}}]}
+			
+			이제 다음 사용자 쿼리를 변환해 보겠습니다.
+			사용자 쿼리: "${userInput}"
+			
+			Qdrant 필터 JSON:
+		`;
+
+		try {
+			const response = await chatModel.invoke([
+				new SystemMessage("You are a helpful assistant."),
+				new HumanMessage(prompt),
+			]);
+
+			let filterString = response.content.trim();
+			if (filterString.startsWith("```json")) {
+				filterString = filterString.replace("```json", "");
+				const idx = filterString.indexOf("```");
+				if (idx > 0) {
+					filterString = filterString.substring(0, idx);
+					//console.log(filterString.substring(idx+3));
+				}
+			}
+			//filterString = filterString.replaceAll('"value"', '"text"')
+			console.log("Generated Filter String:", filterString);
+
+			// Gemini가 JSON 모드나 Structured Output을 지원하지 않는 경우, 직접 파싱 시도
+			// 안정적인 JSON 파싱을 위해 'JSON Mode' 또는 Function Calling 사용을 강력히 권장
+			// LangChain의 SelfQueryRetriever를 사용하면 이 부분을 자동화할 수 있습니다.
+			try {
+				return JSON.parse(filterString);
+			} catch (parseError) {
+				console.error("Failed to parse filter string as JSON:", parseError);
+				console.error("String that failed to parse:", filterString);
+				return null; // 파싱 실패 시 null 반환 또는 적절한 에러 처리
+			}
+
+		} catch (error) {
+			console.error("Error generating Qdrant filter with Gemini:", error);
+			return null;
+		}
+	}
+
+	#q1 = () => {
+		this.#getColumnInfo();
+	};
+
+	#q2 = () => {
+this.#getColumnInfo();
+	};
+
+	#q3 = () => {
+this.#getColumnInfo();
+	};
+
 	#init = (info) => {
+		
+		//this.#elChat = this.shadowRoot.querySelector("nx-ai-chat");
+
+		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));
 	};
 
+	#keydownHandler = (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.value = "";
+		});
+
+		this.shadowRoot.querySelector("nx-ai-chat").add("me", question);
+		this.shadowRoot.querySelector("nx-ai-chat").add("ing", question);
+
+		if (this.shadowRoot.querySelector(".menu-filter").classList.contains("active")) {
+			this.#q1();
+		}
+		else if (this.shadowRoot.querySelector(".menu-general").classList.contains("active")) {
+			this.#q2();
+		}
+		else {
+			this.#q3();
+		}
+
+		this.#ing = false;
+	}
+
 	#toggleCollapseHandler = () => {
         this.classList.toggle("collapse");
     };

package/package.json

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

package/src/ai/aiContainer.js

@@ -2,7 +2,10 @@ import ninegrid from "../index.js";
 
 class aiContainer extends HTMLElement
 {
-	
+	#target;
+	#ing = false;
+	//#elChat;
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
@@ -47,13 +50,159 @@ class aiContainer extends HTMLElement
 		});
 	};
 
+	get target() {
+		return this.#target;
+	};
+	set target(v) {
+		this.#target = v;
+	}
+
+	#getColumnInfo = () => {
+		let colInfo = "";
+
+		console.log(this.#target, this.#target.tagName);
+
+		this.#target.columns.info().forEach(info => {
+			colInfo += `- "${info.name}": ${info.desc}, ${info.type}\n`;
+		});
+
+		console.log(colInfo);
+	};
+
+	#generateQdrantFilter = async (userInput) => {
+
+		//console.log(document.querySelector("nine-grid").body.querySelector(`thead [data-col="6"]`));
+		//console.log(document.querySelector("nine-grid").columns.info());
+
+		let colInfo = "";
+		document.querySelector("nine-grid").columns.info().forEach(info => {
+			colInfo += `- "${info.name}": ${info.desc}, ${info.type}\n`;
+		});
+
+		//console.log(colInfo);
+
+		// Qdrant 필터로 변환하기 위한 프롬프트 엔지니어링
+		// 중요: 실제 컬렉션의 payload 필드와 그 데이터 타입을 정확히 알려줘야 Gemini가 올바른 필터를 생성합니다.
+		const prompt = `
+			자연어 쿼리를 Qdrant 필터 JSON 객체로 변환하는 AI 비서입니다.
+
+			Qdrant 컬렉션에서 사용 가능한 메타데이터 필드와 유형은 다음과 같습니다.:
+			${colInfo}
+
+			필터 생성 규칙:
+			1. 위에 제공된 필드만 사용하십시오. 새로운 필드를 만들지 마십시오.
+			2. 조건이 명확하게 지정되지 않았거나 모호한 경우 필터에 포함하지 마십시오.
+			3. AND 조건에는 'must', OR 조건에는 'should', NOT 조건에는 'must_not'을 사용하십시오.
+			4. 문자열 일치에는 'match.text'를 사용하십시오.
+			5. 숫자 범위에는 'range.gte', 'range.lte', 'range.gt', 'range.lt'를 사용하십시오.
+			6. 특정 값을 포함하는 배열에는 'contains', 'match.any' 또는 'match.all'을 사용하십시오.
+			7. 출력은 Qdrant 필터를 나타내는 유효한 JSON 객체여야 합니다.
+			8. 적용 가능한 필터가 없는 경우 빈 JSON 객체인 {}를 반환합니다.
+			
+			예:
+			- "500달러 미만의 전자제품 찾기" -> {"must": [{"key": "category", "match": {"text": "electronics"}}, {"key": "price", "range": {"lt": 500}}]}
+			- "John Doe 또는 Jane Smith의 책 보기" -> {"should": [{"key": "author", "match": {"text": "John Doe"}}, {"key": "author", "match": {"text": "Jane Smith"}}]}
+			- "재고 있는 품목(의류 제외)" -> {"must": [{"key": "in_stock", "match": {"text": true}}], "must_not": [{"key": "category", "match": {"text": "clothing"}}]}
+			- "다음이 포함된 제품 'new_arrival' 태그" -> {"must": [{"key": "tags", "match": {"text": "new_arrival"}}]}
+			- "2020년 이후 출판된 도서" -> {"must": [{"key": "published_year", "range": {"gt": 2020}}]}
+			
+			이제 다음 사용자 쿼리를 변환해 보겠습니다.
+			사용자 쿼리: "${userInput}"
+			
+			Qdrant 필터 JSON:
+		`;
+
+		try {
+			const response = await chatModel.invoke([
+				new SystemMessage("You are a helpful assistant."),
+				new HumanMessage(prompt),
+			]);
+
+			let filterString = response.content.trim();
+			if (filterString.startsWith("```json")) {
+				filterString = filterString.replace("```json", "");
+				const idx = filterString.indexOf("```");
+				if (idx > 0) {
+					filterString = filterString.substring(0, idx);
+					//console.log(filterString.substring(idx+3));
+				}
+			}
+			//filterString = filterString.replaceAll('"value"', '"text"')
+			console.log("Generated Filter String:", filterString);
+
+			// Gemini가 JSON 모드나 Structured Output을 지원하지 않는 경우, 직접 파싱 시도
+			// 안정적인 JSON 파싱을 위해 'JSON Mode' 또는 Function Calling 사용을 강력히 권장
+			// LangChain의 SelfQueryRetriever를 사용하면 이 부분을 자동화할 수 있습니다.
+			try {
+				return JSON.parse(filterString);
+			} catch (parseError) {
+				console.error("Failed to parse filter string as JSON:", parseError);
+				console.error("String that failed to parse:", filterString);
+				return null; // 파싱 실패 시 null 반환 또는 적절한 에러 처리
+			}
+
+		} catch (error) {
+			console.error("Error generating Qdrant filter with Gemini:", error);
+			return null;
+		}
+	}
+
+	#q1 = () => {
+		this.#getColumnInfo();
+	};
+
+	#q2 = () => {
+this.#getColumnInfo();
+	};
+
+	#q3 = () => {
+this.#getColumnInfo();
+	};
+
 	#init = (info) => {
+		
+		//this.#elChat = this.shadowRoot.querySelector("nx-ai-chat");
+
+		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));
 	};
 
+	#keydownHandler = (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.value = "";
+		});
+
+		this.shadowRoot.querySelector("nx-ai-chat").add("me", question);
+		this.shadowRoot.querySelector("nx-ai-chat").add("ing", question);
+
+		if (this.shadowRoot.querySelector(".menu-filter").classList.contains("active")) {
+			this.#q1();
+		}
+		else if (this.shadowRoot.querySelector(".menu-general").classList.contains("active")) {
+			this.#q2();
+		}
+		else {
+			this.#q3();
+		}
+
+		this.#ing = false;
+	}
+
 	#toggleCollapseHandler = () => {
         this.classList.toggle("collapse");
     };