@retrivora-ai/rag-engine 2.2.5 → 2.2.6

package/dist/server.js

@@ -4808,7 +4808,7 @@ var ConfigValidator = class {
 // package.json
 var package_default = {
   name: "@retrivora-ai/rag-engine",
-  version: "2.2.5",
+  version: "2.2.6",
   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",

package/dist/server.mjs

@@ -4711,7 +4711,7 @@ var ConfigValidator = class {
 // package.json
 var package_default = {
   name: "@retrivora-ai/rag-engine",
-  version: "2.2.5",
+  version: "2.2.6",
   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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "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/ChatWidget.tsx

@@ -1,10 +1,9 @@
-'use client';
-
 import React, { useState } from 'react';
-import { MessageSquare, X } from 'lucide-react';
+import { MessageSquare, X, AlertTriangle } from 'lucide-react';
 import { ChatWindow } from './ChatWindow';
 import { useConfig } from './ConfigProvider';
 import { ChatWidgetProps } from '../types';
+import { SDK_VERSION } from '../version';
 
 const DEFAULT_DIMENSIONS = { width: 380, height: 600 };
 
@@ -54,6 +53,8 @@ export function ChatWidget({ position = 'bottom-right', onAddToCart, apiUrl, ret
   const [isResizing, setIsResizing] = useState(false);
   const [isMaximized, setIsMaximized] = useState(false);
   const [prevDimensions, setPrevDimensions] = useState(DEFAULT_DIMENSIONS);
+  const [widgetError, setWidgetError] = useState<string | null>(null);
+  const [isValidating, setIsValidating] = useState(false);
 
   if (ui.showWidget === false) return null;
 
@@ -67,9 +68,50 @@ export function ChatWidget({ position = 'bottom-right', onAddToCart, apiUrl, ret
       ? 'bottom-20 left-6'
       : 'bottom-20 right-6';
 
-  const handleOpen = () => {
-    setIsOpen(true);
-    setHasUnread(false);
+  const handleOpen = async () => {
+    setIsValidating(true);
+    try {
+      const base = retrivoraApiBase || '/api/retrivora';
+      const configUrl = `${base.replace(/\/$/, '')}/config?sdkVersion=${SDK_VERSION}`;
+      const res = await fetch(configUrl, {
+        method: 'GET',
+        cache: 'no-store',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-sdk-version': SDK_VERSION,
+          ...(headers || {})
+        },
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        if (res.status === 426 || data.code === 'SDK_VERSION_OUTDATED') {
+          const msg = data.error || 'Your Retrivora SDK package version is outdated. Please update your package to the latest version to continue.';
+          setWidgetError(msg);
+          setIsOpen(false); // DO NOT OPEN CHAT WIDGET
+          return;
+        }
+        if (
+          res.status === 403 ||
+          res.status === 401 ||
+          (typeof data.error === 'string' && data.error.toLowerCase().includes('license'))
+        ) {
+          const msg = (typeof data.error === 'string' ? data.error : data.error?.message) || 'Your Retrivora license is no longer valid. Please contact your administrator or obtain a valid license key.';
+          setWidgetError(msg);
+          setIsOpen(false); // DO NOT OPEN CHAT WIDGET
+          return;
+        }
+      }
+
+      setWidgetError(null);
+      setIsOpen(true);
+      setHasUnread(false);
+    } catch {
+      // Fallback
+      setIsOpen(true);
+    } finally {
+      setIsValidating(false);
+    }
   };
 
   const handleResizeStart = (e: React.MouseEvent) => {
@@ -157,6 +199,33 @@ export function ChatWidget({ position = 'bottom-right', onAddToCart, apiUrl, ret
         />
       </div>
 
+      {/* ── Widget Error Toast/Pop-over (when opening is blocked) ── */}
+      {widgetError && !isOpen && (
+        <div
+          className={`fixed z-[9999] max-w-sm p-4 rounded-2xl shadow-2xl border border-rose-200 dark:border-rose-900/60 bg-white/95 dark:bg-[#0f0f1a]/95 backdrop-blur-xl transition-all duration-300 animate-in fade-in slide-in-from-bottom-3 ${
+            position === 'bottom-left' ? 'bottom-24 left-6' : 'bottom-24 right-6'
+          }`}
+        >
+          <div className="flex items-start gap-3">
+            <div className="w-8 h-8 rounded-xl bg-rose-100 dark:bg-rose-900/40 text-rose-600 dark:text-rose-400 flex items-center justify-center shrink-0 mt-0.5">
+              <AlertTriangle className="w-4 h-4" />
+            </div>
+            <div className="flex-1 space-y-1">
+              <h5 className="text-xs font-bold text-slate-900 dark:text-white">Access Blocked</h5>
+              <p className="text-[11px] text-slate-600 dark:text-slate-300 leading-relaxed font-medium">
+                {widgetError}
+              </p>
+            </div>
+            <button
+              onClick={() => setWidgetError(null)}
+              className="text-slate-400 hover:text-slate-600 dark:hover:text-white transition-colors p-1"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* ── Floating Action Button ── */}
       <button
         onClick={isOpen ? () => setIsOpen(false) : handleOpen}

package/src/components/ChatWindow.tsx

@@ -7,6 +7,7 @@ import {
   X,
   Sparkles,
   ArrowUp,
+  ArrowUpCircle,
   TriangleAlert,
   RotateCcw,
   Maximize2,
@@ -21,6 +22,7 @@ import { useConfig } from './ConfigProvider';
 import { useRagChat } from '../hooks/useRagChat';
 import { BORDER_RADIUS_MAP, CHAT_SUGGESTIONS } from '../config/uiConstants';
 import { ChatWindowProps } from '../types';
+import { SDK_VERSION } from '../version';
 
 interface SpeechRecognitionEvent {
   resultIndex: number;
@@ -86,8 +88,58 @@ export function ChatWindow({
 
   const [isListening, setIsListening] = useState(false);
   const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+  const [licenseError, setLicenseError] = useState<string | null>(null);
+  const [versionError, setVersionError] = useState<string | null>(null);
   const recognitionRef = useRef<ISpeechRecognition | null>(null);
 
+  // Validate server license and SDK version on ChatWindow session initialization
+  useEffect(() => {
+    let isMounted = true;
+    async function validateSessionLicense() {
+      try {
+        const base = retrivoraApiBase || '/api/retrivora';
+        const configUrl = `${base.replace(/\/$/, '')}/config?sdkVersion=${SDK_VERSION}`;
+        const res = await fetch(configUrl, {
+          method: 'GET',
+          cache: 'no-store',
+          headers: {
+            'Content-Type': 'application/json',
+            'x-sdk-version': SDK_VERSION,
+            ...(headers || {})
+          },
+        });
+
+        if (!res.ok) {
+          const data = await res.json().catch(() => ({}));
+          if (res.status === 426 || data.code === 'SDK_VERSION_OUTDATED') {
+            if (isMounted) {
+              setVersionError(data.error || 'Your Retrivora SDK package is outdated. Please update your package to the latest version to continue.');
+            }
+          } else if (
+            res.status === 403 ||
+            res.status === 401 ||
+            (typeof data.error === 'string' && data.error.toLowerCase().includes('license'))
+          ) {
+            if (isMounted) {
+              const errMsg = typeof data.error === 'string' ? data.error : data.error?.message || 'Your Retrivora license is no longer valid. Please contact your administrator or obtain a valid license key.';
+              setLicenseError(errMsg);
+            }
+          }
+        } else {
+          if (isMounted) {
+            setLicenseError(null);
+            setVersionError(null);
+          }
+        }
+      } catch {
+        // Non-blocking fallback
+      }
+    }
+
+    validateSessionLicense();
+    return () => { isMounted = false; };
+  }, [retrivoraApiBase, headers]);
+
   // Initialize SpeechRecognition
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -345,7 +397,36 @@ export function ChatWindow({
       </div>
 
       <div className="flex-1 overflow-y-auto px-4 py-4 space-y-5 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-white/10 scrollbar-track-transparent min-h-0 bg-slate-50 dark:bg-transparent">
-        {!mounted || isEmpty ? (
+        {versionError ? (
+          <div className="h-full flex flex-col items-center justify-center text-center p-6 space-y-4 bg-amber-50/70 dark:bg-amber-950/20 rounded-2xl border border-amber-200/80 dark:border-amber-800/40 my-auto">
+            <div className="w-14 h-14 rounded-2xl bg-amber-100 dark:bg-amber-900/40 text-amber-600 dark:text-amber-400 flex items-center justify-center shadow-sm shrink-0">
+              <ArrowUpCircle className="w-7 h-7 animate-bounce" />
+            </div>
+            <div className="space-y-2 max-w-xs">
+              <h4 className="text-base font-extrabold text-slate-900 dark:text-white tracking-tight">Package Update Required</h4>
+              <p className="text-xs text-slate-600 dark:text-slate-300 leading-relaxed font-medium">
+                {versionError}
+              </p>
+              <div className="pt-2">
+                <code className="block bg-slate-900 text-amber-300 text-[10px] font-mono py-2 px-3 rounded-xl select-all border border-slate-800">
+                  npm i @retrivora-ai/rag-engine@latest
+                </code>
+              </div>
+            </div>
+          </div>
+        ) : licenseError ? (
+          <div className="h-full flex flex-col items-center justify-center text-center p-6 space-y-4 bg-rose-50/50 dark:bg-rose-950/20 rounded-2xl border border-rose-200/60 dark:border-rose-800/40 my-auto">
+            <div className="w-14 h-14 rounded-2xl bg-rose-100 dark:bg-rose-900/40 text-rose-600 dark:text-rose-400 flex items-center justify-center shadow-sm shrink-0">
+              <TriangleAlert className="w-7 h-7" />
+            </div>
+            <div className="space-y-2 max-w-xs">
+              <h4 className="text-base font-extrabold text-slate-900 dark:text-white tracking-tight">License Invalid</h4>
+              <p className="text-xs text-slate-600 dark:text-slate-300 leading-relaxed font-medium">
+                {licenseError}
+              </p>
+            </div>
+          </div>
+        ) : !mounted || isEmpty ? (
           /* Welcome state */
           <div className="h-full flex flex-col items-center justify-center text-center gap-4 px-6 py-4">
             <div
@@ -408,7 +489,7 @@ export function ChatWindow({
         )}
 
         {/* Error */}
-        {error && (
+        {error && !licenseError && (
           <div className="flex items-center gap-2 text-rose-500 dark:text-rose-400 text-sm bg-rose-50 dark:bg-rose-400/10 border border-rose-200 dark:border-rose-400/20 rounded-xl px-4 py-3">
             <TriangleAlert className="w-4 h-4 flex-shrink-0" />
             <span>{error}</span>
@@ -479,7 +560,7 @@ export function ChatWindow({
             onKeyDown={handleKeyDown}
             placeholder={ui.placeholder}
             rows={1}
-            disabled={isLoading}
+            disabled={isLoading || !!licenseError || !!versionError}
             className="flex-1 bg-transparent text-slate-900 dark:text-white/90 placeholder-slate-400 dark:placeholder-white/30 text-sm resize-none outline-none py-1.5 px-2 max-h-32 leading-relaxed disabled:opacity-50"
             style={{ scrollbarWidth: 'none' }}
           />
@@ -488,7 +569,7 @@ export function ChatWindow({
             <button
               type="button"
               onClick={toggleListening}
-              disabled={isLoading}
+              disabled={isLoading || !!licenseError || !!versionError}
               className={`flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100 ${isListening
                   ? 'bg-rose-500 text-white animate-pulse shadow-md shadow-rose-500/20'
                   : 'text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10'
@@ -503,7 +584,8 @@ export function ChatWindow({
             <button
               type="button"
               onClick={() => setIsUploadModalOpen(true)}
-              className="flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10"
+              disabled={isLoading || !!licenseError || !!versionError}
+              className="flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed"
               title="Upload Document"
             >
               <Paperclip className="w-4 h-4" />
@@ -521,14 +603,10 @@ export function ChatWindow({
           ) : (
             <button
               onClick={sendMessage}
-              disabled={!input.trim()}
-              className="flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all disabled:opacity-30 disabled:cursor-not-allowed hover:scale-105 active:scale-95 shadow-md"
-              style={{
-                background:
-                  input.trim()
-                    ? `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})`
-                    : 'rgba(148, 163, 184, 0.2)', // slate-400/20 for light mode disabled
-              }}
+              disabled={!input.trim() || !!licenseError || !!versionError}
+              className={`flex-shrink-0 w-9 h-9 flex items-center justify-center transition-all shadow-md active:scale-95 cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed disabled:active:scale-100 ${ui.borderRadius === 'full' ? 'rounded-full' : 'rounded-xl'}`}
+              style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
+              title="Send message"
             >
               <ArrowUp className="w-4 h-4 text-white" />
             </button>

package/src/hooks/useRagChat.ts

@@ -154,7 +154,15 @@ export function useRagChat(
 
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
-          throw new Error(errorData.error || `Server returned ${response.status}`);
+          if (
+            response.status === 403 ||
+            response.status === 401 ||
+            (typeof errorData.error === 'string' && errorData.error.toLowerCase().includes('license')) ||
+            errorData.error?.type === 'license_revoked'
+          ) {
+            throw new Error('Your Retrivora license is no longer valid. Please contact your administrator or obtain a valid license key.');
+          }
+          throw new Error(errorData.error?.message || errorData.error || `Server returned ${response.status}`);
         }
 
         if (!response.body) {

package/src/index.css

@@ -96,6 +96,9 @@
     --color-rose-400: oklch(71.2% 0.194 13.428);
     --color-rose-500: oklch(64.5% 0.246 16.439);
     --color-rose-600: oklch(58.6% 0.253 17.585);
+    --color-rose-800: oklch(45.5% 0.188 13.697);
+    --color-rose-900: oklch(41% 0.159 10.272);
+    --color-rose-950: oklch(27.1% 0.105 12.094);
     --color-slate-50: oklch(98.4% 0.003 247.858);
     --color-slate-100: oklch(96.8% 0.007 247.896);
     --color-slate-200: oklch(92.9% 0.013 255.508);
@@ -370,6 +373,9 @@
   .bottom-20 {
     bottom: calc(var(--spacing) * 20);
   }
+  .bottom-24 {
+    bottom: calc(var(--spacing) * 24);
+  }
   .-left-4 {
     left: calc(var(--spacing) * -4);
   }
@@ -451,6 +457,9 @@
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
+  .my-auto {
+    margin-block: auto;
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -1121,6 +1130,12 @@
   .border-amber-200 {
     border-color: var(--color-amber-200);
   }
+  .border-amber-200\/80 {
+    border-color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-amber-200) 80%, transparent);
+    }
+  }
   .border-emerald-100 {
     border-color: var(--color-emerald-100);
   }
@@ -1157,6 +1172,12 @@
   .border-rose-200 {
     border-color: var(--color-rose-200);
   }
+  .border-rose-200\/60 {
+    border-color: color-mix(in srgb, oklch(89.2% 0.058 10.001) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-rose-200) 60%, transparent);
+    }
+  }
   .border-slate-100 {
     border-color: var(--color-slate-100);
   }
@@ -1217,6 +1238,12 @@
   .bg-amber-50 {
     background-color: var(--color-amber-50);
   }
+  .bg-amber-50\/70 {
+    background-color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-50) 70%, transparent);
+    }
+  }
   .bg-amber-100 {
     background-color: var(--color-amber-100);
   }
@@ -1322,6 +1349,15 @@
   .bg-rose-50 {
     background-color: var(--color-rose-50);
   }
+  .bg-rose-50\/50 {
+    background-color: color-mix(in srgb, oklch(96.9% 0.015 12.422) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-rose-50) 50%, transparent);
+    }
+  }
+  .bg-rose-100 {
+    background-color: var(--color-rose-100);
+  }
   .bg-rose-500 {
     background-color: var(--color-rose-500);
   }
@@ -1409,6 +1445,12 @@
       background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
     }
   }
+  .bg-white\/95 {
+    background-color: color-mix(in srgb, #fff 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
+    }
+  }
   .bg-gradient-to-br {
     --tw-gradient-position: to bottom right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1619,6 +1661,9 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
+  .text-amber-300 {
+    color: var(--color-amber-300);
+  }
   .text-amber-400 {
     color: var(--color-amber-400);
   }
@@ -1950,6 +1995,10 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -2391,6 +2440,14 @@
       }
     }
   }
+  .dark\:border-amber-800\/40 {
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, oklch(47.3% 0.137 46.201) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-amber-800) 40%, transparent);
+      }
+    }
+  }
   .dark\:border-emerald-400\/20 {
     @media (prefers-color-scheme: dark) {
       border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent);
@@ -2463,6 +2520,22 @@
       }
     }
   }
+  .dark\:border-rose-800\/40 {
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, oklch(45.5% 0.188 13.697) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-rose-800) 40%, transparent);
+      }
+    }
+  }
+  .dark\:border-rose-900\/60 {
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, oklch(41% 0.159 10.272) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-rose-900) 60%, transparent);
+      }
+    }
+  }
   .dark\:border-slate-700 {
     @media (prefers-color-scheme: dark) {
       border-color: var(--color-slate-700);
@@ -2515,6 +2588,11 @@
       background-color: color-mix(in oklab, #0f0f1a 90%, transparent);
     }
   }
+  .dark\:bg-\[\#0f0f1a\]\/95 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in oklab, #0f0f1a 95%, transparent);
+    }
+  }
   .dark\:bg-\[\#080811\] {
     @media (prefers-color-scheme: dark) {
       background-color: #080811;
@@ -2560,6 +2638,22 @@
       }
     }
   }
+  .dark\:bg-amber-900\/40 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-amber-900) 40%, transparent);
+      }
+    }
+  }
+  .dark\:bg-amber-950\/20 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-amber-950) 20%, transparent);
+      }
+    }
+  }
   .dark\:bg-amber-950\/40 {
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 40%, transparent);
@@ -2826,6 +2920,22 @@
       }
     }
   }
+  .dark\:bg-rose-900\/40 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-rose-900) 40%, transparent);
+      }
+    }
+  }
+  .dark\:bg-rose-950\/20 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(27.1% 0.105 12.094) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-rose-950) 20%, transparent);
+      }
+    }
+  }
   .dark\:bg-slate-700 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-slate-700);
@@ -3372,6 +3482,15 @@
       }
     }
   }
+  .dark\:hover\:text-white {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-white);
+        }
+      }
+    }
+  }
   .dark\:hover\:text-white\/60 {
     @media (prefers-color-scheme: dark) {
       &:hover {