Skip to content

[Phase 5] feat(fe): 분석 카드 챗봇 연결 - #48

Merged
HOKAGO-MEMORIES merged 2 commits into
developfrom
phase/5-frontend-analysis-chat
Jun 23, 2026
Merged

[Phase 5] feat(fe): 분석 카드 챗봇 연결#48
HOKAGO-MEMORIES merged 2 commits into
developfrom
phase/5-frontend-analysis-chat

Conversation

@HOKAGO-MEMORIES

@HOKAGO-MEMORIES HOKAGO-MEMORIES commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

변경 내용

  • 선택된 지도 매물 ID를 chat 요청 payload의 selectedPropertyId로 전달합니다.
  • chat 응답의 analysisCards를 정규화하고 store 메시지에 보관합니다.
  • 챗봇 말풍선 안에 시세/안전 분석 카드를 compact UI로 렌더링합니다.
  • pnpm overrides 설정을 pnpm-workspace.yaml로 옮겨 최신 pnpm에서도 lockfile 검증이 통과하도록 정리했습니다.

closes #47

테스트

  • cd frontend && node --test src/api/chat.test.mjs
  • cd frontend && pnpm test
  • cd frontend && pnpm build
  • git diff --cached --check

Summary by CodeRabbit

  • New Features
    • Added support for analysis cards in chat responses, displaying types, optional scores, summaries, and a metrics grid alongside existing legal information.
    • Enhanced chat messaging to optionally include a selected property ID for more targeted responses.
  • Tests
    • Added test coverage to verify the updated request payload behavior and analysis card mapping.
  • Chores
    • Updated workspace package override configuration related to form-data.

@coderabbitai

coderabbitai Bot commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

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: a5849285-202a-4c8d-a638-ad631fa8d63c

📥 Commits

Reviewing files that changed from the base of the PR and between 228c3fa and 5716627.

📒 Files selected for processing (1)
  • frontend/src/views/Chatbot.vue
🚧 Files skipped from review as they are similar to previous changes (1)
  • frontend/src/views/Chatbot.vue

📝 Walkthrough

Walkthrough

The PR wires AI analysis cards (price/safety) into the Vue chatbot end-to-end. The form-data override is moved from package.json to pnpm-workspace.yaml. chat-normalizer.js gains normalizeAnalysisCard and maps analysisCards in the response. sendChatMessage conditionally includes selectedPropertyId. mapStore propagates selectedPropertyId and stores analysisCards in chat messages. Chatbot.vue renders the new cards with labels, scores, and metric grids.

Changes

Analysis Chat Integration

Layer / File(s) Summary
Move form-data override to workspace config
frontend/package.json, frontend/pnpm-workspace.yaml
Removes pnpm.overrides.form-data from package.json and adds an equivalent overrides block to pnpm-workspace.yaml.
API: analysisCards normalization and selectedPropertyId payload
frontend/src/api/chat-normalizer.js, frontend/src/api/chat.js, frontend/src/api/chat.test.mjs
Adds asObject helper and normalizeAnalysisCard normalizer; extends normalizeChatResponse to include analysisCards; updates sendChatMessage to conditionally append selectedPropertyId to the request payload; adds tests for both behaviors.
mapStore: wire selectedPropertyId and analysisCards
frontend/src/store/mapStore.js
Initial greeting and error bot messages initialize analysisCards: []; sendChat passes selectedPropertyId; successful response handler stores analysisCards from the API result.
Chatbot.vue: render analysis cards
frontend/src/views/Chatbot.vue
Template renders message.analysisCards with type headings, score badges, summaries, and a metrics grid; script adds label/title maps, metric key labels, ordering, formatters, and analysisMetricEntries(card).

Sequence Diagram(s)

sequenceDiagram
  participant Chatbot as Chatbot.vue
  participant mapStore
  participant sendChatMessage as sendChatMessage (chat.js)
  participant normalizeChatResponse as normalizeChatResponse (chat-normalizer.js)
  participant Backend as Backend API

  Chatbot->>mapStore: sendChat(message)
  mapStore->>sendChatMessage: { message, sessionId, selectedPropertyId }
  sendChatMessage->>sendChatMessage: build payload, add selectedPropertyId if non-empty
  sendChatMessage->>Backend: POST /api/chat { message, sessionId, selectedPropertyId? }
  Backend-->>sendChatMessage: { legalCards, analysisCards, ... }
  sendChatMessage->>normalizeChatResponse: raw data
  normalizeChatResponse-->>sendChatMessage: { legalCards, analysisCards: [{ type, title, summary, score, metrics }] }
  sendChatMessage-->>mapStore: normalized result
  mapStore->>mapStore: push bot message with legalCards + analysisCards
  mapStore-->>Chatbot: chatMessages updated
  Chatbot->>Chatbot: render analysisCards (type label, score badge, metrics grid)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • ssafy-salman/salmanhae#27: Established the initial chat API/normalizer/store/UI wiring that this PR extends with selectedPropertyId and analysisCards.
  • ssafy-salman/salmanhae#37: Added backend contract changes for analysisCards and selected-property chat intents that the frontend in this PR consumes.

Poem

🐇 Hop hop, the cards arrive,
Price and safety, now alive!
analysisCards flow down the wire,
Score badges glow, metrics aspire.
The chatbot blooms with every run—
This rabbit's work is never done! 🥕

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title '[Phase 5] feat(fe): 분석 카드 챗봇 연결' clearly describes the main change: connecting analysis cards to the chatbot interface, which aligns with the primary objective of the PR.
Description check ✅ Passed The description covers all required sections with concrete details: 변경 내용 lists implementation specifics, 연결 이슈 references #47, and 테스트 shows completed verification tasks.
Linked Issues check ✅ Passed All four objectives from issue #47 are met: selectedPropertyId passed to chat API, analysisCards normalized and stored, analysis cards rendered in chatbot UI, and frontend validation completed.
Out of Scope Changes check ✅ Passed All code changes directly relate to issue #47 scope: API payload/response handling, store updates, and UI rendering of analysis cards, plus the pnpm configuration migration supporting these changes.
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 unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch phase/5-frontend-analysis-chat

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
frontend/src/views/Chatbot.vue (1)

54-88: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Consider memoizing analysisMetricEntries(card) to avoid redundant computation.

The function is called twice per card (line 77 v-if condition and line 79 v-for loop), recalculating on every render. For better performance, consider using a computed property or Vue's v-memo directive to cache the result per card.

♻️ Example refactor using a local `ref` or computed helper

One approach is to compute metrics once per card using a helper that caches results:

 <div v-if="message.analysisCards?.length" class="mt-3 space-y-2">
   <article
     v-for="card in message.analysisCards"
     :key="`${card.type}-${card.title}`"
     class="rounded-lg border border-slate-200 bg-white p-3 text-slate-800"
   >
+    <template v-memo="[card.type, card.metrics]">
     ...
-    <dl v-if="analysisMetricEntries(card).length" class="mt-3 grid grid-cols-2 gap-2">
+    <dl v-if="cardMetrics.length" class="mt-3 grid grid-cols-2 gap-2">
       <div
-        v-for="metric in analysisMetricEntries(card)"
+        v-for="metric in cardMetrics"
         ...
+    </template>
   </article>
 </div>

Alternatively, compute a map of card → metrics in a top-level computed property if the message list is stable.

🤖 Prompt for 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.

In `@frontend/src/views/Chatbot.vue` around lines 54 - 88, The
analysisMetricEntries function is being called twice for each card in the
analysis cards loop - once in the v-if condition to check if there are metrics
and again in the v-for loop to iterate over them, causing redundant computation
on every render. To fix this, memoize the result by either creating a computed
property that returns a map of card to its metrics entries, or use Vue's v-memo
directive to cache the result per card, then update both the v-if condition and
v-for loop to reference this cached result instead of calling the function
twice.
🤖 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.

Nitpick comments:
In `@frontend/src/views/Chatbot.vue`:
- Around line 54-88: The analysisMetricEntries function is being called twice
for each card in the analysis cards loop - once in the v-if condition to check
if there are metrics and again in the v-for loop to iterate over them, causing
redundant computation on every render. To fix this, memoize the result by either
creating a computed property that returns a map of card to its metrics entries,
or use Vue's v-memo directive to cache the result per card, then update both the
v-if condition and v-for loop to reference this cached result instead of calling
the function twice.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 803b63bf-3c85-49f7-95c9-96c04efdf272

📥 Commits

Reviewing files that changed from the base of the PR and between 7255f39 and 228c3fa.

📒 Files selected for processing (7)
  • frontend/package.json
  • frontend/pnpm-workspace.yaml
  • frontend/src/api/chat-normalizer.js
  • frontend/src/api/chat.js
  • frontend/src/api/chat.test.mjs
  • frontend/src/store/mapStore.js
  • frontend/src/views/Chatbot.vue
💤 Files with no reviewable changes (1)
  • frontend/package.json

@HOKAGO-MEMORIES
HOKAGO-MEMORIES merged commit cfe1462 into develop Jun 23, 2026
1 check passed
@HOKAGO-MEMORIES
HOKAGO-MEMORIES deleted the phase/5-frontend-analysis-chat branch June 25, 2026 07:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Phase 5] frontend-analysis-chat

1 participant