1 && i < count - 1 ? '0.5rem' : undefined
26 | }}
27 | />
28 | ));
29 |
30 | return <>{skeletons};
31 | }
32 |
33 | // Article Card Skeleton
34 | export function ArticleCardSkeleton() {
35 | return (
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | );
51 | }
52 |
53 | // Article List Skeleton
54 | export function ArticleListSkeleton({ count = 5 }: { count?: number }) {
55 | return (
56 |
57 | {Array.from({ length: count }, (_, i) => (
58 |
59 | ))}
60 |
61 | );
62 | }
63 |
64 | // Chat Message Skeleton
65 | export function ChatMessageSkeleton() {
66 | return (
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | );
77 | }
--------------------------------------------------------------------------------
/docs/DATABASE_SETUP.md:
--------------------------------------------------------------------------------
1 | # Database Setup Guide
2 |
3 | ## Setting up Supabase for xFunnel
4 |
5 | ### 1. Local Development Setup
6 |
7 | If you're using Supabase locally or haven't set up the database yet, follow these steps:
8 |
9 | #### Prerequisites
10 | - Ensure you have your Supabase project URL and keys in `.env.local`:
11 | ```bash
12 | NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
13 | NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
14 | SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
15 | JWT_SECRET=your-jwt-secret
16 | ```
17 |
18 | #### Running Migrations
19 |
20 | 1. **Option A: Using Supabase SQL Editor (Recommended)**
21 | - Go to your Supabase project dashboard
22 | - Navigate to SQL Editor
23 | - Run each migration file in order:
24 | - `000_create_articles_table.sql`
25 | - `001_create_users_table.sql`
26 | - `002_update_articles_table.sql`
27 | - `003_create_workers_table.sql`
28 | - `004_update_workers_table_activity_tracking.sql`
29 |
30 | 2. **Option B: Using the setup script**
31 | ```bash
32 | npm install
33 | node scripts/setup-database.js
34 | ```
35 |
36 | ### 2. Testing the Setup
37 |
38 | After running the migrations, test your setup:
39 |
40 | 1. Try registering a new user at `/login`
41 | 2. Create and edit articles
42 | 3. Check if data persists in Supabase
43 |
44 | ### 3. Troubleshooting
45 |
46 | #### "User with this email already exists" error when no user exists
47 | This usually means:
48 | - The database connection is failing
49 | - The users table doesn't exist
50 | - There's a connectivity issue with Supabase
51 |
52 | **Solution:**
53 | 1. Check your environment variables in `.env.local`
54 | 2. Ensure all migrations have been run
55 | 3. Check Supabase dashboard for any errors
56 | 4. Verify your Supabase URL and keys are correct
57 |
58 | #### Cannot connect to Supabase
59 | 1. Ensure your Supabase project is active
60 | 2. Check if your IP is allowed in Supabase settings (for production)
61 | 3. Verify environment variables are correctly set
62 |
63 | ### 4. Development without Supabase
64 |
65 | If you want to develop without Supabase connection:
66 | - The app will use mock data for authentication
67 | - Articles will be stored in memory (not persisted)
68 | - Use these test credentials:
69 | - Email: `test@example.com`
70 | - Password: `password`
71 |
72 | ### 5. Clearing Test Data
73 |
74 | To clear all test data:
75 | ```sql
76 | -- Run in Supabase SQL Editor
77 | TRUNCATE TABLE users CASCADE;
78 | TRUNCATE TABLE articles CASCADE;
79 | TRUNCATE TABLE workers CASCADE;
80 | ```
81 |
82 | **Warning:** This will delete all data in these tables!
--------------------------------------------------------------------------------
/.cursor/rules/self_improve.mdc:
--------------------------------------------------------------------------------
1 | ---
2 | description: Guidelines for continuously improving Cursor rules based on emerging code patterns and best practices.
3 | globs: **/*
4 | alwaysApply: true
5 | ---
6 |
7 | - **Rule Improvement Triggers:**
8 | - New code patterns not covered by existing rules
9 | - Repeated similar implementations across files
10 | - Common error patterns that could be prevented
11 | - New libraries or tools being used consistently
12 | - Emerging best practices in the codebase
13 |
14 | - **Analysis Process:**
15 | - Compare new code with existing rules
16 | - Identify patterns that should be standardized
17 | - Look for references to external documentation
18 | - Check for consistent error handling patterns
19 | - Monitor test patterns and coverage
20 |
21 | - **Rule Updates:**
22 | - **Add New Rules When:**
23 | - A new technology/pattern is used in 3+ files
24 | - Common bugs could be prevented by a rule
25 | - Code reviews repeatedly mention the same feedback
26 | - New security or performance patterns emerge
27 |
28 | - **Modify Existing Rules When:**
29 | - Better examples exist in the codebase
30 | - Additional edge cases are discovered
31 | - Related rules have been updated
32 | - Implementation details have changed
33 |
34 | - **Example Pattern Recognition:**
35 | ```typescript
36 | // If you see repeated patterns like:
37 | const data = await prisma.user.findMany({
38 | select: { id: true, email: true },
39 | where: { status: 'ACTIVE' }
40 | });
41 |
42 | // Consider adding to [prisma.mdc](mdc:.cursor/rules/prisma.mdc):
43 | // - Standard select fields
44 | // - Common where conditions
45 | // - Performance optimization patterns
46 | ```
47 |
48 | - **Rule Quality Checks:**
49 | - Rules should be actionable and specific
50 | - Examples should come from actual code
51 | - References should be up to date
52 | - Patterns should be consistently enforced
53 |
54 | - **Continuous Improvement:**
55 | - Monitor code review comments
56 | - Track common development questions
57 | - Update rules after major refactors
58 | - Add links to relevant documentation
59 | - Cross-reference related rules
60 |
61 | - **Rule Deprecation:**
62 | - Mark outdated patterns as deprecated
63 | - Remove rules that no longer apply
64 | - Update references to deprecated rules
65 | - Document migration paths for old patterns
66 |
67 | - **Documentation Updates:**
68 | - Keep examples synchronized with code
69 | - Update references to external docs
70 | - Maintain links between related rules
71 | - Document breaking changes
72 | Follow [cursor_rules.mdc](mdc:.cursor/rules/cursor_rules.mdc) for proper rule formatting and structure.
73 |
--------------------------------------------------------------------------------
/supabase/migrations/004_update_workers_table_activity_tracking.sql:
--------------------------------------------------------------------------------
1 | -- Update workers table to better support activity tracking
2 | -- Add columns for focus/blur tracking and read percentage
3 |
4 | -- Add new columns for better activity tracking
5 | ALTER TABLE workers
6 | ADD COLUMN IF NOT EXISTS focus_count INTEGER DEFAULT 0,
7 | ADD COLUMN IF NOT EXISTS blur_count INTEGER DEFAULT 0,
8 | ADD COLUMN IF NOT EXISTS read_percentage INTEGER DEFAULT 0,
9 | ADD COLUMN IF NOT EXISTS is_active BOOLEAN DEFAULT true,
10 | ADD COLUMN IF NOT EXISTS last_active TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc', NOW());
11 |
12 | -- Create activity_logs view for backwards compatibility and analytics
13 | CREATE OR REPLACE VIEW activity_logs AS
14 | SELECT
15 | id,
16 | user_id,
17 | article_id,
18 | session_start,
19 | session_end,
20 | time_spent_seconds,
21 | focus_count,
22 | blur_count,
23 | read_percentage,
24 | is_active,
25 | last_active,
26 | ai_requests_count,
27 | manual_edits_count,
28 | words_added,
29 | words_deleted,
30 | initial_word_count,
31 | final_word_count,
32 | created_at
33 | FROM workers;
34 |
35 | -- Grant access to the view
36 | GRANT SELECT ON activity_logs TO authenticated;
37 |
38 | -- Create function to calculate session metrics
39 | CREATE OR REPLACE FUNCTION calculate_session_metrics(p_user_id UUID, p_article_id UUID)
40 | RETURNS TABLE (
41 | total_sessions BIGINT,
42 | total_time_spent_seconds BIGINT,
43 | avg_time_per_session NUMERIC,
44 | total_ai_requests BIGINT,
45 | avg_read_percentage NUMERIC,
46 | total_focus_events BIGINT,
47 | total_blur_events BIGINT,
48 | last_session_date TIMESTAMP WITH TIME ZONE
49 | ) AS $$
50 | BEGIN
51 | RETURN QUERY
52 | SELECT
53 | COUNT(*)::BIGINT as total_sessions,
54 | COALESCE(SUM(time_spent_seconds), 0)::BIGINT as total_time_spent_seconds,
55 | COALESCE(AVG(time_spent_seconds), 0)::NUMERIC as avg_time_per_session,
56 | COALESCE(SUM(ai_requests_count), 0)::BIGINT as total_ai_requests,
57 | COALESCE(AVG(read_percentage), 0)::NUMERIC as avg_read_percentage,
58 | COALESCE(SUM(focus_count), 0)::BIGINT as total_focus_events,
59 | COALESCE(SUM(blur_count), 0)::BIGINT as total_blur_events,
60 | MAX(session_start) as last_session_date
61 | FROM workers
62 | WHERE
63 | (p_user_id IS NULL OR user_id = p_user_id) AND
64 | (p_article_id IS NULL OR article_id = p_article_id);
65 | END;
66 | $$ LANGUAGE plpgsql;
67 |
68 | -- Grant execute permission on the function
69 | GRANT EXECUTE ON FUNCTION calculate_session_metrics TO authenticated;
70 |
71 | -- Create index for better performance on activity queries
72 | CREATE INDEX IF NOT EXISTS idx_workers_last_active ON workers(last_active DESC);
73 | CREATE INDEX IF NOT EXISTS idx_workers_is_active ON workers(is_active) WHERE is_active = true;
--------------------------------------------------------------------------------
/app/components/ColorThemeSelector.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState } from 'react';
4 | import { useTheme, AccentColor } from './ThemeProvider';
5 | import { Check, Palette } from 'lucide-react';
6 |
7 | const colorOptions: { color: AccentColor; hex: string; name: string }[] = [
8 | { color: 'blue', hex: '#3b82f6', name: 'Blue' },
9 | { color: 'purple', hex: '#a855f7', name: 'Purple' },
10 | { color: 'green', hex: '#22c55e', name: 'Green' },
11 | { color: 'red', hex: '#ef4444', name: 'Red' },
12 | { color: 'orange', hex: '#f97316', name: 'Orange' },
13 | { color: 'yellow', hex: '#f59e0b', name: 'Yellow' },
14 | { color: 'pink', hex: '#ec4899', name: 'Pink' },
15 | { color: 'teal', hex: '#14b8a6', name: 'Teal' },
16 | ];
17 |
18 | export default function ColorThemeSelector() {
19 | const { accentColor, setAccentColor } = useTheme();
20 | const [isOpen, setIsOpen] = useState(false);
21 |
22 | return (
23 |
24 |
31 |
32 | {isOpen && (
33 | <>
34 | {/* Backdrop */}
35 |
setIsOpen(false)}
38 | />
39 |
40 | {/* Dropdown */}
41 |
42 |
43 | {colorOptions.map(({ color, hex, name }) => (
44 |
62 | ))}
63 |
64 |
65 |
66 | )}
67 |
68 | );
69 | }
--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from 'next/server';
2 | import type { NextRequest } from 'next/server';
3 |
4 | export function middleware(request: NextRequest) {
5 | // Get response
6 | const response = NextResponse.next();
7 |
8 | // Add security headers
9 | response.headers.set('X-Frame-Options', 'DENY');
10 | response.headers.set('X-Content-Type-Options', 'nosniff');
11 | response.headers.set('X-XSS-Protection', '1; mode=block');
12 | response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
13 | response.headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
14 |
15 | // Content Security Policy
16 | const cspDirectives = [
17 | "default-src 'self'",
18 | "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net", // For Next.js and React
19 | "style-src 'self' 'unsafe-inline'", // For Tailwind CSS
20 | "img-src 'self' data: blob: https:",
21 | "font-src 'self' data:",
22 | "connect-src 'self' https://api.anthropic.com https://*.supabase.co wss://*.supabase.co",
23 | "media-src 'none'",
24 | "object-src 'none'",
25 | "frame-src 'none'",
26 | "base-uri 'self'",
27 | "form-action 'self'",
28 | "frame-ancestors 'none'",
29 | "upgrade-insecure-requests"
30 | ];
31 |
32 | // In development, allow more sources for hot reload
33 | if (process.env.NODE_ENV === 'development') {
34 | cspDirectives[1] = "script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:* ws://localhost:*";
35 | cspDirectives[5] = "connect-src 'self' http://localhost:* ws://localhost:* https://api.anthropic.com https://*.supabase.co wss://*.supabase.co";
36 | }
37 |
38 | response.headers.set('Content-Security-Policy', cspDirectives.join('; '));
39 |
40 | // Strict Transport Security (only in production)
41 | if (process.env.NODE_ENV === 'production') {
42 | response.headers.set(
43 | 'Strict-Transport-Security',
44 | 'max-age=31536000; includeSubDomains; preload'
45 | );
46 | }
47 |
48 | // Don't protect login/register routes and API auth routes
49 | const publicPaths = ['/login', '/api/auth/login', '/api/auth/register'];
50 |
51 | if (publicPaths.includes(request.nextUrl.pathname)) {
52 | return response;
53 | }
54 |
55 | // Authentication check can be added here if needed
56 | // For now, authentication is handled in components
57 |
58 | return response;
59 | }
60 |
61 | export const config = {
62 | matcher: [
63 | /*
64 | * Match all request paths except for the ones starting with:
65 | * - _next/static (static files)
66 | * - _next/image (image optimization files)
67 | * - favicon.ico (favicon file)
68 | * - public assets
69 | */
70 | '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
71 | ],
72 | };
--------------------------------------------------------------------------------
/app/api/auth/login/route.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from 'next/server';
2 | import { authenticateUser, generateToken } from '@/lib/auth';
3 | import { logger } from '@/lib/logger';
4 | import { withLogging } from '@/lib/logger';
5 | import { ValidationError, AuthenticationError, formatErrorResponse } from '@/lib/error-handler';
6 | import { rateLimit, getClientIdentifier } from '@/lib/rate-limiter';
7 |
8 | export const POST = withLogging(async (request: NextRequest) => {
9 | const startTime = Date.now();
10 |
11 | try {
12 | // Rate limiting
13 | const clientId = getClientIdentifier(request);
14 | const { success, remaining, reset } = await rateLimit(clientId, 'auth');
15 |
16 | if (!success) {
17 | return NextResponse.json(
18 | {
19 | error: 'Too many login attempts. Please try again later.',
20 | retryAfter: Math.ceil((reset - Date.now()) / 1000)
21 | },
22 | {
23 | status: 429,
24 | headers: {
25 | 'Retry-After': String(Math.ceil((reset - Date.now()) / 1000)),
26 | 'X-RateLimit-Remaining': '0',
27 | 'X-RateLimit-Reset': new Date(reset).toISOString()
28 | }
29 | }
30 | );
31 | }
32 |
33 | // Parse request body
34 | let body;
35 | try {
36 | body = await request.json();
37 | } catch (e) {
38 | throw new ValidationError('Invalid JSON in request body');
39 | }
40 |
41 | const { email, password } = body;
42 |
43 | // Validate input
44 | if (!email || !password) {
45 | throw new ValidationError('Email and password are required');
46 | }
47 |
48 | if (!email.includes('@')) {
49 | throw new ValidationError('Invalid email format');
50 | }
51 |
52 | // Log authentication attempt (without password)
53 | logger.info('Login attempt', {
54 | email,
55 | userAgent: request.headers.get('user-agent') || undefined
56 | });
57 |
58 | // Authenticate user
59 | const user = await authenticateUser(email, password);
60 |
61 | if (!user) {
62 | logger.warn('Failed login attempt', { email });
63 | throw new AuthenticationError('Invalid email or password');
64 | }
65 |
66 | // Generate token
67 | const token = generateToken(user);
68 |
69 | // Log successful login
70 | logger.info('Successful login', {
71 | userId: user.id,
72 | email: user.email,
73 | duration: Date.now() - startTime
74 | });
75 |
76 | return NextResponse.json({
77 | user: {
78 | id: user.id,
79 | email: user.email,
80 | },
81 | token,
82 | });
83 | } catch (error) {
84 | const errorResponse = formatErrorResponse(error as Error);
85 |
86 | return NextResponse.json(
87 | errorResponse,
88 | { status: errorResponse.statusCode }
89 | );
90 | }
91 | });
--------------------------------------------------------------------------------
/lib/consoleBanner.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Console banner for xFunnel application
3 | * Shows ASCII art and credits
4 | */
5 |
6 | let bannerShown = false;
7 |
8 | export function showConsoleBanner() {
9 | // Only show in browser environment
10 | if (typeof window === 'undefined') return;
11 |
12 | // Reset on each call for production
13 | bannerShown = false;
14 |
15 | // ASCII art for ZIE619
16 | const asciiArt = `
17 | %c
18 | ███████╗██╗███████╗ ██████╗ ██╗ █████╗
19 | ╚══███╔╝██║██╔════╝ ██╔════╝ ███║██╔══██╗
20 | ███╔╝ ██║█████╗ ███████╗ ╚██║╚██████║
21 | ███╔╝ ██║██╔══╝ ██╔═══██╗ ██║ ╚═══██║
22 | ███████╗██║███████╗ ╚██████╔╝ ██║ █████╔╝
23 | ╚══════╝╚═╝╚══════╝ ╚═════╝ ╚═╝ ╚════╝
24 |
25 | %c✨ Welcome to xFunnel - AI-Powered Article Editor ✨
26 |
27 | %c© 2025 Eliad Shahar - All Rights Reserved
28 | %cGitHub: https://github.com/Zie619
29 |
30 | %cBuilt with 😊 using Next.js, TypeScript, and Claude AI
31 | `;
32 |
33 | // Styles for different parts
34 | const styles = [
35 | 'color: #6366f1; font-weight: bold; font-size: 14px; line-height: 1.2;', // ASCII art
36 | 'color: #10b981; font-weight: bold; font-size: 16px; padding: 10px 0;', // Welcome message
37 | 'color: #94a3b8; font-size: 12px;', // Copyright
38 | 'color: #3b82f6; font-size: 12px; text-decoration: underline; cursor: pointer;', // GitHub link
39 | 'color: #64748b; font-size: 11px; font-style: italic; padding-top: 10px;' // Built with
40 | ];
41 |
42 | // Show the banner
43 | console.log(asciiArt, ...styles);
44 |
45 | // Make GitHub link clickable
46 | console.log('%cClick here to visit my GitHub', 'color: #3b82f6; font-size: 12px; cursor: pointer;', 'https://github.com/Zie619');
47 |
48 | // Add clickable link handler
49 | if (process.env.NODE_ENV === 'development') {
50 | console.log('%c🔧 Development Mode - Verbose logging enabled', 'color: #f59e0b; font-weight: bold;');
51 | } else {
52 | console.log('%c🚀 Production Mode - Minimal logging', 'color: #10b981; font-weight: bold;');
53 | }
54 |
55 | // Banner will show on every page refresh
56 | }
57 |
58 | // Export a debug mode toggle
59 | export function enableDebugMode() {
60 | localStorage.setItem('xfunnel_debug', 'true');
61 | console.log('%c🐛 Debug mode enabled - Refresh to see verbose logs', 'color: #f59e0b; font-weight: bold;');
62 | }
63 |
64 | export function disableDebugMode() {
65 | localStorage.removeItem('xfunnel_debug');
66 | console.log('%c🔕 Debug mode disabled - Refresh to hide verbose logs', 'color: #10b981; font-weight: bold;');
67 | }
68 |
69 | export function isDebugMode(): boolean {
70 | return localStorage.getItem('xfunnel_debug') === 'true';
71 | }
72 |
73 | // Auto-show banner when script loads in browser
74 | if (typeof window !== 'undefined') {
75 | // Use setTimeout to ensure DOM is ready
76 | setTimeout(() => {
77 | showConsoleBanner();
78 | }, 100);
79 | }
--------------------------------------------------------------------------------
/lib/api-error-handler.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from 'next/server';
2 | import { logger } from './logger';
3 |
4 | export class ApiError extends Error {
5 | constructor(
6 | message: string,
7 | public statusCode: number = 500,
8 | public code?: string,
9 | public details?: any
10 | ) {
11 | super(message);
12 | this.name = 'ApiError';
13 | }
14 | }
15 |
16 | export function createApiError(
17 | message: string,
18 | statusCode: number = 500,
19 | code?: string,
20 | details?: any
21 | ): ApiError {
22 | return new ApiError(message, statusCode, code, details);
23 | }
24 |
25 | export function handleApiError(error: unknown): NextResponse {
26 | // Log the error
27 | logger.error('API Error', error);
28 |
29 | // Handle known API errors
30 | if (error instanceof ApiError) {
31 | return NextResponse.json(
32 | {
33 | error: error.message,
34 | code: error.code,
35 | details: process.env.NODE_ENV === 'development' ? error.details : undefined,
36 | },
37 | { status: error.statusCode }
38 | );
39 | }
40 |
41 | // Handle JWT errors
42 | if (error instanceof Error && error.name === 'JsonWebTokenError') {
43 | return NextResponse.json(
44 | { error: 'Invalid authentication token' },
45 | { status: 401 }
46 | );
47 | }
48 |
49 | if (error instanceof Error && error.name === 'TokenExpiredError') {
50 | return NextResponse.json(
51 | { error: 'Authentication token expired' },
52 | { status: 401 }
53 | );
54 | }
55 |
56 | // Handle database errors
57 | if (error instanceof Error && error.message.includes('ECONNREFUSED')) {
58 | return NextResponse.json(
59 | { error: 'Database connection failed. Please try again later.' },
60 | { status: 503 }
61 | );
62 | }
63 |
64 | // Handle validation errors
65 | if (error instanceof Error && error.name === 'ValidationError') {
66 | return NextResponse.json(
67 | {
68 | error: 'Validation failed',
69 | details: process.env.NODE_ENV === 'development' ? error.message : undefined
70 | },
71 | { status: 400 }
72 | );
73 | }
74 |
75 | // Default error response
76 | const isDevelopment = process.env.NODE_ENV === 'development';
77 | const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
78 |
79 | return NextResponse.json(
80 | {
81 | error: isDevelopment ? errorMessage : 'Internal server error',
82 | stack: isDevelopment && error instanceof Error ? error.stack : undefined,
83 | },
84 | { status: 500 }
85 | );
86 | }
87 |
88 | // Wrapper for API route handlers
89 | export function withErrorHandler
Promise>(
90 | handler: T
91 | ): T {
92 | return (async (...args: Parameters) => {
93 | try {
94 | return await handler(...args);
95 | } catch (error) {
96 | return handleApiError(error);
97 | }
98 | }) as T;
99 | }
--------------------------------------------------------------------------------
/hooks/useClaude.ts:
--------------------------------------------------------------------------------
1 | import { useState, useCallback } from 'react';
2 | import { claudeClient } from '@/lib/claude-client';
3 | import { ClaudeMessage, ClaudeResponse, ClaudeStreamChunk } from '@/lib/claude-types';
4 |
5 | interface UseClaudeOptions {
6 | systemPrompt?: string;
7 | maxTokens?: number;
8 | context?: string;
9 | onStreamChunk?: (chunk: ClaudeStreamChunk) => void;
10 | }
11 |
12 | interface UseClaudeReturn {
13 | messages: ClaudeMessage[];
14 | isLoading: boolean;
15 | error: string | null;
16 | sendMessage: (content: string, streaming?: boolean) => Promise;
17 | clearMessages: () => void;
18 | streamingText: string;
19 | }
20 |
21 | export function useClaude(options: UseClaudeOptions = {}): UseClaudeReturn {
22 | const [messages, setMessages] = useState([]);
23 | const [isLoading, setIsLoading] = useState(false);
24 | const [error, setError] = useState(null);
25 | const [streamingText, setStreamingText] = useState('');
26 |
27 | const sendMessage = useCallback(
28 | async (content: string, streaming = false) => {
29 | setIsLoading(true);
30 | setError(null);
31 | setStreamingText('');
32 |
33 | const newMessages = [...messages, { role: 'user' as const, content }];
34 | setMessages(newMessages);
35 |
36 | try {
37 | if (streaming) {
38 | let fullText = '';
39 | await claudeClient.sendStreamingMessage(
40 | newMessages,
41 | (chunk) => {
42 | fullText += chunk.text;
43 | setStreamingText(fullText);
44 | options.onStreamChunk?.(chunk);
45 | },
46 | {
47 | systemPrompt: options.systemPrompt,
48 | maxTokens: options.maxTokens,
49 | context: options.context,
50 | }
51 | );
52 |
53 | // Add the complete response to messages
54 | setMessages([...newMessages, { role: 'assistant', content: fullText }]);
55 | setStreamingText('');
56 | } else {
57 | const response = await claudeClient.sendMessage(newMessages, {
58 | systemPrompt: options.systemPrompt,
59 | maxTokens: options.maxTokens,
60 | context: options.context,
61 | });
62 |
63 | setMessages([...newMessages, { role: 'assistant', content: response.content }]);
64 | }
65 | } catch (err) {
66 | setError(err instanceof Error ? err.message : 'An error occurred');
67 | // Remove the user message if there was an error
68 | setMessages(messages);
69 | } finally {
70 | setIsLoading(false);
71 | }
72 | },
73 | [messages, options]
74 | );
75 |
76 | const clearMessages = useCallback(() => {
77 | setMessages([]);
78 | setError(null);
79 | setStreamingText('');
80 | }, []);
81 |
82 | return {
83 | messages,
84 | isLoading,
85 | error,
86 | sendMessage,
87 | clearMessages,
88 | streamingText,
89 | };
90 | }
--------------------------------------------------------------------------------
/lib/claude-prompts.ts:
--------------------------------------------------------------------------------
1 | // System prompts for different Claude interactions
2 |
3 | export const ARTICLE_EDITOR_PROMPT = `You are a collaborative professional editor. Help the user refine and improve this article step by step.
4 |
5 | Your role is to:
6 | 1. Provide constructive feedback on content, structure, and clarity
7 | 2. Suggest improvements for engagement and readability
8 | 3. Help maintain a consistent tone and style
9 | 4. Identify areas that need more development or clarity
10 | 5. Offer specific, actionable suggestions
11 |
12 | When editing:
13 | - Be supportive and encouraging
14 | - Focus on improving the article's impact and clarity
15 | - Preserve the author's voice and intent
16 | - Provide specific examples when suggesting changes
17 | - Ask clarifying questions when needed
18 |
19 | IMPORTANT: When generating or suggesting content, always use proper markdown formatting:
20 | - Use # for main headings (e.g., # Heading 1)
21 | - Use ## for subheadings (e.g., ## Heading 2)
22 | - Use ### for sub-subheadings (e.g., ### Heading 3)
23 | - Use - or * for bullet points (not • or other symbols)
24 | - Use 1. 2. 3. for numbered lists
25 | - Use \`\`\` for code blocks
26 | - Use > for blockquotes
27 | - Use **bold** and *italic* for emphasis
28 | - Use --- for horizontal rules
29 |
30 | Always maintain a professional, helpful tone and remember you're collaborating with the author to create the best possible version of their article.`;
31 |
32 | export const CONTENT_ANALYZER_PROMPT = `You are an expert content analyst. Analyze the provided article and provide insights on:
33 |
34 | 1. Overall quality and coherence
35 | 2. Target audience alignment
36 | 3. Key strengths and weaknesses
37 | 4. Engagement potential
38 | 5. SEO considerations
39 | 6. Readability score estimation
40 |
41 | Provide your analysis in a structured, easy-to-understand format.`;
42 |
43 | export const TITLE_GENERATOR_PROMPT = `You are a creative title specialist. Based on the article content provided, generate compelling, SEO-friendly titles that:
44 |
45 | 1. Accurately represent the content
46 | 2. Grab reader attention
47 | 3. Include relevant keywords naturally
48 | 4. Are concise and impactful
49 | 5. Follow best practices for the article's genre/niche
50 |
51 | Provide 5-7 title options with brief explanations for each.`;
52 |
53 | export const SUMMARY_GENERATOR_PROMPT = `You are an expert at creating concise, engaging summaries. Create a summary that:
54 |
55 | 1. Captures the main points of the article
56 | 2. Maintains the core message and tone
57 | 3. Is appropriate for the specified length
58 | 4. Engages readers and encourages them to read the full article
59 | 5. Includes key takeaways when relevant
60 |
61 | Adjust the summary length and style based on the user's requirements.`;
62 |
63 | // Helper function to customize prompts
64 | export function customizePrompt(basePrompt: string, additionalContext?: string): string {
65 | if (!additionalContext) return basePrompt;
66 |
67 | return `${basePrompt}\n\nAdditional context:\n${additionalContext}`;
68 | }
--------------------------------------------------------------------------------
/docs/SETUP_SUMMARY.md:
--------------------------------------------------------------------------------
1 | # XFunnel Database Setup Summary
2 |
3 | ## Current Status
4 |
5 | ✅ **Scripts Created:**
6 | - `scripts/setup-database-simple.js` - Main setup script
7 | - `scripts/setup-supabase-db.sh` - Bash alternative
8 | - `scripts/setup-supabase.py` - Python alternative
9 | - `scripts/test-connection.js` - Connection tester
10 | - `scripts/combined-migrations.sql` - All SQL migrations in one file
11 |
12 | ✅ **Documentation Created:**
13 | - `DATABASE_SETUP.md` - Detailed setup instructions
14 | - `SUPABASE_SETUP_GUIDE.md` - Quick setup guide
15 | - This summary file
16 |
17 | ## ⚠️ Issue Found
18 |
19 | The Supabase connection is failing, likely because:
20 | 1. The API keys in `.env.local` may be incorrect or from a different project
21 | 2. The service role key is still set to placeholder value
22 |
23 | ## 🚀 Quick Fix Steps
24 |
25 | ### 1. Get Your Supabase Credentials
26 |
27 | 1. Go to [Supabase Dashboard](https://supabase.com/dashboard)
28 | 2. Select your project
29 | 3. Go to **Settings → API**
30 | 4. Copy these values:
31 | - **Project URL** (looks like `https://xxxxx.supabase.co`)
32 | - **anon public** key (starts with `eyJ...`)
33 | - **service_role** key (also starts with `eyJ...`)
34 |
35 | ### 2. Update .env.local
36 |
37 | Replace the values in `.env.local`:
38 | ```bash
39 | NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
40 | NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
41 | SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here
42 | ```
43 |
44 | ### 3. Run Database Setup
45 |
46 | #### Option A: Automated Setup (if service role key is provided)
47 | ```bash
48 | npm run setup:db
49 | ```
50 |
51 | #### Option B: Manual Setup
52 | 1. Go to your [Supabase SQL Editor](https://supabase.com/dashboard/project/_/sql)
53 | 2. Copy contents of `scripts/combined-migrations.sql`
54 | 3. Paste and click "Run"
55 |
56 | ### 4. Test Your Setup
57 |
58 | ```bash
59 | # Test connection
60 | node scripts/test-connection.js
61 |
62 | # Start the app
63 | npm run dev
64 | ```
65 |
66 | Then visit http://localhost:3000/login and try registering.
67 |
68 | ## 📁 All Database Scripts
69 |
70 | ```bash
71 | # Available setup commands:
72 | npm run setup:db # Simplified Node.js script
73 | npm run setup:db:node # Full Node.js script
74 | npm run setup:db:bash # Bash script (requires psql)
75 | npm run setup:db:python # Python script (requires psycopg2)
76 |
77 | # Test connection:
78 | node scripts/test-connection.js
79 | ```
80 |
81 | ## 🎯 What Gets Created
82 |
83 | The setup creates 4 tables:
84 | - `users` - User accounts and authentication
85 | - `articles` - Article content and metadata
86 | - `workers` - AI worker session tracking
87 | - `activity_sessions` - Detailed activity analytics
88 |
89 | ## ❓ Still Having Issues?
90 |
91 | 1. **"Invalid API key"** - Double-check you copied the correct keys from Supabase
92 | 2. **"User already exists"** - Tables might not be created yet, run the setup
93 | 3. **Can't connect** - Ensure Supabase project is active (not paused)
94 |
95 | The combined SQL file at `scripts/combined-migrations.sql` contains everything needed for manual setup if the automated scripts fail.
--------------------------------------------------------------------------------
/supabase/migrations/005_improve_workers_session_tracking.sql:
--------------------------------------------------------------------------------
1 | -- Improve workers table for better session tracking
2 | -- Add composite index for finding active sessions efficiently
3 |
4 | -- Create composite index for user/article/active session lookups
5 | CREATE INDEX IF NOT EXISTS idx_workers_user_article_active
6 | ON workers(user_id, article_id, session_end)
7 | WHERE session_end IS NULL;
8 |
9 | -- Create function to get or create active session
10 | CREATE OR REPLACE FUNCTION get_or_create_active_session(
11 | p_user_id UUID,
12 | p_article_id UUID
13 | )
14 | RETURNS TABLE (
15 | session_id UUID,
16 | is_new BOOLEAN
17 | ) AS $$
18 | DECLARE
19 | v_session_id UUID;
20 | v_is_new BOOLEAN := FALSE;
21 | BEGIN
22 | -- First try to find an existing active session
23 | SELECT id INTO v_session_id
24 | FROM workers
25 | WHERE user_id = p_user_id
26 | AND article_id = p_article_id
27 | AND session_end IS NULL
28 | AND is_active = true
29 | ORDER BY session_start DESC
30 | LIMIT 1;
31 |
32 | -- If no active session found, create a new one
33 | IF v_session_id IS NULL THEN
34 | INSERT INTO workers (
35 | user_id,
36 | article_id,
37 | session_start,
38 | time_spent_seconds,
39 | is_active,
40 | last_active,
41 | created_at
42 | ) VALUES (
43 | p_user_id,
44 | p_article_id,
45 | TIMEZONE('utc', NOW()),
46 | 0,
47 | true,
48 | TIMEZONE('utc', NOW()),
49 | TIMEZONE('utc', NOW())
50 | )
51 | RETURNING id INTO v_session_id;
52 |
53 | v_is_new := TRUE;
54 | END IF;
55 |
56 | RETURN QUERY SELECT v_session_id, v_is_new;
57 | END;
58 | $$ LANGUAGE plpgsql;
59 |
60 | -- Grant execute permission on the function
61 | GRANT EXECUTE ON FUNCTION get_or_create_active_session TO authenticated;
62 |
63 | -- Create view for active sessions with aggregated stats
64 | CREATE OR REPLACE VIEW active_sessions_stats AS
65 | SELECT
66 | w.user_id,
67 | w.article_id,
68 | w.id as session_id,
69 | w.session_start,
70 | w.last_active,
71 | w.time_spent_seconds,
72 | w.ai_requests_count,
73 | w.manual_edits_count,
74 | w.focus_count,
75 | w.blur_count,
76 | w.read_percentage,
77 | a.title as article_title,
78 | u.email as user_email,
79 | -- Calculate session duration in a human-readable format
80 | CASE
81 | WHEN w.time_spent_seconds < 60 THEN w.time_spent_seconds || ' seconds'
82 | WHEN w.time_spent_seconds < 3600 THEN (w.time_spent_seconds / 60)::INTEGER || ' minutes'
83 | ELSE (w.time_spent_seconds / 3600)::NUMERIC(10,1) || ' hours'
84 | END as duration_readable
85 | FROM workers w
86 | JOIN articles a ON w.article_id = a.id
87 | JOIN users u ON w.user_id = u.id
88 | WHERE w.session_end IS NULL
89 | AND w.is_active = true
90 | ORDER BY w.last_active DESC;
91 |
92 | -- Grant access to the view
93 | GRANT SELECT ON active_sessions_stats TO authenticated;
94 |
95 | -- Add comment to explain the session management strategy
96 | COMMENT ON TABLE workers IS 'Tracks user activity sessions per article. Each user can have one active session per article at a time. Sessions are marked as ended when session_end is set.';
--------------------------------------------------------------------------------
/app/api/save-article/route.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from 'next/server';
2 | import { createClient } from '@supabase/supabase-js';
3 | import { verifyToken } from '@/lib/auth';
4 |
5 | // Initialize Supabase client for server-side operations
6 | const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
7 | const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
8 |
9 | const supabase = createClient(supabaseUrl, supabaseServiceKey);
10 |
11 | export async function POST(request: NextRequest) {
12 | try {
13 | // Verify authentication
14 | const authHeader = request.headers.get('authorization');
15 | if (!authHeader || !authHeader.startsWith('Bearer ')) {
16 | return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
17 | }
18 |
19 | const token = authHeader.substring(7);
20 | const authPayload = verifyToken(token);
21 | if (!authPayload) {
22 | return NextResponse.json({ error: 'Invalid token' }, { status: 401 });
23 | }
24 |
25 | // Parse request body
26 | const { articleId, title, content } = await request.json();
27 |
28 | // Validate required fields
29 | if (!articleId || !title) {
30 | return NextResponse.json(
31 | { error: 'Invalid request: articleId and title are required' },
32 | { status: 400 }
33 | );
34 | }
35 |
36 | // Update article and set last_edited_by
37 | let { data: article, error } = await supabase
38 | .from('articles')
39 | .update({
40 | title,
41 | content,
42 | last_edited_by: authPayload.userId,
43 | updated_at: new Date().toISOString(),
44 | })
45 | .eq('id', articleId)
46 | .select(`
47 | *,
48 | last_editor:users!articles_last_edited_by_fkey(id, email)
49 | `)
50 | .single();
51 |
52 | // If update fails due to missing column, try without last_edited_by
53 | if (error && error.message.includes('last_edited_by')) {
54 | console.log('Falling back to update without last_edited_by');
55 | const result = await supabase
56 | .from('articles')
57 | .update({
58 | title,
59 | content,
60 | updated_at: new Date().toISOString(),
61 | })
62 | .eq('id', articleId)
63 | .select()
64 | .single();
65 |
66 | article = result.data;
67 | error = result.error;
68 | }
69 |
70 | if (error) {
71 | console.error('Error saving article:', error);
72 | return NextResponse.json(
73 | { error: 'Failed to save article', details: error.message },
74 | { status: 500 }
75 | );
76 | }
77 |
78 | if (!article) {
79 | return NextResponse.json(
80 | { error: 'Article not found or unauthorized' },
81 | { status: 404 }
82 | );
83 | }
84 |
85 | // Return the updated article
86 | return NextResponse.json(article);
87 | } catch (error) {
88 | console.error('Unexpected error in save-article route:', error);
89 | return NextResponse.json(
90 | { error: 'Internal server error' },
91 | { status: 500 }
92 | );
93 | }
94 | }
--------------------------------------------------------------------------------
/components/ErrorFallback.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { AlertCircle, RefreshCw, Home } from 'lucide-react';
4 | import { useRouter } from 'next/navigation';
5 |
6 | interface ErrorFallbackProps {
7 | error: Error;
8 | reset: () => void;
9 | }
10 |
11 | export default function ErrorFallback({ error, reset }: ErrorFallbackProps) {
12 | const router = useRouter();
13 | const isDevelopment = process.env.NODE_ENV === 'development';
14 |
15 | return (
16 |
17 |
18 |
19 |
24 |
25 |
26 |
27 | Oops! Something went wrong
28 |
29 |
30 | We encountered an unexpected error. Please try again.
31 |
32 |
33 |
34 | {isDevelopment && error && (
35 |
36 |
37 | Error details (development only)
38 |
39 |
40 |
41 | {error.message}
42 |
43 | {error.stack && (
44 |
45 | {error.stack}
46 |
47 | )}
48 |
50 | )}
51 |
52 |
53 |
60 |
61 |
68 |
69 |
70 |
71 |
57 |
58 |
59 |
60 | Oops! Something went wrong
61 |
62 |
63 | We're sorry for the inconvenience. Please try refreshing the page.
64 |
65 | {process.env.NODE_ENV === 'development' && this.state.error && (
66 |
67 |
68 | Error details (development only)
69 |
70 |
71 | {this.state.error.toString()}
72 | {this.state.errorInfo?.componentStack}
73 |
74 |
75 | )}
76 |
77 |
83 |
84 |
85 |
86 |
23 |
24 |
25 |
41 |
42 | Something went wrong
43 |
44 |
45 | We apologize for the inconvenience. The issue has been logged and we'll look into it.
46 |
47 | {process.env.NODE_ENV === 'development' && (
48 |
49 |
50 | Error details (development only)
51 |
52 |
53 | {error.message}
54 | {error.stack && '\n\n' + error.stack}
55 |
56 |
57 | )}
58 |
59 |
65 |
71 |
72 |
73 |
74 |
48 |
49 |
50 |
51 | Something went wrong
52 |
53 |
54 | We're sorry for the inconvenience. Please try refreshing the page.
55 |
56 |
57 |
63 |
69 |
70 |
71 |
72 |
32 | {line}
33 |
34 | );
35 | } else if (line.startsWith('+')) {
36 | // Added line
37 | return (
38 |
39 | +
40 |
41 | {line.substring(1)}
42 |
43 |
44 | );
45 | } else if (line.startsWith('-')) {
46 | // Removed line
47 | return (
48 |
49 | -
50 |
51 | {line.substring(1)}
52 |
53 |
54 | );
55 | } else if (line.startsWith(' ')) {
56 | // Context line
57 | return (
58 |
59 |
60 |
61 | {line.substring(1)}
62 |
63 |
64 | );
65 | }
66 | return null;
67 | };
68 |
69 | // Calculate statistics
70 | const stats = {
71 | additions: lines.filter(l => l.startsWith('+')).length,
72 | deletions: lines.filter(l => l.startsWith('-')).length,
73 | hunks: lines.filter(l => l.startsWith('@@')).length
74 | };
75 |
76 | const hasChanges = stats.additions > 0 || stats.deletions > 0;
77 |
78 | return (
79 |
80 | {/* Header with stats */}
81 |
82 |
Unified Diff View
83 |
84 |
85 | +{stats.additions} additions
86 |
87 |
88 | -{stats.deletions} deletions
89 |
90 |
91 | {stats.hunks} {stats.hunks === 1 ? 'change' : 'changes'}
92 |
93 |
94 |
95 |
96 | {/* Diff content */}
97 |
98 | {hasChanges ? (
99 |
100 | {lines.map((line, index) => renderLine(line, index))}
101 |
102 | ) : (
103 |
104 |
105 |
No changes detected
106 |
The original and modified content are identical
107 |
108 |
109 | )}
110 |
111 |
$1
');
17 |
18 | // Inline code (before other inline formatting)
19 | html = html.replace(/`([^`]+)`/g, '$1');
20 |
21 | // Headers with accent colors - handle lines with text before headers
22 | html = html.replace(/^(.*)### (.*$)/gim, function(match, before, header) {
23 | if (before.trim()) {
24 | return `${before}
\n${header}
`;
25 | }
26 | return `${header}
`;
27 | });
28 | html = html.replace(/^(.*)## (.*$)/gim, function(match, before, header) {
29 | if (before.trim()) {
30 | return `${before}
\n${header}
`;
31 | }
32 | return `${header}
`;
33 | });
34 | html = html.replace(/^(.*)# (.*$)/gim, function(match, before, header) {
35 | if (before.trim()) {
36 | return `${before}
\n${header}
`;
37 | }
38 | return `${header}
`;
39 | });
40 |
41 | // Bold (before italic to prevent conflicts)
42 | html = html.replace(/\*\*([^*]+)\*\*/g, '$1');
43 | html = html.replace(/__([^_]+)__/g, '$1');
44 |
45 | // Italic (more specific regex to avoid conflicts)
46 | html = html.replace(/(?$1');
47 | html = html.replace(/(?$1');
48 |
49 | // Links
50 | html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1');
51 |
52 | // Lists with proper text color
53 | html = html.replace(/^\* (.+)$/gim, '$1');
54 | html = html.replace(/^- (.+)$/gim, '$1');
55 | html = html.replace(/^\d+\. (.+)$/gim, '$1');
56 |
57 | // Blockquotes
58 | html = html.replace(/^> (.+)$/gim, '$1
');
59 |
60 | // Paragraphs with text color
61 | html = html.split('\n\n').map(para => {
62 | para = para.trim();
63 | if (para && !para.startsWith('<')) {
64 | return `${para}
`;
65 | }
66 | return para;
67 | }).join('\n');
68 |
69 | // Wrap lists with proper styling
70 | html = html.replace(/(]*>.*<\/li>\n?)+/g, (match) => {
71 | if (match.includes('list-decimal')) {
72 | return `${match}
`;
73 | }
74 | return ``;
75 | });
76 |
77 | return html;
78 | };
79 |
80 | return (
81 |
85 | );
86 | }
--------------------------------------------------------------------------------
/stores/chatStore.ts:
--------------------------------------------------------------------------------
1 | import { create } from 'zustand'
2 | import { ChatMessage, ChatSession } from '@/types/chat'
3 | import { Article } from '@/types/article'
4 |
5 | interface ChatState {
6 | // State
7 | currentSession: ChatSession | null
8 | sessions: ChatSession[]
9 | isLoading: boolean
10 | error: string | null
11 | currentArticle: Article | null
12 |
13 | // Actions
14 | createSession: (articleId?: string) => void
15 | addMessage: (message: Omit) => void
16 | setCurrentArticle: (article: Article | null) => void
17 | setLoading: (loading: boolean) => void
18 | setError: (error: string | null) => void
19 | clearSession: () => void
20 | loadSession: (sessionId: string) => void
21 | deleteSession: (sessionId: string) => void
22 | updateMessage: (messageId: string, content: string) => void
23 | }
24 |
25 | const generateId = () => Math.random().toString(36).substring(2) + Date.now().toString(36)
26 |
27 | export const useChatStore = create((set, get) => ({
28 | // Initial state
29 | currentSession: null,
30 | sessions: [],
31 | isLoading: false,
32 | error: null,
33 | currentArticle: null,
34 |
35 | // Create new chat session
36 | createSession: (articleId?: string) => {
37 | const newSession: ChatSession = {
38 | id: generateId(),
39 | messages: [],
40 | articleId,
41 | createdAt: new Date(),
42 | updatedAt: new Date()
43 | }
44 |
45 | set(state => ({
46 | currentSession: newSession,
47 | sessions: [...state.sessions, newSession],
48 | error: null
49 | }))
50 | },
51 |
52 | // Add message to current session
53 | addMessage: (message) => {
54 | const state = get()
55 | if (!state.currentSession) {
56 | state.createSession()
57 | }
58 |
59 | const newMessage: ChatMessage = {
60 | ...message,
61 | id: generateId(),
62 | timestamp: new Date()
63 | }
64 |
65 | set(state => {
66 | if (!state.currentSession) return state
67 |
68 | return {
69 | currentSession: {
70 | ...state.currentSession,
71 | messages: [...state.currentSession.messages, newMessage],
72 | updatedAt: new Date()
73 | },
74 | sessions: state.sessions.map(session =>
75 | session.id === state.currentSession?.id
76 | ? {
77 | ...session,
78 | messages: [...session.messages, newMessage],
79 | updatedAt: new Date()
80 | }
81 | : session
82 | )
83 | }
84 | })
85 | },
86 |
87 | // Set current article context
88 | setCurrentArticle: (article) => {
89 | set({ currentArticle: article })
90 | },
91 |
92 | // Set loading state
93 | setLoading: (loading) => {
94 | set({ isLoading: loading })
95 | },
96 |
97 | // Set error state
98 | setError: (error) => {
99 | set({ error, isLoading: false })
100 | },
101 |
102 | // Clear current session
103 | clearSession: () => {
104 | set({
105 | currentSession: null,
106 | error: null,
107 | currentArticle: null
108 | })
109 | },
110 |
111 | // Load existing session
112 | loadSession: (sessionId) => {
113 | set(state => {
114 | const session = state.sessions.find(s => s.id === sessionId)
115 | return session ? { currentSession: session, error: null } : state
116 | })
117 | },
118 |
119 | // Delete session
120 | deleteSession: (sessionId) => {
121 | set(state => ({
122 | sessions: state.sessions.filter(s => s.id !== sessionId),
123 | currentSession: state.currentSession?.id === sessionId ? null : state.currentSession
124 | }))
125 | },
126 |
127 | // Update message content
128 | updateMessage: (messageId, content) => {
129 | set(state => {
130 | if (!state.currentSession) return state
131 |
132 | const updatedMessages = state.currentSession.messages.map(msg =>
133 | msg.id === messageId ? { ...msg, content } : msg
134 | )
135 |
136 | return {
137 | currentSession: {
138 | ...state.currentSession,
139 | messages: updatedMessages,
140 | updatedAt: new Date()
141 | },
142 | sessions: state.sessions.map(session =>
143 | session.id === state.currentSession?.id
144 | ? {
145 | ...session,
146 | messages: updatedMessages,
147 | updatedAt: new Date()
148 | }
149 | : session
150 | )
151 | }
152 | })
153 | }
154 | }))
--------------------------------------------------------------------------------
/app/api/claude/route.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from 'next/server';
2 | import { AIAssistant, UserPreferences, Message } from '@/lib/ai-assistant';
3 | import { TextAnalysis } from '@/lib/text-analysis';
4 | import { rateLimit, getClientIdentifier } from '@/lib/rate-limiter';
5 | import { logger } from '@/lib/logger';
6 |
7 | export async function POST(request: NextRequest) {
8 | try {
9 | // Rate limiting for Claude API
10 | const clientId = getClientIdentifier(request);
11 | const { success, remaining, reset } = await rateLimit(clientId, 'claude');
12 |
13 | if (!success) {
14 | return NextResponse.json(
15 | {
16 | error: 'AI rate limit exceeded. Please wait before making more requests.',
17 | retryAfter: Math.ceil((reset - Date.now()) / 1000)
18 | },
19 | {
20 | status: 429,
21 | headers: {
22 | 'Retry-After': String(Math.ceil((reset - Date.now()) / 1000)),
23 | 'X-RateLimit-Remaining': '0',
24 | 'X-RateLimit-Reset': new Date(reset).toISOString()
25 | }
26 | }
27 | );
28 | }
29 |
30 | const body = await request.json();
31 | const { articleContent, userMessage, conversationHistory = [], userPreferences = {} } = body;
32 |
33 | // Convert conversation history to the format expected by AI Assistant
34 | const messages: Message[] = conversationHistory.map((msg: any) => ({
35 | id: msg.id || Date.now().toString(),
36 | role: msg.role,
37 | content: msg.content,
38 | timestamp: new Date(msg.timestamp || Date.now())
39 | }));
40 |
41 | // Initialize user preferences with defaults
42 | const preferences: UserPreferences = {
43 | autoSuggest: true,
44 | preserveVoice: true,
45 | ...userPreferences
46 | };
47 |
48 | // Create AI Assistant instance
49 | const assistant = new AIAssistant(articleContent, messages, preferences);
50 |
51 | // Process the user's request
52 | const response = await assistant.processRequest(userMessage);
53 |
54 | // Get enhanced metadata
55 | const articleMetadata = assistant.getArticleMetadata();
56 | const textMetrics = TextAnalysis.calculateMetrics(articleContent);
57 | const sentimentAnalysis = TextAnalysis.analyzeSentiment(articleContent);
58 | const qualityMetrics = TextAnalysis.analyzeQuality(articleContent);
59 | // Prepare enhanced response
60 | const apiResponse = {
61 | message: response.message,
62 | suggestedContent: response.suggestedContent,
63 | hasSuggestion: response.hasSuggestion,
64 | commands: response.commands,
65 | metadata: {
66 | ...response.metadata,
67 | articleAnalysis: {
68 | wordCount: articleMetadata.wordCount,
69 | readabilityScore: articleMetadata.readabilityScore,
70 | tone: articleMetadata.tone,
71 | sentiment: articleMetadata.sentiment,
72 | topics: articleMetadata.topics,
73 | keywords: articleMetadata.keywords
74 | },
75 | textMetrics: {
76 | readabilityScores: textMetrics.readabilityScores,
77 | complexWordCount: textMetrics.complexWordCount,
78 | averageSentenceLength: textMetrics.averageSentenceLength
79 | },
80 | sentiment: sentimentAnalysis,
81 | quality: qualityMetrics
82 | },
83 | analysis: response.analysis,
84 | usage: {
85 | input_tokens: 150 + (conversationHistory.length * 50),
86 | output_tokens: 250,
87 | total_tokens: 400 + (conversationHistory.length * 50)
88 | }
89 | };
90 |
91 | console.log('Sending enhanced AI response:', {
92 | hasSuggestion: response.hasSuggestion,
93 | commandType: response.commands?.[0]?.action,
94 | confidence: response.metadata?.confidence,
95 | suggestedContentLength: response.suggestedContent?.length,
96 | messageLength: response.message.length,
97 | articleTone: articleMetadata.tone,
98 | readabilityScore: articleMetadata.readabilityScore
99 | });
100 |
101 | // Simulate a slight delay for more natural interaction
102 | await new Promise(resolve => setTimeout(resolve, 300));
103 |
104 | return NextResponse.json(apiResponse);
105 | } catch (error) {
106 | console.error('Error in Claude route:', error);
107 | return NextResponse.json(
108 | { error: 'Failed to process request' },
109 | { status: 500 }
110 | );
111 | }
112 | }
113 |
114 | export async function OPTIONS(request: NextRequest) {
115 | return new NextResponse(null, {
116 | status: 200,
117 | headers: {
118 | 'Access-Control-Allow-Origin': '*',
119 | 'Access-Control-Allow-Methods': 'POST, OPTIONS',
120 | 'Access-Control-Allow-Headers': 'Content-Type, Authorization',
121 | },
122 | });
123 | }
--------------------------------------------------------------------------------
/scripts/debug-registration.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | const { createClient } = require('@supabase/supabase-js');
4 | require('dotenv').config({ path: '.env.local' });
5 |
6 | // Get environment variables
7 | const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
8 | const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
9 | const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
10 |
11 | console.log('Debug Registration Issues\n');
12 | console.log('Using URL:', supabaseUrl);
13 | console.log('Using Service Role Key:', serviceRoleKey ? 'Yes' : 'No');
14 |
15 | // Create clients with both keys
16 | const anonClient = createClient(supabaseUrl, supabaseAnonKey);
17 | const serviceClient = createClient(supabaseUrl, serviceRoleKey);
18 |
19 | async function testWithClient(client, clientName) {
20 | console.log(`\n--- Testing with ${clientName} ---`);
21 |
22 | // 1. Check if we can select from users table
23 | console.log('1. Testing SELECT on users table:');
24 | try {
25 | const { data, error, count } = await client
26 | .from('users')
27 | .select('*', { count: 'exact' });
28 |
29 | if (error) {
30 | console.log(` ❌ Error: ${error.message}`);
31 | } else {
32 | console.log(` ✅ Success! Found ${count} users`);
33 | if (data && data.length > 0) {
34 | console.log(' Existing users:');
35 | data.forEach(u => console.log(` - ${u.email} (ID: ${u.id})`));
36 | }
37 | }
38 | } catch (err) {
39 | console.log(` ❌ Exception: ${err.message}`);
40 | }
41 |
42 | // 2. Check if we can insert
43 | console.log('\n2. Testing INSERT on users table:');
44 | const testEmail = `test-${Date.now()}@example.com`;
45 | try {
46 | const { data, error } = await client
47 | .from('users')
48 | .insert({
49 | email: testEmail,
50 | password: 'hashed-password-test',
51 | name: 'Test User',
52 | created_at: new Date().toISOString(),
53 | updated_at: new Date().toISOString()
54 | })
55 | .select()
56 | .single();
57 |
58 | if (error) {
59 | console.log(` ❌ Error: ${error.message}`);
60 | if (error.details) console.log(` Details: ${error.details}`);
61 | if (error.hint) console.log(` Hint: ${error.hint}`);
62 | } else {
63 | console.log(` ✅ Success! Created user: ${data.email}`);
64 |
65 | // Clean up - delete the test user
66 | await client.from('users').delete().eq('id', data.id);
67 | }
68 | } catch (err) {
69 | console.log(` ❌ Exception: ${err.message}`);
70 | }
71 |
72 | // 3. Check RLS status
73 | console.log('\n3. Checking RLS policies:');
74 | try {
75 | // This will only work with service role key
76 | const { data, error } = await client
77 | .rpc('get_policies', { table_name: 'users' })
78 | .single();
79 |
80 | if (error) {
81 | console.log(` ℹ️ Cannot check policies with this client`);
82 | } else {
83 | console.log(` Policies: ${JSON.stringify(data)}`);
84 | }
85 | } catch (err) {
86 | // Expected to fail with anon key
87 | }
88 | }
89 |
90 | async function checkSpecificUser(email) {
91 | console.log(`\n--- Checking for user: ${email} ---`);
92 |
93 | // Try with both clients
94 | for (const [client, name] of [[anonClient, 'Anon'], [serviceClient, 'Service']]) {
95 | console.log(`\nWith ${name} client:`);
96 | try {
97 | const { data, error } = await client
98 | .from('users')
99 | .select('*')
100 | .eq('email', email)
101 | .single();
102 |
103 | if (error && error.code === 'PGRST116') {
104 | console.log(' User not found');
105 | } else if (error) {
106 | console.log(` Error: ${error.message}`);
107 | } else {
108 | console.log(` ✅ User found!`);
109 | console.log(` ID: ${data.id}`);
110 | console.log(` Email: ${data.email}`);
111 | console.log(` Created: ${data.created_at}`);
112 | }
113 | } catch (err) {
114 | console.log(` Exception: ${err.message}`);
115 | }
116 | }
117 | }
118 |
119 | // Run tests
120 | async function main() {
121 | await testWithClient(anonClient, 'Anon Key Client');
122 | await testWithClient(serviceClient, 'Service Role Key Client');
123 | await checkSpecificUser('xeliadx@gmail.com');
124 |
125 | console.log('\n--- Summary ---');
126 | console.log('If inserts fail with "row-level security policy" error:');
127 | console.log(' → RLS is still enabled on the users table');
128 | console.log(' → Run this SQL in Supabase: ALTER TABLE users DISABLE ROW LEVEL SECURITY;');
129 | console.log('\nIf selects return no data with anon key but work with service key:');
130 | console.log(' → RLS policies are blocking reads');
131 | }
132 |
133 | main().catch(console.error);
--------------------------------------------------------------------------------
/scripts/setup-supabase-db.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # Colors for output
4 | RED='\033[0;31m'
5 | GREEN='\033[0;32m'
6 | YELLOW='\033[1;33m'
7 | NC='\033[0m' # No Color
8 |
9 | echo -e "${GREEN}=== Supabase Database Setup Script ===${NC}\n"
10 |
11 | # Check if .env.local exists
12 | if [ ! -f .env.local ]; then
13 | echo -e "${RED}Error: .env.local file not found!${NC}"
14 | echo "Please create .env.local with your Supabase credentials"
15 | exit 1
16 | fi
17 |
18 | # Load environment variables from .env.local
19 | export $(cat .env.local | grep -v '^#' | xargs)
20 |
21 | # Check required environment variables
22 | if [ -z "$NEXT_PUBLIC_SUPABASE_URL" ] || [ -z "$SUPABASE_SERVICE_ROLE_KEY" ]; then
23 | echo -e "${RED}Error: Missing required environment variables!${NC}"
24 | echo "Please ensure NEXT_PUBLIC_SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY are set in .env.local"
25 | exit 1
26 | fi
27 |
28 | # Extract project ref from Supabase URL
29 | PROJECT_REF=$(echo $NEXT_PUBLIC_SUPABASE_URL | sed -n 's/https:\/\/\(.*\)\.supabase\.co.*/\1/p')
30 |
31 | if [ -z "$PROJECT_REF" ]; then
32 | echo -e "${RED}Error: Could not extract project reference from Supabase URL${NC}"
33 | echo "URL should be in format: https://yourproject.supabase.co"
34 | exit 1
35 | fi
36 |
37 | echo -e "${YELLOW}Project Reference: ${PROJECT_REF}${NC}"
38 | echo -e "${YELLOW}Supabase URL: ${NEXT_PUBLIC_SUPABASE_URL}${NC}\n"
39 |
40 | # Check if psql is installed
41 | if ! command -v psql &> /dev/null; then
42 | echo -e "${RED}Error: PostgreSQL client (psql) is not installed!${NC}"
43 | echo "Please install PostgreSQL client:"
44 | echo " Ubuntu/Debian: sudo apt-get install postgresql-client"
45 | echo " macOS: brew install postgresql"
46 | echo " Windows: Download from https://www.postgresql.org/download/"
47 | exit 1
48 | fi
49 |
50 | # Database connection string
51 | DB_URL="postgresql://postgres.${PROJECT_REF}:${SUPABASE_SERVICE_ROLE_KEY}@aws-0-us-west-1.pooler.supabase.com:6543/postgres"
52 |
53 | # Test connection
54 | echo -e "${YELLOW}Testing database connection...${NC}"
55 | PGPASSWORD="${SUPABASE_SERVICE_ROLE_KEY}" psql "${DB_URL}" -c "SELECT version();" > /dev/null 2>&1
56 |
57 | if [ $? -ne 0 ]; then
58 | echo -e "${RED}Error: Could not connect to Supabase database!${NC}"
59 | echo "Please check your credentials and try again."
60 | exit 1
61 | fi
62 |
63 | echo -e "${GREEN}✓ Successfully connected to Supabase database${NC}\n"
64 |
65 | # Get migration files
66 | MIGRATION_DIR="supabase/migrations"
67 | if [ ! -d "$MIGRATION_DIR" ]; then
68 | echo -e "${RED}Error: Migration directory not found!${NC}"
69 | echo "Expected directory: $MIGRATION_DIR"
70 | exit 1
71 | fi
72 |
73 | # Run migrations in order
74 | echo -e "${YELLOW}Running migrations...${NC}\n"
75 |
76 | for migration in $(ls $MIGRATION_DIR/*.sql | sort); do
77 | filename=$(basename "$migration")
78 | echo -e "${YELLOW}Running migration: $filename${NC}"
79 |
80 | # Run the migration
81 | PGPASSWORD="${SUPABASE_SERVICE_ROLE_KEY}" psql "${DB_URL}" -f "$migration" 2>&1 | while IFS= read -r line; do
82 | if [[ $line == *"ERROR"* ]]; then
83 | echo -e "${RED}$line${NC}"
84 | elif [[ $line == *"NOTICE"* ]]; then
85 | echo -e "${YELLOW}$line${NC}"
86 | else
87 | echo "$line"
88 | fi
89 | done
90 |
91 | if [ ${PIPESTATUS[0]} -eq 0 ]; then
92 | echo -e "${GREEN}✓ $filename completed successfully${NC}\n"
93 | else
94 | echo -e "${RED}✗ $filename failed${NC}\n"
95 | echo -e "${YELLOW}You may need to fix this migration and run it manually${NC}"
96 | fi
97 | done
98 |
99 | # Verify tables were created
100 | echo -e "${YELLOW}Verifying database setup...${NC}\n"
101 |
102 | TABLES=("users" "articles" "workers")
103 | ALL_GOOD=true
104 |
105 | for table in "${TABLES[@]}"; do
106 | result=$(PGPASSWORD="${SUPABASE_SERVICE_ROLE_KEY}" psql "${DB_URL}" -t -c "SELECT EXISTS (SELECT FROM information_schema.tables WHERE table_name = '$table');" 2>/dev/null | tr -d '[:space:]')
107 |
108 | if [ "$result" = "t" ]; then
109 | echo -e "${GREEN}✓ Table '$table' exists${NC}"
110 | else
111 | echo -e "${RED}✗ Table '$table' not found${NC}"
112 | ALL_GOOD=false
113 | fi
114 | done
115 |
116 | echo ""
117 |
118 | if [ "$ALL_GOOD" = true ]; then
119 | echo -e "${GREEN}=== Database setup completed successfully! ===${NC}"
120 | echo -e "\nYou can now:"
121 | echo -e " 1. Register new users at http://localhost:3000/login"
122 | echo -e " 2. Create and manage articles"
123 | echo -e " 3. Track user activity"
124 | else
125 | echo -e "${RED}=== Some tables are missing ===${NC}"
126 | echo -e "\nPlease check the migration errors above and fix them."
127 | echo -e "You can also run migrations manually in the Supabase SQL Editor."
128 | fi
--------------------------------------------------------------------------------
/lib/error-handler.ts:
--------------------------------------------------------------------------------
1 | import { logger } from './logger';
2 |
3 | export class AppError extends Error {
4 | public readonly statusCode: number;
5 | public readonly isOperational: boolean;
6 | public readonly code?: string;
7 |
8 | constructor(
9 | message: string,
10 | statusCode: number = 500,
11 | isOperational: boolean = true,
12 | code?: string
13 | ) {
14 | super(message);
15 | this.statusCode = statusCode;
16 | this.isOperational = isOperational;
17 | this.code = code;
18 |
19 | Error.captureStackTrace(this, this.constructor);
20 | }
21 | }
22 |
23 | export class ValidationError extends AppError {
24 | constructor(message: string) {
25 | super(message, 400, true, 'VALIDATION_ERROR');
26 | }
27 | }
28 |
29 | export class AuthenticationError extends AppError {
30 | constructor(message: string = 'Authentication failed') {
31 | super(message, 401, true, 'AUTHENTICATION_ERROR');
32 | }
33 | }
34 |
35 | export class AuthorizationError extends AppError {
36 | constructor(message: string = 'Access denied') {
37 | super(message, 403, true, 'AUTHORIZATION_ERROR');
38 | }
39 | }
40 |
41 | export class NotFoundError extends AppError {
42 | constructor(resource: string) {
43 | super(`${resource} not found`, 404, true, 'NOT_FOUND');
44 | }
45 | }
46 |
47 | export class ConflictError extends AppError {
48 | constructor(message: string) {
49 | super(message, 409, true, 'CONFLICT');
50 | }
51 | }
52 |
53 | export class RateLimitError extends AppError {
54 | constructor(message: string = 'Too many requests') {
55 | super(message, 429, true, 'RATE_LIMIT_EXCEEDED');
56 | }
57 | }
58 |
59 | export class ExternalServiceError extends AppError {
60 | constructor(service: string, originalError?: any) {
61 | super(`External service error: ${service}`, 503, true, 'EXTERNAL_SERVICE_ERROR');
62 | if (originalError) {
63 | logger.error(`External service error details for ${service}`, originalError);
64 | }
65 | }
66 | }
67 |
68 | // Error response formatter
69 | export function formatErrorResponse(error: Error | AppError): {
70 | error: string;
71 | message: string;
72 | code?: string;
73 | statusCode: number;
74 | details?: any;
75 | } {
76 | if (error instanceof AppError) {
77 | return {
78 | error: error.name,
79 | message: error.message,
80 | code: error.code,
81 | statusCode: error.statusCode,
82 | details: (typeof process !== 'undefined' && process.env.NODE_ENV === 'development') ? {
83 | stack: error.stack
84 | } : undefined
85 | };
86 | }
87 |
88 | // For non-operational errors, log them and return a generic message
89 | logger.error('Unexpected error', error);
90 |
91 | return {
92 | error: 'InternalServerError',
93 | message: (typeof process !== 'undefined' && process.env.NODE_ENV === 'development')
94 | ? error.message
95 | : 'An unexpected error occurred',
96 | statusCode: 500,
97 | details: (typeof process !== 'undefined' && process.env.NODE_ENV === 'development') ? {
98 | stack: error.stack
99 | } : undefined
100 | };
101 | }
102 |
103 | // Async error wrapper for API routes
104 | export function asyncHandler Promise>(
105 | fn: T
106 | ): T {
107 | return (async (...args: Parameters) => {
108 | try {
109 | return await fn(...args);
110 | } catch (error) {
111 | if (error instanceof AppError) {
112 | logger.warn(`Operational error: ${error.message}`, {
113 | code: error.code,
114 | statusCode: error.statusCode
115 | });
116 | } else {
117 | logger.error('Unhandled error in async handler', error);
118 | }
119 | throw error;
120 | }
121 | }) as T;
122 | }
123 |
124 | // Global error handler for unhandled errors
125 | export function setupGlobalErrorHandlers() {
126 | if (typeof window === 'undefined') {
127 | // Server-side error handlers
128 | process.on('unhandledRejection', (reason: any, promise: Promise) => {
129 | logger.error('Unhandled Promise Rejection', reason, {
130 | promise: promise.toString()
131 | });
132 | });
133 |
134 | process.on('uncaughtException', (error: Error) => {
135 | logger.error('Uncaught Exception', error);
136 | // Give the logger time to write
137 | setTimeout(() => {
138 | process.exit(1);
139 | }, 1000);
140 | });
141 | } else {
142 | // Client-side error handlers
143 | window.addEventListener('unhandledrejection', (event) => {
144 | logger.error('Unhandled promise rejection', event.reason);
145 | });
146 |
147 | window.addEventListener('error', (event) => {
148 | logger.error('Global error', event.error || event.message, {
149 | filename: event.filename,
150 | lineno: event.lineno,
151 | colno: event.colno
152 | });
153 | });
154 | }
155 | }
--------------------------------------------------------------------------------
/app/api/health/route.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from 'next/server';
2 | import { createClient } from '@supabase/supabase-js';
3 | import { logger } from '@/lib/logger';
4 | import { validateEnvironment } from '@/lib/env-validation';
5 |
6 | interface HealthStatus {
7 | status: 'healthy' | 'unhealthy';
8 | timestamp: string;
9 | version: string;
10 | checks: {
11 | database: {
12 | status: 'ok' | 'error';
13 | message?: string;
14 | responseTime?: number;
15 | };
16 | environment: {
17 | status: 'ok' | 'error';
18 | errors?: string[];
19 | };
20 | memory: {
21 | status: 'ok' | 'warning' | 'error';
22 | usage: {
23 | heapUsed: number;
24 | heapTotal: number;
25 | rss: number;
26 | external: number;
27 | };
28 | };
29 | };
30 | }
31 |
32 | export async function GET() {
33 | const startTime = Date.now();
34 |
35 | try {
36 | const health: HealthStatus = {
37 | status: 'healthy',
38 | timestamp: new Date().toISOString(),
39 | version: process.env.npm_package_version || '1.0.0',
40 | checks: {
41 | database: {
42 | status: 'ok'
43 | },
44 | environment: {
45 | status: 'ok'
46 | },
47 | memory: {
48 | status: 'ok',
49 | usage: {
50 | heapUsed: 0,
51 | heapTotal: 0,
52 | rss: 0,
53 | external: 0
54 | }
55 | }
56 | }
57 | };
58 |
59 | // Check environment variables
60 | const envValidation = validateEnvironment();
61 | if (!envValidation.valid) {
62 | health.checks.environment.status = 'error';
63 | health.checks.environment.errors = envValidation.errors;
64 | health.status = 'unhealthy';
65 | }
66 |
67 | // Check database connection
68 | try {
69 | const dbStartTime = Date.now();
70 | const supabase = createClient(
71 | process.env.NEXT_PUBLIC_SUPABASE_URL!,
72 | process.env.SUPABASE_SERVICE_ROLE_KEY!
73 | );
74 |
75 | // Simple query to test connection
76 | const { error } = await supabase.from('articles').select('id').limit(1);
77 |
78 | const dbResponseTime = Date.now() - dbStartTime;
79 |
80 | if (error) {
81 | health.checks.database.status = 'error';
82 | health.checks.database.message = 'Database query failed';
83 | health.status = 'unhealthy';
84 | logger.error('Health check database error', error);
85 | } else {
86 | health.checks.database.responseTime = dbResponseTime;
87 |
88 | // Warn if database is slow
89 | if (dbResponseTime > 1000) {
90 | logger.warn('Database response time is slow', { responseTime: dbResponseTime });
91 | }
92 | }
93 | } catch (error) {
94 | health.checks.database.status = 'error';
95 | health.checks.database.message = 'Database connection failed';
96 | health.status = 'unhealthy';
97 | logger.error('Health check database connection error', error);
98 | }
99 |
100 | // Check memory usage
101 | const memoryUsage = process.memoryUsage();
102 | health.checks.memory.usage = {
103 | heapUsed: Math.round(memoryUsage.heapUsed / 1024 / 1024), // MB
104 | heapTotal: Math.round(memoryUsage.heapTotal / 1024 / 1024), // MB
105 | rss: Math.round(memoryUsage.rss / 1024 / 1024), // MB
106 | external: Math.round(memoryUsage.external / 1024 / 1024) // MB
107 | };
108 |
109 | // Set memory status based on usage
110 | const heapPercentage = (memoryUsage.heapUsed / memoryUsage.heapTotal) * 100;
111 | if (heapPercentage > 90) {
112 | health.checks.memory.status = 'error';
113 | health.status = 'unhealthy';
114 | } else if (heapPercentage > 75) {
115 | health.checks.memory.status = 'warning';
116 | }
117 |
118 | const totalTime = Date.now() - startTime;
119 |
120 | logger.info('Health check completed', {
121 | status: health.status,
122 | duration: totalTime,
123 | checks: {
124 | database: health.checks.database.status,
125 | environment: health.checks.environment.status,
126 | memory: health.checks.memory.status
127 | }
128 | });
129 |
130 | return NextResponse.json(health, {
131 | status: health.status === 'healthy' ? 200 : 503,
132 | headers: {
133 | 'Cache-Control': 'no-cache, no-store, must-revalidate',
134 | 'X-Response-Time': `${totalTime}ms`
135 | }
136 | });
137 | } catch (error) {
138 | logger.error('Health check failed', error);
139 |
140 | return NextResponse.json(
141 | {
142 | status: 'unhealthy',
143 | timestamp: new Date().toISOString(),
144 | error: 'Health check failed'
145 | },
146 | {
147 | status: 503,
148 | headers: {
149 | 'Cache-Control': 'no-cache, no-store, must-revalidate'
150 | }
151 | }
152 | );
153 | }
154 | }
--------------------------------------------------------------------------------
/hooks/useLocalStorage.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useCallback } from 'react'
2 |
3 | type SetValue = T | ((prevValue: T) => T)
4 |
5 | export function useLocalStorage(
6 | key: string,
7 | initialValue: T,
8 | options?: {
9 | serialize?: (value: T) => string
10 | deserialize?: (value: string) => T
11 | }
12 | ): [T, (value: SetValue) => void, () => void] {
13 | const {
14 | serialize = JSON.stringify,
15 | deserialize = JSON.parse
16 | } = options || {}
17 |
18 | // Get from local storage then parse stored json or return initialValue
19 | const readValue = useCallback((): T => {
20 | // Prevent build error "window is undefined"
21 | if (typeof window === 'undefined') {
22 | return initialValue
23 | }
24 |
25 | try {
26 | const item = window.localStorage.getItem(key)
27 | return item ? deserialize(item) : initialValue
28 | } catch (error) {
29 | console.warn(`Error reading localStorage key "${key}":`, error)
30 | return initialValue
31 | }
32 | }, [initialValue, key, deserialize])
33 |
34 | const [storedValue, setStoredValue] = useState(readValue)
35 |
36 | // Return a wrapped version of useState's setter function that ...
37 | // ... persists the new value to localStorage.
38 | const setValue = useCallback((value: SetValue) => {
39 | // Prevent build error "window is undefined"
40 | if (typeof window === 'undefined') {
41 | console.warn(`Tried to set localStorage key "${key}" but window is undefined`)
42 | return
43 | }
44 |
45 | try {
46 | // Allow value to be a function so we have the same API as useState
47 | const newValue = value instanceof Function ? value(storedValue) : value
48 |
49 | // Save to local storage
50 | window.localStorage.setItem(key, serialize(newValue))
51 |
52 | // Save state
53 | setStoredValue(newValue)
54 |
55 | // We dispatch a custom event so every useLocalStorage hook is notified
56 | window.dispatchEvent(new Event('local-storage'))
57 | } catch (error) {
58 | console.warn(`Error setting localStorage key "${key}":`, error)
59 | }
60 | }, [key, serialize, storedValue])
61 |
62 | // Remove value from local storage
63 | const removeValue = useCallback(() => {
64 | // Prevent build error "window is undefined"
65 | if (typeof window === 'undefined') {
66 | console.warn(`Tried to remove localStorage key "${key}" but window is undefined`)
67 | return
68 | }
69 |
70 | try {
71 | window.localStorage.removeItem(key)
72 | setStoredValue(initialValue)
73 |
74 | // We dispatch a custom event so every useLocalStorage hook is notified
75 | window.dispatchEvent(new Event('local-storage'))
76 | } catch (error) {
77 | console.warn(`Error removing localStorage key "${key}":`, error)
78 | }
79 | }, [initialValue, key])
80 |
81 | useEffect(() => {
82 | setStoredValue(readValue())
83 | }, [readValue])
84 |
85 | useEffect(() => {
86 | const handleStorageChange = () => {
87 | setStoredValue(readValue())
88 | }
89 |
90 | // This only works for other documents, not the current one
91 | window.addEventListener('storage', handleStorageChange)
92 |
93 | // This is a custom event, triggered in setValue and removeValue
94 | window.addEventListener('local-storage', handleStorageChange)
95 |
96 | return () => {
97 | window.removeEventListener('storage', handleStorageChange)
98 | window.removeEventListener('local-storage', handleStorageChange)
99 | }
100 | }, [readValue])
101 |
102 | return [storedValue, setValue, removeValue]
103 | }
104 |
105 | // Specialized hook for storing chat sessions
106 | export function useChatSessionStorage() {
107 | return useLocalStorage('xfunnel-chat-sessions', [], {
108 | serialize: (value) => JSON.stringify(value),
109 | deserialize: (value) => {
110 | try {
111 | const parsed = JSON.parse(value)
112 | // Convert date strings back to Date objects
113 | return parsed.map((session: any) => ({
114 | ...session,
115 | createdAt: new Date(session.createdAt),
116 | updatedAt: new Date(session.updatedAt),
117 | messages: session.messages.map((msg: any) => ({
118 | ...msg,
119 | timestamp: new Date(msg.timestamp)
120 | }))
121 | }))
122 | } catch {
123 | return []
124 | }
125 | }
126 | })
127 | }
128 |
129 | // Specialized hook for storing user preferences
130 | interface UserPreferences {
131 | theme?: 'light' | 'dark' | 'system'
132 | autoSaveEnabled?: boolean
133 | autoSaveInterval?: number
134 | defaultArticleStatus?: 'draft' | 'final'
135 | chatModel?: string
136 | chatTemperature?: number
137 | }
138 |
139 | export function useUserPreferences() {
140 | const defaultPreferences: UserPreferences = {
141 | theme: 'system',
142 | autoSaveEnabled: true,
143 | autoSaveInterval: 30000,
144 | defaultArticleStatus: 'draft',
145 | chatModel: 'claude-3-sonnet-20240229',
146 | chatTemperature: 0.7
147 | }
148 |
149 | return useLocalStorage('xfunnel-preferences', defaultPreferences)
150 | }
--------------------------------------------------------------------------------
/hooks/useWebSocket.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState, useCallback } from 'react'
2 | import toast from 'react-hot-toast'
3 |
4 | interface UseWebSocketOptions {
5 | url: string
6 | onMessage?: (data: any) => void
7 | onOpen?: () => void
8 | onClose?: () => void
9 | onError?: (error: Event) => void
10 | reconnect?: boolean
11 | reconnectInterval?: number
12 | reconnectAttempts?: number
13 | }
14 |
15 | interface UseWebSocketReturn {
16 | isConnected: boolean
17 | sendMessage: (data: any) => void
18 | connect: () => void
19 | disconnect: () => void
20 | lastMessage: any
21 | }
22 |
23 | export function useWebSocket(options: UseWebSocketOptions): UseWebSocketReturn {
24 | const {
25 | url,
26 | onMessage,
27 | onOpen,
28 | onClose,
29 | onError,
30 | reconnect = true,
31 | reconnectInterval = 3000,
32 | reconnectAttempts = 5
33 | } = options
34 |
35 | const [isConnected, setIsConnected] = useState(false)
36 | const [lastMessage, setLastMessage] = useState(null)
37 | const wsRef = useRef(null)
38 | const reconnectCountRef = useRef(0)
39 | const reconnectTimeoutRef = useRef(null)
40 |
41 | const connect = useCallback(() => {
42 | try {
43 | // Close existing connection
44 | if (wsRef.current?.readyState === WebSocket.OPEN) {
45 | wsRef.current.close()
46 | }
47 |
48 | // Create new WebSocket connection
49 | wsRef.current = new WebSocket(url)
50 |
51 | wsRef.current.onopen = () => {
52 | setIsConnected(true)
53 | reconnectCountRef.current = 0
54 | onOpen?.()
55 | toast.success('Connected to real-time updates')
56 | }
57 |
58 | wsRef.current.onmessage = (event) => {
59 | try {
60 | const data = JSON.parse(event.data)
61 | setLastMessage(data)
62 | onMessage?.(data)
63 | } catch (error) {
64 | console.error('Failed to parse WebSocket message:', error)
65 | }
66 | }
67 |
68 | wsRef.current.onclose = () => {
69 | setIsConnected(false)
70 | onClose?.()
71 |
72 | // Attempt to reconnect
73 | if (reconnect && reconnectCountRef.current < reconnectAttempts) {
74 | reconnectCountRef.current++
75 | toast.error(`Connection lost. Reconnecting... (${reconnectCountRef.current}/${reconnectAttempts})`)
76 |
77 | reconnectTimeoutRef.current = setTimeout(() => {
78 | connect()
79 | }, reconnectInterval)
80 | } else if (reconnectCountRef.current >= reconnectAttempts) {
81 | toast.error('Failed to reconnect. Please refresh the page.')
82 | }
83 | }
84 |
85 | wsRef.current.onerror = (error) => {
86 | console.error('WebSocket error:', error)
87 | onError?.(error)
88 | }
89 | } catch (error) {
90 | console.error('Failed to create WebSocket connection:', error)
91 | toast.error('Failed to connect to real-time updates')
92 | }
93 | }, [url, onMessage, onOpen, onClose, onError, reconnect, reconnectInterval, reconnectAttempts])
94 |
95 | const disconnect = useCallback(() => {
96 | if (reconnectTimeoutRef.current) {
97 | clearTimeout(reconnectTimeoutRef.current)
98 | reconnectTimeoutRef.current = null
99 | }
100 |
101 | if (wsRef.current) {
102 | wsRef.current.close()
103 | wsRef.current = null
104 | }
105 |
106 | setIsConnected(false)
107 | }, [])
108 |
109 | const sendMessage = useCallback((data: any) => {
110 | if (wsRef.current?.readyState === WebSocket.OPEN) {
111 | wsRef.current.send(JSON.stringify(data))
112 | } else {
113 | console.warn('WebSocket is not connected')
114 | toast.error('Not connected. Please wait...')
115 | }
116 | }, [])
117 |
118 | // Connect on mount
119 | useEffect(() => {
120 | connect()
121 |
122 | // Cleanup on unmount
123 | return () => {
124 | disconnect()
125 | }
126 | }, []) // Empty deps intentionally - we only want to connect once on mount
127 |
128 | return {
129 | isConnected,
130 | sendMessage,
131 | connect,
132 | disconnect,
133 | lastMessage
134 | }
135 | }
136 |
137 | // Hook for real-time article updates
138 | interface UseRealtimeArticlesOptions {
139 | onArticleUpdate?: (article: any) => void
140 | onArticleDelete?: (articleId: string) => void
141 | }
142 |
143 | export function useRealtimeArticles(options: UseRealtimeArticlesOptions = {}) {
144 | const { onArticleUpdate, onArticleDelete } = options
145 |
146 | const handleMessage = useCallback((data: any) => {
147 | switch (data.type) {
148 | case 'article:update':
149 | onArticleUpdate?.(data.article)
150 | break
151 | case 'article:delete':
152 | onArticleDelete?.(data.articleId)
153 | break
154 | default:
155 | console.log('Unknown message type:', data.type)
156 | }
157 | }, [onArticleUpdate, onArticleDelete])
158 |
159 | const wsUrl = process.env.NEXT_PUBLIC_WS_URL || 'ws://localhost:3001'
160 |
161 | return useWebSocket({
162 | url: `${wsUrl}/articles`,
163 | onMessage: handleMessage,
164 | reconnect: true
165 | })
166 | }
--------------------------------------------------------------------------------