feat: Implement UI for Agent Bots in settings and remove CSML support (#11276)

- Add agent bots management UI in settings with avatar upload - Enable agent bot configuration for all inbox types - Implement proper CRUD operations with webhook URL support - Fix agent bots menu item visibility in settings sidebar - Remove all CSML-related code and features - Add migration to convert existing CSML bots to webhook bots - Simplify agent bot model and services to focus on webhook bots - Improve UI to differentiate between system bots and account bots ## Video https://github.com/user-attachments/assets/3f4edbb7-b758-468c-8dd6-a9537b983f7d --------- Co-authored-by: iamsivin <iamsivin@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Pranav <pranav@chatwoot.com>
2025-11-03 12:37:56 +00:00 · 2025-04-16 05:32:49 -07:00
parent 72509f9e38
commit 630826baed
41 changed files with 657 additions and 1019 deletions
--- a/app/javascript/dashboard/api/agentBots.js
+++ b/app/javascript/dashboard/api/agentBots.js
@@ -1,9 +1,26 @@
+/* global axios */
 import ApiClient from './ApiClient';

 class AgentBotsAPI extends ApiClient {
  constructor() {
    super('agent_bots', { accountScoped: true });
  }
+
+  create(data) {
+    return axios.post(this.url, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    });
+  }
+
+  update(id, data) {
+    return axios.patch(`${this.url}/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    });
+  }
+
+  deleteAgentBotAvatar(botId) {
+    return axios.delete(`${this.url}/${botId}/avatar`);
+  }
 }

 export default new AgentBotsAPI();
--- a/app/javascript/dashboard/components-next/dialog/Dialog.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.vue
@@ -125,7 +125,10 @@ defineExpose({ open, close });
          <slot />
          <!-- Dialog content will be injected here -->
          <slot name="footer">
-            <div class="flex items-center justify-between w-full gap-3">
+            <div
+              v-if="showCancelButton || showConfirmButton"
+              class="flex items-center justify-between w-full gap-3"
+            >
              <Button
                v-if="showCancelButton"
                variant="faded"
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
@@ -127,7 +127,6 @@ const settings = accountId => ({
      meta: {
        permissions: ['administrator'],
      },
-      globalConfigFlag: 'csmlEditorHost',
      toState: frontendURL(`accounts/${accountId}/settings/agent-bots`),
      toStateName: 'agent_bots',
      featureFlag: FEATURE_FLAGS.AGENT_BOTS,
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -49,13 +49,6 @@ export default {
      return !!this.menuItem.children;
    },
    isMenuItemVisible() {
-      if (this.menuItem.globalConfigFlag) {
-        // this checks for the `csmlEditorHost` flag in the global config
-        // if this is present, we toggle the CSML editor menu item
-        // TODO: This is very specific, and can be handled better, fix it
-        return !!this.globalConfig[this.menuItem.globalConfigFlag];
-      }
-
      let isFeatureEnabled = true;
      if (this.menuItem.featureFlag) {
        isFeatureEnabled = this.isFeatureEnabledonAccount(
--- a/app/javascript/dashboard/i18n/locale/en/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/en/agentBots.json
@@ -2,23 +2,13 @@
  "AGENT_BOTS": {
    "HEADER": "Bots",
    "LOADING_EDITOR": "Loading editor...",
-    "DESCRIPTION": "Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try.You can manage your bots from this page or create new ones using the 'Configure new bot' button.",
+    "DESCRIPTION": "Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try. You can manage your bots from this page or create new ones using the 'Add Bot' button.",
    "LEARN_MORE": "Learn about agent bots",
-    "CSML_BOT_EDITOR": {
-      "NAME": {
-        "LABEL": "Bot name",
-        "PLACEHOLDER": "Name your bot.",
-        "ERROR": "Bot name is required."
-      },
-      "DESCRIPTION": {
-        "LABEL": "Bot description",
-        "PLACEHOLDER": "What does this bot do?"
-      },
-      "BOT_CONFIG": {
-        "ERROR": "Please enter your CSML bot configuration above.",
-        "API_ERROR": "Your CSML configuration is invalid. Please fix it and try again."
-      },
-      "SUBMIT": "Validate and save"
+    "GLOBAL_BOT": "System bot",
+    "GLOBAL_BOT_BADGE": "System",
+    "AVATAR": {
+      "SUCCESS_DELETE": "Bot avatar deleted successfully",
+      "ERROR_DELETE": "Error deleting bot avatar, please try again"
    },
    "BOT_CONFIGURATION": {
      "TITLE": "Select an agent bot",
@@ -32,7 +22,7 @@
      "SELECT_PLACEHOLDER": "Select bot"
    },
    "ADD": {
-      "TITLE": "Configure new bot",
+      "TITLE": "Add Bot",
      "CANCEL_BUTTON_TEXT": "Cancel",
      "API": {
        "SUCCESS_MESSAGE": "Bot added successfully.",
@@ -40,16 +30,22 @@
      }
    },
    "LIST": {
-      "404": "No bots found. You can create a bot by clicking the 'Configure new bot' button ↗",
+      "404": "No bots found. You can create a bot by clicking the 'Add Bot' button.",
      "LOADING": "Fetching bots...",
-      "TYPE": "Bot type"
+      "TABLE_HEADER": {
+        "DETAILS": "Bot Details",
+        "URL": "Webhook URL"
+      }
    },
    "DELETE": {
      "BUTTON_TEXT": "Delete",
      "TITLE": "Delete bot",
-      "SUBMIT": "Delete",
-      "CANCEL_BUTTON_TEXT": "Cancel",
-      "DESCRIPTION": "Are you sure you want to delete this bot? This action is irreversible.",
+      "CONFIRM": {
+        "TITLE": "Confirm Deletion",
+        "MESSAGE": "Are you sure you want to delete {name}?",
+        "YES": "Yes, Delete",
+        "NO": "No, Keep"
+      },
      "API": {
        "SUCCESS_MESSAGE": "Bot deleted successfully.",
        "ERROR_MESSAGE": "Could not delete bot. Please try again."
@@ -57,17 +53,44 @@
    },
    "EDIT": {
      "BUTTON_TEXT": "Edit",
-      "LOADING": "Fetching bots...",
      "TITLE": "Edit bot",
-      "CANCEL_BUTTON_TEXT": "Cancel",
      "API": {
        "SUCCESS_MESSAGE": "Bot updated successfully.",
        "ERROR_MESSAGE": "Could not update bot. Please try again."
      }
    },
+    "FORM": {
+      "AVATAR": {
+        "LABEL": "Bot avatar"
+      },
+      "NAME": {
+        "LABEL": "Bot name",
+        "PLACEHOLDER": "Enter bot name",
+        "REQUIRED": "Bot name is required"
+      },
+      "DESCRIPTION": {
+        "LABEL": "Description",
+        "PLACEHOLDER": "What does this bot do?"
+      },
+      "WEBHOOK_URL": {
+        "LABEL": "Webhook URL",
+        "PLACEHOLDER": "https://example.com/webhook",
+        "REQUIRED": "Webhook URL is required"
+      },
+      "ERRORS": {
+        "NAME": "Bot name is required",
+        "URL": "Webhook URL is required",
+        "VALID_URL": "Please enter a valid URL starting with http:// or https://"
+      },
+      "CANCEL": "Cancel",
+      "CREATE": "Create Bot",
+      "UPDATE": "Update Bot"
+    },
+    "WEBHOOK": {
+      "DESCRIPTION": "Configure a webhook bot to integrate with your custom services. The bot will receive and process events from conversations and can respond to them."
+    },
    "TYPES": {
-      "WEBHOOK": "Webhook bot",
-      "CSML": "CSML bot"
+      "WEBHOOK": "Webhook bot"
    }
  }
 }
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
@@ -1,102 +1,191 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
+import { ref, computed, onMounted } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-
-import AgentBotRow from './components/AgentBotRow.vue';

 import SettingsLayout from '../SettingsLayout.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import AgentBotModal from './components/AgentBotModal.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const MODAL_TYPES = {
+  CREATE: 'create',
+  EDIT: 'edit',
+};

-const router = useRouter();
 const store = useStore();
 const { t } = useI18n();

-const accountId = useMapGetter('getCurrentAccountId');
 const agentBots = useMapGetter('agentBots/getBots');
 const uiFlags = useMapGetter('agentBots/getUIFlags');

-const confirmDialog = ref(null);
+const selectedBot = ref({});
+const loading = ref({});
+const modalType = ref(MODAL_TYPES.CREATE);
+const agentBotModalRef = ref(null);
+const agentBotDeleteDialogRef = ref(null);

-const onConfigureNewBot = () => {
-  router.push({
-    name: 'agent_bots_csml_new',
-  });
+const tableHeaders = computed(() => {
+  return [
+    t('AGENT_BOTS.LIST.TABLE_HEADER.DETAILS'),
+    t('AGENT_BOTS.LIST.TABLE_HEADER.URL'),
+  ];
+});
+
+const selectedBotName = computed(() => selectedBot.value?.name || '');
+
+const openAddModal = () => {
+  modalType.value = MODAL_TYPES.CREATE;
+  selectedBot.value = {};
+  agentBotModalRef.value.dialogRef.open();
+};
+
+const openEditModal = bot => {
+  modalType.value = MODAL_TYPES.EDIT;
+  selectedBot.value = bot;
+  agentBotModalRef.value.dialogRef.open();
+};
+
+const openDeletePopup = bot => {
+  selectedBot.value = bot;
+  agentBotDeleteDialogRef.value.open();
+};
+
+const deleteAgentBot = async id => {
+  try {
+    await store.dispatch('agentBots/delete', id);
+    useAlert(t('AGENT_BOTS.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('AGENT_BOTS.DELETE.API.ERROR_MESSAGE'));
+  } finally {
+    loading.value[id] = false;
+    selectedBot.value = {};
+  }
+};
+
+const confirmDeletion = () => {
+  loading.value[selectedBot.value.id] = true;
+  deleteAgentBot(selectedBot.value.id);
+  agentBotDeleteDialogRef.value.close();
 };

 onMounted(() => {
  store.dispatch('agentBots/get');
 });
-
-const onDeleteAgentBot = async bot => {
-  const ok = await confirmDialog.value.showConfirmation();
-
-  if (ok) {
-    try {
-      await store.dispatch('agentBots/delete', bot.id);
-      useAlert(t('AGENT_BOTS.DELETE.API.SUCCESS_MESSAGE'));
-    } catch (error) {
-      useAlert(t('AGENT_BOTS.DELETE.API.ERROR_MESSAGE'));
-    }
-  }
-};
-
-const onEditAgentBot = bot => {
-  router.push(
-    frontendURL(
-      `accounts/${accountId.value}/settings/agent-bots/csml/${bot.id}`
-    )
-  );
-};
 </script>

 <template>
  <SettingsLayout
    :is-loading="uiFlags.isFetching"
-    :loading-message="$t('AGENT_BOTS.LIST.LOADING')"
+    :loading-message="t('AGENT_BOTS.LIST.LOADING')"
    :no-records-found="!agentBots.length"
-    :no-records-message="$t('AGENT_BOTS.LIST.404')"
+    :no-records-message="t('AGENT_BOTS.LIST.404')"
  >
    <template #header>
      <BaseSettingsHeader
-        :title="$t('AGENT_BOTS.HEADER')"
-        :description="$t('AGENT_BOTS.DESCRIPTION')"
-        :link-text="$t('AGENT_BOTS.LEARN_MORE')"
+        :title="t('AGENT_BOTS.HEADER')"
+        :description="t('AGENT_BOTS.DESCRIPTION')"
+        :link-text="t('AGENT_BOTS.LEARN_MORE')"
        feature-name="agent_bots"
      >
        <template #actions>
          <Button
            icon="i-lucide-circle-plus"
            :label="$t('AGENT_BOTS.ADD.TITLE')"
-            @click="onConfigureNewBot"
+            @click="openAddModal"
          />
        </template>
      </BaseSettingsHeader>
    </template>
    <template #body>
-      <div class="flex-1 overflow-auto">
-        <table class="divide-y divide-slate-75 dark:divide-slate-700">
-          <tbody class="divide-y divide-n-weak text-n-slate-11">
-            <AgentBotRow
-              v-for="(agentBot, index) in agentBots"
-              :key="agentBot.id"
-              :agent-bot="agentBot"
-              :index="index"
-              @delete="onDeleteAgentBot"
-              @edit="onEditAgentBot"
-            />
-          </tbody>
-        </table>
-        <woot-confirm-modal
-          ref="confirmDialog"
-          :title="$t('AGENT_BOTS.DELETE.TITLE')"
-          :description="$t('AGENT_BOTS.DELETE.DESCRIPTION')"
-        />
-      </div>
+      <table class="min-w-full overflow-x-auto divide-y divide-n-strong">
+        <thead>
+          <th
+            v-for="thHeader in tableHeaders"
+            :key="thHeader"
+            class="py-4 font-semibold text-left ltr:pr-4 rtl:pl-4 text-n-slate-11"
+          >
+            {{ thHeader }}
+          </th>
+        </thead>
+        <tbody class="flex-1 divide-y divide-n-weak text-n-slate-12">
+          <tr v-for="bot in agentBots" :key="bot.id">
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
+              <div class="flex flex-row items-center gap-4">
+                <Avatar
+                  :name="bot.name"
+                  :src="bot.thumbnail"
+                  :size="40"
+                  rounded-full
+                />
+                <div>
+                  <span class="block font-medium break-words">
+                    {{ bot.name }}
+                    <span
+                      v-if="bot.system_bot"
+                      class="text-xs text-n-slate-12 bg-n-blue-5 inline-block rounded-md py-0.5 px-1 ltr:ml-1 rtl:mr-1"
+                    >
+                      {{ $t('AGENT_BOTS.GLOBAL_BOT_BADGE') }}
+                    </span>
+                  </span>
+                  <span class="text-sm text-n-slate-11">
+                    {{ bot.description }}
+                  </span>
+                </div>
+              </div>
+            </td>
+            <td class="py-4 ltr:pr-4 rtl:pl-4 text-sm">
+              {{ bot.outgoing_url || bot.bot_config?.webhook_url }}
+            </td>
+            <td class="py-4 min-w-xs">
+              <div class="flex gap-1 justify-end">
+                <Button
+                  v-if="!bot.system_bot"
+                  v-tooltip.top="t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
+                  icon="i-lucide-pen"
+                  slate
+                  xs
+                  faded
+                  :is-loading="loading[bot.id]"
+                  @click="openEditModal(bot)"
+                />
+                <Button
+                  v-if="!bot.system_bot"
+                  v-tooltip.top="t('AGENT_BOTS.DELETE.BUTTON_TEXT')"
+                  icon="i-lucide-trash-2"
+                  xs
+                  ruby
+                  faded
+                  :is-loading="loading[bot.id]"
+                  @click="openDeletePopup(bot)"
+                />
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
    </template>
+
+    <AgentBotModal
+      ref="agentBotModalRef"
+      :type="modalType"
+      :selected-bot="selectedBot"
+    />
+
+    <Dialog
+      ref="agentBotDeleteDialogRef"
+      type="alert"
+      :title="t('AGENT_BOTS.DELETE.CONFIRM.TITLE')"
+      :description="
+        t('AGENT_BOTS.DELETE.CONFIRM.MESSAGE', { name: selectedBotName })
+      "
+      :is-loading="uiFlags.isDeleting"
+      :confirm-button-label="t('AGENT_BOTS.DELETE.CONFIRM.YES')"
+      :cancel-button-label="t('AGENT_BOTS.DELETE.CONFIRM.NO')"
+      @confirm="confirmDeletion"
+    />
  </SettingsLayout>
 </template>
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js
@@ -1,9 +1,6 @@
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import Bot from './Index.vue';
-import CsmlEditBot from './csml/Edit.vue';
-import CsmlNewBot from './csml/New.vue';
 import { frontendURL } from '../../../../helper/URLHelper';
-import SettingsContent from '../Wrapper.vue';
 import SettingsWrapper from '../SettingsWrapper.vue';

 export default {
@@ -26,36 +23,5 @@ export default {
        },
      ],
    },
-    {
-      path: frontendURL('accounts/:accountId/settings/agent-bots'),
-      component: SettingsContent,
-      props: () => {
-        return {
-          headerTitle: 'AGENT_BOTS.HEADER',
-          icon: 'bot',
-          showBackButton: true,
-        };
-      },
-      children: [
-        {
-          path: 'csml/new',
-          name: 'agent_bots_csml_new',
-          component: CsmlNewBot,
-          meta: {
-            featureFlag: FEATURE_FLAGS.AGENT_BOTS,
-            permissions: ['administrator'],
-          },
-        },
-        {
-          path: 'csml/:botId',
-          name: 'agent_bots_csml_edit',
-          component: CsmlEditBot,
-          meta: {
-            featureFlag: FEATURE_FLAGS.AGENT_BOTS,
-            permissions: ['administrator'],
-          },
-        },
-      ],
-    },
  ],
 };
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotModal.vue
@@ -0,0 +1,251 @@
+<script setup>
+import { ref, computed, reactive, watch } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { required, helpers, url } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/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';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'create',
+    validator: value => ['create', 'edit'].includes(value),
+  },
+  selectedBot: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const MODAL_TYPES = {
+  CREATE: 'create',
+  EDIT: 'edit',
+};
+
+const store = useStore();
+const { t } = useI18n();
+const dialogRef = ref(null);
+const uiFlags = useMapGetter('agentBots/getUIFlags');
+
+const formState = reactive({
+  botName: '',
+  botDescription: '',
+  botUrl: '',
+  botAvatar: null,
+  botAvatarUrl: '',
+});
+
+const v$ = useVuelidate(
+  {
+    botName: {
+      required: helpers.withMessage(
+        () => t('AGENT_BOTS.FORM.ERRORS.NAME'),
+        required
+      ),
+    },
+    botUrl: {
+      required: helpers.withMessage(
+        () => t('AGENT_BOTS.FORM.ERRORS.URL'),
+        required
+      ),
+      url: helpers.withMessage(
+        () => t('AGENT_BOTS.FORM.ERRORS.VALID_URL'),
+        url
+      ),
+    },
+  },
+  formState
+);
+
+const isLoading = computed(() =>
+  props.type === MODAL_TYPES.CREATE
+    ? uiFlags.value.isCreating
+    : uiFlags.value.isUpdating
+);
+
+const dialogTitle = computed(() =>
+  props.type === MODAL_TYPES.CREATE
+    ? t('AGENT_BOTS.ADD.TITLE')
+    : t('AGENT_BOTS.EDIT.TITLE')
+);
+
+const confirmButtonLabel = computed(() =>
+  props.type === MODAL_TYPES.CREATE
+    ? t('AGENT_BOTS.FORM.CREATE')
+    : t('AGENT_BOTS.FORM.UPDATE')
+);
+
+const botNameError = computed(() =>
+  v$.value.botName.$error ? v$.value.botName.$errors[0]?.$message : ''
+);
+
+const botUrlError = computed(() =>
+  v$.value.botUrl.$error ? v$.value.botUrl.$errors[0]?.$message : ''
+);
+
+const resetForm = () => {
+  Object.assign(formState, {
+    botName: '',
+    botDescription: '',
+    botUrl: '',
+    botAvatar: null,
+    botAvatarUrl: '',
+  });
+  v$.value.$reset();
+};
+
+const handleImageUpload = ({ file, url: avatarUrl }) => {
+  formState.botAvatar = file;
+  formState.botAvatarUrl = avatarUrl;
+};
+
+const handleAvatarDelete = async () => {
+  if (props.selectedBot?.id) {
+    try {
+      await store.dispatch(
+        'agentBots/deleteAgentBotAvatar',
+        props.selectedBot.id
+      );
+      formState.botAvatar = null;
+      formState.botAvatarUrl = '';
+      useAlert(t('AGENT_BOTS.AVATAR.SUCCESS_DELETE'));
+    } catch (error) {
+      useAlert(t('AGENT_BOTS.AVATAR.ERROR_DELETE'));
+    }
+  } else {
+    formState.botAvatar = null;
+    formState.botAvatarUrl = '';
+  }
+};
+
+const handleSubmit = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+
+  const botData = {
+    name: formState.botName,
+    description: formState.botDescription,
+    outgoing_url: formState.botUrl,
+    bot_type: 'webhook',
+    avatar: formState.botAvatar,
+  };
+
+  const isCreate = props.type === MODAL_TYPES.CREATE;
+
+  try {
+    const actionPayload = isCreate
+      ? botData
+      : { id: props.selectedBot.id, data: botData };
+
+    await store.dispatch(
+      `agentBots/${isCreate ? 'create' : 'update'}`,
+      actionPayload
+    );
+
+    const alertKey = isCreate
+      ? t('AGENT_BOTS.ADD.API.SUCCESS_MESSAGE')
+      : t('AGENT_BOTS.EDIT.API.SUCCESS_MESSAGE');
+    useAlert(alertKey);
+
+    dialogRef.value.close();
+    resetForm();
+  } catch (error) {
+    const errorKey = isCreate
+      ? t('AGENT_BOTS.ADD.API.ERROR_MESSAGE')
+      : t('AGENT_BOTS.EDIT.API.ERROR_MESSAGE');
+    useAlert(errorKey);
+  }
+};
+
+const initializeForm = () => {
+  if (props.selectedBot && Object.keys(props.selectedBot).length) {
+    const { name, description, outgoing_url, thumbnail, bot_config } =
+      props.selectedBot;
+    formState.botName = name || '';
+    formState.botDescription = description || '';
+    formState.botUrl = outgoing_url || bot_config?.webhook_url || '';
+    formState.botAvatarUrl = thumbnail || '';
+  } else {
+    resetForm();
+  }
+};
+
+watch(() => props.selectedBot, initializeForm, { immediate: true, deep: true });
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="dialogTitle"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    @close="v$.$reset()"
+  >
+    <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+      <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') }}
+        </span>
+        <Avatar
+          :src="formState.botAvatarUrl"
+          :name="formState.botName"
+          :size="68"
+          allow-upload
+          @upload="handleImageUpload"
+          @delete="handleAvatarDelete"
+        />
+      </div>
+
+      <Input
+        v-model="formState.botName"
+        :label="$t('AGENT_BOTS.FORM.NAME.LABEL')"
+        :placeholder="$t('AGENT_BOTS.FORM.NAME.PLACEHOLDER')"
+        :message="botNameError"
+        :message-type="botNameError ? 'error' : 'info'"
+        @blur="v$.botName.$touch()"
+      />
+
+      <TextArea
+        v-model="formState.botDescription"
+        :label="$t('AGENT_BOTS.FORM.DESCRIPTION.LABEL')"
+        :placeholder="$t('AGENT_BOTS.FORM.DESCRIPTION.PLACEHOLDER')"
+      />
+
+      <Input
+        v-model="formState.botUrl"
+        :label="$t('AGENT_BOTS.FORM.WEBHOOK_URL.LABEL')"
+        :placeholder="$t('AGENT_BOTS.FORM.WEBHOOK_URL.PLACEHOLDER')"
+        :message="botUrlError"
+        :message-type="botUrlError ? 'error' : 'info'"
+        @blur="v$.botUrl.$touch()"
+      />
+
+      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="$t('AGENT_BOTS.FORM.CANCEL')"
+          @click="dialogRef.close()"
+        />
+        <NextButton
+          type="submit"
+          data-testid="label-submit"
+          :label="confirmButtonLabel"
+          :is-loading="isLoading"
+          :disabled="v$.$invalid"
+        />
+      </div>
+    </form>
+  </Dialog>
+</template>
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
@@ -1,59 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
-import AgentBotType from './AgentBotType.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  agentBot: {
-    type: Object,
-    required: true,
-  },
-  index: {
-    type: Number,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['edit', 'delete']);
-
-const isACSMLTypeBot = computed(() => {
-  const { bot_type: botType } = props.agentBot;
-  return botType === 'csml';
-});
-</script>
-
-<template>
-  <tr class="space-x-2">
-    <td class="py-4 ltr:pl-0 ltr:pr-4 rtl:pl-4 rtl:pr-0">
-      <div class="flex items-center break-words font-medium">
-        {{ agentBot.name }}
-        (<AgentBotType :bot-type="agentBot.bot_type" />)
-      </div>
-      <div class="text-sm">
-        <ShowMore :text="agentBot.description || ''" :limit="120" />
-      </div>
-    </td>
-    <td class="align-middle">
-      <div class="flex justify-end gap-1 h-full items-center">
-        <Button
-          v-if="isACSMLTypeBot"
-          v-tooltip.top="$t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
-          icon="i-lucide-pen"
-          slate
-          xs
-          faded
-          @click="emit('edit', agentBot)"
-        />
-        <Button
-          v-tooltip.top="$t('AGENT_BOTS.DELETE.BUTTON_TEXT')"
-          icon="i-lucide-trash-2"
-          xs
-          ruby
-          faded
-          @click="emit('delete', agentBot, index)"
-        />
-      </div>
-    </td>
-  </tr>
-</template>
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue
@@ -1,36 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-defineProps({
-  botType: {
-    type: String,
-    default: 'webhook',
-  },
-});
-
-const { t } = useI18n();
-
-const botTypeConfig = computed(() => ({
-  csml: {
-    label: t('AGENT_BOTS.TYPES.CSML'),
-    thumbnail: '/dashboard/images/agent-bots/csml.png',
-  },
-  webhook: {
-    label: t('AGENT_BOTS.TYPES.WEBHOOK'),
-    thumbnail: '/dashboard/images/agent-bots/webhook.svg',
-  },
-}));
-</script>
-
-<template>
-  <span class="inline-flex items-center gap-1">
-    <img
-      v-tooltip="botTypeConfig[botType].label"
-      class="h-3 w-auto"
-      :src="botTypeConfig[botType].thumbnail"
-      :alt="botTypeConfig[botType].label"
-    />
-    <span>{{ botTypeConfig[botType].label }}</span>
-  </span>
-</template>
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
@@ -1,99 +0,0 @@
-<script>
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-import CsmlMonacoEditor from './CSMLMonacoEditor.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: { CsmlMonacoEditor, NextButton },
-  props: {
-    agentBot: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  emits: ['submit'],
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  validations: {
-    bot: {
-      name: { required },
-      csmlContent: { required },
-    },
-  },
-  data() {
-    return {
-      bot: {
-        name: this.agentBot.name || '',
-        description: this.agentBot.description || '',
-        csmlContent: this.agentBot.bot_config.csml_content || '',
-      },
-    };
-  },
-  methods: {
-    onSubmit() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      this.$emit('submit', {
-        id: this.agentBot.id || '',
-        ...this.bot,
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <div class="flex flex-row">
-      <div class="w-[68%]">
-        <div class="h-[calc(100vh-56px)] relative">
-          <CsmlMonacoEditor v-model="bot.csmlContent" class="w-full h-full" />
-          <div
-            v-if="v$.bot.csmlContent.$error"
-            class="bg-red-100 dark:bg-red-200 text-white dark:text-white absolute bottom-0 w-full p-2.5 flex items-center text-xs justify-center flex-shrink-0"
-          >
-            <span>{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.ERROR') }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="w-[32%] overflow-auto p-4 h-[calc(100vh-56px)]">
-        <form
-          class="flex flex-col justify-between h-full"
-          @submit.prevent="onSubmit"
-        >
-          <div>
-            <label :class="{ error: v$.bot.name.$error }">
-              {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.LABEL') }}
-              <input
-                v-model="bot.name"
-                type="text"
-                :placeholder="$t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.PLACEHOLDER')"
-              />
-              <span v-if="v$.bot.name.$error" class="message">
-                {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.ERROR') }}
-              </span>
-            </label>
-            <label>
-              {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.DESCRIPTION.LABEL') }}
-              <textarea
-                v-model="bot.description"
-                rows="4"
-                :placeholder="
-                  $t('AGENT_BOTS.CSML_BOT_EDITOR.DESCRIPTION.PLACEHOLDER')
-                "
-              />
-            </label>
-            <NextButton
-              type="submit"
-              :label="$t('AGENT_BOTS.CSML_BOT_EDITOR.SUBMIT')"
-            />
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-</template>
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue
@@ -1,71 +0,0 @@
-<script>
-import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
-import { mapGetters } from 'vuex';
-
-export default {
-  components: { LoadingState },
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      iframeLoading: true,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-    }),
-  },
-  mounted() {
-    window.onmessage = e => {
-      if (
-        typeof e.data !== 'string' ||
-        !e.data.startsWith('chatwoot-csml-editor:update')
-      ) {
-        return;
-      }
-      const csmlContent = e.data.replace('chatwoot-csml-editor:update', '');
-      this.$emit('update:modelValue', csmlContent);
-    };
-  },
-  methods: {
-    onEditorLoad() {
-      const frameElement = document.getElementById(`csml-editor--frame`);
-      const eventData = {
-        event: 'editorContext',
-        data: this.modelValue || '',
-      };
-      frameElement.contentWindow.postMessage(JSON.stringify(eventData), '*');
-      this.iframeLoading = false;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="csml-editor--container">
-    <LoadingState
-      v-if="iframeLoading"
-      :message="$t('AGENT_BOTS.LOADING_EDITOR')"
-      class="dashboard-app_loading-container"
-    />
-    <iframe
-      id="csml-editor--frame"
-      :src="globalConfig.csmlEditorHost"
-      @load="onEditorLoad"
-    />
-  </div>
-</template>
-
-<style scoped>
-#csml-editor--frame {
-  border: 0;
-  width: 100%;
-  height: 100%;
-}
-</style>
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue
@@ -1,40 +0,0 @@
-<script>
-import { useAlert } from 'dashboard/composables';
-import Spinner from 'shared/components/Spinner.vue';
-import CsmlBotEditor from '../components/CSMLBotEditor.vue';
-
-export default {
-  components: { Spinner, CsmlBotEditor },
-  computed: {
-    agentBot() {
-      return this.$store.getters['agentBots/getBot'](this.$route.params.botId);
-    },
-  },
-  mounted() {
-    this.$store.dispatch('agentBots/show', this.$route.params.botId);
-  },
-  methods: {
-    async updateBot(bot) {
-      try {
-        await this.$store.dispatch('agentBots/update', {
-          id: bot.id,
-          name: bot.name,
-          description: bot.description,
-          bot_type: 'csml',
-          bot_config: { csml_content: bot.csmlContent },
-        });
-        useAlert(this.$t('AGENT_BOTS.EDIT.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(this.$t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.API_ERROR'));
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <CsmlBotEditor v-if="agentBot.id" :agent-bot="agentBot" @submit="updateBot" />
-  <div v-else class="flex flex-col h-auto overflow-auto no-padding">
-    <Spinner />
-  </div>
-</template>
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue
@@ -1,41 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { frontendURL } from '../../../../../helper/URLHelper';
-import CsmlBotEditor from '../components/CSMLBotEditor.vue';
-
-export default {
-  components: { CsmlBotEditor },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-    }),
-  },
-  methods: {
-    async saveBot(bot) {
-      try {
-        const agentBot = await this.$store.dispatch('agentBots/create', {
-          name: bot.name,
-          description: bot.description,
-          bot_type: 'csml',
-          bot_config: { csml_content: bot.csmlContent },
-        });
-        if (agentBot) {
-          this.$router.replace(
-            frontendURL(
-              `accounts/${this.accountId}/settings/agent-bots/csml/${agentBot.id}`
-            )
-          );
-        }
-        useAlert(this.$t('AGENT_BOTS.ADD.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(this.$t('AGENT_BOTS.ADD.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <CsmlBotEditor :agent-bot="{ bot_config: {} }" @submit="saveBot" />
-</template>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -141,11 +141,7 @@ export default {
      }

      if (
-        this.isFeatureEnabledonAccount(
-          this.accountId,
-          FEATURE_FLAGS.AGENT_BOTS
-        ) &&
-        !(this.isAnEmailChannel || this.isATwitterInbox)
+        this.isFeatureEnabledonAccount(this.accountId, FEATURE_FLAGS.AGENT_BOTS)
      ) {
        visibleToAllChannelTabs = [
          ...visibleToAllChannelTabs,
--- a/app/javascript/dashboard/store/modules/agentBots.js
+++ b/app/javascript/dashboard/store/modules/agentBots.js
@@ -12,6 +12,7 @@ export const state = {
    isCreating: false,
    isDeleting: false,
    isUpdating: false,
+    isUpdatingAvatar: false,
    isFetchingAgentBot: false,
    isSettingAgentBot: false,
    isDisconnecting: false,
@@ -48,10 +49,23 @@ export const actions = {
      commit(types.SET_AGENT_BOT_UI_FLAG, { isFetching: false });
    }
  },
-  create: async ({ commit }, agentBotObj) => {
+
+  create: async ({ commit }, botData) => {
    commit(types.SET_AGENT_BOT_UI_FLAG, { isCreating: true });
    try {
-      const response = await AgentBotsAPI.create(agentBotObj);
+      // Create FormData for file upload
+      const formData = new FormData();
+      formData.append('name', botData.name);
+      formData.append('description', botData.description);
+      formData.append('bot_type', botData.bot_type || 'webhook');
+      formData.append('outgoing_url', botData.outgoing_url);
+
+      // Add avatar file if available
+      if (botData.avatar) {
+        formData.append('avatar', botData.avatar);
+      }
+
+      const response = await AgentBotsAPI.create(formData);
      commit(types.ADD_AGENT_BOT, response.data);
      return response.data;
    } catch (error) {
@@ -61,10 +75,22 @@ export const actions = {
    }
    return null;
  },
-  update: async ({ commit }, { id, ...agentBotObj }) => {
+
+  update: async ({ commit }, { id, data }) => {
    commit(types.SET_AGENT_BOT_UI_FLAG, { isUpdating: true });
    try {
-      const response = await AgentBotsAPI.update(id, agentBotObj);
+      // Create FormData for file upload
+      const formData = new FormData();
+      formData.append('name', data.name);
+      formData.append('description', data.description);
+      formData.append('bot_type', data.bot_type || 'webhook');
+      formData.append('outgoing_url', data.outgoing_url);
+
+      if (data.avatar) {
+        formData.append('avatar', data.avatar);
+      }
+
+      const response = await AgentBotsAPI.update(id, formData);
      commit(types.EDIT_AGENT_BOT, response.data);
    } catch (error) {
      throwErrorMessage(error);
@@ -72,6 +98,7 @@ export const actions = {
      commit(types.SET_AGENT_BOT_UI_FLAG, { isUpdating: false });
    }
  },
+
  delete: async ({ commit }, id) => {
    commit(types.SET_AGENT_BOT_UI_FLAG, { isDeleting: true });
    try {
@@ -83,6 +110,20 @@ export const actions = {
      commit(types.SET_AGENT_BOT_UI_FLAG, { isDeleting: false });
    }
  },
+
+  deleteAgentBotAvatar: async ({ commit }, id) => {
+    commit(types.SET_AGENT_BOT_UI_FLAG, { isUpdatingAvatar: true });
+    try {
+      await AgentBotsAPI.deleteAgentBotAvatar(id);
+      // Update the thumbnail to empty string after deletion
+      commit(types.UPDATE_AGENT_BOT_AVATAR, { id, thumbnail: '' });
+    } catch (error) {
+      throwErrorMessage(error);
+    } finally {
+      commit(types.SET_AGENT_BOT_UI_FLAG, { isUpdatingAvatar: false });
+    }
+  },
+
  show: async ({ commit }, id) => {
    commit(types.SET_AGENT_BOT_UI_FLAG, { isFetchingItem: true });
    try {
@@ -150,6 +191,12 @@ export const mutations = {
      [inboxId]: agentBotId,
    };
  },
+  [types.UPDATE_AGENT_BOT_AVATAR]($state, { id, thumbnail }) {
+    const botIndex = $state.records.findIndex(bot => bot.id === id);
+    if (botIndex !== -1) {
+      $state.records[botIndex].thumbnail = thumbnail || '';
+    }
+  },
 };

 export default {
--- a/app/javascript/dashboard/store/modules/specs/agentBots/agentBots.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/agentBots/agentBots.spec.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { actions } from '../../agentBots';
 import types from '../../../mutation-types';
-import { agentBotRecords } from './fixtures';
+import { agentBotRecords, agentBotData } from './fixtures';

 const commit = vi.fn();
 global.axios = axios;
@@ -30,16 +30,22 @@ describe('#actions', () => {
  describe('#create', () => {
    it('sends correct actions if API is success', async () => {
      axios.post.mockResolvedValue({ data: agentBotRecords[0] });
-      await actions.create({ commit }, agentBotRecords[0]);
+      await actions.create({ commit }, agentBotData);
+
      expect(commit.mock.calls).toEqual([
        [types.SET_AGENT_BOT_UI_FLAG, { isCreating: true }],
        [types.ADD_AGENT_BOT, agentBotRecords[0]],
        [types.SET_AGENT_BOT_UI_FLAG, { isCreating: false }],
      ]);
+
+      expect(axios.post.mock.calls.length).toBe(1);
+      const formDataArg = axios.post.mock.calls[0][1];
+      expect(formDataArg instanceof FormData).toBe(true);
    });
+
    it('sends correct actions if API is error', async () => {
      axios.post.mockRejectedValue({ message: 'Incorrect header' });
-      await expect(actions.create({ commit })).rejects.toThrow(Error);
+      await expect(actions.create({ commit }, {})).rejects.toThrow(Error);
      expect(commit.mock.calls).toEqual([
        [types.SET_AGENT_BOT_UI_FLAG, { isCreating: true }],
        [types.SET_AGENT_BOT_UI_FLAG, { isCreating: false }],
@@ -50,17 +56,29 @@ describe('#actions', () => {
  describe('#update', () => {
    it('sends correct actions if API is success', async () => {
      axios.patch.mockResolvedValue({ data: agentBotRecords[0] });
-      await actions.update({ commit }, agentBotRecords[0]);
+      await actions.update(
+        { commit },
+        {
+          id: agentBotRecords[0].id,
+          data: agentBotData,
+        }
+      );
+
      expect(commit.mock.calls).toEqual([
        [types.SET_AGENT_BOT_UI_FLAG, { isUpdating: true }],
        [types.EDIT_AGENT_BOT, agentBotRecords[0]],
        [types.SET_AGENT_BOT_UI_FLAG, { isUpdating: false }],
      ]);
+
+      expect(axios.patch.mock.calls.length).toBe(1);
+      const formDataArg = axios.patch.mock.calls[0][1];
+      expect(formDataArg instanceof FormData).toBe(true);
    });
+
    it('sends correct actions if API is error', async () => {
      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
      await expect(
-        actions.update({ commit }, agentBotRecords[0])
+        actions.update({ commit }, { id: 1, data: {} })
      ).rejects.toThrow(Error);
      expect(commit.mock.calls).toEqual([
        [types.SET_AGENT_BOT_UI_FLAG, { isUpdating: true }],
@@ -68,7 +86,6 @@ describe('#actions', () => {
      ]);
    });
  });
-
  describe('#delete', () => {
    it('sends correct actions if API is success', async () => {
      axios.delete.mockResolvedValue({ data: agentBotRecords[0] });
--- a/app/javascript/dashboard/store/modules/specs/agentBots/fixtures.js
+++ b/app/javascript/dashboard/store/modules/specs/agentBots/fixtures.js
@@ -1,15 +1,35 @@
 export const agentBotRecords = [
  {
+    account_id: 1,
    id: 11,
    name: 'Agent Bot 11',
    description: 'Agent Bot Description',
-    type: 'csml',
+    bot_type: 'webhook',
+    thumbnail: 'https://example.com/thumbnail.jpg',
+    bot_config: {},
+    outgoing_url: 'https://example.com/outgoing',
+    access_token: 'hN8QwG769RqBXmme',
+    system_bot: false,
  },

  {
+    account_id: 1,
    id: 12,
    name: 'Agent Bot 12',
    description: 'Agent Bot Description 12',
-    type: 'csml',
+    bot_type: 'webhook',
+    thumbnail: 'https://example.com/thumbnail.jpg',
+    bot_config: {},
+    outgoing_url: 'https://example.com/outgoing',
+    access_token: 'hN8QwG769RqBXmme',
+    system_bot: false,
  },
 ];
+
+export const agentBotData = {
+  name: 'Test Bot',
+  description: 'Test Description',
+  outgoing_url: 'https://test.com',
+  bot_type: 'webhook',
+  avatar: new File([''], 'filename'),
+};
--- a/app/javascript/dashboard/store/modules/specs/agentBots/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/agentBots/mutations.spec.js
@@ -51,4 +51,16 @@ describe('#mutations', () => {
      expect(state.agentBotInbox).toEqual({ 3: 2 });
    });
  });
+  describe('#UPDATE_AGENT_BOT_AVATAR', () => {
+    it('update agent bot avatar', () => {
+      const state = { records: [agentBotRecords[0]] };
+      mutations[types.UPDATE_AGENT_BOT_AVATAR](state, {
+        id: 11,
+        thumbnail: 'https://example.com/thumbnail.jpg',
+      });
+      expect(state.records[0].thumbnail).toEqual(
+        'https://example.com/thumbnail.jpg'
+      );
+    });
+  });
 });
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -301,6 +301,7 @@ export default {
  EDIT_AGENT_BOT: 'EDIT_AGENT_BOT',
  DELETE_AGENT_BOT: 'DELETE_AGENT_BOT',
  SET_AGENT_BOT_INBOX: 'SET_AGENT_BOT_INBOX',
+  UPDATE_AGENT_BOT_AVATAR: 'UPDATE_AGENT_BOT_AVATAR',

  // MACROS
  SET_MACROS_UI_FLAG: 'SET_MACROS_UI_FLAG',
--- a/app/javascript/shared/store/globalConfig.js
+++ b/app/javascript/shared/store/globalConfig.js
@@ -5,7 +5,6 @@ const {
  AZURE_APP_ID: azureAppId,
  BRAND_NAME: brandName,
  CHATWOOT_INBOX_TOKEN: chatwootInboxToken,
-  CSML_EDITOR_HOST: csmlEditorHost,
  CREATE_NEW_ACCOUNT_FROM_DASHBOARD: createNewAccountFromDashboard,
  DIRECT_UPLOADS_ENABLED: directUploadsEnabled,
  DISPLAY_MANIFEST: displayManifest,
@@ -29,7 +28,6 @@ const state = {
  azureAppId,
  brandName,
  chatwootInboxToken,
-  csmlEditorHost,
  deploymentEnv,
  createNewAccountFromDashboard,
  directUploadsEnabled: directUploadsEnabled === 'true',