@logan-jun/cd1-rag-chat

@logan-jun/cd1-rag-chat

폐쇄망 호스트에 iframe 으로 임베드하는 BDP Agent (RAG 챗봇) UI 모듈.

cd1-agent 의 /agents/hdsp_rag/chat/stream SSE 엔드포인트를 호출해 답변을 스트리밍합니다. 현 버전은 mockup 모드 (백엔드 없이도 동작) 입니다.

패키지 내용

라우트/메뉴 정의는 호스트 코드에서 직접 합니다.

호스트 통합

1) 정적 자산 배포

dist/* 를 호스트 정적 서버 경로에 풀어둡니다. 권장 경로: /embedded/rag-chat/.

scripts/sync-modules.cjs (이미 셋업된 자동 동기화 스크립트) 사용 시 npm install + npm run build 만 하면 자동으로 node_modules/@logan-jun/cd1-rag-chat/dist/* → public/embedded/rag-chat/ 복사됩니다.

2) 라우트 (호스트에서 직접 작성)

// 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'),
      },
    ],
  },
]

3) iframe 페이지 컴포넌트 (호스트에서 직접 작성)

옵션 A (가장 단순) — 토큰 전달 불필요한 경우:

<!-- 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>

옵션 B — 토큰 전달/높이 동기화 등이 필요한 경우, 패키지의 RemoteModule.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) 메뉴 (호스트에서 직접 작성)

<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>

업데이트 흐름

# .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/)만 유지되면 됨.