@nine-lab/nine-mu 0.1.151 → 0.1.153

package/package.json

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

package/public/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/src/components/ChatMessage.js

@@ -6,17 +6,13 @@ class aiMessage extends HTMLElement
 
 	constructor() {
 		super();
-		this.attachShadow({ mode: 'open' });
 	}
 	
 	connectedCallback() {
 		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>
@@ -50,11 +46,11 @@ class aiMessage extends HTMLElement
 					</svg>
  */
 		requestAnimationFrame(() => {
-			const elMessage = this.shadowRoot.querySelector(".message");
+			const elMessage = this.querySelector(".message");
 			elMessage.setAttribute("title", this.#message);
 			elMessage.innerHTML = this.#message.replaceAll("\n\n", "<br/>").replaceAll("\n", "<br/>");
 
-			this.shadowRoot.querySelector(".filter").addEventListener("click", e => {
+			this.querySelector(".filter").addEventListener("click", e => {
 
 				//if (e.target.classList.contains("disabled")) return;
 				if (this.#unique) {
@@ -66,8 +62,8 @@ class aiMessage extends HTMLElement
 				}
 			});
 
-			this.shadowRoot.querySelector(".database").addEventListener("click", e => {
-				//this.shadowRoot.querySelector("nine-grid").maximize();
+			this.querySelector(".database").addEventListener("click", e => {
+				//this.querySelector("nine-grid").maximize();
 				const keys = this.#data.map(item =>
 					Object.fromEntries(this.#unique.map(key => [key, item[key]]))
 				);
@@ -77,22 +73,22 @@ class aiMessage extends HTMLElement
 				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(this.#message);
 			});
 
 			setTimeout(() => {
-				const elMore = this.shadowRoot.querySelector(".more");
+				const elMore = this.querySelector(".more");
 				
-				//if (ninegrid.isEllipsis(this.shadowRoot.querySelector(".message"))) {
+				//if (ninegrid.isEllipsis(this.querySelector(".message"))) {
 				if (this.#message.length > 50) {
 					elMore.style.display = "flex";
 					elMore.style.position = "absolute";
@@ -111,8 +107,8 @@ class aiMessage extends HTMLElement
 
 		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");
 			}
 			
 			this.#init(info);
@@ -123,8 +119,8 @@ class aiMessage extends HTMLElement
 
 		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;
 		}
 
@@ -156,10 +152,10 @@ class aiMessage extends HTMLElement
 			</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 = this.#data;
 
 			//this.scrollIntoView({ behavior: "smooth", block: "end" });
@@ -173,7 +169,6 @@ class aiIngMessage extends HTMLElement
 
 	constructor() {
 		super();
-		this.attachShadow({ mode: 'open' });
 	}
 	
 	connectedCallback() {
@@ -181,11 +176,7 @@ class aiIngMessage extends HTMLElement
 
 		this.#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">
 				.
@@ -198,27 +189,21 @@ class aiIngMessage extends HTMLElement
 	#init = () => {
 		const interval = setInterval(() => {
 			this.#message = this.#message.length < 3 ? this.#message + "." : "";
-			this.shadowRoot.querySelector(".chat-message").innerHTML = this.#message || "&nbsp;";
+			this.querySelector(".chat-message").innerHTML = this.#message || "&nbsp;";
 		}, 500);
 	};
 }
 
-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>
@@ -235,15 +220,11 @@ class aiProgressMessage extends HTMLElement {
 
 	constructor() {
 		super();
-		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>
@@ -308,7 +289,7 @@ class aiProgressMessage extends HTMLElement {
 	}
 
 	#renderProgress() {
-		const progressList = this.shadowRoot.querySelector(".progress-list");
+		const progressList = this.querySelector(".progress-list");
 		progressList.innerHTML = '';
 		this.#progressElements.clear();
 		this.#animationIntervals.forEach(intervalId => clearInterval(intervalId));
@@ -383,19 +364,25 @@ class ChatMessage extends HTMLElement
 	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.#renderer();
+		this.#init();
+	};
 
+	#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@${__APP_VERSION__}/dist/css/nine-mu.css";
+                ${customImport}
+            </style>
+            
 			<div class="chat-body">
 			</div>
 		`;
-
-		this.#init();
 	};
 
+
 	#init = () => {
 
 	};
@@ -414,7 +401,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;
@@ -490,14 +477,15 @@ 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);
+}

package/src/components/NineChat.js

@@ -12,9 +12,10 @@ export class NineChat extends HTMLElement {
     #packageName;
     #routesPath;
     #connectorUrl;
-    #mcpClient;
     #manager;
 
+    #$nineChatMessage;
+
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -72,7 +73,18 @@ export class NineChat extends HTMLElement {
         $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 = "";
+                });
+
+                this.#$nineChatMessage.add("me", textarea);
+                this.#$nineChatMessage.add("ing", textarea);
+
                 await this.#manager.handleChatSubmit($textarea);
             }
         });
@@ -123,6 +135,8 @@ export class NineChat extends HTMLElement {
         `;
 
         this.#diffPopup = this.shadowRoot.querySelector('nine-diff-popup');
+
+        this.#$nineChatMessage = this.shadowRoot.querySelector("nine-chat-message");
     }
 
     #makeMenuHandler = async e => {