feat: complete pre fill title and description

- add more info on SECRET_KEY_BASE
- add a link to env variable section in selfhosted docs

Fixes https://github.com/chatwoot/chatwoot/issues/9517

.env.example

@@ -1,4 +1,9 @@
+# Learn about the various environment variables at
+# https://www.chatwoot.com/docs/self-hosted/configuration/environment-variables/#rails-production-variables
+
 # Used to verify the integrity of signed cookies. so ensure a secure value is set
+# SECRET_KEY_BASE should be alphanumeric. Avoid special characters or symbols. 
+# Use `rake secret` to generate this variable
 SECRET_KEY_BASE=replace_with_lengthy_secure_hex
 
 # Replace with the URL you are planning to use for your app
@@ -184,12 +189,6 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 # SENTRY_DSN=
 
 
-# MICROSOFT CLARITY
-# MS_CLARITY_TOKEN=xxxxxxxxx
-
-# GOOGLE_TAG_MANAGER
-# GOOGLE_TAG = GTM-XXXXXXX
-
 ## Scout
 ## https://scoutapm.com/docs/ruby/configuration
 # SCOUT_KEY=YOURKEY

app/controllers/api/v1/accounts/integrations/linear_controller.rb

@@ -88,6 +88,6 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
   end
 
   def permitted_params
-    params.permit(:team_id, :conversation_id, :issue_id, :link_id, :title, :description, :assignee_id, :priority, label_ids: [])
+    params.permit(:team_id, :project_id, :conversation_id, :issue_id, :link_id, :title, :description, :assignee_id, :priority, label_ids: [])
   end
 end

app/controllers/dashboard_controller.rb

@@ -3,6 +3,7 @@ class DashboardController < ActionController::Base
 
   before_action :set_application_pack
   before_action :set_global_config
+  before_action :set_dashboard_scripts
   around_action :switch_locale
   before_action :ensure_installation_onboarding, only: [:index]
   before_action :render_hc_if_custom_domain, only: [:index]
@@ -35,6 +36,10 @@ class DashboardController < ActionController::Base
     ).merge(app_config)
   end
 
+  def set_dashboard_scripts
+    @dashboard_scripts = GlobalConfig.get_value('DASHBOARD_SCRIPTS')
+  end
+
   def ensure_installation_onboarding
     redirect_to '/installation/onboarding' if ::Redis::Alfred.get(::Redis::Alfred::CHATWOOT_INSTALLATION_ONBOARDING)
   end

app/controllers/microsoft/callbacks_controller.rb

@@ -7,9 +7,14 @@ class Microsoft::CallbacksController < ApplicationController
       redirect_uri: "#{base_url}/microsoft/callback"
     )
 
-    inbox = find_or_create_inbox
+    inbox, already_exists = find_or_create_inbox
     ::Redis::Alfred.delete(users_data['email'].downcase)
-    redirect_to app_microsoft_inbox_agents_url(account_id: account.id, inbox_id: inbox.id)
+
+    if already_exists
+      redirect_to app_microsoft_inbox_settings_url(account_id: account.id, inbox_id: inbox.id)
+    else
+      redirect_to app_microsoft_inbox_agents_url(account_id: account.id, inbox_id: inbox.id)
+    end
   rescue StandardError => e
     ChatwootExceptionTracker.new(e).capture_exception
     redirect_to '/'
@@ -40,9 +45,17 @@ class Microsoft::CallbacksController < ApplicationController
 
   def find_or_create_inbox
     channel_email = Channel::Email.find_by(email: users_data['email'], account: account)
+    # we need this value to know where to redirect on sucessful processing of the callback
+    channel_exists = channel_email.present?
+
     channel_email ||= create_microsoft_channel_with_inbox
     update_microsoft_channel(channel_email)
-    channel_email.inbox
+
+    # reauthorize channel, this code path only triggers when microsoft auth is successful
+    # reauthorized will also update cache keys for the associated inbox
+    channel_email.reauthorized!
+
+    [channel_email.inbox, channel_exists]
   end
 
   # Fallback name, for when name field is missing from users_data

app/javascript/dashboard/api/integrations/linear.js

@@ -0,0 +1,47 @@
+/* global axios */
+
+import ApiClient from '../ApiClient';
+
+class LinearAPI extends ApiClient {
+  constructor() {
+    super('integrations/linear', { accountScoped: true });
+  }
+
+  getTeams() {
+    return axios.get(`${this.url}/teams`);
+  }
+
+  getTeamEntities(teamId) {
+    return axios.get(`${this.url}/team_entities?team_id=${teamId}`);
+  }
+
+  createIssue(data) {
+    return axios.post(`${this.url}/create_issue`, data);
+  }
+
+  link_issue(conversationId, issueId, title) {
+    return axios.post(`${this.url}/link_issue`, {
+      issue_id: issueId,
+      conversation_id: conversationId,
+      title: title,
+    });
+  }
+
+  getLinkedIssue(conversationId) {
+    return axios.get(
+      `${this.url}/linked_issues?conversation_id=${conversationId}`
+    );
+  }
+
+  unlinkIssue(linkId) {
+    return axios.post(`${this.url}/unlink_issue`, {
+      link_id: linkId,
+    });
+  }
+
+  searchIssues(query) {
+    return axios.get(`${this.url}/search_issue?q=${query}`);
+  }
+}
+
+export default new LinearAPI();

app/javascript/dashboard/api/integrations/openapi.js

@@ -29,6 +29,7 @@ class OpenAIAPI extends ApiClient {
       'summarize',
       'reply_suggestion',
       'label_suggestion',
+      'summary_with_title',
     ];
 
     /**

app/javascript/dashboard/api/specs/integrations/linear.spec.js

@@ -0,0 +1,202 @@
+import LinearAPIClient from '../../integrations/linear';
+import ApiClient from '../../ApiClient';
+
+describe('#linearAPI', () => {
+  it('creates correct instance', () => {
+    expect(LinearAPIClient).toBeInstanceOf(ApiClient);
+    expect(LinearAPIClient).toHaveProperty('getTeams');
+    expect(LinearAPIClient).toHaveProperty('getTeamEntities');
+    expect(LinearAPIClient).toHaveProperty('createIssue');
+    expect(LinearAPIClient).toHaveProperty('link_issue');
+    expect(LinearAPIClient).toHaveProperty('getLinkedIssue');
+    expect(LinearAPIClient).toHaveProperty('unlinkIssue');
+    expect(LinearAPIClient).toHaveProperty('searchIssues');
+  });
+
+  describe('getTeams', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      LinearAPIClient.getTeams();
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/teams'
+      );
+    });
+  });
+
+  describe('getTeamEntities', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      LinearAPIClient.getTeamEntities(1);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/team_entities?team_id=1'
+      );
+    });
+  });
+
+  describe('createIssue', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      const issueData = {
+        title: 'New Issue',
+        description: 'Issue description',
+      };
+      LinearAPIClient.createIssue(issueData);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/create_issue',
+        issueData
+      );
+    });
+  });
+
+  describe('link_issue', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      LinearAPIClient.link_issue(1, 2);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/link_issue',
+        {
+          issue_id: 2,
+          conversation_id: 1,
+        }
+      );
+    });
+  });
+
+  describe('getLinkedIssue', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      LinearAPIClient.getLinkedIssue(1);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/linked_issues?conversation_id=1'
+      );
+    });
+  });
+
+  describe('unlinkIssue', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      LinearAPIClient.unlinkIssue(1);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/unlink_issue',
+        {
+          link_id: 1,
+        }
+      );
+    });
+  });
+
+  describe('searchIssues', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('creates a valid request', () => {
+      LinearAPIClient.searchIssues('query');
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/integrations/linear/search_issue?q=query'
+      );
+    });
+  });
+});

app/javascript/dashboard/components/CustomAttribute.vue

@@ -27,7 +27,7 @@
             />
           </span>
           <woot-button
-            v-if="showCopyAndDeleteButton"
+            v-if="showActions && value"
             v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
             variant="link"
             size="medium"
@@ -90,7 +90,7 @@
         </p>
         <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
           <woot-button
-            v-if="showCopyAndDeleteButton"
+            v-if="showActions && value"
             v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
             variant="link"
             size="small"
@@ -100,7 +100,7 @@
             @click="onCopy"
           />
           <woot-button
-            v-if="showEditButton"
+            v-if="showActions"
             v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
             variant="link"
             size="small"
@@ -174,12 +174,6 @@ export default {
     };
   },
   computed: {
-    showCopyAndDeleteButton() {
-      return this.value && this.showActions;
-    },
-    showEditButton() {
-      return !this.value && this.showActions;
-    },
     displayValue() {
       if (this.isAttributeTypeDate) {
         return this.value

app/javascript/dashboard/components/Modal.vue

@@ -99,7 +99,9 @@ export default {
     onMouseUp() {
       if (this.mousedDownOnBackdrop) {
         this.mousedDownOnBackdrop = false;
-        this.onClose();
+        if (this.closeOnBackdropClick) {
+          this.onClose();
+        }
       }
     },
   },

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="resolve-actions relative flex items-center justify-end">
+  <div class="relative flex items-center justify-end resolve-actions">
     <div class="button-group">
       <woot-button
         v-if="isOpen"

app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { ref, computed } from 'vue';
+import { debounce } from '@chatwoot/utils';
 import { picoSearch } from '@scmmishra/pico-search';
 import ListItemButton from './DropdownListItemButton.vue';
 import DropdownSearch from './DropdownSearch.vue';
 import DropdownEmptyState from './DropdownEmptyState.vue';
+import DropdownLoadingState from './DropdownLoadingState.vue';
 
 const props = defineProps({
   listItems: {
@@ -19,20 +21,31 @@ const props = defineProps({
     default: '',
   },
   activeFilterId: {
-    type: Number,
+    type: [String, Number],
     default: null,
   },
   showClearFilter: {
     type: Boolean,
     default: false,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  loadingPlaceholder: {
+    type: String,
+    default: '',
+  },
 });
 
+const emits = defineEmits(['on-search']);
+
 const searchTerm = ref('');
 
-const onSearch = value => {
+const onSearch = debounce(value => {
   searchTerm.value = value;
-};
+  emits('on-search', value);
+}, 300);
 
 const filteredListItems = computed(() => {
   if (!searchTerm.value) return props.listItems;
@@ -47,6 +60,16 @@ const isFilterActive = id => {
   if (!props.activeFilterId) return false;
   return id === props.activeFilterId;
 };
+
+const shouldShowLoadingState = computed(() => {
+  return (
+    props.isLoading && isDropdownListEmpty.value && props.loadingPlaceholder
+  );
+});
+
+const shouldShowEmptyState = computed(() => {
+  return !props.isLoading && isDropdownListEmpty.value;
+});
 </script>
 <template>
   <div
@@ -55,7 +78,7 @@ const isFilterActive = id => {
   >
     <slot name="search">
       <dropdown-search
-        v-if="enableSearch && listItems.length"
+        v-if="enableSearch"
         :input-value="searchTerm"
         :input-placeholder="inputPlaceholder"
         :show-clear-filter="showClearFilter"
@@ -64,8 +87,12 @@ const isFilterActive = id => {
       />
     </slot>
     <slot name="listItem">
+      <dropdown-loading-state
+        v-if="shouldShowLoadingState"
+        :message="loadingPlaceholder"
+      />
       <dropdown-empty-state
-        v-if="isDropdownListEmpty"
+        v-else-if="shouldShowEmptyState"
         :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
       />
       <list-item-button

app/javascript/dashboard/components/ui/Dropdown/DropdownLoadingState.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div
+    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
+  >
+    {{ message }}
+  </div>
+</template>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -71,6 +71,10 @@
         :class="{ 'justify-end': isContactPanelOpen }"
       >
         <SLA-card-label v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
+        <linear
+          v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
+          :conversation-id="currentChat.id"
+        />
         <more-actions :conversation-id="currentChat.id" />
       </div>
     </div>
@@ -89,6 +93,8 @@ 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';
 
 export default {
   components: {
@@ -97,6 +103,7 @@ export default {
     MoreActions,
     Thumbnail,
     SLACardLabel,
+    Linear,
   },
   mixins: [inboxMixin, agentMixin, keyboardEventListenerMixins],
   props: {
@@ -121,6 +128,9 @@ export default {
     ...mapGetters({
       uiFlags: 'inboxAssignableAgents/getUIFlags',
       currentChat: 'getSelectedChat',
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      appIntegrations: 'integrations/getAppIntegrations',
     }),
     chatMetadata() {
       return this.chat.meta;
@@ -178,6 +188,17 @@ export default {
     hasSlaPolicyId() {
       return this.chat?.sla_policy_id;
     },
+    isLinearIntegrationEnabled() {
+      return this.appIntegrations.find(
+        integration => integration.id === 'linear' && !!integration.hooks.length
+      );
+    },
+    isLinearFeatureEnabled() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.LINEAR
+      );
+    },
   },
 
   methods: {

app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue

@@ -39,7 +39,7 @@ const toggleShowAllNRT = () => {
 </script>
 <template>
   <div
-    class="absolute flex flex-col items-start bg-[#fdfdfd] dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+    class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
   >
     <span class="text-sm font-medium text-slate-900 dark:text-slate-25">
       {{ $t('SLA.EVENTS.TITLE') }}

app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue

@@ -0,0 +1,272 @@
+<template>
+  <div @submit.prevent="onSubmit">
+    <woot-input
+      v-model="formState.title"
+      :class="{ error: v$.title.$error }"
+      class="w-full"
+      :styles="{ ...inputStyles, padding: '6px 12px' }"
+      :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.LABEL')"
+      :placeholder="
+        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.PLACEHOLDER')
+      "
+      :error="nameError"
+      @input="v$.title.$touch"
+    />
+    <div class="editor-wrap">
+      <label>
+        {{
+          $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL')
+        }}
+      </label>
+      <div>
+        <woot-message-editor
+          v-model="formState.description"
+          class="message-editor"
+          :style="{ ...inputStyles, padding: '8px 12px' }"
+          :placeholder="
+            $t(
+              'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.PLACEHOLDER'
+            )
+          "
+        />
+      </div>
+    </div>
+    <label :class="{ error: v$.teamId.$error }">
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.LABEL') }}
+      <select
+        v-model="formState.teamId"
+        :style="inputStyles"
+        @change="onChangeTeam"
+      >
+        <option v-for="item in teams" :key="item.name" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+      <span v-if="v$.teamId.$error" class="message">
+        {{ teamError }}
+      </span>
+    </label>
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.ASSIGNEE.LABEL') }}
+      <select v-model="formState.assigneeId" :style="inputStyles">
+        <option v-for="item in assignees" :key="item.name" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+    </label>
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.LABEL.LABEL') }}
+      <select v-model="formState.labelId" :style="inputStyles">
+        <option v-for="item in labels" :key="item.name" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+    </label>
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PRIORITY.LABEL') }}
+      <select v-model="formState.priority" :style="inputStyles">
+        <option v-for="item in priorities" :key="item.name" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+    </label>
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PROJECT.LABEL') }}
+      <select v-model="formState.projectId" :style="inputStyles">
+        <option v-for="item in projects" :key="item.name" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+    </label>
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.STATUS.LABEL') }}
+      <select v-model="formState.stateId" :style="inputStyles">
+        <option v-for="item in statuses" :key="item.name" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+    </label>
+    <div class="flex items-center justify-end w-full gap-2 mt-8">
+      <woot-button
+        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+        @click.prevent="onClose"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
+      </woot-button>
+      <woot-button
+        :is-disabled="isSubmitDisabled"
+        class="px-4 rounded-xl"
+        :is-loading="isCreating"
+        @click.prevent="createIssue"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, computed, onMounted, ref } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAlert } from 'dashboard/composables';
+import LinearAPI from 'dashboard/api/integrations/linear';
+import validations from './validations';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
+import { inject } from 'vue';
+
+const props = defineProps({
+  accountId: {
+    type: [Number, String],
+    required: true,
+  },
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+  title: {
+    type: String,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+
+const teams = ref([]);
+const assignees = ref([]);
+const projects = ref([]);
+const labels = ref([]);
+const statuses = ref([]);
+
+const priorities = [
+  { id: 0, name: 'No priority' },
+  { id: 1, name: 'Urgent' },
+  { id: 2, name: 'High' },
+  { id: 3, name: 'Normal' },
+  { id: 4, name: 'Low' },
+];
+
+const statusDesiredOrder = [
+  'Backlog',
+  'Todo',
+  'In Progress',
+  'Done',
+  'Canceled',
+];
+
+const isCreating = ref(false);
+const inputStyles = { borderRadius: '12px', fontSize: '14px' };
+
+const formState = reactive({
+  title: '',
+  description: '',
+  teamId: '',
+  assigneeId: '',
+  labelId: '',
+  stateId: '',
+  priority: '',
+  projectId: '',
+});
+
+const v$ = useVuelidate(validations, formState);
+
+const isSubmitDisabled = computed(
+  () => v$.value.title.$invalid || isCreating.value
+);
+const nameError = computed(() =>
+  v$.value.title.$error
+    ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.REQUIRED_ERROR')
+    : ''
+);
+const teamError = computed(() =>
+  v$.value.teamId.$error
+    ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.REQUIRED_ERROR')
+    : ''
+);
+
+const onClose = () => emit('close');
+
+const getTeams = async () => {
+  try {
+    const response = await LinearAPI.getTeams();
+    teams.value = response.data;
+  } catch (error) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.LOADING_TEAM_ERROR')
+    );
+    useAlert(errorMessage);
+  }
+};
+
+const getTeamEntities = async () => {
+  try {
+    const response = await LinearAPI.getTeamEntities(formState.teamId);
+    assignees.value = response.data.users;
+    labels.value = response.data.labels;
+    projects.value = response.data.projects;
+    statuses.value = statusDesiredOrder
+      .map(name => response.data.states.find(status => status.name === name))
+      .filter(Boolean);
+  } catch (error) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.LOADING_TEAM_ENTITIES_ERROR')
+    );
+    useAlert(errorMessage);
+  }
+};
+
+const onChangeTeam = event => {
+  formState.teamId = event.target.value;
+  formState.assigneeId = '';
+  formState.stateId = '';
+  formState.labelId = '';
+  getTeamEntities();
+};
+
+const createIssue = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+
+  const payload = {
+    team_id: formState.teamId,
+    title: formState.title,
+    description: formState.description || undefined,
+    assignee_id: formState.assigneeId || undefined,
+    project_id: formState.projectId || undefined,
+    state_id: formState.stateId || undefined,
+    priority: formState.priority || undefined,
+    label_ids: formState.labelId ? [formState.labelId] : undefined,
+  };
+
+  try {
+    isCreating.value = true;
+    const response = await LinearAPI.createIssue(payload);
+    const { id: issueId } = response.data;
+    await LinearAPI.link_issue(props.conversationId, issueId, props.title);
+    useAlert(t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE_SUCCESS'));
+    onClose();
+  } catch (error) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE_ERROR')
+    );
+    useAlert(errorMessage);
+  } finally {
+    isCreating.value = false;
+  }
+};
+
+onMounted(() => {
+  getTeams();
+  if (inject('suggestedTitle')) {
+    formState.title = inject('suggestedTitle');
+  }
+  if (inject('suggestedSummary')) {
+    formState.description = inject('suggestedSummary');
+  }
+});
+</script>

app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.TITLE')"
+      :header-content="
+        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.DESCRIPTION')
+      "
+    />
+
+    <div class="flex flex-col h-auto overflow-auto">
+      <div class="flex flex-col px-8 pb-4">
+        <woot-tabs
+          class="ltr:[&>ul]:pl-0 rtl:[&>ul]:pr-0"
+          :index="selectedTabIndex"
+          @change="onClickTabChange"
+        >
+          <woot-tabs-item
+            v-for="tab in tabs"
+            :key="tab.key"
+            :name="tab.name"
+            :show-badge="false"
+          />
+        </woot-tabs>
+      </div>
+      <div v-if="selectedTabIndex === 0" class="flex flex-col px-8 pb-4">
+        <create-issue
+          :account-id="accountId"
+          :conversation-id="conversation.id"
+          :title="title"
+          @close="onClose"
+        />
+      </div>
+
+      <div v-else class="flex flex-col px-8 pb-4">
+        <link-issue
+          :conversation-id="conversation.id"
+          :title="title"
+          @close="onClose"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { useI18n } from 'dashboard/composables/useI18n';
+import { computed, ref } from 'vue';
+import LinkIssue from './LinkIssue.vue';
+import CreateIssue from './CreateIssue.vue';
+
+const props = defineProps({
+  accountId: {
+    type: [Number, String],
+    required: true,
+  },
+  conversation: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const selectedTabIndex = ref(0);
+
+const title = computed(() => {
+  const { meta: { sender: { name = null } = {} } = {} } = props.conversation;
+  return t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_TITLE', {
+    conversationId: props.conversation.id,
+    name,
+  });
+});
+
+const emits = defineEmits(['close']);
+
+const tabs = ref([
+  {
+    key: 0,
+    name: t('INTEGRATION_SETTINGS.LINEAR.CREATE'),
+  },
+  {
+    key: 1,
+    name: t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE'),
+  },
+]);
+const onClose = () => {
+  emits('close');
+};
+
+const onClickTabChange = index => {
+  selectedTabIndex.value = index;
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue

@@ -0,0 +1,123 @@
+<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 priorityMap = {
+  1: 'Urgent',
+  2: 'High',
+  3: 'Medium',
+  4: 'Low',
+};
+
+const props = defineProps({
+  issue: {
+    type: Object,
+    required: true,
+  },
+  linkId: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['unlink-issue']);
+
+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('unlink-issue', props.linkId);
+};
+</script>
+
+<template>
+  <div
+    class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-ash-200 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+  >
+    <div class="flex flex-col w-full">
+      <issue-header
+        :identifier="issue.identifier"
+        :link-id="linkId"
+        :issue-url="issue.url"
+        @unlink-issue="unlinkIssue"
+      />
+
+      <span class="mt-2 text-sm font-medium text-ash-900">
+        {{ issue.title }}
+      </span>
+      <span
+        v-if="issue.description"
+        class="mt-1 text-sm text-ash-800 line-clamp-3"
+      >
+        {{ issue.description }}
+      </span>
+    </div>
+    <div class="flex flex-row items-center h-6 gap-2">
+      <user-avatar-with-name v-if="assignee" :user="assignee" class="py-1" />
+      <div v-if="assignee" class="w-px h-3 bg-ash-200" />
+      <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-ash-900">
+          {{ issue.state.name }}
+        </h6>
+      </div>
+      <div v-if="priorityLabel" class="w-px h-3 bg-ash-200" />
+      <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-ash-900">{{ 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-ash-800">
+        {{
+          $t('INTEGRATION_SETTINGS.LINEAR.ISSUE.CREATED_AT', {
+            createdAt: formattedDate,
+          })
+        }}
+      </span>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="flex flex-row justify-between">
+    <div
+      class="flex items-center justify-center gap-1 h-[24px] px-2 py-1 border rounded-lg border-ash-200"
+    >
+      <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-0.5">
+      <woot-button
+        variant="clear"
+        color-scheme="secondary"
+        class="h-[24px]"
+        :is-loading="isUnlinking"
+        @click="unlinkIssue"
+      >
+        <fluent-icon
+          v-if="!isUnlinking"
+          icon="unlink"
+          size="12"
+          type="outline"
+          icon-lib="lucide"
+        />
+      </woot-button>
+      <woot-button
+        variant="clear"
+        class="h-[24px]"
+        color-scheme="secondary"
+        @click="openIssue"
+      >
+        <fluent-icon icon="arrow-up-right" size="14" />
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+const props = defineProps({
+  identifier: {
+    type: String,
+    required: true,
+  },
+  issueUrl: {
+    type: String,
+    required: true,
+  },
+});
+
+const isUnlinking = inject('isUnlinking');
+
+const emit = defineEmits(['unlink-issue']);
+
+const unlinkIssue = () => {
+  emit('unlink-issue');
+};
+
+const openIssue = () => {
+  window.open(props.issueUrl, '_blank');
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue

@@ -0,0 +1,143 @@
+<template>
+  <div
+    class="flex flex-col justify-between"
+    :class="shouldShowDropdown ? 'h-[256px]' : 'gap-2'"
+  >
+    <filter-button
+      right-icon="chevron-down"
+      :button-text="linkIssueTitle"
+      class="justify-between w-full bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
+      @click="toggleDropdown"
+    >
+      <template v-if="shouldShowDropdown" #dropdown>
+        <filter-list-dropdown
+          v-if="issues"
+          v-on-clickaway="toggleDropdown"
+          :show-clear-filter="false"
+          :list-items="issues"
+          :active-filter-id="selectedOption.id"
+          :is-loading="isFetching"
+          :input-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.SEARCH')"
+          :loading-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.LOADING')"
+          enable-search
+          class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
+          @on-search="onSearch"
+          @click="onSelectIssue"
+        />
+      </template>
+    </filter-button>
+    <div class="flex items-center justify-end w-full gap-2">
+      <woot-button
+        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+        @click.prevent="onClose"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
+      </woot-button>
+      <woot-button
+        :is-disabled="isSubmitDisabled"
+        class="px-4 rounded-xl"
+        :is-loading="isLinking"
+        @click.prevent="linkIssue"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.LINK.TITLE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAlert } from 'dashboard/composables';
+import LinearAPI from 'dashboard/api/integrations/linear';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
+import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
+import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
+
+const props = defineProps({
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+  title: {
+    type: String,
+    default: null,
+  },
+});
+
+const emits = defineEmits(['close']);
+
+const { t } = useI18n();
+const issues = ref([]);
+const shouldShowDropdown = ref(false);
+const selectedOption = ref({ id: null, name: '' });
+const isFetching = ref(false);
+const isLinking = ref(false);
+const searchQuery = ref('');
+
+const toggleDropdown = () => {
+  issues.value = [];
+  shouldShowDropdown.value = !shouldShowDropdown.value;
+};
+
+const linkIssueTitle = computed(() => {
+  return selectedOption.value.id
+    ? selectedOption.value.name
+    : t('INTEGRATION_SETTINGS.LINEAR.LINK.SELECT');
+});
+
+const isSubmitDisabled = computed(() => {
+  return !selectedOption.value.id || isLinking.value;
+});
+
+const onSelectIssue = item => {
+  selectedOption.value = item;
+  toggleDropdown();
+};
+
+const onClose = () => {
+  emits('close');
+};
+
+const onSearch = async value => {
+  issues.value = [];
+  if (!value) return;
+  searchQuery.value = value;
+  try {
+    isFetching.value = true;
+    const response = await LinearAPI.searchIssues(value);
+    issues.value = response.data.map(issue => ({
+      id: issue.id,
+      name: `${issue.identifier} ${issue.title}`,
+    }));
+  } catch (error) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.LINK.ERROR')
+    );
+    useAlert(errorMessage);
+  } finally {
+    isFetching.value = false;
+  }
+};
+
+const linkIssue = async () => {
+  const { id: issueId } = selectedOption.value;
+  try {
+    isLinking.value = true;
+    await LinearAPI.link_issue(props.conversationId, issueId, props.title);
+    useAlert(t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_SUCCESS'));
+    searchQuery.value = '';
+    issues.value = [];
+    onClose();
+  } catch (error) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_ERROR')
+    );
+    useAlert(errorMessage);
+  } finally {
+    isLinking.value = false;
+  }
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/linear/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="relative" :class="{ group: linkedIssue }">
+    <woot-button
+      v-on-clickaway="closeIssue"
+      v-tooltip="tooltipText"
+      variant="clear"
+      color-scheme="secondary"
+      @click="openIssue"
+    >
+      <fluent-icon
+        icon="linear"
+        size="19"
+        class="text-[#5E6AD2]"
+        view-box="0 0 19 19"
+      />
+      <span v-if="linkedIssue" class="text-xs font-medium text-ash-800">
+        {{ linkedIssue.issue.identifier }}
+      </span>
+    </woot-button>
+    <issue
+      v-if="linkedIssue"
+      :issue="linkedIssue.issue"
+      :link-id="linkedIssue.id"
+      class="absolute right-0 top-[40px] invisible group-hover:visible"
+      @unlink-issue="unlinkIssue"
+    />
+    <woot-modal
+      :show.sync="shouldShowPopup"
+      :on-close="closePopup"
+      :close-on-backdrop-click="false"
+      class="!items-start [&>div]:!top-12 [&>div]:sticky"
+    >
+      <create-or-link-issue
+        :conversation="conversation"
+        :account-id="currentAccountId"
+        @close="closePopup"
+      />
+    </woot-modal>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, watch, defineComponent, provide } from 'vue';
+import { useAlert } from 'dashboard/composables';
+import { useStoreGetters } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import LinearAPI from 'dashboard/api/integrations/linear';
+import CreateOrLinkIssue from './CreateOrLinkIssue.vue';
+import Issue from './Issue.vue';
+import OpenAPI from 'dashboard/api/integrations/openapi';
+import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
+
+defineComponent({
+  name: 'Linear',
+});
+
+const props = defineProps({
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+});
+
+const getters = useStoreGetters();
+const { t } = useI18n();
+
+const suggestedTitle = ref('');
+const suggestedSummary = ref('');
+
+const linkedIssue = ref(null);
+const shouldShow = ref(false);
+const shouldShowPopup = ref(false);
+const isUnlinking = ref(false);
+
+provide('isUnlinking', isUnlinking);
+
+provide('suggestedTitle', suggestedTitle);
+provide('suggestedSummary', suggestedSummary);
+
+const currentAccountId = getters.getCurrentAccountId;
+
+const conversation = computed(() =>
+  getters.getConversationById.value(props.conversationId)
+);
+
+const appIntegrations = getters['integrations/getAppIntegrations'];
+
+const aiIntegration = computed(() => {
+  return appIntegrations.value.find(
+    integration => integration.id === 'openai' && !!integration.hooks.length
+  )?.hooks[0];
+});
+const isAIIntegrationEnabled = computed(() => !!aiIntegration.value);
+
+const tooltipText = computed(() => {
+  return linkedIssue.value === null
+    ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK_BUTTON')
+    : null;
+});
+
+const suggestTitleAndSummary = async () => {
+  try {
+    const response = await OpenAPI.processEvent({
+      type: 'summary_with_title',
+      hookId: aiIntegration.value.id,
+      conversationId: props.conversationId,
+    });
+    const { message } = response.data;
+    const messageObject = JSON.parse(message);
+    const { title = '', description = '' } = messageObject;
+    suggestedTitle.value = title;
+    suggestedSummary.value = description;
+  } catch (error) {
+    // Since this is a non-critical operation, we don't want to show an alert to the user
+  }
+};
+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) {
+    const errorMessage = parseLinearAPIErrorResponse(
+      error,
+      t('INTEGRATION_SETTINGS.LINEAR.LOADING_ERROR')
+    );
+    useAlert(errorMessage);
+  }
+};
+
+const unlinkIssue = async linkId => {
+  try {
+    isUnlinking.value = true;
+    await LinearAPI.unlinkIssue(linkId);
+    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 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();
+  if (isAIIntegrationEnabled.value) {
+    suggestTitleAndSummary();
+  }
+});
+</script>

app/javascript/dashboard/components/widgets/conversation/linear/validations.js

@@ -0,0 +1,10 @@
+import { required } from '@vuelidate/validators';
+
+export default {
+  title: {
+    required,
+  },
+  teamId: {
+    required,
+  },
+};

app/javascript/dashboard/featureFlags.js

@@ -30,4 +30,5 @@ export const FEATURE_FLAGS = {
   EMAIL_CONTINUITY_ON_API_CHANNEL: 'email_continuity_on_api_channel',
   INBOUND_EMAILS: 'inbound_emails',
   IP_LOOKUP: 'ip_lookup',
+  LINEAR: 'linear_integration',
 };

app/javascript/dashboard/i18n/locale/en/bulkActions.json

@@ -33,7 +33,7 @@
       "NONE": "None",
       "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
       "ASSIGN_SELECTED_TEAMS": "Assign selected team.",
-      "ASSIGN_SUCCESFUL": "Teams assiged successfully.",
+      "ASSIGN_SUCCESFUL": "Teams assigned successfully.",
       "ASSIGN_FAILED": "Failed to assign team. Please try again."
     }
   }

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -2,7 +2,8 @@
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
     "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
-    "RECONNECTION_REQUIRED": "Your inbox is disconnected, you will not receive any new messages. <a class=\"underline\" href=\"%{actionUrl}\">Click here</a> to reconnect.",
+    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
+    "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
       "404": "There are no inboxes attached to this account."
     },

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -203,6 +203,87 @@
         "API_SUCCESS": "Dashboard app deleted successfully",
         "API_ERROR": "We couldn't delete the app. Please try again later"
       }
+    },
+    "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
+      "CREATE": "Create",
+      "LINK": {
+        "SEARCH": "Search issues",
+        "SELECT": "Select issue",
+        "TITLE": "Link",
+        "EMPTY_LIST": "No linear issues found",
+        "LOADING": "Loading",
+        "ERROR": "There was an error fetching the linear issues, please try again",
+        "LINK_SUCCESS": "Issue linked successfully",
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "Conversation (#%{conversationId}) with %{name}"
+      },
+      "ADD_OR_LINK": {
+        "TITLE": "Create/link linear issue",
+        "DESCRIPTION": "Create Linear issues from conversations, or link existing ones for seamless tracking.",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Enter title",
+            "REQUIRED_ERROR": "Title is required"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Enter description"
+          },
+          "TEAM": {
+            "LABEL": "Team",
+            "PLACEHOLDER": "Select team",
+            "SEARCH": "Search team",
+            "REQUIRED_ERROR": "Team is required"
+          },
+          "ASSIGNEE": {
+            "LABEL": "Assignee",
+            "PLACEHOLDER": "Select assignee",
+            "SEARCH": "Search assignee"
+          },
+          "PRIORITY": {
+            "LABEL": "Priority",
+            "PLACEHOLDER": "Select priority",
+            "SEARCH": "Search priority"
+          },
+          "LABEL": {
+            "LABEL": "Label",
+            "PLACEHOLDER": "Select label",
+            "SEARCH": "Search label"
+          },
+          "STATUS": {
+            "LABEL": "Status",
+            "PLACEHOLDER": "Select status",
+            "SEARCH": "Search status"
+          },
+          "PROJECT": {
+            "LABEL": "Project",
+            "PLACEHOLDER": "Select project",
+            "SEARCH": "Search project"
+          }
+        },
+        "CREATE": "Create",
+        "CANCEL": "Cancel",
+        "CREATE_SUCCESS": "Issue created successfully",
+        "CREATE_ERROR": "There was an error creating the issue, please try again",
+        "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
+        "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at %{createdAt}"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
+      }
     }
   }
 }

app/javascript/dashboard/mixins/uiSettings.js

@@ -15,7 +15,7 @@ export const DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER = [
 ];
 
 const slugifyChannel = name =>
-  name.toLowerCase().replace(' ', '_').replace('-', '_').replace('::', '_');
+  name?.toLowerCase().replace(' ', '_').replace('-', '_').replace('::', '_');
 
 export const isEditorHotKeyEnabled = (uiSettings, key) => {
   const {
@@ -70,6 +70,8 @@ export default {
       this.updateUISettings({ [key]: !this.isContactSidebarItemOpen(key) });
     },
     setSignatureFlagForInbox(channelType, value) {
+      if (!channelType) return;
+
       channelType = slugifyChannel(channelType);
       this.updateUISettings({
         [`${channelType}_signature_enabled`]: value,

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -145,7 +145,6 @@ import CustomAttributes from './customAttributes/CustomAttributes.vue';
 import draggable from 'vuedraggable';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import MacrosList from './Macros/List.vue';
-
 export default {
   components: {
     AccordionItem,

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -21,10 +21,7 @@
       </woot-tabs>
     </setting-intro-banner>
 
-    <inbox-reconnection-required
-      v-if="isReconnectionRequired"
-      class="mx-8 mt-5"
-    />
+    <microsoft-reauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
 
     <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
       <settings-section
@@ -440,7 +437,7 @@ import WeeklyAvailability from './components/WeeklyAvailability.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
 import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
 import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
-import InboxReconnectionRequired from './components/InboxReconnectionRequired';
+import MicrosoftReauthorize from './channels/microsoft/Reauthorize.vue';
 import WidgetBuilder from './WidgetBuilder.vue';
 import BotConfiguration from './components/BotConfiguration.vue';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
@@ -459,7 +456,7 @@ export default {
     WeeklyAvailability,
     WidgetBuilder,
     SenderNameExamplePreview,
-    InboxReconnectionRequired,
+    MicrosoftReauthorize,
   },
   mixins: [alertMixin, configMixin, inboxMixin],
   data() {
@@ -621,8 +618,8 @@ export default {
         return true;
       return false;
     },
-    isReconnectionRequired() {
-      return false;
+    microsoftUnauthorized() {
+      return this.inbox.microsoft_reauthorization;
     },
   },
   watch: {

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue

@@ -1,63 +1,44 @@
-<template>
-  <div class="mx-8">
-    <settings-section
-      :title="$t('INBOX_MGMT.MICROSOFT.TITLE')"
-      :sub-title="$t('INBOX_MGMT.MICROSOFT.SUBTITLE')"
-    >
-      <div class="mb-6">
-        <form @submit.prevent="requestAuthorization">
-          <woot-submit-button
-            icon="brand-twitter"
-            button-text="Sign in with Microsoft"
-            type="submit"
-            :loading="isRequestingAuthorization"
-          />
-        </form>
-      </div>
-    </settings-section>
-  </div>
-</template>
-<script>
-import alertMixin from 'shared/mixins/alertMixin';
-import microsoftClient from '../../../../../../api/channel/microsoftClient';
-import SettingsSection from '../../../../../../components/SettingsSection.vue';
+<script setup>
+import { ref } from 'vue';
+import InboxReconnectionRequired from '../../components/InboxReconnectionRequired';
+import microsoftClient from 'dashboard/api/channel/microsoftClient';
 
-export default {
-  components: {
-    SettingsSection,
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAlert } from 'dashboard/composables';
+
+const { t } = useI18n();
+
+const props = defineProps({
+  inbox: {
+    type: Object,
+    default: () => ({}),
   },
-  mixins: [alertMixin],
-  props: {
-    inbox: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return { isRequestingAuthorization: false };
-  },
-  methods: {
-    async requestAuthorization() {
-      try {
-        this.isRequestingAuthorization = true;
-        const response = await microsoftClient.generateAuthorization({
-          email: this.inbox.email,
-        });
-        const {
-          data: { url },
-        } = response;
-        window.location.href = url;
-      } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE'));
-      } finally {
-        this.isRequestingAuthorization = false;
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.smtp-details-wrap {
-  margin-bottom: var(--space-medium);
+});
+
+const isRequestingAuthorization = ref(false);
+
+async function requestAuthorization() {
+  try {
+    isRequestingAuthorization.value = true;
+    const response = await microsoftClient.generateAuthorization({
+      email: props.inbox.email,
+    });
+
+    const {
+      data: { url },
+    } = response;
+    window.location.href = url;
+  } catch (error) {
+    useAlert(t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE'));
+  } finally {
+    isRequestingAuthorization.value = false;
+  }
 }
-</style>
+</script>
+
+<template>
+  <inbox-reconnection-required
+    class="mx-8 mt-5"
+    @reauthorize="requestAuthorization"
+  />
+</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue

@@ -1,19 +1,14 @@
 <script setup>
-defineProps({
-  actionUrl: {
-    type: String,
-    required: true,
-  },
-});
+import Banner from 'dashboard/components/ui/Banner.vue';
 </script>
 
 <template>
-  <div
-    class="flex items-center gap-2 px-4 py-3 text-sm text-white bg-red-500 rounded-md dark:bg-red-800/30 dark:text-red-50 min-h-10"
-  >
-    <fluent-icon icon="error-circle" class="text-white dark:text-red-50" />
-    <slot>
-      <span v-html="$t('INBOX_MGMT.RECONNECTION_REQUIRED', { actionUrl })" />
-    </slot>
-  </div>
+  <banner
+    color-scheme="alert"
+    class="justify-start rounded-md"
+    :banner-message="$t('INBOX_MGMT.RECONNECTION_REQUIRED')"
+    :action-button-label="$t('INBOX_MGMT.CLICK_TO_RECONNECT')"
+    has-action-button
+    @click="$emit('reauthorize')"
+  />
 </template>

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue

@@ -104,10 +104,6 @@
     </div>
     <imap-settings :inbox="inbox" />
     <smtp-settings v-if="inbox.imap_enabled" :inbox="inbox" />
-    <microsoft-reauthorize
-      v-if="inbox.microsoft_reauthorization"
-      :inbox="inbox"
-    />
   </div>
   <div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
     <div v-if="inbox.provider_config" class="mx-8">
@@ -130,7 +126,7 @@
         "
       >
         <div
-          class="whatsapp-settings--content items-center flex flex-1 justify-between mt-2"
+          class="flex items-center justify-between flex-1 mt-2 whatsapp-settings--content"
         >
           <woot-input
             v-model.trim="whatsAppInboxAPIKey"
@@ -160,7 +156,6 @@ import inboxMixin from 'shared/mixins/inboxMixin';
 import SettingsSection from '../../../../../components/SettingsSection.vue';
 import ImapSettings from '../ImapSettings.vue';
 import SmtpSettings from '../SmtpSettings.vue';
-import MicrosoftReauthorize from '../channels/microsoft/Reauthorize.vue';
 import { required } from 'vuelidate/lib/validators';
 
 export default {
@@ -168,7 +163,6 @@ export default {
     SettingsSection,
     ImapSettings,
     SmtpSettings,
-    MicrosoftReauthorize,
   },
   mixins: [inboxMixin, alertMixin],
   props: {

app/javascript/dashboard/store/utils/api.js

@@ -96,3 +96,9 @@ export const throwErrorMessage = error => {
   const errorMessage = parseAPIErrorResponse(error);
   throw new Error(errorMessage);
 };
+
+export const parseLinearAPIErrorResponse = (error, defaultMessage) => {
+  const errorData = error.response.data;
+  const errorMessage = errorData?.error?.errors?.[0]?.message || defaultMessage;
+  return errorMessage;
+};

app/javascript/dashboard/store/utils/specs/api.spec.js

@@ -3,6 +3,7 @@ import {
   parseAPIErrorResponse,
   setLoadingStatus,
   throwErrorMessage,
+  parseLinearAPIErrorResponse,
 } from '../api';
 
 describe('#getLoadingStatus', () => {
@@ -49,3 +50,26 @@ describe('#throwErrorMessage', () => {
     expect(errorFn).toThrow('Error Message [message]');
   });
 });
+
+describe('#parseLinearAPIErrorResponse', () => {
+  it('returns correct values', () => {
+    expect(
+      parseLinearAPIErrorResponse(
+        {
+          response: {
+            data: {
+              error: {
+                errors: [
+                  {
+                    message: 'Error Message [message]',
+                  },
+                ],
+              },
+            },
+          },
+        },
+        'Default Message'
+      )
+    ).toBe('Error Message [message]');
+  });
+});

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -275,5 +275,8 @@
   "chevrons-right-outline": ["m6 17 5-5-5-5", "m13 17 5-5-5-5"],
   "chevron-right-single-outline": "m9 18 6-6-6-6",
   "avatar-upload-outline": "M19.754 11a.75.75 0 0 1 .743.648l.007.102v7a3.25 3.25 0 0 1-3.065 3.246l-.185.005h-11a3.25 3.25 0 0 1-3.244-3.066l-.006-.184V11.75a.75.75 0 0 1 1.494-.102l.006.102v7a1.75 1.75 0 0 0 1.607 1.745l.143.006h11A1.75 1.75 0 0 0 19 18.894l.005-.143V11.75a.75.75 0 0 1 .75-.75ZM6.22 7.216l4.996-4.996a.75.75 0 0 1 .976-.073l.084.072l5.005 4.997a.75.75 0 0 1-.976 1.134l-.084-.073l-3.723-3.716l.001 11.694a.75.75 0 0 1-.648.743l-.102.007a.75.75 0 0 1-.743-.648L11 16.255V4.558L7.28 8.277a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.977l.073-.084l4.996-4.996L6.22 7.216Z",
-  "text-copy-outline": "M5.503 4.627L5.5 6.75v10.504a3.25 3.25 0 0 0 3.25 3.25h8.616a2.25 2.25 0 0 1-2.122 1.5H8.75A4.75 4.75 0 0 1 4 17.254V6.75c0-.98.627-1.815 1.503-2.123M17.75 2A2.25 2.25 0 0 1 20 4.25v13a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-13A2.25 2.25 0 0 1 8.75 2zm0 1.5h-9a.75.75 0 0 0-.75.75v13c0 .414.336.75.75.75h9a.75.75 0 0 0 .75-.75v-13a.75.75 0 0 0-.75-.75"
+  "text-copy-outline": "M5.503 4.627L5.5 6.75v10.504a3.25 3.25 0 0 0 3.25 3.25h8.616a2.25 2.25 0 0 1-2.122 1.5H8.75A4.75 4.75 0 0 1 4 17.254V6.75c0-.98.627-1.815 1.503-2.123M17.75 2A2.25 2.25 0 0 1 20 4.25v13a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-13A2.25 2.25 0 0 1 8.75 2zm0 1.5h-9a.75.75 0 0 0-.75.75v13c0 .414.336.75.75.75h9a.75.75 0 0 0 .75-.75v-13a.75.75 0 0 0-.75-.75",
+  "linear-outline": "M1.17156 10.4618C1.14041 10.329 1.2986 10.2454 1.39505 10.3418L6.50679 15.4536C6.60323 15.55 6.5196 15.7082 6.38681 15.6771C3.80721 15.0719 1.77669 13.0414 1.17156 10.4618ZM1.00026 8.4131C0.997795 8.45277 1.01271 8.49149 1.0408 8.51959L8.32904 15.8078C8.35714 15.8359 8.39586 15.8509 8.43553 15.8484C8.76721 15.8277 9.09266 15.784 9.41026 15.7187C9.51729 15.6968 9.55447 15.5653 9.47721 15.488L1.36063 7.37142C1.28337 7.29416 1.15187 7.33134 1.12989 7.43837C1.06466 7.75597 1.02092 8.08142 1.00026 8.4131ZM1.58953 6.00739C1.56622 6.05972 1.57809 6.12087 1.6186 6.16139L10.6872 15.23C10.7278 15.2705 10.7889 15.2824 10.8412 15.2591C11.0913 15.1477 11.3336 15.0221 11.5672 14.8833C11.6445 14.8374 11.6564 14.7312 11.5929 14.6676L2.18099 5.25577C2.11742 5.1922 2.01121 5.20412 1.96529 5.28142C1.8265 5.51499 1.70091 5.75733 1.58953 6.00739ZM2.77222 4.37899C2.7204 4.32718 2.7172 4.24407 2.76602 4.18942C4.04913 2.75294 5.9156 1.84863 7.99327 1.84863C11.863 1.84863 15 4.98565 15 8.85536C15 10.933 14.0957 12.7995 12.6592 14.0826C12.6046 14.1314 12.5215 14.1282 12.4696 14.0764L2.77222 4.37899Z",
+  "status-outline": "m8.462 6.81l3.284 13.616c.178.737 1.211.775 1.443.054l3.257-10.122l.586 2.095a.75.75 0 0 0 .722.548h3.494a.75.75 0 0 0 0-1.5h-2.925l-1.105-3.95c-.2-.717-1.208-.736-1.436-.028l-3.203 9.957L9.224 3.574c-.182-.757-1.255-.769-1.454-.016l-2.1 7.943H2.75a.75.75 0 0 0 0 1.5h3.496a.75.75 0 0 0 .725-.558z",
+  "unlink-outline": "m18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07a5.006 5.006 0 0 0-6.95 0l-1.72 1.71m-6.58 6.57l-1.71 1.71a5.004 5.004 0 0 0 .12 7.07a5.006 5.006 0 0 0 6.95 0l1.71-1.71M8 2v3M2 8h3m11 11v3m3-6h3"
 }

app/models/concerns/reauthorizable.rb

@@ -54,6 +54,8 @@ module Reauthorizable
       update!(active: false)
       mailer.automation_rule_disabled(self).deliver_later
     end
+
+    invalidate_inbox_cache unless instance_of?(::AutomationRule)
   end
 
   def process_integration_hook_reauthorization_emails(mailer)
@@ -68,10 +70,16 @@ module Reauthorizable
   def reauthorized!
     ::Redis::Alfred.delete(authorization_error_count_key)
     ::Redis::Alfred.delete(reauthorization_required_key)
+
+    invalidate_inbox_cache unless instance_of?(::AutomationRule)
   end
 
   private
 
+  def invalidate_inbox_cache
+    inbox.update_account_cache if inbox.present?
+  end
+
   def authorization_error_count_key
     format(::Redis::Alfred::AUTHORIZATION_ERROR_COUNT, obj_type: self.class.table_name.singularize, obj_id: id)
   end

app/views/api/v1/models/_inbox.json.jbuilder

@@ -71,8 +71,11 @@ if resource.email?
     json.imap_address resource.channel.try(:imap_address)
     json.imap_port resource.channel.try(:imap_port)
     json.imap_enabled resource.channel.try(:imap_enabled)
-    json.microsoft_reauthorization resource.channel.try(:microsoft?) && resource.channel.try(:provider_config).empty?
     json.imap_enable_ssl resource.channel.try(:imap_enable_ssl)
+
+    if resource.channel.try(:microsoft?)
+      json.microsoft_reauthorization resource.channel.try(:provider_config).empty? || resource.channel.try(:reauthorization_required?)
+    end
   end
 
   ## SMTP

app/views/layouts/vueapp.html.erb

@@ -70,40 +70,8 @@
     <div id="app"></div>
     <noscript id="noscript">This app works best with JavaScript enabled.</noscript>
     <%= yield %>
-    <% if @global_config['CHATWOOT_INBOX_TOKEN'].present? %>
-    <script>
-      window.chatwootSettings = { hideMessageBubble: true, position: 'left' };
-      (function(d,t) {
-        var BASE_URL='<%= ENV.fetch('FRONTEND_URL', 'https://app.chatwoot.com') %>';
-        var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
-        g.src=BASE_URL+"/packs/js/sdk.js"; g.defer=true; g.async=true;
-        s.parentNode.insertBefore(g,s);
-        g.onload=function(){
-          window.chatwootSDK.run({
-            websiteToken: '<%= @global_config['CHATWOOT_INBOX_TOKEN'] %>',
-            baseUrl: BASE_URL,
-          });
-        }
-      })(document,"script");
-    </script>
-    <% end %>
-    <% if ENV.fetch('MS_CLARITY_TOKEN', nil).present? %>
-      <script type="text/javascript">
-          (function(c,l,a,r,i,t,y){
-              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-              t=l.createElement(r);t.async=1;t.src='https://www.clarity.ms/tag/'+i;
-              y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-          })(window, document, 'clarity', 'script', '<%= ENV.fetch('MS_CLARITY_TOKEN', '') %>');
-      </script>
-    <% end %>
-    <% if ENV.fetch('GOOGLE_TAG', nil).present? %>
-    <script>
-    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-        })(window,document,'script','dataLayer', '<%= ENV.fetch('GOOGLE_TAG', '') %>');
-    </script>
+    <% if @dashboard_scripts.present? %> 
+      <%= @dashboard_scripts.html_safe %>
     <% end %>
   </body>
 </html>

app/views/super_admin/app_configs/show.html.erb

@@ -13,18 +13,25 @@
         <div class="field-unit__label">
           <%= form.label "app_config[#{key}]", @installation_configs[key]&.dig('display_title') || key %>
         </div>
-        <div class="field-unit__field -mt-2 ">
+        <div class="-mt-2 field-unit__field ">
           <% if @installation_configs[key]&.dig('type') == 'boolean' %>
             <%= form.select "app_config[#{key}]", 
               [["True", true], ["False", false]], 
               { selected: ActiveModel::Type::Boolean.new.cast(@app_config[key]) },
               class: "mt-2 border border-slate-100 p-1 rounded-md" 
             %>
+          <% elsif @installation_configs[key]&.dig('type') == 'code' %>
+            <%= form.text_area "app_config[#{key}]", 
+                value: @app_config[key], 
+                rows: 12,
+                wrap: 'off',
+                class: "mt-2 border font-mono text-xs border-slate-100 p-1 rounded-md overflow-scroll"
+            %>
           <% else %>
             <%= form.text_field "app_config[#{key}]", value: @app_config[key] %>
           <% end %>
           <%if @installation_configs[key]&.dig('description').present? %>
-            <p class="text-slate-400 text-xs italic pt-2">
+            <p class="pt-2 text-xs italic text-slate-400">
               <%= @installation_configs[key]&.dig('description') %>
             </p>
           <% end %>

config/installation_config.yml

@@ -163,6 +163,11 @@
   value:
   display_title: 'Clearbit API Key'
   description: 'This API key is used for onboarding the users, to pre-fill account data.'
+- name: DASHBOARD_SCRIPTS
+  value:
+  display_title: 'Dashboard Scripts'
+  description: 'Scripts are loaded as the last item in the <body> tag'
+  type: code
 # ------- End of Chatwoot Internal Config for Cloud ----#
 
 # ------- Chatwoot Internal Config for Self Hosted ----#

config/routes.rb

@@ -20,6 +20,7 @@ Rails.application.routes.draw do
     get '/app/accounts/:account_id/settings/inboxes/new/microsoft', to: 'dashboard#index', as: 'app_new_microsoft_inbox'
     get '/app/accounts/:account_id/settings/inboxes/new/:inbox_id/agents', to: 'dashboard#index', as: 'app_twitter_inbox_agents'
     get '/app/accounts/:account_id/settings/inboxes/new/:inbox_id/agents', to: 'dashboard#index', as: 'app_microsoft_inbox_agents'
+    get '/app/accounts/:account_id/settings/inboxes/:inbox_id', to: 'dashboard#index', as: 'app_microsoft_inbox_settings'
 
     resource :widget, only: [:show]
     namespace :survey do

enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb

@@ -30,6 +30,6 @@ module Enterprise::SuperAdmin::AppConfigsController
   end
 
   def internal_config_options
-    %w[CHATWOOT_INBOX_TOKEN CHATWOOT_INBOX_HMAC_KEY ANALYTICS_TOKEN CLEARBIT_API_KEY]
+    %w[CHATWOOT_INBOX_TOKEN CHATWOOT_INBOX_HMAC_KEY ANALYTICS_TOKEN CLEARBIT_API_KEY DASHBOARD_SCRIPTS]
   end
 end

enterprise/lib/enterprise/integrations/openai_processor_service.rb

@@ -1,6 +1,6 @@
 module Enterprise::Integrations::OpenaiProcessorService
   ALLOWED_EVENT_NAMES = %w[rephrase summarize reply_suggestion label_suggestion fix_spelling_grammar shorten expand
-                           make_friendly make_formal simplify].freeze
+                           make_friendly make_formal simplify summary_with_title].freeze
   CACHEABLE_EVENTS = %w[label_suggestion].freeze
 
   def reply_suggestion_message
@@ -74,6 +74,17 @@ module Enterprise::Integrations::OpenaiProcessorService
     }.to_json
   end
 
+  def summarize_with_title
+    {
+      model: self.class::GPT_MODEL,
+      messages: [
+        { role: 'system',
+          content: prompt_from_file('summary_with_title', enterprise: true) },
+        { role: 'user', content: conversation_messages }
+      ]
+    }.to_json
+  end
+
   def label_suggestion_body
     return unless label_suggestions_enabled?
 

enterprise/lib/enterprise/integrations/openai_prompts/summary_with_title.txt

@@ -0,0 +1,24 @@
+As an AI-powered summarization tool, your task is to condense lengthy interactions between customer support agents and customers into a brief title and description. The objective is to provide a quick overview, enabling any agent, even those without prior context, to grasp the essence of the conversation promptly.
+
+Make sure you strongly adhere to the following rules when generating the title and description:
+
+1. **Title**
+    - Be brief and concise, ideally 5-10 words.
+    - Capture the main issue or request of the customer.
+    - Highlight key points using **bold** for important words.
+
+2. **Description**
+    - Summarize the conversation in approximately 100 words, formatted as multiple small paragraphs that are easy to read.
+    - Describe the customer's intent in around 30 words.
+    - Remove information that is not directly relevant to the customer's problem or the agent's solution. For example, personal anecdotes, small talk, etc.
+    - Don't include segments of the conversation that didn't contribute meaningful content, like greetings or farewell.
+    - Highlight key points using **bold** for important words.
+    - Use markdown syntax to format any included code, using backticks.
+    - If there are unresolved issues or outstanding questions, include them in a "Follow-up Items" section.
+
+Output the response in the following JSON format:
+
+{
+  "title": "<GENERATED_TITLE>",
+  "description": "<GENERATED_DESCRIPTION>"
+}

lib/chatwoot_markdown_renderer.rb

@@ -12,7 +12,7 @@ class ChatwootMarkdownRenderer
 
   def render_article
     markdown_renderer = CustomMarkdownRenderer.new
-    doc = CommonMarker.render_doc(@content, :DEFAULT)
+    doc = CommonMarker.render_doc(@content, :DEFAULT, [:table])
     html = markdown_renderer.render(doc)
 
     render_as_html_safe(html)

lib/integrations/openai/processor_service.rb

@@ -9,6 +9,10 @@ class Integrations::Openai::ProcessorService < Integrations::OpenaiBaseService
     make_api_call(summarize_body)
   end
 
+  def summary_with_title_message
+    make_api_call(summarize_with_title)
+  end
+
   def rephrase_message
     make_api_call(build_api_call_body("#{AGENT_INSTRUCTION} Please rephrase the following response. " \
                                       "#{LANGUAGE_INSTRUCTION}"))

lib/linear.rb

@@ -56,7 +56,8 @@ class Linear
       description: params[:description],
       assigneeId: params[:assignee_id],
       priority: params[:priority],
-      labelIds: params[:label_ids]
+      labelIds: params[:label_ids],
+      projectId: params[:project_id]
     }.compact
     mutation = Linear::Mutations.issue_create(variables)
     response = post({ query: mutation })

lib/linear/mutations.rb

@@ -3,7 +3,7 @@ module Linear::Mutations
     case value
     when String
       # Strings must be enclosed in double quotes
-      "\"#{value}\""
+      "\"#{value.gsub("\n", '\\n')}\""
     when Array
       # Arrays need to be recursively converted
       "[#{value.map { |v| graphql_value(v) }.join(', ')}]"

package.json

@@ -31,7 +31,7 @@
   ],
   "dependencies": {
     "@braid/vue-formulate": "^2.5.2",
-    "@chatwoot/prosemirror-schema": "1.0.5",
+    "@chatwoot/prosemirror-schema": "1.0.9",
     "@chatwoot/utils": "^0.0.25",
     "@hcaptcha/vue-hcaptcha": "^0.3.2",
     "@june-so/analytics-next": "^2.0.0",

spec/controllers/microsoft/callbacks_controller_spec.rb

@@ -49,7 +49,7 @@ RSpec.describe 'Microsoft::CallbacksController', type: :request do
 
       get microsoft_callback_url, params: { code: code }
 
-      expect(response).to redirect_to app_microsoft_inbox_agents_url(account_id: account.id, inbox_id: account.inboxes.last.id)
+      expect(response).to redirect_to app_microsoft_inbox_settings_url(account_id: account.id, inbox_id: account.inboxes.last.id)
       expect(account.inboxes.count).to be 1
       expect(inbox.channel.reload.provider_config.keys).to include('access_token', 'refresh_token', 'expires_on')
       expect(inbox.channel.reload.provider_config['access_token']).to eq response_body_success[:access_token]

spec/lib/chatwoot_markdown_renderer_spec.rb

@@ -16,6 +16,10 @@ RSpec.describe ChatwootMarkdownRenderer do
   end
 
   describe '#render_article' do
+    before do
+      allow(CommonMarker).to receive(:render_doc).with(markdown_content, :DEFAULT, [:table]).and_return(doc)
+    end
+
     let(:rendered_content) { renderer.render_article }
 
     it 'renders the markdown content to html' do
@@ -25,6 +29,38 @@ RSpec.describe ChatwootMarkdownRenderer do
     it 'returns an html safe string' do
       expect(rendered_content).to be_html_safe
     end
+
+    context 'when tables in markdown' do
+      let(:markdown_content) do
+        <<~MARKDOWN
+          This is a **bold** text and *italic* text.
+
+          | Header1      | Header2      |
+          | ------------ | ------------ |
+          | **Bold Cell**| *Italic Cell*|
+          | Cell3        | Cell4        |
+        MARKDOWN
+      end
+
+      let(:html_content) do
+        <<~HTML
+          <p>This is a <strong>bold</strong> text and <em>italic</em> text.</p>
+          <table>
+            <thead>
+              <tr><th>Header1</th><th>Header2</th></tr>
+            </thead>
+            <tbody>
+              <tr><td><strong>Bold Cell</strong></td><td><em>Italic Cell</em></td></tr>
+              <tr><td>Cell3</td><td>Cell4</td></tr>
+            </tbody>
+          </table>
+        HTML
+      end
+
+      it 'renders tables in html' do
+        expect(rendered_content.to_s).to eq(html_content)
+      end
+    end
   end
 
   describe '#render_message' do

spec/lib/linear_spec.rb

@@ -148,6 +148,23 @@ describe Linear do
       end
     end
 
+    context 'when the description is markdown' do
+      let(:description) { 'Cmd/Ctrl` `K` **is our most powerful feature.** \n\nUse it to search for or take any action in the app' }
+
+      before do
+        stub_request(:post, url)
+          .to_return(status: 200, body: { success: true,
+                                          data: { issueCreate: { id: 'issue1', title: 'Title',
+                                                                 description: description } } }.to_json, headers: headers)
+      end
+
+      it 'creates an issue' do
+        response = linear_client.create_issue(params)
+        expect(response).to eq({ 'issueCreate' => { 'id' => 'issue1', 'title' => 'Title',
+                                                    'description' => description } })
+      end
+    end
+
     context 'when the API response is an error' do
       before do
         stub_request(:post, url)

yarn.lock

@@ -3165,10 +3165,10 @@
     hotkeys-js "3.8.7"
     lit "2.2.6"
 
-"@chatwoot/prosemirror-schema@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@chatwoot/prosemirror-schema/-/prosemirror-schema-1.0.5.tgz#d6053692beae59d466ac0b04128fa157f59eb176"
-  integrity sha512-dOzkZ2K53PPbE9AQB0RHlVs+GIEyHHdXeeW44dNSEuULwH99PmTpzA2r45QX3uaVa2j7Mip76AQbJZGKbM2fxg==
+"@chatwoot/prosemirror-schema@1.0.9":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@chatwoot/prosemirror-schema/-/prosemirror-schema-1.0.9.tgz#447408fc219a312c5bb851c043ac6ea2e069906f"
+  integrity sha512-jR+EgBWXhbKeU5krQRNkX0uuButu5K55notuJgxQUeWvgg3EJkz8LhDizmBoq/5NgV4FoDzqOD2eN6rUsXFa1w==
   dependencies:
     markdown-it-sup "^1.0.0"
     prosemirror-commands "^1.1.4"