chore: Display Agent Bot token after creation (#11488)

This PR includes:

- Displaying the Agent Bot token after creation
- Updating the avatar icon when an avatar image is not present

Fixes: https://linear.app/chatwoot/issue/CW-4337/agent-bot-token-not-visible

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

@@ -59,6 +59,11 @@
         "ERROR_MESSAGE": "Could not update bot. Please try again."
       }
     },
+    "ACCESS_TOKEN": {
+      "TITLE": "Access Token",
+      "DESCRIPTION": "Copy the access token and save it securely",
+      "COPY_SUCCESSFUL": "Access token copied to clipboard"
+    },
     "FORM": {
       "AVATAR": {
         "LABEL": "Bot avatar"

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotModal.vue

@@ -5,12 +5,15 @@ import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { required, helpers, url } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { useToggle } from '@vueuse/core';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import AccessToken from 'dashboard/routes/dashboard/settings/profile/AccessToken.vue';
 
 const props = defineProps({
   type: {
@@ -42,6 +45,9 @@ const formState = reactive({
   botAvatarUrl: '',
 });
 
+const [showAccessToken, toggleAccessToken] = useToggle();
+const accessToken = ref('');
+
 const v$ = useVuelidate(
   {
     botName: {
@@ -70,11 +76,22 @@ const isLoading = computed(() =>
     : uiFlags.value.isUpdating
 );
 
-const dialogTitle = computed(() =>
+const dialogTitle = computed(() => {
-  props.type === MODAL_TYPES.CREATE
+  if (showAccessToken.value) {
+    return t('AGENT_BOTS.ACCESS_TOKEN.TITLE');
+  }
+
+  return props.type === MODAL_TYPES.CREATE
     ? t('AGENT_BOTS.ADD.TITLE')
-    : t('AGENT_BOTS.EDIT.TITLE')
+    : t('AGENT_BOTS.EDIT.TITLE');
-);
+});
+
+const dialogDescription = computed(() => {
+  if (showAccessToken.value) {
+    return t('AGENT_BOTS.ACCESS_TOKEN.DESCRIPTION');
+  }
+  return '';
+});
 
 const confirmButtonLabel = computed(() =>
   props.type === MODAL_TYPES.CREATE
@@ -90,6 +107,13 @@ const botUrlError = computed(() =>
   v$.value.botUrl.$error ? v$.value.botUrl.$errors[0]?.$message : ''
 );
 
+const showAccessTokenInput = computed(
+  () =>
+    showAccessToken.value ||
+    props.type === MODAL_TYPES.EDIT ||
+    accessToken.value
+);
+
 const resetForm = () => {
   Object.assign(formState, {
     botName: '',
@@ -128,6 +152,7 @@ const handleAvatarDelete = async () => {
 const handleSubmit = async () => {
   v$.value.$touch();
   if (v$.value.$invalid) return;
+  if (showAccessToken.value) return;
 
   const botData = {
     name: formState.botName,
@@ -144,7 +169,7 @@ const handleSubmit = async () => {
       ? botData
       : { id: props.selectedBot.id, data: botData };
 
-    await store.dispatch(
+    const response = await store.dispatch(
       `agentBots/${isCreate ? 'create' : 'update'}`,
       actionPayload
     );
@@ -154,7 +179,21 @@ const handleSubmit = async () => {
       : t('AGENT_BOTS.EDIT.API.SUCCESS_MESSAGE');
     useAlert(alertKey);
 
+    // Show access token after creation
+    if (isCreate) {
+      const { access_token: responseAccessToken, id } = response || {};
+
+      if (id && responseAccessToken) {
+        accessToken.value = responseAccessToken;
+        toggleAccessToken(true);
+      } else {
+        accessToken.value = '';
         dialogRef.value.close();
+      }
+    } else {
+      dialogRef.value.close();
+    }
+
     resetForm();
   } catch (error) {
     const errorKey = isCreate
@@ -166,17 +205,43 @@ const handleSubmit = async () => {
 
 const initializeForm = () => {
   if (props.selectedBot && Object.keys(props.selectedBot).length) {
-    const { name, description, outgoing_url, thumbnail, bot_config } =
+    const {
-      props.selectedBot;
+      name,
+      description,
+      outgoing_url: botUrl,
+      thumbnail,
+      bot_config: botConfig,
+      access_token: botAccessToken,
+    } = props.selectedBot;
     formState.botName = name || '';
     formState.botDescription = description || '';
-    formState.botUrl = outgoing_url || bot_config?.webhook_url || '';
+    formState.botUrl = botUrl || botConfig?.webhook_url || '';
     formState.botAvatarUrl = thumbnail || '';
+
+    if (botAccessToken && props.type === MODAL_TYPES.EDIT) {
+      accessToken.value = botAccessToken;
+    }
   } else {
     resetForm();
   }
 };
 
+const onCopyToken = async value => {
+  await copyTextToClipboard(value);
+  useAlert(t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+};
+
+const closeModal = () => {
+  if (!showAccessToken.value) v$.value?.$reset();
+  accessToken.value = '';
+  toggleAccessToken(false);
+};
+
+const onClickClose = () => {
+  closeModal();
+  dialogRef.value.close();
+};
+
 watch(() => props.selectedBot, initializeForm, { immediate: true, deep: true });
 
 defineExpose({ dialogRef });
@@ -187,11 +252,16 @@ defineExpose({ dialogRef });
     ref="dialogRef"
     type="edit"
     :title="dialogTitle"
+    :description="dialogDescription"
     :show-cancel-button="false"
     :show-confirm-button="false"
-    @close="v$.$reset()"
+    @close="closeModal"
   >
     <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+      <div
+        v-if="!showAccessToken || type === MODAL_TYPES.EDIT"
+        class="flex flex-col gap-4"
+      >
         <div class="mb-2 flex flex-col items-start">
           <span class="mb-2 text-sm font-medium text-n-slate-12">
             {{ $t('AGENT_BOTS.FORM.AVATAR.LABEL') }}
@@ -201,12 +271,14 @@ defineExpose({ dialogRef });
             :name="formState.botName"
             :size="68"
             allow-upload
+            icon-name="i-lucide-bot-message-square"
             @upload="handleImageUpload"
             @delete="handleAvatarDelete"
           />
         </div>
 
         <Input
+          id="bot-name"
           v-model="formState.botName"
           :label="$t('AGENT_BOTS.FORM.NAME.LABEL')"
           :placeholder="$t('AGENT_BOTS.FORM.NAME.PLACEHOLDER')"
@@ -216,12 +288,14 @@ defineExpose({ dialogRef });
         />
 
         <TextArea
+          id="bot-description"
           v-model="formState.botDescription"
           :label="$t('AGENT_BOTS.FORM.DESCRIPTION.LABEL')"
           :placeholder="$t('AGENT_BOTS.FORM.DESCRIPTION.PLACEHOLDER')"
         />
 
         <Input
+          id="bot-url"
           v-model="formState.botUrl"
           :label="$t('AGENT_BOTS.FORM.WEBHOOK_URL.LABEL')"
           :placeholder="$t('AGENT_BOTS.FORM.WEBHOOK_URL.PLACEHOLDER')"
@@ -229,6 +303,17 @@ defineExpose({ dialogRef });
           :message-type="botUrlError ? 'error' : 'info'"
           @blur="v$.botUrl.$touch()"
         />
+      </div>
+
+      <div v-if="showAccessTokenInput" class="flex flex-col gap-1">
+        <label
+          v-if="type === MODAL_TYPES.EDIT"
+          class="mb-0.5 text-sm font-medium text-n-slate-12"
+        >
+          {{ $t('AGENT_BOTS.ACCESS_TOKEN.TITLE') }}
+        </label>
+        <AccessToken :value="accessToken" @on-copy="onCopyToken" />
+      </div>
 
       <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
         <NextButton
@@ -236,9 +321,10 @@ defineExpose({ dialogRef });
           slate
           type="reset"
           :label="$t('AGENT_BOTS.FORM.CANCEL')"
-          @click="dialogRef.close()"
+          @click="onClickClose()"
         />
         <NextButton
+          v-if="!showAccessToken"
           type="submit"
           data-testid="label-submit"
           :label="confirmButtonLabel"

app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue

@@ -39,6 +39,7 @@ const onClick = () => {
       <template #masked>
         <button
           class="absolute top-1.5 ltr:right-0.5 rtl:left-0.5"
+          type="button"
           @click="toggleMasked"
         >
           <fluent-icon :icon="maskIcon" :size="16" />
@@ -46,7 +47,7 @@ const onClick = () => {
       </template>
     </woot-input>
     <FormButton
-      type="submit"
+      type="button"
       size="large"
       icon="text-copy"
       variant="outline"