@nine-lab/nine-mu 0.1.150 → 0.1.151

package/package.json

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

package/src/components/ChatMessage.js

@@ -0,0 +1,503 @@
+class aiMessage extends HTMLElement
+{
+	#message;
+	#data;
+	#unique;
+
+	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>
+
+			<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>
+		`;
+/**
+ * 
+					<svg class="filter" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+						<path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/>
+					</svg>
+					<svg class="database" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+						<path d="M4.318 2.687C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4c0-.374.356-.875 1.318-1.313M13 5.698V7c0 .374-.356.875-1.318 1.313C10.766 8.729 9.464 9 8 9s-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777A5 5 0 0 0 13 5.698M14 4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13zm-1 4.698V10c0 .374-.356.875-1.318 1.313C10.766 11.729 9.464 12 8 12s-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777A5 5 0 0 0 13 8.698m0 3V13c0 .374-.356.875-1.318 1.313C10.766 14.729 9.464 15 8 15s-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.71 6.427 13 8 13s3.022-.289 4.096-.777c.324-.147.633-.323.904-.525"/>
+					</svg>
+					<svg class="excel" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+						<path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM6.472 15.29a1.2 1.2 0 0 1-.111-.449h.765a.58.58 0 0 0 .254.384q.106.073.25.114.143.041.319.041.246 0 .413-.07a.56.56 0 0 0 .255-.193.5.5 0 0 0 .085-.29.39.39 0 0 0-.153-.326q-.152-.12-.462-.193l-.619-.143a1.7 1.7 0 0 1-.539-.214 1 1 0 0 1-.351-.367 1.1 1.1 0 0 1-.123-.524q0-.366.19-.639.19-.272.527-.422.338-.15.777-.149.457 0 .78.152.324.153.5.41.18.255.2.566h-.75a.56.56 0 0 0-.12-.258.6.6 0 0 0-.247-.181.9.9 0 0 0-.369-.068q-.325 0-.513.152a.47.47 0 0 0-.184.384q0 .18.143.3a1 1 0 0 0 .405.175l.62.143q.326.075.566.211a1 1 0 0 1 .375.358q.135.222.135.56 0 .37-.188.656a1.2 1.2 0 0 1-.539.439q-.351.158-.858.158-.381 0-.665-.09a1.4 1.4 0 0 1-.478-.252 1.1 1.1 0 0 1-.29-.375m-2.945-3.358h-.893L1.81 13.37h-.036l-.832-1.438h-.93l1.227 1.983L0 15.931h.861l.853-1.415h.035l.85 1.415h.908L2.253 13.94zm2.727 3.325H4.557v-3.325h-.79v4h2.487z"/>
+					</svg>
+					<svg class="maximize" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+						<path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707m0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707m-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707"/>
+					</svg>
+ */
+		requestAnimationFrame(() => {
+			const elMessage = this.shadowRoot.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 => {
+
+				//if (e.target.classList.contains("disabled")) return;
+				if (this.#unique) {
+					const grd = document.querySelector("nine-grid");
+
+					grd.filtering.set(this.#data.map(item =>
+						Object.fromEntries(this.#unique.map(key => [key, item[key]]))
+					));
+				}
+			});
+
+			this.shadowRoot.querySelector(".database").addEventListener("click", e => {
+				//this.shadowRoot.querySelector("nine-grid").maximize();
+				const keys = this.#data.map(item =>
+					Object.fromEntries(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(this.#message);
+			});
+
+			setTimeout(() => {
+				const elMore = this.shadowRoot.querySelector(".more");
+				
+				//if (ninegrid.isEllipsis(this.shadowRoot.querySelector(".message"))) {
+				if (this.#message.length > 50) {
+					elMore.style.display = "flex";
+					elMore.style.position = "absolute";
+				}
+				else {
+					elMore.style.display = "none";
+				}
+			});
+		});
+	};
+
+	initialize = (info, data, unique) => {
+		this.#data = data;
+		this.#unique = unique;
+		
+
+		setTimeout(() => {
+			if (!unique) {
+				this.shadowRoot.querySelector(".filter").classList.add("disabled");
+				this.shadowRoot.querySelector(".database").classList.add("disabled");
+			}
+			
+			this.#init(info);
+		});
+	}
+
+	#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 = this.#data;
+
+			//this.scrollIntoView({ behavior: "smooth", block: "end" });
+		});
+	};
+}
+
+class aiIngMessage extends HTMLElement
+{
+	#message;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		//const message = this.getAttribute("message");
+
+		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>
+
+			<div class="chat-message">
+				.
+			</div>
+		`;
+
+		this.#init();
+	};
+
+	#init = () => {
+		const interval = setInterval(() => {
+			this.#message = this.#message.length < 3 ? this.#message + "." : "";
+			this.shadowRoot.querySelector(".chat-message").innerHTML = this.#message || "&nbsp;";
+		}, 500);
+	};
+}
+
+class aiMyMessage 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>
+
+			<div class="chat-message">
+				${message}
+			</div>
+		`;
+	};
+}
+
+// aiProgressMessage 클래스 정의
+// aiProgressMessage 클래스 정의 수정
+class aiProgressMessage extends HTMLElement {
+	#progressData = [];
+	#progressElements = new Map();
+	#animationIntervals = new Map();
+
+	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>
+            <div class="chat-message progress-message">
+                <ul class="progress-list"></ul>
+            </div>
+        `;
+	}
+
+	/**
+	 * 진행 상태 데이터를 초기화하고 화면에 표시합니다.
+	 * @param {Array<Object>} data - [{id: 'step1', message: '분석중입니다.', completedMessage: '분석이 완료되었습니다.'}, ...]
+	 */
+	initialize(data) {
+		this.#progressData = data.map(item => ({
+			...item,
+			status: 'pending',
+			originalMessage: item.message
+		}));
+		setTimeout(() => {
+			this.#renderProgress(); // 초기 렌더링 시 현재 진행 단계를 활성화
+			this.#updateCurrentActiveProgress(); // 초기 활성 단계 설정
+		}, 300);
+	}
+
+	/**
+	 * 특정 단계의 진행 상태를 업데이트합니다.
+	 * @param {string} id - 업데이트할 단계의 고유 ID
+	 * @param {string} status - 'completed' 또는 'pending'
+	 */
+	updateProgress(id, status) {
+		const itemIndex = this.#progressData.findIndex(item => item.id === id);
+		if (itemIndex > -1) {
+			if (this.#progressData[itemIndex].status !== status) {
+				this.#progressData[itemIndex].status = status;
+				this.#updateProgressItem(this.#progressData[itemIndex]); // 개별 항목 업데이트
+				this.#updateCurrentActiveProgress(); // 활성 진행 단계 재설정
+			}
+		}
+	}
+
+	// 현재 진행 중인 첫 번째 pending 항목을 찾아 'active' 상태로 만들고 애니메이션 시작
+	// 이전에 active였던 항목의 애니메이션은 중지
+	#updateCurrentActiveProgress() {
+		let foundActive = false;
+		this.#progressData.forEach(item => {
+			const li = this.#progressElements.get(item.id);
+			if (!li) return; // 요소가 아직 렌더링되지 않았으면 스킵
+
+			// 모든 항목에서 'active' 클래스 제거 및 애니메이션 중지
+			li.classList.remove('active');
+			if (this.#animationIntervals.has(item.id)) {
+				clearInterval(this.#animationIntervals.get(item.id));
+				this.#animationIntervals.delete(item.id);
+				li.querySelector(".animated-dots").textContent = ''; // 점 제거
+			}
+
+			// 첫 번째 pending 항목을 찾으면 'active'로 설정하고 애니메이션 시작
+			if (item.status === 'pending' && !foundActive) {
+				li.classList.add('active');
+				this.#startAnimation(item);
+				foundActive = true;
+			}
+		});
+	}
+
+	#renderProgress() {
+		const progressList = this.shadowRoot.querySelector(".progress-list");
+		progressList.innerHTML = '';
+		this.#progressElements.clear();
+		this.#animationIntervals.forEach(intervalId => clearInterval(intervalId));
+		this.#animationIntervals.clear();
+
+		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);
+			this.#progressElements.set(item.id, li);
+			// 초기 렌더링 시에는 'active' 상태는 `#updateCurrentActiveProgress`에서 처리
+			this.#updateProgressItemVisuals(item); // 텍스트만 업데이트
+		});
+	}
+
+	// 항목의 시각적 상태(텍스트, 완료 체크)만 업데이트
+	#updateProgressItemVisuals(item) {
+		const li = 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 { // pending 상태
+				textSpan.textContent = item.originalMessage;
+				// pending이지만 active가 아닌 경우 점 없음 (CSS의 role)
+			}
+		}
+	}
+
+	// 점 애니메이션 시작 함수
+	#startAnimation(item) {
+		const li = this.#progressElements.get(item.id);
+		if (li) {
+			const dotsSpan = li.querySelector(".animated-dots");
+			let dotsCount = 0;
+			const intervalId = setInterval(() => {
+				dotsCount = (dotsCount + 1) % 4; // 0, 1, 2, 3 반복
+				dotsSpan.textContent = '.'.repeat(dotsCount);
+			}, 300);
+			this.#animationIntervals.set(item.id, intervalId);
+		}
+	}
+
+	// 개별 항목의 상태 업데이트 (텍스트 변경, 클래스 추가/제거)
+	// 애니메이션 시작/중지는 `#updateCurrentActiveProgress`에서 담당
+	#updateProgressItem(item) {
+		this.#updateProgressItemVisuals(item); // 텍스트와 클래스 업데이트
+	}
+}
+
+
+
+class ChatMessage 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>
+
+			<div class="chat-body">
+			</div>
+		`;
+
+		this.#init();
+	};
+
+	#init = () => {
+
+	};
+
+
+	add = (sender, message, info, data, unique) => {
+
+		if (unique && !Array.isArray(unique)) {
+			unique = unique.split(",");
+		}
+
+		const target = this.shadowRoot.querySelector(".chat-body");
+
+		//console.log(data);
+
+		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");
+				//el.setAttribute("message", message);
+				target.appendChild(el);
+				break;
+
+			case "ai":
+				this.shadowRoot.querySelectorAll("nx-ai-ing-message").forEach(el => {
+					el.remove();
+				});
+
+				el = document.createElement("nx-ai-message");
+				el.setAttribute("message", message);
+				el.setAttribute("row-count", data ? data.length : 0);
+				//el.data = data;
+				el.initialize(info, data, unique);
+				target.appendChild(el);
+				break;
+
+			default:
+				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의 경우 업데이트를 위해 반환)
+	 */
+	addProgress = (progressData = null) => { // progressData 파라미터 추가
+
+		const target = this.shadowRoot.querySelector(".chat-body");
+
+		this.shadowRoot.querySelectorAll("nx-ai-ing-message").forEach(el => {
+			el.remove();
+		});
+
+		let el = document.createElement("nx-ai-progress-message");
+		if (progressData) {
+			el.initialize(progressData); // progressData로 초기화
+		}
+		target.appendChild(el);
+
+		setTimeout(() => {
+			if (el) { // el이 null이 아닐 때만 scrollIntoView 호출
+				el.scrollIntoView({ behavior: "smooth", block: "end" });
+			}
+		}, 200);
+
+		return el; // 생성된 엘리먼트를 반환
+	};
+}
+
+
+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);
+}

package/src/components/NineChat.js

@@ -95,7 +95,7 @@ export class NineChat extends HTMLElement {
                         <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(t => `