feat: Update the UI to support the change for Copilot as a universal copilot (#11618)

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import CopilotContainer from '../../copilot/CopilotContainer.vue';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
-import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
-import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store';
 import { FEATURE_FLAGS } from '../../../featureFlags';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 const props = defineProps({
   currentChat: {
@@ -14,33 +13,8 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['toggleContactPanel']);
-
-const { t } = useI18n();
-
 const channelType = computed(() => props.currentChat?.meta?.channel || '');
 
-const CONTACT_TABS_OPTIONS = [
-  { key: 'CONTACT', value: 'contact' },
-  { key: 'COPILOT', value: 'copilot' },
-];
-
-const tabs = computed(() => {
-  return CONTACT_TABS_OPTIONS.map(tab => ({
-    label: t(`CONVERSATION.SIDEBAR.${tab.key}`),
-    value: tab.value,
-  }));
-});
-const activeTab = ref(0);
-const toggleContactPanel = () => {
-  emit('toggleContactPanel');
-};
-
-const handleTabChange = selectedTab => {
-  activeTab.value = tabs.value.findIndex(
-    tabItem => tabItem.value === selectedTab.value
-  );
-};
 const currentAccountId = useMapGetter('getCurrentAccountId');
 const isFeatureEnabledonAccount = useMapGetter(
   'accounts/isFeatureEnabledonAccount'
@@ -49,29 +23,37 @@ const isFeatureEnabledonAccount = useMapGetter(
 const showCopilotTab = computed(() =>
   isFeatureEnabledonAccount.value(currentAccountId.value, FEATURE_FLAGS.CAPTAIN)
 );
+
+const { uiSettings } = useUISettings();
+
+const activeTab = computed(() => {
+  const {
+    is_contact_sidebar_open: isContactSidebarOpen,
+    is_copilot_panel_open: isCopilotPanelOpen,
+  } = uiSettings.value;
+
+  if (isContactSidebarOpen) {
+    return 0;
+  }
+  if (isCopilotPanelOpen) {
+    return 1;
+  }
+  return null;
+});
 </script>
 
 <template>
   <div
     class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-80 min-w-80 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
   >
-    <div v-if="showCopilotTab" class="p-2">
-      <TabBar
-        :tabs="tabs"
-        :initial-active-tab="activeTab"
-        class="w-full [&>button]:w-full"
-        @tab-changed="handleTabChange"
-      />
-    </div>
     <div class="flex flex-1 overflow-auto">
       <ContactPanel
-        v-if="!activeTab"
+        v-show="activeTab === 0"
         :conversation-id="currentChat.id"
         :inbox-id="currentChat.inbox_id"
-        :on-toggle="toggleContactPanel"
       />
       <CopilotContainer
-        v-else-if="activeTab === 1 && showCopilotTab"
+        v-show="activeTab === 1 && showCopilotTab"
         :key="currentChat.id"
         :conversation-inbox-type="channelType"
         :conversation-id="currentChat.id"