fix: ui for errors in byok

app/javascript/dashboard/composables/useAI.js

@@ -8,6 +8,7 @@ import { useAlert, useTrack } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import OpenAPI from 'dashboard/api/integrations/openapi';
+import { frontendURL } from 'dashboard/helper/URLHelper';
 
 /**
  * Cleans and normalizes a list of labels.
@@ -155,6 +156,8 @@ export function useAI() {
     }
   };
 
+  const accountId = computed(() => getters.getCurrentAccountId.value);
+
   /**
    * Processes an AI event, such as rephrasing content.
    * @param {string} [type='rephrase'] - The type of AI event to process.
@@ -173,11 +176,29 @@ export function useAI() {
       } = result;
       return generatedMessage;
     } catch (error) {
-      const errorData = error.response.data.error;
+      const errorData = error.response?.data;
       const errorMessage =
         errorData?.error?.message ||
+        errorData?.error ||
         t('INTEGRATION_SETTINGS.OPEN_AI.GENERATE_ERROR');
-      useAlert(errorMessage);
+
+      const errorType = errorData?.error_type;
+      if (errorType === 'rate_limit') {
+        useAlert(t('INTEGRATION_SETTINGS.OPEN_AI.RATE_LIMIT_ERROR'), {
+          duration: 5000,
+        });
+      } else if (errorType === 'auth') {
+        useAlert(t('INTEGRATION_SETTINGS.OPEN_AI.AUTH_ERROR'), {
+          type: 'link',
+          to: frontendURL(
+            `accounts/${accountId.value}/settings/integrations/openai`
+          ),
+          message: t('INTEGRATION_SETTINGS.OPEN_AI.GO_TO_SETTINGS'),
+          duration: 5000,
+        });
+      } else {
+        useAlert(errorMessage);
+      }
       return '';
     }
   };

app/javascript/dashboard/composables/useIntegrationHook.js

@@ -57,6 +57,14 @@ export const useIntegrationHook = integrationId => {
     return integrationType.value === 'single';
   });
 
+  /**
+   * Whether any hook needs reauthorization (e.g., API key issues)
+   * @type {import('vue').ComputedRef<boolean>}
+   */
+  const hookNeedsReauthorization = computed(() => {
+    return integration.value.hooks?.some(hook => hook.reauthorization_required);
+  });
+
   return {
     integration,
     integrationType,
@@ -64,5 +72,6 @@ export const useIntegrationHook = integrationId => {
     isIntegrationSingle,
     isHookTypeInbox,
     hasConnectedHooks,
+    hookNeedsReauthorization,
   };
 };

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

@@ -55,8 +55,13 @@
     "DISCONNECT": {
       "BUTTON_TEXT": "Disconnect"
     },
+    "REAUTHORIZE": {
+      "BUTTON_TEXT": "Disconnect",
+      "DESCRIPTION": "Your API key may be invalid or your credit balance may be exhausted. Please disconnect and reconnect with a valid API key.",
+      "OPENAI_LINK": "Check your OpenAI dashboard"
+    },
     "SIDEBAR_DESCRIPTION": {
       "DIALOGFLOW": "Dialogflow is a natural language processing platform for building conversational interfaces. Integrating it with {installationName} lets bots handle queries first and transfer them to agents when needed. It helps qualify leads and reduce agent workload by answering FAQs. To add Dialogflow, create a Service Account in Google Console and share the credentials. Refer to the docs for details"
     }
   }
-}
+}

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

@@ -184,7 +184,10 @@
         "GENERATING": "Generating...",
         "CANCEL": "Cancel"
       },
-      "GENERATE_ERROR": "There was an error processing the content, please verify your OpenAI API key and try again"
+      "GENERATE_ERROR": "Could not process request. Check your API key, credits, or rate limits.",
+      "RATE_LIMIT_ERROR": "Rate limit exceeded. Check your OpenAI usage tier.",
+      "AUTH_ERROR": "Could not authenticate. Check your API key or credits.",
+      "GO_TO_SETTINGS": "Click here to update"
     },
     "DELETE": {
       "BUTTON_TEXT": "Delete",

app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 import { useBranding } from 'shared/composables/useBranding';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Banner from 'dashboard/components-next/banner/Banner.vue';
 
 const props = defineProps({
   integrationId: {
@@ -13,54 +14,68 @@ const props = defineProps({
 
 defineEmits(['add', 'delete']);
 
-const { integration, hasConnectedHooks } = useIntegrationHook(
-  props.integrationId
-);
+const { t } = useI18n();
+
+const { integration, hasConnectedHooks, hookNeedsReauthorization } =
+  useIntegrationHook(props.integrationId);
 
 const { replaceInstallationName } = useBranding();
 </script>
 
 <template>
-  <div
-    class="outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow flex-grow overflow-auto p-4"
-  >
-    <div class="flex items-center justify-center">
-      <div class="flex h-16 w-16 items-center justify-center">
-        <img
-          :src="`/dashboard/images/integrations/${integrationId}.png`"
-          class="max-w-full rounded-md border border-n-weak shadow-sm block dark:hidden bg-n-alpha-3 dark:bg-n-alpha-2"
-        />
-        <img
-          :src="`/dashboard/images/integrations/${integrationId}-dark.png`"
-          class="max-w-full rounded-md border border-n-weak shadow-sm hidden dark:block bg-n-alpha-3 dark:bg-n-alpha-2"
-        />
-      </div>
-      <div class="flex flex-col justify-center m-0 mx-4 flex-1">
-        <h3 class="mb-1 text-xl font-medium text-n-slate-12">
-          {{ integration.name }}
-        </h3>
-        <p class="text-n-slate-11 text-sm leading-6">
-          {{ replaceInstallationName(integration.description) }}
-        </p>
-      </div>
-      <div class="flex justify-center items-center mb-0 w-[15%]">
-        <div v-if="hasConnectedHooks">
-          <div @click="$emit('delete', integration.hooks[0])">
+  <div class="flex flex-col gap-4">
+    <Banner v-if="hookNeedsReauthorization" color="ruby">
+      {{ t('INTEGRATION_APPS.REAUTHORIZE.DESCRIPTION') }}
+      <a
+        href="https://platform.openai.com/account/api-keys"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="underline font-medium"
+      >
+        {{ t('INTEGRATION_APPS.REAUTHORIZE.OPENAI_LINK') }}
+      </a>
+    </Banner>
+    <div
+      class="outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow flex-grow overflow-auto p-4"
+    >
+      <div class="flex items-center justify-center">
+        <div class="flex h-16 w-16 items-center justify-center">
+          <img
+            :src="`/dashboard/images/integrations/${integrationId}.png`"
+            class="max-w-full rounded-md border border-n-weak shadow-sm block dark:hidden bg-n-alpha-3 dark:bg-n-alpha-2"
+          />
+          <img
+            :src="`/dashboard/images/integrations/${integrationId}-dark.png`"
+            class="max-w-full rounded-md border border-n-weak shadow-sm hidden dark:block bg-n-alpha-3 dark:bg-n-alpha-2"
+          />
+        </div>
+        <div class="flex flex-col justify-center m-0 mx-4 flex-1">
+          <h3 class="mb-1 text-xl font-medium text-n-slate-12">
+            {{ integration.name }}
+          </h3>
+          <p class="text-n-slate-11 text-sm leading-6">
+            {{ replaceInstallationName(integration.description) }}
+          </p>
+        </div>
+        <div class="flex justify-center items-center mb-0 w-[15%]">
+          <div v-if="hasConnectedHooks">
+            <div @click="$emit('delete', integration.hooks[0])">
+              <Button
+                ruby
+                faded
+                :label="$t('INTEGRATION_APPS.DISCONNECT.BUTTON_TEXT')"
+              />
+            </div>
+          </div>
+          <div v-else>
             <Button
-              ruby
+              blue
               faded
-              :label="$t('INTEGRATION_APPS.DISCONNECT.BUTTON_TEXT')"
+              :label="$t('INTEGRATION_APPS.CONNECT.BUTTON_TEXT')"
+              @click="$emit('add')"
             />
           </div>
         </div>
-        <div v-else>
-          <Button
-            blue
-            faded
-            :label="$t('INTEGRATION_APPS.CONNECT.BUTTON_TEXT')"
-            @click="$emit('add')"
-          />
-        </div>
       </div>
     </div>
   </div>