feat: Add report bar drilldown drawer (#14626)

## Description

Adds drilldown support for report bar charts powered by
`ReportContainer`. Clicking a non-zero report bar now opens a right-side
drawer with the conversations or messages that contributed to that
bucket, with each row linking to the underlying conversation and message
rows linking with `messageId`.

This includes a new `GET /api/v2/accounts/:account_id/reports/drilldown`
endpoint, backend drilldown builders/serializers, generic chart click
emission, local drawer state via `useReportDrilldown`, compact drilldown
cards, pagination, stale-response protection, and validation for
unsupported drilldown dimensions.

Fixes # CW-4497

https://linear.app/chatwoot/issue/CW-4497/drill-down-on-agent-conversations-report

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

Ran the focused backend and frontend checks for the drilldown endpoint,
builder, chart click handling, drawer/card UI, API helper, and
stale-response handling.

Here are the screenshots on how it looks like:
<img width="1792" height="1199" alt="Screenshot 2026-06-02 at 11 32
11 PM"
src="https://github.com/user-attachments/assets/6bdb8832-b9df-4bf3-9a2a-beaefe203b6e"
/>
<img width="1791" height="1230" alt="Screenshot 2026-06-02 at 11 32
34 PM"
src="https://github.com/user-attachments/assets/36e92eb7-3208-4855-87f4-0c7f316df54d"
/>
<img width="1784" height="1235" alt="Screenshot 2026-06-02 at 11 32
46 PM"
src="https://github.com/user-attachments/assets/f7a53916-74f2-4622-9305-042e0ac9e877"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] 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
- [x] 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

---------

Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/shared/components/charts/BarChart.vue

@@ -19,8 +19,14 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+const emit = defineEmits(['elementClick']);
+
 ChartJS.register(Title, Tooltip, BarElement, CategoryScale, LinearScale);
 
 const fontFamily =
@@ -67,8 +73,39 @@ const defaultChartOptions = {
   },
 };
 
+const handleClick = (event, elements, chart) => {
+  props.chartOptions.onClick?.(event, elements, chart);
+
+  if (!props.clickable || !elements.length) return;
+
+  const { datasetIndex, index } = elements[0];
+  const dataset = props.collection.datasets?.[datasetIndex] || {};
+
+  emit('elementClick', {
+    datasetIndex,
+    dataIndex: index,
+    dataset,
+    label: props.collection.labels?.[index],
+    value: dataset.data?.[index],
+  });
+};
+
+const handleHover = (event, elements, chart) => {
+  props.chartOptions.onHover?.(event, elements, chart);
+
+  if (!event?.native?.target) return;
+
+  event.native.target.style.cursor =
+    props.clickable && elements.length ? 'pointer' : 'default';
+};
+
 const options = computed(() => {
-  return { ...defaultChartOptions, ...props.chartOptions };
+  return {
+    ...defaultChartOptions,
+    ...props.chartOptions,
+    onClick: handleClick,
+    onHover: handleHover,
+  };
 });
 </script>
 

app/javascript/shared/components/specs/BarChart.spec.js

@@ -0,0 +1,52 @@
+import { shallowMount } from '@vue/test-utils';
+import BarChart from '../charts/BarChart.vue';
+
+vi.mock('vue-chartjs', () => ({
+  Bar: {
+    name: 'Bar',
+    props: ['data', 'options'],
+    template: '<canvas />',
+  },
+}));
+
+describe('BarChart.vue', () => {
+  it('emits the clicked chart element when clickable', () => {
+    const wrapper = shallowMount(BarChart, {
+      props: {
+        clickable: true,
+        collection: {
+          labels: ['20-May'],
+          datasets: [{ type: 'bar', data: [3] }],
+        },
+      },
+    });
+
+    const options = wrapper.findComponent({ name: 'Bar' }).props('options');
+    options.onClick({}, [{ datasetIndex: 0, index: 0 }], {});
+
+    expect(wrapper.emitted('elementClick')[0][0]).toEqual({
+      datasetIndex: 0,
+      dataIndex: 0,
+      dataset: { type: 'bar', data: [3] },
+      label: '20-May',
+      value: 3,
+    });
+  });
+
+  it('does not emit when chart is not clickable', () => {
+    const wrapper = shallowMount(BarChart, {
+      props: {
+        clickable: false,
+        collection: {
+          labels: ['20-May'],
+          datasets: [{ type: 'bar', data: [3] }],
+        },
+      },
+    });
+
+    const options = wrapper.findComponent({ name: 'Bar' }).props('options');
+    options.onClick({}, [{ datasetIndex: 0, index: 0 }], {});
+
+    expect(wrapper.emitted('elementClick')).toBeUndefined();
+  });
+});