feat: rate limits

Author: oliverlaz

examples/react-chatbot/app/page.tsx

@@ -2,6 +2,7 @@ import type { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 import { StreamChat } from 'stream-chat';
 import { AIChatApp } from '@/components/AIChatApp';
 import { ThemeProvider } from '@/components/ThemeContext';
+import { UserProvider } from '@/components/UserProvider';
 
 import '../components/index.scss';
 
@@ -14,14 +15,18 @@ const generateUserToken = (userId: string) => {
 
   const client = new StreamChat(apiKey, secret);
   const token = client.createToken(userId);
-  return { apiKey, token, userId };
+  return { apiKey, token };
 };
 
 export default async function Home(props: {
   searchParams: Promise<{ conversation_id?: string; user_id?: string }>;
 }) {
-  const { conversation_id, user_id = 'jane' } = await props.searchParams;
-  const { apiKey, token, userId } = generateUserToken(user_id);
+  const { conversation_id, user_id } = await props.searchParams;
+
+  // If no user_id provided, generate a random UUID
+  // The client will persist this in localStorage
+  const userId = user_id || crypto.randomUUID();
+  const { apiKey, token } = generateUserToken(userId);
 
   const filters: ChannelFilters = {
     members: { $in: [userId] },
@@ -37,15 +42,17 @@ export default async function Home(props: {
 
   return (
     <ThemeProvider>
-      <AIChatApp
-        apiKey={apiKey}
-        userToken={token}
-        userId={userId}
-        filters={filters}
-        options={options}
-        sort={sort}
-        initialChannelId={conversation_id}
-      />
+      <UserProvider>
+        <AIChatApp
+          apiKey={apiKey}
+          userToken={token}
+          userId={userId}
+          filters={filters}
+          options={options}
+          sort={sort}
+          initialChannelId={conversation_id}
+        />
+      </UserProvider>
     </ThemeProvider>
   );
 }

examples/react-chatbot/components/MessageInputBar/MessageInputBar.scss

@@ -1,11 +1,43 @@
 .ai-demo-message-input-bar {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
   padding: 1.5rem;
   background-color: var(--ai-demo-bg-primary);
   color: var(--ai-demo-text-primary);
   border-top: 1px solid var(--ai-demo-border);
 
+  .ai-demo-rate-limit-message {
+    width: 100%;
+    max-width: 900px;
+    padding: 1rem 1.25rem;
+    margin-bottom: 1rem;
+    background-color: rgba(255, 193, 7, 0.1);
+    border: 1px solid rgba(255, 193, 7, 0.3);
+    border-radius: 12px;
+    color: var(--ai-demo-text-primary);
+    font-size: 0.9375rem;
+    line-height: 1.5;
+
+    display: flex;
+    gap: 8px;
+  }
+
+  [data-theme='dark'] & .rate-limit-message {
+    background-color: rgba(255, 193, 7, 0.15);
+  }
+
+  /* Disabled state styles */
+  fieldset:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    * {
+      pointer-events: none;
+    }
+  }
+
   /* Override AIMessageComposer styles */
   .aicr__ai-message-composer__form {
     width: 100%;

examples/react-chatbot/components/MessageInputBar/MessageInputBar.tsx

@@ -16,6 +16,11 @@ import {
   useMessageComposer,
 } from 'stream-chat-react';
 import { startAiAgent } from '@/components/api';
+import {
+  checkRateLimit,
+  recordMessage,
+  formatTimeRemaining,
+} from '@/components/rateLimitUtils';
 import './MessageInputBar.scss';
 
 const isWatchedByAI = (channel: Channel) => {
@@ -32,6 +37,30 @@ export const MessageInputBar = () => {
 
   const { attachments } = useAttachmentsForPreview();
   const [selectedModel, setSelectedModel] = useState<string>();
+  const [rateLimitState, setRateLimitState] = useState<{
+    isLimited: boolean;
+    resetTime: number | null;
+    remainingMessages: number;
+  }>({
+    isLimited: false,
+    resetTime: null,
+    remainingMessages: 10,
+  });
+
+  // Check rate limit when channel changes or on mount
+  useEffect(() => {
+    if (!channel?.id) return;
+
+    const updateRateLimit = () => {
+      const state = checkRateLimit(channel.id!);
+      setRateLimitState(state);
+    };
+
+    updateRateLimit();
+
+    const interval = setInterval(updateRateLimit, 60000);
+    return () => clearInterval(interval);
+  }, [channel?.id]);
 
   useEffect(() => {
     if (!composer) return;
@@ -51,7 +80,17 @@ export const MessageInputBar = () => {
 
   return (
     <div className="ai-demo-message-input-bar">
+      {rateLimitState.isLimited && rateLimitState.resetTime && (
+        <div className="ai-demo-rate-limit-message">
+          <span className="material-symbols-rounded">info</span>
+          <span>
+            Limit reached, 10 messages per conversation. Resets in{' '}
+            <strong>{formatTimeRemaining(rateLimitState.resetTime)}</strong>.
+          </span>
+        </div>
+      )}
       <AIMessageComposer
+        disabled={rateLimitState.isLimited}
         onChange={(e) => {
           const input = e.currentTarget.elements.namedItem(
             'attachments',
@@ -67,6 +106,9 @@ export const MessageInputBar = () => {
           const event = e;
           event.preventDefault();
 
+          // Check rate limit before processing
+          if (rateLimitState.isLimited) return;
+
           const target = event.currentTarget;
 
           const formData = new FormData(target);
@@ -95,6 +137,13 @@ export const MessageInputBar = () => {
           }
 
           await sendMessage(composedData);
+
+          // Record message after successful send
+          recordMessage(channel.id!);
+
+          // Update rate limit state
+          const newState = checkRateLimit(channel.id!);
+          setRateLimitState(newState);
         }}
       >
         <AIMessageComposer.AttachmentPreview>

examples/react-chatbot/components/UserProvider.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { getUserId } from './rateLimitUtils';
+
+/**
+ * Client component that handles user initialization and URL synchronization
+ */
+export const UserProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isInitialized, setIsInitialized] = useState(false);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    const urlUserId = searchParams.get('user_id');
+    const currentUserId = getUserId();
+
+    // If no user_id in URL, add it
+    if (!urlUserId) {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set('user_id', currentUserId);
+      router.replace(`?${params.toString()}`);
+    }
+
+    setIsInitialized(true);
+  }, [router, searchParams]);
+
+  if (!isInitialized) {
+    return <>Loading...</>;
+  }
+
+  return <>{children}</>;
+};

examples/react-chatbot/components/rateLimitUtils.ts

@@ -0,0 +1,178 @@
+/**
+ * Rate limiting utilities for managing user message limits
+ * Limits: 10 messages per conversation in a 4-hour interval
+ */
+
+const RATE_LIMIT_KEY_PREFIX = 'rate_limit_';
+const USER_ID_KEY = 'user_id';
+const MESSAGE_LIMIT = 10;
+const TIME_WINDOW_MS = 4 * 60 * 60 * 1000; // 4 hours in milliseconds
+
+interface RateLimitData {
+  messageCount: number;
+  firstMessageTimestamp: number;
+  conversationId: string;
+}
+
+/**
+ * Get or create user ID
+ * Checks for user_id in URL params first, then localStorage
+ * If neither exists, generates a new UUID
+ */
+export const getUserId = (): string => {
+  // Check URL params first
+  if (typeof window !== 'undefined') {
+    const params = new URLSearchParams(window.location.search);
+    const urlUserId = params.get('user_id');
+    if (urlUserId) {
+      // Store in localStorage for persistence
+      localStorage.setItem(USER_ID_KEY, urlUserId);
+      return urlUserId;
+    }
+
+    // Check localStorage
+    const storedUserId = localStorage.getItem(USER_ID_KEY);
+    if (storedUserId) {
+      return storedUserId;
+    }
+
+    // Generate new UUID
+    const newUserId = crypto.randomUUID();
+    localStorage.setItem(USER_ID_KEY, newUserId);
+    return newUserId;
+  }
+
+  // Fallback for server-side rendering
+  return crypto.randomUUID();
+};
+
+/**
+ * Get rate limit data for a conversation
+ */
+export const getRateLimitData = (
+  conversationId: string,
+): RateLimitData | null => {
+  if (typeof window === 'undefined') return null;
+
+  const key = `${RATE_LIMIT_KEY_PREFIX}${conversationId}`;
+  const stored = localStorage.getItem(key);
+
+  if (!stored) return null;
+
+  try {
+    return JSON.parse(stored) as RateLimitData;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Save rate limit data for a conversation
+ */
+const saveRateLimitData = (data: RateLimitData): void => {
+  if (typeof window === 'undefined') return;
+
+  const key = `${RATE_LIMIT_KEY_PREFIX}${data.conversationId}`;
+  localStorage.setItem(key, JSON.stringify(data));
+};
+
+/**
+ * Check if rate limit has been exceeded
+ * Returns an object with isLimited flag and resetTime if limited
+ */
+export const checkRateLimit = (
+  conversationId: string,
+): {
+  isLimited: boolean;
+  resetTime: number | null;
+  remainingMessages: number;
+} => {
+  const data = getRateLimitData(conversationId);
+
+  if (!data) {
+    return {
+      isLimited: false,
+      resetTime: null,
+      remainingMessages: MESSAGE_LIMIT,
+    };
+  }
+
+  const now = Date.now();
+  const timeElapsed = now - data.firstMessageTimestamp;
+
+  // If time window has passed, reset the limit
+  if (timeElapsed >= TIME_WINDOW_MS) {
+    return {
+      isLimited: false,
+      resetTime: null,
+      remainingMessages: MESSAGE_LIMIT,
+    };
+  }
+
+  // Check if limit exceeded
+  const isLimited = data.messageCount >= MESSAGE_LIMIT;
+  const resetTime = isLimited
+    ? data.firstMessageTimestamp + TIME_WINDOW_MS
+    : null;
+  const remainingMessages = Math.max(0, MESSAGE_LIMIT - data.messageCount);
+
+  return {
+    isLimited,
+    resetTime,
+    remainingMessages,
+  };
+};
+
+/**
+ * Record a new message sent in the conversation
+ */
+export const recordMessage = (conversationId: string): void => {
+  const data = getRateLimitData(conversationId);
+  const now = Date.now();
+
+  if (!data) {
+    // First message in this conversation
+    saveRateLimitData({
+      messageCount: 1,
+      firstMessageTimestamp: now,
+      conversationId,
+    });
+    return;
+  }
+
+  const timeElapsed = now - data.firstMessageTimestamp;
+
+  if (timeElapsed >= TIME_WINDOW_MS) {
+    // Time window has passed, reset the counter
+    saveRateLimitData({
+      messageCount: 1,
+      firstMessageTimestamp: now,
+      conversationId,
+    });
+  } else {
+    // Increment the counter
+    saveRateLimitData({
+      ...data,
+      messageCount: data.messageCount + 1,
+    });
+  }
+};
+
+/**
+ * Format time remaining until reset
+ */
+export const formatTimeRemaining = (resetTime: number): string => {
+  const now = Date.now();
+  const msRemaining = resetTime - now;
+
+  if (msRemaining <= 0) return '0m';
+
+  const hours = Math.floor(msRemaining / (60 * 60 * 1000));
+  const minutes = Math.floor((msRemaining % (60 * 60 * 1000)) / (60 * 1000));
+
+  if (hours > 0) {
+    return `${hours}h ${minutes}m`;
+  }
+
+  return `${minutes}m`;
+};