ninegrid2 6.871.0 → 6.873.0

package/dist/ai/aiMessage.js

@@ -228,6 +228,83 @@ class aiMyMessage extends HTMLElement
 	};
 }
 
+// aiProgressMessage 클래스 정의
+class aiProgressMessage extends HTMLElement {
+	#progressData = []; // 진행 상태 데이터를 저장할 배열
+	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		this.shadowRoot.innerHTML = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/ninegrid@${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' })); // 초기 상태는 'pending'
+		setTimeout(() => {
+			this.#renderProgress();
+		}, 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) {
+			this.#progressData[itemIndex].status = status;
+			this.#updateProgressItem(this.#progressData[itemIndex]);
+		}
+	}
+
+	#renderProgress() {
+		const progressList = this.shadowRoot.querySelector(".progress-list");
+		progressList.innerHTML = ''; // 기존 목록 초기화
+		this.#progressElements.clear(); // 기존 요소 Map 초기화
+
+		this.#progressData.forEach((item, index) => {
+			const li = document.createElement("li");
+			li.setAttribute("data-id", item.id);
+			li.classList.add("progress-item", item.status);
+			li.innerHTML = `
+                <span class="icon"></span>
+                <span class="text">${item.message}</span>
+            `;
+			progressList.appendChild(li);
+			this.#progressElements.set(item.id, li); // DOM 요소 참조 저장
+		});
+	}
+
+	#updateProgressItem(item) {
+		const li = this.#progressElements.get(item.id);
+		if (li) {
+			li.classList.remove('pending', 'completed'); // 기존 클래스 제거
+			li.classList.add(item.status); // 새 상태 클래스 추가
+			li.querySelector(".text").textContent = item.status === 'completed' ? item.completedMessage : item.message;
+		}
+	}
+}
+
+
+
 class aiChat extends HTMLElement
 {
 	constructor() {
@@ -301,9 +378,45 @@ class aiChat extends HTMLElement
 			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; // 생성된 엘리먼트를 반환
+	};
 }
 
+
+
 customElements.define("nx-ai-message", aiMessage);
 customElements.define("nx-ai-ing-message", aiIngMessage);
 customElements.define("nx-ai-my-message", aiMyMessage);
+customElements.define("nx-ai-progress-message", aiProgressMessage);
 customElements.define("nx-ai-chat", aiChat);

package/dist/bundle.cjs.js

@@ -121865,6 +121865,83 @@ class aiMyMessage extends HTMLElement
 	};
 }
 
+// aiProgressMessage 클래스 정의
+class aiProgressMessage extends HTMLElement {
+	#progressData = []; // 진행 상태 데이터를 저장할 배열
+	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		this.shadowRoot.innerHTML = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/ninegrid@${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' })); // 초기 상태는 'pending'
+		setTimeout(() => {
+			this.#renderProgress();
+		}, 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) {
+			this.#progressData[itemIndex].status = status;
+			this.#updateProgressItem(this.#progressData[itemIndex]);
+		}
+	}
+
+	#renderProgress() {
+		const progressList = this.shadowRoot.querySelector(".progress-list");
+		progressList.innerHTML = ''; // 기존 목록 초기화
+		this.#progressElements.clear(); // 기존 요소 Map 초기화
+
+		this.#progressData.forEach((item, index) => {
+			const li = document.createElement("li");
+			li.setAttribute("data-id", item.id);
+			li.classList.add("progress-item", item.status);
+			li.innerHTML = `
+                <span class="icon"></span>
+                <span class="text">${item.message}</span>
+            `;
+			progressList.appendChild(li);
+			this.#progressElements.set(item.id, li); // DOM 요소 참조 저장
+		});
+	}
+
+	#updateProgressItem(item) {
+		const li = this.#progressElements.get(item.id);
+		if (li) {
+			li.classList.remove('pending', 'completed'); // 기존 클래스 제거
+			li.classList.add(item.status); // 새 상태 클래스 추가
+			li.querySelector(".text").textContent = item.status === 'completed' ? item.completedMessage : item.message;
+		}
+	}
+}
+
+
+
 class aiChat extends HTMLElement
 {
 	constructor() {
@@ -121935,11 +122012,47 @@ class aiChat extends HTMLElement
 			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; // 생성된 엘리먼트를 반환
+	};
 }
 
+
+
 customElements.define("nx-ai-message", aiMessage);
 customElements.define("nx-ai-ing-message", aiIngMessage);
 customElements.define("nx-ai-my-message", aiMyMessage);
+customElements.define("nx-ai-progress-message", aiProgressMessage);
 customElements.define("nx-ai-chat", aiChat);
 
 /**

package/dist/bundle.esm.js

@@ -121861,6 +121861,83 @@ class aiMyMessage extends HTMLElement
 	};
 }
 
+// aiProgressMessage 클래스 정의
+class aiProgressMessage extends HTMLElement {
+	#progressData = []; // 진행 상태 데이터를 저장할 배열
+	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		this.shadowRoot.innerHTML = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/ninegrid@${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' })); // 초기 상태는 'pending'
+		setTimeout(() => {
+			this.#renderProgress();
+		}, 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) {
+			this.#progressData[itemIndex].status = status;
+			this.#updateProgressItem(this.#progressData[itemIndex]);
+		}
+	}
+
+	#renderProgress() {
+		const progressList = this.shadowRoot.querySelector(".progress-list");
+		progressList.innerHTML = ''; // 기존 목록 초기화
+		this.#progressElements.clear(); // 기존 요소 Map 초기화
+
+		this.#progressData.forEach((item, index) => {
+			const li = document.createElement("li");
+			li.setAttribute("data-id", item.id);
+			li.classList.add("progress-item", item.status);
+			li.innerHTML = `
+                <span class="icon"></span>
+                <span class="text">${item.message}</span>
+            `;
+			progressList.appendChild(li);
+			this.#progressElements.set(item.id, li); // DOM 요소 참조 저장
+		});
+	}
+
+	#updateProgressItem(item) {
+		const li = this.#progressElements.get(item.id);
+		if (li) {
+			li.classList.remove('pending', 'completed'); // 기존 클래스 제거
+			li.classList.add(item.status); // 새 상태 클래스 추가
+			li.querySelector(".text").textContent = item.status === 'completed' ? item.completedMessage : item.message;
+		}
+	}
+}
+
+
+
 class aiChat extends HTMLElement
 {
 	constructor() {
@@ -121931,11 +122008,47 @@ class aiChat extends HTMLElement
 			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; // 생성된 엘리먼트를 반환
+	};
 }
 
+
+
 customElements.define("nx-ai-message", aiMessage);
 customElements.define("nx-ai-ing-message", aiIngMessage);
 customElements.define("nx-ai-my-message", aiMyMessage);
+customElements.define("nx-ai-progress-message", aiProgressMessage);
 customElements.define("nx-ai-chat", aiChat);
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.871.0",
+  "version": "6.873.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/ai/aiMessage.js

@@ -228,6 +228,83 @@ class aiMyMessage extends HTMLElement
 	};
 }
 
+// aiProgressMessage 클래스 정의
+class aiProgressMessage extends HTMLElement {
+	#progressData = []; // 진행 상태 데이터를 저장할 배열
+	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		this.shadowRoot.innerHTML = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/ninegrid@${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' })); // 초기 상태는 'pending'
+		setTimeout(() => {
+			this.#renderProgress();
+		}, 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) {
+			this.#progressData[itemIndex].status = status;
+			this.#updateProgressItem(this.#progressData[itemIndex]);
+		}
+	}
+
+	#renderProgress() {
+		const progressList = this.shadowRoot.querySelector(".progress-list");
+		progressList.innerHTML = ''; // 기존 목록 초기화
+		this.#progressElements.clear(); // 기존 요소 Map 초기화
+
+		this.#progressData.forEach((item, index) => {
+			const li = document.createElement("li");
+			li.setAttribute("data-id", item.id);
+			li.classList.add("progress-item", item.status);
+			li.innerHTML = `
+                <span class="icon"></span>
+                <span class="text">${item.message}</span>
+            `;
+			progressList.appendChild(li);
+			this.#progressElements.set(item.id, li); // DOM 요소 참조 저장
+		});
+	}
+
+	#updateProgressItem(item) {
+		const li = this.#progressElements.get(item.id);
+		if (li) {
+			li.classList.remove('pending', 'completed'); // 기존 클래스 제거
+			li.classList.add(item.status); // 새 상태 클래스 추가
+			li.querySelector(".text").textContent = item.status === 'completed' ? item.completedMessage : item.message;
+		}
+	}
+}
+
+
+
 class aiChat extends HTMLElement
 {
 	constructor() {
@@ -301,9 +378,45 @@ class aiChat extends HTMLElement
 			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; // 생성된 엘리먼트를 반환
+	};
 }
 
+
+
 customElements.define("nx-ai-message", aiMessage);
 customElements.define("nx-ai-ing-message", aiIngMessage);
 customElements.define("nx-ai-my-message", aiMyMessage);
+customElements.define("nx-ai-progress-message", aiProgressMessage);
 customElements.define("nx-ai-chat", aiChat);