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>
43 lines
1.0 KiB
Vue
43 lines
1.0 KiB
Vue
<script setup>
|
|
defineProps({
|
|
isLoading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
noRecordsFound: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
loadingMessage: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
noRecordsMessage: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col w-full h-full gap-8 font-inter">
|
|
<slot name="header" />
|
|
<!-- Added to render any templates that should be rendered before body -->
|
|
<div>
|
|
<slot name="preBody" />
|
|
<slot v-if="isLoading" name="loading">
|
|
<woot-loading-state :message="loadingMessage" />
|
|
</slot>
|
|
<p
|
|
v-else-if="noRecordsFound"
|
|
class="flex-1 py-20 text-slate-700 dark:text-slate-100 flex items-center justify-center text-base"
|
|
>
|
|
{{ noRecordsMessage }}
|
|
</p>
|
|
<slot v-else name="body" />
|
|
<!-- Do not delete the slot below. It is required to render anything that is not defined in the above slots. -->
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|