ide-assi 0.443.0 → 0.445.0

package/dist/components/ideAssi.js

@@ -464,7 +464,7 @@ const DocManager = () => {
   );
 };
 
-export default DocManager1;
+export default DocManager;
 		`;
 /**
 		src1 = `
@@ -492,10 +492,48 @@ export default DocManager1;
 </tr>
 `; */
 
-		this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
+		//this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
+
+		//return;
+
+
+// 1. 초기 진행 상태 메시지 추가
+		const initialProgressData = [
+			{ id: 'analysis', message: '1. 분석중입니다...', completedMessage: '1-1. 분석이 완료되었습니다.' },
+			{ id: 'design', message: '2. 설계중...', completedMessage: '2-1. 설계가 완료되었습니다.' },
+			{ id: 'development', message: '3. 개발중...', completedMessage: '3-1. 개발이 완료되었습니다.' }
+		];
+
+// aiChat.add 호출 시, progressData를 마지막 인자로 전달하고 생성된 엘리먼트를 받습니다.
+		const progressMessageInstance = elAiChat.addProgress(initialProgressData);
+
+// 2. 시간이 지난 후, 특정 단계의 완료를 알림
+// 예를 들어, 3초 후에 분석 완료
+		setTimeout(() => {
+			if (progressMessageInstance) {
+				progressMessageInstance.updateProgress('analysis', 'completed');
+				console.log("분석 완료 메시지 업데이트");
+			}
+		}, 3000);
+
+// 예를 들어, 6초 후에 설계 완료
+		setTimeout(() => {
+			if (progressMessageInstance) {
+				progressMessageInstance.updateProgress('design', 'completed');
+				console.log("설계 완료 메시지 업데이트");
+			}
+		}, 6000);
+
+// 모든 단계가 완료된 후, 일반 AI 메시지 추가 (선택 사항)
+		setTimeout(() => {
+			elAiChat.add("ai", "모든 작업이 성공적으로 완료되었습니다!", [], []);
+		}, 9000);
+
+
 
 		return;
 
+
 		const apply = {
 			mybatis: this.shadowRoot.querySelector("#mybatis").checked,
 			service: this.shadowRoot.querySelector("#service").checked,

package/dist/components/ideDiff.js

@@ -116,11 +116,11 @@ class MergeButtonWidget extends WidgetType {
 		if (this.isAsisButton) {
 			// ASIS (왼쪽) 에디터에 붙는 버튼: AI가 삭제한 것을 '삭제' (ASIS에서 제거)
 			button.className = "cm-merge-button revert"; // 'revert' 클래스 사용 (빨간색)
-			button.textContent = "삭제"; // 텍스트 변경
+			//button.textContent = "삭제"; // 텍스트 변경
 		} else {
 			// TOBE (오른쪽) 에디터에 붙는 버튼: AI가 추가한 것을 '적용' (ASIS에 반영)
 			button.className = "cm-merge-button accept"; // 'accept' 클래스 사용 (녹색)
-			button.textContent = "← 적용"; // 화살표 방향 변경
+			//button.textContent = "← 적용"; // 화살표 방향 변경
 		}
 
 		// 클릭 이벤트 핸들러

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.443.0",
+  "version": "0.445.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideAssi.js

@@ -464,7 +464,7 @@ const DocManager = () => {
   );
 };
 
-export default DocManager1;
+export default DocManager;
 		`;
 /**
 		src1 = `
@@ -492,10 +492,48 @@ export default DocManager1;
 </tr>
 `; */
 
-		this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
+		//this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
+
+		//return;
+
+
+// 1. 초기 진행 상태 메시지 추가
+		const initialProgressData = [
+			{ id: 'analysis', message: '1. 분석중입니다...', completedMessage: '1-1. 분석이 완료되었습니다.' },
+			{ id: 'design', message: '2. 설계중...', completedMessage: '2-1. 설계가 완료되었습니다.' },
+			{ id: 'development', message: '3. 개발중...', completedMessage: '3-1. 개발이 완료되었습니다.' }
+		];
+
+// aiChat.add 호출 시, progressData를 마지막 인자로 전달하고 생성된 엘리먼트를 받습니다.
+		const progressMessageInstance = elAiChat.addProgress(initialProgressData);
+
+// 2. 시간이 지난 후, 특정 단계의 완료를 알림
+// 예를 들어, 3초 후에 분석 완료
+		setTimeout(() => {
+			if (progressMessageInstance) {
+				progressMessageInstance.updateProgress('analysis', 'completed');
+				console.log("분석 완료 메시지 업데이트");
+			}
+		}, 3000);
+
+// 예를 들어, 6초 후에 설계 완료
+		setTimeout(() => {
+			if (progressMessageInstance) {
+				progressMessageInstance.updateProgress('design', 'completed');
+				console.log("설계 완료 메시지 업데이트");
+			}
+		}, 6000);
+
+// 모든 단계가 완료된 후, 일반 AI 메시지 추가 (선택 사항)
+		setTimeout(() => {
+			elAiChat.add("ai", "모든 작업이 성공적으로 완료되었습니다!", [], []);
+		}, 9000);
+
+
 
 		return;
 
+
 		const apply = {
 			mybatis: this.shadowRoot.querySelector("#mybatis").checked,
 			service: this.shadowRoot.querySelector("#service").checked,

package/src/components/ideDiff.js

@@ -116,11 +116,11 @@ class MergeButtonWidget extends WidgetType {
 		if (this.isAsisButton) {
 			// ASIS (왼쪽) 에디터에 붙는 버튼: AI가 삭제한 것을 '삭제' (ASIS에서 제거)
 			button.className = "cm-merge-button revert"; // 'revert' 클래스 사용 (빨간색)
-			button.textContent = "삭제"; // 텍스트 변경
+			//button.textContent = "삭제"; // 텍스트 변경
 		} else {
 			// TOBE (오른쪽) 에디터에 붙는 버튼: AI가 추가한 것을 '적용' (ASIS에 반영)
 			button.className = "cm-merge-button accept"; // 'accept' 클래스 사용 (녹색)
-			button.textContent = "← 적용"; // 화살표 방향 변경
+			//button.textContent = "← 적용"; // 화살표 방향 변경
 		}
 
 		// 클릭 이벤트 핸들러

package/src/components/ideDiff.js.bak

@@ -1,141 +0,0 @@
-import ninegrid from "ninegrid2";
-import {diff_match_patch} from 'diff-match-patch';
-
-export class IdeDiff extends HTMLElement
-{
-	#asisSrc;
-	#tobeSrc;
-	#asisPre; // <pre> 요소 참조 저장
-	#tobePre; // <pre> 요소 참조 저장
-
-	constructor() {
-		super();
-		this.attachShadow({ mode: 'open' });
-	}
-
-	connectedCallback() {
-		this.shadowRoot.innerHTML = `
-          <style>
-             /* 전역 또는 컴포넌트 스코프에서 box-sizing: border-box; 적용 권장 */
-             * {
-                box-sizing: border-box;
-             }
-             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
-             ${ninegrid.getCustomPath(this,"ideDiff.css")}
-
-             /* 추가 CSS (필요 시) */
-             .wrapper {
-                 display: flex; /* 스플리터와 함께 작동하도록 flex 컨테이너 */
-                 height: 100%; /* 부모의 높이를 채우도록 설정 */
-                 overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
-             }
-             .panel {
-                 flex: 1; /* 패널들이 남은 공간을 채우도록 */
-                 overflow: auto; /* 각 패널 내부에서 스크롤 가능하게 */
-                 position: relative; /* 자식 요소의 absolute 포지셔닝 기준 */
-             }
-             .panel pre {
-                 margin: 0; /* pre 태그의 기본 마진 제거 */
-                 padding: 10px; /* 코드 가독성을 위한 내부 패딩 */
-                 white-space: pre-wrap; /* 긴 줄 자동 줄바꿈 */
-                 word-break: break-all; /* 단어가 길어도 강제 줄바꿈 */
-                 /* white-space: pre-wrap; 을 사용하면 가로 스크롤 없이 줄바꿈됩니다.
-                    만약 가로 스크롤을 원하면 white-space: pre; 로 두고 overflow-x: auto; 를 panel에 추가 */
-             }
-             ins {
-                 background-color: #d4edda; /* 삽입된 텍스트 배경색 (예시) */
-                 text-decoration: none; /* 밑줄 제거 (일반적으로) */
-             }
-             del {
-                 background-color: #f8d7da; /* 삭제된 텍스트 배경색 (예시) */
-                 text-decoration: none; /* 취소선 제거 (일반적으로) */
-             }
-          </style>
-
-          <div class="wrapper">
-             <div class="panel asis"><pre></pre></div>
-             <nx-splitter></nx-splitter>
-             <div class="panel tobe"><pre></pre></div>
-          </div>
-       `;
-
-		requestAnimationFrame(() => {
-			this.#init();
-		});
-	};
-
-	#init = () => {
-		// 패널 pre 요소에 대한 참조를 저장
-		this.#asisPre = this.shadowRoot.querySelector('.asis pre');
-		this.#tobePre = this.shadowRoot.querySelector('.tobe pre');
-
-		// 스크롤 동기화 이벤트 리스너 추가
-		this.#asisPre.addEventListener('scroll', this.#syncScroll);
-		this.#tobePre.addEventListener('scroll', this.#syncScroll);
-	};
-
-	#syncScroll = (e) => {
-		// 스크롤 이벤트 발생 시 다른 패널의 스크롤 위치를 동기화
-		// `e.target`이 스크롤 이벤트를 발생시킨 요소
-		if (e.target === this.#asisPre) {
-			this.#tobePre.scrollTop = this.#asisPre.scrollTop;
-		} else if (e.target === this.#tobePre) {
-			this.#asisPre.scrollTop = this.#tobePre.scrollTop;
-		}
-	};
-
-	#renderDiff = () => {
-		const dmp = new diff_match_patch();
-		// 공백 문자를 정규화하여 diff 정확도 향상 (선택 사항)
-		const cleanedAsisSrc = this.#asisSrc.replace(/\r\n/g, '\n');
-		const cleanedTobeSrc = this.#tobeSrc.replace(/\r\n/g, '\n');
-
-		const diffs = dmp.diff_main(cleanedAsisSrc, cleanedTobeSrc);
-		dmp.diff_cleanupSemantic(diffs);
-
-		const asisHtml = [];
-		const tobeHtml = [];
-
-		for (const [op, text] of diffs) {
-			// HTML 이스케이프 처리: <, >, & 등 특수문자 변환
-			const escapedText = text
-				.replace(/&/g, '&amp;')
-				.replace(/</g, '&lt;')
-				.replace(/>/g, '&gt;');
-
-			switch (op) {
-				case diff_match_patch.DIFF_INSERT:
-					tobeHtml.push(`<ins>${escapedText}</ins>`);
-					// 삭제된 내용이 없으므로 asis에는 공백을 유지 (줄 맞춤 고려)
-					// 만약 줄 단위로 완벽하게 매칭하려면 여기에 다른 로직 필요
-					break;
-				case diff_match_patch.DIFF_DELETE:
-					asisHtml.push(`<del>${escapedText}</del>`);
-					// 추가된 내용이 없으므로 tobe에는 공백을 유지
-					break;
-				case diff_match_patch.DIFF_EQUAL:
-					asisHtml.push(`<span>${escapedText}</span>`);
-					tobeHtml.push(`<span>${escapedText}</span>`);
-					break;
-			}
-		}
-
-		// 중요한 부분: `innerHTML` 대신 `textContent`를 사용하면
-		// `diff-match-patch`의 출력에 따라 HTML 태그가 그대로 보이므로,
-		// 여기서는 `innerHTML`을 사용하되, 텍스트는 `escapedText`로 처리하여 XSS 방지.
-		this.#asisPre.innerHTML = asisHtml.join('');
-		this.#tobePre.innerHTML = tobeHtml.join('');
-	};
-
-
-	initialize = (src1, src2) => {
-		console.log("Initializing IdeDiff with sources:", src1, src2);
-
-		this.#asisSrc = src1;
-		this.#tobeSrc = src2;
-
-		this.#renderDiff();
-	};
-}
-
-customElements.define("ide-diff", IdeDiff);