118 lines
3.8 KiB
Vue
118 lines
3.8 KiB
Vue
<script setup>
|
|
import '@chatwoot/ninja-keys';
|
|
import { ref, computed, watchEffect, onMounted } from 'vue';
|
|
import { useStore } from 'dashboard/composables/store';
|
|
import { useTrack } from 'dashboard/composables';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useAppearanceHotKeys } from 'dashboard/composables/commands/useAppearanceHotKeys';
|
|
import { useInboxHotKeys } from 'dashboard/composables/commands/useInboxHotKeys';
|
|
import { useGoToCommandHotKeys } from 'dashboard/composables/commands/useGoToCommandHotKeys';
|
|
import { useBulkActionsHotKeys } from 'dashboard/composables/commands/useBulkActionsHotKeys';
|
|
import { useConversationHotKeys } from 'dashboard/composables/commands/useConversationHotKeys';
|
|
import wootConstants from 'dashboard/constants/globals';
|
|
import { GENERAL_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
|
|
|
|
const store = useStore();
|
|
const { t } = useI18n();
|
|
|
|
const ninjakeys = ref(null);
|
|
|
|
// Added selectedSnoozeType to track the selected snooze type
|
|
// So if the selected snooze type is "custom snooze" then we set selectedSnoozeType with the CMD action id
|
|
// So that we can track the selected snooze type and when we close the command bar
|
|
const selectedSnoozeType = ref(null);
|
|
|
|
const { goToAppearanceHotKeys } = useAppearanceHotKeys();
|
|
const { inboxHotKeys } = useInboxHotKeys();
|
|
const { goToCommandHotKeys } = useGoToCommandHotKeys();
|
|
const { bulkActionsHotKeys } = useBulkActionsHotKeys();
|
|
const { conversationHotKeys } = useConversationHotKeys();
|
|
|
|
const placeholder = computed(() => t('COMMAND_BAR.SEARCH_PLACEHOLDER'));
|
|
|
|
const hotKeys = computed(() => [
|
|
...inboxHotKeys.value,
|
|
...goToCommandHotKeys.value,
|
|
...goToAppearanceHotKeys.value,
|
|
...bulkActionsHotKeys.value,
|
|
...conversationHotKeys.value,
|
|
]);
|
|
|
|
const setCommandBarData = () => {
|
|
ninjakeys.value.data = hotKeys.value;
|
|
};
|
|
|
|
const onSelected = item => {
|
|
const {
|
|
detail: { action: { title = null, section = null, id = null } = {} } = {},
|
|
} = item;
|
|
// Added this condition to prevent setting the selectedSnoozeType to null
|
|
// When we select the "custom snooze" (CMD bar will close and the custom snooze modal will open)
|
|
if (id === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
|
|
selectedSnoozeType.value = wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME;
|
|
} else {
|
|
selectedSnoozeType.value = null;
|
|
}
|
|
|
|
useTrack(GENERAL_EVENTS.COMMAND_BAR, {
|
|
section,
|
|
action: title,
|
|
});
|
|
|
|
setCommandBarData();
|
|
};
|
|
|
|
const onClosed = () => {
|
|
// If the selectedSnoozeType is not "SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME (custom snooze)" then we set the context menu chat id to null
|
|
// Else we do nothing and its handled in the ChatList.vue hideCustomSnoozeModal() method
|
|
if (
|
|
selectedSnoozeType.value !== wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME
|
|
) {
|
|
store.dispatch('setContextMenuChatId', null);
|
|
}
|
|
};
|
|
|
|
watchEffect(() => {
|
|
if (ninjakeys.value) {
|
|
ninjakeys.value.data = hotKeys.value;
|
|
}
|
|
});
|
|
|
|
onMounted(setCommandBarData);
|
|
</script>
|
|
|
|
<!-- eslint-disable vue/attribute-hyphenation -->
|
|
<template>
|
|
<ninja-keys
|
|
ref="ninjakeys"
|
|
noAutoLoadMdIcons
|
|
hideBreadcrumbs
|
|
:placeholder="placeholder"
|
|
@selected="onSelected"
|
|
@closed="onClosed"
|
|
/>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
ninja-keys {
|
|
--ninja-accent-color: rgba(39, 129, 246, 1);
|
|
--ninja-font-family: 'Inter';
|
|
z-index: 9999;
|
|
}
|
|
|
|
// Wrapped with body.dark to avoid overriding the default theme
|
|
// If OS is in dark theme and app is in light mode, It will prevent showing dark theme in command bar
|
|
body.dark {
|
|
ninja-keys {
|
|
--ninja-overflow-background: rgba(26, 29, 30, 0.5);
|
|
--ninja-modal-background: #151718;
|
|
--ninja-secondary-background-color: #26292b;
|
|
--ninja-selected-background: #26292b;
|
|
--ninja-footer-background: #2b2f31;
|
|
--ninja-text-color: #f8faf9;
|
|
--ninja-icon-color: #f8faf9;
|
|
--ninja-secondary-text-color: #c2c9c6;
|
|
}
|
|
}
|
|
</style>
|