@nine-lab/nine-mu 0.1.263 → 0.1.265

package/package.json

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

package/src/components/NineChatManager.js

@@ -135,6 +135,18 @@ export class NineChatManager {
         return res.ok ? await res.json() : [];
     }
 
+    async getUnmappedRoutes(routes) {
+
+        const res = await api.post("/nine-mu/config/getUnmappedRoutes", {
+            routes: routes
+        });
+
+        // 백엔드 반환 데이터 안전하게 추출 (res.data 구조 확인 필요)
+        return res?.data?.unmappedRoutes || res?.unmappedRoutes || [];
+    }
+
+
+
     addChatHistory(message) {
 
         this.#chatHistory.push({ role: 'ai', text: message });
@@ -156,11 +168,16 @@ export class NineChatManager {
         }).join('\n');
         const currentPath = window.location.pathname;
 
+        const routes = await this.getRoutes();
+        const unmappedRoutes = await this.getUnmappedRoutes(routes);
+
         // 2. AI 호출 시 history를 함께 실어서 보냅니다.
         return await this.#callTool("system-brain", {
+            base_package: this.#owner.config.basePackage,       // nine.edu
             user_input : userInput,
             chat_history: formattedHistory,
-            routes : await this.getRoutes(),
+            routes : routes,
+            unmapped_routes: unmappedRoutes,            // 미개발된 해당 라우트 정보 객체
             current_path : currentPath,
         });
     }
@@ -189,7 +206,7 @@ export class NineChatManager {
             user_input: `다음 미개발 라우트에 대한 소스코드(Controller, Service, MyBatis, React)를 생성해줘.`,
             base_package: this.#owner.config.basePackage,       // nine.edu
             //chat_history: "",
-            routes: unmappedRoutes,            // 미개발된 해당 라우트 정보 객체
+            unmapped_routes: unmappedRoutes,            // 미개발된 해당 라우트 정보 객체
             //current_path: route.path, // 현재 생성 기준 패스 명시
         });
     };

package/src/components/NineNatualQueryInput.js

@@ -0,0 +1,266 @@
+import { trace } from "@nopeer";
+import { nine, api } from '@nine-lab/nine-util';
+import { NineChatManager } from './NineChatManager.js';
+import { NineMuService } from '../services/NineMuService.js';
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { WebSocketClientTransport } from "@modelcontextprotocol/sdk/client/websocket.js";
+
+export class NineChat extends HTMLElement {
+    #service = null;
+    #packageName;
+    #routesPath;
+    #connectorUrl;
+    #manager;
+    #config;
+
+    #$nineChatMessage;
+
+    get config() {
+        return this.#config;
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    async connectedCallback() {
+
+        this.#packageName = this.getAttribute('package-name');
+
+        // 서비스 초기화
+        this.#connectorUrl = this.getAttribute('connector-url') || 'http://localhost:3002';
+
+        this.#service = new NineMuService(this.#connectorUrl);
+
+        this.#render();
+        this.#initInteractions(); // UI 토글 로직
+        this.#initActions();      // 엔터 시 실행 로직
+
+        const res = await api.post("/nine-mu/config/get", {});
+
+        this.#config = res;
+        this.#routesPath = res?.userDir + "/" + this.#packageName + "/public/prompts/data/routes.json";
+
+
+        // 경로 데이터 로드
+        //this.#routes = await this.#service.fetchRoutes(this.getAttribute('route-url'));
+
+        this.#manager = new NineChatManager(this);
+    }
+
+    // --- [그룹 1: Interaction] 화면 토글 및 메뉴 클릭 ---
+    #initInteractions() {
+        const $settings = this.shadowRoot.querySelector('nine-ai-settings');
+        const $menuIcons = this.shadowRoot.querySelectorAll("menu .menu-icon");
+
+        const toggleUI = () => this.classList.toggle("collapse");
+        this.shadowRoot.querySelector(".expand-icon").addEventListener("click", toggleUI);
+        this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", toggleUI);
+
+        $menuIcons.forEach(el => {
+            el.addEventListener("click", (e) => {
+                $menuIcons.forEach(icon => icon.classList.remove("active"));
+                const clicked = e.target.closest(".menu-icon");
+                clicked.classList.add("active");
+                $settings.classList.toggle("expand", clicked.classList.contains('menu-setting'));
+            });
+        });
+
+        this.shadowRoot.querySelector(".make-menu")?.addEventListener("click", this.#makeMenuHandler);
+        this.shadowRoot.querySelector(".source-gen")?.addEventListener("click", this.#sourceGenHandler);
+    }
+
+    // --- [그룹 2: Action] 엔터키 입력 시 서비스 호출 ---
+    #initActions() {
+
+        this.shadowRoot.querySelector('#q').addEventListener('keypress', async (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+
+                const target = e.target;
+
+                const userInput = target.value.trim();
+                if (!userInput) return;
+
+                target.setAttribute('disabled', 'disabled');
+
+                // 1. 즉시 UI 반영
+                this.#$nineChatMessage.add("me", userInput);
+                this.#$nineChatMessage.add("ing", ""); // 로딩 상태
+
+                // 3. nine.safe로 매니저 로직 실행
+                const [result, err] = await nine.safe(this.#manager.handleChatSubmit(target.value));
+
+                // 2. 입력창 비우기
+                setTimeout(() => {
+                    target.value = "";
+                });
+
+                target.removeAttribute('disabled');
+                target.focus();
+
+                if (err) {
+                    trace.error(err);
+                    // 에러가 났을 때 기존 로딩 컴포넌트를 지우거나 교체하는 로직이 있다면 연동해 주세요.
+                    this.#$nineChatMessage.add("ai", err.message || "알 수 없는 오류가 발생했습니다. 다시 시도해주세요.");
+                } else {
+                    trace.log(result);
+
+                    try {
+                        // 💡 [핵심] MCP 규격의 content[0].text에서 스트링을 추출합니다.
+                        const rawText = result?.content?.[0]?.text;
+                        //trace.log(rawText);
+                        // 텍스트를 JSON 객체로 파싱
+                        const parsed = JSON.parse(rawText);
+
+                        this.#manager.addChatHistory(parsed.message);
+                        this.#$nineChatMessage.add("ai", parsed.message);
+
+                        //trace.log(parsed.action);
+                        //"source-missing"
+                        //trace.log(parsed.data);
+
+
+                        const asis = await this.#manager.getRoutes();
+
+                        if (parsed?.selected_tool === "source-missing") {
+                            const hasCreated = parsed?.data.some(item => item.action === 'CREATE');
+                            const hasUpdated = parsed?.data.some(item => item.action === 'UPDATE');
+                            const hasDeleted = parsed?.data.some(item => item.action === 'DELETE');
+
+                            if (hasUpdated || hasCreated || hasDeleted) {
+                                // 진짜 메뉴명 변경이나 이동만 요청한 경우
+                                nine.alert("메뉴 정리를 위한 라우터 정보 저장 화면으로 이동합니다.").then(res => {
+                                    const tobe = (parsed?.data || [])
+                                        .filter(item => item.action !== 'DELETE')
+                                        .map(({ isNew, action, ...rest }) => rest);
+
+                                    this.#showDiff(asis, tobe, "json");
+                                });
+                            }
+                        }
+
+
+
+
+                        // 💡 만약 intent가 EXECUTE_TOOL이거나 NAVIGATE일 때 프론트에서
+                        // 화면 이동(Routing)이나 추가 액션을 해야 한다면 여기서 parsedData.target_path 등을 활용하면 됩니다!
+
+                    } catch (err) {
+                        trace.error(err);
+                        // 만약 AI가 JSON 형식이 아닌 일반 텍스트로 답장했을 경우를 대비한 예외 처리
+                        const fallbackMessage = result?.content?.[0]?.text || "응답 데이터를 해석하지 못했습니다.";
+                        this.#$nineChatMessage.add("ai", fallbackMessage);
+                    }
+                }
+            }
+        });
+    }
+
+
+    #render() {
+        const placeholder = this.getAttribute("placeholder") || "나에게 무엇이든 물어봐...";
+        const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
+                ${customImport}
+            </style>
+            <div class="wrapper">
+                <nine-ai-settings></nine-ai-settings>
+                <div class="container">
+                    <div class="head">
+                        <div class="logo"><span></span></div>
+                        <div id="status-tag" style="font-size:10px; color:#ff5722; padding:5px;">nine-mu Engine Ready</div>
+                    </div>
+                    <nine-chat-message></nine-chat-message>
+                    <div class="foot">
+                        <div class="apply-src">
+                            ${['MyBatis', 'Service', 'Controller', 'JavaScript'].map(t => `
+                                <div>
+                                    <input type="checkbox" id="${t.toLowerCase()}" name="gen_target" value="${t}" checked />
+                                    <label for="${t.toLowerCase()}">${t}</label>
+                                </div>
+                            `).join('')}
+                        </div>
+                        <textarea id="q" rows="4" placeholder="${placeholder}"></textarea>
+                    </div>
+                </div>
+                <div class="menu">
+                    <div class="collapse-icon"></div>
+                    <div class="menu-icon menu-filter"></div>
+                    <div class="menu-icon menu-general active"></div>
+                    <div class="menu-icon menu-setting"></div>
+                    
+                    <div class="menu-icon make-menu"></div>
+                    <div class="menu-icon source-gen"></div>
+                </div>
+            </div>
+            <div class="expand-icon"></div>
+        `;
+
+        //this.#diffPopup = this.shadowRoot.querySelector('nine-diff-popup');
+
+        this.#$nineChatMessage = this.shadowRoot.querySelector("nine-chat-message");
+    }
+
+    addMessage = (who, message) => {
+        this.#$nineChatMessage.add(who, message);
+    }
+
+    #makeMenuHandler = async e => {
+
+        const prompt = await nine.prompt("메뉴생성시 필요한 AI 프롬프트를 입력하세요.").rgb();
+        if (prompt === null || prompt === undefined) return;
+
+        const res = await api.post(`/nine-mu/source/readFile`, { path: this.#routesPath });
+        trace.log(res);
+
+        if (!res || !res?.contents) return;
+
+        const jsonRoutes = res?.contents ? JSON.parse(res?.contents) : {};
+        trace.log(jsonRoutes);
+
+        // 1. 미생성 소스 분석 요청
+        const res2 = await api.post(`${this.#connectorUrl}/api/source/missing`, {
+            routes : jsonRoutes,
+            prompt : prompt
+        });
+        //trace.log("분석 완료. 생성할 태스크:", res2?.tasks);
+
+        if (res2.success && res2?.tasks) {
+            this.#showDiff(jsonRoutes, res2?.tasks, "json");
+        }
+    }
+
+    #sourceGenHandler = async e => {
+        const routes = await this.#manager.getRoutes();
+        const response = await this.#manager.analyzeUnmappedRoutes(routes);
+        trace.log(response);
+    }
+
+    #showDiff = (asis, tobe, lang) => {
+        // 1. 혹시 잔상이 남아있을지 모르니 기존에 생성된 팝업이 있다면 강제 제거
+        const oldPopup = this.shadowRoot.querySelector('nine-diff-popup');
+        if (oldPopup) {
+            oldPopup.remove();
+        }
+
+        // 2. 동적으로 커스텀 엘리먼트 생성
+        const $diffPopup = document.createElement('nine-diff-popup');
+
+        // 3. 래퍼(wrapper) 안이나 shadowRoot 제일 밑바닥에 부착
+        const container = this.shadowRoot.querySelector('.wrapper') || this.shadowRoot;
+        container.appendChild($diffPopup);
+
+        // 4. 데이터 주입 및 팝업 실행
+        // 💡 팝업이 네이티브 <dialog> 기반이라면 .popup() 내부에서 showModal()이 실행될 겁니다.
+        $diffPopup.popup().data(asis, tobe, lang);
+    }
+}
+
+if (!customElements.get('nine-chat')) {
+    customElements.define('nine-chat', NineChat);
+}