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] 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>