@nine-lab/nine-mu 0.1.151 → 0.1.153

package/dist/css/nine-mu.css

@@ -948,4 +948,29 @@
 		background-color: #d7d4f9 !important;
 		color: inherit !important;
 	}
+}
+
+:host(nine-chat-message) {
+	width: 100%;
+	height: 100%;
+	overflow: scroll;
+
+	nine-chat-my {
+		display: flex;
+		justify-content: flex-end;
+		padding: 5px;
+
+		.chat-message {
+			max-width: 70%;
+			padding: 8px 16px;
+			border-radius: 8px;
+			font-size: 14px;
+			background-color: #fef01b;
+			text-align: left;
+			color: #333;
+			align-self: flex-end;
+			position: relative;
+			box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
+		}
+	}
 }

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, _message, _data, _unique, _init, _message2, _init2, _progressData, _progressElements, _animationIntervals, _aiProgressMessage_instances, updateCurrentActiveProgress_fn, renderProgress_fn, updateProgressItemVisuals_fn, startAnimation_fn, updateProgressItem_fn, _init3;
+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, _manager, _$nineChatMessage, _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, _renderer, _init3;
 import { trace as trace$1, api, nine } from "@nine-lab/nine-util";
 class Trace extends trace$1.constructor {
   constructor() {
@@ -13718,8 +13718,8 @@ class NineChat extends HTMLElement {
     __privateAdd(this, _packageName);
     __privateAdd(this, _routesPath);
     __privateAdd(this, _connectorUrl);
-    __privateAdd(this, _mcpClient2);
     __privateAdd(this, _manager);
+    __privateAdd(this, _$nineChatMessage);
     __privateAdd(this, _makeMenuHandler, async (e) => {
       const prompt = await nine.prompt("메뉴생성시 필요한 AI 프롬프트를 입력하세요.").rgb();
       if (prompt === null || prompt === void 0) return;
@@ -13773,8 +13773,8 @@ _diffPopup = new WeakMap();
 _packageName = new WeakMap();
 _routesPath = new WeakMap();
 _connectorUrl = new WeakMap();
-_mcpClient2 = new WeakMap();
 _manager = new WeakMap();
+_$nineChatMessage = new WeakMap();
 _NineChat_instances = new WeakSet();
 // --- [그룹 1: Interaction] 화면 토글 및 메뉴 클릭 ---
 initInteractions_fn = function() {
@@ -13801,7 +13801,13 @@ initActions_fn = function() {
   $textarea.addEventListener("keypress", async (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      if (!e.target.value.trim()) return;
+      const textarea = e.target.value.trim();
+      if (!textarea) return;
+      setTimeout(() => {
+        $textarea.value = "";
+      });
+      __privateGet(this, _$nineChatMessage).add("me", textarea);
+      __privateGet(this, _$nineChatMessage).add("ing", textarea);
       await __privateGet(this, _manager).handleChatSubmit($textarea);
     }
   });
@@ -13811,7 +13817,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.150"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.152"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             <div class="wrapper">
@@ -13848,6 +13854,7 @@ render_fn = function() {
             <nine-diff-popup></nine-diff-popup>
         `;
   __privateSet(this, _diffPopup, this.shadowRoot.querySelector("nine-diff-popup"));
+  __privateSet(this, _$nineChatMessage, this.shadowRoot.querySelector("nine-chat-message"));
 };
 _makeMenuHandler = new WeakMap();
 _sourceGenHandler = new WeakMap();
@@ -40029,7 +40036,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.150"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.152"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
 
@@ -40139,7 +40146,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.150"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.152"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             
@@ -40188,8 +40195,8 @@ class aiMessage extends HTMLElement {
       __privateSet(this, _unique, unique);
       setTimeout(() => {
         if (!unique) {
-          this.shadowRoot.querySelector(".filter").classList.add("disabled");
-          this.shadowRoot.querySelector(".database").classList.add("disabled");
+          this.querySelector(".filter").classList.add("disabled");
+          this.querySelector(".database").classList.add("disabled");
         }
         __privateGet(this, _init).call(this, info);
       });
@@ -40197,8 +40204,8 @@ class aiMessage extends HTMLElement {
     __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";
+        this.querySelector(".grid").style.display = "none";
+        this.querySelector(".chat-menu").style.display = "none";
         return;
       }
       let colgroup = info.map(() => `<col background-color="#888"/>`).join("");
@@ -40226,21 +40233,17 @@ class aiMessage extends HTMLElement {
 				</table>
 			</nine-grid>
 		`;
-      this.shadowRoot.querySelector(".grid").innerHTML = html;
+      this.querySelector(".grid").innerHTML = html;
       setTimeout(() => {
-        const grd = this.shadowRoot.querySelector("nine-grid");
+        const grd = this.querySelector("nine-grid");
         grd.data.source = __privateGet(this, _data);
       });
     });
-    this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     __privateSet(this, _message, this.getAttribute("message"));
-    this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/ai.css";
-				${ninegrid.getCustomPath(this, "ai.css")}
-			</style>
+    this.innerHTML = `
+
 
 			<div class="chat-message">
 				<div class="message"></div>
@@ -40259,10 +40262,10 @@ class aiMessage extends HTMLElement {
 			</div>
 		`;
     requestAnimationFrame(() => {
-      const elMessage = this.shadowRoot.querySelector(".message");
+      const elMessage = this.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) => {
+      this.querySelector(".filter").addEventListener("click", (e) => {
         if (__privateGet(this, _unique)) {
           const grd = document.querySelector("nine-grid");
           grd.filtering.set(__privateGet(this, _data).map(
@@ -40270,24 +40273,24 @@ class aiMessage extends HTMLElement {
           ));
         }
       });
-      this.shadowRoot.querySelector(".database").addEventListener("click", (e) => {
+      this.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.querySelector(".maximize").addEventListener("click", (e) => {
+        this.querySelector("nine-grid").maximize();
       });
-      this.shadowRoot.querySelector(".excel").addEventListener("click", (e) => {
-        this.shadowRoot.querySelector("nine-grid").export();
+      this.querySelector(".excel").addEventListener("click", (e) => {
+        this.querySelector("nine-grid").export();
       });
-      this.shadowRoot.querySelector(".more a").addEventListener("click", () => {
+      this.querySelector(".more a").addEventListener("click", () => {
         alert(__privateGet(this, _message));
       });
       setTimeout(() => {
-        const elMore = this.shadowRoot.querySelector(".more");
+        const elMore = this.querySelector(".more");
         if (__privateGet(this, _message).length > 50) {
           elMore.style.display = "flex";
           elMore.style.position = "absolute";
@@ -40309,18 +40312,13 @@ class aiIngMessage extends HTMLElement {
     __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;";
+        this.querySelector(".chat-message").innerHTML = __privateGet(this, _message2) || "&nbsp;";
       }, 500);
     });
-    this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     __privateSet(this, _message2, ".");
-    this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/ai.css";
-				${ninegrid.getCustomPath(this, "ai.css")}
-			</style>
+    this.innerHTML = `
 
 			<div class="chat-message">
 				.
@@ -40331,19 +40329,13 @@ class aiIngMessage extends HTMLElement {
 }
 _message2 = new WeakMap();
 _init2 = new WeakMap();
-class aiMyMessage extends HTMLElement {
+class MyMessage extends HTMLElement {
   constructor() {
     super();
-    this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     const message = this.getAttribute("message");
-    this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/ai.css";
-				${ninegrid.getCustomPath(this, "ai.css")}
-			</style>
-
+    this.innerHTML = `
 			<div class="chat-message">
 				${message}
 			</div>
@@ -40357,14 +40349,10 @@ class aiProgressMessage extends HTMLElement {
     __privateAdd(this, _progressData, []);
     __privateAdd(this, _progressElements, /* @__PURE__ */ new Map());
     __privateAdd(this, _animationIntervals, /* @__PURE__ */ new Map());
-    this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.shadowRoot.innerHTML = `
-            <style>
-                @import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/ai.css";
-                ${ninegrid.getCustomPath(this, "ai.css")}
-            </style>
+    this.innerHTML = `
+
             <div class="chat-message progress-message">
                 <ul class="progress-list"></ul>
             </div>
@@ -40426,7 +40414,7 @@ updateCurrentActiveProgress_fn = function() {
   });
 };
 renderProgress_fn = function() {
-  const progressList = this.shadowRoot.querySelector(".progress-list");
+  const progressList = this.querySelector(".progress-list");
   progressList.innerHTML = "";
   __privateGet(this, _progressElements).clear();
   __privateGet(this, _animationIntervals).forEach((intervalId) => clearInterval(intervalId));
@@ -40482,6 +40470,18 @@ updateProgressItem_fn = function(item) {
 class ChatMessage extends HTMLElement {
   constructor() {
     super();
+    __privateAdd(this, _renderer, () => {
+      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.152"}/dist/css/nine-mu.css";
+                ${customImport}
+            </style>
+            
+			<div class="chat-body">
+			</div>
+		`;
+    });
     __privateAdd(this, _init3, () => {
     });
     __publicField(this, "add", (sender, message, info, data, unique) => {
@@ -40492,7 +40492,7 @@ class ChatMessage extends HTMLElement {
       let el;
       switch (sender) {
         case "me":
-          el = document.createElement("nx-ai-my-message");
+          el = document.createElement("nine-chat-me");
           el.setAttribute("message", message);
           target.appendChild(el);
           break;
@@ -40546,18 +40546,11 @@ class ChatMessage extends HTMLElement {
   }
   connectedCallback() {
     this.getAttribute("message");
-    this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/ai.css";
-				${ninegrid.getCustomPath(this, "ai.css")}
-			</style>
-
-			<div class="chat-body">
-			</div>
-		`;
+    __privateGet(this, _renderer).call(this);
     __privateGet(this, _init3).call(this);
   }
 }
+_renderer = new WeakMap();
 _init3 = new WeakMap();
 if (!customElements.get("nx-ai-message")) {
   customElements.define("nx-ai-message", aiMessage);
@@ -40565,17 +40558,17 @@ if (!customElements.get("nx-ai-message")) {
 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);
 }
+if (!customElements.get("nine-chat-me")) {
+  customElements.define("nine-chat-me", MyMessage);
+}
 const NineMu = {
-  version: "0.1.150",
+  version: "0.1.152",
   init: (config2) => {
     trace$1.log("🛠️ Nine-Mu Engine initialized", config2);
   }