chore: Custom Roles to manage permissions [ UI ] (#9865)

In admin settings, this Pr will add the UI for managing custom roles (
ref: https://github.com/chatwoot/chatwoot/pull/9995 ). It also handles
the routing logic changes to accommodate fine-tuned permissions.

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/widgets/ChatTypeTabs.vue

@@ -21,8 +21,11 @@ const activeTabIndex = computed(() => {
 });
 
 const onTabChange = selectedTabIndex => {
-  if (props.items[selectedTabIndex].key !== props.activeTab) {
-    emit('chatTabChange', props.items[selectedTabIndex].key);
+  if (selectedTabIndex >= 0 && selectedTabIndex < props.items.length) {
+    const selectedItem = props.items[selectedTabIndex];
+    if (selectedItem.key !== props.activeTab) {
+      emit('chatTabChange', selectedItem.key);
+    }
   }
 };
 
@@ -32,7 +35,8 @@ const keyboardEvents = {
       if (props.activeTab === wootConstants.ASSIGNEE_TYPE.ALL) {
         onTabChange(0);
       } else {
-        onTabChange(activeTabIndex.value + 1);
+        const nextIndex = (activeTabIndex.value + 1) % props.items.length;
+        onTabChange(nextIndex);
       }
     },
   },

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -97,6 +97,7 @@ export default {
     allowSignature: { type: Boolean, default: false },
     channelType: { type: String, default: '' },
     showImageResizeToolbar: { type: Boolean, default: false }, // A kill switch to show or hide the image toolbar
+    focusOnMount: { type: Boolean, default: true },
   },
   setup() {
     const {
@@ -346,7 +347,9 @@ export default {
   mounted() {
     this.createEditorView();
     this.editorView.updateState(this.state);
-    this.focusEditorInputField();
+    if (this.focusOnMount) {
+      this.focusEditorInputField();
+    }
 
     // BUS Event to insert text or markdown into the editor at the
     // current cursor position.
@@ -383,7 +386,7 @@ export default {
         // these drafts can also have a signature, so we need to check if the body is empty
         // and handle things accordingly
         this.handleEmptyBodyWithSignature();
-      } else {
+      } else if (this.focusOnMount) {
         // this is in the else block, handleEmptyBodyWithSignature also has a call to the focus method
         // the position is set to start, because the signature is added at the end of the body
         this.focusEditorInputField('end');