@things-factory/board-ui 10.0.0-beta.64 → 10.0.0-beta.65

package/dist-client/pages/board-modeller-page.js

@@ -7,17 +7,20 @@ import gql from 'graphql-tag';
 import { css, html, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { BoardModeller } from '@operato/board/ox-board-modeller.js';
-import { LoadTracker } from '@hatiolab/things-scene';
+import { LoadTracker, SceneSearchEngine } from '@hatiolab/things-scene';
 import { OxPropertyEditor } from '@operato/property-editor';
 import { PageView, FontController } from '@operato/shell';
 import { hasPrivilege } from '@things-factory/auth-base/dist-client/index.js';
-import { applyBoardEditPatchVerbose, mergeComponent } from '@things-factory/board-ai';
+import { applyBoardEditPatchVerbose } from '@things-factory/board-ai';
 import { client, gqlContext } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { provider } from '../board-provider.js';
 import components from './things-scene-components-with-tools.import';
 import { notify, notifyError } from '../utils/notify-helper.js';
+import { findSceneComponent, dispatchBoardAction } from './board-action-dispatch.js';
+import { dispatchBoardEditOp } from './board-edit-dispatch.js';
+export { findSceneComponent };
 const NOOP = () => { };
 /** 서버 PatchEntry.reverted=true 플래그 영속용 mutation. */
 const REVERT_PATCH_MUTATION = gql `
@@ -25,27 +28,6 @@ const REVERT_PATCH_MUTATION = gql `
     revertPatch(patchId: $patchId)
   }
 `;
-/**
- * AI 의 BoardEditOp 가 지정한 대상 (id 또는 refid) 으로 things-scene component 검색.
- *
- * id (사용자/AI 가 명시적으로 설정한 string identifier) 와
- * refid (things-scene 이 모든 컴포넌트에 자동 발급하는 numeric identifier) 는
- * 서로 별개 개념이고 AI 도 둘을 구별해서 보낸다 — 이 함수는 호스트 측에서 둘 중
- * 어느 쪽으로든 lookup 가능하게 통합. refid 가 universal 이므로 우선.
- */
-export function findSceneComponent(scene, target) {
-    if (!scene)
-        return null;
-    if (typeof target.refid === 'number') {
-        const byRefid = scene.rootContainer?.refidIndexMap?.get(target.refid);
-        if (byRefid)
-            return byRefid;
-    }
-    if (typeof target.id === 'string' && target.id.length > 0) {
-        return scene.findById?.(target.id) ?? null;
-    }
-    return null;
-}
 /**
  * default 위에 override 를 깊게 merge.
  * - override 의 키 값이 undefined 가 아닌 경우 우선 적용
@@ -90,6 +72,8 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
         this.overlay = null;
         this.scene = null;
         this.componentGroupList = BoardModeller.groups;
+        /** 보드의 모든 ChatSession (탭으로 표시). */
+        this.chatSessions = [];
         /** AI 채팅 패널 열림 상태 (기본 닫힘) */
         this.aiPanelOpen = false;
         /**
@@ -102,6 +86,108 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
         this.patchInverses = new Map();
         this.board = null;
         this._fontCtrl = new FontController(this);
+        /** `@` mention popup 의 도메인 사용자 후보 — chat 의 userProvider prop 으로 wire.
+         *  query 변할 때마다 호출되므로 server query (`domainUsersForMention`) 를 그대로 위임. */
+        this.fetchDomainUsersForMention = async (query) => {
+            try {
+                const result = await client.query({
+                    query: gql `
+          query DomainUsersForMention($query: String, $limit: Int) {
+            domainUsersForMention(query: $query, limit: $limit) {
+              id
+              name
+              email
+            }
+          }
+        `,
+                    variables: { query: query || null, limit: 50 },
+                    context: gqlContext(),
+                    fetchPolicy: 'cache-first'
+                });
+                return result.data?.domainUsersForMention ?? [];
+            }
+            catch (ex) {
+                // 조용히 — chat panel 이 빈 결과로 처리
+                console.warn('[board-modeller-page] fetchDomainUsersForMention failed:', ex);
+                return [];
+            }
+        };
+        /** 채팅 패널의 탭 클릭 — 활성 세션 전환. */
+        this.onChatSessionSwitch = (e) => {
+            const newId = e.detail?.sessionId;
+            if (typeof newId === 'string' && newId !== this.chatSessionId) {
+                this.chatSessionId = newId;
+            }
+        };
+        /** 채팅 패널의 "+" 버튼 — 새 세션 생성 후 활성으로 전환. */
+        this.onChatSessionCreate = async () => {
+            if (!this.boardId)
+                return;
+            try {
+                const created = await client.mutate({
+                    mutation: gql `
+          mutation CreateChatSession($boardId: String!, $name: String) {
+            createChatSession(boardId: $boardId, name: $name) {
+              id
+              name
+              createdAt
+            }
+          }
+        `,
+                    variables: { boardId: this.boardId, name: null },
+                    context: gqlContext()
+                });
+                const s = created.data?.createChatSession;
+                if (s) {
+                    this.chatSessions = [...this.chatSessions, s];
+                    this.chatSessionId = s.id;
+                }
+            }
+            catch (ex) {
+                notifyError(ex);
+            }
+        };
+        /**
+         * AI 채팅 mention popup (`#`) 검색 위임 — things-scene SceneSearchEngine 으로 wrap.
+         *
+         * F-key Finder 와 동일한 검색 룰 (id → name → tag → type → class → text → data → property)
+         * 을 그대로 mention popup 에 재사용. 컴포넌트 트리를 직접 순회하므로 model JSON 으로
+         * 변환할 필요 없음 — 일관성 + 성능 이점.
+         *
+         * 반환 구조 (FilterResult) 는 chat 의 mention-popup 표시 모델. host 는 things-scene
+         * Component 에서 refid/id/type/tag/class/text 를 뽑아 candidate 로 채워 넘긴다.
+         */
+        this.searchSceneForMention = (() => {
+            const engine = new SceneSearchEngine();
+            return (query) => {
+                const root = this.scene?.root;
+                if (!root)
+                    return [];
+                const results = engine.search(root, query);
+                return results.map(r => {
+                    const c = r.component;
+                    const refid = typeof c.get === 'function' ? c.get('refid') : undefined;
+                    const id = typeof c.get === 'function' ? c.get('id') : undefined;
+                    const type = typeof c.get === 'function' ? c.get('type') : undefined;
+                    const tag = typeof c.get === 'function' ? c.get('tag') : undefined;
+                    const cls = typeof c.get === 'function' ? c.get('class') : undefined;
+                    const text = typeof c.get === 'function' ? c.get('text') : undefined;
+                    return {
+                        candidate: {
+                            refid: typeof refid === 'number' ? refid : undefined,
+                            label: id || type || 'unknown',
+                            type: typeof type === 'string' ? type : 'unknown',
+                            id: typeof id === 'string' && id ? id : undefined,
+                            tag: typeof tag === 'string' && tag ? tag : undefined,
+                            class: typeof cls === 'string' && cls ? cls : undefined,
+                            text: typeof text === 'string' && text ? text : undefined
+                        },
+                        matchType: r.matchType,
+                        matchValue: r.matchValue
+                    };
+                });
+            };
+        })();
         /**
          * 채팅에서 patch 도착 — things-scene 에 in-place 적용.
          *
@@ -128,84 +214,18 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
                 return;
             }
             try {
-                const applied = [];
                 const missed = [];
-                // 각 op 의 inverse — patch 적용 직전/직후 scene 상태 기준으로 계산해 누적.
-                // 나중에 onBoardEditRevert 가 역순 in-place 적용으로 복원.
+                // 각 op 의 inverse — dispatcher 가 적용 직전/직후 scene 상태로 계산해 반환.
+                // 누적했다가 onBoardEditRevert 가 역순 in-place 적용으로 복원.
                 const inverseOps = [];
+                const normalize = (c) => this.normalizeComponent(c);
                 for (const op of patch.ops) {
-                    switch (op.op) {
-                        case 'add': {
-                            // normalize → things-scene 의 default 와 merge (gauge.value 등 누락 보강)
-                            const normalized = this.normalizeComponent(op.component);
-                            // add 의 inverse 는 새로 발급되는 refid 를 알아야 함 — scene.add 직후
-                            // 새 컴포넌트의 refid 를 캡처해 remove inverse 생성.
-                            const prevRefids = new Set(this.collectAllRefids(scene));
-                            // scene.add 는 내부적으로 CommandMigrate 를 commander 에 execute → 자동 snapshot
-                            // 두 번째 인자는 boundsOrOffset — 빈 객체면 model 자체의 좌표 그대로 사용.
-                            scene.add(normalized, {});
-                            // 새로 발급된 refid 식별
-                            const newRefids = this.collectAllRefids(scene).filter(r => !prevRefids.has(r));
-                            for (const refid of newRefids) {
-                                inverseOps.push({ op: 'remove', refid });
-                            }
-                            applied.push(op);
-                            break;
-                        }
-                        case 'remove': {
-                            const target = findSceneComponent(scene, { refid: op.refid });
-                            if (!target || !target.parent) {
-                                missed.push(op);
-                                break;
-                            }
-                            // 삭제 직전 model 캡처 → inverse 는 add(savedModel)
-                            const savedModel = JSON.parse(JSON.stringify(target.model));
-                            // scene.remove() 는 selected 를 사용하므로 일시적으로 대상으로 set.
-                            const prevSelected = scene.selected ?? [];
-                            scene.selected = [target];
-                            scene.remove(); // CommandMigrate 통한 정상 경로 → snapshot 자동
-                            // 선택 복원 — 삭제 대상은 제외
-                            scene.selected = prevSelected.filter((c) => c !== target);
-                            inverseOps.push({ op: 'add', component: savedModel });
-                            applied.push(op);
-                            break;
-                        }
-                        case 'modify': {
-                            const target = findSceneComponent(scene, { refid: op.refid });
-                            if (!target) {
-                                missed.push(op);
-                                break;
-                            }
-                            // 변경 전 patch 가 건드린 키만 보관 — inverse 는 같은 키들을 원본 값으로 modify
-                            const oldValues = this.captureOldKeys(target.model, op.patch);
-                            // op.patch 의 nested 값 보존 위해 model 위에 deep-merge (apply-patch 와 동일 정책)
-                            const merged = mergeComponent(target.model, op.patch);
-                            target.set(merged);
-                            // change 는 자동 snapshot 하지 않으므로 commander.execute 호출 → snapshot push
-                            scene.commander?.execute(null, false);
-                            inverseOps.push({ op: 'modify', refid: op.refid, patch: oldValues });
-                            applied.push(op);
-                            break;
-                        }
-                        case 'modifyBoard': {
-                            // 보드 root 속성 (fillStyle / width / height / name 등) 변경.
-                            // scene.root 는 model_layer — 보드 JSON 의 최상위. 자식 components 와 별개.
-                            const root = scene.root;
-                            if (!root || typeof root.set !== 'function') {
-                                missed.push(op);
-                                break;
-                            }
-                            const cleanPatch = { ...(op.patch || {}) };
-                            delete cleanPatch.components; // 자식 변경은 별도 op
-                            const oldValues = this.captureOldKeys(root.model, cleanPatch);
-                            const merged = mergeComponent(root.model, cleanPatch);
-                            root.set(merged);
-                            scene.commander?.execute(null, false);
-                            inverseOps.push({ op: 'modifyBoard', patch: oldValues });
-                            applied.push(op);
-                            break;
-                        }
-                        // 'replace' 는 위에서 분기됨 — 여기 도달 안 함
+                    const r = dispatchBoardEditOp(scene, op, { normalize });
+                    if (r.applied) {
+                        inverseOps.push(...r.inverseOps);
+                    }
+                    else {
+                        missed.push(op);
                     }
                 }
                 // patch 단위로 inverse 보관 — Revert 시 역순 적용
@@ -276,6 +296,34 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
                 notifyError(ex);
             }
         };
+        /**
+         * AI 가 ephemeral scene action (selection / view / mode) 을 실행하라고 요청.
+         *
+         * board-edit-patch 와 별개 채널 — 모델 변경 X, undo 영향 X, dirty flag 무관.
+         * things-scene API 직접 호출. 잘못된 action / 누락된 컴포넌트는 console.warn 만.
+         */
+        this.onBoardActionExecute = (e) => {
+            const { actions } = e.detail || {};
+            if (!Array.isArray(actions) || actions.length === 0)
+                return;
+            const scene = this.scene;
+            if (!scene)
+                return;
+            let modeChanged = false;
+            for (const action of actions) {
+                try {
+                    dispatchBoardAction(scene, action);
+                    if (action?.action === 'setSceneMode')
+                        modeChanged = true;
+                }
+                catch (ex) {
+                    console.warn('[board-modeller] action execute failed:', action, ex?.message ?? ex);
+                }
+            }
+            // setSceneMode 가 있었으면 page 의 reactive mode 도 동기 (Lit re-render 트리거)
+            if (modeChanged)
+                this.mode = scene.mode;
+        };
         components.forEach(({ templates = [], groups = [] }) => {
             groups.forEach(group => BoardModeller.registerGroup(group));
             BoardModeller.registerTemplate(templates);
@@ -335,7 +383,7 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
       .ai-toggle.open:hover { background: #334155; }
 
       .ai-panel {
-        flex: 0 0 380px;
+        flex: 0 0 320px;
         display: flex;
         border-left: 1px solid #e2e8f0;
         background: #ffffff;
@@ -515,8 +563,14 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
             this.model = {
                 ...this.board.model
             };
-            // AI 협력 세션 — 패널이 열릴 때 lazy 로드 (보드 단순 열기로는 세션 자동 생성 X)
+            // AI 협력 세션 — 보드 전환 시 이전 보드의 세션 / 세션 리스트 정리 (chat panel 의
+            // sessionId/sessions 변화 감지 → history 비우고 새로 로드). 패널 열린 채 보드 옮겼다면
+            // 새 보드의 세션 리스트를 즉시 ensure (fire-and-forget — 에러는 ensureChatSession 처리).
             this.chatSessionId = undefined;
+            this.chatSessions = [];
+            if (this.aiPanelOpen && this.boardId) {
+                this.ensureChatSession();
+            }
         }
         catch (ex) {
             notifyError(ex);
@@ -526,43 +580,61 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
             this.updateContext();
         }
     }
-    /** 패널 토글 시 호출 — 열 때만 chatSession 보장 */
+    /** 패널 토글 시 호출 — 열 때만 chatSession 보장 (세션 리스트 로드 + 활성 세션 결정) */
     async toggleAIPanel() {
         const willOpen = !this.aiPanelOpen;
-        if (willOpen && this.boardId && !this.chatSessionId) {
+        if (willOpen && this.boardId) {
             await this.ensureChatSession();
         }
         this.aiPanelOpen = willOpen;
     }
-    /** boardId 로 ChatSession 조회 또는 생성 (idempotent). */
+    /** 보드의 모든 ChatSession 목록을 로드 + 활성 세션 보장.
+     *  - 세션이 0 개면 startBoardAISession 으로 첫 세션 생성 (단일 세션 UX 호환)
+     *  - 활성 세션 미설정 시 첫 번째 세션을 활성으로
+     *  - 이미 활성 세션 set 돼있고 list 에 포함되면 유지 */
     async ensureChatSession() {
-        if (!this.boardId || this.chatSessionId)
+        if (!this.boardId)
             return;
         try {
-            const found = await client.query({
+            const result = await client.query({
                 query: gql `
-          query ChatSessionByBoard($boardId: String!) {
-            chatSessionByBoard(boardId: $boardId) { id }
+          query ChatSessionsByBoard($boardId: String!) {
+            chatSessionsByBoard(boardId: $boardId) {
+              id
+              name
+              createdAt
+            }
           }
         `,
                 variables: { boardId: this.boardId },
                 context: gqlContext(),
                 fetchPolicy: 'network-only'
             });
-            if (found.data?.chatSessionByBoard?.id) {
-                this.chatSessionId = found.data.chatSessionByBoard.id;
-                return;
+            let sessions = result.data?.chatSessionsByBoard ?? [];
+            if (sessions.length === 0) {
+                // 첫 세션 ensure (idempotent)
+                const created = await client.mutate({
+                    mutation: gql `
+            mutation StartBoardAISession($boardId: String!) {
+              startBoardAISession(boardId: $boardId) {
+                id
+                name
+                createdAt
+              }
+            }
+          `,
+                    variables: { boardId: this.boardId },
+                    context: gqlContext()
+                });
+                const s = created.data?.startBoardAISession;
+                if (s)
+                    sessions = [s];
+            }
+            this.chatSessions = sessions;
+            // 활성 세션 결정 — 기존 active 가 list 에 있으면 유지, 아니면 첫 번째
+            if (!this.chatSessionId || !sessions.some(s => s.id === this.chatSessionId)) {
+                this.chatSessionId = sessions[0]?.id;
             }
-            const created = await client.mutate({
-                mutation: gql `
-          mutation StartBoardAISession($boardId: String!) {
-            startBoardAISession(boardId: $boardId) { id }
-          }
-        `,
-                variables: { boardId: this.boardId },
-                context: gqlContext()
-            });
-            this.chatSessionId = created.data?.startBoardAISession?.id;
         }
         catch (ex) {
             notifyError(ex);
@@ -639,76 +711,14 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
             notifyError(ex);
         }
     }
-    /**
-     * scene 의 모든 컴포넌트 refid 수집 — add 의 inverse 계산용.
-     *
-     * scene.add 직전/직후 호출해 차집합으로 새 발급된 refid 식별.
-     */
-    collectAllRefids(scene) {
-        const refids = [];
-        const map = scene?.rootContainer?.refidIndexMap;
-        if (map && typeof map.forEach === 'function') {
-            map.forEach((_, refid) => refids.push(refid));
-        }
-        return refids;
-    }
-    /**
-     * patch 가 변경하려는 키들에 대해 model 의 현재 값을 deep-clone 으로 캡처.
-     * inverse modify / modifyBoard op 의 patch 로 사용.
-     */
-    captureOldKeys(model, patch) {
-        const out = {};
-        for (const k of Object.keys(patch || {})) {
-            const v = model?.[k];
-            out[k] = v === undefined ? null : JSON.parse(JSON.stringify(v));
-        }
-        return out;
-    }
     /**
      * inverse op 시퀀스를 things-scene 위에 in-place 적용 (snapshot/undo 보존).
-     * onBoardEditPatch 의 add/remove/modify/modifyBoard 분기와 동일 패턴이지만
-     * inverse 누적은 하지 않음 (revert 자체가 revert 가능하지 않은 단방향 동작).
+     * dispatcher 재사용 — inverse 누적은 무시 (revert 의 revert 는 redo, 별개 기능).
      */
     applyInverseOpsInPlace(scene, ops) {
+        const normalize = (c) => this.normalizeComponent(c);
         for (const op of ops) {
-            switch (op.op) {
-                case 'add': {
-                    const normalized = this.normalizeComponent(op.component);
-                    scene.add(normalized, {});
-                    break;
-                }
-                case 'remove': {
-                    const target = findSceneComponent(scene, { refid: op.refid });
-                    if (!target || !target.parent)
-                        break;
-                    const prevSelected = scene.selected ?? [];
-                    scene.selected = [target];
-                    scene.remove();
-                    scene.selected = prevSelected.filter((c) => c !== target);
-                    break;
-                }
-                case 'modify': {
-                    const target = findSceneComponent(scene, { refid: op.refid });
-                    if (!target)
-                        break;
-                    const merged = mergeComponent(target.model, op.patch);
-                    target.set(merged);
-                    scene.commander?.execute(null, false);
-                    break;
-                }
-                case 'modifyBoard': {
-                    const root = scene.root;
-                    if (!root || typeof root.set !== 'function')
-                        break;
-                    const cleanPatch = { ...(op.patch || {}) };
-                    delete cleanPatch.components;
-                    const merged = mergeComponent(root.model, cleanPatch);
-                    root.set(merged);
-                    scene.commander?.execute(null, false);
-                    break;
-                }
-                // 'replace' 는 호출자가 wholesale 분기로 보냄
-            }
+            dispatchBoardEditOp(scene, op, { normalize });
         }
     }
     /** 서버 PatchEntry.reverted=true 영속 — fail 해도 UI 는 이미 되돌렸으니 warn 만. */
@@ -824,14 +834,20 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
             <div class="ai-panel">
               <ox-board-ai-chat
                 .sessionId=${this.chatSessionId}
+                .sessions=${this.chatSessions}
                 .currentBoard=${this.model}
                 .boardProvider=${() => this.getLiveBoard()}
+                .searchProvider=${this.searchSceneForMention}
+                .userProvider=${this.fetchDomainUsersForMention}
                 .knownTypes=${this.knownTypes}
                 .categories=${this.knownCategories}
                 .componentSchemas=${this.componentSchemas}
                 .selectedRefids=${this.extractSelectedRefids()}
+                @session-switch=${this.onChatSessionSwitch}
+                @session-create=${this.onChatSessionCreate}
                 @board-edit-patch=${this.onBoardEditPatch}
-                @board-edit-revert=${this.onBoardEditRevert}>
+                @board-edit-revert=${this.onBoardEditRevert}
+                @board-action-execute=${this.onBoardActionExecute}>
               </ox-board-ai-chat>
             </div>
           `
@@ -931,6 +947,10 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], BoardModellerPage.prototype, "chatSessionId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], BoardModellerPage.prototype, "chatSessions", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)