mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-10-31 19:17:48 +00:00 
			
		
		
		
	 ef7bf66476
			
		
	
	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>
		
			
				
	
	
		
			47 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			47 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| import { computed } from 'vue';
 | |
| import { useStore } from 'dashboard/composables/store.js';
 | |
| import { useAccount } from 'dashboard/composables/useAccount';
 | |
| import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 | |
| import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 | |
| 
 | |
| export function useCaptain() {
 | |
|   const store = useStore();
 | |
|   const { isCloudFeatureEnabled, currentAccount } = useAccount();
 | |
| 
 | |
|   const captainEnabled = computed(() => {
 | |
|     return isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN);
 | |
|   });
 | |
| 
 | |
|   const captainLimits = computed(() => {
 | |
|     return currentAccount.value?.limits?.captain;
 | |
|   });
 | |
| 
 | |
|   const documentLimits = computed(() => {
 | |
|     if (captainLimits.value?.documents) {
 | |
|       return useCamelCase(captainLimits.value.documents);
 | |
|     }
 | |
| 
 | |
|     return null;
 | |
|   });
 | |
| 
 | |
|   const responseLimits = computed(() => {
 | |
|     if (captainLimits.value?.responses) {
 | |
|       return useCamelCase(captainLimits.value.responses);
 | |
|     }
 | |
| 
 | |
|     return null;
 | |
|   });
 | |
| 
 | |
|   const fetchLimits = () => {
 | |
|     store.dispatch('accounts/limits');
 | |
|   };
 | |
| 
 | |
|   return {
 | |
|     captainEnabled,
 | |
|     captainLimits,
 | |
|     documentLimits,
 | |
|     responseLimits,
 | |
|     fetchLimits,
 | |
|   };
 | |
| }
 |