kunthawat/ALwrity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added onboarding progress tracking & landing page

Browse Source
This commit is contained in:
ajaysi
2025-10-02 13:20:15 +05:30
parent e57d2577f8
commit 510b79bbf8
135 changed files with 25917 additions and 5768 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
frontend/src/api/client.ts
View File

@@ -1,8 +1,15 @@
import axios from 'axios';
// Create a shared axios instance for all API calls
// Optional token getter installed from within the app after Clerk is available
let authTokenGetter: (() => Promise<string | null>) | null = null;
export const setAuthTokenGetter = (getter: () => Promise<string | null>) => {
authTokenGetter = getter;
};
// Create a shared axios instance for all API calls (same-origin; CRA proxy forwards to backend)
export const apiClient = axios.create({
baseURL: 'http://localhost:8000',
baseURL: '',
timeout: 60000, // Increased to 60 seconds for regular API calls
headers: {
'Content-Type': 'application/json',
@@ -11,7 +18,7 @@ export const apiClient = axios.create({
// Create a specialized client for AI operations with extended timeout
export const aiApiClient = axios.create({
baseURL: 'http://localhost:8000',
baseURL: '',
timeout: 180000, // 3 minutes timeout for AI operations (matching 20-25 second responses)
headers: {
'Content-Type': 'application/json',
@@ -20,7 +27,7 @@ export const aiApiClient = axios.create({
// Create a specialized client for long-running operations like SEO analysis
export const longRunningApiClient = axios.create({
baseURL: 'http://localhost:8000',
baseURL: '',
timeout: 300000, // 5 minutes timeout for SEO analysis
headers: {
'Content-Type': 'application/json',
@@ -29,7 +36,7 @@ export const longRunningApiClient = axios.create({
// Create a specialized client for polling operations with reasonable timeout
export const pollingApiClient = axios.create({
baseURL: 'http://localhost:8000',
baseURL: '',
timeout: 60000, // 60 seconds timeout for polling status checks
headers: {
'Content-Type': 'application/json',
@@ -38,8 +45,17 @@ export const pollingApiClient = axios.create({
// Add request interceptor for logging (optional)
apiClient.interceptors.request.use(
(config) => {
async (config) => {
console.log(`Making ${config.method?.toUpperCase()} request to ${config.url}`);
try {
const token = authTokenGetter ? await authTokenGetter() : null;
if (token) {
config.headers = config.headers || {};
(config.headers as any)['Authorization'] = `Bearer ${token}`;
}
} catch (e) {
// non-fatal
}
return config;
},
(error) => {
@@ -47,12 +63,41 @@ apiClient.interceptors.request.use(
}
);
// Add response interceptor for error handling (optional)
// Add response interceptor with automatic token refresh on 401
apiClient.interceptors.response.use(
(response) => {
return response;
},
(error) => {
async (error) => {
const originalRequest = error.config;
// If 401 and we haven't retried yet, try to refresh token and retry
if (error?.response?.status === 401 && !originalRequest._retry && authTokenGetter) {
originalRequest._retry = true;
try {
// Get fresh token
const newToken = await authTokenGetter();
if (newToken) {
// Update the request with new token
originalRequest.headers['Authorization'] = `Bearer ${newToken}`;
// Retry the request
return apiClient(originalRequest);
}
} catch (retryError) {
console.error('Token refresh failed:', retryError);
}
// If retry failed and not in onboarding, redirect
const isOnboardingRoute = window.location.pathname.includes('/onboarding') ||
window.location.pathname === '/';
if (!isOnboardingRoute) {
try { window.location.assign('/'); } catch {}
} else {
console.warn('401 Unauthorized - token refresh failed');
}
}
console.error('API Error:', error.response?.status, error.response?.data);
return Promise.reject(error);
}
@@ -60,8 +105,15 @@ apiClient.interceptors.response.use(
// Add interceptors for AI client
aiApiClient.interceptors.request.use(
(config) => {
async (config) => {
console.log(`Making AI ${config.method?.toUpperCase()} request to ${config.url}`);
try {
const token = authTokenGetter ? await authTokenGetter() : null;
if (token) {
config.headers = config.headers || {};
(config.headers as any)['Authorization'] = `Bearer ${token}`;
}
} catch (e) {}
return config;
},
(error) => {
@@ -73,7 +125,32 @@ aiApiClient.interceptors.response.use(
(response) => {
return response;
},
(error) => {
async (error) => {
const originalRequest = error.config;
// If 401 and we haven't retried yet, try to refresh token and retry
if (error?.response?.status === 401 && !originalRequest._retry && authTokenGetter) {
originalRequest._retry = true;
try {
const newToken = await authTokenGetter();
if (newToken) {
originalRequest.headers['Authorization'] = `Bearer ${newToken}`;
return aiApiClient(originalRequest);
}
} catch (retryError) {
console.error('Token refresh failed:', retryError);
}
const isOnboardingRoute = window.location.pathname.includes('/onboarding') ||
window.location.pathname === '/';
if (!isOnboardingRoute) {
try { window.location.assign('/'); } catch {}
} else {
console.warn('401 Unauthorized - token refresh failed');
}
}
console.error('AI API Error:', error.response?.status, error.response?.data);
return Promise.reject(error);
}
@@ -81,8 +158,15 @@ aiApiClient.interceptors.response.use(
// Add interceptors for long-running client
longRunningApiClient.interceptors.request.use(
(config) => {
async (config) => {
console.log(`Making long-running ${config.method?.toUpperCase()} request to ${config.url}`);
try {
const token = authTokenGetter ? await authTokenGetter() : null;
if (token) {
config.headers = config.headers || {};
(config.headers as any)['Authorization'] = `Bearer ${token}`;
}
} catch (e) {}
return config;
},
(error) => {
@@ -95,6 +179,16 @@ longRunningApiClient.interceptors.response.use(
return response;
},
(error) => {
if (error?.response?.status === 401) {
// Only redirect on 401 if we're not in onboarding flow
const isOnboardingRoute = window.location.pathname.includes('/onboarding') ||
window.location.pathname === '/';
if (!isOnboardingRoute) {
try { window.location.assign('/'); } catch {}
} else {
console.warn('401 Unauthorized during onboarding - token may need refresh');
}
}
console.error('Long-running API Error:', error.response?.status, error.response?.data);
return Promise.reject(error);
}
@@ -102,8 +196,15 @@ longRunningApiClient.interceptors.response.use(
// Add interceptors for polling client
pollingApiClient.interceptors.request.use(
(config) => {
async (config) => {
console.log(`Making polling ${config.method?.toUpperCase()} request to ${config.url}`);
try {
const token = authTokenGetter ? await authTokenGetter() : null;
if (token) {
config.headers = config.headers || {};
(config.headers as any)['Authorization'] = `Bearer ${token}`;
}
} catch (e) {}
return config;
},
(error) => {
@@ -116,6 +217,16 @@ pollingApiClient.interceptors.response.use(
return response;
},
(error) => {
if (error?.response?.status === 401) {
// Only redirect on 401 if we're not in onboarding flow
const isOnboardingRoute = window.location.pathname.includes('/onboarding') ||
window.location.pathname === '/';
if (!isOnboardingRoute) {
try { window.location.assign('/'); } catch {}
} else {
console.warn('401 Unauthorized during onboarding - token may need refresh');
}
}
console.error('Polling API Error:', error.response?.status, error.response?.data);
return Promise.reject(error);
}

57
frontend/src/api/onboarding.ts
View File

@@ -47,11 +47,11 @@ export async function getCurrentStep() {
return { step: res.data.current_step || 1 };
}
export async function setCurrentStep(step: number) {
export async function setCurrentStep(step: number, stepData?: any) {
// Complete the current step to move to the next one
console.log('setCurrentStep: Completing step', step);
console.log('setCurrentStep: Completing step', step, 'with data:', stepData);
const res: AxiosResponse<OnboardingStepResponse> = await apiClient.post(`/api/onboarding/step/${step}/complete`, {
data: {},
data: stepData || {},
validation_errors: []
});
console.log('setCurrentStep: Backend response:', res.data);
@@ -95,6 +95,43 @@ export async function getApiKeys() {
throw lastError;
}
export async function getApiKeysForOnboarding() {
const maxRetries = 3;
let lastError: any;
console.log('getApiKeysForOnboarding: Starting API call to /api/onboarding/api-keys/onboarding');
for (let attempt = 0; attempt < maxRetries; attempt++) {
try {
console.log(`getApiKeysForOnboarding: Attempt ${attempt + 1}/${maxRetries}`);
const res: AxiosResponse<any> = await apiClient.get('/api/onboarding/api-keys/onboarding');
console.log('getApiKeysForOnboarding: API call successful');
return res.data.api_keys || {};
} catch (error: any) {
lastError = error;
console.log(`getApiKeysForOnboarding: Attempt ${attempt + 1} failed:`, error.response?.status, error.message);
// If it's a rate limit error (429), wait and retry
if (error.response?.status === 429) {
const retryAfter = error.response?.data?.retry_after || 60;
const delay = Math.min(retryAfter * 1000, 5000); // Max 5 seconds
console.log(`getApiKeysForOnboarding: Rate limited, retrying in ${delay}ms (attempt ${attempt + 1}/${maxRetries})`);
await new Promise(resolve => setTimeout(resolve, delay));
continue;
}
// For other errors, don't retry
console.log('getApiKeysForOnboarding: Non-rate-limit error, not retrying');
throw error;
}
}
// If we've exhausted all retries, throw the last error
console.log('getApiKeysForOnboarding: All retries exhausted');
throw lastError;
}
export async function saveApiKey(provider: string, api_key: string, description?: string) {
const res: AxiosResponse<APIKeyResponse> = await apiClient.post('/api/onboarding/api-keys', {
provider,
@@ -126,6 +163,20 @@ export async function getStepData(stepNumber: number) {
return res.data;
}
export async function getStep1ApiKeysFromProgress(): Promise<{ gemini?: string; exa?: string; copilotkit?: string }> {
try {
const step = await getStepData(1);
const keys = step?.data?.api_keys || {};
return {
gemini: keys.gemini || undefined,
exa: keys.exa || undefined,
copilotkit: keys.copilotkit || undefined,
};
} catch (_e) {
return {};
}
}
export async function skipStep(stepNumber: number) {
const res: AxiosResponse<any> = await apiClient.post(`/api/onboarding/step/${stepNumber}/skip`);
return res.data;

117
frontend/src/api/styleDetection.ts
View File

@@ -1,5 +1,7 @@
/** Style Detection API Integration */
import { apiClient } from './client';
export interface StyleAnalysisRequest {
content: {
main_content: string;
@@ -56,19 +58,8 @@ const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:8000';
*/
export const analyzeContentStyle = async (request: StyleAnalysisRequest): Promise<StyleAnalysisResponse> => {
try {
const response = await fetch(`${API_BASE_URL}/api/onboarding/style-detection/analyze`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(request),
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
const response = await apiClient.post('/api/onboarding/style-detection/analyze', request);
return response.data;
} catch (error) {
console.error('Error analyzing content style:', error);
return {
@@ -84,19 +75,8 @@ export const analyzeContentStyle = async (request: StyleAnalysisRequest): Promis
*/
export const crawlWebsiteContent = async (request: WebCrawlRequest): Promise<WebCrawlResponse> => {
try {
const response = await fetch(`${API_BASE_URL}/api/onboarding/style-detection/crawl`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(request),
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
const response = await apiClient.post('/api/onboarding/style-detection/crawl', request);
return response.data;
} catch (error) {
console.error('Error crawling website content:', error);
return {
@@ -112,19 +92,8 @@ export const crawlWebsiteContent = async (request: WebCrawlRequest): Promise<Web
*/
export const completeStyleDetection = async (request: StyleDetectionRequest): Promise<StyleDetectionResponse> => {
try {
const response = await fetch(`${API_BASE_URL}/api/onboarding/style-detection/complete`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(request),
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
const response = await apiClient.post('/api/onboarding/style-detection/complete', request);
return response.data;
} catch (error) {
console.error('Error in complete style detection:', error);
return {
@@ -140,18 +109,8 @@ export const completeStyleDetection = async (request: StyleDetectionRequest): Pr
*/
export const getStyleDetectionConfiguration = async (): Promise<any> => {
try {
const response = await fetch(`${API_BASE_URL}/api/onboarding/style-detection/configuration-options`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
const response = await apiClient.get('/api/onboarding/style-detection/configuration-options');
return response.data;
} catch (error) {
console.error('Error getting style detection configuration:', error);
return {
@@ -193,18 +152,8 @@ export const validateStyleDetectionRequest = (request: StyleDetectionRequest): {
*/
export const checkExistingAnalysis = async (websiteUrl: string): Promise<any> => {
try {
const response = await fetch(`${API_BASE_URL}/api/onboarding/style-detection/check-existing/${encodeURIComponent(websiteUrl)}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
const response = await apiClient.get(`/api/onboarding/style-detection/check-existing/${encodeURIComponent(websiteUrl)}`);
return response.data;
} catch (error) {
console.error('Error checking existing analysis:', error);
return {
@@ -218,18 +167,8 @@ export const checkExistingAnalysis = async (websiteUrl: string): Promise<any> =>
*/
export const getAnalysisById = async (analysisId: number): Promise<any> => {
try {
const response = await fetch(`${API_BASE_URL}/api/onboarding/style-detection/analysis/${analysisId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
const response = await apiClient.get(`/api/onboarding/style-detection/analysis/${analysisId}`);
return response.data;
} catch (error) {
console.error('Error getting analysis by ID:', error);
return {
@@ -243,18 +182,8 @@ export const getAnalysisById = async (analysisId: number): Promise<any> => {
*/
export const getSessionAnalyses = async (): Promise<any> => {
try {
const response = await fetch(`${API_BASE_URL}/api/onboarding/style-detection/session-analyses`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
const response = await apiClient.get('/api/onboarding/style-detection/session-analyses');
return response.data;
} catch (error) {
console.error('Error getting session analyses:', error);
return {
@@ -268,18 +197,8 @@ export const getSessionAnalyses = async (): Promise<any> => {
*/
export const deleteAnalysis = async (analysisId: number): Promise<any> => {
try {
const response = await fetch(`${API_BASE_URL}/api/onboarding/style-detection/analysis/${analysisId}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
const response = await apiClient.delete(`/api/onboarding/style-detection/analysis/${analysisId}`);
return response.data;
} catch (error) {
console.error('Error deleting analysis:', error);
return {