@retrivora-ai/rag-engine 2.2.2 → 2.2.3

package/dist/server.js

@@ -5496,7 +5496,7 @@ var ConfigValidator = class {
 // package.json
 var package_default = {
   name: "@retrivora-ai/rag-engine",
-  version: "2.2.2",
+  version: "2.2.3",
   description: "Retrivora AI is a plug-and-play AI engine for RAG chat experiences \u2014 generic vector DB + LLM provider, embeddable or standalone.",
   author: "Abhinav Alkuchi",
   license: "UNLICENSED",
@@ -11354,7 +11354,7 @@ function reportTelemetry(req, plugin, action, status, details, trace) {
     const licenseKey = config.licenseKey || process.env.RAG_LICENSE_KEY || process.env.RETRIVORA_LICENSE_KEY || process.env.NEXT_PUBLIC_RETRIVORA_LICENSE_KEY;
     const telemetryConfig = config.telemetry;
     const enabled = (_a2 = telemetryConfig == null ? void 0 : telemetryConfig.enabled) != null ? _a2 : Boolean(licenseKey);
-    const defaultUrl = process.env.NODE_ENV === "development" && !process.env.TELEMETRY_URL && !process.env.NEXT_PUBLIC_TELEMETRY_URL ? "http://localhost:3001/api/telemetry" : "https://retrivora.com/api/telemetry";
+    const defaultUrl = process.env.NODE_ENV === "development" && !process.env.TELEMETRY_URL && !process.env.NEXT_PUBLIC_TELEMETRY_URL ? "http://localhost:3001/api/telemetry" : "https://www.retrivora.com/api/telemetry";
     const telemetryUrl = (telemetryConfig == null ? void 0 : telemetryConfig.url) || process.env.TELEMETRY_URL || process.env.NEXT_PUBLIC_TELEMETRY_URL || defaultUrl;
     const host = req.headers.get("host") || "localhost";
     const userAgent = req.headers.get("user-agent") || `Retrivora-SDK/${SDK_VERSION}`;

package/dist/server.mjs

@@ -5399,7 +5399,7 @@ var ConfigValidator = class {
 // package.json
 var package_default = {
   name: "@retrivora-ai/rag-engine",
-  version: "2.2.2",
+  version: "2.2.3",
   description: "Retrivora AI is a plug-and-play AI engine for RAG chat experiences \u2014 generic vector DB + LLM provider, embeddable or standalone.",
   author: "Abhinav Alkuchi",
   license: "UNLICENSED",
@@ -11257,7 +11257,7 @@ function reportTelemetry(req, plugin, action, status, details, trace) {
     const licenseKey = config.licenseKey || process.env.RAG_LICENSE_KEY || process.env.RETRIVORA_LICENSE_KEY || process.env.NEXT_PUBLIC_RETRIVORA_LICENSE_KEY;
     const telemetryConfig = config.telemetry;
     const enabled = (_a2 = telemetryConfig == null ? void 0 : telemetryConfig.enabled) != null ? _a2 : Boolean(licenseKey);
-    const defaultUrl = process.env.NODE_ENV === "development" && !process.env.TELEMETRY_URL && !process.env.NEXT_PUBLIC_TELEMETRY_URL ? "http://localhost:3001/api/telemetry" : "https://retrivora.com/api/telemetry";
+    const defaultUrl = process.env.NODE_ENV === "development" && !process.env.TELEMETRY_URL && !process.env.NEXT_PUBLIC_TELEMETRY_URL ? "http://localhost:3001/api/telemetry" : "https://www.retrivora.com/api/telemetry";
     const telemetryUrl = (telemetryConfig == null ? void 0 : telemetryConfig.url) || process.env.TELEMETRY_URL || process.env.NEXT_PUBLIC_TELEMETRY_URL || defaultUrl;
     const host = req.headers.get("host") || "localhost";
     const userAgent = req.headers.get("user-agent") || `Retrivora-SDK/${SDK_VERSION}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Retrivora AI is a plug-and-play AI engine for RAG chat experiences — generic vector DB + LLM provider, embeddable or standalone.",
   "author": "Abhinav Alkuchi",
   "license": "UNLICENSED",

package/src/components/DocumentUpload.tsx

@@ -1,9 +1,8 @@
 'use client';
 
 import React, { useState, useRef } from 'react';
-import { Upload, File, X, CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
+import { Upload, File, X, CheckCircle, AlertCircle, Loader2, CheckCircle2, Sparkles, Files } from 'lucide-react';
 import { useConfig } from './ConfigProvider';
-
 import { DocumentUploadProps } from '../types';
 
 interface FileState {
@@ -18,6 +17,14 @@ export function DocumentUpload({ namespace, uploadUrl, retrivoraApiBase, onUploa
   const [isDragging, setIsDragging] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // Success Modal State
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [lastUploadSummary, setLastUploadSummary] = useState<{
+    totalFilesCount: number;
+    filesUploaded: string[];
+    namespaceUsed: string;
+  } | null>(null);
+
   const isFreeTier = !projectId || projectId.includes('free') || projectId.includes('demo');
 
   const MULTI_DIMENSION_MODELS: Record<string, number[]> = {
@@ -30,7 +37,6 @@ export function DocumentUpload({ namespace, uploadUrl, retrivoraApiBase, onUploa
   const currentModel = embedding?.model || 'unknown';
   const defaultDimension = isFreeTier ? 768 : (embedding?.dimensions || 1536);
   
-  // Provide specific dimensions for known models, otherwise provide common ones
   let availableDimensions = isFreeTier
     ? [768]
     : Object.entries(MULTI_DIMENSION_MODELS).find(([k]) => currentModel.includes(k))?.[1];
@@ -41,7 +47,6 @@ export function DocumentUpload({ namespace, uploadUrl, retrivoraApiBase, onUploa
       : [...COMMON_DIMENSIONS, defaultDimension].sort((a, b) => a - b);
   }
 
-  const isChangeable = !isFreeTier;
   const [dimension, setDimension] = useState(defaultDimension);
 
   const addFiles = (files: File[]) => {
@@ -80,12 +85,11 @@ export function DocumentUpload({ namespace, uploadUrl, retrivoraApiBase, onUploa
     const idleFiles = fileStates.filter(s => s.status === 'idle');
     if (idleFiles.length === 0) return;
 
-    // Update status to uploading
     setFileStates(prev => prev.map(s => s.status === 'idle' ? { ...s, status: 'uploading' } : s));
 
     const formData = new FormData();
     idleFiles.forEach(s => formData.append('files', s.file));
-    const targetNs = namespace || projectId;
+    const targetNs = namespace || projectId || 'default';
     if (targetNs) formData.append('namespace', targetNs);
     formData.append('dimension', dimension.toString());
 
@@ -100,7 +104,6 @@ export function DocumentUpload({ namespace, uploadUrl, retrivoraApiBase, onUploa
         body: formData,
       });
 
-      // Fallback resolution: if primaryUrl returns 404 and is not '/api/upload', try '/api/upload'
       if (response.status === 404 && primaryUrl !== '/api/upload') {
         console.warn(`[Retrivora SDK] ⚠️ Upload endpoint "${primaryUrl}" returned 404. Retrying fallback to "/api/upload"...`);
         response = await fetch('/api/upload', {
@@ -116,6 +119,15 @@ export function DocumentUpload({ namespace, uploadUrl, retrivoraApiBase, onUploa
       console.log(`[Retrivora SDK] ✅ Upload response success:`, result);
 
       setFileStates(prev => prev.map(s => s.status === 'uploading' ? { ...s, status: 'success' } : s));
+
+      const updatedSuccessCount = fileStates.length;
+      setLastUploadSummary({
+        totalFilesCount: updatedSuccessCount,
+        filesUploaded: idleFiles.map(s => s.file.name),
+        namespaceUsed: targetNs,
+      });
+      setShowSuccessModal(true);
+
       if (onUploadComplete) onUploadComplete(result);
     } catch (err: any) {
       const message = err instanceof Error ? err.message : 'Upload failed';
@@ -128,127 +140,191 @@ export function DocumentUpload({ namespace, uploadUrl, retrivoraApiBase, onUploa
   const hasIdle = fileStates.some(s => s.status === 'idle');
 
   return (
-    <div 
-      className={`p-6 border-2 border-dashed transition-all duration-300 rounded-2xl ${
-        isDragging 
-          ? 'border-emerald-500 bg-emerald-50/50 dark:bg-emerald-500/5' 
-          : 'border-slate-200 dark:border-white/10 bg-white dark:bg-white/5'
-      } ${className}`}
-      onDragOver={onDragOver}
-      onDragLeave={onDragLeave}
-      onDrop={onDrop}
-    >
-      <div className="flex flex-col items-center justify-center text-center">
-        <div 
-          className="w-12 h-12 rounded-full flex items-center justify-center mb-4 shadow-sm"
-          style={{ background: `linear-gradient(135deg, ${ui.primaryColor}20, ${ui.accentColor}20)` }}
-        >
-          <Upload className="w-6 h-6" style={{ color: ui.primaryColor }} />
-        </div>
-        <h3 className="text-slate-900 dark:text-white font-semibold mb-1">Upload Documents</h3>
-        <p className="text-slate-500 dark:text-white/40 text-sm mb-6 max-w-xs">
-          Drag and drop PDF, DOCX, Excel (.xlsx, .xls), CSV, TXT, or JSON files to train your AI on your own data.
-        </p>
-
-        <button
-          onClick={() => fileInputRef.current?.click()}
-          disabled={isUploading}
-          className="px-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
-          style={{ 
-            backgroundColor: `${ui.primaryColor}15`,
-            color: ui.primaryColor,
-            border: `1px solid ${ui.primaryColor}30`
-          }}
-        >
-          Select Files
-        </button>
-        <input 
-          ref={fileInputRef}
-          type="file" 
-          multiple 
-          onChange={onFileSelect} 
-          className="hidden" 
-          accept=".pdf,.docx,.doc,.xlsx,.xls,.csv,.txt,.md,.json"
-        />
-
-        <div className="mt-6 flex flex-col items-center gap-2 text-sm">
-          <label className="text-slate-600 dark:text-white/60 font-medium">Embedding Dimension</label>
-          <select
-            value={dimension}
-            onChange={(e) => setDimension(Number(e.target.value))}
+    <>
+      <div 
+        className={`p-6 border-2 border-dashed transition-all duration-300 rounded-2xl ${
+          isDragging 
+            ? 'border-emerald-500 bg-emerald-50/50 dark:bg-emerald-500/5' 
+            : 'border-slate-200 dark:border-white/10 bg-white dark:bg-white/5'
+        } ${className}`}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+      >
+        <div className="flex flex-col items-center justify-center text-center">
+          <div 
+            className="w-12 h-12 rounded-full flex items-center justify-center mb-4 shadow-sm"
+            style={{ background: `linear-gradient(135deg, ${ui.primaryColor}20, ${ui.accentColor}20)` }}
+          >
+            <Upload className="w-6 h-6" style={{ color: ui.primaryColor }} />
+          </div>
+          <h3 className="text-slate-900 dark:text-white font-semibold mb-1">Upload Documents</h3>
+          <p className="text-slate-500 dark:text-white/40 text-sm mb-6 max-w-xs">
+            Drag and drop PDF, DOCX, Excel (.xlsx, .xls), CSV, TXT, or JSON files to train your AI on your own data.
+          </p>
+
+          <button
+            onClick={() => fileInputRef.current?.click()}
             disabled={isUploading}
-            className="px-3 py-1.5 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 outline-none focus:border-emerald-500 transition-colors text-sm font-medium cursor-pointer"
+            className="px-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
+            style={{ 
+              backgroundColor: `${ui.primaryColor}15`,
+              color: ui.primaryColor,
+              border: `1px solid ${ui.primaryColor}30`
+            }}
           >
-            {COMMON_DIMENSIONS.map(dim => {
-              const isDisabled = isFreeTier && dim !== 768;
-              return (
-                <option 
-                  key={dim} 
-                  value={dim} 
-                  disabled={isDisabled}
-                  className="bg-white dark:bg-slate-900 text-slate-800 dark:text-white disabled:text-slate-400 dark:disabled:text-white/30"
-                >
-                  {dim}
-                </option>
-              );
-            })}
-          </select>
+            Select Files
+          </button>
+          <input 
+            ref={fileInputRef}
+            type="file" 
+            multiple 
+            onChange={onFileSelect} 
+            className="hidden" 
+            accept=".pdf,.docx,.doc,.xlsx,.xls,.csv,.txt,.md,.json"
+          />
+
+          <div className="mt-6 flex flex-col items-center gap-2 text-sm">
+            <label className="text-slate-600 dark:text-white/60 font-medium">Embedding Dimension</label>
+            <select
+              value={dimension}
+              onChange={(e) => setDimension(Number(e.target.value))}
+              disabled={isUploading}
+              className="px-3 py-1.5 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 outline-none focus:border-emerald-500 transition-colors text-sm font-medium cursor-pointer"
+            >
+              {COMMON_DIMENSIONS.map(dim => {
+                const isDisabled = isFreeTier && dim !== 768;
+                return (
+                  <option 
+                    key={dim} 
+                    value={dim} 
+                    disabled={isDisabled}
+                    className="bg-white dark:bg-slate-900 text-slate-800 dark:text-white disabled:text-slate-400 dark:disabled:text-white/30"
+                  >
+                    {dim}
+                  </option>
+                );
+              })}
+            </select>
+          </div>
         </div>
-      </div>
 
-      {fileStates.length > 0 && (
-        <div className="mt-8 space-y-3">
-          {fileStates.map((state, i) => (
-            <div 
-              key={i}
-              className="flex items-center justify-between p-3 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10"
-            >
-              <div className="flex items-center gap-3 overflow-hidden">
-                <div className="w-8 h-8 rounded-lg bg-white dark:bg-white/10 flex items-center justify-center shadow-sm">
-                  <File className="w-4 h-4 text-slate-400" />
+        {fileStates.length > 0 && (
+          <div className="mt-8 space-y-3">
+            {fileStates.map((state, i) => (
+              <div 
+                key={i}
+                className="flex items-center justify-between p-3 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10"
+              >
+                <div className="flex items-center gap-3 overflow-hidden">
+                  <div className="w-8 h-8 rounded-lg bg-white dark:bg-white/10 flex items-center justify-center shadow-sm">
+                    <File className="w-4 h-4 text-slate-400" />
+                  </div>
+                  <div className="truncate">
+                    <p className="text-xs font-medium text-slate-700 dark:text-white/80 truncate">
+                      {state.file.name}
+                    </p>
+                    <p className="text-[10px] text-slate-400">
+                      {(state.file.size / 1024).toFixed(1)} KB
+                    </p>
+                  </div>
                 </div>
-                <div className="truncate">
-                  <p className="text-xs font-medium text-slate-700 dark:text-white/80 truncate">
-                    {state.file.name}
-                  </p>
-                  <p className="text-[10px] text-slate-400">
-                    {(state.file.size / 1024).toFixed(1)} KB
-                  </p>
+
+                <div className="flex items-center gap-2">
+                  {state.status === 'uploading' && <Loader2 className="w-4 h-4 text-slate-400 animate-spin" />}
+                  {state.status === 'success' && <CheckCircle className="w-4 h-4 text-emerald-500" />}
+                  {state.status === 'error' && (
+                    <div title={state.error}>
+                      <AlertCircle className="w-4 h-4 text-rose-500" />
+                    </div>
+                  )}
+                  
+                  {state.status !== 'uploading' && (
+                    <button 
+                      onClick={() => removeFile(i)}
+                      className="p-1 rounded-md hover:bg-slate-200 dark:hover:bg-white/10 transition-colors"
+                    >
+                      <X className="w-3.5 h-3.5 text-slate-400" />
+                    </button>
+                  )}
                 </div>
               </div>
+            ))}
+
+            {hasIdle && !isUploading && (
+              <button
+                onClick={uploadFiles}
+                className="w-full mt-4 py-2.5 rounded-xl text-sm font-semibold text-white shadow-lg transition-all hover:scale-[1.02] active:scale-[0.98]"
+                style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
+              >
+                Start Upload
+              </button>
+            )}
+          </div>
+        )}
+      </div>
 
-              <div className="flex items-center gap-2">
-                {state.status === 'uploading' && <Loader2 className="w-4 h-4 text-slate-400 animate-spin" />}
-                {state.status === 'success' && <CheckCircle className="w-4 h-4 text-emerald-500" />}
-                {state.status === 'error' && (
-                  <div title={state.error}>
-                    <AlertCircle className="w-4 h-4 text-rose-500" />
-                  </div>
-                )}
-                
-                {state.status !== 'uploading' && (
-                  <button 
-                    onClick={() => removeFile(i)}
-                    className="p-1 rounded-md hover:bg-slate-200 dark:hover:bg-white/10 transition-colors"
-                  >
-                    <X className="w-3.5 h-3.5 text-slate-400" />
-                  </button>
-                )}
+      {/* ── Upload Successful Modal Popup ────────────────────────────────────────── */}
+      {showSuccessModal && lastUploadSummary && (
+        <div className="fixed inset-0 bg-slate-950/70 backdrop-blur-sm z-50 flex items-center justify-center p-4 animate-fade-in">
+          <div className="bg-white dark:bg-slate-900 rounded-3xl border border-emerald-100 dark:border-emerald-500/20 p-6 max-w-sm w-full shadow-2xl space-y-4 text-slate-900 dark:text-white relative overflow-hidden animate-scale-up">
+            <div className="flex flex-col items-center text-center space-y-2">
+              <div className="w-14 h-14 rounded-2xl bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 flex items-center justify-center border border-emerald-100 dark:border-emerald-500/20 shadow-sm">
+                <CheckCircle2 className="w-8 h-8" />
               </div>
+              <h3 className="text-xl font-extrabold tracking-tight">Upload Successful! 🎉</h3>
+              <p className="text-xs text-slate-500 dark:text-white/60 font-medium">
+                Your files have been chunked, vectorized, and ingested into Pinecone vector index.
+              </p>
             </div>
-          ))}
 
-          {hasIdle && !isUploading && (
-            <button
-              onClick={uploadFiles}
-              className="w-full mt-4 py-2.5 rounded-xl text-sm font-semibold text-white shadow-lg transition-all hover:scale-[1.02] active:scale-[0.98]"
-              style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
-            >
-              Start Upload
-            </button>
-          )}
+            <div className="p-4 rounded-2xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 space-y-3">
+              <div className="flex items-center justify-between text-xs font-semibold text-slate-700 dark:text-white/90">
+                <span className="flex items-center gap-1.5 text-slate-500 dark:text-white/60">
+                  <Files className="w-4 h-4 text-emerald-500" /> Total Files Ingested:
+                </span>
+                <span className="font-extrabold font-mono text-emerald-600 dark:text-emerald-400 text-sm">
+                  {lastUploadSummary.totalFilesCount} Files
+                </span>
+              </div>
+              <div className="flex items-center justify-between text-xs font-semibold text-slate-700 dark:text-white/90">
+                <span className="text-slate-500 dark:text-white/60">Target Namespace:</span>
+                <span className="font-mono text-[11px] px-2 py-0.5 rounded bg-slate-200 dark:bg-white/10 text-slate-800 dark:text-white">
+                  {lastUploadSummary.namespaceUsed}
+                </span>
+              </div>
+            </div>
+
+            <div className="max-h-32 overflow-y-auto space-y-1.5 pr-1 scrollbar-thin">
+              {lastUploadSummary.filesUploaded.map((fn, idx) => (
+                <div key={idx} className="flex items-center justify-between text-xs p-2 rounded-lg bg-emerald-50/50 dark:bg-emerald-500/5 text-emerald-900 dark:text-emerald-300 border border-emerald-100/50 dark:border-emerald-500/10">
+                  <span className="truncate font-medium">{fn}</span>
+                  <Sparkles className="w-3.5 h-3.5 text-emerald-500 shrink-0 ml-2" />
+                </div>
+              ))}
+            </div>
+
+            <div className="flex gap-2.5 pt-1">
+              <button
+                onClick={() => {
+                  setShowSuccessModal(false);
+                  setFileStates([]);
+                }}
+                className="flex-1 py-2.5 rounded-xl text-xs font-bold bg-slate-100 dark:bg-white/10 hover:bg-slate-200 dark:hover:bg-white/20 text-slate-700 dark:text-white transition-all cursor-pointer"
+              >
+                Clear & Reset
+              </button>
+              <button
+                onClick={() => setShowSuccessModal(false)}
+                className="flex-1 py-2.5 rounded-xl text-xs font-bold text-white shadow-md transition-all cursor-pointer"
+                style={{ backgroundColor: ui.primaryColor }}
+              >
+                Done
+              </button>
+            </div>
+          </div>
         </div>
       )}
-    </div>
+    </>
   );
 }

package/src/handlers/index.ts

@@ -169,7 +169,7 @@ function reportTelemetry(
     const enabled = telemetryConfig?.enabled ?? Boolean(licenseKey);
     const defaultUrl = process.env.NODE_ENV === 'development' && !process.env.TELEMETRY_URL && !process.env.NEXT_PUBLIC_TELEMETRY_URL
       ? 'http://localhost:3001/api/telemetry'
-      : 'https://retrivora.com/api/telemetry';
+      : 'https://www.retrivora.com/api/telemetry';
 
     const telemetryUrl = telemetryConfig?.url || process.env.TELEMETRY_URL || process.env.NEXT_PUBLIC_TELEMETRY_URL || defaultUrl;
     const host = req.headers.get('host') || 'localhost';

package/src/hooks/useRagChat.ts

@@ -62,13 +62,14 @@ export function useRagChat(
   options: UseRagChatOptions = {}
 ): UseRagChatReturn {
   const {
-    apiUrl = '/api/chat',
+    apiUrl,
     retrivoraApiBase = '/api/retrivora',
     namespace,
     persist = true,
     onReply,
     onError,
   } = options;
+  const primaryUrl = apiUrl || `${retrivoraApiBase.replace(/\/$/, '')}/chat`;
   const storageKey = `rag_chat_${projectId}`;
 
   const [messages, setMessages] = useStoredMessages<RagMessage>(storageKey, persist);
@@ -119,23 +120,38 @@ export function useRagChat(
         const history = messagesRef.current.map(({ role, content }) => ({ role, content }));
         const assistantMessageId = `assistant_${Date.now()}`;
 
-        const response = await fetch(apiUrl, {
+        const payloadBody = JSON.stringify({
+          message: trimmed,
+          history,
+          namespace: namespace ?? projectId,
+          sessionId: options.sessionId || 'default',
+          messageId: assistantMessageId,
+          userMessageId: userMsgId,
+        });
+
+        const fetchHeaders = {
+          'Content-Type': 'application/json',
+          ...(options.headers || {})
+        };
+
+        let response = await fetch(primaryUrl, {
           method: 'POST',
-          headers: { 
-            'Content-Type': 'application/json',
-            ...(options.headers || {})
-          },
+          headers: fetchHeaders,
           signal: controller.signal,
-          body: JSON.stringify({
-            message: trimmed,
-            history,
-            namespace: namespace ?? projectId,
-            sessionId: options.sessionId || 'default',
-            messageId: assistantMessageId,
-            userMessageId: userMsgId,
-          }),
+          body: payloadBody,
         });
 
+        // Dynamic Fallback: If primaryUrl (e.g. /api/retrivora/chat) returns 404, retry fallback to /api/chat
+        if (response.status === 404 && !apiUrl && primaryUrl !== '/api/chat') {
+          console.warn(`[Retrivora SDK] ⚠️ Chat endpoint "${primaryUrl}" returned 404. Retrying fallback to "/api/chat"...`);
+          response = await fetch('/api/chat', {
+            method: 'POST',
+            headers: fetchHeaders,
+            signal: controller.signal,
+            body: payloadBody,
+          });
+        }
+
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
           throw new Error(errorData.error || `Server returned ${response.status}`);

package/src/index.css

@@ -112,6 +112,7 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
+    --container-sm: 24rem;
     --container-md: 28rem;
     --container-2xl: 42rem;
     --container-4xl: 56rem;
@@ -123,11 +124,14 @@
     --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
@@ -759,6 +763,9 @@
   .max-w-none {
     max-width: none;
   }
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
   .max-w-xs {
     max-width: var(--container-xs);
   }
@@ -777,6 +784,9 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .flex-grow {
     flex-grow: 1;
   }
@@ -930,6 +940,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -1111,6 +1124,12 @@
   .border-emerald-100 {
     border-color: var(--color-emerald-100);
   }
+  .border-emerald-100\/50 {
+    border-color: color-mix(in srgb, oklch(95% 0.052 163.051) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-emerald-100) 50%, transparent);
+    }
+  }
   .border-emerald-200 {
     border-color: var(--color-emerald-200);
   }
@@ -1363,6 +1382,12 @@
   .bg-slate-950 {
     background-color: var(--color-slate-950);
   }
+  .bg-slate-950\/70 {
+    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-slate-950) 70%, transparent);
+    }
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1520,6 +1545,10 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -1551,6 +1580,10 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -1649,6 +1682,9 @@
   .text-emerald-800 {
     color: var(--color-emerald-800);
   }
+  .text-emerald-900 {
+    color: var(--color-emerald-900);
+  }
   .text-emerald-950 {
     color: var(--color-emerald-950);
   }
@@ -2363,6 +2399,14 @@
       }
     }
   }
+  .dark\:border-emerald-500\/10 {
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
+      }
+    }
+  }
   .dark\:border-emerald-500\/20 {
     @media (prefers-color-scheme: dark) {
       border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);