feat: ticket message component#172
Conversation
WalkthroughRefactors ticket message rendering by replacing inline logic with three dedicated components for text, image, and file. Adds two new presentational tweaks in item/ticket cards. Updates ticket page header to show localized creation date and adjusts show-more vibration to success. No public API changes beyond new components’ props. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant MV as Message.vue
participant MT as MessageText
participant MI as MessageImage
participant MF as MessageFile
participant DM as DropdownMenu
U->>MV: Open ticket thread
MV->>MV: Compute isText / isImage / isFile
alt Text message
MV->>MT: Render text content
MT-->>U: Text + timestamp
MV->>DM: Show "Copy message"
else Image message
MV->>MI: Render image
MI-->>U: Image + timestamp
MV->>DM: Hide "Copy message"
else File message
MV->>MF: Render file block
MF-->>U: File icon/label + timestamp
MV->>DM: Show "Open" (if fileUrl)
end
U->>DM: Click "Open" (file)
DM->>MV: handleFileClick(fileUrl)
MV-->>U: Opens new tab
sequenceDiagram
autonumber
actor U as User
participant P as Ticket Page
participant VF as Vibrate Feedback
U->>P: Click "Show more"
P->>VF: vibrate('success')
P->>P: shownMessages += 10
P-->>U: More messages rendered
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/atrium-telegram/app/components/ticket/MessageFile.vue (1)
2-2: Consider responsive width constraint.The fixed
w-2/3width may not provide optimal display across all device sizes. Consider using a responsive approach for better mobile experience.- <div class="w-2/3 relative flex flex-col justify-between gap-1.5"> + <div class="w-full max-w-sm relative flex flex-col justify-between gap-1.5">apps/atrium-telegram/app/components/ticket/MessageImage.vue (1)
2-2: Consider responsive width constraint.Similar to MessageFile.vue, the fixed
w-2/3width may not be optimal across all device sizes.- <div v-if="message.fileUrl" class="w-2/3 relative flex flex-col justify-between gap-1.5"> + <div v-if="message.fileUrl" class="w-full max-w-sm relative flex flex-col justify-between gap-1.5">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/atrium-telegram/app/components/flow/ItemCard.vue(1 hunks)apps/atrium-telegram/app/components/ticket/Card.vue(1 hunks)apps/atrium-telegram/app/components/ticket/Message.vue(4 hunks)apps/atrium-telegram/app/components/ticket/MessageFile.vue(1 hunks)apps/atrium-telegram/app/components/ticket/MessageImage.vue(1 hunks)apps/atrium-telegram/app/components/ticket/MessageText.vue(1 hunks)apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (14)
apps/atrium-telegram/app/components/flow/ItemCard.vue (1)
27-27: LGTM: Typography consistency improvement.Adding
text-smto the comments count container aligns typography across ticket components for better visual consistency.apps/atrium-telegram/app/components/ticket/Card.vue (2)
13-13: LGTM: Improved spacing.Adding
mt-6provides better vertical separation between the ticket content and metadata section.
15-15: LGTM: Typography alignment.Adding
text-smto maintain consistent small text sizing with other ticket components.apps/atrium-telegram/app/components/ticket/MessageText.vue (2)
22-24: Props destructuring is correct for Vue 3.5+.Vue's compiler automatically prepends
props.when code in the same<script setup>block accesses variables destructured fromdefineProps, so this destructuring approach will work correctly in Vue 3.5+.
9-11: LGTM: Consistent timestamp formatting.The timestamp formatting uses the same pattern and Russian locale as other ticket components, ensuring visual consistency across the interface.
apps/atrium-telegram/app/components/ticket/MessageFile.vue (1)
27-50: LGTM: Well-structured file type mapping.The
getFileDatafunction provides clear mapping from file types to appropriate icons and Russian labels. The switch statement covers the expected cases with a sensible default fallback.apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue (3)
72-73: LGTM: Date formatting imports.Adding date-fns and Russian locale imports aligns with the broader ticket date formatting improvements across the application.
16-30: LGTM: Enhanced header with creation date.The new header layout provides better information hierarchy by showing message count on the left and creation date on the right. The localized date formatting using
format()with Russian locale is consistent with other components.
94-94: LGTM: Success vibration feedback.Changing the vibration from default to 'success' provides more appropriate haptic feedback when loading additional messages successfully.
apps/atrium-telegram/app/components/ticket/MessageImage.vue (1)
3-7: LGTM: Proper image display with accessibility consideration.The image implementation with
object-containand rounded corners provides good visual presentation. The emptyalt=""is appropriate for decorative images in this context.apps/atrium-telegram/app/components/ticket/Message.vue (4)
60-62: LGTM: Clear message type classification logic.The computed properties provide clear, readable conditions for determining message types based on the presence and type of file attachments.
17-28: LGTM: Clean component composition.The refactor to use dedicated message components (TicketMessageText, TicketMessageImage, TicketMessageFile) improves code organization and maintainability by separating concerns for different message types.
66-73: LGTM: Improved dropdown menu logic.The dropdown menu conditions now correctly use the computed message type helpers and the new
handleFileClickfunction, making the logic more maintainable.
117-122: LGTM: Safe file URL handling.The
handleFileClickfunction includes proper null/undefined guards before opening URLs, preventing potential runtime errors.
1 participant
Summary by CodeRabbit