KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Add a view for Agent Bots

Browse source
This commit is contained in:
Pranav Raj S 2022-06-27 10:34:02 +05:30
parent c0249a1b5b
commit 9b8a6d5495
26 changed files with 894 additions and 201 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/javascript/dashboard/api/agentBots.js Normal file
View file

@ -0,0 +1,9 @@
import ApiClient from './ApiClient';
class AgentBotsAPI extends ApiClient {
constructor() {
super('agent_bots', { accountScoped: true });
}
}
export default new AgentBotsAPI();

8
app/javascript/dashboard/components/layout/Sidebar.vue
View file

@ -58,11 +58,12 @@ export default {
computed: {
...mapGetters({
getAccount: 'accounts/getAccount',
accountId: 'getCurrentAccountId',
currentRole: 'getCurrentRole',
currentUser: 'getCurrentUser',
globalConfig: 'globalConfig/get',
inboxes: 'inboxes/getInboxes',
accountId: 'getCurrentAccountId',
currentRole: 'getCurrentRole',
labels: 'labels/getLabelsOnSidebar',
teams: 'teams/getMyTeams',
}),
@ -87,7 +88,8 @@ export default {
);
},
sideMenuConfig() {
return getSidebarItems(this.accountId);
const { features = {} } = this.getAccount(this.accountId);
return getSidebarItems(this.accountId, features);
},
primaryMenuItems() {
const menuItems = this.sideMenuConfig.primaryMenu;

4
app/javascript/dashboard/components/layout/config/default-sidebar.js
View file

@ -6,14 +6,14 @@ import settings from './sidebarItems/settings';
import notifications from './sidebarItems/notifications';
import primaryMenu from './sidebarItems/primaryMenu';
export const getSidebarItems = accountId => ({
export const getSidebarItems = (accountId, features = {}) => ({
primaryMenu: primaryMenu(accountId),
secondaryMenu: [
conversations(accountId),
contacts(accountId),
reports(accountId),
campaigns(accountId),
settings(accountId),
settings(accountId, features),
notifications(accountId),
],
});

236
app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
View file

@ -1,112 +1,134 @@
import { frontendURL } from '../../../../helper/URLHelper';
const settings = accountId => ({
parentNav: 'settings',
routes: [
'agent_list',
'canned_list',
'labels_list',
'settings_inbox',
'attributes_list',
'settings_inbox_new',
'settings_inbox_list',
'settings_inbox_show',
'settings_inboxes_page_channel',
'settings_inboxes_add_agents',
'settings_inbox_finish',
'settings_integrations',
'settings_integrations_webhook',
'settings_integrations_integration',
'settings_applications',
'settings_applications_webhook',
'settings_applications_integration',
'general_settings',
'general_settings_index',
'settings_teams_list',
'settings_teams_new',
'settings_teams_add_agents',
'settings_teams_finish',
'settings_teams_edit',
'settings_teams_edit_members',
'settings_teams_edit_finish',
'automation_list',
],
menuItems: [
{
icon: 'people',
label: 'AGENTS',
const isFeatureEnabled = (featureFlags, key) => featureFlags[key];
const settings = (accountId, features) => {
const config = {
parentNav: 'settings',
routes: [
'agent_bots',
'agent_list',
'attributes_list',
'automation_list',
'canned_list',
'general_settings_index',
'general_settings',
'labels_list',
'settings_applications_integration',
'settings_applications_webhook',
'settings_applications',
'settings_inbox_finish',
'settings_inbox_list',
'settings_inbox_new',
'settings_inbox_show',
'settings_inbox',
'settings_inboxes_add_agents',
'settings_inboxes_page_channel',
'settings_integrations_integration',
'settings_integrations_webhook',
'settings_integrations',
'settings_teams_add_agents',
'settings_teams_edit_finish',
'settings_teams_edit_members',
'settings_teams_edit',
'settings_teams_finish',
'settings_teams_list',
'settings_teams_new',
],
menuItems: [
{
icon: 'people',
label: 'AGENTS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
toStateName: 'agent_list',
},
{
icon: 'people-team',
label: 'TEAMS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
toStateName: 'settings_teams_list',
},
{
icon: 'mail-inbox-all',
label: 'INBOXES',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
toStateName: 'settings_inbox_list',
},
{
icon: 'tag',
label: 'LABELS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
toStateName: 'labels_list',
},
{
icon: 'code',
label: 'CUSTOM_ATTRIBUTES',
hasSubMenu: false,
toState: frontendURL(
`accounts/${accountId}/settings/custom-attributes/list`
),
toStateName: 'attributes_list',
},
{
icon: 'automation',
label: 'AUTOMATION',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
toStateName: 'automation_list',
beta: true,
},
{
icon: 'chat-multiple',
label: 'CANNED_RESPONSES',
hasSubMenu: false,
toState: frontendURL(
`accounts/${accountId}/settings/canned-response/list`
),
toStateName: 'canned_list',
},
{
icon: 'flash-on',
label: 'INTEGRATIONS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/integrations`),
toStateName: 'settings_integrations',
},
{
icon: 'star-emphasis',
label: 'APPLICATIONS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/applications`),
toStateName: 'settings_applications',
},
{
icon: 'settings',
label: 'ACCOUNT_SETTINGS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/general`),
toStateName: 'general_settings_index',
},
],
};
if (isFeatureEnabled(features, 'agent_bots')) {
const agentBotRouteConfig = {
icon: 'bot',
label: 'AGENT_BOTS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
toStateName: 'agent_list',
},
{
icon: 'people-team',
label: 'TEAMS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
toStateName: 'settings_teams_list',
},
{
icon: 'mail-inbox-all',
label: 'INBOXES',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
toStateName: 'settings_inbox_list',
},
{
icon: 'tag',
label: 'LABELS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
toStateName: 'labels_list',
},
{
icon: 'code',
label: 'CUSTOM_ATTRIBUTES',
hasSubMenu: false,
toState: frontendURL(
`accounts/${accountId}/settings/custom-attributes/list`
),
toStateName: 'attributes_list',
},
{
icon: 'automation',
label: 'AUTOMATION',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
toStateName: 'automation_list',
},
{
icon: 'chat-multiple',
label: 'CANNED_RESPONSES',
hasSubMenu: false,
toState: frontendURL(
`accounts/${accountId}/settings/canned-response/list`
),
toStateName: 'canned_list',
},
{
icon: 'flash-on',
label: 'INTEGRATIONS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/integrations`),
toStateName: 'settings_integrations',
},
{
icon: 'star-emphasis',
label: 'APPLICATIONS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/applications`),
toStateName: 'settings_applications',
},
{
icon: 'settings',
label: 'ACCOUNT_SETTINGS',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/general`),
toStateName: 'general_settings_index',
},
],
});
toState: frontendURL(`accounts/${accountId}/settings/agent-bots`),
toStateName: 'agent_bots',
beta: true,
};
const routeIndex = config.menuItems.findIndex(
route => route.label === 'INTEGRATIONS'
);
config.menuItems.splice(routeIndex, 0, agentBotRouteConfig);
}
return config;
};
export default settings;

2
app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
View file

@ -16,7 +16,7 @@
/>
{{ $t(`SIDEBAR.${menuItem.label}`) }}
<span
v-if="menuItem.label === 'AUTOMATION'"
v-if="menuItem.beta"
data-view-component="true"
label="Beta"
class="beta"

8
app/javascript/dashboard/components/widgets/ShowMore.vue
View file

@ -1,7 +1,11 @@
<template>
<span>
{{ textToBeDisplayed }}
<button class="show-more--button" @click="toggleShowMore">
<button
v-if="text.length > limit"
class="show-more--button"
@click="toggleShowMore"
>
{{ buttonLabel }}
</button>
</span>
@ -25,7 +29,7 @@ export default {
},
computed: {
textToBeDisplayed() {
if (this.showMore) {
if (this.showMore || this.text.length <= this.limit) {
return this.text;
}

61
app/javascript/dashboard/i18n/locale/en/agentBot.json Normal file
View file

@ -0,0 +1,61 @@
{
"AGENT_BOTS": {
"HEADER": "Bots",
"HEADER_BTN_TXT": "Add Bot Configuration",
"SIDEBAR_TXT": "<p><b>CSML Bots</b> <p>You can create your own custom bots using <a href='https://www.csml.dev/' target='_blank'>csml.dev</a>. Read more about csml in their docs <a href='https://docs.csml.dev/language/'>here</a>.</p><p>Bots will allow you to add more rich features to your conversations like buttons, and links pre configured right from chatwoot editor.</p>",
"CSML_BOT_EDITOR": {
"NAME": {
"LABEL": "Bot Name",
"PLACEHOLDER": "Give your bot a name",
"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"
},
"ADD": {
"TITLE": "Configure new bot",
"CANCEL_BUTTON_TEXT": "Cancel",
"API": {
"SUCCESS_MESSAGE": "Bot added successfully",
"ERROR_MESSAGE": "Could not add bot, Please try again later"
}
},
"LIST": {
"404": "No Bots found, you can create a bot by clicking the 'Configure new bot' Button ↗",
"LOADING": "Fetching Bots...",
"TYPE": "Bot Type"
},
"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",
"API": {
"SUCCESS_MESSAGE": "Bot deleted successfully",
"ERROR_MESSAGE": "Could not able to delete bot, Please try again later"
}
},
"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 later"
}
},
"TYPES": {
"WEBHOOK": "Webhook Bot",
"CSML": "CSML Bot"
}
}
}

102
app/javascript/dashboard/i18n/locale/en/index.js
View file

@ -1,53 +1,55 @@
import { default as _advancedFilters } from './advancedFilters.json';
import { default as _agentMgmt } from './agentMgmt.json';
import { default as _attributesMgmt } from './attributesMgmt.json';
import { default as _automation } from './automation.json';
import { default as _bulkActions } from './bulkActions.json';
import { default as _campaign } from './campaign.json';
import { default as _cannedMgmt } from './cannedMgmt.json';
import { default as _chatlist } from './chatlist.json';
import { default as _contact } from './contact.json';
import { default as _contactFilters } from './contactFilters.json';
import { default as _conversation } from './conversation.json';
import { default as _csatMgmtMgmt } from './csatMgmt.json';
import { default as _generalSettings } from './generalSettings.json';
import { default as _inboxMgmt } from './inboxMgmt.json';
import { default as _integrationApps } from './integrationApps.json';
import { default as _integrations } from './integrations.json';
import { default as _labelsMgmt } from './labelsMgmt.json';
import { default as _login } from './login.json';
import { default as _report } from './report.json';
import { default as _resetPassword } from './resetPassword.json';
import { default as _setNewPassword } from './setNewPassword.json';
import { default as _settings } from './settings.json';
import { default as _signup } from './signup.json';
import { default as _teamsSettings } from './teamsSettings.json';
import { default as _whatsappTemplates } from './whatsappTemplates.json';
import advancedFilters from './advancedFilters.json';
import agentBot from './agentBot.json';
import agentMgmt from './agentMgmt.json';
import attributesMgmt from './attributesMgmt.json';
import automation from './automation.json';
import bulkActions from './bulkActions.json';
import campaign from './campaign.json';
import cannedMgmt from './cannedMgmt.json';
import chatlist from './chatlist.json';
import contact from './contact.json';
import contactFilters from './contactFilters.json';
import conversation from './conversation.json';
import csatMgmtMgmt from './csatMgmt.json';
import generalSettings from './generalSettings.json';
import inboxMgmt from './inboxMgmt.json';
import integrationApps from './integrationApps.json';
import integrations from './integrations.json';
import labelsMgmt from './labelsMgmt.json';
import login from './login.json';
import report from './report.json';
import resetPassword from './resetPassword.json';
import setNewPassword from './setNewPassword.json';
import settings from './settings.json';
import signup from './signup.json';
import teamsSettings from './teamsSettings.json';
import whatsappTemplates from './whatsappTemplates.json';
export default {
..._advancedFilters,
..._agentMgmt,
..._attributesMgmt,
..._automation,
..._campaign,
..._cannedMgmt,
..._chatlist,
..._contact,
..._contactFilters,
..._conversation,
..._csatMgmtMgmt,
..._generalSettings,
..._inboxMgmt,
..._integrationApps,
..._integrations,
..._labelsMgmt,
..._login,
..._report,
..._resetPassword,
..._setNewPassword,
..._settings,
..._signup,
..._teamsSettings,
..._whatsappTemplates,
..._bulkActions,
...advancedFilters,
...agentBot,
...agentMgmt,
...attributesMgmt,
...automation,
...bulkActions,
...campaign,
...cannedMgmt,
...chatlist,
...contact,
...contactFilters,
...conversation,
...csatMgmtMgmt,
...generalSettings,
...inboxMgmt,
...integrationApps,
...integrations,
...labelsMgmt,
...login,
...report,
...resetPassword,
...setNewPassword,
...settings,
...signup,
...teamsSettings,
...whatsappTemplates,
};

61
app/javascript/dashboard/i18n/locale/en/settings.json
View file

@ -146,47 +146,48 @@
}
},
"SIDEBAR": {
"CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
"SWITCH": "Switch",
"CONVERSATIONS": "Conversations",
"ALL_CONVERSATIONS": "All Conversations",
"MENTIONED_CONVERSATIONS": "Mentions",
"REPORTS": "Reports",
"SETTINGS": "Settings",
"CONTACTS": "Contacts",
"HOME": "Home",
"AGENTS": "Agents",
"INBOXES": "Inboxes",
"NOTIFICATIONS": "Notifications",
"CANNED_RESPONSES": "Canned Responses",
"INTEGRATIONS": "Integrations",
"PROFILE_SETTINGS": "Profile Settings",
"ACCOUNT_SETTINGS": "Account Settings",
"AGENT_BOTS": "Bots",
"AGENTS": "Agents",
"ALL_CONTACTS": "All Contacts",
"ALL_CONVERSATIONS": "All Conversations",
"APPLICATIONS": "Applications",
"LABELS": "Labels",
"CUSTOM_ATTRIBUTES": "Custom Attributes",
"AUTOMATION": "Automation",
"TEAMS": "Teams",
"BETA": "Beta",
"CAMPAIGNS": "Campaigns",
"CANNED_RESPONSES": "Canned Responses",
"CONTACTS": "Contacts",
"CONVERSATIONS": "Conversations",
"CSAT": "CSAT",
"CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
"CUSTOM_ATTRIBUTES": "Custom Attributes",
"CUSTOM_VIEWS_FOLDER": "Folders",
"CUSTOM_VIEWS_SEGMENTS": "Segments",
"ALL_CONTACTS": "All Contacts",
"TAGGED_WITH": "Tagged with",
"FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
"HOME": "Home",
"INBOXES": "Inboxes",
"INTEGRATIONS": "Integrations",
"LABELS": "Labels",
"MENTIONED_CONVERSATIONS": "Mentions",
"NEW_INBOX": "New inbox",
"NEW_LABEL": "New label",
"NEW_TEAM": "New team",
"NEW_INBOX": "New inbox",
"REPORTS_CONVERSATION": "Conversations",
"CSAT": "CSAT",
"CAMPAIGNS": "Campaigns",
"ONGOING": "Ongoing",
"NOTIFICATIONS": "Notifications",
"ONE_OFF": "One off",
"ONGOING": "Ongoing",
"PROFILE_SETTINGS": "Profile Settings",
"REPORTS_AGENT": "Agents",
"REPORTS_LABEL": "Labels",
"REPORTS_CONVERSATION": "Conversations",
"REPORTS_INBOX": "Inbox",
"REPORTS_TEAM": "Team",
"SET_AVAILABILITY_TITLE": "Set yourself as",
"BETA": "Beta",
"REPORTS_LABEL": "Labels",
"REPORTS_OVERVIEW": "Overview",
"FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services"
"REPORTS_TEAM": "Team",
"REPORTS": "Reports",
"SET_AVAILABILITY_TITLE": "Set yourself as",
"SETTINGS": "Settings",
"SWITCH": "Switch",
"TAGGED_WITH": "Tagged with",
"TEAMS": "Teams"
},
"CREATE_ACCOUNT": {
"NO_ACCOUNT_WARNING": "Uh oh! We could not find any Chatwoot accounts. Please create a new account to continue.",

87
app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue Normal file
View file

@ -0,0 +1,87 @@
<template>
<div class="column content-box">
<div class="row">
<div class="small-8 columns with-right-space">
<woot-loading-state
v-if="uiFlags.isFetching"
:message="$t('AGENT_BOTS.LIST.LOADING')"
/>
<table v-else-if="agentBots.length" class="woot-table">
<tbody>
<agent-bot-row
v-for="(agentBot, index) in agentBots"
:key="agentBot.id"
:agent-bot="agentBot"
:index="index"
:is-deleting="loading[agentBot.id]"
@delete="onDeleteAgentBot"
@edit="onEditAgentBot"
/>
</tbody>
</table>
<p v-else class="no-items-error-message">
{{ $t('AGENT_BOTS.LIST.404') }}
</p>
</div>
<div class="small-4 columns content-box">
<p v-html="$t('AGENT_BOTS.SIDEBAR_TXT')" />
</div>
</div>
<woot-button
color-scheme="success"
class-names="button--fixed-right-top"
icon="add-circle"
>
<router-link to="csml/new" class="white-text">
{{ $t('AGENT_BOTS.ADD.TITLE') }}
</router-link>
</woot-button>
<woot-confirm-modal
ref="confirmDialog"
:title="$t('AGENT_BOTS.DELETE.TITLE')"
:description="$t('AGENT_BOTS.DELETE.DESCRIPTION')"
/>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import AgentBotRow from './components/AgentBotRow.vue';
export default {
components: { AgentBotRow },
data() {
return { loading: {} };
},
computed: {
...mapGetters({
agentBots: 'agentBots/getBots',
uiFlags: 'agentBots/getUIFlags',
}),
},
mounted() {
this.$store.dispatch('agentBots/get');
},
methods: {
async onDeleteAgentBot(id) {
const ok = await this.$refs.confirmDialog.showConfirmation();
if (ok) {
await this.$store.dispatch('bots/delete', id);
this.showAlert(this.$t('BOT.DELETE.API.SUCCESS_MESSAGE'));
}
},
},
};
</script>
<style scoped>
.bots-list {
list-style: none;
}
.nowrap {
white-space: nowrap;
}
.white-text {
color: white;
}
</style>

40
app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js Normal file
View file

@ -0,0 +1,40 @@
import SettingsContent from '../Wrapper';
const Bot = () => import('./Index.vue');
const CsmlEditBot = () => import('./csml/Edit.vue');
const CsmlNewBot = () => import('./csml/New.vue');
import { frontendURL } from '../../../../helper/URLHelper';
export default {
routes: [
{
path: frontendURL('accounts/:accountId/settings/agent-bots'),
roles: ['administrator'],
component: SettingsContent,
props: {
headerTitle: 'AGENT_BOTS.HEADER',
icon: 'bot',
showNewButton: false,
},
children: [
{
path: '',
name: 'agent_bots',
component: Bot,
roles: ['administrator'],
},
{
path: 'csml/new',
name: 'agent_bots_csml_new',
component: CsmlNewBot,
roles: ['administrator'],
},
{
path: 'csml/:botId',
name: 'agent_bots_csml_edit',
component: CsmlEditBot,
roles: ['administrator'],
},
],
},
],
};

91
app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue Normal file
View file

@ -0,0 +1,91 @@
<template>
<tr>
<td class="agent-bot--details">
<div class="agent-bot--link">
{{ agentBot.name }}
</div>
<div class="agent-bot--description">
<div class="agent-bot--type">
<agent-bot-type :bot-type="agentBot.bot_type" />
</div>
<show-more :text="agentBot.description" :limit="120" />
</div>
</td>
<td class="button-wrapper">
<woot-button
v-if="isACSMLTypeBot"
v-tooltip.top="$t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
variant="smooth"
size="tiny"
color-scheme="secondary"
icon="edit"
@click="$emit('edit', agentBot)"
/>
<woot-button
v-tooltip.top="$t('AGENT_BOTS.DELETE.BUTTON_TEXT')"
variant="smooth"
color-scheme="alert"
size="tiny"
icon="dismiss-circle"
@click="$emit('delete', agentBot, index)"
/>
</td>
</tr>
</template>
<script>
import ShowMore from 'dashboard/components/widgets/ShowMore';
import AgentBotType from './AgentBotType.vue';
export default {
components: { ShowMore, AgentBotType },
props: {
agentBot: {
type: Object,
required: true,
},
index: {
type: Number,
required: true,
},
},
computed: {
isACSMLTypeBot() {
const { bot_type: botType } = this.agentBot;
return botType === 'csml';
},
},
};
</script>
<style scoped lang="scss">
.agent-bot--link {
align-items: center;
color: var(--s-800);
display: flex;
font-weight: var(--font-weight-medium);
word-break: break-word;
}
.agent-bot--description {
color: var(--s-700);
font-size: var(--font-size-mini);
}
.agent-bot--type {
color: var(--s-600);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-small);
}
.agent-bot--details {
width: 90%;
}
.button-wrapper {
max-width: var(--space-mega);
min-width: auto;
button:nth-child(2) {
margin-left: var(--space-normal);
}
}
</style>

41
app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue Normal file
View file

@ -0,0 +1,41 @@
<template>
<span>
<img
v-tooltip="botTypeConfig[botType].label"
class="agent-bot-type--thumbnail"
:src="botTypeConfig[botType].thumbnail"
:alt="botTypeConfig[botType].label"
/>
<span>{{ botTypeConfig[botType].label }}</span>
</span>
</template>
<script>
export default {
props: {
botType: {
type: String,
default: 'webhook',
},
},
data() {
return {
botTypeConfig: {
csml: {
label: this.$t('AGENT_BOTS.TYPES.CSML'),
thumbnail: '/dashboard/images/agent-bots/csml.png',
},
webhook: {
label: this.$t('AGENT_BOTS.TYPES.WEBHOOK'),
thumbnail: '/dashboard/images/agent-bots/webhook.svg',
},
},
};
},
};
</script>
<style scoped>
.agent-bot-type--thumbnail {
width: auto;
height: var(--space-slab);
}
</style>

112
app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue Normal file
View file

@ -0,0 +1,112 @@
<template>
<div class="column content-box no-padding">
<div class="row">
<div class="small-8 columns">
<div class="full-height editor-wrapper">
<csml-monaco-editor v-model="bot.csmlContent" class="bot-editor" />
<div v-if="$v.bot.csmlContent.$error" class="editor-error-message">
<span>{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.ERROR') }}</span>
</div>
</div>
</div>
<div class="small-4 columns content-box full-height">
<form class="details-editor" @submit.prevent="">
<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>
<woot-button>
{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.SUBMIT') }}
</woot-button>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
import { required } from 'vuelidate/lib/validators';
import { CsmlMonacoEditor } from '@clevy/vue-csml-monaco';
export default {
components: { CsmlMonacoEditor },
validations: {
bot: {
name: { required },
csmlContent: { required },
},
},
data() {
return {
bot: {
name: '',
description: '',
csmlContent: '',
},
};
},
methods: {
onSubmit() {
this.$v.$touch();
if (this.$v.$invalid) {
return;
}
this.$emit('submit', this.bot);
},
},
};
</script>
<style scoped>
.no-padding {
padding: 0 !important;
}
.full-height {
height: calc(100vh - 56px);
}
.bot-editor {
width: 100%;
height: 100%;
}
.details-editor {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.editor-wrapper {
position: relative;
}
.editor-error-message {
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
background-color: #e0bbbb;
display: flex;
align-items: center;
font-size: 1.2rem;
justify-content: center;
flex-shrink: 0;
}
</style>

3
app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<p>This is the edit page of agent bots</p>
</template>

24
app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue Normal file
View file

@ -0,0 +1,24 @@
<template>
<div>
<csml-bot-editor @submit="saveBot" />
</div>
</template>
<script>
import alertMixin from 'shared/mixins/alertMixin';
import CsmlBotEditor from '../components/CSMLBotEditor.vue';
export default {
components: { CsmlBotEditor },
mixins: [alertMixin],
methods: {
async saveBot(bot) {
try {
await this.$store.dispatch('bots/create', bot);
this.showAlert(this.$t('BOT.ADD.API.SUCCESS_MESSAGE'));
} catch (error) {
this.showAlert(this.$t('BOT.ADD.FORM.BOT_CONFIG.API_ERROR'));
}
},
},
};
</script>

10
app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
View file

@ -13,6 +13,7 @@ import teams from './teams/teams.routes';
import attributes from './attributes/attributes.routes';
import automation from './automation/automation.routes';
import store from '../../../store';
import agentBots from './agentBots/agentBot.routes';
export default {
routes: [
@ -29,16 +30,17 @@ export default {
},
...account.routes,
...agent.routes,
...agentBots.routes,
...attributes.routes,
...automation.routes,
...campaigns.routes,
...canned.routes,
...inbox.routes,
...integrationapps.routes,
...integrations.routes,
...labels.routes,
...profile.routes,
...reports.routes,
...teams.routes,
...campaigns.routes,
...integrationapps.routes,
...attributes.routes,
...automation.routes,
],
};

2
app/javascript/dashboard/store/index.js
View file

@ -2,6 +2,7 @@ import Vue from 'vue';
import Vuex from 'vuex';
import accounts from './modules/accounts';
import agentBots from './modules/agentBots';
import agents from './modules/agents';
import attributes from './modules/attributes';
import auth from './modules/auth';
@ -40,6 +41,7 @@ Vue.use(Vuex);
export default new Vuex.Store({
modules: {
accounts,
agentBots,
agents,
attributes,
auth,

2
app/javascript/dashboard/store/modules/accounts.js
View file

@ -16,7 +16,7 @@ const state = {
export const getters = {
getAccount: $state => id => {
return $state.records.find(record => record.id === Number(id));
return $state.records.find(record => record.id === Number(id)) || {};
},
getUIFlags($state) {
return $state.uiFlags;

107
app/javascript/dashboard/store/modules/agentBots.js Normal file
View file

@ -0,0 +1,107 @@
import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
import types from '../mutation-types';
import AgentBotsAPI from '../../api/agentBots';
import { parseAPIErrorResponse } from '../utils/api';
export const state = {
records: [],
uiFlags: {
isFetching: false,
isFetchingItem: false,
isCreating: false,
isDeleting: false,
isUpdating: false,
},
};
export const getters = {
getBots(_state) {
return _state.records;
},
getUIFlags(_state) {
return _state.uiFlags;
},
getBot: _state => botId => {
const [bot] = _state.records.filter(record => record.id === Number(botId));
return bot || {};
},
};
export const actions = {
get: async ({ commit }) => {
commit(types.SET_AGENT_BOT_UI_FLAG, { isFetching: true });
try {
const response = await AgentBotsAPI.get();
commit(types.SET_AGENT_BOTS, response.data);
} catch (error) {
// Ignore error
} finally {
commit(types.SET_AGENT_BOT_UI_FLAG, { isFetching: false });
}
},
create: async ({ commit }, agentBotObj) => {
commit(types.SET_AGENT_BOT_UI_FLAG, { isCreating: true });
try {
const response = await AgentBotsAPI.create(agentBotObj);
commit(types.ADD_AGENT_BOT, response.data);
} catch (error) {
parseAPIErrorResponse(error);
} finally {
commit(types.SET_AGENT_BOT_UI_FLAG, { isCreating: false });
}
},
update: async ({ commit }, { id, ...agentBotObj }) => {
commit(types.SET_AGENT_BOT_UI_FLAG, { isUpdating: true });
try {
const response = await AgentBotsAPI.update(id, agentBotObj);
commit(types.EDIT_AGENT_BOT, response.data);
} catch (error) {
parseAPIErrorResponse(error);
} finally {
commit(types.SET_AGENT_BOT_UI_FLAG, { isUpdating: false });
}
},
delete: async ({ commit }, id) => {
commit(types.SET_AGENT_BOT_UI_FLAG, { isDeleting: true });
try {
await AgentBotsAPI.delete(id);
commit(types.DELETE_AGENT_BOT, id);
} catch (error) {
parseAPIErrorResponse(error);
} finally {
commit(types.SET_AGENT_BOT_UI_FLAG, { isDeleting: false });
}
},
show: async ({ commit }, id) => {
commit(types.SET_AGENT_BOT_UI_FLAG, { isFetchingItem: true });
try {
const { data } = await AgentBotsAPI.show(id);
commit(types.DELETE_AGENT_BOT, data);
} catch (error) {
parseAPIErrorResponse(error);
} finally {
commit(types.SET_AGENT_BOT_UI_FLAG, { isFetchingItem: false });
}
},
};
export const mutations = {
[types.SET_AGENT_BOT_UI_FLAG](_state, data) {
_state.uiFlags = {
..._state.uiFlags,
...data,
};
},
[types.ADD_AGENT_BOT]: MutationHelpers.create,
[types.SET_AGENT_BOTS]: MutationHelpers.set,
[types.EDIT_AGENT_BOT]: MutationHelpers.update,
[types.DELETE_AGENT_BOT]: MutationHelpers.destroy,
};
export default {
namespaced: true,
actions,
state,
getters,
mutations,
};

7
app/javascript/dashboard/store/mutation-types.js
View file

@ -217,4 +217,11 @@ export default {
// Dashboard Apps
SET_DASHBOARD_APPS_UI_FLAG: 'SET_DASHBOARD_APPS_UI_FLAG',
SET_DASHBOARD_APPS: 'SET_DASHBOARD_APPS',
// Agent Bots
SET_AGENT_BOT_UI_FLAG: 'SET_AGENT_BOT_UI_FLAG',
SET_AGENT_BOTS: 'SET_AGENT_BOTS',
ADD_AGENT_BOT: 'ADD_AGENT_BOT',
EDIT_AGENT_BOT: 'EDIT_AGENT_BOT',
DELETE_AGENT_BOT: 'DELETE_AGENT_BOT',
};

1
app/javascript/shared/components/FluentIcon/dashboard-icons.json
View file

@ -24,6 +24,7 @@
"M12.375 6.005a4.75 4.75 0 1 0 0 9.5 4.75 4.75 0 0 0 0-9.5Zm-3.5 4.75a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Z",
"M6.5 2A2.5 2.5 0 0 0 4 4.5v15A2.5 2.5 0 0 0 6.5 22h13.25a.75.75 0 0 0 0-1.5H6.5a1 1 0 0 1-1-1h14.25a.75.75 0 0 0 .75-.75V4.5A2.5 2.5 0 0 0 18 2H6.5ZM19 18H5.5V4.5a1 1 0 0 1 1-1H18a1 1 0 0 1 1 1V18Z"
],
"bot-outline": "M17.753 14a2.25 2.25 0 0 1 2.25 2.25v.905a3.75 3.75 0 0 1-1.307 2.846C17.13 21.345 14.89 22 12 22c-2.89 0-5.128-.656-6.691-2a3.75 3.75 0 0 1-1.306-2.843v-.908A2.25 2.25 0 0 1 6.253 14h11.5Zm0 1.5h-11.5a.75.75 0 0 0-.75.75v.908c0 .655.286 1.278.784 1.706C7.545 19.945 9.44 20.502 12 20.502c2.56 0 4.458-.557 5.719-1.64a2.25 2.25 0 0 0 .784-1.706v-.906a.75.75 0 0 0-.75-.75ZM11.898 2.008 12 2a.75.75 0 0 1 .743.648l.007.102V3.5h3.5a2.25 2.25 0 0 1 2.25 2.25v4.505a2.25 2.25 0 0 1-2.25 2.25h-8.5a2.25 2.25 0 0 1-2.25-2.25V5.75A2.25 2.25 0 0 1 7.75 3.5h3.5v-.749a.75.75 0 0 1 .648-.743L12 2l-.102.007ZM16.25 5h-8.5a.75.75 0 0 0-.75.75v4.505c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75V5.75a.75.75 0 0 0-.75-.75Zm-6.5 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm4.492 0a1.25 1.25 0 1 1 0 2.499 1.25 1.25 0 0 1 0-2.499Z",
"building-bank-outline": "M13.032 2.325a1.75 1.75 0 0 0-2.064 0L3.547 7.74c-.978.713-.473 2.26.736 2.26H4.5v5.8A2.75 2.75 0 0 0 3 18.25v1.5c0 .413.336.75.75.75h16.5a.75.75 0 0 0 .75-.75v-1.5a2.75 2.75 0 0 0-1.5-2.45V10h.217c1.21 0 1.713-1.547.736-2.26l-7.421-5.416Zm-1.18 1.211a.25.25 0 0 1 .295 0L18.95 8.5H5.05l6.803-4.964ZM18 10v5.5h-2V10h2Zm-3.5 0v5.5h-1.75V10h1.75Zm-3.25 0v5.5H9.5V10h1.75Zm-5.5 7h12.5c.69 0 1.25.56 1.25 1.25V19h-15v-.75c0-.69.56-1.25 1.25-1.25ZM6 15.5V10h2v5.5H6Z",
"calendar-clock-outline": [
"M21 6.25A3.25 3.25 0 0 0 17.75 3H6.25A3.25 3.25 0 0 0 3 6.25v11.5A3.25 3.25 0 0 0 6.25 21h5.772a6.471 6.471 0 0 1-.709-1.5H6.25a1.75 1.75 0 0 1-1.75-1.75V8.5h15v2.813a6.471 6.471 0 0 1 1.5.709V6.25ZM6.25 4.5h11.5c.966 0 1.75.784 1.75 1.75V7h-15v-.75c0-.966.784-1.75 1.75-1.75Z",

4
config/features.yml
View file

@ -8,4 +8,6 @@
- name: channel_twitter
enabled: true
- name: ip_lookup
enabled: false
enabled: true
- name: agent_bots
enabled: false

9
config/webpack/environment.js
View file

@ -1,5 +1,6 @@
const { environment } = require('@rails/webpacker');
const { VueLoaderPlugin } = require('vue-loader');
const MonacoEditorPlugin = require('monaco-editor-webpack-plugin');
const resolve = require('./resolve');
const vue = require('./loaders/vue');
@ -23,6 +24,14 @@ environment.loaders.append('audio', {
},
});
environment.plugins.append(
'CSMLMonacoEditor',
new MonacoEditorPlugin({
languages: [],
features: ['!codelens', '!colorPicker'],
})
);
environment.config.merge({ resolve });
environment.config.set('output.filename', chunkData => {
return chunkData.chunk.name === 'sdk'

BIN
public/dashboard/images/agent-bots/csml.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.2 KiB

64
public/dashboard/images/agent-bots/webhook.svg Normal file
View file

@ -0,0 +1,64 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#4D4D4D;" d="M188.287,512c-41.473,0-75.213-33.74-75.213-75.213V246.75c0-4.142,3.358-7.5,7.5-7.5
s7.5,3.358,7.5,7.5v190.037c0,33.202,27.011,60.213,60.213,60.213c16.082,0,31.204-6.266,42.582-17.644
c11.37-11.37,17.631-26.488,17.631-42.569V75.213C248.5,33.74,282.24,0,323.713,0c20.088,0,38.978,7.826,53.189,22.037
c14.203,14.202,22.024,33.087,22.024,53.176V256c0,4.142-3.358,7.5-7.5,7.5s-7.5-3.358-7.5-7.5V75.213
c0-16.082-6.261-31.2-17.63-42.569C354.918,21.266,339.794,15,323.713,15C290.511,15,263.5,42.011,263.5,75.213v361.574
c0,20.088-7.822,38.973-22.024,53.176C227.265,504.174,208.376,512,188.287,512z"/>
<g>
<rect x="113.07" y="246.75" style="fill:#3B3B3B;" width="15" height="26.875"/>
<rect x="383.93" y="235.31" style="fill:#3B3B3B;" width="15" height="26.875"/>
</g>
<rect x="361.9" y="385" style="fill:#CCCCCC;" width="57.983" height="39.944"/>
<rect x="361.9" y="385" style="fill:#ADADAD;" width="57.983" height="22.19"/>
<path style="fill:#A6E2E3;" d="M432.802,298.678v86.977c0,3.616-2.932,6.548-6.548,6.548h-70.721c-3.617,0-6.548-2.932-6.548-6.548
v-87.746c0-23.439,19.239-42.39,42.803-41.899C414.709,256.486,432.802,275.751,432.802,298.678z"/>
<rect x="92.11" y="87.06" style="fill:#CCCCCC;" width="57.983" height="36.28"/>
<rect x="92.11" y="105.43" style="fill:#ADADAD;" width="57.983" height="17.907"/>
<path style="fill:#FFA638;" d="M163.015,126.345v86.977c0,22.927-18.093,42.191-41.015,42.668
c-23.564,0.49-42.803-18.461-42.803-41.899v-87.746c0-3.616,2.932-6.548,6.548-6.548l0,0h70.721l0,0
C160.083,119.797,163.015,122.729,163.015,126.345z"/>
<path style="fill:#7CCBCC;" d="M391.787,256.009c-5.066-0.105-9.93,0.693-14.447,2.236c0.396-0.081,0.781-0.166,1.142-0.257
c2.982-0.755,5.201-0.896,7.513-0.85c18.954,0.395,34.375,16.494,34.375,35.888v86.981c0,3.614-2.93,6.544-6.544,6.544H355.53
c-3.614,0-6.544-2.93-6.544-6.544l0,0v5.648c0,3.616,2.932,6.548,6.548,6.548h70.721c3.617,0,6.548-2.932,6.548-6.548v-86.977
C432.802,275.751,414.709,256.486,391.787,256.009z"/>
<path style="fill:#EB7100;" d="M79.527,217.153l-0.23-0.322c0.081,1.261,0.209,2.509,0.399,3.737
C79.586,219.444,79.527,218.305,79.527,217.153z"/>
<path style="fill:#ED8300;" d="M156.467,119.797h-11.188c2.613,0.858,4.502,3.314,4.502,6.215v90.372
c0,19.395-15.42,35.494-34.375,35.888c-0.251,0.005-0.503,0.008-0.753,0.008c-9.651,0-18.405-3.914-24.76-10.236
c7.856,8.766,19.342,14.212,32.106,13.947c22.922-0.477,41.015-19.741,41.015-42.668v-86.977
C163.015,122.728,160.083,119.797,156.467,119.797z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB