@nine-lab/nine-mu 0.1.397 → 0.1.399

package/dist/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/dist/nine-mu.js

@@ -9,8 +9,9 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _owner, _collectedFiles, _NotificationHandler_instances, handleLoggingMessage_fn, _collectModifySource, _openDiffPopup, _openRouteDiffPopup, _generateSource, _generateMenu, _mcpClient, _onAction, _onStatus, _onMessage, _owner2, _routeUrl, _chatHistory, _notiHandler, _NineChatManager_instances, connect_fn, updateStatus_fn, callTool_fn, _getSourcePath, _service, _packageName, _routesPath, _connectorUrl, _manager, _config, _$nineChatMessage, _NineChat_instances, initInteractions_fn, initActions_fn, render_fn, _sourceGenHandler, _asisEditorView, _tobeEditorView, _asisEditorEl, _tobeEditorEl, _isDirty, _initialAsisSrc, _initialTobeSrc, _languageCompartment, _isScrollSyncActive, _initCodeMirror, _checkDirtyState, _setupScrollSync, _applyDiffDecorations, _dialog, _tabContainer, _fileList, _host, _NineDiffPopup_instances, renderScaffolding_fn, handleConfirmAll_fn, handleCancel_fn, _dialog2, _diffView, _asisBackup, _host2, _NineMenuDiffPopup_instances, render_fn2, handleConfirm_fn, handleCancel_fn2, _message, _data, _unique, _init, _message2, _init2, _progressData, _progressElements, _animationIntervals, _ProgressMessage_instances, updateCurrentActiveProgress_fn, renderProgress_fn, updateProgressItemVisuals_fn, startAnimation_fn, updateProgressItem_fn, _renderer, _init3;
+var _owner, _collectedFiles, _NotificationHandler_instances, handleLoggingMessage_fn, _collectModifySource, _openDiffPopup, _openRouteDiffPopup, _generateSource, _generateMenu, _mcpClient, _onAction, _onStatus, _onMessage, _owner2, _routeUrl, _chatHistory, _notiHandler, _NineChatManager_instances, connect_fn, updateStatus_fn, callTool_fn, _getSourcePath, _service, _packageName, _routesPath, _connectorUrl, _manager, _config, _$nineChatMessage, _NineChat_instances, initInteractions_fn, initActions_fn, render_fn, _sourceGenHandler, _asisEditorView, _tobeEditorView, _asisEditorEl, _tobeEditorEl, _isDirty, _initialAsisSrc, _initialTobeSrc, _languageCompartment, _isScrollSyncActive, _initCodeMirror, _checkDirtyState, _setupScrollSync, _applyDiffDecorations, _dialog, _tabContainer, _fileList, _host, _NineDiffPopup_instances, renderScaffolding_fn, handleConfirmAll_fn, handleCancel_fn, _dialog2, _diffView, _asisBackup, _host2, _NineMenuDiffPopup_instances, render_fn2, handleConfirm_fn, handleCancel_fn2, _message, _data, _unique, _init, _message2, _init2, _progressData, _progressElements, _animationIntervals, _ProgressMessage_instances, updateCurrentActiveProgress_fn, renderProgress_fn, updateProgressItemVisuals_fn, startAnimation_fn, updateProgressItem_fn, _renderer, _init3, _schema, _connectorUrl2, _aiProcessor, _tipPopup, _NineNatualQuery_instances, runQuery_fn, render_fn3, handleQuestion_fn, _data2, _wrapper, _gridContainer, _NineNatualQueryResult_instances, updateGrid_fn, generateGridHtml_fn, bindGridData_fn, render_fn4;
 import { trace as trace$1, api, nine as nine$1 } from "@nine-lab/nine-util";
+import "@nine-lab/nine-ai";
 import React, { createContext, Suspense, useContext, useState, lazy } from "react";
 import { Routes, Route } from "react-router-dom";
 class Trace extends trace$1.constructor {
@@ -13604,9 +13605,9 @@ function requireCore$1() {
         }
         const { loadSchema } = this.opts;
         return runCompileAsync.call(this, schema, meta2);
-        async function runCompileAsync(_schema, _meta) {
-          await loadMetaSchema.call(this, _schema.$schema);
-          const sch = this._addSchema(_schema, _meta);
+        async function runCompileAsync(_schema2, _meta) {
+          await loadMetaSchema.call(this, _schema2.$schema);
+          const sch = this._addSchema(_schema2, _meta);
           return sch.validate || _compileAsync.call(this, sch);
         }
         async function loadMetaSchema($ref) {
@@ -13631,11 +13632,11 @@ function requireCore$1() {
           }
         }
         async function loadMissingSchema(ref2) {
-          const _schema = await _loadSchema.call(this, ref2);
+          const _schema2 = await _loadSchema.call(this, ref2);
           if (!this.refs[ref2])
-            await loadMetaSchema.call(this, _schema.$schema);
+            await loadMetaSchema.call(this, _schema2.$schema);
           if (!this.refs[ref2])
-            this.addSchema(_schema, ref2, meta2);
+            this.addSchema(_schema2, ref2, meta2);
         }
         async function _loadSchema(ref2) {
           const p = this._loading[ref2];
@@ -17539,7 +17540,7 @@ render_fn = function() {
   const customImport = nine$1.cssPath ? `@import "${nine$1.cssPath}/nine-mu.css";` : "";
   this.shadowRoot.innerHTML = `
             <style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.396"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.398"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             <div class="wrapper">
@@ -43789,7 +43790,7 @@ class NineDiff extends HTMLElement {
     const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
     this.shadowRoot.innerHTML = `
            	<style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.396"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.398"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
 
@@ -43929,7 +43930,7 @@ renderScaffolding_fn = function() {
   const customImport = nine$1.cssPath ? `@import "${nine$1.cssPath}/nine-mu.css";` : "";
   this.shadowRoot.innerHTML = `
             <style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.396"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.398"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             
@@ -44038,7 +44039,7 @@ render_fn2 = function() {
   const customImport = nine$1.cssPath ? `@import "${nine$1.cssPath}/nine-mu.css";` : "";
   this.shadowRoot.innerHTML = `
            	<style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.396"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.398"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             
@@ -44368,7 +44369,7 @@ class ChatMessageBody extends HTMLElement {
       const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
       this.shadowRoot.innerHTML = `
             <style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.396"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.398"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             
@@ -44466,6 +44467,220 @@ if (!customElements.get("nine-chat-ing")) {
 if (!customElements.get("nine-chat-progress")) {
   customElements.define("nine-chat-progress", ProgressMessage);
 }
+class NineNatualQuery extends HTMLElement {
+  constructor() {
+    super();
+    __privateAdd(this, _NineNatualQuery_instances);
+    __privateAdd(this, _schema, null);
+    __privateAdd(this, _connectorUrl2, "");
+    __privateAdd(this, _aiProcessor, null);
+    __privateAdd(this, _tipPopup);
+    this.attachShadow({ mode: "open" });
+  }
+  async connectedCallback() {
+    __privateSet(this, _connectorUrl2, this.getAttribute("connector-url") || "http://localhost:3001");
+    __privateMethod(this, _NineNatualQuery_instances, render_fn3).call(this);
+  }
+}
+_schema = new WeakMap();
+_connectorUrl2 = new WeakMap();
+_aiProcessor = new WeakMap();
+_tipPopup = new WeakMap();
+_NineNatualQuery_instances = new WeakSet();
+runQuery_fn = async function(sql) {
+  try {
+    trace.log("🚀 쿼리 실행 요청:", sql);
+    const response = await fetch(`${__privateGet(this, _connectorUrl2)}/api/query`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ 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;
+    } else {
+      throw new Error(result.error || "쿼리 실행 중 오류 발생");
+    }
+  } catch (error) {
+    trace.error("❌ 쿼리 실행 실패:", error.message);
+  }
+};
+render_fn3 = function() {
+  const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
+  this.shadowRoot.innerHTML = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.398"}/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>
+   `;
+  const input = this.shadowRoot.querySelector("input");
+  if (customElements.get("nine-ai-tip-popup")) {
+    __privateSet(this, _tipPopup, document.createElement("nine-ai-tip-popup"));
+    this.shadowRoot.appendChild(__privateGet(this, _tipPopup));
+  } else {
+    trace.error("nine-ai-tip-popup 컴포넌트를 찾을 수 없습니다.");
+  }
+  input.addEventListener("keypress", (e) => {
+    if (e.key === "Enter") {
+      const question2 = e.target.value.trim();
+      if (question2) {
+        __privateMethod(this, _NineNatualQuery_instances, handleQuestion_fn).call(this, question2);
+        e.target.value = "";
+      }
+    }
+  });
+};
+handleQuestion_fn = async function(question2) {
+  var _a2, _b;
+  try {
+    await ((_a2 = __privateGet(this, _tipPopup)) == null ? void 0 : _a2.popup());
+    const response = await api.post(`/nine-mu/query/executeNaturalLanguageQuery`, {
+      userInput: question2
+    });
+    trace.log(response);
+  } catch (error) {
+    trace.error("서버 통신 실패:", error);
+    nine.alert("서버와 연결할 수 없습니다.").rgb().shake();
+  } finally {
+    (_b = __privateGet(this, _tipPopup)) == null ? void 0 : _b.close();
+  }
+};
+if (!customElements.get("nine-natual-query")) {
+  customElements.define("nine-natual-query", NineNatualQuery);
+}
+class NineNatualQueryResult extends HTMLElement {
+  constructor() {
+    super();
+    __privateAdd(this, _NineNatualQueryResult_instances);
+    // 내부 상태 및 상수 캡슐화
+    __privateAdd(this, _data2, []);
+    __privateAdd(this, _wrapper, null);
+    __privateAdd(this, _gridContainer, null);
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    __privateMethod(this, _NineNatualQueryResult_instances, render_fn4).call(this);
+  }
+  /**
+   * 외부 공개 메서드: 데이터 주입 및 그리드 갱신
+   */
+  redraw(data) {
+    __privateSet(this, _data2, data || []);
+    __privateMethod(this, _NineNatualQueryResult_instances, updateGrid_fn).call(this);
+  }
+}
+_data2 = new WeakMap();
+_wrapper = new WeakMap();
+_gridContainer = new WeakMap();
+_NineNatualQueryResult_instances = new WeakSet();
+/**
+ * 내부 그리드 업데이트 로직 (Private)
+ */
+updateGrid_fn = function() {
+  __privateSet(this, _wrapper, this.shadowRoot.querySelector(".result-wrapper"));
+  __privateSet(this, _gridContainer, this.shadowRoot.querySelector("#grid-container"));
+  if (!__privateGet(this, _wrapper) || !__privateGet(this, _gridContainer)) return;
+  if (__privateGet(this, _data2).length === 0) {
+    nine$1.alert("일치하는 검색 결과가 없습니다.").rgb().shake();
+    return;
+  }
+  __privateGet(this, _wrapper).classList.remove("empty");
+  __privateGet(this, _gridContainer).innerHTML = "";
+  const keys = Object.keys(__privateGet(this, _data2)[0]);
+  const gridHtml = __privateMethod(this, _NineNatualQueryResult_instances, generateGridHtml_fn).call(this, keys);
+  __privateGet(this, _gridContainer).innerHTML = gridHtml;
+  __privateMethod(this, _NineNatualQueryResult_instances, bindGridData_fn).call(this);
+};
+/**
+ * nine-grid HTML 구조 생성 (Private)
+ */
+generateGridHtml_fn = function(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_fn = function() {
+  const newGrid = __privateGet(this, _gridContainer).querySelector("nine-grid");
+  const attemptBind = () => {
+    if (newGrid && newGrid.data) {
+      newGrid.data.source = __privateGet(this, _data2);
+    } else {
+      setTimeout(attemptBind, 10);
+    }
+  };
+  attemptBind();
+};
+/**
+ * 초기 렌더링 및 스타일 주입 (Private)
+ */
+/**
+ * 초기 렌더링 및 스타일 주입 (Private)
+ */
+render_fn4 = function() {
+  const customImport = nine$1.cssPath ? `@import "${nine$1.cssPath}/nine-mu.css";` : "";
+  this.shadowRoot.innerHTML = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.398"}/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);
+}
 const ScreenContext = createContext();
 const useScreen = () => useContext(ScreenContext);
 const ScreenProvider = ({ children }) => {
@@ -44681,7 +44896,7 @@ function NineHook({ children, menuData, views, error404, onCatch, fallback, styl
   );
 }
 const NineMu = {
-  version: "0.1.396",
+  version: "0.1.398",
   init: (config2) => {
     trace$1.log("🛠️ Nine-Mu Engine initialized", config2);
   }