From 53e25852753f5ef50cf095ab0c46277a1cebe891 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 10 Jun 2025 23:29:25 +0530
Subject: [PATCH 1/4] feat: Show conversation count for filters/folders in
 header (#11698)

# Pull Request Template

## Description

Fixes
https://linear.app/chatwoot/issue/CW-4467/show-the-conversation-count-at-the-top-for-filters-and-folders

## Type of change

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

## How Has This Been Tested?

### Screenshots
<img width="637" alt="image"
src="https://github.com/user-attachments/assets/8c167130-f41a-45ce-a70e-bba99d74050f"
/>
<img width="637" alt="image"
src="https://github.com/user-attachments/assets/769bc488-e4d9-40fb-9760-62434761617b"
/>




## 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
---
 .../dashboard/components/ChatList.vue         |  2 +
 .../dashboard/components/ChatListHeader.vue   | 40 +++++++++----------
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 ++---
 4 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 098bc41c1..de895c76e 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -853,6 +853,8 @@ watch(conversationFilters, (newVal, oldVal) => {
       :has-active-folders="hasActiveFolders"
       :active-status="activeStatus"
       :is-on-expanded-layout="isOnExpandedLayout"
+      :conversation-stats="conversationStats"
+      :is-list-loading="chatListLoading"
       @add-folders="onClickOpenAddFoldersModal"
       @delete-folders="onClickOpenDeleteFoldersModal"
       @filters-modal="onToggleAdvanceFiltersModal"
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index b4ce9f342..c184103c0 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useMapGetter } from 'dashboard/composables/store.js';
+import { formatNumber } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
@@ -10,26 +11,13 @@ import SwitchLayout from 'dashboard/routes/dashboard/conversation/search/SwitchL
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
-  pageTitle: {
-    type: String,
-    required: true,
-  },
-  hasAppliedFilters: {
-    type: Boolean,
-    required: true,
-  },
-  hasActiveFolders: {
-    type: Boolean,
-    required: true,
-  },
-  activeStatus: {
-    type: String,
-    required: true,
-  },
-  isOnExpandedLayout: {
-    type: Boolean,
-    required: true,
-  },
+  pageTitle: { type: String, required: true },
+  hasAppliedFilters: { type: Boolean, required: true },
+  hasActiveFolders: { type: Boolean, required: true },
+  activeStatus: { type: String, required: true },
+  isOnExpandedLayout: { type: Boolean, required: true },
+  conversationStats: { type: Object, required: true },
+  isListLoading: { type: Boolean, required: true },
 });
 
 const emit = defineEmits([
@@ -62,6 +50,9 @@ const showV4View = computed(() => {
   );
 });
 
+const allCount = computed(() => props.conversationStats?.allCount || 0);
+const formattedAllCount = computed(() => formatNumber(allCount.value));
+
 const toggleConversationLayout = () => {
   const { LAYOUT_TYPES } = wootConstants;
   const {
@@ -92,6 +83,15 @@ const toggleConversationLayout = () => {
       >
         {{ pageTitle }}
       </h1>
+      <span
+        v-if="
+          allCount > 0 && hasAppliedFiltersOrActiveFolders && !isListLoading
+        "
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
+        :title="allCount"
+      >
+        {{ formattedAllCount }}
+      </span>
       <span
         v-if="!hasAppliedFiltersOrActiveFolders"
         class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
diff --git a/package.json b/package.json
index eb5098fa0..3ec557f2e 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@breezystack/lamejs": "^1.2.7",
     "@chatwoot/ninja-keys": "1.2.3",
     "@chatwoot/prosemirror-schema": "1.1.1-next",
-    "@chatwoot/utils": "^0.0.46",
+    "@chatwoot/utils": "^0.0.47",
     "@formkit/core": "^1.6.7",
     "@formkit/vue": "^1.6.7",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index db7589569..b8b23d1d0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,8 +23,8 @@ importers:
         specifier: 1.1.1-next
         version: 1.1.1-next
       '@chatwoot/utils':
-        specifier: ^0.0.46
-        version: 0.0.46
+        specifier: ^0.0.47
+        version: 0.0.47
       '@formkit/core':
         specifier: ^1.6.7
         version: 1.6.7
@@ -406,8 +406,8 @@ packages:
   '@chatwoot/prosemirror-schema@1.1.1-next':
     resolution: {integrity: sha512-/M2qZ+ZF7GlQNt1riwVP499fvp3hxSqd5iy8hxyF9pkj9qQ+OKYn5JK+v3qwwqQY3IxhmNOn1Lp6tm7vstrd9Q==}
 
-  '@chatwoot/utils@0.0.46':
-    resolution: {integrity: sha512-a68CQ+aPFfyMr7dnXUUSt/kwHEazBd7Y8aidDZeDp5eL7sych7EpmT5XMTmhttlqMiRsmwETblXJJ2fBH6I44A==}
+  '@chatwoot/utils@0.0.47':
+    resolution: {integrity: sha512-0z/MY+rBjDnf6zuWbMdzexH+zFDXU/g5fPr/kcUxnqtvPsZIQpL8PvwSPBW0+wS6R7LChndNkdviV1e9H8Yp+Q==}
     engines: {node: '>=10'}
 
   '@codemirror/commands@6.7.0':
@@ -5255,7 +5255,7 @@ snapshots:
       prosemirror-utils: 1.2.2(prosemirror-model@1.22.3)(prosemirror-state@1.4.3)
       prosemirror-view: 1.34.1
 
-  '@chatwoot/utils@0.0.46':
+  '@chatwoot/utils@0.0.47':
     dependencies:
       date-fns: 2.30.0
 

From 4a83e701581de9ec0624b1e1f22366d681410e69 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Tue, 10 Jun 2025 15:12:32 -0400
Subject: [PATCH 2/4] fix: Avoid throwing 406 for non-json requests (#11701)

Users get confused between app routes and API routes. Instead of hitting
/api, they append /app in the API call, which ends up calling the
dashboard controller and throws an error. To fix this, we added a check
to throw a 406 Not Acceptable for non-HTML requests. But Meta requires
Accept: \*/\* to return 200 for the integration to be accepted.

This change will only throw an error for JSON requests.

Fixes #11697
Fixes https://github.com/chatwoot/chatwoot/issues/11251
Fixes https://github.com/chatwoot/chatwoot/issues/11205
---
 app/controllers/dashboard_controller.rb       | 2 +-
 spec/controllers/dashboard_controller_spec.rb | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb
index a2cb466f1..6a4ce2461 100644
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -15,7 +15,7 @@ class DashboardController < ActionController::Base
   private
 
   def ensure_html_format
-    head :not_acceptable unless request.format.html?
+    render json: { error: 'Please use API routes instead of dashboard routes for JSON requests' }, status: :not_acceptable if request.format.json?
   end
 
   def set_global_config
diff --git a/spec/controllers/dashboard_controller_spec.rb b/spec/controllers/dashboard_controller_spec.rb
index 517443858..e022e22c7 100644
--- a/spec/controllers/dashboard_controller_spec.rb
+++ b/spec/controllers/dashboard_controller_spec.rb
@@ -19,9 +19,10 @@ describe '/app/login', type: :request do
   end
 
   context 'with non-HTML format' do
-    it 'returns not acceptable for JSON' do
-      get '/app/login', params: { format: 'json' }
+    it 'returns not acceptable for JSON with error message' do
+      get '/app/login', headers: { 'Accept' => 'application/json' }
       expect(response).to have_http_status(:not_acceptable)
+      expect(response.parsed_body).to eq({ 'error' => 'Please use API routes instead of dashboard routes for JSON requests' })
     end
   end
 

From 4303007786d527755bece2a2795729041c00fc27 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 11 Jun 2025 01:10:02 +0530
Subject: [PATCH 3/4] feat: Enhance Linear integration UX with multi-issue
 support and improved placement (#11668)

Fixes
https://linear.app/chatwoot/issue/CW-4150/support-for-multiple-issues-linking-in-linear

This PR significantly improves the Linear integration user experience by
relocating the Linear integration from the conversation header to the
contact panel and adding support for multiple issue linking per
conversation.

  ### Key Changes

- **Relocated Linear integration**: Moved from conversation header to
contact panel for better organization and accessibility
- **Multi-issue support**: Added ability to link/create multiple Linear
issues for a single conversation
- **Integration CTA**: Added a dedicated call-to-action section for
users who haven't connected their Linear account yet
  - **UI/UX improvements**: Enhanced design consistency and user flow




<details>
<summary>Screenshots</summary>

  #### Multiple Issues Support


![link-multiple-issues](https://github.com/user-attachments/assets/b56cfa7d-6f98-42db-b4bb-361ae59d0eae)

  #### Integration CTA


![link-multiple-issues](https://github.com/user-attachments/assets/a895fcbe-780a-47f8-9fa4-3a2af8b243e1)

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../conversation/ConversationHeader.vue       |  24 --
 .../widgets/conversation/linear/Issue.vue     | 123 -------
 .../conversation/linear/IssueHeader.vue       |  44 ++-
 .../conversation/linear/IssuesList.vue        | 132 ++++++++
 .../conversation/linear/LinearIssueItem.vue   | 111 +++++++
 .../conversation/linear/LinearSetupCTA.vue    |  54 ++++
 .../widgets/conversation/linear/index.vue     | 161 ----------
 .../dashboard/composables/useUISettings.js    |   1 +
 .../i18n/locale/en/conversation.json          |   1 +
 .../i18n/locale/en/integrations.json          |   7 +
 .../dashboard/conversation/ContactPanel.vue   | 301 ++++++++++--------
 11 files changed, 494 insertions(+), 465 deletions(-)
 delete mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/IssuesList.vue
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/LinearIssueItem.vue
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/LinearSetupCTA.vue
 delete mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/index.vue

diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index ec05b0eb4..7a3489265 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -11,8 +11,6 @@ import SLACardLabel from './components/SLACardLabel.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import Linear from './linear/index.vue';
 import { useInbox } from 'dashboard/composables/useInbox';
 import { useI18n } from 'vue-i18n';
 
@@ -36,12 +34,6 @@ const { isAWebWidgetInbox } = useInbox();
 
 const currentChat = computed(() => store.getters.getSelectedChat);
 const accountId = computed(() => store.getters.getCurrentAccountId);
-const isFeatureEnabledonAccount = computed(
-  () => store.getters['accounts/isFeatureEnabledonAccount']
-);
-const appIntegrations = computed(
-  () => store.getters['integrations/getAppIntegrations']
-);
 
 const chatMetadata = computed(() => props.chat.meta);
 
@@ -92,16 +84,6 @@ const hasMultipleInboxes = computed(
 );
 
 const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
-
-const isLinearIntegrationEnabled = computed(() =>
-  appIntegrations.value.find(
-    integration => integration.id === 'linear' && !!integration.hooks.length
-  )
-);
-
-const isLinearFeatureEnabled = computed(() =>
-  isFeatureEnabledonAccount.value(accountId.value, FEATURE_FLAGS.LINEAR)
-);
 </script>
 
 <template>
@@ -162,12 +144,6 @@ const isLinearFeatureEnabled = computed(() =>
         :parent-width="width"
         class="hidden md:flex"
       />
-      <Linear
-        v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
-        :conversation-id="currentChat.id"
-        :parent-width="width"
-        class="hidden md:flex"
-      />
       <MoreActions :conversation-id="currentChat.id" />
     </div>
   </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
deleted file mode 100644
index c1d472964..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script setup>
-import { format } from 'date-fns';
-import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
-import IssueHeader from './IssueHeader.vue';
-import { computed } from 'vue';
-
-const props = defineProps({
-  issue: {
-    type: Object,
-    required: true,
-  },
-  linkId: {
-    type: String,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['unlinkIssue']);
-
-const priorityMap = {
-  1: 'Urgent',
-  2: 'High',
-  3: 'Medium',
-  4: 'Low',
-};
-
-const formattedDate = computed(() => {
-  const { createdAt } = props.issue;
-  return format(new Date(createdAt), 'hh:mm a, MMM dd');
-});
-
-const assignee = computed(() => {
-  const assigneeDetails = props.issue.assignee;
-
-  if (!assigneeDetails) return null;
-  const { name, avatarUrl } = assigneeDetails;
-
-  return {
-    name,
-    thumbnail: avatarUrl,
-  };
-});
-
-const labels = computed(() => {
-  return props.issue.labels?.nodes || [];
-});
-
-const priorityLabel = computed(() => {
-  return priorityMap[props.issue.priority];
-});
-
-const unlinkIssue = () => {
-  emit('unlinkIssue', props.linkId);
-};
-</script>
-
-<template>
-  <div
-    class="absolute flex flex-col items-start bg-n-alpha-3 backdrop-blur-[100px] z-50 px-4 py-3 border border-solid border-n-container w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
-  >
-    <div class="flex flex-col w-full">
-      <IssueHeader
-        :identifier="issue.identifier"
-        :link-id="linkId"
-        :issue-url="issue.url"
-        @unlink-issue="unlinkIssue"
-      />
-
-      <span class="mt-2 text-sm font-medium text-n-slate-12">
-        {{ issue.title }}
-      </span>
-      <span
-        v-if="issue.description"
-        class="mt-1 text-sm text-n-slate-11 line-clamp-3"
-      >
-        {{ issue.description }}
-      </span>
-    </div>
-    <div class="flex flex-row items-center h-6 gap-2">
-      <UserAvatarWithName v-if="assignee" :user="assignee" class="py-1" />
-      <div v-if="assignee" class="w-px h-3 bg-n-slate-4" />
-      <div class="flex items-center gap-1 py-1">
-        <fluent-icon
-          icon="status"
-          size="14"
-          :style="{ color: issue.state.color }"
-        />
-        <h6 class="text-xs text-n-slate-12">
-          {{ issue.state.name }}
-        </h6>
-      </div>
-      <div v-if="priorityLabel" class="w-px h-3 bg-n-slate-4" />
-      <div v-if="priorityLabel" class="flex items-center gap-1 py-1">
-        <fluent-icon
-          :icon="`priority-${priorityLabel.toLowerCase()}`"
-          size="14"
-          view-box="0 0 12 12"
-        />
-        <h6 class="text-xs text-n-slate-12">{{ priorityLabel }}</h6>
-      </div>
-    </div>
-    <div v-if="labels.length" class="flex flex-wrap items-center gap-1">
-      <woot-label
-        v-for="label in labels"
-        :key="label.id"
-        :title="label.name"
-        :description="label.description"
-        :color="label.color"
-        variant="smooth"
-        small
-      />
-    </div>
-    <div class="flex items-center">
-      <span class="text-xs text-n-slate-11">
-        {{
-          $t('INTEGRATION_SETTINGS.LINEAR.ISSUE.CREATED_AT', {
-            createdAt: formattedDate,
-          })
-        }}
-      </span>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
index 655efa602..141f6d75a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { inject } from 'vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
@@ -15,8 +14,6 @@ const props = defineProps({
 
 const emit = defineEmits(['unlinkIssue']);
 
-const isUnlinking = inject('isUnlinking');
-
 const unlinkIssue = () => {
   emit('unlinkIssue');
 };
@@ -27,36 +24,33 @@ const openIssue = () => {
 </script>
 
 <template>
-  <div class="flex flex-row justify-between">
+  <div class="flex items-center justify-between">
     <div
-      class="flex items-center justify-center gap-1 h-[24px] px-2 py-1 border rounded-lg border-ash-200"
+      class="flex items-center gap-2 px-2 py-1.5 border rounded-lg border-n-strong"
     >
-      <fluent-icon
-        icon="linear"
-        size="19"
-        class="text-[#5E6AD2]"
-        view-box="0 0 19 19"
-      />
-      <span class="text-xs font-medium text-ash-900">{{ identifier }}</span>
-    </div>
-    <div class="flex items-center gap-1">
+      <div class="flex items-center gap-1">
+        <fluent-icon
+          icon="linear"
+          size="16"
+          class="text-[#5E6AD2]"
+          view-box="0 0 19 19"
+        />
+        <span class="text-xs font-medium text-n-slate-12">
+          {{ identifier }}
+        </span>
+      </div>
+      <span class="w-px h-3 text-n-weak bg-n-weak" />
+
       <Button
-        ghost
+        link
         xs
         slate
-        icon="i-lucide-unlink"
-        class="!transition-none"
-        :is-loading="isUnlinking"
-        @click="unlinkIssue"
-      />
-      <Button
-        ghost
-        xs
-        slate
-        class="!transition-none"
         icon="i-lucide-arrow-up-right"
+        class="!size-4"
         @click="openIssue"
       />
     </div>
+
+    <Button ghost xs slate icon="i-lucide-unlink" @click="unlinkIssue" />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/IssuesList.vue b/app/javascript/dashboard/components/widgets/conversation/linear/IssuesList.vue
new file mode 100644
index 000000000..160394142
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/IssuesList.vue
@@ -0,0 +1,132 @@
+<script setup>
+import { computed, ref, onMounted, watch } from 'vue';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useStoreGetters } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import LinearAPI from 'dashboard/api/integrations/linear';
+import CreateOrLinkIssue from './CreateOrLinkIssue.vue';
+import LinearIssueItem from './LinearIssueItem.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import { LINEAR_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
+
+const props = defineProps({
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const getters = useStoreGetters();
+
+const linkedIssues = ref([]);
+const isLoading = ref(false);
+const shouldShowCreateModal = ref(false);
+
+const currentAccountId = getters.getCurrentAccountId;
+
+const conversation = computed(
+  () => getters.getConversationById.value(props.conversationId) || {}
+);
+
+const hasIssues = computed(() => linkedIssues.value.length > 0);
+
+const loadLinkedIssues = async () => {
+  isLoading.value = true;
+  linkedIssues.value = [];
+  try {
+    const response = await LinearAPI.getLinkedIssue(props.conversationId);
+    linkedIssues.value = response.data || [];
+  } catch (error) {
+    // Silent fail - not critical for UX
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const unlinkIssue = async linkId => {
+  try {
+    await LinearAPI.unlinkIssue(linkId);
+    useTrack(LINEAR_EVENTS.UNLINK_ISSUE);
+    linkedIssues.value = linkedIssues.value.filter(
+      issue => issue.id !== linkId
+    );
+    useAlert(t('INTEGRATION_SETTINGS.LINEAR.UNLINK.SUCCESS'));
+  } catch (error) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.UNLINK.ERROR')
+    );
+    useAlert(errorMessage);
+  }
+};
+
+const openCreateModal = () => {
+  shouldShowCreateModal.value = true;
+};
+
+const closeCreateModal = () => {
+  shouldShowCreateModal.value = false;
+  loadLinkedIssues();
+};
+
+watch(
+  () => props.conversationId,
+  () => {
+    loadLinkedIssues();
+  }
+);
+
+onMounted(() => {
+  loadLinkedIssues();
+});
+</script>
+
+<template>
+  <div>
+    <div class="px-4 pt-3 pb-2">
+      <NextButton
+        ghost
+        xs
+        icon="i-lucide-plus"
+        :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK_BUTTON')"
+        @click="openCreateModal"
+      />
+    </div>
+
+    <div v-if="isLoading" class="flex justify-center p-8">
+      <Spinner />
+    </div>
+
+    <div v-else-if="!hasIssues" class="flex justify-center p-4">
+      <p class="text-sm text-n-slate-11">
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.NO_LINKED_ISSUES') }}
+      </p>
+    </div>
+
+    <div v-else class="max-h-[300px] overflow-y-auto">
+      <LinearIssueItem
+        v-for="linkedIssue in linkedIssues"
+        :key="linkedIssue.id"
+        class="pt-3 px-4 pb-4 border-b border-n-weak last:border-b-0"
+        :linked-issue="linkedIssue"
+        @unlink-issue="unlinkIssue"
+      />
+    </div>
+
+    <woot-modal
+      v-model:show="shouldShowCreateModal"
+      :on-close="closeCreateModal"
+      :close-on-backdrop-click="false"
+      class="!items-start [&>div]:!top-12 [&>div]:sticky"
+    >
+      <CreateOrLinkIssue
+        :conversation="conversation"
+        :account-id="currentAccountId"
+        @close="closeCreateModal"
+      />
+    </woot-modal>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinearIssueItem.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinearIssueItem.vue
new file mode 100644
index 000000000..e9d1ca500
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinearIssueItem.vue
@@ -0,0 +1,111 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
+import IssueHeader from './IssueHeader.vue';
+
+const props = defineProps({
+  linkedIssue: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['unlinkIssue']);
+
+const priorityMap = {
+  1: 'Urgent',
+  2: 'High',
+  3: 'Medium',
+  4: 'Low',
+};
+
+const issue = computed(() => props.linkedIssue.issue);
+
+const assignee = computed(() => {
+  const assigneeDetails = issue.value.assignee;
+  if (!assigneeDetails) return null;
+  return {
+    name: assigneeDetails.name,
+    thumbnail: assigneeDetails.avatarUrl,
+  };
+});
+
+const labels = computed(() => issue.value.labels?.nodes || []);
+
+const priorityLabel = computed(() => priorityMap[issue.value.priority]);
+
+const unlinkIssue = () => {
+  emit('unlinkIssue', props.linkedIssue.id);
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col w-full">
+      <IssueHeader
+        :identifier="issue.identifier"
+        :link-id="linkedIssue.id"
+        :issue-url="issue.url"
+        @unlink-issue="unlinkIssue"
+      />
+
+      <h3 class="mt-2 text-sm font-medium text-n-slate-12">
+        {{ issue.title }}
+      </h3>
+
+      <p
+        v-if="issue.description"
+        class="mt-1 text-sm text-n-slate-11 line-clamp-3"
+      >
+        {{ issue.description }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <div v-if="assignee" class="flex items-center gap-1.5">
+          <Avatar :src="assignee.thumbnail" :name="assignee.name" :size="16" />
+          <span class="text-xs capitalize truncate text-n-slate-12">
+            {{ assignee.name }}
+          </span>
+        </div>
+
+        <div v-if="assignee" class="w-px h-3 bg-n-slate-4" />
+
+        <div class="flex items-center gap-1">
+          <Icon
+            icon="i-lucide-activity"
+            class="size-4"
+            :style="{ color: issue.state?.color }"
+          />
+          <span class="text-xs text-n-slate-12">
+            {{ issue.state?.name }}
+          </span>
+        </div>
+
+        <div v-if="priorityLabel" class="w-px h-3 bg-n-slate-4" />
+
+        <div v-if="priorityLabel" class="flex items-center gap-1.5">
+          <CardPriorityIcon :priority="priorityLabel.toLowerCase()" />
+          <span class="text-xs text-n-slate-12">
+            {{ priorityLabel }}
+          </span>
+        </div>
+      </div>
+
+      <div v-if="labels.length" class="flex flex-wrap">
+        <woot-label
+          v-for="label in labels"
+          :key="label.id"
+          :title="label.name"
+          :description="label.description"
+          :color="label.color"
+          variant="smooth"
+          small
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinearSetupCTA.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinearSetupCTA.vue
new file mode 100644
index 000000000..f7394a092
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinearSetupCTA.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { computed } from 'vue';
+import { useStoreGetters } from 'dashboard/composables/store';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+
+const { isAdmin } = useAdmin();
+const getters = useStoreGetters();
+const accountId = getters.getCurrentAccountId;
+
+const integrationId = 'linear';
+
+const actionURL = computed(() =>
+  frontendURL(
+    `accounts/${accountId.value}/settings/integrations/${integrationId}`
+  )
+);
+
+const openLinearAccount = () => {
+  window.open(actionURL.value, '_blank');
+};
+</script>
+
+<template>
+  <div class="flex flex-col p-3">
+    <div class="w-12 h-12 mb-3">
+      <img
+        :src="`/dashboard/images/integrations/${integrationId}.png`"
+        class="object-contain w-full h-full border rounded-md shadow-sm border-n-weak dark:hidden dark:bg-n-alpha-2"
+      />
+      <img
+        :src="`/dashboard/images/integrations/${integrationId}-dark.png`"
+        class="hidden object-contain w-full h-full border rounded-md shadow-sm border-n-weak dark:block"
+      />
+    </div>
+
+    <div class="flex-1 mb-4">
+      <h3 class="mb-1.5 text-sm font-medium text-n-slate-12">
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.CTA.TITLE') }}
+      </h3>
+      <p v-if="isAdmin" class="text-sm text-n-slate-11">
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.CTA.DESCRIPTION') }}
+      </p>
+      <p v-else class="text-sm text-n-slate-11">
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.CTA.AGENT_DESCRIPTION') }}
+      </p>
+    </div>
+
+    <NextButton v-if="isAdmin" faded slate @click="openLinearAccount">
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.CTA.BUTTON_TEXT') }}
+    </NextButton>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
deleted file mode 100644
index f7c12fcdf..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<script setup>
-import { computed, ref, onMounted, watch, defineOptions, provide } from 'vue';
-import { useAlert } from 'dashboard/composables';
-import { useStoreGetters } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import LinearAPI from 'dashboard/api/integrations/linear';
-import CreateOrLinkIssue from './CreateOrLinkIssue.vue';
-import Issue from './Issue.vue';
-import { useTrack } from 'dashboard/composables';
-import { LINEAR_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  conversationId: {
-    type: [Number, String],
-    required: true,
-  },
-  parentWidth: {
-    type: Number,
-    default: 10000,
-  },
-});
-
-defineOptions({
-  name: 'Linear',
-});
-
-const getters = useStoreGetters();
-const { t } = useI18n();
-
-const linkedIssue = ref(null);
-const shouldShow = ref(false);
-const shouldShowPopup = ref(false);
-const isUnlinking = ref(false);
-
-provide('isUnlinking', isUnlinking);
-
-const currentAccountId = getters.getCurrentAccountId;
-
-const conversation = computed(() =>
-  getters.getConversationById.value(props.conversationId)
-);
-
-const tooltipText = computed(() => {
-  return linkedIssue.value === null
-    ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK_BUTTON')
-    : null;
-});
-
-const loadLinkedIssue = async () => {
-  linkedIssue.value = null;
-  try {
-    const response = await LinearAPI.getLinkedIssue(props.conversationId);
-    const issues = response.data;
-    linkedIssue.value = issues && issues.length ? issues[0] : null;
-  } catch (error) {
-    // We don't want to show an error message here, as it's not critical. When someone clicks on the Linear icon, we can inform them that the integration is disabled.
-  }
-};
-
-const unlinkIssue = async linkId => {
-  try {
-    isUnlinking.value = true;
-    await LinearAPI.unlinkIssue(linkId);
-    useTrack(LINEAR_EVENTS.UNLINK_ISSUE);
-    linkedIssue.value = null;
-    useAlert(t('INTEGRATION_SETTINGS.LINEAR.UNLINK.SUCCESS'));
-  } catch (error) {
-    const errorMessage = parseLinearAPIErrorResponse(
-      error,
-      t('INTEGRATION_SETTINGS.LINEAR.UNLINK.ERROR')
-    );
-    useAlert(errorMessage);
-  } finally {
-    isUnlinking.value = false;
-  }
-};
-
-const shouldShowIssueIdentifier = computed(() => {
-  if (!linkedIssue.value) {
-    return false;
-  }
-
-  return props.parentWidth > 600;
-});
-
-const openIssue = () => {
-  if (!linkedIssue.value) shouldShowPopup.value = true;
-  shouldShow.value = true;
-};
-
-const closePopup = () => {
-  shouldShowPopup.value = false;
-  loadLinkedIssue();
-};
-
-const closeIssue = () => {
-  shouldShow.value = false;
-};
-
-watch(
-  () => props.conversationId,
-  () => {
-    loadLinkedIssue();
-  }
-);
-
-onMounted(() => {
-  loadLinkedIssue();
-});
-</script>
-
-<template>
-  <div
-    class="relative after:content-[''] after:h-5 after:bg-transparent after:top-5 after:w-full after:block after:absolute after:z-0"
-    :class="{ group: linkedIssue }"
-  >
-    <Button
-      v-on-clickaway="closeIssue"
-      v-tooltip="tooltipText"
-      sm
-      ghost
-      slate
-      class="!gap-1 group-hover:bg-n-alpha-2"
-      @click="openIssue"
-    >
-      <fluent-icon
-        icon="linear"
-        size="19"
-        class="text-[#5E6AD2] flex-shrink-0"
-        view-box="0 0 19 19"
-      />
-      <span
-        v-if="shouldShowIssueIdentifier"
-        class="text-xs font-medium text-n-slate-11"
-      >
-        {{ linkedIssue.issue.identifier }}
-      </span>
-    </Button>
-    <Issue
-      v-if="linkedIssue"
-      :issue="linkedIssue.issue"
-      :link-id="linkedIssue.id"
-      class="absolute start-0 xl:start-auto xl:end-0 top-9 invisible group-hover:visible"
-      @unlink-issue="unlinkIssue"
-    />
-    <woot-modal
-      v-model:show="shouldShowPopup"
-      :on-close="closePopup"
-      :close-on-backdrop-click="false"
-      class="!items-start [&>div]:!top-12 [&>div]:sticky"
-    >
-      <CreateOrLinkIssue
-        :conversation="conversation"
-        :account-id="currentAccountId"
-        @close="closePopup"
-      />
-    </woot-modal>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/composables/useUISettings.js b/app/javascript/dashboard/composables/useUISettings.js
index 29fe878c7..964c615ad 100644
--- a/app/javascript/dashboard/composables/useUISettings.js
+++ b/app/javascript/dashboard/composables/useUISettings.js
@@ -9,6 +9,7 @@ export const DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER = Object.freeze([
   { name: 'contact_notes' },
   { name: 'previous_conversation' },
   { name: 'conversation_participants' },
+  { name: 'linear_issues' },
   { name: 'shopify_orders' },
 ]);
 
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index fdb7fc07a..c047f17ad 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -308,6 +308,7 @@
       "CONTACT_ATTRIBUTES": "Contact Attributes",
       "PREVIOUS_CONVERSATION": "Previous Conversations",
       "MACROS": "Macros",
+      "LINEAR_ISSUES": "Linked Linear Issues",
       "SHOPIFY_ORDERS": "Shopify Orders"
     },
     "SHOPIFY": {
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index cfa46867c..071c95604 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -315,11 +315,18 @@
         "SUCCESS": "Issue unlinked successfully",
         "ERROR": "There was an error unlinking the issue, please try again"
       },
+      "NO_LINKED_ISSUES": "No linked issues found",
       "DELETE": {
         "TITLE": "Are you sure you want to delete the integration?",
         "MESSAGE": "Are you sure you want to delete the integration?",
         "CONFIRM": "Yes, delete",
         "CANCEL": "Cancel"
+      },
+      "CTA": {
+        "TITLE": "Connect to Linear",
+        "AGENT_DESCRIPTION": "Linear workspace is not connected. Request your administrator to connect a workspace to use this integration.",
+        "DESCRIPTION": "Linear workspace is not connected. Click the button below to connect your workspace to use this integration.",
+        "BUTTON_TEXT": "Connect Linear workspace"
       }
     }
   },
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 212d9219b..d7f99802c 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -19,6 +19,9 @@ import Draggable from 'vuedraggable';
 import MacrosList from './Macros/List.vue';
 import ShopifyOrdersList from 'dashboard/components/widgets/conversation/ShopifyOrdersList.vue';
 import SidebarActionsHeader from 'dashboard/components-next/SidebarActionsHeader.vue';
+import LinearIssuesList from 'dashboard/components/widgets/conversation/linear/IssuesList.vue';
+import LinearSetupCTA from 'dashboard/components/widgets/conversation/linear/LinearSetupCTA.vue';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 const props = defineProps({
   conversationId: {
@@ -40,6 +43,13 @@ const {
 
 const dragging = ref(false);
 const conversationSidebarItems = ref([]);
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
 const shopifyIntegration = useFunctionGetter(
   'integrations/getIntegration',
   'shopify'
@@ -49,6 +59,20 @@ const isShopifyFeatureEnabled = computed(
   () => shopifyIntegration.value.enabled
 );
 
+const linearIntegration = useFunctionGetter(
+  'integrations/getIntegration',
+  'linear'
+);
+
+const isLinearIntegrationEnabled = computed(
+  () => linearIntegration.value?.enabled || false
+);
+
+const isLinearFeatureEnabled = isFeatureEnabledonAccount.value(
+  currentAccountId.value,
+  FEATURE_FLAGS.LINEAR
+);
+
 const store = useStore();
 const currentChat = useMapGetter('getSelectedChat');
 const conversationId = computed(() => props.conversationId);
@@ -103,6 +127,8 @@ onMounted(() => {
   conversationSidebarItems.value = conversationSidebarItemsOrder.value;
   getContactDetails();
   store.dispatch('attributes/get', 0);
+  // Load integrations to ensure linear integration state is available
+  store.dispatch('integrations/get', 'linear');
 });
 </script>
 
@@ -113,7 +139,7 @@ onMounted(() => {
       @close="closeContactPanel"
     />
     <ContactInfo :contact="contact" :channel-type="channelType" />
-    <div class="list-group pb-8">
+    <div class="pb-8 list-group px-2">
       <Draggable
         :list="conversationSidebarItems"
         animation="200"
@@ -125,140 +151,151 @@ onMounted(() => {
         @end="onDragEnd"
       >
         <template #item="{ element }">
-          <div :key="element.name" class="px-2">
-            <div
-              v-if="element.name === 'conversation_actions'"
-              class="conversation--actions"
-            >
-              <AccordionItem
-                :title="
-                  $t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_ACTIONS')
-                "
-                :is-open="isContactSidebarItemOpen('is_conv_actions_open')"
-                @toggle="
-                  value => toggleSidebarUIState('is_conv_actions_open', value)
-                "
-              >
-                <ConversationAction
-                  :conversation-id="conversationId"
-                  :inbox-id="inboxId"
-                />
-              </AccordionItem>
-            </div>
-            <div
-              v-else-if="element.name === 'conversation_participants'"
-              class="conversation--actions"
-            >
-              <AccordionItem
-                :title="$t('CONVERSATION_PARTICIPANTS.SIDEBAR_TITLE')"
-                :is-open="isContactSidebarItemOpen('is_conv_participants_open')"
-                @toggle="
-                  value =>
-                    toggleSidebarUIState('is_conv_participants_open', value)
-                "
-              >
-                <ConversationParticipant
-                  :conversation-id="conversationId"
-                  :inbox-id="inboxId"
-                />
-              </AccordionItem>
-            </div>
-            <div v-else-if="element.name === 'conversation_info'">
-              <AccordionItem
-                :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_INFO')"
-                :is-open="isContactSidebarItemOpen('is_conv_details_open')"
-                compact
-                @toggle="
-                  value => toggleSidebarUIState('is_conv_details_open', value)
-                "
-              >
-                <ConversationInfo
-                  :conversation-attributes="conversationAdditionalAttributes"
-                  :contact-attributes="contactAdditionalAttributes"
-                />
-              </AccordionItem>
-            </div>
-            <div v-else-if="element.name === 'contact_attributes'">
-              <AccordionItem
-                :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
-                :is-open="
-                  isContactSidebarItemOpen('is_contact_attributes_open')
-                "
-                compact
-                @toggle="
-                  value =>
-                    toggleSidebarUIState('is_contact_attributes_open', value)
-                "
-              >
-                <CustomAttributes
-                  attribute-type="contact_attribute"
-                  attribute-from="conversation_contact_panel"
-                  :contact-id="contact.id"
-                  :empty-state-message="
-                    $t('CONVERSATION_CUSTOM_ATTRIBUTES.NO_RECORDS_FOUND')
-                  "
-                />
-              </AccordionItem>
-            </div>
-            <div v-else-if="element.name === 'previous_conversation'">
-              <AccordionItem
-                v-if="contact.id"
-                :title="
-                  $t('CONVERSATION_SIDEBAR.ACCORDION.PREVIOUS_CONVERSATION')
-                "
-                :is-open="isContactSidebarItemOpen('is_previous_conv_open')"
-                compact
-                @toggle="
-                  value => toggleSidebarUIState('is_previous_conv_open', value)
-                "
-              >
-                <ContactConversations
-                  :contact-id="contact.id"
-                  :conversation-id="conversationId"
-                />
-              </AccordionItem>
-            </div>
-            <woot-feature-toggle
-              v-else-if="element.name === 'macros'"
-              feature-key="macros"
-            >
-              <AccordionItem
-                :title="$t('CONVERSATION_SIDEBAR.ACCORDION.MACROS')"
-                :is-open="isContactSidebarItemOpen('is_macro_open')"
-                compact
-                @toggle="value => toggleSidebarUIState('is_macro_open', value)"
-              >
-                <MacrosList :conversation-id="conversationId" />
-              </AccordionItem>
-            </woot-feature-toggle>
-            <div
-              v-else-if="
-                element.name === 'shopify_orders' && isShopifyFeatureEnabled
+          <div
+            v-if="element.name === 'conversation_actions'"
+            class="conversation--actions"
+          >
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_ACTIONS')"
+              :is-open="isContactSidebarItemOpen('is_conv_actions_open')"
+              @toggle="
+                value => toggleSidebarUIState('is_conv_actions_open', value)
               "
             >
-              <AccordionItem
-                :title="$t('CONVERSATION_SIDEBAR.ACCORDION.SHOPIFY_ORDERS')"
-                :is-open="isContactSidebarItemOpen('is_shopify_orders_open')"
-                compact
-                @toggle="
-                  value => toggleSidebarUIState('is_shopify_orders_open', value)
+              <ConversationAction
+                :conversation-id="conversationId"
+                :inbox-id="inboxId"
+              />
+            </AccordionItem>
+          </div>
+          <div
+            v-else-if="element.name === 'conversation_participants'"
+            class="conversation--actions"
+          >
+            <AccordionItem
+              :title="$t('CONVERSATION_PARTICIPANTS.SIDEBAR_TITLE')"
+              :is-open="isContactSidebarItemOpen('is_conv_participants_open')"
+              @toggle="
+                value =>
+                  toggleSidebarUIState('is_conv_participants_open', value)
+              "
+            >
+              <ConversationParticipant
+                :conversation-id="conversationId"
+                :inbox-id="inboxId"
+              />
+            </AccordionItem>
+          </div>
+          <div v-else-if="element.name === 'conversation_info'">
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_INFO')"
+              :is-open="isContactSidebarItemOpen('is_conv_details_open')"
+              compact
+              @toggle="
+                value => toggleSidebarUIState('is_conv_details_open', value)
+              "
+            >
+              <ConversationInfo
+                :conversation-attributes="conversationAdditionalAttributes"
+                :contact-attributes="contactAdditionalAttributes"
+              />
+            </AccordionItem>
+          </div>
+          <div v-else-if="element.name === 'contact_attributes'">
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
+              :is-open="isContactSidebarItemOpen('is_contact_attributes_open')"
+              compact
+              @toggle="
+                value =>
+                  toggleSidebarUIState('is_contact_attributes_open', value)
+              "
+            >
+              <CustomAttributes
+                attribute-type="contact_attribute"
+                attribute-from="conversation_contact_panel"
+                :contact-id="contact.id"
+                :empty-state-message="
+                  $t('CONVERSATION_CUSTOM_ATTRIBUTES.NO_RECORDS_FOUND')
                 "
-              >
-                <ShopifyOrdersList :contact-id="contactId" />
-              </AccordionItem>
-            </div>
-            <div v-else-if="element.name === 'contact_notes'">
-              <AccordionItem
-                :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_NOTES')"
-                :is-open="isContactSidebarItemOpen('is_contact_notes_open')"
-                compact
-                @toggle="
-                  value => toggleSidebarUIState('is_contact_notes_open', value)
-                "
-              >
-                <ContactNotes :contact-id="contactId" />
-              </AccordionItem>
-            </div>
+              />
+            </AccordionItem>
+          </div>
+          <div v-else-if="element.name === 'previous_conversation'">
+            <AccordionItem
+              v-if="contact.id"
+              :title="
+                $t('CONVERSATION_SIDEBAR.ACCORDION.PREVIOUS_CONVERSATION')
+              "
+              :is-open="isContactSidebarItemOpen('is_previous_conv_open')"
+              compact
+              @toggle="
+                value => toggleSidebarUIState('is_previous_conv_open', value)
+              "
+            >
+              <ContactConversations
+                :contact-id="contact.id"
+                :conversation-id="conversationId"
+              />
+            </AccordionItem>
+          </div>
+          <woot-feature-toggle
+            v-else-if="element.name === 'macros'"
+            feature-key="macros"
+          >
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.MACROS')"
+              :is-open="isContactSidebarItemOpen('is_macro_open')"
+              compact
+              @toggle="value => toggleSidebarUIState('is_macro_open', value)"
+            >
+              <MacrosList :conversation-id="conversationId" />
+            </AccordionItem>
+          </woot-feature-toggle>
+          <div
+            v-else-if="
+              element.name === 'linear_issues' && isLinearFeatureEnabled
+            "
+          >
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.LINEAR_ISSUES')"
+              :is-open="isContactSidebarItemOpen('is_linear_issues_open')"
+              compact
+              @toggle="
+                value => toggleSidebarUIState('is_linear_issues_open', value)
+              "
+            >
+              <LinearSetupCTA v-if="!isLinearIntegrationEnabled" />
+              <LinearIssuesList v-else :conversation-id="conversationId" />
+            </AccordionItem>
+          </div>
+          <div
+            v-else-if="
+              element.name === 'shopify_orders' && isShopifyFeatureEnabled
+            "
+          >
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.SHOPIFY_ORDERS')"
+              :is-open="isContactSidebarItemOpen('is_shopify_orders_open')"
+              compact
+              @toggle="
+                value => toggleSidebarUIState('is_shopify_orders_open', value)
+              "
+            >
+              <ShopifyOrdersList :contact-id="contactId" />
+            </AccordionItem>
+          </div>
+          <div v-else-if="element.name === 'contact_notes'">
+            <AccordionItem
+              :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_NOTES')"
+              :is-open="isContactSidebarItemOpen('is_contact_notes_open')"
+              compact
+              @toggle="
+                value => toggleSidebarUIState('is_contact_notes_open', value)
+              "
+            >
+              <ContactNotes :contact-id="contactId" />
+            </AccordionItem>
           </div>
         </template>
       </Draggable>

From c0d9533b3a3a5bfb07584ff23cc68290ff939021 Mon Sep 17 00:00:00 2001
From: Uchkun Rakhimov <uchkunrakhimov@gmail.com>
Date: Wed, 11 Jun 2025 02:31:28 +0500
Subject: [PATCH 4/4] feat: add support for telegram circular video messages
 (#11504)

This PR adds support for handling Telegram's video_note messages (circular video messages), which are commonly used for short voice-style video replies in messaging.

Fixes: #11503

Co-authored-by: Sojan Jose <sojan@pepalo.com>
---
 .../telegram/incoming_message_service.rb      | 23 ++++++++++++---
 .../telegram/incoming_message_service_spec.rb | 29 +++++++++++++++++++
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/app/services/telegram/incoming_message_service.rb b/app/services/telegram/incoming_message_service.rb
index e337a03f6..3a186676e 100644
--- a/app/services/telegram/incoming_message_service.rb
+++ b/app/services/telegram/incoming_message_service.rb
@@ -94,13 +94,25 @@ class Telegram::IncomingMessageService
   end
 
   def file_content_type
-    return :image if params[:message][:photo].present? || params.dig(:message, :sticker, :thumb).present?
-    return :audio if params[:message][:voice].present? || params[:message][:audio].present?
-    return :video if params[:message][:video].present?
+    return :image if image_message?
+    return :audio if audio_message?
+    return :video if video_message?
 
     file_type(params[:message][:document][:mime_type])
   end
 
+  def image_message?
+    params[:message][:photo].present? || params.dig(:message, :sticker, :thumb).present?
+  end
+
+  def audio_message?
+    params[:message][:voice].present? || params[:message][:audio].present?
+  end
+
+  def video_message?
+    params[:message][:video].present? || params[:message][:video_note].present?
+  end
+
   def attach_files
     return unless file
 
@@ -174,6 +186,9 @@ class Telegram::IncomingMessageService
   end
 
   def visual_media_params
-    params[:message][:photo].presence&.last || params.dig(:message, :sticker, :thumb).presence || params[:message][:video].presence
+    params[:message][:photo].presence&.last ||
+      params.dig(:message, :sticker, :thumb).presence ||
+      params[:message][:video].presence ||
+      params[:message][:video_note].presence
   end
 end
diff --git a/spec/services/telegram/incoming_message_service_spec.rb b/spec/services/telegram/incoming_message_service_spec.rb
index 0702baa32..78a8e9d7c 100644
--- a/spec/services/telegram/incoming_message_service_spec.rb
+++ b/spec/services/telegram/incoming_message_service_spec.rb
@@ -179,6 +179,35 @@ describe Telegram::IncomingMessageService do
       end
     end
 
+    context 'when valid video_note messages params' do
+      it 'creates appropriate conversations, message and contacts' do
+        allow(telegram_channel.inbox.channel).to receive(:get_telegram_file_path).and_return('https://chatwoot-assets.local/sample.mov')
+        params = {
+          'update_id' => 2_342_342_343_242,
+          'message' => {
+            'video_note' => {
+              'duration' => 3,
+              'length' => 240,
+              'thumb' => {
+                'file_id' => 'AAMCBQADGQEAA4ZhXd78Xz6_c6gCzbdIkgGiXJcwwwACqwMAAp3x8Fbhf3EWamgCWAEAB20AAyEE',
+                'file_unique_id' => 'AQADqwMAAp3x8FZy',
+                'file_size' => 11_462,
+                'width' => 240,
+                'height' => 240
+              },
+              'file_id' => 'DQACAgUAAxkBAAIBY2FdJlhf8PC2E3IalXSvXWO5m8GBAALJAwACwqHgVhb0truM0uhwIQQ',
+              'file_unique_id' => 'AgADyQMAAsKh4FY',
+              'file_size' => 132_446
+            }
+          }.merge(message_params)
+        }.with_indifferent_access
+        described_class.new(inbox: telegram_channel.inbox, params: params).perform
+        expect(telegram_channel.inbox.conversations.count).not_to eq(0)
+        expect(Contact.all.first.name).to eq('Sojan Jose')
+        expect(telegram_channel.inbox.messages.first.attachments.first.file_type).to eq('video')
+      end
+    end
+
     context 'when valid voice attachment params' do
       it 'creates appropriate conversations, message and contacts' do
         allow(telegram_channel.inbox.channel).to receive(:get_telegram_file_path).and_return('https://chatwoot-assets.local/sample.ogg')