From 1a07eb50c5b7939bf3e6e42af9c68c70bda5c4ba Mon Sep 17 00:00:00 2001
From: Pranav <pranavrajs@gmail.com>
Date: Fri, 9 May 2025 14:48:02 -0700
Subject: [PATCH] Add floating button for conversations screen

---
 .../components/copilot/CopilotContainer.vue   |  2 +-
 .../widgets/conversation/ConversationBox.vue  |  3 +-
 .../conversation/ConversationSidebar.vue      |  2 +-
 .../conversation/ConversationView.vue         |  6 ++-
 .../dashboard/conversation/PanelButtons.vue   | 40 +++++++++++++++++++
 .../dashboard/store/modules/uiState.js        |  6 ++-
 6 files changed, 53 insertions(+), 6 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/conversation/PanelButtons.vue

diff --git a/app/javascript/dashboard/components/copilot/CopilotContainer.vue b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
index 9a1918925..1fed0e861 100644
--- a/app/javascript/dashboard/components/copilot/CopilotContainer.vue
+++ b/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(() => {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index bea3670e8..7130e61c0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/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"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
index 448bed13b..44bcb1e85 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+++ b/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>
 
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index b617b2e19..9da4a3c98 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/PanelButtons.vue b/app/javascript/dashboard/routes/dashboard/conversation/PanelButtons.vue
new file mode 100644
index 000000000..4b7ad23a9
--- /dev/null
+++ b/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>
diff --git a/app/javascript/dashboard/store/modules/uiState.js b/app/javascript/dashboard/store/modules/uiState.js
index 2c8d16195..c04111fb2 100644
--- a/app/javascript/dashboard/store/modules/uiState.js
+++ b/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 });
+    });
   },
 };