mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-30 10:42:38 +00:00
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,
|
|
};
|
|
}
|