ide-assi 0.528.0 → 0.530.0

package/dist/bundle.cjs.js

@@ -202898,43 +202898,366 @@ class ideAssiSettings extends HTMLElement
 
 customElements.define("ide-assi-settings", ideAssiSettings);
 
-class IdeTipPopup extends HTMLElement
-{
+// aiLoadingTips.js
+// This file contains the full source code for the nx-ai-loading-tips web component.
+
+
+class IdeLoadingTips extends HTMLElement {
+	#tips = [];                  // Stores tip objects {text: string, images: string[]}
+	#currentTipIndex = 0;        // Index of the currently displayed tip
+	#currentImageIndex = 0;      // Index of the currently displayed image for the current tip
+	#tipIntervalId = null;       // Interval ID for cycling through tips
+	#imageIntervalId = null;     // Interval ID for cycling through images within a tip
+	#tipDisplayDuration = 5000;  // How long each tip is displayed (5 seconds)
+	#imageDisplayDuration = 2000; // How long each image within a tip is displayed (2 seconds)
+
+	// DOM element references (cached for performance)
+	tipElement = null;
+	loadingAnimation = null;
+	tipImageElement = null;
+	tipImageContainer = null;
+
 	constructor() {
-	
 		super();
 		this.attachShadow({ mode: 'open' });
 	}
 
 	connectedCallback() {
-
+		// Set up the initial structure of the component in its Shadow DOM
 		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideAssi.css";
-				${ninegrid.getCustomPath(this,"ideAssi.css")}
-			</style>
+            <style>
+                /* Import ninegrid's base AI CSS */
+                @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
+                /* Import custom CSS specific to this component (adjust path as needed) */
+                ${ninegrid.getCustomPath(this, "ai.css")}
 
-			<nx-dialog>
-				<div class="buttons">
-					adfa
-				</div>
-				
-			</nx-dialog>
-		`;
+                /* Component-specific styles */
+                :host {
+                    display: flex;
+                    justify-content: flex-start;
+                    padding: 5px;
+                    flex-direction: column;
+                }
+
+                .chat-message.loading-tips-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: 12px 16px;
+                   display: flex;
+                   flex-direction: column;
+                   align-items: flex-start;
+                   padding-bottom: 8px; /* Adjusted for image container */
+                }
+
+                .loading-animation {
+                   width: 20px;
+                   height: 20px;
+                   border: 3px solid #f3f3f3;
+                   border-top: 3px solid #3498db;
+                   border-radius: 50%;
+                   animation: spin 1s linear infinite;
+                   margin-bottom: 8px;
+                   display: none; /* Controlled by JS */
+                }
+
+                .tip-content {
+                   width: 100%;
+                }
+
+                .tip-label {
+                   font-size: 0.85em;
+                   color: #666;
+                   margin: 0 0 5px 0;
+                   font-weight: bold;
+                }
+
+                .current-tip {
+                   font-size: 1em;
+                   margin: 0;
+                   color: #333;
+                   line-height: 1.5;
+                   margin-bottom: 10px; /* Space between text and image */
+                }
+
+                .tip-image-container {
+                   width: 100%;
+                   max-height: 150px; /* Max height for the image area */
+                   overflow: hidden;
+                   display: flex;
+                   justify-content: center;
+                   align-items: center;
+                   background-color: #f0f0f0; /* Optional background for image area */
+                   border-radius: 4px;
+                   margin-top: 5px;
+                   display: none; /* Controlled by JS */
+                }
+
+                .tip-image {
+                   max-width: 100%;
+                   max-height: 100%;
+                   object-fit: contain; /* Ensures image fits without cropping, maintaining aspect ratio */
+                   border-radius: 4px;
+                   display: none; /* Controlled by JS */
+                }
+
+                @keyframes spin {
+                   0% { transform: rotate(0deg); }
+                   100% { transform: rotate(360deg); }
+                }
+            </style>
+            <div class="chat-message loading-tips-message">
+                <div class="loading-animation"></div>
+                <div class="tip-content">
+                    <p class="tip-label">오늘의 AI 팁:</p>
+                    <p class="current-tip"></p>
+                    <div class="tip-image-container">
+                        <img class="tip-image" src="" alt="팁 관련 이미지">
+                    </div>
+                </div>
+            </div>
+        `;
+		// Cache DOM element references
+		this.tipElement = this.shadowRoot.querySelector('.current-tip');
+		this.loadingAnimation = this.shadowRoot.querySelector('.loading-animation');
+		this.tipImageElement = this.shadowRoot.querySelector('.tip-image');
+		this.tipImageContainer = this.shadowRoot.querySelector('.tip-image-container');
+	}
+
+	disconnectedCallback() {
+		// Clean up all intervals when the component is removed from the DOM
+		this.stopTips();
+	}
+
+	/**
+	 * Loads tips asynchronously from a JSON URL and starts displaying them.
+	 * @param {string} tipsUrl - The URL of the JSON file containing tip data.
+	 * @param {string} tipCategory - The key in the JSON file's data that corresponds to the desired tip array (e.g., 'componentTips').
+	 */
+	async startTips(tipsUrl, tipCategory) {
+		if (!tipsUrl || !tipCategory) {
+			console.error("Tips URL or category not provided for aiLoadingTips.");
+			return;
+		}
+
+		try {
+			const response = await fetch(tipsUrl);
+			if (!response.ok) {
+				throw new Error(`Failed to fetch tips: ${response.statusText}`);
+			}
+			const data = await response.json();
+			const tips = data[tipCategory];
+
+			if (!tips || tips.length === 0) {
+				console.warn(`No tips found for category '${tipCategory}' in ${tipsUrl}.`);
+				return;
+			}
+
+			this.#tips = tips;
+			this.#currentTipIndex = 0;
+			this.stopTips(); // Stop any existing intervals before starting new ones
+
+			this.showCurrentTip(); // Display the first tip immediately
+
+			// Start interval for cycling through tips
+			this.#tipIntervalId = setInterval(() => {
+				this.showNextTip();
+			}, this.#tipDisplayDuration);
+
+			this.loadingAnimation.style.display = 'block'; // Show the loading spinner
+		} catch (error) {
+			console.error("Error loading tips:", error);
+			this.stopTips(); // Stop intervals and hide animations on error
+			if (this.tipElement) {
+				this.tipElement.textContent = "팁을 불러오는 중 오류가 발생했습니다.";
+			}
+		}
+	}
+
+	/**
+	 * Stops all tip and image display intervals and hides related UI elements.
+	 */
+	stopTips() {
+		if (this.#tipIntervalId) {
+			clearInterval(this.#tipIntervalId);
+			this.#tipIntervalId = null;
+		}
+		if (this.#imageIntervalId) {
+			clearInterval(this.#imageIntervalId);
+			this.#imageIntervalId = null;
+		}
+		this.loadingAnimation.style.display = 'none';
+		this.tipImageElement.style.display = 'none'; // Hide image
+		this.tipImageElement.src = ''; // Clear image source
+		this.tipImageContainer.style.display = 'none'; // Hide image container
+	}
+
+	/**
+	 * Advances to the next tip and calls showCurrentTip() to display it.
+	 */
+	showNextTip() {
+		this.#currentTipIndex = (this.#currentTipIndex + 1) % this.#tips.length;
+		this.showCurrentTip();
+	}
+
+	/**
+	 * Displays the current tip's text and manages its associated images.
+	 */
+	showCurrentTip() {
+		const currentTip = this.#tips[this.#currentTipIndex];
+		if (this.tipElement && currentTip) {
+			this.tipElement.textContent = currentTip.text;
+
+			// Clear any existing image cycling interval for the previous tip
+			if (this.#imageIntervalId) {
+				clearInterval(this.#imageIntervalId);
+				this.#imageIntervalId = null;
+			}
+
+			// Image handling logic
+			if (currentTip.images && currentTip.images.length > 0) {
+				this.#currentImageIndex = 0; // Reset image index for the new tip
+				this.showCurrentImage(currentTip.images[this.#currentImageIndex]);
+				this.tipImageElement.style.display = 'block'; // Show the image
+				this.tipImageContainer.style.display = 'flex'; // Show the image container
+
+				if (currentTip.images.length > 1) {
+					// If there's more than one image, start cycling through them
+					this.#imageIntervalId = setInterval(() => {
+						this.#currentImageIndex = (this.#currentImageIndex + 1) % currentTip.images.length;
+						this.showCurrentImage(currentTip.images[this.#currentImageIndex]);
+					}, this.#imageDisplayDuration);
+				}
+			} else {
+				// If no images are provided for this tip, hide the image elements
+				this.tipImageElement.style.display = 'none';
+				this.tipImageContainer.style.display = 'none';
+				this.tipImageElement.src = ''; // Clear image source
+			}
+		}
+	}
+
+	/**
+	 * Sets the source of the image element to display the given image.
+	 * @param {string} imageUrl - The URL of the image to display.
+	 */
+	showCurrentImage(imageUrl) {
+		if (this.tipImageElement) {
+			this.tipImageElement.src = imageUrl;
+		}
+	}
+}
+
+// Define the custom element
+customElements.define("ide-loading-tips", IdeLoadingTips);
+
+class IdeTipPopup extends HTMLElement {
+	#ideLoadingTipsInstance = null; // aiLoadingTips 인스턴스를 저장할 변수
+	#tipsUrl = '/data/tips.json'; // 팁 JSON 파일의 기본 경로 (public 폴더 내)
+	#tipCategory = 'componentTips'; // 기본으로 표시할 팁 카테고리
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		this.shadowRoot.innerHTML = `
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideAssi.css";
+             ${ninegrid.getCustomPath(this,"ideAssi.css")}
+
+             /* ide-tip-popup 전용 스타일 (필요시 추가) */
+             .dialog-header {
+                 font-size: 1.2em;
+                 font-weight: bold;
+                 margin-bottom: 15px;
+                 text-align: center;
+                 color: #333;
+                 padding-top: 10px; /* 헤더 위 공간 */
+             }
+             .dialog-content {
+                 /* aiLoadingTips가 들어갈 컨테이너 */
+                 padding: 0 5px;
+             }
+             /* nx-dialog의 닫기 버튼과 겹치지 않도록 조정 */
+             nx-dialog::part(close-button) { /* nx-dialog의 내부 닫기 버튼에 접근 */
+                 top: 10px;
+                 right: 10px;
+             }
+          </style>
+
+          <nx-dialog>
+             <div slot="header" class="dialog-header">AI가 답변을 준비 중입니다...</div>
+             <div class="dialog-content"></div>
+             <div slot="footer" class="dialog-footer"></div>
+          </nx-dialog>
+       `;
 
 		this.#init();
 	}
 
 	#init = () => {
-
+		// nx-dialog가 DOM에 추가된 후 내부 요소에 접근
+		const dialog = this.shadowRoot.querySelector('nx-dialog');
+		if (dialog) {
+			// dialog가 닫힐 때 aiLoadingTips의 애니메이션 중지
+			dialog.addEventListener('close', () => {
+				if (this.#aiLoadingTipsInstance) {
+					this.#aiLoadingTipsInstance.stopTips();
+					// 팝업이 닫힐 때 aiLoadingTips 인스턴스 제거 (선택 사항)
+					this.#aiLoadingTipsInstance.remove();
+					this.#aiLoadingTipsInstance = null;
+				}
+			});
+		}
 	}
 
-	popup = () => {
+	/**
+	 * 팁 팝업을 표시하고 aiLoadingTips를 시작합니다.
+	 * @param {string} [category='componentTips'] - 표시할 팁의 카테고리 ('componentTips' 또는 'generalAITips')
+	 * @param {string} [tipsUrl='/data/tips.json'] - 팁 JSON 파일의 URL
+	 */
+	async popup(category = 'componentTips', tipsUrl = '/tips/tip.json') {
+		this.#tipCategory = category;
+		this.#tipsUrl = tipsUrl;
+
+		const dialogContent = this.shadowRoot.querySelector('.dialog-content');
+		if (!dialogContent) {
+			console.error("Popup content container not found.");
+			return;
+		}
+
+		// 기존 aiLoadingTips 인스턴스가 있다면 제거
+		if (this.#ideLoadingTipsInstance) {
+			this.#ideLoadingTipsInstance.stopTips();
+			this.#ideLoadingTipsInstance.remove();
+			this.#ideLoadingTipsInstance = null;
+		}
+
+		// 새로운 aiLoadingTips 인스턴스 생성 및 추가
+		this.#ideLoadingTipsInstance = document.createElement('ide-loading-tips');
+		dialogContent.appendChild(this.#ideLoadingTipsInstance);
+
+		// 팁 로딩 시작
+		await this.#ideLoadingTipsInstance.startTips(this.#tipsUrl, this.#tipCategory);
+
+		// nx-dialog 팝업 표시
 		this.shadowRoot.querySelector('nx-dialog')?.showModal();
 	};
 
+	/**
+	 * 팁 팝업을 닫습니다.
+	 */
 	close = () => {
 		this.shadowRoot.querySelector('nx-dialog')?.close();
+		// close 이벤트 리스너에서 aiLoadingTips 정리 로직이 실행될 것임
 	};
 }