Add support for the uiState

app/javascript/dashboard/components-next/copilot/Copilot.vue

@@ -98,7 +98,7 @@ watch(
       class="flex items-center justify-between px-4 py-2 border-b border-n-weak h-12"
     >
       <div class="flex items-center justify-between gap-2 flex-1">
-        <span class="font-medium text-n-slate-12">
+        <span class="font-medium text-sm text-n-slate-12">
           {{ $t('CAPTAIN.COPILOT.TITLE') }}
         </span>
         <div class="flex items-center">

app/javascript/dashboard/components/copilot/CopilotContainer.vue

@@ -117,7 +117,7 @@ watchEffect(() => {
 <template>
   <div
     v-if="isSidebarOpen"
-    class="border-l border-n-weak w-[17.5rem] min-w-[17.5rem]"
+    class="border-l border-n-weak w-[18rem] min-w-[18rem]"
   >
     <Copilot
       :messages="messages"

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

@@ -4,11 +4,9 @@ import ConversationHeader from './ConversationHeader.vue';
 import DashboardAppFrame from '../DashboardApp/Frame.vue';
 import EmptyState from './EmptyState/EmptyState.vue';
 import MessagesView from './MessagesView.vue';
-import ConversationSidebar from './ConversationSidebar.vue';
 
 export default {
   components: {
-    ConversationSidebar,
     ConversationHeader,
     DashboardAppFrame,
     EmptyState,
@@ -25,16 +23,11 @@ export default {
       type: Boolean,
       default: false,
     },
-    isContactPanelOpen: {
-      type: Boolean,
-      default: true,
-    },
     isOnExpandedLayout: {
       type: Boolean,
       default: true,
     },
   },
-  emits: ['contactPanelToggle'],
   data() {
     return { activeIndex: 0 };
   },
@@ -57,9 +50,6 @@ export default {
         })),
       ];
     },
-    showContactPanel() {
-      return this.isContactPanelOpen && this.currentChat.id;
-    },
   },
   watch: {
     'currentChat.inbox_id': {
@@ -86,9 +76,6 @@ export default {
       }
       this.$store.dispatch('conversationLabels/get', this.currentChat.id);
     },
-    onToggleContactPanel() {
-      this.$emit('contactPanelToggle');
-    },
     onDashboardAppTabChange(index) {
       this.activeIndex = index;
     },
@@ -107,9 +94,7 @@ export default {
       v-if="currentChat.id"
       :chat="currentChat"
       :is-inbox-view="isInboxView"
-      :is-contact-panel-open="isContactPanelOpen"
       :show-back-button="isOnExpandedLayout && !isInboxView"
-      @contact-panel-toggle="onToggleContactPanel"
     />
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
@@ -130,18 +115,11 @@ export default {
         v-if="currentChat.id"
         :inbox-id="inboxId"
         :is-inbox-view="isInboxView"
-        :is-contact-panel-open="isContactPanelOpen"
-        @contact-panel-toggle="onToggleContactPanel"
       />
       <EmptyState
         v-if="!currentChat.id && !isInboxView"
         :is-on-expanded-layout="isOnExpandedLayout"
       />
-      <ConversationSidebar
-        v-if="showContactPanel"
-        :current-chat="currentChat"
-        @toggle-contact-panel="onToggleContactPanel"
-      />
     </div>
     <DashboardAppFrame
       v-for="(dashboardApp, index) in dashboardApps"

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

@@ -1,28 +1,58 @@
 <script setup>
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import { computed } from 'vue';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
 
-defineProps({
+const props = defineProps({
   currentChat: {
     required: true,
     type: Object,
   },
 });
-const emit = defineEmits(['toggleContactPanel']);
-const toggleContactPanel = () => {
-  emit('toggleContactPanel');
+
+const getUIState = useMapGetter('uiState/getUIState');
+const isCopilotSidebarOpen = computed(() =>
+  getUIState.value('isCopilotSidebarOpen')
+);
+const isConversationSidebarOpen = computed(() =>
+  getUIState.value('isConversationSidebarOpen')
+);
+
+const showConversationSidebar = computed(
+  () =>
+    props.currentChat.id &&
+    !isCopilotSidebarOpen.value &&
+    isConversationSidebarOpen.value
+);
+
+const store = useStore();
+const closeConversationPanel = () => {
+  store.dispatch('uiState/set', 'isConversationSidebarOpen', false);
 };
 </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"
+    v-if="showConversationSidebar"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-[18rem] min-w-[18rem] flex flex-col"
   >
-    <div class="flex flex-1 overflow-auto">
+    <div class="flex flex-1 flex-col overflow-auto">
+      <div
+        class="flex items-center justify-between gap-2 px-4 py-2 border-b border-n-weak h-12"
+      >
+        <span class="font-medium text-sm text-n-slate-12">
+          {{ $t('CONVERSATION.SIDEBAR.ACTIONS') }}
+        </span>
+        <div class="flex items-center">
+          <Button icon="i-lucide-x" ghost sm @click="closeConversationPanel" />
+        </div>
+      </div>
       <ContactPanel
-        :conversation-id="currentChat.id"
-        :inbox-id="currentChat.inbox_id"
-        :on-toggle="toggleContactPanel"
+        :conversation-id="props.currentChat.id"
+        :inbox-id="props.currentChat.inbox_id"
       />
     </div>
   </div>
+  <div v-else class="hidden" />
 </template>

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

@@ -38,8 +38,6 @@ import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { FEATURE_FLAGS } from '../../../featureFlags';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 export default {
   components: {
     Message,
@@ -47,20 +45,8 @@ export default {
     ReplyBox,
     Banner,
     ConversationLabelSuggestion,
-    NextButton,
   },
   mixins: [inboxMixin],
-  props: {
-    isContactPanelOpen: {
-      type: Boolean,
-      default: false,
-    },
-    isInboxView: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['contactPanelToggle'],
   setup() {
     const isPopOutReplyBox = ref(false);
     const { isEnterprise } = useConfig();
@@ -199,12 +185,6 @@ export default {
     isATweet() {
       return this.conversationType === 'tweet';
     },
-    isRightOrLeftIcon() {
-      if (this.isContactPanelOpen) {
-        return 'arrow-chevron-right';
-      }
-      return 'arrow-chevron-left';
-    },
     getLastSeenAt() {
       const { contact_last_seen_at: contactLastSeenAt } = this.currentChat;
       return contactLastSeenAt;
@@ -440,9 +420,6 @@ export default {
         relevantMessages
       );
     },
-    onToggleContactPanel() {
-      this.$emit('contactPanelToggle');
-    },
     setScrollParams() {
       this.heightBeforeLoad = this.conversationPanel.scrollHeight;
       this.scrollTopBeforeLoad = this.conversationPanel.scrollTop;

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -234,8 +234,7 @@
       }
     },
     "SIDEBAR": {
-      "CONTACT": "Contact",
-      "COPILOT": "Copilot"
+      "ACTIONS": "Actions"
     }
   },
   "EMAIL_TRANSCRIPT": {

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -29,10 +29,6 @@ const props = defineProps({
     type: Number,
     default: undefined,
   },
-  onToggle: {
-    type: Function,
-    default: () => {},
-  },
 });
 
 const {
@@ -89,8 +85,6 @@ watch(conversationId, (newConversationId, prevConversationId) => {
 
 watch(contactId, getContactDetails);
 
-const onPanelToggle = props.onToggle;
-
 const onDragEnd = () => {
   dragging.value = false;
   updateUISettings({
@@ -107,11 +101,7 @@ onMounted(() => {
 
 <template>
   <div class="w-full">
-    <ContactInfo
-      :contact="contact"
-      :channel-type="channelType"
-      @toggle-panel="onPanelToggle"
-    />
+    <ContactInfo :contact="contact" :channel-type="channelType" />
     <div class="list-group pb-8">
       <Draggable
         :list="conversationSidebarItems"

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -10,11 +10,13 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 import { emitter } from 'shared/helpers/mitt';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import ConversationSidebar from 'dashboard/components/widgets/conversation/ConversationSidebar.vue';
 
 export default {
   components: {
     ChatList,
     ConversationBox,
+    ConversationSidebar,
     PopOverSearch,
     CmdBarConversationSnooze,
   },
@@ -87,14 +89,6 @@ export default {
         this.uiSettings;
       return conversationDisplayType !== CONDENSED;
     },
-    isContactPanelOpen() {
-      if (this.currentChat.id) {
-        const { is_contact_sidebar_open: isContactSidebarOpen } =
-          this.uiSettings;
-        return isContactSidebarOpen;
-      }
-      return false;
-    },
     showPopOverSearch() {
       return !this.isFeatureEnabledonAccount(
         this.accountId,
@@ -189,11 +183,7 @@ export default {
         this.$store.dispatch('clearSelectedState');
       }
     },
-    onToggleContactPanel() {
-      this.updateUISettings({
-        is_contact_sidebar_open: !this.isContactPanelOpen,
-      });
-    },
+
     onSearch() {
       this.showSearchModal = true;
     },
@@ -225,10 +215,9 @@ export default {
     <ConversationBox
       v-if="showMessageView"
       :inbox-id="inboxId"
-      :is-contact-panel-open="isContactPanelOpen"
       :is-on-expanded-layout="isOnExpandedLayout"
-      @contact-panel-toggle="onToggleContactPanel"
     />
+    <ConversationSidebar :current-chat="currentChat" />
     <CmdBarConversationSnooze />
   </section>
 </template>

app/javascript/dashboard/store/modules/uiState.js

@@ -1,6 +1,6 @@
 const initialState = {
   isCopilotSidebarOpen: false,
-  // Add more UI settings here as needed
+  isConversationSidebarOpen: true,
 };
 
 const types = {