feat: Add support for right click context menu in conversations (#4923)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="menu-with-submenu flex-between">
+    <div class="menu-left">
+      <fluent-icon :icon="option.icon" size="14" class="menu-icon" />
+      <p class="menu-label">{{ option.label }}</p>
+    </div>
+    <fluent-icon icon="chevron-right" size="12" />
+    <div class="submenu">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    option: {
+      type: Object,
+      default: () => {},
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.menu-with-submenu {
+  width: 100%;
+  padding: var(--space-smaller);
+  border-radius: var(--border-radius-small);
+  position: relative;
+  min-width: calc(var(--space-mega) * 2);
+  background-color: var(--white);
+
+  .menu-left {
+    display: flex;
+    align-items: center;
+
+    .menu-label {
+      margin: 0;
+      font-size: var(--font-size-mini);
+    }
+
+    .menu-icon {
+      margin-right: var(--space-small);
+    }
+  }
+
+  .submenu {
+    padding: var(--space-smaller);
+    background-color: var(--white);
+    box-shadow: var(--shadow-context-menu);
+    border-radius: var(--border-radius-normal);
+    position: absolute;
+    position: absolute;
+    left: 100%;
+    top: 0;
+    display: none;
+  }
+
+  &:hover {
+    background-color: var(--w-75);
+    .submenu {
+      display: block;
+    }
+    &:before {
+      content: '';
+      position: absolute;
+      z-index: var(--z-index-highest);
+      bottom: -65%;
+      height: 75%;
+      right: 0%;
+      width: 50%;
+      clip-path: polygon(100% 0, 0% 0%, 100% 100%);
+    }
+  }
+}
+</style>