[Phase 6] feat(fe): 법률 RAG 챗봇 화면 연결

[HOKAGO-MEMORIES]

변경 내용

• Spring Boot /api/v1/chat 호출용 frontend chat API client를 추가했습니다.
• localStorage accessToken을 Axios Authorization 헤더에 연결했습니다.
• Pinia store에 chat 메시지, loading, error, session 상태를 추가했습니다.
• Chatbot 화면에서 법률 RAG 답변과 legalCards를 렌더링하도록 연결했습니다.
• frontend Node 내장 테스트 스크립트와 응답 정규화 테스트를 추가했습니다.

연결 이슈

closes #26

테스트

• cd frontend && npm.cmd test
• cd frontend && npm.cmd run build
• git diff --check

참고

• 로컬 세션에서 pnpm이 PATH에 없어 npm.cmd로 검증했습니다.
• 일반 sandbox 빌드에서 node_modules 파일 EPERM이 발생해 최종 build는 권한 상승으로 재검증했습니다.

Summary by CodeRabbit

• New Features

  • Added API-backed chatbot messaging with session handling and normalized responses (defaulting missing optional fields like properties/legal cards).
  • Updated the shared HTTP client to attach JWT access tokens to requests and to use a safe base-URL fallback.
  • Redesigned the chat UI to render conversation bubbles, show loading/error states, and display attached legal reference cards with optional score.

• Tests

  • Added automated tests for chat response normalization and a test npm script to run them.

• Chores

  • Updated frontend tooling versions/config to support the new setup.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 90735c83-5255-4d0e-9f3b-d5903dc52a20

📥 Commits

Reviewing files that changed from the base of the PR and between 833bcd7 and a439de5.

📒 Files selected for processing (1)

• frontend/src/api/http.js

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/api/http.js

---

📝 Walkthrough

Walkthrough

Phase 6 of the AI legal RAG frontend: a chat-normalizer.js module with tests normalizes the /api/v1/chat response shape; the Axios HTTP client gains a JWT Bearer interceptor; a chat.js API module POSTs messages; mapStore.js gains chat state and a sequenced async sendChat action; and Chatbot.vue is redesigned to render bot replies with legal reference cards.

Changes

Frontend Legal Chat Integration

Layer / File(s)	Summary
Chat response normalizer, tests, and build setup frontend/src/api/chat-normalizer.js, frontend/src/api/chat.test.mjs, frontend/package.json	Introduces normalizeChatResponse with asArray and normalizeLegalCard helpers enforcing default field values and numeric-only score retention; adds a node:test suite covering legal-card shape and missing-field defaults; wires the test npm script and updates vite to ^6.4.3 with pnpm.overrides forcing form-data to 4.0.6.
Axios base URL and JWT Bearer interceptor frontend/src/api/http.js	Updates defensive import.meta.env base URL initialization and adds a request interceptor that reads an access token from localStorage under two key names and injects a Bearer Authorization header.
Chat API module frontend/src/api/chat.js	Creates sendChatMessage which trims/validates the message, POSTs to /api/v1/chat with sessionId, pipes response.data through normalizeChatResponse, and re-exports normalizeChatResponse.
Pinia chat state and sendChat action frontend/src/store/mapStore.js	Extends store state with isChatLoading, chatError, chatSessionId, chatMessages (seeded bot prompt), and chatRequestSeq; adds async sendChat(message) with input validation, optimistic user-message append, API call, out-of-order guard via chatRequestSeq, session/bot-response update, and error-message append.
Chatbot.vue redesign and phase spec frontend/src/views/Chatbot.vue, phases/ai-legal-rag/phase6-frontend-legal-chat.md	Replaces the compact card template with distinct user/bot bubble styling, a bot title line, legalCards rendering with optional score percentage, and a store.isChatLoading indicator; rewrites send to await store.sendChat with pre/post scrollToBottom calls; adds the Phase 6 spec document.

Sequence Diagram

sequenceDiagram
  actor User
  participant Chatbot.vue
  participant mapStore
  participant http.js
  participant SpringBoot as Spring Boot /api/v1/chat

  User->>Chatbot.vue: types message, clicks send
  Chatbot.vue->>mapStore: await sendChat(message)
  mapStore->>mapStore: append user bubble, set isChatLoading
  mapStore->>http.js: POST /api/v1/chat { message, sessionId }
  http.js->>http.js: attach Bearer token from localStorage
  http.js->>SpringBoot: POST /api/v1/chat
  SpringBoot-->>http.js: { intent, message, sessionId, legalCards, properties }
  http.js-->>mapStore: normalizeChatResponse(response.data)
  mapStore->>mapStore: update chatSessionId, append bot bubble with legalCards
  mapStore-->>Chatbot.vue: isChatLoading = false
  Chatbot.vue->>Chatbot.vue: scrollToBottom()

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• ssafy-salman/salmanhae#17: The backend /api/v1/chat DTO contract (lawName, articleNo, title, content, score fields) defined in that PR is the exact shape normalizeChatResponse and normalizeLegalCard are designed to consume.

Poem

🐰 Hop hop, the chatbot speaks!
With legal cards and JWT sneaks,
The normalizer trims each reply,
Bot bubbles float as messages fly,
From Spring Boot's halls to Vue's display —
The rabbit coded law today! ⚖️✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: connecting a legal RAG chatbot frontend screen as Phase 6 feature implementation.
Description check	✅ Passed	The description covers all required template sections with detailed implementation details, linked issues, testing instructions, and contextual notes.
Linked Issues check	✅ Passed	All coding requirements from issue #26 are met: chat API client with response normalization, JWT Authorization integration, Pinia store state management, legal card rendering, and test/build validation.
Out of Scope Changes check	✅ Passed	All changes align with Phase 6 objectives; no out-of-scope modifications detected. Package.json updates support the implementation and testing framework.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch phase/6-frontend-legal-chat

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/api/http.js`:
- Around line 14-20: The `readAccessToken()` function directly accesses
`window.localStorage` without exception handling, which can throw a
SecurityError in restricted browser contexts (privacy modes, blocked cookies,
etc.) and break the request interceptor. Wrap the entire function body in a
try/catch block to gracefully handle these exceptions and return an empty string
as a fallback when storage access fails.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 7c59d94a-7619-4eef-aa67-3010f9d3b0bc

📥 Commits

Reviewing files that changed from the base of the PR and between f504ee0 and 7dc4d1a.

📒 Files selected for processing (8)

• frontend/package.json
• frontend/src/api/chat-normalizer.js
• frontend/src/api/chat.js
• frontend/src/api/chat.test.mjs
• frontend/src/api/http.js
• frontend/src/store/mapStore.js
• frontend/src/views/Chatbot.vue
• phases/ai-legal-rag/phase6-frontend-legal-chat.md