chore: Making OpenAI label suggestions optional (#8374)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/assets/scss/_formulate.scss

@@ -16,3 +16,23 @@
     width: 100%;
   }
 }
+
+.integration-hooks {
+  .formulate-input[data-type='checkbox'] {
+    .formulate-input-wrapper {
+      @apply flex;
+
+      .formulate-input-element {
+        @apply pr-2;
+
+        input {
+          @apply mb-0;
+        }
+      }
+    }
+
+    .formulate-input-element-decorator {
+      @apply hidden;
+    }
+  }
+}

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

@@ -340,7 +340,7 @@ export default {
       // method available in mixin, need to ensure that integrations are present
       await this.fetchIntegrationsIfRequired();
 
-      if (!this.isAIIntegrationEnabled) {
+      if (!this.isLabelSuggestionFeatureEnabled) {
         return;
       }
 

app/javascript/dashboard/mixins/aiMixin.js

@@ -15,18 +15,26 @@ export default {
       currentChat: 'getSelectedChat',
       replyMode: 'draftMessages/getReplyEditorMode',
     }),
-    isAIIntegrationEnabled() {
-      return !!this.appIntegrations.find(
+    aiIntegration() {
+      return this.appIntegrations.find(
         integration => integration.id === 'openai' && !!integration.hooks.length
-      );
+      ).hooks[0];
+    },
+    isAIIntegrationEnabled() {
+      return !!this.aiIntegration;
+    },
+    isLabelSuggestionFeatureEnabled() {
+      if (this.aiIntegration) {
+        const { settings = {} } = this.aiIntegration || {};
+        return settings.label_suggestion;
+      }
+      return false;
     },
     isFetchingAppIntegrations() {
       return this.uiFlags.isFetching;
     },
     hookId() {
-      return this.appIntegrations.find(
-        integration => integration.id === 'openai' && !!integration.hooks.length
-      ).hooks[0].id;
+      return this.aiIntegration.id;
     },
     draftMessage() {
       return this.$store.getters['draftMessages/get'](this.draftKey);

app/javascript/dashboard/routes/dashboard/settings/integrationapps/NewHook.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/v-slot-style -->
 <template>
-  <div class="flex flex-col h-auto overflow-auto">
+  <div class="flex flex-col h-auto overflow-auto integration-hooks">
     <woot-modal-header
       :header-title="integration.name"
       :header-content="integration.description"