Change a lot to make it work

2025-05-09 11:52:11 -07:00
parent d024120afd
commit fb5cf32734
6 changed files with 177 additions and 199 deletions
@@ -95,14 +95,16 @@ watch(
 <template>
  <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
    <div
-      class="flex items-center justify-between px-4 py-2 border-b border-n-weak"
+      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">{{ $t('CAPTAIN.COPILOT.TITLE') }}</span>
+        <span class="font-medium text-n-slate-12">
+          {{ $t('CAPTAIN.COPILOT.TITLE') }}
+        </span>
        <div class="flex items-center">
          <Button
            v-if="messages.length"
-            icon="i-lucide-refresh-ccw"
+            icon="i-lucide-plus"
            ghost
            sm
            @click="handleReset"
@@ -130,7 +132,7 @@ watch(

    <div
      v-if="!messages.length"
-      class="h-full w-full flex items-center justify-center"
+      class="flex-1 flex items-center justify-center"
    >
      <div class="h-fit px-3 py-3 space-y-1">
        <span class="text-xs text-n-slate-10">
@@ -8,12 +8,12 @@ import { useUISettings } from 'dashboard/composables/useUISettings';

 const props = defineProps({
  conversationId: {
-    type: [Number, String],
-    required: true,
+    type: [Number, String, null],
+    default: null,
  },
  conversationInboxType: {
    type: String,
-    required: true,
+    default: '',
  },
 });

@@ -83,7 +83,7 @@ export default {

 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
-  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
+  <div v-if="hasOpenedAtleastOnce" class="flex-1">
    <div
      v-for="(configItem, index) in config"
      :key="index"
@@ -115,6 +115,7 @@ export default {
 .dashboard-app--list iframe {
  border: 0;
 }
+
 .dashboard-app_loading-container {
  display: flex;
  align-items: center;
@@ -125,7 +125,7 @@ export default {
        :show-badge="false"
      />
    </woot-tabs>
-    <div v-show="!activeIndex" class="flex h-full min-h-0 m-0">
+    <div v-show="!activeIndex" class="flex-1 h-full min-h-0 m-0">
      <MessagesView
        v-if="currentChat.id"
        :inbox-id="inboxId"
@@ -13,8 +13,6 @@ import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import Linear from './linear/index.vue';

-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 export default {
  components: {
    BackButton,
@@ -23,7 +21,6 @@ export default {
    Thumbnail,
    SLACardLabel,
    Linear,
-    NextButton,
  },
  mixins: [inboxMixin],
  props: {
@@ -99,13 +96,7 @@ export default {
      }
      return this.$t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
    },
-    contactPanelToggleText() {
-      return `${
-        this.isContactPanelOpen
-          ? this.$t('CONVERSATION.HEADER.CLOSE')
-          : this.$t('CONVERSATION.HEADER.OPEN')
-      } ${this.$t('CONVERSATION.HEADER.DETAILS')}`;
-    },
+
    inbox() {
      const { inbox_id: inboxId } = this.chat;
      return this.$store.getters['inboxes/getInbox'](inboxId);
@@ -133,7 +124,7 @@ export default {

 <template>
  <div
-    class="flex flex-col items-center justify-between px-4 py-2 border-b bg-n-background border-n-weak md:flex-row"
+    class="flex flex-col items-center justify-between px-3 border-b bg-n-background border-n-weak md:flex-row h-12"
  >
    <div
      class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
@@ -150,20 +141,18 @@ export default {
          :badge="inboxBadge"
          :username="currentContact.name"
          :status="currentContact.availability_status"
+          size="32px"
        />
        <div
          class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
        >
-          <div
-            class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
-          >
-            <NextButton link slate @click.prevent="$emit('contactPanelToggle')">
-              <span
-                class="text-base font-medium truncate leading-tight text-n-slate-12"
-              >
-                {{ currentContact.name }}
-              </span>
-            </NextButton>
+          <div class="flex items-center max-w-full gap-1 p-0 m-0 w-fit">
+            <span
+              class="text-sm font-medium truncate leading-tight text-n-slate-12"
+            >
+              {{ currentContact.name }}
+            </span>
+
            <fluent-icon
              v-if="!isHMACVerified"
              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
@@ -180,13 +169,6 @@ export default {
            <span v-if="isSnoozed" class="font-medium text-n-amber-10">
              {{ snoozedDisplayText }}
            </span>
-            <NextButton
-              link
-              xs
-              blue
-              :label="contactPanelToggleText"
-              @click="$emit('contactPanelToggle')"
-            />
          </div>
        </div>
      </div>
@@ -1,6 +1,15 @@
-<script>
-import { defineAsyncComponent, ref } from 'vue';
-import { mapGetters } from 'vuex';
+<script setup>
+import {
+  defineAsyncComponent,
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  watch,
+} from 'vue';
+import { useRoute } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';

 import NextSidebar from 'next/sidebar/Sidebar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
@@ -9,6 +18,7 @@ import AccountSelector from 'dashboard/components/layout/sidebarComponents/Accou
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
 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 { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
@@ -16,178 +26,160 @@ import { useAccount } from 'dashboard/composables/useAccount';
 import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { emitter } from 'shared/helpers/mitt';

 const CommandBar = defineAsyncComponent(
  () => import('./commands/commandbar.vue')
 );
-
 const Sidebar = defineAsyncComponent(
  () => import('../../components/layout/Sidebar.vue')
 );
-import { emitter } from 'shared/helpers/mitt';

-export default {
-  components: {
-    NextSidebar,
-    Sidebar,
-    CommandBar,
-    WootKeyShortcutModal,
-    AddAccountModal,
-    AccountSelector,
-    AddLabelModal,
-    NotificationPanel,
-    UpgradePage,
-  },
-  setup() {
-    const upgradePageRef = ref(null);
-    const { uiSettings, updateUISettings } = useUISettings();
-    const { accountId } = useAccount();
+const route = useRoute();

-    return {
-      uiSettings,
-      updateUISettings,
-      accountId,
-      upgradePageRef,
-    };
-  },
-  data() {
-    return {
-      showAccountModal: false,
-      showCreateAccountModal: false,
-      showAddLabelModal: false,
-      showShortcutModal: false,
-      isNotificationPanel: false,
-      displayLayoutType: '',
-      hasBanner: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    currentRoute() {
-      return ' ';
-    },
-    showUpgradePage() {
-      return this.upgradePageRef?.shouldShowUpgradePage;
-    },
-    bypassUpgradePage() {
-      return [
-        'billing_settings_index',
-        'settings_inbox_list',
-        'agent_list',
-      ].includes(this.$route.name);
-    },
-    isSidebarOpen() {
-      const { show_secondary_sidebar: showSecondarySidebar } = this.uiSettings;
-      return showSecondarySidebar;
-    },
-    previouslyUsedDisplayType() {
-      const {
-        previously_used_conversation_display_type: conversationDisplayType,
-      } = this.uiSettings;
-      return conversationDisplayType;
-    },
-    previouslyUsedSidebarView() {
-      const { previously_used_sidebar_view: showSecondarySidebar } =
-        this.uiSettings;
-      return showSecondarySidebar;
-    },
-    showNextSidebar() {
-      return this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.CHATWOOT_V4
-      );
-    },
-  },
-  watch: {
-    displayLayoutType() {
-      const { LAYOUT_TYPES } = wootConstants;
-      this.updateUISettings({
-        conversation_display_type:
-          this.displayLayoutType === LAYOUT_TYPES.EXPANDED
-            ? LAYOUT_TYPES.EXPANDED
-            : this.previouslyUsedDisplayType,
-        show_secondary_sidebar:
-          this.displayLayoutType === LAYOUT_TYPES.EXPANDED
-            ? false
-            : this.previouslyUsedSidebarView,
-      });
-    },
-  },
-  mounted() {
-    this.handleResize();
-    this.$nextTick(this.checkBanner);
-    window.addEventListener('resize', this.handleResize);
-    window.addEventListener('resize', this.checkBanner);
-    emitter.on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
-  },
-  unmounted() {
-    window.removeEventListener('resize', this.handleResize);
-    window.removeEventListener('resize', this.checkBanner);
-    emitter.off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
-  },
+const upgradePageRef = ref(null);
+const { uiSettings, updateUISettings } = useUISettings();
+const { currentAccount } = useAccount();

-  methods: {
-    checkBanner() {
-      this.hasBanner =
-        document.getElementsByClassName('woot-banner').length > 0;
-    },
-    handleResize() {
-      const { SMALL_SCREEN_BREAKPOINT, LAYOUT_TYPES } = wootConstants;
-      let throttled = false;
-      const delay = 150;
+const showAccountModal = ref(false);
+const showCreateAccountModal = ref(false);
+const showAddLabelModal = ref(false);
+const showShortcutModal = ref(false);
+const isNotificationPanel = ref(false);
+const displayLayoutType = ref('');
+const hasBanner = ref('');

-      if (throttled) {
-        return;
-      }
-      throttled = true;
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);

-      setTimeout(() => {
-        throttled = false;
-        if (window.innerWidth <= SMALL_SCREEN_BREAKPOINT) {
-          this.displayLayoutType = LAYOUT_TYPES.EXPANDED;
-        } else {
-          this.displayLayoutType = LAYOUT_TYPES.CONDENSED;
-        }
-      }, delay);
-    },
-    toggleSidebar() {
-      this.updateUISettings({
-        show_secondary_sidebar: !this.isSidebarOpen,
-        previously_used_sidebar_view: !this.isSidebarOpen,
-      });
-    },
-    openCreateAccountModal() {
-      this.showAccountModal = false;
-      this.showCreateAccountModal = true;
-    },
-    closeCreateAccountModal() {
-      this.showCreateAccountModal = false;
-    },
-    toggleAccountModal() {
-      this.showAccountModal = !this.showAccountModal;
-    },
-    toggleKeyShortcutModal() {
-      this.showShortcutModal = true;
-    },
-    closeKeyShortcutModal() {
-      this.showShortcutModal = false;
-    },
-    showAddLabelPopup() {
-      this.showAddLabelModal = true;
-    },
-    hideAddLabelPopup() {
-      this.showAddLabelModal = false;
-    },
-    openNotificationPanel() {
-      this.isNotificationPanel = true;
-    },
-    closeNotificationPanel() {
-      this.isNotificationPanel = false;
-    },
-  },
+const currentRoute = computed(() => ' ');
+
+const showUpgradePage = computed(
+  () => upgradePageRef.value?.shouldShowUpgradePage
+);
+
+const bypassUpgradePage = computed(() =>
+  ['billing_settings_index', 'settings_inbox_list', 'agent_list'].includes(
+    route.name
+  )
+);
+
+const isSidebarOpen = computed(() => {
+  const { show_secondary_sidebar: showSecondarySidebar } = uiSettings;
+  return showSecondarySidebar;
+});
+
+const previouslyUsedDisplayType = computed(() => {
+  const { previously_used_conversation_display_type: conversationDisplayType } =
+    uiSettings;
+  return conversationDisplayType;
+});
+
+const previouslyUsedSidebarView = computed(() => {
+  const { previously_used_sidebar_view: showSecondarySidebar } = uiSettings;
+  return showSecondarySidebar;
+});
+
+const showNextSidebar = computed(() =>
+  isFeatureEnabledonAccount.value(
+    currentAccount.value?.id,
+    FEATURE_FLAGS.CHATWOOT_V4
+  )
+);
+
+const checkBanner = () => {
+  hasBanner.value = document.getElementsByClassName('woot-banner').length > 0;
 };
+
+const handleResize = () => {
+  const { SMALL_SCREEN_BREAKPOINT, LAYOUT_TYPES } = wootConstants;
+  let throttled = false;
+  const delay = 150;
+
+  if (throttled) return;
+  throttled = true;
+
+  setTimeout(() => {
+    throttled = false;
+    displayLayoutType.value =
+      window.innerWidth <= SMALL_SCREEN_BREAKPOINT
+        ? LAYOUT_TYPES.EXPANDED
+        : LAYOUT_TYPES.CONDENSED;
+  }, delay);
+};
+
+const toggleSidebar = () => {
+  updateUISettings({
+    show_secondary_sidebar: !isSidebarOpen.value,
+    previously_used_sidebar_view: !isSidebarOpen.value,
+  });
+};
+
+const openCreateAccountModal = () => {
+  showAccountModal.value = false;
+  showCreateAccountModal.value = true;
+};
+
+const closeCreateAccountModal = () => {
+  showCreateAccountModal.value = false;
+};
+
+const toggleAccountModal = () => {
+  showAccountModal.value = !showAccountModal.value;
+};
+
+const toggleKeyShortcutModal = () => {
+  showShortcutModal.value = true;
+};
+
+const closeKeyShortcutModal = () => {
+  showShortcutModal.value = false;
+};
+
+const showAddLabelPopup = () => {
+  showAddLabelModal.value = true;
+};
+
+const hideAddLabelPopup = () => {
+  showAddLabelModal.value = false;
+};
+
+const openNotificationPanel = () => {
+  isNotificationPanel.value = true;
+};
+
+const closeNotificationPanel = () => {
+  isNotificationPanel.value = false;
+};
+
+watch(displayLayoutType, () => {
+  const { LAYOUT_TYPES } = wootConstants;
+  updateUISettings({
+    conversation_display_type:
+      displayLayoutType.value === LAYOUT_TYPES.EXPANDED
+        ? LAYOUT_TYPES.EXPANDED
+        : previouslyUsedDisplayType.value,
+    show_secondary_sidebar:
+      displayLayoutType.value === LAYOUT_TYPES.EXPANDED
+        ? false
+        : previouslyUsedSidebarView.value,
+  });
+});
+
+onMounted(() => {
+  handleResize();
+  nextTick(checkBanner);
+  window.addEventListener('resize', handleResize);
+  window.addEventListener('resize', checkBanner);
+  emitter.on(BUS_EVENTS.TOGGLE_SIDEMENU, toggleSidebar);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  window.removeEventListener('resize', checkBanner);
+  emitter.off(BUS_EVENTS.TOGGLE_SIDEMENU, toggleSidebar);
+});
 </script>

 <template>
@@ -218,6 +210,7 @@ export default {
      />
      <template v-if="!showUpgradePage">
        <router-view />
+        <CopilotContainer />
        <CommandBar />
        <NotificationPanel
          v-if="isNotificationPanel"