@retrivora-ai/rag-engine 0.1.0

package/src/app/page.tsx

@@ -0,0 +1,506 @@
+'use client';
+
+import React from 'react';
+import {
+  Zap,
+  GitBranch,
+  HeartPulse,
+  Database,
+  Layers,
+  Bot,
+  Brain,
+  Rabbit,
+  FileText,
+  Search,
+  Puzzle,
+  MessageSquare,
+  ExternalLink,
+  Package,
+} from 'lucide-react';
+import { ChatWindow } from '@/components/ChatWindow';
+import { ChatWidget } from '@/components/ChatWidget';
+import { useConfig } from '@/components/ConfigProvider';
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { Check, Copy } from 'lucide-react';
+import pkg from '../../package.json';
+
+/**
+ * Custom hook for copy-to-clipboard functionality
+ */
+function useCopyToClipboard() {
+  const [copied, setCopied] = React.useState<string | null>(null);
+
+  const copy = (text: string, id: string) => {
+    navigator.clipboard.writeText(text);
+    setCopied(id);
+    setTimeout(() => setCopied(null), 2000);
+  };
+
+  return { copied, copy };
+}
+
+// ── Feature pills data ────────────────────────────────────────────────────────
+const FEATURE_PILLS = [
+  { Icon: Database, label: 'MongoDB' },
+  { Icon: Layers, label: 'PostgreSQL' },
+  { Icon: Zap, label: 'Pinecone' },
+  { Icon: Bot, label: 'Claude' },
+  { Icon: Brain, label: 'Gemini' },
+  { Icon: MessageSquare, label: 'Copilot' },
+  { Icon: Rabbit, label: 'Ollama' },
+  { Icon: Package, label: 'ChromaDB' },
+] as const;
+
+// ── Pipeline step cards ───────────────────────────────────────────────────────
+const PIPELINE_STEPS = [
+  {
+    step: '01',
+    Icon: FileText,
+    title: 'Ingest',
+    desc: 'Universal support for PDF, DOCX, CSV, and JSON. Documents are parsed, chunked, and embedded.',
+    colors: { from: '#10b981', to: '#14b8a6' }, // Emerald -> Teal
+  },
+  {
+    step: '02',
+    Icon: Search,
+    title: 'Retrieve',
+    desc: 'Queries are converted to vectors. Semantic search finds context across any configured Vector DB.',
+    colors: { from: '#14b8a6', to: '#06b6d4' }, // Teal -> Cyan
+  },
+  {
+    step: '03',
+    Icon: Puzzle,
+    title: 'Augment',
+    desc: 'Retrieved context is injected into the LLM prompt with namespaced project isolation.',
+    colors: { from: '#06b6d4', to: '#3b82f6' }, // Cyan -> Blue
+  },
+  {
+    step: '04',
+    Icon: MessageSquare,
+    title: 'Generate',
+    desc: 'Providers like OpenAI, Anthropic, or Gemini produce grounded, source-cited responses.',
+    colors: { from: '#3b82f6', to: '#6366f1' }, // Blue -> Indigo
+  },
+] as const;
+
+export default function HomePage() {
+  const { ui } = useConfig();
+  const { copied, copy } = useCopyToClipboard();
+
+  return (
+    <main className="min-h-screen bg-slate-50 dark:bg-[#080811] relative transition-colors duration-300">
+      {/* ── Ambient gradient background ── */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div
+          className="absolute -top-40 -left-40 w-[600px] h-[600px] rounded-full opacity-20 blur-3xl"
+          style={{ background: ui.primaryColor }}
+        />
+        <div
+          className="absolute -bottom-40 -right-40 w-[600px] h-[600px] rounded-full opacity-15 blur-3xl"
+          style={{ background: ui.accentColor }}
+        />
+        {/* Grid pattern */}
+        <div
+          className="absolute inset-0 opacity-[0.05] dark:opacity-[0.03]"
+          style={{
+            backgroundImage:
+              'linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px)',
+            backgroundSize: '48px 48px',
+          }}
+        />
+      </div>
+
+      {/* ── Navbar ── */}
+      <nav className="sticky top-0 z-50 flex items-center justify-between px-8 py-5 border-b border-slate-200 dark:border-white/5 bg-white/80 dark:bg-[#080811]/80 backdrop-blur-md">
+        <div className="flex items-center gap-3 group cursor-default">
+          <div className="relative">
+            <div
+              className="w-10 h-10 rounded-xl flex items-center justify-center shadow-lg relative z-10 overflow-hidden transition-transform group-hover:scale-110 duration-500"
+              style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
+            >
+              <Zap className="w-5 h-5 text-white animate-pulse" />
+              <div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity" />
+            </div>
+            {/* Logo Glow */}
+            <div
+              className="absolute inset-0 blur-lg opacity-40 group-hover:opacity-80 transition-opacity"
+              style={{ background: ui.primaryColor }}
+            />
+          </div>
+          <div className="flex flex-col -gap-0.5">
+            <span className="font-black text-transparent bg-clip-text text-xl tracking-tight leading-none"
+              style={{ backgroundImage: `linear-gradient(to right, ${ui.primaryColor}, ${ui.accentColor})` }}
+            >
+              Retrivora&nbsp;AI
+            </span>
+            <div className="flex items-center gap-1.5">
+              <span className="font-bold text-slate-900 dark:text-white text-[10px] tracking-[0.15em] uppercase opacity-70">Accelerator</span>
+              <span className="text-[9px] px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-white/5 text-slate-500 dark:text-white/40 font-mono border border-slate-200/50 dark:border-white/10">v{pkg.version}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <ThemeToggle />
+          <a
+            href="https://www.npmjs.com/package/@abhinav1201/rag-ai-accelerator"
+            target="_blank"
+            rel="noreferrer"
+            className="text-slate-500 hover:text-[#CB3837] dark:text-white/40 dark:hover:text-[#CB3837] text-sm transition-colors flex items-center gap-1.5"
+          >
+            <Package className="w-4 h-4" />
+            NPM
+          </a>
+          <a
+            href="https://github.com/abhinav1201/ai-accelerator"
+            target="_blank"
+            rel="noreferrer"
+            className="text-slate-500 hover:text-slate-900 dark:text-white/40 dark:hover:text-white/70 text-sm transition-colors flex items-center gap-1.5"
+          >
+            <GitBranch className="w-4 h-4" />
+            GitHub
+          </a>
+          <a
+            href="/api/health"
+            target="_blank"
+            rel="noreferrer"
+            className="px-3 py-1.5 rounded-lg text-xs border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/50 hover:text-slate-900 dark:hover:text-white/80 hover:bg-slate-100 dark:hover:bg-white/5 transition-all flex items-center gap-1.5"
+          >
+            <HeartPulse className="w-3.5 h-3.5" />
+            Health
+          </a>
+        </div>
+      </nav>
+
+      {/* ── Hero + Chat layout ── */}
+      <div className="relative z-10 container mx-auto px-6 py-12">
+        <div className="grid lg:grid-cols-2 gap-12 items-start">
+          {/* Left — Hero copy */}
+          <div className="flex flex-col gap-6 pt-4">
+            <div
+              className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-medium border w-fit"
+              style={{
+                borderColor: `${ui.primaryColor}40`,
+                color: ui.primaryColor,
+                background: `${ui.primaryColor}10`,
+              }}
+            >
+              <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background: ui.primaryColor }} />
+              Dynamic & Universal Retrivora AI
+            </div>
+
+            <h1 className="text-5xl md:text-7xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">
+              The Universal Bridge <br />
+              <span
+                className="text-transparent bg-clip-text"
+                style={{ backgroundImage: `linear-gradient(to right, ${ui.primaryColor}, ${ui.accentColor})` }}
+              >
+                for Generative AI
+              </span>
+            </h1>
+            <p className="text-lg md:text-xl text-slate-600 dark:text-white/40 max-w-2xl mx-auto leading-relaxed">
+              Retrivora AI is a vendor-agnostic RAG engine that connects any Document to any LLM and Vector Database in minutes.
+            </p>
+
+            {/* Feature pills */}
+            <div className="flex flex-wrap gap-3 mt-2">
+              {FEATURE_PILLS.map(({ Icon, label }) => (
+                <span
+                  key={label}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 text-sm hover:bg-slate-50 dark:hover:bg-white/8 transition-all cursor-default shadow-sm dark:shadow-none"
+                >
+                  <Icon className="w-3.5 h-3.5" style={{ color: ui.primaryColor }} />
+                  {label}
+                </span>
+              ))}
+            </div>
+
+            {/* Stats */}
+            <div className="grid grid-cols-3 gap-4 mt-4 pt-4 border-t border-slate-200 dark:border-white/10">
+              {[
+                { value: '6+', label: 'Vector DBs' },
+                { value: '5+', label: 'LLM Providers' },
+                { value: 'Universal', label: 'File Parsing' },
+              ].map(({ value, label }) => (
+                <div key={label} className="text-center">
+                  <div
+                    className="text-2xl font-bold bg-clip-text text-transparent"
+                    style={{ backgroundImage: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
+                  >
+                    {value}
+                  </div>
+                  <div className="text-slate-500 dark:text-white/40 text-xs mt-0.5">{label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right — Full chat window */}
+          <div className="lg:sticky lg:top-6">
+            <ChatWindow className="w-full" style={{ height: '620px' } as React.CSSProperties} />
+          </div>
+        </div>
+
+        {/* ── Architecture section ── */}
+        <div className="mt-24 mb-12">
+          <h2 className="text-2xl font-bold text-slate-900 dark:text-white text-center mb-2">The RAG Lifecycle</h2>
+          <p className="text-slate-500 dark:text-white/40 text-center text-sm mb-10">
+            Automated ingestion, semantic retrieval, and grounded generation
+          </p>
+
+          <div className="relative max-w-5xl mx-auto py-12">
+            {/* Center Spine Line */}
+            <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-slate-200 dark:bg-white/10 -translate-x-1/2 hidden md:block" />
+
+            <div className="space-y-12 md:space-y-0">
+              {PIPELINE_STEPS.map(({ step, Icon, title, desc, colors }, index) => {
+                const isLeft = index % 2 === 0;
+                return (
+                  <div
+                    key={step}
+                    className={`relative flex flex-col md:flex-row items-center gap-8 cursor-pointer ${isLeft ? 'md:flex-row' : 'md:flex-row-reverse'
+                      }`}
+                  >
+                    {/* Content Card */}
+                    <div className={`w-full md:w-1/2 relative flex ${isLeft ? 'justify-end' : 'justify-start'}`}>
+                      {/* Branch Line (Connecting icon to card) */}
+                      <div className={`absolute top-1/2 -translate-y-1/2 h-0.5 hidden md:block opacity-30 ${isLeft ? '-right-8 w-8' : '-left-8 w-8'}`} style={{ backgroundColor: colors.from }} />
+
+                      <div className="relative p-6 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/3 hover:bg-slate-50 dark:hover:bg-white/5 transition-all hover:border-slate-300 dark:hover:border-white/20 shadow-sm dark:shadow-none max-w-md text-left overflow-hidden group">
+                        {/* Dissolved Background Step Number */}
+                        <div className="absolute -right-2 -bottom-4 text-7xl font-bold opacity-[0.1] dark:opacity-[0.15] pointer-events-none select-none italic group-hover:scale-110 transition-transform duration-500" style={{ color: colors.from }}>
+                          {step}
+                        </div>
+
+                        <h3 className="font-semibold text-slate-900 dark:text-white mb-2 text-lg relative z-10 flex items-center gap-2">
+                          <Icon className="w-5 h-5 opacity-80" style={{ color: colors.from }} />
+                          {title}
+                        </h3>
+                        <p className="text-slate-600 dark:text-white/40 text-sm leading-relaxed relative z-10">{desc}</p>
+                      </div>
+                    </div>
+
+                    {/* Center Icon Node */}
+                    <div
+                      className="relative z-10 w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-xl transition-transform hover:scale-110 border-4 border-slate-50 dark:border-[#080811]"
+                      style={{ background: `linear-gradient(135deg, ${colors.from}, ${colors.to})` }}
+                    >
+                      <Icon className="w-6 h-6 text-white" />
+                    </div>
+
+                    {/* Spacer for the other side */}
+                    <div className="hidden md:block md:w-1/2" />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* ── How to Use Section ── */}
+        <div className="mt-32 max-w-5xl mx-auto mb-24 relative">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">How to Use</h2>
+            <p className="text-slate-600 dark:text-white/40 max-w-2xl mx-auto">
+              Integrate universal RAG capabilities into your Next.js application with just a few lines of code.
+            </p>
+          </div>
+
+          <div className="relative grid gap-12">
+            {/* Vertical Connector Line */}
+            <div className="absolute left-[44px] top-12 bottom-12 w-0.5 bg-slate-200 dark:bg-white/5 hidden md:block" />
+
+            {/* Step 1: Install */}
+            <div className="relative z-10 group">
+              <div className="flex flex-col md:flex-row items-start gap-8 p-8 rounded-3xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/2 backdrop-blur-sm transition-all hover:shadow-2xl hover:shadow-indigo-500/10 overflow-hidden">
+                {/* Dissolved Background Step Number */}
+                <div className="absolute -right-2 -bottom-6 text-9xl font-bold opacity-[0.08] dark:opacity-[0.12] pointer-events-none select-none italic group-hover:scale-110 transition-transform duration-700" style={{ color: ui.primaryColor }}>
+                  01
+                </div>
+
+                <div
+                  className="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold shrink-0 shadow-xl transition-transform group-hover:scale-110 relative z-10"
+                  style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
+                >
+                  <Package className="w-6 h-6" />
+                </div>
+                <div className="flex-1 w-full relative z-10">
+                  <div className="flex items-center justify-between mb-2">
+                    <h3 className="text-xl font-semibold text-slate-900 dark:text-white">Install the package</h3>
+                    <span className="text-[10px] font-mono text-slate-400 bg-slate-100 dark:bg-white/5 px-2 py-0.5 rounded">Terminal</span>
+                  </div>
+                  <p className="text-slate-600 dark:text-white/40 mb-6 text-sm">Add the Retrivora AI core to your project dependencies.</p>
+
+                  <div className="relative group/code">
+                    <div className="bg-slate-950 rounded-xl p-5 font-mono text-sm text-indigo-300 border border-white/5 flex items-center justify-between overflow-x-auto shadow-inner">
+                      <span className="whitespace-nowrap">$ npm install @abhinav1201/rag-ai-accelerator</span>
+                      <button
+                        onClick={() => copy('npm install @abhinav1201/rag-ai-accelerator', 'step1')}
+                        className="ml-4 p-2 rounded-lg bg-white/5 hover:bg-white/10 text-white/50 hover:text-white transition-all flex-shrink-0"
+                        title="Copy to clipboard"
+                      >
+                        {copied === 'step1' ? <Check className="w-4 h-4 text-emerald-400" /> : <Copy className="w-4 h-4" />}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 2 & 3 Grid */}
+            <div className="grid lg:grid-cols-2 gap-8">
+              {/* Step 2: Configure UI */}
+              <div className="relative z-10 group">
+                <div className="h-full flex flex-col p-8 rounded-3xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/2 backdrop-blur-sm transition-all hover:shadow-2xl hover:shadow-indigo-500/10 overflow-hidden">
+                  {/* Dissolved Background Step Number */}
+                  <div className="absolute -right-2 -bottom-6 text-8xl font-bold opacity-[0.08] dark:opacity-[0.12] pointer-events-none select-none italic group-hover:scale-110 transition-transform duration-700" style={{ color: ui.primaryColor }}>
+                    02
+                  </div>
+
+                  <div className="flex items-start gap-6 mb-6 relative z-10">
+                    <div
+                      className="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold shrink-0 shadow-xl transition-transform group-hover:scale-110"
+                      style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
+                    >
+                      <Layers className="w-6 h-6" />
+                    </div>
+                    <div>
+                      <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-1">Setup UI</h3>
+                      <p className="text-slate-600 dark:text-white/40 text-xs">Drop the widget into your layout.</p>
+                    </div>
+                  </div>
+
+                  <div className="relative flex-1 group/code z-10">
+                    <div className="absolute top-3 right-3 z-20">
+                      <button
+                        onClick={() => copy(`import { ConfigProvider, ChatWidget } from '@abhinav1201/rag-ai-accelerator';\n\n<ConfigProvider config={{ projectId: 'demo' }}>\n  {children}\n  <ChatWidget position="bottom-right" />\n</ConfigProvider>`, 'step2')}
+                        className="p-1.5 rounded-md bg-white/5 hover:bg-white/10 text-white/30 hover:text-white transition-all"
+                      >
+                        {copied === 'step2' ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
+                      </button>
+                    </div>
+                    <div className="bg-slate-950 rounded-xl p-4 font-mono text-[11px] text-slate-400 border border-white/5 h-full overflow-x-auto">
+                      <div className="text-[10px] text-white/20 mb-3 flex items-center gap-1.5 uppercase tracking-widest font-sans">
+                        <FileText className="w-3 h-3" /> src/app/layout.tsx
+                      </div>
+                      <pre className="text-slate-300">
+                        {`import { ConfigProvider, ChatWidget } from '@abhinav1201/rag-ai-accelerator';
+
+<ConfigProvider config={{ projectId: 'demo' }}>
+  {children}
+  <ChatWidget position="bottom-right" />
+</ConfigProvider>`}
+                      </pre>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Step 3: API Handler */}
+              <div className="relative z-10 group">
+                <div className="h-full flex flex-col p-8 rounded-3xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/2 backdrop-blur-sm transition-all hover:shadow-2xl hover:shadow-indigo-500/10 overflow-hidden">
+                  {/* Dissolved Background Step Number */}
+                  <div className="absolute -right-2 -bottom-6 text-8xl font-bold opacity-[0.08] dark:opacity-[0.12] pointer-events-none select-none italic group-hover:scale-110 transition-transform duration-700" style={{ color: ui.primaryColor }}>
+                    03
+                  </div>
+
+                  <div className="flex items-start gap-6 mb-6 relative z-10">
+                    <div
+                      className="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold shrink-0 shadow-xl transition-transform group-hover:scale-110"
+                      style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
+                    >
+                      <Search className="w-6 h-6" />
+                    </div>
+                    <div>
+                      <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-1">Mount Routes</h3>
+                      <p className="text-slate-600 dark:text-white/40 text-xs">Bridge your server to the AI.</p>
+                    </div>
+                  </div>
+
+                  <div className="relative flex-1 group/code z-10">
+                    <div className="absolute top-3 right-3 z-20">
+                      <button
+                        onClick={() => copy(`import { createChatHandler, getRagConfig } from '@abhinav1201/rag-ai-accelerator/server';\n\nexport const POST = createChatHandler(getRagConfig());`, 'step3')}
+                        className="p-1.5 rounded-md bg-white/5 hover:bg-white/10 text-white/30 hover:text-white transition-all"
+                      >
+                        {copied === 'step3' ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
+                      </button>
+                    </div>
+                    <div className="bg-slate-950 rounded-xl p-4 font-mono text-[11px] text-slate-400 border border-white/5 h-full overflow-x-auto">
+                      <div className="text-[10px] text-white/20 mb-3 flex items-center gap-1.5 uppercase tracking-widest font-sans">
+                        <FileText className="w-3 h-3" /> api/chat/route.ts
+                      </div>
+                      <pre className="text-slate-300">
+                        {`import { createChatHandler, getRagConfig } from '@abhinav1201/rag-ai-accelerator/server';
+
+export const POST = createChatHandler(getRagConfig());`}
+                      </pre>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 4: Environment Variables */}
+            <div className="relative z-10 group">
+              <div className="flex flex-col md:flex-row items-start gap-8 p-8 rounded-3xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/2 backdrop-blur-sm transition-all hover:shadow-2xl hover:shadow-indigo-500/10 overflow-hidden">
+                {/* Dissolved Background Step Number */}
+                <div className="absolute -right-2 -bottom-6 text-9xl font-bold opacity-[0.08] dark:opacity-[0.12] pointer-events-none select-none italic group-hover:scale-110 transition-transform duration-700" style={{ color: ui.primaryColor }}>
+                  04
+                </div>
+
+                <div
+                  className="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold shrink-0 shadow-xl transition-transform group-hover:scale-110 relative z-10"
+                  style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
+                >
+                  <Search className="w-6 h-6" />
+                </div>
+                <div className="flex-1 w-full relative z-10">
+                  <div className="flex items-center justify-between mb-2">
+                    <h3 className="text-xl font-semibold text-slate-900 dark:text-white">Configure Environment</h3>
+                    <span className="text-[10px] font-mono text-slate-400 bg-slate-100 dark:bg-white/5 px-2 py-0.5 rounded">.env.local</span>
+                  </div>
+                  <p className="text-slate-600 dark:text-white/40 mb-6 text-sm">
+                    Essential variables for both <span className="text-slate-900 dark:text-white font-medium">Server (Adapters)</span> and <span className="text-slate-900 dark:text-white font-medium">Client (UI context)</span>.
+                  </p>
+
+                  <div className="relative group/code">
+                    <div className="absolute top-3 right-3 z-20">
+                      <button
+                        onClick={() => copy(`VECTOR_DB_PROVIDER=universal_rest\nLLM_PROVIDER=openai\nLLM_MODEL=gpt-4o\nNEXT_PUBLIC_UI_TITLE="AI Assistant"`, 'step4')}
+                        className="p-1.5 rounded-md bg-white/5 hover:bg-white/10 text-white/30 hover:text-white transition-all"
+                      >
+                        {copied === 'step4' ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
+                      </button>
+                    </div>
+                    <div className="bg-slate-950 rounded-xl p-5 font-mono text-sm text-indigo-300 border border-white/5 flex flex-col shadow-inner">
+                      <span className="text-slate-500 text-xs mb-2"># Core Providers</span>
+                      <span className="mb-1">VECTOR_DB_PROVIDER=universal_rest</span>
+                      <span className="mb-4">LLM_PROVIDER=openai</span>
+                      <span className="text-slate-500 text-xs mb-2"># Client UI (Public)</span>
+                      <span>NEXT_PUBLIC_UI_TITLE="AI Assistant"</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-16 text-center">
+            <a
+              href="https://www.npmjs.com/package/@abhinav1201/rag-ai-accelerator"
+              className="inline-flex items-center gap-3 px-8 py-4 rounded-2xl bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold hover:scale-[1.02] active:scale-[0.98] transition-all shadow-xl shadow-indigo-500/20"
+            >
+              <Package className="w-5 h-5" />
+              Get Started on NPM
+              <ExternalLink className="w-4 h-4" />
+            </a>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Floating widget demo (bottom-right corner) ── */}
+      <ChatWidget position="bottom-right" />
+    </main>
+  );
+}

package/src/components/ChatWidget.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import React, { useState } from 'react';
+import { MessageSquare, X } from 'lucide-react';
+import { ChatWindow } from './ChatWindow';
+import { useConfig } from './ConfigProvider';
+
+interface ChatWidgetProps {
+  /** Position of the floating button. Defaults to bottom-right. */
+  position?: 'bottom-right' | 'bottom-left';
+}
+
+export function ChatWidget({ position = 'bottom-right' }: ChatWidgetProps) {
+  const { ui } = useConfig();
+  const [isOpen, setIsOpen] = useState(false);
+  const [hasUnread, setHasUnread] = useState(false);
+
+  if (ui.showWidget === false) return null;
+
+  const positionClass =
+    position === 'bottom-left'
+      ? 'bottom-6 left-6'
+      : 'bottom-6 right-6';
+
+  const windowPositionClass =
+    position === 'bottom-left'
+      ? 'bottom-20 left-6'
+      : 'bottom-20 right-6';
+
+  const handleOpen = () => {
+    setIsOpen(true);
+    setHasUnread(false);
+  };
+
+  return (
+    <>
+      {/* ── Chat Window (slides up) ── */}
+      <div
+        className={`fixed z-[99] w-[380px] max-w-[calc(100vw-3rem)] transition-all duration-300 ease-in-out ${windowPositionClass} ${isOpen
+            ? 'opacity-100 translate-y-0 pointer-events-auto'
+            : 'opacity-0 translate-y-4 pointer-events-none'
+          }`}
+        style={{ height: '600px', maxHeight: 'calc(100vh - 6rem)' }}
+      >
+        <ChatWindow
+          className="h-full relative z-10"
+          showClose
+          onClose={() => setIsOpen(false)}
+        />
+        {/* Pointer (Tail) */}
+        <div
+          className={`absolute -bottom-1.5 w-4 h-4 rotate-45 border-r border-b border-slate-200 dark:border-white/10 z-0 ${
+            ui.visualStyle === 'solid' ? 'bg-white dark:bg-[#0f0f1a]' : 'bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl'
+          } ${position === 'bottom-left' ? 'left-5' : 'right-5'}`}
+        />
+      </div>
+
+      {/* ── Floating Action Button ── */}
+      <button
+        onClick={isOpen ? () => setIsOpen(false) : handleOpen}
+        className={`fixed z-[100] w-14 h-14 shadow-2xl flex items-center justify-center transition-all duration-300 cursor-pointer hover:scale-110 active:scale-95 ${
+          ui.borderRadius === 'full' ? 'rounded-full' : 'rounded-2xl'
+        } ${positionClass}`}
+        style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
+        aria-label="Open chat"
+      >
+        {/* Ripple ring */}
+        <span
+          className="absolute inset-0 rounded-full animate-ping opacity-20"
+          style={{ background: ui.primaryColor }}
+        />
+
+        <span
+          className={`transition-transform duration-300 ${isOpen ? 'rotate-90 scale-90' : 'rotate-0 scale-100'}`}
+        >
+          {isOpen
+            ? <X className="w-6 h-6 text-white" />
+            : <MessageSquare className="w-6 h-6 text-white" />
+          }
+        </span>
+
+        {/* Unread badge */}
+        {hasUnread && !isOpen && (
+          <span className="absolute top-0 right-0 w-4 h-4 bg-rose-500 rounded-full border-2 border-white flex items-center justify-center text-[9px] font-bold text-white">
+            1
+          </span>
+        )}
+      </button>
+    </>
+  );
+}