From 66fcaa5e014c4a3daed10bb388593f23d2460b23 Mon Sep 17 00:00:00 2001
From: Pranav <pranavrajs@gmail.com>
Date: Fri, 9 May 2025 13:16:27 -0700
Subject: [PATCH] Add copilot to every page

---
 .../components/copilot/CopilotContainer.vue   | 11 ++++-
 .../copilot/CopilotToggleButton.vue           | 43 +++++++++++++++++++
 .../dashboard/routes/dashboard/Dashboard.vue  |  2 +
 app/javascript/dashboard/store/index.js       |  2 +
 .../dashboard/store/modules/uiState.js        | 35 +++++++++++++++
 5 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/dashboard/components/copilot/CopilotToggleButton.vue
 create mode 100644 app/javascript/dashboard/store/modules/uiState.js

diff --git a/app/javascript/dashboard/components/copilot/CopilotContainer.vue b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
index fed61747a..3879e589a 100644
--- a/app/javascript/dashboard/components/copilot/CopilotContainer.vue
+++ b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
@@ -23,6 +23,9 @@ const assistants = useMapGetter('captainAssistants/getRecords');
 const inboxAssistant = useMapGetter('getCopilotAssistant');
 const { uiSettings, updateUISettings } = useUISettings();
 
+const getUIState = useMapGetter('uiState/getUIState');
+const isSidebarOpen = computed(() => getUIState.value('isCopilotSidebarOpen'));
+
 const messages = ref([]);
 const isCaptainTyping = ref(false);
 const selectedAssistantId = ref(null);
@@ -99,6 +102,10 @@ onMounted(() => {
   store.dispatch('captainAssistants/get');
 });
 
+const handleClose = () => {
+  store.dispatch('uiState/set', 'isCopilotSidebarOpen', false);
+};
+
 watchEffect(() => {
   if (props.conversationId) {
     store.dispatch('getInboxCaptainAssistantById', props.conversationId);
@@ -108,7 +115,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div class="border-l border-n-weak min-w-[17.5rem]">
+  <div v-if="isSidebarOpen" class="border-l border-n-weak min-w-[17.5rem]">
     <Copilot
       :messages="messages"
       :support-agent="currentUser"
@@ -119,6 +126,8 @@ watchEffect(() => {
       @set-assistant="setAssistant"
       @send-message="sendMessage"
       @reset="handleReset"
+      @close="handleClose"
     />
   </div>
+  <div v-else class="hidden" />
 </template>
diff --git a/app/javascript/dashboard/components/copilot/CopilotToggleButton.vue b/app/javascript/dashboard/components/copilot/CopilotToggleButton.vue
new file mode 100644
index 000000000..aa761ee58
--- /dev/null
+++ b/app/javascript/dashboard/components/copilot/CopilotToggleButton.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import { useRoute } from 'vue-router';
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+const store = useStore();
+const route = useRoute();
+
+const getUIState = useMapGetter('uiState/getUIState');
+const isSidebarOpen = computed(() => getUIState.value('isCopilotSidebarOpen'));
+
+const isConversationRoute = computed(() => {
+  const CONVERSATION_ROUTES = [
+    'inbox_conversation',
+    'conversation_through_inbox',
+    'conversations_through_label',
+    'team_conversations_through_label',
+    'conversations_through_folders',
+    'conversation_through_mentions',
+    'conversation_through_unattended',
+    'conversation_through_participating',
+  ];
+  return CONVERSATION_ROUTES.includes(route.name);
+});
+
+const toggleSidebar = () => {
+  store.dispatch('uiState/toggle', 'isCopilotSidebarOpen');
+};
+</script>
+
+<template>
+  <div class="fixed bottom-4 right-4 z-50">
+    <Button
+      v-if="!isSidebarOpen && !isConversationRoute"
+      icon="i-woot-captain"
+      class="!rounded-full bg-n-iris-9 text-xl"
+      lg
+      @click="toggleSidebar"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 0c242cc81..4909c1195 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -19,6 +19,7 @@ import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.v
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
 import UpgradePage from 'dashboard/routes/dashboard/upgrade/UpgradePage.vue';
 import CopilotContainer from 'dashboard/components/copilot/CopilotContainer.vue';
+import CopilotToggleButton from 'dashboard/components/copilot/CopilotToggleButton.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
@@ -210,6 +211,7 @@ onUnmounted(() => {
       />
       <template v-if="!showUpgradePage">
         <router-view />
+        <CopilotToggleButton />
         <CopilotContainer />
         <CommandBar />
         <NotificationPanel
diff --git a/app/javascript/dashboard/store/index.js b/app/javascript/dashboard/store/index.js
index 5daf73ae1..c0d93450e 100755
--- a/app/javascript/dashboard/store/index.js
+++ b/app/javascript/dashboard/store/index.js
@@ -51,6 +51,7 @@ import captainDocuments from './captain/document';
 import captainResponses from './captain/response';
 import captainInboxes from './captain/inboxes';
 import captainBulkActions from './captain/bulkActions';
+import uiState from './modules/uiState';
 const plugins = [];
 
 export default createStore({
@@ -106,6 +107,7 @@ export default createStore({
     captainResponses,
     captainInboxes,
     captainBulkActions,
+    uiState,
   },
   plugins,
 });
diff --git a/app/javascript/dashboard/store/modules/uiState.js b/app/javascript/dashboard/store/modules/uiState.js
new file mode 100644
index 000000000..71ff81595
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/uiState.js
@@ -0,0 +1,35 @@
+const initialState = {
+  isCopilotSidebarOpen: false,
+  // Add more UI settings here as needed
+};
+
+const types = {
+  SET_UI_STATE: 'SET_UI_STATE',
+};
+
+const mutations = {
+  [types.SET_UI_STATE](state, { key, value }) {
+    state[key] = value;
+  },
+};
+
+const getters = {
+  getUIState: state => key => state[key],
+};
+
+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 });
+  },
+};
+
+export default {
+  namespaced: true,
+  state: initialState,
+  getters,
+  mutations,
+  actions,
+};