From d5da2d0dd23ed24acb5b971ae2168efe9d6c2c0b Mon Sep 17 00:00:00 2001
From: Adrian Perez <adrian@adrianperez.org>
Date: Fri, 23 Nov 2018 15:24:03 -0800
Subject: [PATCH] fix(chatbot): templates with invalid syntax

Whether or not these are WIP I think it'd be great not to have syntax
errors. In addition, now these files are formatted accordingly.
---
 .../windows/ChatbotCapsProtectionWindow.vue   | 146 ++++-----
 .../windows/ChatbotCustomCommandWindow.vue    | 136 ++++-----
 .../windows/ChatbotDefaultCommandWindow.vue   | 283 ++++++++----------
 .../windows/ChatbotQueuePreferencesWindow.vue |  76 +++--
 .../windows/ChatbotQuotePreferencesWindow.vue |  61 ++--
 .../windows/ChatbotSymbolProtectionWindow.vue | 147 +++++----
 6 files changed, 384 insertions(+), 465 deletions(-)

diff --git a/app/components/page-components/Chatbot/windows/ChatbotCapsProtectionWindow.vue b/app/components/page-components/Chatbot/windows/ChatbotCapsProtectionWindow.vue
index 83b5e28a4be9..c140a0ac84a3 100644
--- a/app/components/page-components/Chatbot/windows/ChatbotCapsProtectionWindow.vue
+++ b/app/components/page-components/Chatbot/windows/ChatbotCapsProtectionWindow.vue
@@ -1,91 +1,77 @@
 <template>
-<ModalLayout
-  :showControls="false"
-  :customControls="true"
-  :title="$t('Caps Protection Preferences')"
->
-  <div slot="fixed">
-    <Tabs :tabs="tabs" :value="selectedTab" @input="onSelectTabHandler">
-    </Tabs>
-  </div>
-  <div slot="content" class="chatbot-caps-protection__container">
-    <transition name='fade' mode="out-in" appear>
-      <validated-form ref="form">
-        <div v-if="selectedTab === 'general' && capsProtection">
-          <div class="row">
-            <div class="small-6 columns">
-              <VFormGroup
-                :title="$t('Auto Permit')"
-                v-model="capsProtection.general.excluded.level"
-                :metadata="metadata.caps.general.excluded.level"
-              />
-            </div>
-            <div class="small-6 columns">
-              <VFormGroup
-                :title="$t('Punishment')"
-                v-model="capsProtection.general.punishment.type"
-                :metadata="metadata.caps.general.punishment.type"
-              />
+  <ModalLayout
+    :showControls="false"
+    :customControls="true"
+    :title="$t('Caps Protection Preferences')"
+  >
+    <div slot="fixed">
+      <Tabs :tabs="tabs" :value="selectedTab" @input="onSelectTabHandler"> </Tabs>
+    </div>
+    <div slot="content" class="chatbot-caps-protection__container">
+      <transition name="fade" mode="out-in" appear>
+        <validated-form ref="form">
+          <div v-if="selectedTab === 'general' && capsProtection">
+            <div class="row">
+              <div class="small-6 columns">
+                <VFormGroup
+                  :title="$t('Auto Permit')"
+                  v-model="capsProtection.general.excluded.level"
+                  :metadata="metadata.caps.general.excluded.level"
+                />
+              </div>
+              <div class="small-6 columns">
+                <VFormGroup
+                  :title="$t('Punishment')"
+                  v-model="capsProtection.general.punishment.type"
+                  :metadata="metadata.caps.general.punishment.type"
+                />
+              </div>
             </div>
+            <VFormGroup
+              v-if="capsProtection.general.punishment.type === 'Timeout'"
+              :title="$t('Punishment Duration (Value in Minutes)')"
+              v-model="capsProtection.general.punishment.duration"
+              :metadata="metadata.caps.general.punishment.duration"
+            />
+            <VFormGroup
+              :title="$t('Punishment Response (Line breaks will be ignored)')"
+              v-model="capsProtection.general.message"
+              :metadata="metadata.caps.general.message"
+            />
           </div>
-          <VFormGroup
-            v-if="capsProtection.general.punishment.type === 'Timeout'"
-            :title="$t('Punishment Duration (Value in Minutes)')"
-            v-model="capsProtection.general.punishment.duration"
-            :metadata="metadata.caps.general.punishment.duration"
-          />
-          <VFormGroup
-            :title="$t('Punishment Response (Line breaks will be ignored)')"
-            v-model="capsProtection.general.message"
-            :metadata="metadata.caps.general.message"
-          />
-        </div>
-        <div v-if="selectedTab === 'advanced'">
-          <VFormGroup
-            :title="$t('Minimum Amount of Caps')"
-            v-model="capsProtection.advanced.minimum"
-            :metadata="metadata.caps.advanced.minimum"
-          />
-          <VFormGroup
-            :title="$t('Maximum Amount of Caps')"
-            v-model="capsProtection.advanced.maximum"
-            :metadata="metadata.caps.advanced.maximum"
-          />
-          <VFormGroup
-            :title="$t('Maximum Percent')"
-            v-model="capsProtection.advanced.percent"
-            :metadata="metadata.caps.advanced.percent"
-          />
-        </div>
-      </validated-form>
-    </transition>
-  </div>
-  <div slot="controls" class="flex flex--space-between">
-    <button
-      class="button button--default"
-      @click="onResetHandler">
-      {{ $t('Reset') }}
-    </button>
-    <div>
-      <button
-        class="button button--default"
-        @click="onCancelHandler">
-        {{ $t('Cancel') }}
-      </button>
-      <button
-        class="button button--action"
-        @click="onSaveHandler"
-      >
-        {{ $t("Save") }}
-      </button>
+          <div v-if="selectedTab === 'advanced'">
+            <VFormGroup
+              :title="$t('Minimum Amount of Caps')"
+              v-model="capsProtection.advanced.minimum"
+              :metadata="metadata.caps.advanced.minimum"
+            />
+            <VFormGroup
+              :title="$t('Maximum Amount of Caps')"
+              v-model="capsProtection.advanced.maximum"
+              :metadata="metadata.caps.advanced.maximum"
+            />
+            <VFormGroup
+              :title="$t('Maximum Percent')"
+              v-model="capsProtection.advanced.percent"
+              :metadata="metadata.caps.advanced.percent"
+            />
+          </div>
+        </validated-form>
+      </transition>
+    </div>
+    <div slot="controls" class="flex flex--space-between">
+      <button class="button button--default" @click="onResetHandler">{{ $t('Reset') }}</button>
+      <div>
+        <button class="button button--default" @click="onCancelHandler">{{ $t('Cancel') }}</button>
+        <button class="button button--action" @click="onSaveHandler">{{ $t('Save') }}</button>
+      </div>
     </div>
-  </div>
-</ModalLayout>
+  </ModalLayout>
 </template>
 
 <script lang="ts" src="./ChatbotCapsProtectionWindow.vue.ts"></script>
 
-<style <style lang="less" scoped>
+<style lang="less" scoped>
 .chatbot-caps-protection__container {
   padding-top: 45px;
 }
diff --git a/app/components/page-components/Chatbot/windows/ChatbotCustomCommandWindow.vue b/app/components/page-components/Chatbot/windows/ChatbotCustomCommandWindow.vue
index 7e0b6402747b..181021160833 100644
--- a/app/components/page-components/Chatbot/windows/ChatbotCustomCommandWindow.vue
+++ b/app/components/page-components/Chatbot/windows/ChatbotCustomCommandWindow.vue
@@ -1,85 +1,75 @@
 <template>
-<ModalLayout
-  :showControls="false"
-  :customControls="true"
-  :title="isEdit ? $t('Edit Command') : $t('Add Command')"
->
-  <div slot="fixed">
-    <Tabs :tabs="tabs" :value="selectedTab" @input="onSelectTabHandler">
-    </Tabs>
-  </div>
-  <div slot="content" class="chatbot-add-command__container">
-    <transition name='fade' mode="out-in" appear>
-      <validated-form ref="form">
-        <div v-if="selectedTab === 'general'">
-          <VFormGroup
-            :title="$t('Command')"
-            v-model="newCommand.command"
-            :metadata="commandMetadata"
-          />
-          <VFormGroup
-            :title="$t('Response (Line breaks will be ignored)')"
-            v-model="newCommand.response"
-            :metadata="responseMetadata"
-          />
-          <div class="row">
-            <div class="small-6 columns">
-              <VFormGroup
-                :title="$t('Permission')"
-                v-model="newCommand.permission.level"
-                :metadata="permissionMetadata"
-              />
-            </div>
-            <div class="small-6 columns">
-              <VFormGroup
-                :title="$t('Reply In')"
-                v-model="newCommand.response_type"
-                :metadata="replyTypeMetadata"
-              />
+  <ModalLayout
+    :showControls="false"
+    :customControls="true"
+    :title="isEdit ? $t('Edit Command') : $t('Add Command')"
+  >
+    <div slot="fixed">
+      <Tabs :tabs="tabs" :value="selectedTab" @input="onSelectTabHandler"> </Tabs>
+    </div>
+    <div slot="content" class="chatbot-add-command__container">
+      <transition name="fade" mode="out-in" appear>
+        <validated-form ref="form">
+          <div v-if="selectedTab === 'general'">
+            <VFormGroup
+              :title="$t('Command')"
+              v-model="newCommand.command"
+              :metadata="commandMetadata"
+            />
+            <VFormGroup
+              :title="$t('Response (Line breaks will be ignored)')"
+              v-model="newCommand.response"
+              :metadata="responseMetadata"
+            />
+            <div class="row">
+              <div class="small-6 columns">
+                <VFormGroup
+                  :title="$t('Permission')"
+                  v-model="newCommand.permission.level"
+                  :metadata="permissionMetadata"
+                />
+              </div>
+              <div class="small-6 columns">
+                <VFormGroup
+                  :title="$t('Reply In')"
+                  v-model="newCommand.response_type"
+                  :metadata="replyTypeMetadata"
+                />
+              </div>
             </div>
           </div>
-        </div>
-        <div v-if="selectedTab === 'advanced'">
-          <div class="row">
-            <div class="small-6 columns">
-              <VFormGroup
-                :title="$t('Global Command Cooldown (Value in Seconds)')"
-                v-model="newCommand.cooldowns.global"
-                :metadata="cooldownsMetadata"
-              />
-            </div>
-            <div class="small-6 columns">
-              <VFormGroup
-                :title="$t('User Command Cooldown (Value in Seconds)')"
-                v-model="newCommand.cooldowns.user"
-                :metadata="cooldownsMetadata"
-              />
+          <div v-if="selectedTab === 'advanced'">
+            <div class="row">
+              <div class="small-6 columns">
+                <VFormGroup
+                  :title="$t('Global Command Cooldown (Value in Seconds)')"
+                  v-model="newCommand.cooldowns.global"
+                  :metadata="cooldownsMetadata"
+                />
+              </div>
+              <div class="small-6 columns">
+                <VFormGroup
+                  :title="$t('User Command Cooldown (Value in Seconds)')"
+                  v-model="newCommand.cooldowns.user"
+                  :metadata="cooldownsMetadata"
+                />
+              </div>
             </div>
+            <ChatbotAliases v-model="newCommand.aliases" />
           </div>
-          <ChatbotAliases v-model="newCommand.aliases" />
-        </div>
-      </validated-form>
-    </transition>
-  </div>
-  <div slot="controls">
-    <button
-      class="button button--default"
-      @click="onCancelHandler">
-      {{ $t('Cancel') }}
-    </button>
-    <button
-      class="button button--action"
-      @click="onSaveHandler"
-    >
-      {{ $t("Save") }}
-    </button>
-  </div>
-</ModalLayout>
+        </validated-form>
+      </transition>
+    </div>
+    <div slot="controls">
+      <button class="button button--default" @click="onCancelHandler">{{ $t('Cancel') }}</button>
+      <button class="button button--action" @click="onSaveHandler">{{ $t('Save') }}</button>
+    </div>
+  </ModalLayout>
 </template>
 
 <script lang="ts" src="./ChatbotCustomCommandWindow.vue.ts"></script>
 
-<style <style lang="less" scoped>
+<style lang="less" scoped>
 .chatbot-add-command__container {
   padding-top: 45px;
 }
diff --git a/app/components/page-components/Chatbot/windows/ChatbotDefaultCommandWindow.vue b/app/components/page-components/Chatbot/windows/ChatbotDefaultCommandWindow.vue
index 1937f5c5a5d2..7c8f3f18a3d4 100644
--- a/app/components/page-components/Chatbot/windows/ChatbotDefaultCommandWindow.vue
+++ b/app/components/page-components/Chatbot/windows/ChatbotDefaultCommandWindow.vue
@@ -1,169 +1,142 @@
 <template>
-<ModalLayout
-  :showControls="false"
-  :customControls="true"
-  :title="$t('Edit Command')"
->
-  <div slot="fixed">
-    <div class="row">
-      <div class="small-6 columns position--relative window-tab">
-        <Tabs :tabs="tabs" :value="selectedTab" @input="onSelectTabHandler"></Tabs>
-      </div>
-      <div class="small-6 columns position--relative window-tab">
-        <div class="window-toggle__wrapper">
-          <div
-            @click="onToggleLinkProtectionWindowHandler"
-            v-if="isLinkProtectionPermitCommand"
-          >
-            <span> {{ $t('Link Protection Preferences') }} </span>
-            <i class="fas fa-chevron-right window-toggle__icon"></i>
-          </div>
-          <div
-            @click="onToggleQuoteWindowHandler"
-            v-if="isQuoteCommand"
-          >
-            <span> {{ $t('Quote Preferences') }} </span>
-            <i class="fas fa-chevron-right window-toggle__icon"></i>
-          </div>
-          <div
-            @click="onToggleQueueWindowHandler"
-            v-if="isQueueJoinCommand"
-          >
-            <span> {{ $t('Queue Settings') }} </span>
-            <i class="fas fa-chevron-right window-toggle__icon"></i>
-          </div>
-          <div
-            @click="onToggleSongRequestWindowHandler"
-            v-if="isSongRequestCommand"
-          >
-            <span> {{ $t('Song Request Preferences') }} </span>
-            <i class="fas fa-chevron-right window-toggle__icon"></i>
+  <ModalLayout :showControls="false" :customControls="true" :title="$t('Edit Command')">
+    <div slot="fixed">
+      <div class="row">
+        <div class="small-6 columns position--relative window-tab">
+          <Tabs :tabs="tabs" :value="selectedTab" @input="onSelectTabHandler"></Tabs>
+        </div>
+        <div class="small-6 columns position--relative window-tab">
+          <div class="window-toggle__wrapper">
+            <div @click="onToggleLinkProtectionWindowHandler" v-if="isLinkProtectionPermitCommand">
+              <span> {{ $t('Link Protection Preferences') }} </span>
+              <i class="fas fa-chevron-right window-toggle__icon"></i>
+            </div>
+            <div @click="onToggleQuoteWindowHandler" v-if="isQuoteCommand">
+              <span> {{ $t('Quote Preferences') }} </span>
+              <i class="fas fa-chevron-right window-toggle__icon"></i>
+            </div>
+            <div @click="onToggleQueueWindowHandler" v-if="isQueueJoinCommand">
+              <span> {{ $t('Queue Settings') }} </span>
+              <i class="fas fa-chevron-right window-toggle__icon"></i>
+            </div>
+            <div @click="onToggleSongRequestWindowHandler" v-if="isSongRequestCommand">
+              <span> {{ $t('Song Request Preferences') }} </span>
+              <i class="fas fa-chevron-right window-toggle__icon"></i>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    v-if="editedCommand"
-    slot="content"
-    class="chatbot-add-command__container"
-  >
-    <transition name='fade' mode="out-in" appear>
-      <validated-form ref="form">
-        <div v-if="selectedTab === 'general'">
-          <VFormGroup
-            :title="$t('Command')"
-            v-model="editedCommand.command"
-            :metadata="metadata.command"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.response"
-            :title="$t('Response (Line breaks will be ignored)')"
-            v-model="editedCommand.response"
-            :metadata="metadata.response"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.success_response"
-            :title="$t('Success Response (Line breaks will be ignored)')"
-            v-model="editedCommand.success_response"
-            :metadata="metadata.success_response"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.failed_response"
-            :title="$t('Failed Response (Line breaks will be ignored)')"
-            v-model="editedCommand.failed_response"
-            :metadata="metadata.failed_response"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.enabled_response"
-            :title="$t('Enabled Response (Line breaks will be ignored)')"
-            v-model="editedCommand.enabled_response"
-            :metadata="metadata.enabled_response"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.disabled_response"
-            :title="$t('Disabled Response (Line breaks will be ignored)')"
-            v-model="editedCommand.disabled_response"
-            :metadata="metadata.disabled_response"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.duration_response"
-            :title="$t('Duration Response (Line breaks will be ignored)')"
-            v-model="editedCommand.duration_response"
-            :metadata="metadata.duration_response"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.rating_response"
-            :title="$t('Rating Response (Line breaks will be ignored)')"
-            v-model="editedCommand.rating_response"
-            :metadata="metadata.rating_response"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.views_response"
-            :title="$t('Views Response (Line breaks will be ignored)')"
-            v-model="editedCommand.views_response"
-            :metadata="metadata.views_response"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.banned_response"
-            :title="$t('Banned Response (Line breaks will be ignored)')"
-            v-model="editedCommand.banned_response"
-            :metadata="metadata.banned_response"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.music_response"
-            :title="$t('Banned Response (Line breaks will be ignored)')"
-            v-model="editedCommand.music_response"
-            :metadata="metadata.music_response"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.max_response"
-            :title="$t('Max Response (Line breaks will be ignored)')"
-            v-model="editedCommand.max_response"
-            :metadata="metadata.max_response"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.full_response"
-            :title="$t('Full Response (Line breaks will be ignored)')"
-            v-model="editedCommand.full_response"
-            :metadata="metadata.full_response"
-          />
-          <VFormGroup
-            v-if="defaultCommandToUpdate.response_type"
-            :title="$t('Reply in')"
-            v-model="editedCommand.response_type"
-            :metadata="metadata.response_type"
-          />
-        </div>
-        <div v-if="selectedTab === 'advanced'">
-          <ChatbotAliases v-model="editedCommand.aliases" />
-        </div>
-      </validated-form>
-    </transition>
-  </div>
-  <div slot="controls" class="flex flex--space-between">
-    <button class="button button--default" @click="onResetCommandHandler">
-      {{ $t('Reset Command') }}
-    </button>
-    <div>
-      <button class="button button--default" @click="onCancelHandler">
-        {{ $t('Cancel') }}
-      </button>
-      <button
-        class="button button--action"
-        @click="onSaveHandler"
-      >
-        {{ $t("Save") }}
+    <div v-if="editedCommand" slot="content" class="chatbot-add-command__container">
+      <transition name="fade" mode="out-in" appear>
+        <validated-form ref="form">
+          <div v-if="selectedTab === 'general'">
+            <VFormGroup
+              :title="$t('Command')"
+              v-model="editedCommand.command"
+              :metadata="metadata.command"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.response"
+              :title="$t('Response (Line breaks will be ignored)')"
+              v-model="editedCommand.response"
+              :metadata="metadata.response"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.success_response"
+              :title="$t('Success Response (Line breaks will be ignored)')"
+              v-model="editedCommand.success_response"
+              :metadata="metadata.success_response"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.failed_response"
+              :title="$t('Failed Response (Line breaks will be ignored)')"
+              v-model="editedCommand.failed_response"
+              :metadata="metadata.failed_response"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.enabled_response"
+              :title="$t('Enabled Response (Line breaks will be ignored)')"
+              v-model="editedCommand.enabled_response"
+              :metadata="metadata.enabled_response"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.disabled_response"
+              :title="$t('Disabled Response (Line breaks will be ignored)')"
+              v-model="editedCommand.disabled_response"
+              :metadata="metadata.disabled_response"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.duration_response"
+              :title="$t('Duration Response (Line breaks will be ignored)')"
+              v-model="editedCommand.duration_response"
+              :metadata="metadata.duration_response"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.rating_response"
+              :title="$t('Rating Response (Line breaks will be ignored)')"
+              v-model="editedCommand.rating_response"
+              :metadata="metadata.rating_response"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.views_response"
+              :title="$t('Views Response (Line breaks will be ignored)')"
+              v-model="editedCommand.views_response"
+              :metadata="metadata.views_response"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.banned_response"
+              :title="$t('Banned Response (Line breaks will be ignored)')"
+              v-model="editedCommand.banned_response"
+              :metadata="metadata.banned_response"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.music_response"
+              :title="$t('Banned Response (Line breaks will be ignored)')"
+              v-model="editedCommand.music_response"
+              :metadata="metadata.music_response"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.max_response"
+              :title="$t('Max Response (Line breaks will be ignored)')"
+              v-model="editedCommand.max_response"
+              :metadata="metadata.max_response"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.full_response"
+              :title="$t('Full Response (Line breaks will be ignored)')"
+              v-model="editedCommand.full_response"
+              :metadata="metadata.full_response"
+            />
+            <VFormGroup
+              v-if="defaultCommandToUpdate.response_type"
+              :title="$t('Reply in')"
+              v-model="editedCommand.response_type"
+              :metadata="metadata.response_type"
+            />
+          </div>
+          <div v-if="selectedTab === 'advanced'">
+            <ChatbotAliases v-model="editedCommand.aliases" />
+          </div>
+        </validated-form>
+      </transition>
+    </div>
+    <div slot="controls" class="flex flex--space-between">
+      <button class="button button--default" @click="onResetCommandHandler">
+        {{ $t('Reset Command') }}
       </button>
+      <div>
+        <button class="button button--default" @click="onCancelHandler">{{ $t('Cancel') }}</button>
+        <button class="button button--action" @click="onSaveHandler">{{ $t('Save') }}</button>
+      </div>
     </div>
-  </div>
-</ModalLayout>
+  </ModalLayout>
 </template>
 
 <script lang="ts" src="./ChatbotDefaultCommandWindow.vue.ts"></script>
 
-<style <style lang="less" scoped>
-@import "../../../../styles/index";
+<style lang="less" scoped>
+@import '../../../../styles/index';
 .window-tab {
   &:first-child {
     padding-right: 0;
diff --git a/app/components/page-components/Chatbot/windows/ChatbotQueuePreferencesWindow.vue b/app/components/page-components/Chatbot/windows/ChatbotQueuePreferencesWindow.vue
index 281cc03208db..873228ff6866 100644
--- a/app/components/page-components/Chatbot/windows/ChatbotQueuePreferencesWindow.vue
+++ b/app/components/page-components/Chatbot/windows/ChatbotQueuePreferencesWindow.vue
@@ -1,52 +1,44 @@
 <template>
-<ModalLayout
-  :showControls="false"
-  :customControls="true"
-  :title="$t('Queue Settings')"
- >
-  <div slot="fixed">
-   <div class="window-toggle__wrapper">
-    <div @click="onToggleQueueWindowHandler">
-      <span> {{ $t('Edit Primary Command') }} </span>
-      <i class="fas fa-chevron-right window-toggle__icon"></i>
+  <ModalLayout :showControls="false" :customControls="true" :title="$t('Queue Settings')">
+    <div slot="fixed">
+      <div class="window-toggle__wrapper">
+        <div @click="onToggleQueueWindowHandler">
+          <span> {{ $t('Edit Primary Command') }} </span>
+          <i class="fas fa-chevron-right window-toggle__icon"></i>
+        </div>
+      </div>
     </div>
-  </div>
-  </div>
-  <div slot="content" class="chatbot-quote-preferences__container">
-    <div>
-      <VFormGroup
-        :title="$t('Maximum Queue Size')"
-        v-model="generalSettings.maximum"
-        :metadata="metadata.maximum"
-      />
-      <VFormGroup
-        :title="$t('Pick User Message')"
-        v-model="generalSettings.messages.picked"
-        :metadata="metadata.messages.picked"
-      />
+    <div slot="content" class="chatbot-quote-preferences__container">
+      <div>
+        <VFormGroup
+          :title="$t('Maximum Queue Size')"
+          v-model="generalSettings.maximum"
+          :metadata="metadata.maximum"
+        />
+        <VFormGroup
+          :title="$t('Pick User Message')"
+          v-model="generalSettings.messages.picked"
+          :metadata="metadata.messages.picked"
+        />
+      </div>
     </div>
-  </div>
-  <div slot="controls">
-    <button
-      class="button button--default"
-      @click="onCancelHandler">
-      {{ $t('Cancel') }}
-    </button>
-    <button
-      class="button button--action"
-      @click="onSaveHandler"
-      :disabled="errors.items.length > 0 || !generalSettings.messages.picked"
-    >
-      {{ $t('Save') }}
-    </button>
-  </div>
-</ModalLayout>
+    <div slot="controls">
+      <button class="button button--default" @click="onCancelHandler">{{ $t('Cancel') }}</button>
+      <button
+        class="button button--action"
+        @click="onSaveHandler"
+        :disabled="errors.items.length > 0 || !generalSettings.messages.picked"
+      >
+        {{ $t('Save') }}
+      </button>
+    </div>
+  </ModalLayout>
 </template>
 
 <script lang="ts" src="./ChatbotQueuePreferencesWindow.vue.ts"></script>
 
-<style <style lang="less" scoped>
-@import "../../../../styles/index";
+<style lang="less" scoped>
+@import '../../../../styles/index';
 
 .window-toggle__wrapper {
   background-color: @day-primary;
diff --git a/app/components/page-components/Chatbot/windows/ChatbotQuotePreferencesWindow.vue b/app/components/page-components/Chatbot/windows/ChatbotQuotePreferencesWindow.vue
index 23bc4b05341d..3a863c002cfb 100644
--- a/app/components/page-components/Chatbot/windows/ChatbotQuotePreferencesWindow.vue
+++ b/app/components/page-components/Chatbot/windows/ChatbotQuotePreferencesWindow.vue
@@ -1,46 +1,33 @@
 <template>
-<ModalLayout
-  :showControls="false"
-  :customControls="true"
-  :title="$t('Add Quote')"
->
-  <div slot="fixed">
-   <div class="window-toggle__wrapper">
-    <div @click="onToggleQuoteWindowHandler">
-      <span> {{ $t('Edit Command') }} </span>
-      <i class="fas fa-chevron-right window-toggle__icon"></i>
+  <ModalLayout :showControls="false" :customControls="true" :title="$t('Add Quote')">
+    <div slot="fixed">
+      <div class="window-toggle__wrapper">
+        <div @click="onToggleQuoteWindowHandler">
+          <span> {{ $t('Edit Command') }} </span>
+          <i class="fas fa-chevron-right window-toggle__icon"></i>
+        </div>
+      </div>
     </div>
-  </div>
-  </div>
-  <div slot="content" class="chatbot-quote-preferences__container">
-    <validated-form ref="form">
-      <VFormGroup
-        :title="$t('Date Format')"
-        v-model="generalSettings.date_format"
-        :metadata="metadata.date_format"
-      />
-    </validated-form>
-  </div>
-  <div slot="controls">
-    <button
-      class="button button--default"
-      @click="onCancelHandler">
-      {{ $t('Cancel') }}
-    </button>
-    <button
-      class="button button--action"
-      @click="onSaveHandler"
-    >
-      {{ $t('Save') }}
-    </button>
-  </div>
-</ModalLayout>
+    <div slot="content" class="chatbot-quote-preferences__container">
+      <validated-form ref="form">
+        <VFormGroup
+          :title="$t('Date Format')"
+          v-model="generalSettings.date_format"
+          :metadata="metadata.date_format"
+        />
+      </validated-form>
+    </div>
+    <div slot="controls">
+      <button class="button button--default" @click="onCancelHandler">{{ $t('Cancel') }}</button>
+      <button class="button button--action" @click="onSaveHandler">{{ $t('Save') }}</button>
+    </div>
+  </ModalLayout>
 </template>
 
 <script lang="ts" src="./ChatbotQuotePreferencesWindow.vue.ts"></script>
 
-<style <style lang="less" scoped>
-@import "../../../../styles/index";
+<style lang="less" scoped>
+@import '../../../../styles/index';
 
 .window-toggle__wrapper {
   background-color: @day-primary;
diff --git a/app/components/page-components/Chatbot/windows/ChatbotSymbolProtectionWindow.vue b/app/components/page-components/Chatbot/windows/ChatbotSymbolProtectionWindow.vue
index cbe8e936688c..77706abbf6d5 100644
--- a/app/components/page-components/Chatbot/windows/ChatbotSymbolProtectionWindow.vue
+++ b/app/components/page-components/Chatbot/windows/ChatbotSymbolProtectionWindow.vue
@@ -1,90 +1,81 @@
 <template>
-<ModalLayout
-  :showControls="false"
-  :customControls="true"
-  :title="$t('Symbol Protection Preferences')"
->
-  <div slot="fixed">
-    <Tabs :tabs="tabs" :value="selectedTab" @input="onSelectTabHandler">
-    </Tabs>
-  </div>
-  <validated-form ref="form" slot="content" class="chatbot-symbol-protection__container">
-    <transition name='fade' mode="out-in" appear>
-      <div v-if="selectedTab === 'general' && symbolProtection">
-        <div class="row">
-          <div class="small-6 columns">
-            <VFormGroup
-              :title="$t('Auto Permit')"
-              v-model="symbolProtection.general.excluded.level"
-              :metadata="metadata.symbol.general.excluded.level"
-            />
-          </div>
-          <div class="small-6 columns">
-            <VFormGroup
-              :title="$t('Punishment')"
-              v-model="symbolProtection.general.punishment.type"
-              :metadata="metadata.symbol.general.punishment.type"
-            />
+  <ModalLayout
+    :showControls="false"
+    :customControls="true"
+    :title="$t('Symbol Protection Preferences')"
+  >
+    <div slot="fixed">
+      <Tabs :tabs="tabs" :value="selectedTab" @input="onSelectTabHandler"> </Tabs>
+    </div>
+    <validated-form ref="form" slot="content" class="chatbot-symbol-protection__container">
+      <transition name="fade" mode="out-in" appear>
+        <div v-if="selectedTab === 'general' && symbolProtection">
+          <div class="row">
+            <div class="small-6 columns">
+              <VFormGroup
+                :title="$t('Auto Permit')"
+                v-model="symbolProtection.general.excluded.level"
+                :metadata="metadata.symbol.general.excluded.level"
+              />
+            </div>
+            <div class="small-6 columns">
+              <VFormGroup
+                :title="$t('Punishment')"
+                v-model="symbolProtection.general.punishment.type"
+                :metadata="metadata.symbol.general.punishment.type"
+              />
+            </div>
           </div>
+          <VFormGroup
+            v-if="symbolProtection.general.punishment.type === 'Timeout'"
+            :title="$t('Punishment Duration (Value in Seconds)')"
+            v-model="symbolProtection.general.punishment.duration"
+            :metadata="metadata.symbol.general.punishment.duration"
+          />
+          <VFormGroup
+            :title="$t('Punishment Response (Line breaks will be ignored)')"
+            v-model="symbolProtection.general.message"
+            :metadata="metadata.symbol.general.message"
+          />
         </div>
-        <VFormGroup
-          v-if="symbolProtection.general.punishment.type === 'Timeout'"
-          :title="$t('Punishment Duration (Value in Seconds)')"
-          v-model="symbolProtection.general.punishment.duration"
-          :metadata="metadata.symbol.general.punishment.duration"
-        />
-        <VFormGroup
-          :title="$t('Punishment Response (Line breaks will be ignored)')"
-          v-model="symbolProtection.general.message"
-          :metadata="metadata.symbol.general.message"
-        />
-      </div>
-      <div v-if="selectedTab === 'advanced'">
-        <VFormGroup
-          :title="$t('Minimum Amount of Symbols')"
-          v-model="symbolProtection.advanced.minimum"
-          :metadata="metadata.symbol.advanced.minimum"
-        />
-        <VFormGroup
-          :title="$t('Maximum Amount of Symbols')"
-          v-model="symbolProtection.advanced.maximum"
-          :metadata="metadata.symbol.advanced.maximum"
-        />
-        <VFormGroup
-          :title="$t('Maximum Percent')"
-          v-model="symbolProtection.advanced.percent"
-          :metadata="metadata.symbol.advanced.percent"
-        />
+        <div v-if="selectedTab === 'advanced'">
+          <VFormGroup
+            :title="$t('Minimum Amount of Symbols')"
+            v-model="symbolProtection.advanced.minimum"
+            :metadata="metadata.symbol.advanced.minimum"
+          />
+          <VFormGroup
+            :title="$t('Maximum Amount of Symbols')"
+            v-model="symbolProtection.advanced.maximum"
+            :metadata="metadata.symbol.advanced.maximum"
+          />
+          <VFormGroup
+            :title="$t('Maximum Percent')"
+            v-model="symbolProtection.advanced.percent"
+            :metadata="metadata.symbol.advanced.percent"
+          />
+        </div>
+      </transition>
+    </validated-form>
+    <div slot="controls" class="flex flex--space-between">
+      <button class="button button--default" @click="onResetHandler">{{ $t('Reset') }}</button>
+      <div>
+        <button class="button button--default" @click="onCancelHandler">{{ $t('Cancel') }}</button>
+        <button
+          class="button button--action"
+          @click="onSaveHandler"
+          :disabled="errors.items.length > 0"
+        >
+          {{ $t('Save') }}
+        </button>
       </div>
-    </transition>
-  </validated-form>
-  <div slot="controls" class="flex flex--space-between">
-    <button
-      class="button button--default"
-      @click="onResetHandler">
-      {{ $t('Reset') }}
-    </button>
-    <div>
-      <button
-        class="button button--default"
-        @click="onCancelHandler">
-        {{ $t('Cancel') }}
-      </button>
-      <button
-        class="button button--action"
-        @click="onSaveHandler"
-        :disabled="errors.items.length > 0"
-      >
-        {{ $t("Save") }}
-      </button>
     </div>
-  </div>
-</ModalLayout>
+  </ModalLayout>
 </template>
 
 <script lang="ts" src="./ChatbotSymbolProtectionWindow.vue.ts"></script>
 
-<style <style lang="less" scoped>
+<style lang="less" scoped>
 .chatbot-symbol-protection__container {
   padding-top: 45px;
 }