mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-03 20:48:07 +00:00
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>
56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<script setup>
|
|
import Policy from 'dashboard/components/policy.vue';
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
actionPerms: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
|
|
>
|
|
<div
|
|
class="relative w-full max-w-[960px] mx-auto overflow-hidden h-full max-h-[448px]"
|
|
>
|
|
<div
|
|
class="w-full h-full space-y-4 overflow-y-hidden opacity-50 pointer-events-none"
|
|
>
|
|
<slot name="empty-state-item" />
|
|
</div>
|
|
<div
|
|
class="absolute inset-x-0 bottom-0 flex flex-col items-center justify-end w-full h-full pb-20 bg-gradient-to-t from-n-background from-25% dark:from-n-background to-transparent"
|
|
>
|
|
<div class="flex flex-col items-center justify-center gap-6">
|
|
<div class="flex flex-col items-center justify-center gap-3">
|
|
<h2
|
|
class="text-3xl font-medium text-center text-slate-900 dark:text-white font-interDisplay"
|
|
>
|
|
{{ title }}
|
|
</h2>
|
|
<p
|
|
class="max-w-xl text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
|
|
>
|
|
{{ subtitle }}
|
|
</p>
|
|
</div>
|
|
<Policy :permissions="actionPerms">
|
|
<slot name="actions" />
|
|
</Policy>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|