ef7bf66476
This PR introduces several improvements to the Captain AI dashboard section: - New billing page, with new colors, layout and meters for Captain usage - Updated the base paywall component to use new colors - Updated PageLayout.vue, it's more generic and can be used for other pages as well - Use flags to toggle empty state and loading state - Add prop for `featureFlag` to show the paywall slot based on feature enabled on account - Update `useAccount` to add a `isCloudFeatureEnabled` - **Removed feature flag checks from captain route definitions**, so the captain entry will always be visible on the sidebar - Add banner to Captain pages for the following cases - Responses usage is over 80% - Documents limit is fully exhausted ### Screenshots <details><summary>Free plan</summary> <p>   </p> </details> <details><summary>Paid plan</summary> <p>   </p> </details> --------- Co-authored-by: Sojan Jose <sojan@pepalo.com> Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<script setup>
|
|
import { isVNode, computed } from 'vue';
|
|
import Icon from 'next/icon/Icon.vue';
|
|
import Policy from 'dashboard/components/policy.vue';
|
|
import { useSidebarContext } from './provider';
|
|
|
|
const props = defineProps({
|
|
label: { type: String, required: true },
|
|
to: { type: [String, Object], required: true },
|
|
icon: { type: [String, Object], default: null },
|
|
active: { type: Boolean, default: false },
|
|
showOnlyOnCloud: { type: Boolean, default: false },
|
|
component: { type: Function, default: null },
|
|
});
|
|
|
|
const { resolvePermissions, resolveFeatureFlag, isOnChatwootCloud } =
|
|
useSidebarContext();
|
|
|
|
const allowedToShow = computed(() => {
|
|
if (props.showOnlyOnCloud && !isOnChatwootCloud.value) return false;
|
|
|
|
return true;
|
|
});
|
|
|
|
const shouldRenderComponent = computed(() => {
|
|
return typeof props.component === 'function' || isVNode(props.component);
|
|
});
|
|
</script>
|
|
|
|
<!-- eslint-disable-next-line vue/no-root-v-if -->
|
|
<template>
|
|
<Policy
|
|
v-if="allowedToShow"
|
|
:permissions="resolvePermissions(to)"
|
|
:feature-flag="resolveFeatureFlag(to)"
|
|
as="li"
|
|
class="py-0.5 ltr:pl-3 rtl:pr-3 rtl:mr-3 ltr:ml-3 relative text-n-slate-11 child-item before:bg-n-slate-4 after:bg-transparent after:border-n-slate-4 before:left-0 rtl:before:right-0"
|
|
>
|
|
<component
|
|
:is="to ? 'router-link' : 'div'"
|
|
:to="to"
|
|
:title="label"
|
|
class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[151px] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
|
|
:class="{
|
|
'n-blue-text bg-n-alpha-2 active': active,
|
|
}"
|
|
>
|
|
<component
|
|
:is="component"
|
|
v-if="shouldRenderComponent"
|
|
:label
|
|
:icon
|
|
:active
|
|
/>
|
|
<template v-else>
|
|
<Icon v-if="icon" :icon="icon" class="size-4 inline-block" />
|
|
<div class="flex-1 truncate min-w-0">{{ label }}</div>
|
|
</template>
|
|
</component>
|
|
</Policy>
|
|
</template>
|