@nine-lab/nine-mu 0.1.396 → 0.1.398

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.396",
+  "version": "0.1.398",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",

package/public/css/nine-mu.css

@@ -1028,4 +1028,127 @@
 	0% { opacity: 0.6; }
 	50% { opacity: 1; }
 	100% { opacity: 0.6; }
+}
+
+:host(nine-natual-query) {
+	.input-wrapper {
+		position: relative;
+		width: 100%;
+	}
+
+	input {
+		width: 100%;
+		padding: 8px 16px; /* 하단 padding을 충분히 주어 워터마크 공간 확보 */
+		font-size: 14px;
+		border: 1px solid #d1d5da;
+		border-radius: 6px;
+		box-sizing: border-box;
+		transition: border-color 0.2s, box-shadow 0.2s;
+	}
+
+	input::placeholder {
+		color: #d1d5da; /* 아주 연한 회색 */
+		opacity: 1;    /* 파이어폭스 대응 */
+	}
+
+	input:focus {
+		border-color: green;
+		--box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
+		outline: none;
+	}
+
+	/* 핵심: 워터마크 스타일 */
+	.watermark-link {
+		position: absolute;
+		right: 8px;
+		bottom: 2px;
+		font-size: 11px;
+		color: #999;
+		text-decoration: none;
+		opacity: 0.7;
+		z-index: 5;
+		font-weight: 500;
+		letter-spacing: -0.2px;
+	}
+
+	.watermark-link:hover {
+		color: #0366d6;
+		opacity: 1;
+		text-decoration: underline;
+	}
+}
+
+:host(nine-natual-query-result) {
+	display: block;
+	width: 100%;
+	height: 100%;
+	min-height: 200px; /* 초기 문구가 보일 만큼 최소 높이 확보 */
+	border: 1px solid #e1e4e8;
+	border-radius: 8px;
+	overflow: hidden;
+	box-sizing: border-box;
+
+	nine-grid {
+		width: 100%;
+		height: 100%;
+	}
+
+	.result-wrapper {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		background: #fcfcfc;
+		padding: 16px;
+		box-sizing: border-box;
+	}
+
+	/* 1. 기본 상태: 그리드 컨테이너는 보이고, 안내 컨테이너는 숨김 */
+	#grid-container {
+		flex: 1;
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+
+	#no-result-container {
+		display: none;
+		flex: 1;
+		width: 100%;
+		height: 100%;
+	}
+
+	/* 2. 데이터가 없을 때 (.empty 클래스가 붙었을 때) 제어 */
+	.result-wrapper.empty #grid-container {
+		display: none;
+	}
+
+	.result-wrapper.empty #no-result-container {
+		display: flex; /* 보임 처리 */
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+	}
+
+	/* 3. 안내 문구 스타일 디테일 */
+	.no-result .main-message {
+		font-size: 1.2rem;
+		font-weight: 700;
+		color: #2d3748;
+		margin-bottom: 8px;
+	}
+
+	.no-result .sub-message {
+		font-size: 0.9rem;
+		color: #718096;
+		line-height: 1.5;
+	}
+
+	/* 내부 그리드 라이브러리 높이 보정 */
+	nine-grid {
+		width: 100%;
+		height: 100%;
+	}
 }

package/src/components/ai/NineNatualQuery.js

@@ -0,0 +1,145 @@
+import { trace } from '@nopeer';
+import { api } from '@nine-lab/nine-util';
+import { TipPopup } from '@nine-lab/nine-ai';
+
+export class NineNatualQuery extends HTMLElement {
+
+    #schema = null;
+    #connectorUrl = '';
+    #aiProcessor = null;
+    #tipPopup;
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    async connectedCallback() {
+        // 속성에서 커넥터 주소 읽기 (기본값 설정 가능)
+        this.#connectorUrl = this.getAttribute('connector-url') || 'http://localhost:3001';
+
+        this.#render();
+    }
+
+
+    /**
+     * 서버(Connector)에 생성된 SQL 실행 요청
+     */
+    async #runQuery(sql) {
+        try {
+            trace.log("🚀 쿼리 실행 요청:", sql);
+
+            const response = await fetch(`${this.#connectorUrl}/api/query`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ sql: sql })
+            });
+
+            trace.log(response);
+
+            if (!response.ok) throw new Error('쿼리 실행 실패');
+
+            const result = await response.json();
+
+            if (result.success) {
+                trace.log("✅ 쿼리 실행 결과:", result.data);
+
+                return result.data;
+                // TODO: 결과를 UI(표 등)에 출력하는 로직 추가
+            } else {
+                throw new Error(result.error || '쿼리 실행 중 오류 발생');
+            }
+        } catch (error) {
+            trace.error("❌ 쿼리 실행 실패:", error.message);
+        }
+    }
+
+
+    #render() {
+
+        const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
+                ${customImport}
+            </style>
+            
+            <div class="input-wrapper">
+                <input type="text" placeholder="자연어로 질문을 입력하고 엔터를 누르세요.">
+                <!-- CSS로 제어되는 워터마크 -->
+                <a href="https://www.nine-lab.com" target="_blank" class="watermark-link">powered by nine-lab.com</a>
+            </div>
+   `;
+
+        // 2. input 요소를 찾아 엔터 이벤트 바인딩
+        const input = this.shadowRoot.querySelector('input');
+
+
+        if (customElements.get("nine-ai-tip-popup")) {
+            this.#tipPopup = document.createElement('nine-ai-tip-popup');
+            this.shadowRoot.appendChild(this.#tipPopup);
+        } else {
+            trace.error("nine-ai-tip-popup 컴포넌트를 찾을 수 없습니다.");
+        }
+
+        input.addEventListener('keypress', (e) => {
+            // 엔터 키인지 확인 (Enter 키의 키코드는 'Enter'입니다)
+            if (e.key === 'Enter') {
+                const question = e.target.value.trim();
+
+                if (question) {
+                    this.#handleQuestion(question); // 질문 처리 로직 호출
+                    e.target.value = ''; // 입력창 비우기 (선택 사항)
+                }
+            }
+        });
+    }
+
+
+    async #handleQuestion(question) {
+        try {
+            // 1. 대기 팝업 표시
+            await this.#tipPopup?.popup();
+
+            // 2. 서버의 자연어 질의 API 호출
+            // 기존의 filterTables, generateSql 과정이 서버 하나로 통합됨
+            const response = await api.post(`/nine-mu/query/executeNaturalLanguageQuery`, {
+                userInput: question
+            });
+
+            trace.log(response);
+/**
+            const result = await response.json();
+
+            if (!result.success) {
+                // 서버에서 실행 불가능하거나 에러가 난 경우
+                nine.alert(result.error || "질의를 처리할 수 없습니다.").rgb().shake();
+                return;
+            }
+
+            // 3. 결과 로그 출력 (서버가 보내준 SQL과 설명)
+            trace.log("생성된 SQL:", result.sql);
+            trace.log("AI 설명:", result.explanation);
+
+            // 4. 결과 데이터 렌더링
+            if (result.data) {
+                const el = document.querySelector("nine-query-result");
+                if (el) {
+                    el.redraw(result.data); // 서버가 이미 실행해서 보낸 데이터를 바로 사용
+                }
+            }
+                */
+        } catch (error) {
+            trace.error("서버 통신 실패:", error);
+            nine.alert("서버와 연결할 수 없습니다.").rgb().shake();
+        } finally {
+            // 5. 대기 팝업 닫기
+            this.#tipPopup?.close();
+        }
+    }
+}
+
+if (!customElements.get("nine-natual-query")) {
+    customElements.define("nine-natual-query", NineNatualQuery);
+}

package/src/components/ai/NineNatualQueryResult.js

@@ -0,0 +1,145 @@
+import { trace } from '@nopeer';
+import { nine } from '@nine-lab/nine-util';
+//import ninegrid from "ninegrid2";
+
+export class NineNatualQueryResult extends HTMLElement {
+    // 내부 상태 및 상수 캡슐화
+    #data = [];
+    #wrapper = null;
+    #gridContainer = null;
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.#render(); // 외부 접근 불가
+    }
+
+    /**
+     * 외부 공개 메서드: 데이터 주입 및 그리드 갱신
+     */
+    redraw(data) {
+        this.#data = data || [];
+        this.#updateGrid();
+    }
+
+    /**
+     * 내부 그리드 업데이트 로직 (Private)
+     */
+    #updateGrid() {
+        // 캐싱된 엘리먼트 참조 확인
+        this.#wrapper = this.shadowRoot.querySelector('.result-wrapper');
+        this.#gridContainer = this.shadowRoot.querySelector('#grid-container');
+
+        if (!this.#wrapper || !this.#gridContainer) return;
+
+        // 1. 데이터 부재 시 상태 제어
+        if (this.#data.length === 0) {
+            //this.#wrapper.classList.add('empty');
+            //this.#gridContainer.innerHTML = '';
+            nine.alert("일치하는 검색 결과가 없습니다.").rgb().shake();
+            return;
+        }
+
+        // 2. 데이터 존재 시 상태 제어 및 그리드 생성
+        this.#wrapper.classList.remove('empty');
+        this.#gridContainer.innerHTML = '';
+
+        const keys = Object.keys(this.#data[0]);
+        const gridHtml = this.#generateGridHtml(keys); // HTML 생성 로직 분리
+
+        this.#gridContainer.innerHTML = gridHtml;
+
+        // 3. 엔진 초기화 대기 및 데이터 바인딩
+        this.#bindGridData();
+    }
+
+    /**
+     * nine-grid HTML 구조 생성 (Private)
+     */
+    #generateGridHtml(keys) {
+        return `
+            <nine-grid 
+                caption="검색 결과" 
+                select-type="row"
+                show-title-bar="true"
+                show-menu-icon="true"
+                show-status-bar="true"
+                enable-fixed-col="true"
+                row-resizable="false"
+                col-movable="true"
+                >
+                <table>
+                    <colgroup>
+                        <col width="50" fixed="left" />
+                        ${keys.map(() => `<col width="150"/>`).join('')}
+                    </colgroup>
+                    <thead>
+                        <tr>
+                            <th>No.</th>
+                            ${keys.map(key => `<th>${key.toUpperCase()}</th>`).join('')}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <th><ng-row-indicator/></th>
+                            ${keys.map(key => `<td data-bind="${key}"></td>`).join('')}
+                        </tr>
+                    </tbody>
+                </table>
+            </nine-grid>
+        `;
+    }
+
+    /**
+     * ninegrid2 라이브러리 엔진 바인딩 (Private)
+     */
+    #bindGridData() {
+        const newGrid = this.#gridContainer.querySelector('nine-grid');
+        const attemptBind = () => {
+            if (newGrid && newGrid.data) {
+                newGrid.data.source = this.#data;
+            } else {
+                setTimeout(attemptBind, 10);
+            }
+        };
+        attemptBind();
+    }
+
+    /**
+     * 초기 렌더링 및 스타일 주입 (Private)
+     */
+    /**
+     * 초기 렌더링 및 스타일 주입 (Private)
+     */
+    #render() {
+
+        const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
+                ${customImport}
+            </style>
+            
+            <div class="result-wrapper empty">
+                <div id="grid-container"></div>
+                
+                <!-- 깔끔한 안내 영역 -->
+                <div id="no-result-container" class="no-result">
+                    <div class="main-message">Ready to Query with Nine AI</div>
+                    <div class="sub-message">
+                        검색창에 궁금한 데이터를 자연어로 입력해보세요.<br>
+                        AI가 즉시 분석하여 최적화된 데이타를 조회합니다.
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+if (!customElements.get("nine-natual-query-result")) {
+    customElements.define("nine-natual-query-result", NineNatualQueryResult);
+}

package/src/components/hook/NineHook.js

@@ -51,7 +51,7 @@ const createDynamicRoutes = (menuData, projectViews, Custom404) => {
 
 	if (menuData && Array.isArray(menuData)) {
 		menuData.forEach((menu) => {
-			if (menu.level === 2 && menu.path) {
+			if (menu.path) {
 				const cleanPath = menu.path.replace(/^\/+|\/+$/g, "");
 				const pathParts = cleanPath.split("/");
 				const len = pathParts.length;

package/src/index.js

@@ -4,6 +4,8 @@ import { NineDiff } from './components/NineDiff.js';
 import { NineDiffPopup } from './components/NineDiffPopup.js';
 import { NineMenuDiffPopup } from './components/NineMenuDiffPopup.js';
 import './components/ChatMessage.js';
+import './components/ai/NineNatualQuery.js';
+import './components/ai/NineNatualQueryResult.js';
 import { NineHook, useScreen } from './components/hook/NineHook.js';
 
 /**