@logan-jun/cd1-rag-chat 0.1.0 → 0.2.0

package/README.md

@@ -1,25 +1,92 @@
 # @logan-jun/cd1-rag-chat
 
-폐쇄망 Vue 2.7 + Vuetify 호스트에 iframe 격리로 통합되는 **BDP Agent (RAG 챗봇)** 모듈.
+폐쇄망 호스트에 iframe 으로 임베드하는 **BDP Agent (RAG 챗봇)** UI 모듈.
 
-cd1-agent 의 `/agents/hdsp_rag/chat/stream` SSE 엔드포인트를 호출해 사내 가이드·테이블 메타데이터를 RAG 검색하고 답변을 스트리밍합니다. 현 버전은 **mockup 모드**(`VITE_USE_MOCK=true` 기본)로 백엔드 없이도 UI 검증이 가능합니다.
+cd1-agent 의 `/agents/hdsp_rag/chat/stream` SSE 엔드포인트를 호출해 답변을 스트리밍합니다. 현 버전은 **mockup 모드** (백엔드 없이도 동작) 입니다.
 
-## 호스트 통합 (한 줄)
+## 패키지 내용
+
+| 파일 | 용도 |
+|---|---|
+| `dist/index.html`, `dist/assets/*` | iframe 으로 로드되는 빌드된 정적 자산 |
+| `host-integration/RemoteModule.vue` | 호스트(Vue 2.7)에서 iframe + postMessage(토큰/높이) 처리하는 래퍼 컴포넌트 (선택) |
+
+라우트/메뉴 정의는 호스트 코드에서 직접 합니다.
+
+## 호스트 통합
 
-호스트 프로젝트 `package.json` 에 dep 한 줄만 추가하면 자동 등록 스크립트(`scripts/sync-modules.cjs`)가 라우트/메뉴를 알아서 잡습니다:
+### 1) 정적 자산 배포
+`dist/*` 를 호스트 정적 서버 경로에 풀어둡니다. 권장 경로: `/embedded/rag-chat/`.
 
-```json
-"@logan-jun/cd1-rag-chat": "file:./vendor/cd1-rag-chat-0.1.0.tgz"
+`scripts/sync-modules.cjs` (이미 셋업된 자동 동기화 스크립트) 사용 시 `npm install` + `npm run build` 만 하면 자동으로 `node_modules/@logan-jun/cd1-rag-chat/dist/*` → `public/embedded/rag-chat/` 복사됩니다.
+
+### 2) 라우트 (호스트에서 직접 작성)
+
+```ts
+// router/index.ts
+const routes: RouteConfig[] = [
+  // ...
+  {
+    path: '/agents',
+    component: () => import('@/components/Layout/default/Default.vue'),
+    children: [
+      {
+        path: '/agents/rag-chat',
+        name: 'agents-rag-chat',
+        component: () => import('@/views/embedded/BdpAgent.vue'),
+      },
+    ],
+  },
+]
 ```
 
-세부 통합 절차는 동일 패키지 시리즈인 `@logan-jun/cd1-sample-feature` 의 `host-integration/host-tools/INTEGRATION.md` 참고.
+### 3) iframe 페이지 컴포넌트 (호스트에서 직접 작성)
 
-## 동작
-- URL: `/agents/rag-chat`
-- 정적 자산: `/embedded/rag-chat/index.html`
-- 메뉴 항목: `BDP Agent`
+**옵션 A (가장 단순)** — 토큰 전달 불필요한 경우:
+```vue
+<!-- src/views/embedded/BdpAgent.vue -->
+<template>
+  <iframe
+    src="/embedded/rag-chat/index.html"
+    style="width: 100%; height: calc(100vh - 64px); border: 0; display: block;"
+  />
+</template>
+```
 
-## 패키지 내용
-- `dist/` — iframe 으로 로드되는 빌드된 정적 자산 (Vue 2.7 + Vite)
-- `host-integration/RemoteModule.vue` — 호스트(Vue 2.7) iframe 래퍼
-- `host-integration/route.ts` — Vue Router 자동 등록 정의
+**옵션 B** — 토큰 전달/높이 동기화 등이 필요한 경우, 패키지의 `RemoteModule.vue` 활용:
+```vue
+<template>
+  <RemoteModule
+    src="/embedded/rag-chat/index.html"
+    :token="$store.state.auth.token"
+    :base-url="apiBase"
+    @request-token="$store.dispatch('auth/refresh')"
+  />
+</template>
+
+<script lang="ts">
+import RemoteModule from '@logan-jun/cd1-rag-chat/host-integration/RemoteModule.vue'
+// ...
+</script>
+```
+
+### 4) 메뉴 (호스트에서 직접 작성)
+```vue
+<v-list-item :to="{ name: 'agents-rag-chat' }">
+  <v-list-item-icon><v-icon>mdi-message-text</v-icon></v-list-item-icon>
+  <v-list-item-content>
+    <v-list-item-title>BDP Agent</v-list-item-title>
+  </v-list-item-content>
+</v-list-item>
+```
+
+## 업데이트 흐름
+
+```bash
+# .tgz 교체 + dep 한 줄만 수정
+mv ~/Downloads/cd1-rag-chat-X.Y.Z.tgz vendor/
+# package.json 의 "file:./vendor/..." 경로 새 버전으로
+npm install && npm run build
+```
+
+호스트의 router/메뉴 코드는 그대로. 자산 경로(`/embedded/rag-chat/`)만 유지되면 됨.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logan-jun/cd1-rag-chat",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "CD1 Agent - RAG 검색 챗봇 모듈 (iframe 격리, Vue 2.7).",
   "license": "MIT",
   "author": "logan-jun",

package/host-integration/route.ts

@@ -1,80 +0,0 @@
-/**
- * 호스트 (Vue 2.7 + Vuetify) 자동 등록용 라우트/메뉴 정의.
- *
- * 호스트에서:
- *   import ragChat from '@logan-jun/cd1-rag-chat/host-integration/route'
- *   router.addRoute(ragChat.route)
- *   menu.push(ragChat.menu)
- *
- * 또는 자동 수집 패턴(scripts/sync-modules.cjs 생성 파일)로 일괄 등록.
- */
-
-import type { RouteConfig } from 'vue-router'
-import RemoteModule from './RemoteModule.vue'
-
-// 정적 자산 위치 (호스트 nginx/public 경로)
-const ASSETS_PATH = '/embedded/rag-chat/index.html'
-
-// 사용자가 보는 URL prefix (Vue Router path)
-const ROUTE_PREFIX = '/agents/rag-chat'
-
-export const route: RouteConfig = {
-  path: `${ROUTE_PREFIX}/:pathMatch(.*)*`,
-  name: 'agents-rag-chat',
-  component: {
-    name: 'RagChatHost',
-    components: { RemoteModule },
-    computed: {
-      token(): string {
-        const s: any = (this as any).$store
-        return s?.state?.auth?.token ?? ''
-      },
-      user(): Record<string, unknown> | null {
-        const s: any = (this as any).$store
-        return s?.state?.auth?.user ?? null
-      },
-      apiBase(): string {
-        return window.location.origin
-      },
-    },
-    methods: {
-      async onTokenRequest(): Promise<void> {
-        const s: any = (this as any).$store
-        try {
-          await s?.dispatch('auth/refresh')
-        } catch {
-          /* host store가 다른 경로면 호스트 측에서 직접 와이어링 권장 */
-        }
-      },
-    },
-    render(h: any) {
-      return h(
-        'div',
-        { style: { height: 'calc(100vh - 64px)', margin: 0, padding: 0 } },
-        [
-          h(RemoteModule, {
-            props: {
-              src: ASSETS_PATH,
-              token: (this as any).token,
-              baseUrl: (this as any).apiBase,
-              user: (this as any).user,
-              syncRoutePrefix: ROUTE_PREFIX,
-            },
-            on: {
-              'request-token': (this as any).onTokenRequest,
-            },
-          }),
-        ],
-      )
-    },
-  },
-}
-
-export const menu = {
-  title: 'BDP Agent',
-  icon: 'mdi-message-text',
-  to: { name: 'agents-rag-chat' },
-  order: 50,
-}
-
-export default { route, menu }