feat: Add support for bulk action for Captain FAQs (#10905)

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/captain/assistant/ResponseCard.vue

@@ -7,6 +7,7 @@ import { dynamicTime } from 'shared/helpers/timeHelper';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Policy from 'dashboard/components/policy.vue';
 
 const props = defineProps({
@@ -46,14 +47,27 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['action', 'navigate']);
+const emit = defineEmits(['action', 'navigate', 'select', 'hover']);
 
 const { t } = useI18n();
 
 const [showActionsDropdown, toggleDropdown] = useToggle();
 
+const modelValue = computed({
+  get: () => props.isSelected,
+  set: () => emit('select', props.id),
+});
+
 const statusAction = computed(() => {
   if (props.status === 'pending') {
     return [
@@ -102,8 +116,17 @@ const handleDocumentableClick = () => {
 </script>
 
 <template>
-  <CardLayout :class="{ 'rounded-md': compact }">
-    <div class="flex justify-between w-full gap-1">
+  <CardLayout
+    selectable
+    class="relative"
+    :class="{ 'rounded-md': compact }"
+    @mouseenter="emit('hover', true)"
+    @mouseleave="emit('hover', false)"
+  >
+    <div v-show="selectable" class="absolute top-7 ltr:left-4 rtl:right-4">
+      <Checkbox v-model="modelValue" />
+    </div>
+    <div class="flex relative justify-between w-full gap-1">
       <span class="text-base text-n-slate-12 line-clamp-1">
         {{ question }}
       </span>
@@ -148,7 +171,7 @@ const handleDocumentableClick = () => {
             v-if="documentable.type === 'Captain::Document'"
             class="inline-flex items-center gap-1 truncate over"
           >
-            <i class="i-ph-chat-circle-dots text-base" />
+            <i class="i-ph-files-light text-base" />
             <span class="max-w-96 truncate" :title="documentable.name">
               {{ documentable.name }}
             </span>