@nine-lab/nine-mu 0.1.150 → 0.1.152

package/dist/nine-mu.js

@@ -9,7 +9,7 @@ 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 _mcpClient, _onAction, _onStatus, _onMessage, _owner, _NineChatManager_instances, connect_fn, fetchRoutes_fn, pushMessage_fn, updateStatus_fn, callTool_fn, _getSourcePath, _service, _routes, _diffPopup, _packageName, _routesPath, _connectorUrl, _mcpClient2, _manager, _NineChat_instances, initInteractions_fn, initActions_fn, render_fn, _makeMenuHandler, _sourceGenHandler, _showDiff, _asisEditorView, _tobeEditorView, _asisEditorEl, _tobeEditorEl, _languageCompartment, _isScrollSyncActive, _initCodeMirror, _setupScrollSync, _applyDiffDecorations, _dialog, _diffView, _asisBackup, _host, _NineDiffPopup_instances, render_fn2, handleConfirm_fn, handleCancel_fn;
+var _mcpClient, _onAction, _onStatus, _onMessage, _owner, _NineChatManager_instances, connect_fn, fetchRoutes_fn, pushMessage_fn, updateStatus_fn, callTool_fn, _getSourcePath, _service, _routes, _diffPopup, _packageName, _routesPath, _connectorUrl, _mcpClient2, _manager, _NineChat_instances, initInteractions_fn, initActions_fn, render_fn, _makeMenuHandler, _sourceGenHandler, _showDiff, _asisEditorView, _tobeEditorView, _asisEditorEl, _tobeEditorEl, _languageCompartment, _isScrollSyncActive, _initCodeMirror, _setupScrollSync, _applyDiffDecorations, _dialog, _diffView, _asisBackup, _host, _NineDiffPopup_instances, render_fn2, handleConfirm_fn, handleCancel_fn, _message, _data, _unique, _init, _message2, _init2, _progressData, _progressElements, _animationIntervals, _aiProgressMessage_instances, updateCurrentActiveProgress_fn, renderProgress_fn, updateProgressItemVisuals_fn, startAnimation_fn, updateProgressItem_fn, _init3;
 import { trace as trace$1, api, nine } from "@nine-lab/nine-util";
 class Trace extends trace$1.constructor {
   constructor() {
@@ -13811,7 +13811,7 @@ render_fn = function() {
   const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
   this.shadowRoot.innerHTML = `
             <style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.149"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.151"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             <div class="wrapper">
@@ -13821,7 +13821,7 @@ render_fn = function() {
                         <div class="logo"><span></span></div>
                         <div id="status-tag" style="font-size:10px; color:#ff5722; padding:5px;">nine-mu Engine Ready</div>
                     </div>
-                    <nx-ai-chat></nx-ai-chat>
+                    <nine-chat-message></nine-chat-message>
                     <div class="foot">
                         <div class="apply-src">
                             ${["MyBatis", "Service", "Controller", "JavaScript"].map((t2) => `
@@ -40029,7 +40029,7 @@ class NineDiff extends HTMLElement {
     const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
     this.shadowRoot.innerHTML = `
            	<style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.149"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.151"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
 
@@ -40139,7 +40139,7 @@ render_fn2 = function() {
   const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
   this.shadowRoot.innerHTML = `
            	<style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.149"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.151"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             
@@ -40177,8 +40177,389 @@ handleCancel_fn = function() {
   __privateGet(this, _dialog).close();
 };
 customElements.define("nine-diff-popup", NineDiffPopup);
+class aiMessage extends HTMLElement {
+  constructor() {
+    super();
+    __privateAdd(this, _message);
+    __privateAdd(this, _data);
+    __privateAdd(this, _unique);
+    __publicField(this, "initialize", (info, data, unique) => {
+      __privateSet(this, _data, data);
+      __privateSet(this, _unique, unique);
+      setTimeout(() => {
+        if (!unique) {
+          this.shadowRoot.querySelector(".filter").classList.add("disabled");
+          this.shadowRoot.querySelector(".database").classList.add("disabled");
+        }
+        __privateGet(this, _init).call(this, info);
+      });
+    });
+    __privateAdd(this, _init, (info) => {
+      const rowCount = Number(this.getAttribute("row-count"));
+      if (rowCount < 1) {
+        this.shadowRoot.querySelector(".grid").style.display = "none";
+        this.shadowRoot.querySelector(".chat-menu").style.display = "none";
+        return;
+      }
+      let colgroup = info.map(() => `<col background-color="#888"/>`).join("");
+      let thead = info.map((item) => `<th>${item.desc}</th>`).join("");
+      let tbody = info.map((item) => `<td data-bind="${item.name}" text-align="${item.type == "number" ? "right" : "left"}"></td>`).join("");
+      const html = `
+			<nine-grid class="ai" display-row-count="${rowCount > 5 ? 5 : rowCount}" show-title-bar="false" show-menu-icon="false" show-status-bar="false" select-type="row" auto-fit-col="true" show-title-bar="true" show-menu-icon="true" show-status-bar="true" enable-fixed-col="true" row-resizable="false" col-movable="true">
+				<table style="display:none;">
+					<colgroup>
+						<col background-color="#888" width="30" fixed="left" />
+						${colgroup}
+					</colgroup>
+					<thead>
+						<tr>
+							<th>No.</th>
+							${thead}
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<th><ng-row-indicator/></th>
+							${tbody}
+						</tr>
+					</tbody>
+				</table>
+			</nine-grid>
+		`;
+      this.shadowRoot.querySelector(".grid").innerHTML = html;
+      setTimeout(() => {
+        const grd = this.shadowRoot.querySelector("nine-grid");
+        grd.data.source = __privateGet(this, _data);
+      });
+    });
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    __privateSet(this, _message, this.getAttribute("message"));
+    this.shadowRoot.innerHTML = `
+
+
+			<div class="chat-message">
+				<div class="message"></div>
+				<span class="more"><a href="#">more</a></span>
+			</div>
+
+			<div class="grid"></div>
+
+			<div class="chat-menu">
+				<div class="left-menu">
+					<div class="filter"></div>
+					<div class="database"></div>
+					<div class="excel"></div>
+					<div class="maximize"></div>
+				</div>
+			</div>
+		`;
+    requestAnimationFrame(() => {
+      const elMessage = this.shadowRoot.querySelector(".message");
+      elMessage.setAttribute("title", __privateGet(this, _message));
+      elMessage.innerHTML = __privateGet(this, _message).replaceAll("\n\n", "<br/>").replaceAll("\n", "<br/>");
+      this.shadowRoot.querySelector(".filter").addEventListener("click", (e) => {
+        if (__privateGet(this, _unique)) {
+          const grd = document.querySelector("nine-grid");
+          grd.filtering.set(__privateGet(this, _data).map(
+            (item) => Object.fromEntries(__privateGet(this, _unique).map((key) => [key, item[key]]))
+          ));
+        }
+      });
+      this.shadowRoot.querySelector(".database").addEventListener("click", (e) => {
+        const keys = __privateGet(this, _data).map(
+          (item) => Object.fromEntries(__privateGet(this, _unique).map((key) => [key, item[key]]))
+        );
+        console.log(keys);
+        this.dispatchEvent(new CustomEvent("database", { bubbles: true, detail: { key: keys } }));
+      });
+      this.shadowRoot.querySelector(".maximize").addEventListener("click", (e) => {
+        this.shadowRoot.querySelector("nine-grid").maximize();
+      });
+      this.shadowRoot.querySelector(".excel").addEventListener("click", (e) => {
+        this.shadowRoot.querySelector("nine-grid").export();
+      });
+      this.shadowRoot.querySelector(".more a").addEventListener("click", () => {
+        alert(__privateGet(this, _message));
+      });
+      setTimeout(() => {
+        const elMore = this.shadowRoot.querySelector(".more");
+        if (__privateGet(this, _message).length > 50) {
+          elMore.style.display = "flex";
+          elMore.style.position = "absolute";
+        } else {
+          elMore.style.display = "none";
+        }
+      });
+    });
+  }
+}
+_message = new WeakMap();
+_data = new WeakMap();
+_unique = new WeakMap();
+_init = new WeakMap();
+class aiIngMessage extends HTMLElement {
+  constructor() {
+    super();
+    __privateAdd(this, _message2);
+    __privateAdd(this, _init2, () => {
+      setInterval(() => {
+        __privateSet(this, _message2, __privateGet(this, _message2).length < 3 ? __privateGet(this, _message2) + "." : "");
+        this.shadowRoot.querySelector(".chat-message").innerHTML = __privateGet(this, _message2) || "&nbsp;";
+      }, 500);
+    });
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    __privateSet(this, _message2, ".");
+    this.shadowRoot.innerHTML = `
+
+			<div class="chat-message">
+				.
+			</div>
+		`;
+    __privateGet(this, _init2).call(this);
+  }
+}
+_message2 = new WeakMap();
+_init2 = new WeakMap();
+class aiMyMessage extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    const message = this.getAttribute("message");
+    this.shadowRoot.innerHTML = `
+
+
+			<div class="chat-message">
+				${message}
+			</div>
+		`;
+  }
+}
+class aiProgressMessage extends HTMLElement {
+  constructor() {
+    super();
+    __privateAdd(this, _aiProgressMessage_instances);
+    __privateAdd(this, _progressData, []);
+    __privateAdd(this, _progressElements, /* @__PURE__ */ new Map());
+    __privateAdd(this, _animationIntervals, /* @__PURE__ */ new Map());
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+
+            <div class="chat-message progress-message">
+                <ul class="progress-list"></ul>
+            </div>
+        `;
+  }
+  /**
+   * 진행 상태 데이터를 초기화하고 화면에 표시합니다.
+   * @param {Array<Object>} data - [{id: 'step1', message: '분석중입니다.', completedMessage: '분석이 완료되었습니다.'}, ...]
+   */
+  initialize(data) {
+    __privateSet(this, _progressData, data.map((item) => ({
+      ...item,
+      status: "pending",
+      originalMessage: item.message
+    })));
+    setTimeout(() => {
+      __privateMethod(this, _aiProgressMessage_instances, renderProgress_fn).call(this);
+      __privateMethod(this, _aiProgressMessage_instances, updateCurrentActiveProgress_fn).call(this);
+    }, 300);
+  }
+  /**
+   * 특정 단계의 진행 상태를 업데이트합니다.
+   * @param {string} id - 업데이트할 단계의 고유 ID
+   * @param {string} status - 'completed' 또는 'pending'
+   */
+  updateProgress(id2, status) {
+    const itemIndex = __privateGet(this, _progressData).findIndex((item) => item.id === id2);
+    if (itemIndex > -1) {
+      if (__privateGet(this, _progressData)[itemIndex].status !== status) {
+        __privateGet(this, _progressData)[itemIndex].status = status;
+        __privateMethod(this, _aiProgressMessage_instances, updateProgressItem_fn).call(this, __privateGet(this, _progressData)[itemIndex]);
+        __privateMethod(this, _aiProgressMessage_instances, updateCurrentActiveProgress_fn).call(this);
+      }
+    }
+  }
+}
+_progressData = new WeakMap();
+_progressElements = new WeakMap();
+_animationIntervals = new WeakMap();
+_aiProgressMessage_instances = new WeakSet();
+// 현재 진행 중인 첫 번째 pending 항목을 찾아 'active' 상태로 만들고 애니메이션 시작
+// 이전에 active였던 항목의 애니메이션은 중지
+updateCurrentActiveProgress_fn = function() {
+  let foundActive = false;
+  __privateGet(this, _progressData).forEach((item) => {
+    const li = __privateGet(this, _progressElements).get(item.id);
+    if (!li) return;
+    li.classList.remove("active");
+    if (__privateGet(this, _animationIntervals).has(item.id)) {
+      clearInterval(__privateGet(this, _animationIntervals).get(item.id));
+      __privateGet(this, _animationIntervals).delete(item.id);
+      li.querySelector(".animated-dots").textContent = "";
+    }
+    if (item.status === "pending" && !foundActive) {
+      li.classList.add("active");
+      __privateMethod(this, _aiProgressMessage_instances, startAnimation_fn).call(this, item);
+      foundActive = true;
+    }
+  });
+};
+renderProgress_fn = function() {
+  const progressList = this.shadowRoot.querySelector(".progress-list");
+  progressList.innerHTML = "";
+  __privateGet(this, _progressElements).clear();
+  __privateGet(this, _animationIntervals).forEach((intervalId) => clearInterval(intervalId));
+  __privateGet(this, _animationIntervals).clear();
+  __privateGet(this, _progressData).forEach((item, index) => {
+    const li = document.createElement("li");
+    li.setAttribute("data-id", item.id);
+    li.classList.add("progress-item");
+    li.innerHTML = `
+                <span class="step-number">${index + 1}.</span>
+                <span class="text">${item.originalMessage}</span>
+                <span class="animated-dots"></span>
+            `;
+    progressList.appendChild(li);
+    __privateGet(this, _progressElements).set(item.id, li);
+    __privateMethod(this, _aiProgressMessage_instances, updateProgressItemVisuals_fn).call(this, item);
+  });
+};
+// 항목의 시각적 상태(텍스트, 완료 체크)만 업데이트
+updateProgressItemVisuals_fn = function(item) {
+  const li = __privateGet(this, _progressElements).get(item.id);
+  if (li) {
+    li.classList.remove("pending", "completed");
+    li.classList.add(item.status);
+    const textSpan = li.querySelector(".text");
+    const dotsSpan = li.querySelector(".animated-dots");
+    if (item.status === "completed") {
+      textSpan.textContent = item.completedMessage;
+      dotsSpan.textContent = "";
+    } else {
+      textSpan.textContent = item.originalMessage;
+    }
+  }
+};
+// 점 애니메이션 시작 함수
+startAnimation_fn = function(item) {
+  const li = __privateGet(this, _progressElements).get(item.id);
+  if (li) {
+    const dotsSpan = li.querySelector(".animated-dots");
+    let dotsCount = 0;
+    const intervalId = setInterval(() => {
+      dotsCount = (dotsCount + 1) % 4;
+      dotsSpan.textContent = ".".repeat(dotsCount);
+    }, 300);
+    __privateGet(this, _animationIntervals).set(item.id, intervalId);
+  }
+};
+// 개별 항목의 상태 업데이트 (텍스트 변경, 클래스 추가/제거)
+// 애니메이션 시작/중지는 `#updateCurrentActiveProgress`에서 담당
+updateProgressItem_fn = function(item) {
+  __privateMethod(this, _aiProgressMessage_instances, updateProgressItemVisuals_fn).call(this, item);
+};
+class ChatMessage extends HTMLElement {
+  constructor() {
+    super();
+    __privateAdd(this, _init3, () => {
+    });
+    __publicField(this, "add", (sender, message, info, data, unique) => {
+      if (unique && !Array.isArray(unique)) {
+        unique = unique.split(",");
+      }
+      const target = this.shadowRoot.querySelector(".chat-body");
+      let el;
+      switch (sender) {
+        case "me":
+          el = document.createElement("nx-ai-my-message");
+          el.setAttribute("message", message);
+          target.appendChild(el);
+          break;
+        case "ing":
+          el = document.createElement("nx-ai-ing-message");
+          target.appendChild(el);
+          break;
+        case "ai":
+          this.shadowRoot.querySelectorAll("nx-ai-ing-message").forEach((el2) => {
+            el2.remove();
+          });
+          el = document.createElement("nx-ai-message");
+          el.setAttribute("message", message);
+          el.setAttribute("row-count", data ? data.length : 0);
+          el.initialize(info, data, unique);
+          target.appendChild(el);
+          break;
+      }
+      setTimeout(() => {
+        el.scrollIntoView({ behavior: "smooth", block: "end" });
+      }, 200);
+    });
+    /**
+     * 챗 메시지를 추가합니다.
+     * @param {string} sender - 메시지 발신자 ('me', 'ing', 'ai', 'progress')
+     * @param {string} message - 메시지 내용 (progress 타입의 경우 사용되지 않음)
+     * @param {Array<Object>} info - nine-grid 정보 (ai 타입에만 해당)
+     * @param {Array<Object>} data - nine-grid 데이터 (ai 타입에만 해당)
+     * @param {Array<string>|string} unique - nine-grid 고유 키 (ai 타입에만 해당)
+     * @param {Array<Object>} progressData - aiProgressMessage의 초기 진행 데이터 (progress 타입에만 해당)
+     * @returns {HTMLElement|null} 생성된 메시지 엘리먼트 (특히 aiProgressMessage의 경우 업데이트를 위해 반환)
+     */
+    __publicField(this, "addProgress", (progressData = null) => {
+      const target = this.shadowRoot.querySelector(".chat-body");
+      this.shadowRoot.querySelectorAll("nx-ai-ing-message").forEach((el2) => {
+        el2.remove();
+      });
+      let el = document.createElement("nx-ai-progress-message");
+      if (progressData) {
+        el.initialize(progressData);
+      }
+      target.appendChild(el);
+      setTimeout(() => {
+        if (el) {
+          el.scrollIntoView({ behavior: "smooth", block: "end" });
+        }
+      }, 200);
+      return el;
+    });
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.getAttribute("message");
+    this.shadowRoot.innerHTML = `
+
+
+			<div class="chat-body">
+			</div>
+		`;
+    __privateGet(this, _init3).call(this);
+  }
+}
+_init3 = new WeakMap();
+if (!customElements.get("nx-ai-message")) {
+  customElements.define("nx-ai-message", aiMessage);
+}
+if (!customElements.get("nx-ai-ing-message")) {
+  customElements.define("nx-ai-ing-message", aiIngMessage);
+}
+if (!customElements.get("nx-ai-my-message")) {
+  customElements.define("nx-ai-my-message", aiMyMessage);
+}
+if (!customElements.get("nx-ai-progress-message")) {
+  customElements.define("nx-ai-progress-message", aiProgressMessage);
+}
+if (!customElements.get("nine-chat-message")) {
+  customElements.define("nine-chat-message", ChatMessage);
+}
 const NineMu = {
-  version: "0.1.149",
+  version: "0.1.151",
   init: (config2) => {
     trace$1.log("🛠️ Nine-Mu Engine initialized", config2);
   }