@nine-lab/nine-mu 0.1.172 → 0.1.174

package/package.json

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

package/public/css/nine-mu.css

@@ -979,4 +979,221 @@
 			box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
 		}
 	}
+
+	nine-chat-ing {
+		display: flex;
+		justify-content: flex-start;
+		padding: 0;
+
+		.chat-message {
+			padding: 0px 8px;
+			color: #999;
+			align-self: flex-start;
+			text-align: left;
+			position: relative;
+			font-size: 32px;
+			font-weight: bold;
+		}
+	}
+
+	nine-chat-ai {
+		display: flex;
+		justify-content: flex-start;
+		padding: 5px;
+		flex-direction: column;
+
+		.chat-message {
+			max-width: 70%;
+			border-radius: 8px;
+			font-size: 14px;
+			background-color: #fff;
+			color: black;
+			align-self: flex-start;
+			text-align: left;
+			position: relative;
+			box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
+			text-overflow: ellipsis;
+			padding: 8px 16px;
+			display: flex;
+			align-items: center;
+
+			div.message {
+				display: -webkit-box;
+				-webkit-line-clamp: 3;
+				-webkit-box-orient: vertical;
+				overflow: hidden;
+				padding: 0;
+				flex-grow: 1;
+				/* 줄바꿈 강제 적용 */
+				/**word-wrap: break-word;*/ /* 긴 단어를 줄바꿈 */
+				overflow-wrap: anywhere; /* 텍스트 길이에 따라 자동 줄바꿈 */
+				white-space: normal; /* 공백 처리 */
+			}
+
+			span.more {
+				right: 4px;
+				bottom: 0px;
+				font-size: 9px;
+				font-weight: 700;
+
+				a {
+					position: relative;
+					color: green;
+					text-decoration: none;
+				}
+
+				a::after {
+					content: "";
+					position: absolute;
+					left: 0;
+					bottom: -2px;
+					width: 100%;
+					height: 2px;
+					background-color: green;
+					transform: scaleX(0);
+					transition: transform 0.3s ease-in-out;
+				}
+
+				a:hover::after {
+					transform: scaleX(1);
+				}
+			}
+		}
+
+		.grid {
+			margin-top: 8px;
+		}
+
+		.chat-menu {
+			display: flex;
+			justify-content: space-between; /* 좌우 정렬 */
+			align-items: center; /* 세로 중앙 정렬 */
+			width: 100%;
+			margin-top: 2px;
+
+			.left-menu{
+				display: flex;
+				gap: 4px;
+
+				.filter.disabled, .database.disabled {
+					pointer-events: none;
+					color: #ccc;
+				}
+
+				.filter, .database, .excel, .maximize {
+					margin-left: 0;
+					cursor: pointer;
+					color: #999;
+					width: 16px;
+					height: 16px;
+					background-repeat: no-repeat;
+					background-position: center;
+					background-size: auto;
+				}
+
+				.filter svg {
+					color: #999;
+				}
+
+				.filter:hover, .database:hover, .excel:hover, .maximize:hover {
+					color: green;
+				}
+
+				.filter {
+					background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" 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>');
+				}
+				.database {
+					background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" 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>');
+				}
+				.excel {
+					background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" 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>');
+				}
+				.maximize {
+					background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" 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>');
+				}
+			}
+		}
+	}
+
+	nine-chat-progress {
+		display: flex;
+		justify-content: flex-start;
+		padding: 5px;
+		flex-direction: column;
+
+		.chat-message.progress-message {
+			max-width: 80%;
+			border-radius: 8px;
+			font-size: 14px;
+			background-color: #fff;
+			color: black;
+			align-self: flex-start;
+			text-align: left;
+			position: relative;
+			box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
+			padding: 8px 16px; /* 버블 자체의 패딩 */
+		}
+
+		.progress-list {
+			list-style: none;
+			padding: 0;
+			margin: 0;
+			--font-size: 12px;
+		}
+
+		.progress-item {
+			display: flex;
+			align-items: center; /* 번호, 텍스트, 점을 세로 중앙 정렬 */
+			margin-bottom: 5px;
+			color: #999; /* 기본 텍스트 색상 */
+			font-size: 1em; /* 부모 폰트 사이즈(14px)를 따르도록 */
+			line-height: 1.4; /* 가독성을 위해 줄 간격 추가 */
+		}
+
+		.progress-item:last-child {
+			margin-bottom: 0;
+		}
+
+		/* 번호 스타일 */
+		.progress-item .step-number {
+			--font-weight: bold;
+			margin-right: 5px; /* 번호와 텍스트 사이 간격 */
+			color: #999; /* 번호 색상 */
+		}
+
+		/* 텍스트 내용 */
+		.progress-item .text {
+			--flex-grow: 1; /* 텍스트가 공간을 채우도록 */
+			white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 */
+		}
+
+		/* 진행 중 점 애니메이션 */
+		.progress-item .animated-dots {
+			width: 20px; /* 점 공간 확보 */
+			text-align: left; /* 점이 왼쪽에서 시작되도록 */
+			font-weight: bold;
+		}
+
+		/* completed 상태 */
+		.progress-item.completed {
+			color: #333; /* 완료된 텍스트 색상 */
+			--font-weight: bold; /* 완료 시 굵게 */
+		}
+		.progress-item.completed .animated-dots::after {
+			content: '✓'; /* 체크마크 */
+			margin-left: 5px; /* 체크마크와 텍스트 사이 간격 */
+			color: #28a745;
+			font-size: 1.0em; /* 체크마크 크기 */
+			font-weight: bold;
+		}
+
+		.progress-item.completed .step-number {
+			color: #333; /* 번호 색상 */
+		}
+
+		/* pending 상태에만 애니메이션 점 표시 */
+		.progress-item.pending .animated-dots {
+			/* JS로 내용이 채워지므로 별도의 CSS 애니메이션은 필요 없음 */
+		}
+	}
 }

package/src/components/ChatMessage.js

@@ -1,4 +1,4 @@
-class aiMessage extends HTMLElement
+class AiMessage extends HTMLElement
 {
 	#message;
 	#data;
@@ -163,7 +163,7 @@ class aiMessage extends HTMLElement
 	};
 }
 
-class aiIngMessage extends HTMLElement
+class IngMessage extends HTMLElement
 {
 	#message;
 
@@ -213,7 +213,7 @@ class MyMessage extends HTMLElement
 
 // aiProgressMessage 클래스 정의
 // aiProgressMessage 클래스 정의 수정
-class aiProgressMessage extends HTMLElement {
+class ProgressMessage extends HTMLElement {
 	#progressData = [];
 	#progressElements = new Map();
 	#animationIntervals = new Map();
@@ -224,7 +224,6 @@ class aiProgressMessage extends HTMLElement {
 
 	connectedCallback() {
 		this.innerHTML = `
-
             <div class="chat-message progress-message">
                 <ul class="progress-list"></ul>
             </div>
@@ -354,7 +353,7 @@ class aiProgressMessage extends HTMLElement {
 
 
 
-class ChatMessage extends HTMLElement
+class ChatMessageBody extends HTMLElement
 {
 	constructor() {
 		super();
@@ -407,17 +406,17 @@ class ChatMessage extends HTMLElement
 				break;
 
 			case "ing":
-				el = document.createElement("nx-ai-ing-message");
+				el = document.createElement("nine-chat-ing");
 				//el.setAttribute("message", message);
 				target.appendChild(el);
 				break;
 
 			case "ai":
-				this.shadowRoot.querySelectorAll("nx-ai-ing-message").forEach(el => {
+				this.shadowRoot.querySelectorAll("nine-chat-ing").forEach(el => {
 					el.remove();
 				});
 
-				el = document.createElement("nx-ai-message");
+				el = document.createElement("nine-chat-ai");
 				el.setAttribute("message", message);
 				el.setAttribute("row-count", data ? data.length : 0);
 				//el.data = data;
@@ -448,11 +447,11 @@ class ChatMessage extends HTMLElement
 
 		const target = this.shadowRoot.querySelector(".chat-body");
 
-		this.shadowRoot.querySelectorAll("nx-ai-ing-message").forEach(el => {
+		this.shadowRoot.querySelectorAll("nine-chat-ing").forEach(el => {
 			el.remove();
 		});
 
-		let el = document.createElement("nx-ai-progress-message");
+		let el = document.createElement("nine-chat-progress");
 		if (progressData) {
 			el.initialize(progressData); // progressData로 초기화
 		}
@@ -468,24 +467,24 @@ class ChatMessage extends HTMLElement
 	};
 }
 
+if (!customElements.get('nine-chat-message')) {
+	customElements.define("nine-chat-message", ChatMessageBody);
+}
 
-if (!customElements.get('nx-ai-message')) {
-	customElements.define("nx-ai-message", aiMessage);
+if (!customElements.get('nine-chat-me')) {
+	customElements.define("nine-chat-me", MyMessage);
 }
 
-if (!customElements.get('nx-ai-ing-message')) {
-	customElements.define("nx-ai-ing-message", aiIngMessage);
+if (!customElements.get('nine-chat-ai')) {
+	customElements.define("nine-chat-ai", AiMessage);
 }
 
-if (!customElements.get('nx-ai-progress-message')) {
-	customElements.define("nx-ai-progress-message", aiProgressMessage);
+if (!customElements.get('nine-chat-ing')) {
+	customElements.define("nine-chat-ing", IngMessage);
 }
 
+if (!customElements.get('nine-chat-progress')) {
+	customElements.define("nine-chat-progress", ProgressMessage);
+}
 
 
-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

@@ -91,17 +91,16 @@ export class NineChat extends HTMLElement {
 
                 // 3. nine.safe로 매니저 로직 실행
                 const [result, err] = await nine.safe(this.#manager.handleChatSubmit(target));
+
                 target.removeAttribute('disabled');
                 target.focus();
 
                 if (err) {
-                    console.error("Manager 실행 에러:", err);
-                    // 필요 시 'ing' 메시지 제거 및 사용자 알림
-                    this.shadowRoot.querySelectorAll("nx-ai-ing-message").forEach(el => el.remove());
+                    console.error(err);
+                    this.#$nineChatMessage.add("ai", err.message || "알 수 없는 오류가 발생했습니다. 다시 시도해주세요.");
                 } else {
                     console.log(result);
-                    //this.#$nineChatMessage.add("me", userInput);
-                    this.#$nineChatMessage.add("ai", result.message); // 로딩 상태
+                    this.#$nineChatMessage.add("ai", result.message);
                 }
             }
         });