Research component integration, Copilotkit implementation, SEO copilotkit implementation, Wix SEO metadata complete, Wix SEO metadata review
This commit is contained in:
ajaysi
157
frontend/src/contexts/CopilotKitHealthContext.tsx
Normal file
157
frontend/src/contexts/CopilotKitHealthContext.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
|
||||
|
||||
interface CopilotKitHealthState {
|
||||
isHealthy: boolean;
|
||||
isChecking: boolean;
|
||||
lastChecked: Date | null;
|
||||
errorMessage: string | null;
|
||||
retryCount: number;
|
||||
isAvailable: boolean; // Alias for isHealthy, for clearer semantics
|
||||
}
|
||||
|
||||
interface CopilotKitHealthContextType extends CopilotKitHealthState {
|
||||
checkHealth: () => Promise<void>;
|
||||
markUnhealthy: (errorMessage?: string) => void;
|
||||
markHealthy: () => void;
|
||||
resetHealth: () => void;
|
||||
}
|
||||
|
||||
const CopilotKitHealthContext = createContext<CopilotKitHealthContextType | undefined>(undefined);
|
||||
|
||||
export const useCopilotKitHealthContext = () => {
|
||||
const context = useContext(CopilotKitHealthContext);
|
||||
if (!context) {
|
||||
throw new Error('useCopilotKitHealthContext must be used within CopilotKitHealthProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
interface CopilotKitHealthProviderProps {
|
||||
children: ReactNode;
|
||||
initialHealthStatus?: boolean;
|
||||
}
|
||||
|
||||
export const CopilotKitHealthProvider: React.FC<CopilotKitHealthProviderProps> = ({
|
||||
children,
|
||||
initialHealthStatus = true,
|
||||
}) => {
|
||||
const [state, setState] = useState<CopilotKitHealthState>({
|
||||
isHealthy: initialHealthStatus,
|
||||
isChecking: false,
|
||||
lastChecked: null,
|
||||
errorMessage: null,
|
||||
retryCount: 0,
|
||||
isAvailable: initialHealthStatus,
|
||||
});
|
||||
|
||||
const markHealthy = useCallback(() => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isHealthy: true,
|
||||
isAvailable: true,
|
||||
errorMessage: null,
|
||||
retryCount: 0,
|
||||
lastChecked: new Date(),
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const markUnhealthy = useCallback((errorMessage?: string) => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isHealthy: false,
|
||||
isAvailable: false,
|
||||
errorMessage: errorMessage || 'CopilotKit is unavailable',
|
||||
lastChecked: new Date(),
|
||||
retryCount: prev.retryCount + 1,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
// Listen for CopilotKit error events from App.tsx
|
||||
React.useEffect(() => {
|
||||
const handleCopilotKitError = (event: Event) => {
|
||||
const customEvent = event as CustomEvent;
|
||||
const { errorMessage, isFatal } = customEvent.detail || {};
|
||||
|
||||
if (isFatal) {
|
||||
markUnhealthy(errorMessage || 'CopilotKit fatal error');
|
||||
} else {
|
||||
// For transient errors, just log but don't mark as unhealthy immediately
|
||||
// Let the health check determine if it's truly down
|
||||
console.warn('CopilotKit transient error:', errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('copilotkit-error', handleCopilotKitError as EventListener);
|
||||
return () => {
|
||||
window.removeEventListener('copilotkit-error', handleCopilotKitError as EventListener);
|
||||
};
|
||||
}, [markUnhealthy]);
|
||||
|
||||
const checkHealth = useCallback(async () => {
|
||||
setState((prev) => ({ ...prev, isChecking: true }));
|
||||
|
||||
try {
|
||||
// Try to check CopilotKit status endpoint
|
||||
// This is a lightweight check that doesn't require full CopilotKit initialization
|
||||
const response = await fetch('https://api.cloud.copilotkit.ai/ciu', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-copilotcloud-public-api-key': process.env.REACT_APP_COPILOTKIT_PUBLIC_API_KEY || '',
|
||||
},
|
||||
// Use a short timeout to avoid blocking
|
||||
signal: AbortSignal.timeout(3000),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
markHealthy();
|
||||
} else {
|
||||
markUnhealthy(`CopilotKit status check failed: ${response.status}`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
// Handle various error types
|
||||
let errorMsg = 'CopilotKit health check failed';
|
||||
|
||||
if (error.name === 'AbortError' || error.name === 'TimeoutError') {
|
||||
errorMsg = 'CopilotKit health check timed out';
|
||||
} else if (error.message?.includes('CORS')) {
|
||||
errorMsg = 'CopilotKit CORS error - service may be unavailable';
|
||||
} else if (error.message?.includes('certificate') || error.message?.includes('SSL')) {
|
||||
errorMsg = 'CopilotKit SSL certificate error';
|
||||
} else if (error.message?.includes('network') || error.message?.includes('Failed to fetch')) {
|
||||
errorMsg = 'CopilotKit network error - service may be down';
|
||||
} else {
|
||||
errorMsg = error.message || 'Unknown error checking CopilotKit health';
|
||||
}
|
||||
|
||||
markUnhealthy(errorMsg);
|
||||
} finally {
|
||||
setState((prev) => ({ ...prev, isChecking: false }));
|
||||
}
|
||||
}, [markHealthy, markUnhealthy]);
|
||||
|
||||
const resetHealth = useCallback(() => {
|
||||
setState({
|
||||
isHealthy: initialHealthStatus,
|
||||
isChecking: false,
|
||||
lastChecked: null,
|
||||
errorMessage: null,
|
||||
retryCount: 0,
|
||||
isAvailable: initialHealthStatus,
|
||||
});
|
||||
}, [initialHealthStatus]);
|
||||
|
||||
const value: CopilotKitHealthContextType = {
|
||||
...state,
|
||||
checkHealth,
|
||||
markUnhealthy,
|
||||
markHealthy,
|
||||
resetHealth,
|
||||
};
|
||||
|
||||
return (
|
||||
<CopilotKitHealthContext.Provider value={value}>
|
||||
{children}
|
||||
</CopilotKitHealthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { createContext, useContext, useState, useEffect, ReactNode, useCallback, useRef } from 'react';
|
||||
import { apiClient, setGlobalSubscriptionErrorHandler } from '../api/client';
|
||||
import SubscriptionExpiredModal from '../components/SubscriptionExpiredModal';
|
||||
import { saveNavigationState, getCurrentPhaseForTool } from '../utils/navigationState';
|
||||
|
||||
export interface SubscriptionLimits {
|
||||
gemini_calls: number;
|
||||
@@ -221,11 +222,29 @@ export const SubscriptionProvider: React.FC<SubscriptionProviderProps> = ({ chil
|
||||
}, []);
|
||||
|
||||
const handleRenewSubscription = useCallback(() => {
|
||||
// Save current location so we can return after renewal
|
||||
// Save current location and phase so we can return after renewal
|
||||
const currentPath = window.location.pathname;
|
||||
sessionStorage.setItem('subscription_referrer', currentPath);
|
||||
|
||||
console.log('SubscriptionContext: Navigating to pricing page, saved referrer:', currentPath);
|
||||
// Detect tool from path
|
||||
let tool: string | undefined;
|
||||
if (currentPath.includes('/blog-writer') || currentPath.includes('/blogwriter')) {
|
||||
tool = 'blog-writer';
|
||||
}
|
||||
|
||||
// Get current phase for the tool if applicable
|
||||
let phase: string | null = null;
|
||||
if (tool) {
|
||||
phase = getCurrentPhaseForTool(tool);
|
||||
}
|
||||
|
||||
// Save navigation state (path, phase, tool)
|
||||
saveNavigationState(currentPath, phase || undefined, tool);
|
||||
|
||||
console.log('SubscriptionContext: Navigating to pricing page, saved navigation state:', {
|
||||
path: currentPath,
|
||||
phase,
|
||||
tool
|
||||
});
|
||||
window.location.href = '/pricing';
|
||||
}, []);
|
||||
|
||||
@@ -258,13 +277,30 @@ export const SubscriptionProvider: React.FC<SubscriptionProviderProps> = ({ chil
|
||||
errorData = errorData[0] || {};
|
||||
}
|
||||
|
||||
// Check for usage_info in various possible locations
|
||||
// CRITICAL: FastAPI wraps HTTPException detail in a 'detail' field
|
||||
// If errorData has a 'detail' field, extract it (this is the actual error data)
|
||||
if (errorData.detail && typeof errorData.detail === 'object') {
|
||||
console.log('SubscriptionContext: Found FastAPI detail wrapper, extracting detail field');
|
||||
errorData = errorData.detail;
|
||||
}
|
||||
|
||||
// Check for usage_info in various possible locations (now that we've unwrapped FastAPI detail)
|
||||
const usageInfo = errorData.usage_info ||
|
||||
(errorData.current_calls !== undefined ? errorData : null) ||
|
||||
(errorData.requested_tokens !== undefined ? errorData : null) ||
|
||||
(errorData.current_tokens !== undefined ? errorData : null) ||
|
||||
null;
|
||||
|
||||
// Usage limit error: 429 status with usage info OR 429 status without explicit expiration
|
||||
const isUsageLimitError = status === 429 && (usageInfo || errorData.provider || errorData.message);
|
||||
// Usage limit error: 429 status with usage info OR provider OR message indicating token/call limits
|
||||
const hasUsageIndicators = usageInfo ||
|
||||
errorData.provider ||
|
||||
errorData.message?.includes('limit') ||
|
||||
errorData.error?.includes('limit') ||
|
||||
errorData.requested_tokens !== undefined ||
|
||||
errorData.current_tokens !== undefined ||
|
||||
errorData.current_calls !== undefined;
|
||||
|
||||
const isUsageLimitError = status === 429 && hasUsageIndicators;
|
||||
const isSubscriptionExpired = status === 402 || (status === 429 && !isUsageLimitError);
|
||||
|
||||
console.log('SubscriptionContext: Error analysis', {
|
||||
@@ -280,16 +316,30 @@ export const SubscriptionProvider: React.FC<SubscriptionProviderProps> = ({ chil
|
||||
// For usage limit errors (429 with usage_info), always show modal - even for active subscriptions
|
||||
// Ignore grace window and cooldown for usage limit errors (user needs to know immediately)
|
||||
if (isUsageLimitError) {
|
||||
// Build usage_info from various possible locations
|
||||
const finalUsageInfo = usageInfo ||
|
||||
(errorData.requested_tokens !== undefined ? {
|
||||
provider: errorData.provider,
|
||||
current_tokens: errorData.current_tokens,
|
||||
requested_tokens: errorData.requested_tokens,
|
||||
limit: errorData.limit,
|
||||
type: 'tokens',
|
||||
...errorData
|
||||
} : null) ||
|
||||
errorData;
|
||||
|
||||
const modalData = {
|
||||
provider: errorData.provider || usageInfo?.provider || 'unknown',
|
||||
usage_info: usageInfo || errorData,
|
||||
usage_info: finalUsageInfo || errorData,
|
||||
message: errorData.message || errorData.error || 'You have reached your usage limit.'
|
||||
};
|
||||
|
||||
console.log('SubscriptionContext: Usage limit exceeded, showing modal (ignoring grace window/cooldown)', {
|
||||
modalData,
|
||||
errorData: Object.keys(errorData),
|
||||
usageInfo: usageInfo ? Object.keys(usageInfo) : null
|
||||
usageInfo: usageInfo ? Object.keys(usageInfo) : null,
|
||||
currentShowModal: showModal,
|
||||
currentModalErrorData: modalErrorData
|
||||
});
|
||||
|
||||
// Set flag to mark this as a usage limit modal (should never be auto-closed)
|
||||
@@ -298,7 +348,17 @@ export const SubscriptionProvider: React.FC<SubscriptionProviderProps> = ({ chil
|
||||
setShowModal(true);
|
||||
setLastModalShowTime(now);
|
||||
|
||||
console.log('SubscriptionContext: Modal state updated - showModal should be true, isUsageLimitModal = true');
|
||||
console.log('SubscriptionContext: Modal state updated - showModal should be true, isUsageLimitModal = true', {
|
||||
showModal: true,
|
||||
isUsageLimitModal: true,
|
||||
modalErrorData: modalData
|
||||
});
|
||||
|
||||
// Force a re-render check
|
||||
setTimeout(() => {
|
||||
console.log('SubscriptionContext: State check after timeout - showModal:', showModal, 'modalErrorData:', modalErrorData);
|
||||
}, 100);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user