Files
chatwoot/app/javascript/dashboard/components/ConversationItem.vue
Sivin Varghese 35c69fc282 fix: Usability issues in conversation card context menu (#10971)
# Pull Request Template

## Description

The PR includes usability feedback fixes for the conversation card
context menu. A "Mark as Read" option has been added after "Mark as
Unread" to prevent misclicks due to shifting menu positions.
Additionally, a separator line has been introduced for better grouping
and clarity

#### **Orders**  
<img width="210" alt="image"
src="https://github.com/user-attachments/assets/d7c04356-7cfb-4f43-ac55-beb4167f91e9"
/>
<img width="210" alt="image"
src="https://github.com/user-attachments/assets/593acd58-39cf-4b25-b119-03b89cb3528c"
/>

**Fixes** https://linear.app/chatwoot/issue/CW-4088/usability-feedback

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### **Loom video**

https://www.loom.com/share/59f8ad3bf4054b299bfcffc0ba24eca1?sid=98fbb67d-c3e9-4fa4-9b04-2a7cb3bf8568

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
2025-02-25 16:48:04 +05:30

72 lines
1.5 KiB
Vue

<script>
import ConversationCard from './widgets/conversation/ConversationCard.vue';
export default {
components: {
ConversationCard,
},
inject: [
'selectConversation',
'deSelectConversation',
'assignAgent',
'assignTeam',
'assignLabels',
'updateConversationStatus',
'toggleContextMenu',
'markAsUnread',
'markAsRead',
'assignPriority',
'isConversationSelected',
],
props: {
source: {
type: Object,
required: true,
},
teamId: {
type: [String, Number],
default: 0,
},
label: {
type: String,
default: '',
},
conversationType: {
type: String,
default: '',
},
foldersId: {
type: [String, Number],
default: 0,
},
showAssignee: {
type: Boolean,
default: false,
},
},
};
</script>
<template>
<ConversationCard
:key="source.id"
:active-label="label"
:team-id="teamId"
:folders-id="foldersId"
:chat="source"
:conversation-type="conversationType"
:selected="isConversationSelected(source.id)"
:show-assignee="showAssignee"
enable-context-menu
@select-conversation="selectConversation"
@de-select-conversation="deSelectConversation"
@assign-agent="assignAgent"
@assign-team="assignTeam"
@assign-label="assignLabels"
@update-conversation-status="updateConversationStatus"
@context-menu-toggle="toggleContextMenu"
@mark-as-unread="markAsUnread"
@mark-as-read="markAsRead"
@assign-priority="assignPriority"
/>
</template>