צ׳אט AI מאומת ב‑Next.js: Clerk + OpenAI ChatKit + Guardrails ל‑Production

1'use client';
2
3import { ChatKit } from '@openai/chatkit-react';
4import { useAuth } from '@clerk/nextjs';
5import { useEffect, useState } from 'react';
6
7export function AIChat() {
8  const { getToken, isLoaded, isSignedIn } = useAuth();
9  const [authToken, setAuthToken] = useState<string | null>(null);
10
11  useEffect(() => {
12    async function loadToken() {
13      if (isLoaded && isSignedIn) {
14        const token = await getToken();
15        setAuthToken(token);
16      }
17    }
18    loadToken();
19  }, [isLoaded, isSignedIn, getToken]);
20
21  if (!isLoaded || !isSignedIn) {
22    return (
23      <div className="flex items-center justify-center h-96">
24        <p className="text-muted-foreground">נא להתחבר כדי להשתמש בצ'אט AI</p>
25      </div>
26    );
27  }
28
29  if (!authToken) {
30    return <div className="animate-spin" />;
31  }
32
33  return (
34    <ChatKit
35      workflowId={process.env.NEXT_PUBLIC_CHATKIT_WORKFLOW_ID!}
36      authToken={authToken}
37      className="w-full h-full"
38    />
39  );
40}

1import { Redis } from '@upstash/redis';
2
3const redis = new Redis({
4  url: process.env.UPSTASH_REDIS_REST_URL!,
5  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
6});
7
8const RATE_LIMITS = {
9  free: { maxRequests: 10, windowMs: 60 * 60 * 1000 }, // 10 בקשות/שעה
10  pro: { maxRequests: 100, windowMs: 60 * 60 * 1000 }, // 100 בקשות/שעה
11};
12
13export async function checkRateLimit(userId: string, tier: 'free' | 'pro' = 'free') {
14  const config = RATE_LIMITS[tier];
15  const key = `ratelimit:chat:${userId}`;
16  const now = Date.now();
17  const windowStart = now - config.windowMs;
18  
19  // הסרת רשומות ישנות
20  await redis.zremrangebyscore(key, 0, windowStart);
21  
22  // ספירת בקשות בחלון הנוכחי
23  const requestCount = await redis.zcard(key);
24  
25  if (requestCount >= config.maxRequests) {
26    return { allowed: false, remaining: 0 };
27  }
28  
29  // הוספת הבקשה הנוכחית
30  await redis.zadd(key, { score: now, member: `${now}` });
31  await redis.expire(key, Math.ceil(config.windowMs / 1000));
32  
33  return { allowed: true, remaining: config.maxRequests - requestCount - 1 };
34}