[Phase 5] feat(fe): 분석 카드 챗봇 연결 - #48
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe PR wires AI analysis cards (price/safety) into the Vue chatbot end-to-end. The ChangesAnalysis Chat Integration
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)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/src/views/Chatbot.vue (1)
54-88: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winConsider memoizing
analysisMetricEntries(card)to avoid redundant computation.The function is called twice per card (line 77
v-ifcondition and line 79v-forloop), recalculating on every render. For better performance, consider using a computed property or Vue'sv-memodirective 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
computedproperty 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
📒 Files selected for processing (7)
frontend/package.jsonfrontend/pnpm-workspace.yamlfrontend/src/api/chat-normalizer.jsfrontend/src/api/chat.jsfrontend/src/api/chat.test.mjsfrontend/src/store/mapStore.jsfrontend/src/views/Chatbot.vue
💤 Files with no reviewable changes (1)
- frontend/package.json
변경 내용
closes #47
테스트
Summary by CodeRabbit
form-data.