@retrivora-ai/rag-engine 1.8.0 → 1.8.2

package/src/app/page.tsx

@@ -1,335 +1,25 @@
 'use client';
 
 import React from 'react';
-import {
-  Zap,
-  GitBranch,
-  HeartPulse,
-  FileText,
-  ExternalLink,
-  Package,
-  Check,
-  Copy,
-} from 'lucide-react';
-import { ChatWindow } from '@/components/ChatWindow';
+import { AmbientBackground } from '@/components/AmbientBackground';
+import { Navbar } from '@/components/Navbar';
+import { Hero } from '@/components/Hero';
+import { Lifecycle } from '@/components/Lifecycle';
+import { ArchitectureCardsSection } from '@/components/ArchitectureCardsSection';
+import { Documentation } from '@/components/Documentation';
 import { ChatWidget } from '@/components/ChatWidget';
-import { useConfig } from '@/components/ConfigProvider';
-import { ThemeToggle } from '@/components/ThemeToggle';
-import pkg from '../../package.json';
-import { Snippet, ArchitectureCardProps } from './types';
-import {
-  LANDING_PAGE_CONTENT,
-  VECTOR_DATABASES,
-  AI_MODELS,
-  PIPELINE_STEPS,
-  SNIPPETS,
-  ARCHITECTURE_CARDS,
-  QUICK_START_STEPS,
-  API_ENDPOINTS,
-} from './constants';
-
-// ── Components ──────────────────────────────────────────────────────────────
-
-function ArchitectureCard({ icon, title, description, badge, badgeColor }: ArchitectureCardProps) {
-  return (
-    <div className="group rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 shadow-sm transition-all duration-300 hover:border-indigo-500/50 dark:hover:border-indigo-500/30 hover:shadow-xl hover:shadow-indigo-500/5">
-      <div className="mb-4 flex items-center justify-between">
-        <div className="text-3xl transition-transform duration-300 group-hover:scale-110">{icon}</div>
-        <span className={`rounded-full border px-3 py-0.5 text-[10px] font-bold uppercase tracking-wider ${badgeColor}`}>
-          {badge}
-        </span>
-      </div>
-      <h3 className="mb-2 font-bold text-slate-900 dark:text-white">{title}</h3>
-      <p className="text-xs text-slate-500 dark:text-white/40 leading-relaxed font-medium">{description}</p>
-    </div>
-  );
-}
-
-function CodeViewer({ snippet }: { snippet: Snippet }) {
-  const [copied, setCopied] = React.useState(false);
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(snippet.code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  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 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>
-          <span className="text-[10px] font-mono text-slate-400 dark:text-white/30 uppercase tracking-widest ml-2">{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"
-        >
-          {copied ? (
-            <>
-              <Check size={14} className="text-emerald-500" />
-              <span className="text-emerald-500">Copied!</span>
-            </>
-          ) : (
-            <>
-              <Copy size={14} />
-              <span>Copy Code</span>
-            </>
-          )}
-        </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>{snippet.code}</code>
-        </pre>
-      </div>
-    </div>
-  );
-}
-
-
-
-// Data moved to constants.tsx
-
-// ── Page ────────────────────────────────────────────────────────────────────
-
-function DocViewer({ activeSnippet, setActiveSnippet }: { activeSnippet: Snippet, setActiveSnippet: (s: Snippet) => void }) {
-  return (
-    <>
-      <div className="mb-6 flex flex-wrap gap-2 border-b border-slate-100 dark:border-white/5 pb-6">
-        {SNIPPETS.map((snippet) => (
-          <button
-            key={snippet.id}
-            onClick={() => setActiveSnippet(snippet)}
-            className={`px-5 py-2 rounded-xl text-[10px] font-bold uppercase tracking-wider transition-all border ${activeSnippet.id === snippet.id
-                ? 'bg-indigo-600 text-white border-indigo-600 shadow-lg shadow-indigo-200 dark:shadow-indigo-500/20 scale-105'
-                : 'bg-white dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-500 dark:text-white/40 hover:text-indigo-600 dark:hover:text-indigo-400 hover:border-indigo-300 dark:hover:border-white/20'
-              }`}
-          >
-            {snippet.title}
-          </button>
-        ))}
-      </div>
-
-      <div className="flex-grow flex flex-col gap-6 animate-in fade-in slide-in-from-bottom-2 duration-500">
-        <div className="max-w-2xl">
-          <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{activeSnippet.title}</h3>
-          <p className="text-sm text-slate-500 dark:text-white/40 leading-relaxed font-medium italic">
-            {activeSnippet.description}
-          </p>
-        </div>
-        <CodeViewer snippet={activeSnippet} />
-      </div>
-    </>
-  );
-}
 
 export default function HomePage() {
-  const { ui } = useConfig();
-  const [activeSnippet, setActiveSnippet] = React.useState<Snippet>(SNIPPETS[0]);
-
   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 }}
-        />
-        <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>
-            <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/@retrivora-ai/rag-engine" 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 ── */}
+      <AmbientBackground />
+      <Navbar />
       <div className="relative z-10 container mx-auto px-6 py-12">
-        <div className="grid lg:grid-cols-2 gap-12 items-start">
-          <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 }} />
-              {LANDING_PAGE_CONTENT.hero.badge}
-            </div>
-            <h1 className="text-5xl md:text-7xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">
-              {LANDING_PAGE_CONTENT.hero.title.split('for')[0]} <br />
-              <span className="text-transparent bg-clip-text" style={{ backgroundImage: `linear-gradient(to right, ${ui.primaryColor}, ${ui.accentColor})` }}>
-                for {LANDING_PAGE_CONTENT.hero.title.split('for')[1]}
-              </span>
-            </h1>
-            <p className="text-lg md:text-xl text-slate-600 dark:text-white/40 max-w-2xl leading-relaxed">
-              {LANDING_PAGE_CONTENT.hero.subtitle}
-            </p>
-            <div className="flex flex-col gap-4 mt-4">
-              <div className="flex flex-col gap-2">
-                <span className="text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.2em] ml-1">Vector Ecosystem</span>
-                <div className="flex flex-wrap gap-2">
-                  {VECTOR_DATABASES.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-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-white/8 transition-all shadow-sm group">
-                      <Icon className="w-3 h-3 transition-transform group-hover:scale-110" style={{ color: ui.primaryColor }} /> {label}
-                    </span>
-                  ))}
-                </div>
-              </div>
-
-              <div className="flex flex-col gap-2">
-                <span className="text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.2em] ml-1">AI Model Garden</span>
-                <div className="flex flex-wrap gap-2">
-                  {AI_MODELS.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-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-white/8 transition-all shadow-sm group">
-                      <Icon className="w-3 h-3 transition-transform group-hover:scale-110" style={{ color: ui.accentColor }} /> {label}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="lg:sticky lg:top-6">
-            <ChatWindow className="w-full" style={{ height: '620px' } as React.CSSProperties} />
-          </div>
-        </div>
-
-        {/* ── Lifecycle ── */}
-        <div className="mt-24 mb-12">
-          <h2 className="text-2xl font-bold text-slate-900 dark:text-white text-center mb-2">{LANDING_PAGE_CONTENT.lifecycle.title}</h2>
-          <div className="relative max-w-5xl mx-auto py-12">
-            <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 ${isLeft ? 'md:flex-row' : 'md:flex-row-reverse'}`}>
-                    <div className={`w-full md:w-1/2 relative flex ${isLeft ? 'justify-end' : 'justify-start'}`}>
-                      <div className="relative p-6 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/3 max-w-md text-left overflow-hidden group">
-                        <div className="absolute -right-2 -bottom-4 text-7xl font-bold opacity-[0.1] italic" style={{ color: colors.from }}>{step}</div>
-                        <h3 className="font-semibold text-slate-900 dark:text-white mb-2 text-lg flex items-center gap-2">
-                          <Icon className="w-5 h-5" style={{ color: colors.from }} /> {title}
-                        </h3>
-                        <p className="text-slate-600 dark:text-white/40 text-sm leading-relaxed">{desc}</p>
-                      </div>
-                    </div>
-                    <div className="relative z-10 w-12 h-12 rounded-2xl flex items-center justify-center shadow-xl 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>
-                    <div className="hidden md:block md:w-1/2" />
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-
-        {/* ── Architecture Cards ── */}
-        <div className="relative z-10 mt-24 mb-32 grid gap-6 sm:grid-cols-3 max-w-5xl mx-auto">
-          {ARCHITECTURE_CARDS.map((card, i) => (
-            <ArchitectureCard key={i} {...card} />
-          ))}
-        </div>
-
-        {/* ── Documentation ── */}
-        <div className="mt-32 max-w-6xl 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">{LANDING_PAGE_CONTENT.guide.title}</h2>
-            <p className="text-slate-600 dark:text-white/40 max-w-2xl mx-auto">{LANDING_PAGE_CONTENT.guide.subtitle}</p>
-          </div>
-          <div className="relative z-10 w-full grid gap-16 lg:grid-cols-[280px_1fr] items-start">
-            <aside className="flex flex-col gap-10">
-              <section>
-                <h2 className="mb-6 text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.3em] flex items-center gap-3">
-                  <FileText size={14} className="text-indigo-500" /> Quick Start
-                </h2>
-                <ol className="space-y-6">
-                  {QUICK_START_STEPS.map((step, i) => (
-                    <li key={i} className="group flex items-start gap-4">
-                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-white dark:bg-white/5 text-slate-600 dark:text-white/40 font-mono text-[10px] border border-slate-200 dark:border-white/10 shadow-sm">{i + 1}</span>
-                      <span className="text-xs text-slate-500 dark:text-white/50 font-medium leading-relaxed pt-1">{step}</span>
-                    </li>
-                  ))}
-                </ol>
-              </section>
-              <section className="rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/3 p-6 shadow-sm">
-                <h2 className="mb-6 text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.3em] flex items-center gap-3">
-                  <Zap size={14} className="text-indigo-500" /> API Endpoints
-                </h2>
-                <div className="grid gap-2.5">
-                  {API_ENDPOINTS.map((slug) => (
-                    <div key={slug} className="group flex items-center justify-between p-2 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5 hover:border-indigo-200 dark:hover:border-indigo-500/30">
-                      <span className="text-[10px] font-mono text-slate-500 dark:text-white/30 group-hover:text-indigo-600">/api/{slug}</span>
-                      <span className="text-[8px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-500/10 px-1.5 py-0.5 rounded border border-indigo-100 dark:border-indigo-500/20">POST</span>
-                    </div>
-                  ))}
-                </div>
-              </section>
-            </aside>
-            <section className="flex flex-col h-full min-h-[560px]">
-              <DocViewer activeSnippet={activeSnippet} setActiveSnippet={setActiveSnippet} />
-            </section>
-          </div>
-          <div className="mt-16 text-center">
-            <a href="https://www.npmjs.com/package/@retrivora-ai/rag-engine" 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 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>
+        <Hero />
+        <Lifecycle />
+        <ArchitectureCardsSection />
+        <Documentation />
       </div>
-
       <ChatWidget position="bottom-right" />
     </main>
   );

package/src/components/AmbientBackground.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+import { useConfig } from '@/components/ConfigProvider';
+
+export function AmbientBackground() {
+  const { ui } = useConfig();
+
+  return (
+    <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 }}
+      />
+      <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>
+  );
+}

package/src/components/ArchitectureCard.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ArchitectureCardProps } from '@/app/types';
+
+export function ArchitectureCard({ icon, title, description, badge, badgeColor }: ArchitectureCardProps) {
+  return (
+    <div className="group rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 shadow-sm transition-all duration-300 hover:border-indigo-500/50 dark:hover:border-indigo-500/30 hover:shadow-xl hover:shadow-indigo-500/5">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="text-3xl transition-transform duration-300 group-hover:scale-110">{icon}</div>
+        <span className={`rounded-full border px-3 py-0.5 text-[10px] font-bold uppercase tracking-wider ${badgeColor}`}>
+          {badge}
+        </span>
+      </div>
+      <h3 className="mb-2 font-bold text-slate-900 dark:text-white">{title}</h3>
+      <p className="text-xs text-slate-500 dark:text-white/40 leading-relaxed font-medium">{description}</p>
+    </div>
+  );
+}

package/src/components/ArchitectureCardsSection.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import React from 'react';
+import { ArchitectureCard } from '@/components/ArchitectureCard';
+import { ARCHITECTURE_CARDS } from '@/app/constants';
+
+export function ArchitectureCardsSection() {
+  return (
+    <div className="relative z-10 mt-24 mb-32 grid gap-6 sm:grid-cols-3 max-w-5xl mx-auto">
+      {ARCHITECTURE_CARDS.map((card, i) => (
+        <ArchitectureCard key={i} {...card} />
+      ))}
+    </div>
+  );
+}

package/src/components/ChatWindow.tsx

@@ -13,7 +13,9 @@ import {
   Minimize2,
   Mic,
   MicOff,
+  Paperclip,
 } from 'lucide-react';
+import { DocumentUpload } from './DocumentUpload';
 import { MessageBubble } from './MessageBubble';
 import { useConfig } from './ConfigProvider';
 import { useRagChat } from '../hooks/useRagChat';
@@ -77,6 +79,7 @@ export function ChatWindow({
   const [isSuggesting, setIsSuggesting] = useState(false);
 
   const [isListening, setIsListening] = useState(false);
+  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
   const recognitionRef = useRef<ISpeechRecognition | null>(null);
 
   // Initialize SpeechRecognition
@@ -396,6 +399,24 @@ export function ChatWindow({
         <div ref={bottomRef} />
       </div>
 
+      {/* Upload Modal Overlay */}
+      {isUploadModalOpen && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm rounded-inherit">
+          <div className="relative w-full max-w-md bg-white dark:bg-[#0f0f1a] rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
+            <button
+              onClick={() => setIsUploadModalOpen(false)}
+              className="absolute top-4 right-4 p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:text-white/80 dark:hover:bg-white/10 transition-colors z-10"
+            >
+              <X className="w-5 h-5" />
+            </button>
+            <DocumentUpload 
+              namespace={projectId} 
+              onUploadComplete={() => setIsUploadModalOpen(false)} 
+            />
+          </div>
+        </div>
+      )}
+
       {/* ── Input ── */}
       <div className={`px-4 pb-4 pt-2 border-t border-slate-200 dark:border-white/10 ${isGlass ? 'bg-transparent' : 'bg-white dark:bg-[#0f0f1a]'}`}>
         
@@ -460,6 +481,17 @@ export function ChatWindow({
             </button>
           )}
 
+          {ui.allowUpload !== false && (
+            <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"
+              title="Upload Document"
+            >
+              <Paperclip className="w-4 h-4" />
+            </button>
+          )}
+
           <button
             onClick={sendMessage}
             disabled={!input.trim() || isLoading}

package/src/components/CodeViewer.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { Check, Copy } from 'lucide-react';
+import { Snippet } from '@/app/types';
+
+export function CodeViewer({ snippet }: { snippet: Snippet }) {
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(snippet.code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  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 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>
+          <span className="text-[10px] font-mono text-slate-400 dark:text-white/30 uppercase tracking-widest ml-2">{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"
+        >
+          {copied ? (
+            <>
+              <Check size={14} className="text-emerald-500" />
+              <span className="text-emerald-500">Copied!</span>
+            </>
+          ) : (
+            <>
+              <Copy size={14} />
+              <span>Copy Code</span>
+            </>
+          )}
+        </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>{snippet.code}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}

package/src/components/ConfigProvider.tsx

@@ -22,6 +22,7 @@ export function ConfigProvider({
   const merged: ClientConfig = {
     projectId: config?.projectId || DEFAULT_CONFIG.projectId,
     ui: mergeDefined(DEFAULT_CONFIG.ui, config?.ui) as Required<UIConfig>,
+    embedding: config?.embedding,
   };
 
   return <ConfigContext.Provider value={merged}>{children}</ConfigContext.Provider>;

package/src/components/DocViewer.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { Snippet } from '@/app/types';
+import { SNIPPETS } from '@/app/constants';
+import { CodeViewer } from './CodeViewer';
+
+export function DocViewer({ activeSnippet, setActiveSnippet }: { activeSnippet: Snippet, setActiveSnippet: (s: Snippet) => void }) {
+  return (
+    <>
+      <div className="mb-6 flex flex-wrap gap-2 border-b border-slate-100 dark:border-white/5 pb-6">
+        {SNIPPETS.map((snippet) => (
+          <button
+            key={snippet.id}
+            onClick={() => setActiveSnippet(snippet)}
+            className={`px-5 py-2 rounded-xl text-[10px] font-bold uppercase tracking-wider transition-all border ${activeSnippet.id === snippet.id
+              ? 'bg-indigo-600 text-white border-indigo-600 shadow-lg shadow-indigo-200 dark:shadow-indigo-500/20 scale-105'
+              : 'bg-white dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-500 dark:text-white/40 hover:text-indigo-600 dark:hover:text-indigo-400 hover:border-indigo-300 dark:hover:border-white/20'
+              }`}
+          >
+            {snippet.title}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex-grow flex flex-col gap-6 animate-in fade-in slide-in-from-bottom-2 duration-500">
+        <div className="max-w-2xl">
+          <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{activeSnippet.title}</h3>
+          <p className="text-sm text-slate-500 dark:text-white/40 leading-relaxed font-medium italic">
+            {activeSnippet.description}
+          </p>
+        </div>
+        <CodeViewer snippet={activeSnippet} />
+      </div>
+    </>
+  );
+}

package/src/components/DocumentUpload.tsx

@@ -13,11 +13,33 @@ interface FileState {
 }
 
 export function DocumentUpload({ namespace, onUploadComplete, className = '' }: DocumentUploadProps) {
-  const { ui } = useConfig();
+  const { ui, embedding } = useConfig();
   const [fileStates, setFileStates] = useState<FileState[]>([]);
   const [isDragging, setIsDragging] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const MULTI_DIMENSION_MODELS: Record<string, number[]> = {
+    'text-embedding-3-small': [512, 1536],
+    'text-embedding-3-large': [256, 1024, 3072],
+    'nomic-embed-text': [64, 128, 256, 512, 768]
+  };
+
+  const COMMON_DIMENSIONS = [64, 128, 256, 384, 512, 768, 1024, 1536, 3072];
+  const currentModel = embedding?.model || 'unknown';
+  const defaultDimension = embedding?.dimensions || 1536;
+  
+  // Provide specific dimensions for known models, otherwise provide common ones
+  let availableDimensions = Object.entries(MULTI_DIMENSION_MODELS).find(([k]) => currentModel.includes(k))?.[1];
+  if (!availableDimensions) {
+    availableDimensions = COMMON_DIMENSIONS.includes(defaultDimension) 
+      ? COMMON_DIMENSIONS 
+      : [...COMMON_DIMENSIONS, defaultDimension].sort((a, b) => a - b);
+  }
+  
+  const isChangeable = true; // Always allow the user to select the dimension
+
+  const [dimension, setDimension] = useState(defaultDimension);
+
   const addFiles = (files: File[]) => {
     const newStates = files.map(file => ({ file, status: 'idle' as const }));
     setFileStates(prev => [...prev, ...newStates]);
@@ -60,6 +82,7 @@ export function DocumentUpload({ namespace, onUploadComplete, className = '' }:
     const formData = new FormData();
     idleFiles.forEach(s => formData.append('files', s.file));
     if (namespace) formData.append('namespace', namespace);
+    formData.append('dimension', dimension.toString());
 
     try {
       const response = await fetch('/api/upload', {
@@ -125,6 +148,26 @@ export function DocumentUpload({ namespace, onUploadComplete, className = '' }:
           className="hidden" 
           accept=".pdf,.docx,.txt,.md,.json,.csv"
         />
+
+        <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>
+          {isChangeable ? (
+            <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"
+            >
+              {availableDimensions.map(dim => (
+                <option key={dim} value={dim} className="bg-white dark:bg-slate-900">{dim}</option>
+              ))}
+            </select>
+          ) : (
+            <div className="px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-white/10 border border-slate-200 dark:border-white/10 text-slate-500 dark:text-white/50 cursor-not-allowed text-xs">
+              {dimension} (Fixed for {currentModel})
+            </div>
+          )}
+        </div>
       </div>
 
       {fileStates.length > 0 && (