akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: Replace message menu with context menu

Browse Source
This commit is contained in:
iamsivin
2025-05-08 16:52:18 +05:30
parent 2856818931
commit cffd74fda3
11 changed files with 343 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/message/Message.vue
+22 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { onMounted, computed, ref, toRefs } from 'vue';
import { onMounted, computed, ref, toRefs, useTemplateRef } from 'vue';
import { useTimeoutFn } from '@vueuse/core';
import { provideMessageContext } from './provider.js';
import { useTrack } from 'dashboard/composables';
@@ -133,6 +133,7 @@ const props = defineProps({
const contextMenuPosition = ref({});
const showBackgroundHighlight = ref(false);
const showContextMenu = ref(false);
const emailBubbleRef = useTemplateRef('emailBubbleRef');
const { t } = useI18n();
const route = useRoute();
@@ -342,6 +343,11 @@ const contextMenuEnabledOptions = computed(() => {
delete: hasText || hasAttachments,
cannedResponse: isOutgoing && hasText,
replyTo: !props.private && props.inboxSupportsReplyTo.outgoing,
// Forward email is enabled only when the message is not in progress and is not private and is an email inbox
forwardEmail:
props.isEmailInbox &&
!props.private &&
props.status !== MESSAGE_STATUS.PROGRESS,
};
});
@@ -362,6 +368,9 @@ const shouldRenderMessage = computed(() => {
});
function openContextMenu(e) {
// Close forward modal, when opening context menu
emailBubbleRef.value?.closeForwardModal();
const shouldSkipContextMenu =
e.target?.classList.contains('skip-context-menu') ||
e.target?.tagName.toLowerCase() === 'a';
@@ -437,6 +446,11 @@ const setupHighlightTimer = () => {
}, HIGHLIGHT_TIMER);
};
const openForwardModal = (event = null) => {
// Open forward modal, with the event from context menu
emailBubbleRef.value.openForwardModal(event);
};
onMounted(setupHighlightTimer);
provideMessageContext({
@@ -497,7 +511,12 @@ provideMessageContext({
}"
@contextmenu="openContextMenu($event)"
>
<Component :is="componentToRender" />
<component
:is="componentToRender"
:ref="
componentToRender === EmailBubble ? 'emailBubbleRef' : undefined
"
/>
</div>
<MessageError
v-if="contentAttributes.externalError"
@@ -517,6 +536,7 @@ provideMessageContext({
@open="openContextMenu"
@close="closeContextMenu"
@reply-to="handleReplyTo"
@forward-email="openForwardModal"
/>
</div>
</div>
app/javascript/dashboard/components-next/message/MessageMenu.vue
-56
View File
@@ -1,56 +0,0 @@
<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import NextButton from 'dashboard/components-next/button/Button.vue';
import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
const emit = defineEmits(['openForward']);
const { t } = useI18n();
const menuItems = computed(() => {
return [
{
label: t('CONVERSATION.MESSAGE_MENU.FORWARD_EMAIL'),
value: 'forward',
},
];
});
</script>
<template>
<DropdownContainer>
<template #trigger="{ toggle, isOpen }">
<NextButton
icon="i-lucide-ellipsis-vertical"
xs
slate
faded
:class="{ 'bg-n-alpha-2': isOpen }"
@click="toggle"
/>
</template>
<DropdownBody class="top-0 -right-6 min-w-64 z-50" strong>
<DropdownSection class="max-h-80 overflow-scroll">
<DropdownItem
v-for="item in menuItems"
:key="item.value"
class="!items-start !gap-1 flex-col cursor-pointer"
@click="event => emit('openForward', event)"
>
<template #label>
<div class="items-start flex gap-1 flex-col">
<span class="text-n-slate-12 text-sm">
{{ item.label }}
</span>
</div>
</template>
</DropdownItem>
</DropdownSection>
</DropdownBody>
</DropdownContainer>
</template>
app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue
+3 -7
View File
@@ -62,18 +62,15 @@ const showMeta = computed(() => {
subject.value
);
});
defineExpose({
showMeta,
});
</script>
<template>
<section
v-show="showMeta"
class="space-y-1 rtl:pl-9 ltr:pr-9 text-sm break-words"
:class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
>
<div class="space-y-1 rtl:pl-9 w-full ltr:pr-9 text-sm break-words">
<template v-if="showMeta">
<div
v-if="fromEmail[0]"
:class="hasError ? 'text-n-ruby-11' : 'text-n-slate-12'"
@@ -103,7 +100,6 @@ defineExpose({
{{ $t('EMAIL_HEADER.SUBJECT') }}:
{{ subject }}
</div>
</div>
<slot />
</template>
</section>
</template>
app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+55 -46
View File
@@ -9,10 +9,9 @@ import {
} from 'vue';
import { Letter } from 'vue-letter';
import { allowedCssProperties } from 'lettersanitizer';
import { useScrollLock, useToggle } from '@vueuse/core';
import { useScrollLock, useWindowSize, useToggle } from '@vueuse/core';
import Icon from 'next/icon/Icon.vue';
import MessageMenu from 'dashboard/components-next/message/MessageMenu.vue';
import { EmailQuoteExtractor } from './removeReply.js';
import BaseBubble from 'next/message/bubbles/Base.vue';
import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
@@ -23,10 +22,11 @@ import ForwardMessageForm from 'dashboard/components-next/message/forwardMessage
import { useMessageContext } from '../../provider.js';
import { useInbox } from 'dashboard/composables/useInbox';
import { MESSAGE_TYPES, MESSAGE_STATUS } from 'next/message/constants.js';
import { MESSAGE_TYPES } from 'next/message/constants.js';
import { useTranslations } from 'dashboard/composables/useTranslations';
import { calculatePosition } from 'dashboard/helper/position.js';
const { id, status, content, contentAttributes, attachments, messageType } =
const { id, content, contentAttributes, attachments, messageType } =
useMessageContext();
const { inbox } = useInbox();
@@ -36,12 +36,12 @@ const isExpanded = ref(false);
const showQuotedMessage = ref(false);
const renderOriginal = ref(false);
const contentContainer = useTemplateRef('contentContainer');
const emailMeta = useTemplateRef('emailMeta');
// Forward form
// Forward form - managed locally but can be triggered by parent
const [showForwardMessageModal, toggleForwardModal] = useToggle();
const forwardFormPosition = reactive({ top: 0, right: 0 });
const conversationPanelScrollLock = ref(null);
const { width: windowWidth, height: windowHeight } = useWindowSize();
onMounted(() => {
isExpandable.value = contentContainer.value?.scrollHeight > 400;
@@ -52,12 +52,6 @@ const isIncoming = computed(() => !isOutgoing.value);
const isForwarded = computed(() => contentAttributes.value?.forwardedMessageId);
const showMessageMenu = computed(
() => ![MESSAGE_STATUS.FAILED, MESSAGE_STATUS.PROGRESS].includes(status.value)
);
const showMeta = computed(() => emailMeta.value?.showMeta);
const { hasTranslations, translationContent } =
useTranslations(contentAttributes);
@@ -126,16 +120,36 @@ const closeForwardModal = () => {
conversationPanelScrollLock.value.value = false;
};
const openForwardModal = event => {
const openForwardModal = (event = null) => {
// Lock conversation panel scroll
// To prevent the conversation from scrolling when the forward form is opened
const panel = document.querySelector('.conversation-panel');
if (panel) conversationPanelScrollLock.value = useScrollLock(panel, true);
// Set position from event
if (event?.target) {
const buttonRect = event.target.getBoundingClientRect();
forwardFormPosition.top = buttonRect.top - 9;
forwardFormPosition.right = window.innerWidth - buttonRect.right - 9;
// Form dimensions
const [formWidth, formHeight] = [672, 500];
const { value: winWidth } = windowWidth;
const { value: winHeight } = windowHeight;
// Position calculation
const rect = event?.target?.getBoundingClientRect?.();
if (rect) {
// Calculate position based on click location of context menu forward button
const { left, top } = calculatePosition(
rect.left,
rect.top,
formWidth,
formHeight,
winWidth,
winHeight
);
forwardFormPosition.top = top;
forwardFormPosition.right = winWidth - left - formWidth;
} else {
// Center the form when no trigger event
forwardFormPosition.top = Math.max(0, (winHeight - formHeight) / 2);
forwardFormPosition.right = Math.max(0, (winWidth - formWidth) / 2);
}
toggleForwardModal(true);
@@ -145,6 +159,11 @@ onUnmounted(() => {
if (conversationPanelScrollLock.value)
conversationPanelScrollLock.value.value = false;
});
defineExpose({
openForwardModal,
closeForwardModal,
});
</script>
<template>
@@ -156,39 +175,13 @@ onUnmounted(() => {
}"
data-bubble-name="email"
>
<div
v-show="showMeta"
<EmailMeta
class="p-3"
:class="{
'border-b border-n-strong': isIncoming,
'border-b border-n-slate-8/20': isOutgoing,
}"
>
<EmailMeta ref="emailMeta" class="w-full flex justify-end items-start">
<div
v-if="showMessageMenu"
class="flex gap-2 skip-context-menu flex-shrink-0 items-center relative"
>
<MessageMenu @open-forward="openForwardModal" />
<Teleport to="body">
<ForwardMessageForm
v-if="showForwardMessageModal"
:message="contentAttributes?.email"
:content="content"
:inbox="inbox"
:attachments="attachments"
:message-id="id"
class="fixed z-50 skip-context-menu"
:style="{
top: `${forwardFormPosition.top}px`,
right: `${forwardFormPosition.right}px`,
}"
@close="closeForwardModal"
/>
</Teleport>
</div>
</EmailMeta>
</div>
/>
<section ref="contentContainer" class="p-3">
<div
@@ -273,6 +266,22 @@ onUnmounted(() => {
>
<AttachmentChips :attachments="attachments" class="gap-1" />
</section>
<Teleport v-if="showForwardMessageModal" to="body">
<ForwardMessageForm
:message="contentAttributes?.email"
:content="content"
:inbox="inbox"
:attachments="attachments"
:message-id="id"
class="fixed z-50 skip-context-menu"
:style="{
top: `${forwardFormPosition.top}px`,
right: `${forwardFormPosition.right}px`,
}"
@close="closeForwardModal"
/>
</Teleport>
</BaseBubble>
</template>
app/javascript/dashboard/components-next/message/forwardMessage/components/ForwardMessageForm.vue
+24 -20
View File
@@ -130,9 +130,11 @@ const handleSendMessage = async () => {
<template>
<div
class="w-[42rem] max-h-[31.25rem] overflow-y-scroll divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
class="w-[42rem] max-h-[31.25rem] divide-y divide-n-strong transition-all duration-300 ease-in-out top-full justify-between flex flex-col border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl overflow-hidden"
>
<div class="relative flex-1 px-4 py-3 overflow-y-visible bg-n-alpha-3">
<div
class="relative flex-1 rounded-t-xl px-4 py-3 overflow-y-visible bg-n-alpha-3"
>
<div class="flex items-baseline w-full gap-3 min-h-7">
<label class="text-sm font-medium text-n-slate-11 whitespace-nowrap">
{{ t('FORWARD_MESSAGE_FORM.FROM') }}
@@ -162,25 +164,27 @@ const handleSendMessage = async () => {
@clear-selected-contact="clearSelectedContact"
@update-dropdown="handleDropdownUpdate"
/>
<EmailMessageEditor
v-model="state.message"
class="bg-n-alpha-3"
:content="content"
:is-plain-email="isPlainEmail"
:has-quoted-message="hasQuotedMessage"
:full-html="fullHtml"
:unquoted-html="unquotedHtml"
:text-to-show="textToShow"
/>
<section
v-if="Array.isArray(attachments) && attachments.length"
class="px-4 pb-4 pt-2 !border-t-0 space-y-2 bg-n-alpha-3"
>
<AttachmentChips
:attachments="attachments"
class="gap-1 !justify-start"
<div class="overflow-y-scroll">
<EmailMessageEditor
v-model="state.message"
class="bg-n-alpha-3"
:content="content"
:is-plain-email="isPlainEmail"
:has-quoted-message="hasQuotedMessage"
:full-html="fullHtml"
:unquoted-html="unquotedHtml"
:text-to-show="textToShow"
/>
</section>
<section
v-if="Array.isArray(attachments) && attachments.length"
class="px-4 pb-4 pt-2 !border-t-0 space-y-2 bg-n-alpha-3"
>
<AttachmentChips
:attachments="attachments"
class="gap-1 !justify-start"
/>
</section>
</div>
<AttachmentPreviews
v-if="state.attachedFiles.length > 0"
:attachments="state.attachedFiles"
app/javascript/dashboard/components/ui/ContextMenu.vue
+1 -19
View File
@@ -1,6 +1,7 @@
<script setup>
import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
import { useWindowSize, useElementBounding } from '@vueuse/core';
import { calculatePosition } from 'dashboard/helper/position.js';
const props = defineProps({
x: { type: Number, default: 0 },
@@ -14,25 +15,6 @@ const menuRef = useTemplateRef('menuRef');
const { width: windowWidth, height: windowHeight } = useWindowSize();
const { width: menuWidth, height: menuHeight } = useElementBounding(menuRef);
const calculatePosition = (x, y, menuW, menuH, windowW, windowH) => {
// Initial position
let left = x;
let top = y;
// Boundary checks
const isOverflowingRight = left + menuW > windowW;
const isOverflowingBottom = top + menuH > windowH;
// Adjust position if overflowing
if (isOverflowingRight) left = windowW - menuW;
if (isOverflowingBottom) top = windowH - menuH;
return {
left: Math.max(0, left),
top: Math.max(0, top),
};
};
const position = computed(() => {
if (!menuRef.value) return { top: `${props.y}px`, left: `${props.x}px` };
app/javascript/dashboard/helper/position.js
+38
View File
@@ -0,0 +1,38 @@
/**
* Calculates the optimal position for a popup element to ensure it remains within viewport bounds
*
* @param {number} x - The initial x-coordinate (left position) for the element
* @param {number} y - The initial y-coordinate (top position) for the element
* @param {number} menuW - The width of the element to position
* @param {number} menuH - The height of the element to position
* @param {number} windowW - The width of the viewport
* @param {number} windowH - The height of the viewport
* @param {number} [padding=16] - Minimum padding from viewport edges (in pixels)
* @returns {Object} An object containing the adjusted { left, top } coordinates
*/
export const calculatePosition = (
x,
y,
menuW,
menuH,
windowW,
windowH,
padding = 16
) => {
// Initial position
let left = x;
let top = y;
// Boundary checks
const isOverflowingRight = left + menuW > windowW - padding;
const isOverflowingBottom = top + menuH > windowH - padding;
// Adjust position if overflowing
if (isOverflowingRight) left = windowW - menuW - padding;
if (isOverflowingBottom) top = windowH - menuH - padding;
return {
left: Math.max(padding, left),
top: Math.max(padding, top),
};
};
app/javascript/dashboard/helper/specs/position.spec.js
+183
View File
@@ -0,0 +1,183 @@
import { calculatePosition } from '../position';
describe('calculatePosition', () => {
const WINDOW_WIDTH = 1024;
const WINDOW_HEIGHT = 768;
const MENU_WIDTH = 400;
const MENU_HEIGHT = 300;
const DEFAULT_PADDING = 16;
test('returns the original position when element fits within viewport', () => {
const x = 100;
const y = 100;
const result = calculatePosition(
x,
y,
MENU_WIDTH,
MENU_HEIGHT,
WINDOW_WIDTH,
WINDOW_HEIGHT
);
expect(result).toEqual({ left: x, top: y });
});
test('adjusts position when overflowing right edge', () => {
const x = WINDOW_WIDTH - 100; // Too far right
const y = 100;
const result = calculatePosition(
x,
y,
MENU_WIDTH,
MENU_HEIGHT,
WINDOW_WIDTH,
WINDOW_HEIGHT
);
const expectedLeft = WINDOW_WIDTH - MENU_WIDTH - DEFAULT_PADDING;
expect(result).toEqual({ left: expectedLeft, top: y });
});
test('adjusts position when overflowing bottom edge', () => {
const x = 100;
const y = WINDOW_HEIGHT - 100; // Too far down
const result = calculatePosition(
x,
y,
MENU_WIDTH,
MENU_HEIGHT,
WINDOW_WIDTH,
WINDOW_HEIGHT
);
const expectedTop = WINDOW_HEIGHT - MENU_HEIGHT - DEFAULT_PADDING;
expect(result).toEqual({ left: x, top: expectedTop });
});
test('adjusts position when overflowing both right and bottom edges', () => {
const x = WINDOW_WIDTH - 100; // Too far right
const y = WINDOW_HEIGHT - 100; // Too far down
const result = calculatePosition(
x,
y,
MENU_WIDTH,
MENU_HEIGHT,
WINDOW_WIDTH,
WINDOW_HEIGHT
);
const expectedLeft = WINDOW_WIDTH - MENU_WIDTH - DEFAULT_PADDING;
const expectedTop = WINDOW_HEIGHT - MENU_HEIGHT - DEFAULT_PADDING;
expect(result).toEqual({ left: expectedLeft, top: expectedTop });
});
test('ensures minimum padding from left edge', () => {
const x = -50; // Position would be off-screen to the left
const y = 100;
const result = calculatePosition(
x,
y,
MENU_WIDTH,
MENU_HEIGHT,
WINDOW_WIDTH,
WINDOW_HEIGHT
);
expect(result).toEqual({ left: DEFAULT_PADDING, top: y });
});
test('ensures minimum padding from top edge', () => {
const x = 100;
const y = -50; // Position would be off-screen at the top
const result = calculatePosition(
x,
y,
MENU_WIDTH,
MENU_HEIGHT,
WINDOW_WIDTH,
WINDOW_HEIGHT
);
expect(result).toEqual({ left: x, top: DEFAULT_PADDING });
});
test('handles case when element is larger than viewport width', () => {
const x = 100;
const y = 100;
const largeWidth = WINDOW_WIDTH + 200; // Wider than window
const result = calculatePosition(
x,
y,
largeWidth,
MENU_HEIGHT,
WINDOW_WIDTH,
WINDOW_HEIGHT
);
// Should position at minimum padding
expect(result).toEqual({ left: DEFAULT_PADDING, top: y });
});
test('handles case when element is larger than viewport height', () => {
const x = 100;
const y = 100;
const largeHeight = WINDOW_HEIGHT + 200; // Taller than window
const result = calculatePosition(
x,
y,
MENU_WIDTH,
largeHeight,
WINDOW_WIDTH,
WINDOW_HEIGHT
);
// Should position at minimum padding
expect(result).toEqual({ left: x, top: DEFAULT_PADDING });
});
test('accepts custom padding value', () => {
const x = WINDOW_WIDTH - 100;
const y = WINDOW_HEIGHT - 100;
const customPadding = 32;
const result = calculatePosition(
x,
y,
MENU_WIDTH,
MENU_HEIGHT,
WINDOW_WIDTH,
WINDOW_HEIGHT,
customPadding
);
const expectedLeft = WINDOW_WIDTH - MENU_WIDTH - customPadding;
const expectedTop = WINDOW_HEIGHT - MENU_HEIGHT - customPadding;
expect(result).toEqual({ left: expectedLeft, top: expectedTop });
});
test('ensures custom minimum padding from edges', () => {
const x = -50;
const y = -50;
const customPadding = 32;
const result = calculatePosition(
x,
y,
MENU_WIDTH,
MENU_HEIGHT,
WINDOW_WIDTH,
WINDOW_HEIGHT,
customPadding
);
expect(result).toEqual({ left: customPadding, top: customPadding });
});
});
app/javascript/dashboard/i18n/locale/en/conversation.json
+1
View File
@@ -227,6 +227,7 @@
"TRANSLATE": "Translate",
"COPY_PERMALINK": "Copy link to the message",
"LINK_COPIED": "Message URL copied to the clipboard",
"FORWARD_EMAIL": "Forward email",
"DELETE_CONFIRMATION": {
"TITLE": "Are you sure you want to delete this message?",
"MESSAGE": "You cannot undo this action",
app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+14 -1
View File
@@ -44,7 +44,7 @@ export default {
default: false,
},
},
emits: ['open', 'close', 'replyTo'],
emits: ['open', 'close', 'replyTo', 'forwardEmail'],
setup() {
const { getPlainText } = useMessageFormatter();
return {
@@ -115,6 +115,10 @@ export default {
handleClose(e) {
this.$emit('close', e);
},
openForwardModal(event) {
this.handleClose();
this.$emit('forwardEmail', event);
},
handleTranslate() {
const { locale } = this.getAccount(this.currentAccountId);
this.$store.dispatch('translateMessage', {
@@ -238,6 +242,15 @@ export default {
variant="icon"
@click.stop="showCannedResponseModal"
/>
<MenuItem
v-if="enabledOptions['forwardEmail']"
:option="{
icon: 'forward',
label: $t('CONVERSATION.CONTEXT_MENU.FORWARD_EMAIL'),
}"
variant="icon"
@click.stop="openForwardModal"
/>
<hr v-if="enabledOptions['delete']" />
<MenuItem
v-if="enabledOptions['delete']"