Add floating button for conversations screen

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

@@ -103,7 +103,7 @@ onMounted(() => {
 });
 
 const handleClose = () => {
-  store.dispatch('uiState/set', 'isCopilotSidebarOpen', false);
+  store.dispatch('uiState/set', { isCopilotSidebarOpen: false });
 };
 
 watchEffect(() => {

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

@@ -85,7 +85,7 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap bg-n-background"
+    class="conversation-details-wrap bg-n-background relative"
     :class="{
       'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
     }"
@@ -120,6 +120,7 @@ export default {
         v-if="!currentChat.id && !isInboxView"
         :is-on-expanded-layout="isOnExpandedLayout"
       />
+      <slot />
     </div>
     <DashboardAppFrame
       v-for="(dashboardApp, index) in dashboardApps"

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

@@ -28,7 +28,7 @@ const showConversationSidebar = computed(
 
 const store = useStore();
 const closeConversationPanel = () => {
-  store.dispatch('uiState/set', 'isConversationSidebarOpen', false);
+  store.dispatch('uiState/set', { isConversationSidebarOpen: false });
 };
 </script>
 

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

@@ -11,6 +11,7 @@ import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBar
 import { emitter } from 'shared/helpers/mitt';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import ConversationSidebar from 'dashboard/components/widgets/conversation/ConversationSidebar.vue';
+import PanelButtons from './PanelButtons.vue';
 
 export default {
   components: {
@@ -19,6 +20,7 @@ export default {
     ConversationSidebar,
     PopOverSearch,
     CmdBarConversationSnooze,
+    PanelButtons,
   },
   beforeRouteLeave(to, from, next) {
     // Clear selected state if navigating away from a conversation to a route without a conversationId to prevent stale data issues
@@ -216,7 +218,9 @@ export default {
       v-if="showMessageView"
       :inbox-id="inboxId"
       :is-on-expanded-layout="isOnExpandedLayout"
-    />
+    >
+      <PanelButtons v-if="currentChat.id" />
+    </ConversationBox>
     <ConversationSidebar :current-chat="currentChat" />
     <CmdBarConversationSnooze />
   </section>

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

@@ -0,0 +1,40 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+
+const handleConversationSidebarToggle = () => {
+  store.dispatch('uiState/set', {
+    isConversationSidebarOpen: true,
+    isCopilotSidebarOpen: false,
+  });
+};
+
+const handleCopilotSidebarToggle = () => {
+  store.dispatch('uiState/set', {
+    isCopilotSidebarOpen: true,
+    isConversationSidebarOpen: false,
+  });
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-center items-center absolute top-14 right-2 bg-n-alpha-2 border border-n-weak rounded-lg bg-n-background gap-2 py-0.5 px-0.5"
+  >
+    <Button
+      ghost
+      slate
+      icon="i-ph-user-bold"
+      @click="handleConversationSidebarToggle"
+    />
+    <Button
+      ghost
+      class="!text-n-iris-11"
+      slate
+      icon="i-woot-captain"
+      @click="handleCopilotSidebarToggle"
+    />
+  </div>
+</template>

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

@@ -21,8 +21,10 @@ const actions = {
   toggle({ commit, state }, key) {
     commit(types.SET_UI_STATE, { key, value: !state[key] });
   },
-  set({ commit }, key, value) {
-    commit(types.SET_UI_STATE, { key, value });
+  set({ commit }, payload) {
+    Object.entries(payload).forEach(([key, value]) => {
+      commit(types.SET_UI_STATE, { key, value });
+    });
   },
 };