@nine-lab/nine-mu 0.1.134 → 0.1.136

package/package.json

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

package/public/css/nine-mu.css

@@ -172,7 +172,7 @@
 		}
 
 		.foot {
-			margin-bottom: 32px;
+			margin-bottom: 4px;
 			width: 100%;
 			height: 200px;
 			--background: #f0f0f0;
@@ -198,6 +198,8 @@
 				border-radius: 8px;
 				resize: none;
 				padding: 8px;
+				background: white;
+				color: #333;
 			}
 			textarea:hover {
 				border: 1px solid #999;

package/src/components/NineChat.js

@@ -1,5 +1,6 @@
 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";
@@ -12,6 +13,7 @@ export class NineChat extends HTMLElement {
     #routesPath;
     #connectorUrl;
     #mcpClient;
+    #manager;
 
     constructor() {
         super();
@@ -38,6 +40,8 @@ export class NineChat extends HTMLElement {
 
         // 경로 데이터 로드
         this.#routes = await this.#service.fetchRoutes(this.getAttribute('route-url'));
+
+        this.#manager = new NineChatManager(this);
     }
 
     // --- [그룹 1: Interaction] 화면 토글 및 메뉴 클릭 ---

package/src/components/NineChatManager.js

@@ -0,0 +1,121 @@
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { WebSocketClientTransport } from "@modelcontextprotocol/sdk/client/websocket.js";
+import { trace, api, nine } from "@nine-lab/nine-util";
+
+export class NineChatManager {
+    #client;
+    #connectorUrl;
+    #onAction;
+    #onStatus;
+    #onMessage; // UI에 메시지를 뿌려줄 콜백 추가
+    #owner;
+
+    constructor(owner, callbacks = {}) {
+        this.#owner = owner;
+        this.#connectorUrl = this.#owner.getAttribute('connector-url');
+
+        // 콜백 함수들 연결
+        this.#onAction = callbacks.onAction;
+        this.#onStatus = callbacks.onStatus;
+        this.#onMessage = callbacks.onMessage;
+
+        // 연결 시작 (비동기)
+        this.connect();
+    }
+
+    async connect() {
+        if (this.#client) return;
+        try {
+            const transport = new WebSocketClientTransport(new URL(this.#connectorUrl));
+            this.#client = new Client({
+                name: "nine-mu-client", version: "1.0.0"
+            }, { capabilities: { tools: {} } });
+
+            await this.#client.connect(transport);
+            this.#updateStatus("✅ MCP Connected");
+        } catch (err) {
+            trace.error("❌ Orchestrator Connection Failed", err);
+            this.#updateStatus("❌ Connection Failed");
+        }
+    }
+
+    /** 메인 실행 함수 */
+    async ask(userInput) {
+        if (!this.#client) {
+            await this.connect(); // 미연결 시 연결 대기
+        }
+
+        try {
+            // 1. 사용자 메시지 UI 전송
+            this.#pushMessage('user', userInput);
+
+            // 2. Maps 데이터 로드
+            const routes = await this.#fetchRoutes();
+
+            // 3. AI 엔진(Brain) 호출
+            const response = await this.#client.callTool({
+                name: "system-brain",
+                arguments: {
+                    user_input: userInput,
+                    routes: routes,
+                    current_path: window.location.pathname // 실시간 경로 주입
+                }
+            });
+
+            // 4. 결과 파싱 및 처리
+            const result = JSON.parse(response.content[0].text);
+            console.log("AI Response:", result);
+
+            // 5. AI 메시지 UI 전송 (DATA_REQUEST 버튼 처리를 위해 result 포함)
+            this.#pushMessage('assistant', result.message, result);
+
+            // 6. 시스템 액션(페이지 이동 등) 수행
+            if (this.#onAction) this.#onAction(result);
+
+            this.#updateStatus("준비 완료");
+
+        } catch (err) {
+            trace.error("❌ Ask Error:", err);
+            this.#pushMessage('assistant', "분석 중 오류가 발생했습니다.");
+            this.#updateStatus("에러 발생");
+        }
+    }
+
+    /** 데이터 수집 (클라이언트 클릭 한방용) */
+    async collect(type) {
+        this.#updateStatus(`${type} 데이터 수집 중...`);
+        // 웹 컴포넌트 환경에서는 전역 객체나 특정 DOM에서 데이터를 긁어옴
+        switch (type) {
+            case 'SOURCE':
+                return window?.nineEditor?.getValue() || "/* 소스를 찾을 수 없습니다 */";
+            case 'DDL':
+                return "/* DDL 정보가 수집되었습니다 */";
+            default:
+                return "";
+        }
+    }
+
+    async #fetchRoutes() {
+        const r = await fetch("/admin/prompts/data/routes.json");
+        return r.ok ? await r.json() : [];
+    }
+
+    #pushMessage(role, content, result = null) {
+        if (this.#onMessage) {
+            this.#onMessage({
+                role,
+                content,
+                intent: result?.intent,
+                required_args: result?.action?.required_args,
+                action: result?.action
+            });
+        }
+    }
+
+    #updateStatus(msg) {
+        if (this.#onStatus) this.#onStatus(msg);
+        trace.log(`[Status]: ${msg}`);
+    }
+}
+
+export default NineChatManager;