feat: Enhance provider components with detailed documentation and comments

- Added comprehensive comments and JSDoc-style documentation to NotificationProvider, ThemeProvider, UserProvider, and WebsiteThemeProvider for better clarity and maintainability.
- Improved type definitions in index.ts for better code understanding and usage.
- Introduced Docker support with Dockerfiles for various services including AI server, signaling server, and browser-use service.
- Created a docker-compose.yml file to orchestrate multiple services including PostgreSQL, AI, scraper, and frontend.
- Added a startup guide (startup.txt) for setting up the CRM environment on Ubuntu with Docker.
- Included a .dockerignore file to exclude unnecessary files from Docker builds.

src/components/ai/gif-picker.tsx

@@ -1,8 +1,13 @@
+// ── AI Assistant: GIF Picker Component ──
+// Inline GIF search and selection UI backed by GIPHY.
+// Supports trending, search with debounce, infinite scroll, and client-side caching.
+
 "use client"
 
 import { useState, useRef, useEffect, useCallback } from "react"
 import { Search, Loader2, ImageIcon } from "lucide-react"
 
+/** A single GIF result from the GIPHY API */
 interface GifResult {
   id: string
   title: string
@@ -14,12 +19,19 @@ interface GifResult {
 }
 
 interface GifPickerProps {
+  /** Called when a GIF is selected */
   onSelect: (gif: { url: string; previewUrl: string; title: string }) => void
+  /** Called to close the picker */
   onClose: () => void
 }
 
+/** In-memory cache keyed by search query or "__trending__" */
 const SEARCH_CACHE = new Map<string, GifResult[]>()
 
+/**
+ * GifPicker — inline GIF search/selection popover.
+ * Fetches trending GIFs on open, supports debounced search and infinite scroll via IntersectionObserver.
+ */
 export function GifPicker({ onSelect, onClose }: GifPickerProps) {
   const [gifs, setGifs] = useState<GifResult[]>([])
   const [loading, setLoading] = useState(true)
@@ -32,6 +44,7 @@ export function GifPicker({ onSelect, onClose }: GifPickerProps) {
   const inputRef = useRef<HTMLInputElement>(null)
   const searchTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
 
+  // ── Fetch GIFs from the API, with optional cache hit ──
   const fetchGifs = useCallback(async (q: string, off: number, append: boolean) => {
     if (off === 0) {
       const cacheKey = q || "__trending__"
@@ -45,6 +58,7 @@ export function GifPicker({ onSelect, onClose }: GifPickerProps) {
       }
     }
 
+    // ── Perform the API request ──
     try {
       if (!append) setLoading(true)
       else setLoadingMore(true)
@@ -67,6 +81,7 @@ export function GifPicker({ onSelect, onClose }: GifPickerProps) {
       const data = await res.json()
       const newGifs: GifResult[] = data.gifs || []
 
+      // Append or replace results, caching on first page
       if (append) {
         setGifs((prev) => [...prev, ...newGifs])
       } else {
@@ -89,14 +104,17 @@ export function GifPicker({ onSelect, onClose }: GifPickerProps) {
     }
   }, [])
 
+  // ── Load trending GIFs on mount ──
   useEffect(() => {
     fetchGifs("", 0, false)
   }, [fetchGifs])
 
+  // ── Auto-focus the search input ──
   useEffect(() => {
     inputRef.current?.focus()
   }, [])
 
+  // ── Debounced search: 400ms after the user stops typing ──
   useEffect(() => {
     if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current)
     if (!search.trim()) {
@@ -111,6 +129,7 @@ export function GifPicker({ onSelect, onClose }: GifPickerProps) {
     }
   }, [search, fetchGifs])
 
+  // ── Infinite scroll via IntersectionObserver on the sentinel ──
   useEffect(() => {
     const sentinel = sentinelRef.current
     if (!sentinel) return
@@ -129,7 +148,9 @@ export function GifPicker({ onSelect, onClose }: GifPickerProps) {
   }, [hasMore, loadingMore, loading, offset, search, fetchGifs])
 
   return (
+    // ── Popover container ──
     <div className="absolute bottom-full left-0 right-0 mb-2 bg-card border border-border rounded-2xl shadow-xl shadow-black/20 overflow-hidden z-50">
+      {/* ── Search bar ── */}
       <div className="p-3 border-b border-border">
         <div className="relative">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -144,6 +165,7 @@ export function GifPicker({ onSelect, onClose }: GifPickerProps) {
         </div>
       </div>
 
+      {/* ── GIF grid with loading / error / empty states ── */}
       <div className="overflow-y-auto" style={{ maxHeight: "360px" }}>
         {loading ? (
           <div className="flex items-center justify-center py-16">
@@ -184,6 +206,7 @@ export function GifPicker({ onSelect, onClose }: GifPickerProps) {
                 <Loader2 className="h-5 w-5 animate-spin text-primary" />
               </div>
             )}
+            {/* Sentinel element for infinite scroll detection */}
             {hasMore && <div ref={sentinelRef} className="h-4" />}
           </>
         )}