@retrivora-ai/rag-engine 1.9.7 → 1.9.9

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.9.7",
+  "version": "1.9.9",
   "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": "MIT",
+  "license": "UNLICENSED",
   "keywords": [
     "rag",
     "retrieval-augmented-generation",
@@ -72,16 +72,21 @@
     "README.md"
   ],
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
+    "dev": "npx @tailwindcss/cli -i src/tailwind.css -o src/index.css && tsup src/index.ts src/handlers/index.ts src/server.ts --format cjs,esm --watch --tsconfig tsconfig.build.json --external react,react-dom,next,mongodb,pg,openai,@anthropic-ai/sdk,@pinecone-database/pinecone,axios,lucide-react,mammoth,pdf-parse,react-markdown,remark-gfm,next-themes,langchain,@langchain/core,@langchain/openai,llamaindex --inject-style",
+    "build": "npm run build:pkg",
     "build:pkg": "npx @tailwindcss/cli -i src/tailwind.css -o src/index.css && tsup src/index.ts src/handlers/index.ts src/server.ts --format cjs,esm --dts --clean --no-splitting --tsconfig tsconfig.build.json --external react,react-dom,next,mongodb,pg,openai,@anthropic-ai/sdk,@pinecone-database/pinecone,axios,lucide-react,mammoth,pdf-parse,react-markdown,remark-gfm,next-themes,langchain,@langchain/core,@langchain/openai,llamaindex --inject-style && npx @tailwindcss/cli -i src/tailwind.css -o dist/index.css && rm src/index.css",
-    "start": "next start",
     "lint": "eslint",
-    "prepublishOnly": "npm run build:pkg"
+    "clean": "rm -rf dist"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "next": ">=15.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.95.1",
@@ -91,7 +96,6 @@
     "@types/papaparse": "^5.5.2",
     "axios": "^1.15.0",
     "lucide-react": "^1.8.0",
-    "next": "^16.2.6",
     "next-themes": "^0.4.6",
     "openai": "^6.34.0",
     "papaparse": "^5.5.3",
@@ -122,6 +126,7 @@
     "dotenv": "^17.4.2",
     "eslint": "^9",
     "eslint-config-next": "16.2.4",
+    "next": "16.2.10",
     "tailwindcss": "^4",
     "tsup": "^8.5.1",
     "typescript": "^5"

package/src/app/constants.tsx

@@ -17,6 +17,8 @@ import {
     FileText,
     Puzzle,
     MessageSquare,
+    Cpu,
+    Cloud,
 } from 'lucide-react';
 import { ArchitectureCardProps, Snippet, PipelineStep, ProviderPill } from './types';
 
@@ -51,6 +53,8 @@ export const AI_MODELS: ProviderPill[] = [
     { Icon: Sparkles, label: 'OpenAI' },
     { Icon: Bot, label: 'Anthropic' },
     { Icon: Brain, label: 'Gemini' },
+    { Icon: Cpu, label: 'Groq' },
+    { Icon: Cloud, label: 'Qwen' },
     { Icon: Code, label: 'Copilot' },
     { Icon: Terminal, label: 'LiteLLM' },
 ];
@@ -130,23 +134,49 @@ const { reply, sources } = await pipeline.ask('How does Retrivora work?');`,
         id: 'handlers',
         title: 'Route Handlers',
         language: 'typescript',
-        description: 'Deploy production-ready API endpoints in seconds using pre-built factories.',
-        code: `// src/app/api/retrivora/[[...retrivora]]/route.ts
-import { createRagHandler } from '@retrivora-ai/rag-engine/handlers';
+        description: 'Mount pre-built API endpoints. Configuration is automatically read from environment variables, or can be passed explicitly.',
+        code: `// ─── OPTION A: ZERO CONFIG (Reads from environment variables) ───
+// src/app/api/chat/route.ts
+import { createStreamHandler } from '@retrivora-ai/rag-engine/handlers';
+export const POST = createStreamHandler();
+
+// ─── OPTION B: EXPLICIT CONFIGURATION ───
+// src/app/api/chat/route.ts
+import { createStreamHandler } from '@retrivora-ai/rag-engine/handlers';
 
-// Single catch-all handler for GET /health and POST /chat, upload, suggestions
-export const { GET, POST } = createRagHandler();`,
+export const POST = createStreamHandler({
+  vectorDb: {
+    provider: 'pinecone',
+    apiKey: process.env.CUSTOM_PINECONE_KEY,
+    indexName: 'docs-index',
+  },
+  llm: {
+    provider: 'openai',
+    apiKey: process.env.CUSTOM_OPENAI_KEY,
+    model: 'gpt-4o',
+  }
+});`,
     },
     {
         id: 'ui',
         title: 'React Components',
         language: 'typescript',
-        description: 'Embed beautiful, themeable AI interfaces with headless logic or pre-built widgets.',
+        description: 'Configure and embed themeable UI widgets using the ConfigProvider context.',
         code: `import { ConfigProvider, ChatWidget } from '@retrivora-ai/rag-engine';
 
 export default function Layout({ children }) {
   return (
-    <ConfigProvider config={{ projectId: 'demo' }}>
+    <ConfigProvider config={{
+      projectId: 'my-project-id',
+      ui: {
+        title: 'Retrivora Assistant',
+        welcomeMessage: 'Hi! Ask me anything about our software.',
+        primaryColor: '#4f46e5',  // Custom primary brand color
+        accentColor: '#8b5cf6',   // Custom accent gradient color
+        borderRadius: 'lg',       // 'none' | 'sm' | 'md' | 'lg' | 'xl'
+        allowUpload: true,        // Toggle custom file uploading
+      }
+    }}>
       {children}
       <ChatWidget position="bottom-right" />
     </ConfigProvider>

package/src/app/page.tsx

@@ -6,6 +6,7 @@ import { Navbar } from '@/components/Navbar';
 import { Hero } from '@/components/Hero';
 import { Lifecycle } from '@/components/Lifecycle';
 import { ArchitectureCardsSection } from '@/components/ArchitectureCardsSection';
+import { RagPatternsSection } from '@/components/RagPatternsSection';
 import { Documentation } from '@/components/Documentation';
 import { ChatWidget } from '@/components/ChatWidget';
 
@@ -17,6 +18,7 @@ export default function HomePage() {
       <div className="relative z-10 container mx-auto px-6 py-12">
         <Hero />
         <Lifecycle />
+        <RagPatternsSection />
         <ArchitectureCardsSection />
         <Documentation />
       </div>

package/src/components/ChatWidget.tsx

@@ -46,7 +46,7 @@ const GEMINI_STYLES = `
   }
 `;
 
-export function ChatWidget({ position = 'bottom-right', onAddToCart, apiUrl, headers }: ChatWidgetProps) {
+export function ChatWidget({ position = 'bottom-right', onAddToCart, apiUrl, retrivoraApiBase, headers }: ChatWidgetProps) {
   const { ui } = useConfig();
   const [isOpen, setIsOpen] = useState(false);
   const [hasUnread, setHasUnread] = useState(false);
@@ -147,6 +147,7 @@ export function ChatWidget({ position = 'bottom-right', onAddToCart, apiUrl, hea
           isMaximized={isMaximized}
           onAddToCart={onAddToCart}
           apiUrl={apiUrl}
+          retrivoraApiBase={retrivoraApiBase}
           headers={headers}
         />
         {/* Pointer (Tail) */}

package/src/components/ChatWindow.tsx

@@ -64,6 +64,7 @@ export function ChatWindow({
   isMaximized = false,
   onAddToCart,
   apiUrl,
+  retrivoraApiBase,
   headers
 }: ChatWindowProps) {
   const { ui, projectId } = useConfig();
@@ -73,9 +74,10 @@ export function ChatWindow({
   const windowRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const { messages, send, clear, isLoading, error, stop } = useRagChat(projectId, {
+  const { messages, send, clear, isLoading, error, stop, submitFeedback } = useRagChat(projectId, {
     namespace: projectId,
     apiUrl,
+    retrivoraApiBase,
     headers,
   });
 
@@ -376,6 +378,7 @@ export function ChatWindow({
               accentColor={ui.accentColor}
               onAddToCart={onAddToCart}
               viewportSize={viewportSize}
+              onFeedback={submitFeedback}
             />
           ))
         )}

package/src/components/CodeViewer.tsx

@@ -14,35 +14,40 @@ export function CodeViewer({ snippet }: { snippet: Snippet }) {
   };
 
   return (
-    <div className="flex flex-col h-full rounded-2xl border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-slate-900/50 shadow-lg overflow-hidden min-h-[440px]">
-      <div className="flex items-center justify-between px-5 py-3 border-b border-slate-200 dark:border-white/10 bg-white dark:bg-slate-900">
-        <div className="flex items-center gap-3">
+    <div className="flex flex-col rounded-2xl border border-white/8 overflow-hidden min-h-[300px] shadow-xl">
+      {/* VS Code-style chrome header */}
+      <div className="flex items-center justify-between px-5 py-3 border-b border-white/5 bg-[#0d0d1a]">
+        <div className="flex items-center gap-4">
           <div className="flex gap-1.5">
-            <div className="w-2.5 h-2.5 rounded-full bg-red-500" />
-            <div className="w-2.5 h-2.5 rounded-full bg-yellow-500" />
-            <div className="w-2.5 h-2.5 rounded-full bg-green-500" />
+            <div className="w-2.5 h-2.5 rounded-full bg-rose-500/80" />
+            <div className="w-2.5 h-2.5 rounded-full bg-amber-500/80" />
+            <div className="w-2.5 h-2.5 rounded-full bg-emerald-500/80" />
           </div>
-          <span className="text-[10px] font-mono text-slate-400 dark:text-white/30 uppercase tracking-widest ml-2">{snippet.language}</span>
+          <span className="text-[10px] font-mono text-white/25 uppercase tracking-widest">
+            {snippet.language}
+          </span>
         </div>
         <button
           onClick={handleCopy}
-          className="flex items-center gap-2 text-[10px] font-bold text-slate-500 dark:text-white/40 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all active:scale-95"
+          className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-bold text-white/35 hover:text-white/80 hover:bg-white/5 transition-all active:scale-95"
         >
           {copied ? (
             <>
-              <Check size={14} className="text-emerald-500" />
-              <span className="text-emerald-500">Copied!</span>
+              <Check size={12} className="text-emerald-400" />
+              <span className="text-emerald-400">Copied!</span>
             </>
           ) : (
             <>
-              <Copy size={14} />
-              <span>Copy Code</span>
+              <Copy size={12} />
+              Copy Code
             </>
           )}
         </button>
       </div>
-      <div className="p-8 font-mono text-[12px] leading-relaxed overflow-auto custom-scrollbar flex-grow bg-[#0f172a] text-indigo-50">
-        <pre className="whitespace-pre">
+
+      {/* Code body */}
+      <div className="p-6 font-mono text-[12px] leading-relaxed overflow-auto flex-grow bg-[#080818]">
+        <pre className="whitespace-pre text-indigo-200/85">
           <code>{snippet.code}</code>
         </pre>
       </div>

package/src/components/MarkdownComponents.tsx

@@ -116,10 +116,11 @@ export function createMarkdownComponents({
             />
           );
         }
+        return <CodeBlock language={lang}>{content}</CodeBlock>;
       }
 
       return (
-        <code className={className} {...props}>
+        <code className="px-1.5 py-0.5 rounded bg-slate-100 dark:bg-white/10 text-rose-600 dark:text-rose-400 font-mono text-[11px]" {...props}>
           {typeof children === 'string' || typeof children === 'number'
             ? children
             : JSON.stringify(children)}
@@ -129,6 +130,48 @@ export function createMarkdownComponents({
   };
 }
 
+function CodeBlock({ children, language }: { children: string; language?: string }) {
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(children);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (e) {
+      console.warn('Failed to copy code', e);
+    }
+  };
+
+  return (
+    <div className="not-prose my-4 rounded-xl border border-slate-200 dark:border-white/10 overflow-hidden bg-slate-900 text-slate-100 shadow-lg select-text">
+      <div className="flex items-center justify-between px-4 py-2 bg-slate-950 border-b border-slate-800 text-xs font-semibold text-slate-400 select-none">
+        <span className="font-mono lowercase">{language || 'code'}</span>
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-1.5 px-2 py-1 rounded hover:bg-slate-800 hover:text-slate-250 transition-colors cursor-pointer text-slate-400 border border-transparent hover:border-slate-800"
+          type="button"
+        >
+          {copied ? (
+            <>
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" className="text-emerald-500"><polyline points="20 6 9 17 4 12"/></svg>
+              <span className="text-emerald-500">Copied!</span>
+            </>
+          ) : (
+            <>
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+              <span>Copy</span>
+            </>
+          )}
+        </button>
+      </div>
+      <div className="p-4 overflow-x-auto font-mono text-[11px] leading-relaxed text-slate-200 bg-slate-900/90 whitespace-pre">
+        <code>{children}</code>
+      </div>
+    </div>
+  );
+}
+
 /** Safely render table cell children that might be plain objects. */
 function normaliseChild(children: unknown): React.ReactNode {
   if (