Deploy Next.js Query Bot as Docker Space

.dockerignore

@@ -0,0 +1,13 @@
+node_modules
+.next
+.git
+data
+.env
+.env.*
+!.env.example
+npm-debug.log*
+*.tsbuildinfo
+.vercel
+README.md
+Dockerfile
+.dockerignore

.env.example

@@ -0,0 +1,7 @@
+# Cohere API key - used server-side only (RAG embeddings, rerank, and chat).
+# Get one at https://dashboard.cohere.com/api-keys
+COHERE_API_KEY=your_cohere_api_key_here
+
+# Vercel Blob read/write token - required in Vercel for persistent kb.json storage.
+# In local development this app falls back to data/kb.json when this is omitted.
+BLOB_READ_WRITE_TOKEN=your_vercel_blob_read_write_token_here

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+!.env.example
+
+# local knowledge base store (parsed text + embeddings)
+/data
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -0,0 +1,46 @@
+# syntax=docker/dockerfile:1
+# Hugging Face Space (Docker SDK) image for the Next.js Query Bot.
+# Multi-stage build producing a small standalone runtime that listens on :7860.
+
+FROM node:22-slim AS base
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# --- Install dependencies (cached on lockfile changes) ----------------------
+FROM base AS deps
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# --- Build the Next.js app --------------------------------------------------
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+# COHERE_API_KEY / BLOB_READ_WRITE_TOKEN are read at runtime, not build time,
+# so the build needs no secrets.
+RUN npm run build
+
+# --- Production runtime ------------------------------------------------------
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+# Hugging Face Spaces expect the app on port 7860, bound to all interfaces.
+ENV PORT=7860
+ENV HOSTNAME=0.0.0.0
+
+# Run as the non-root user Hugging Face provisions (uid 1000).
+RUN useradd -m -u 1000 user
+
+# Standalone output bundles only the files the server actually needs.
+COPY --from=builder --chown=user:user /app/public ./public
+COPY --from=builder --chown=user:user /app/.next/standalone ./
+COPY --from=builder --chown=user:user /app/.next/static ./.next/static
+
+# Writable knowledge-base store for the local fallback (used when no Vercel
+# Blob token is set). Note: a Space's filesystem is ephemeral unless you
+# attach persistent storage, so uploads reset on rebuild/restart.
+RUN mkdir -p /app/data && chown -R user:user /app/data
+
+USER user
+EXPOSE 7860
+CMD ["node", "server.js"]

app/admin/page.tsx

@@ -0,0 +1,248 @@
+'use client';
+
+import * as React from 'react';
+import { upload } from '@vercel/blob/client';
+import AdminHeader from '@/components/AdminHeader';
+import FileUploadPanel from '@/components/FileUploadPanel';
+import QABuilderPanel from '@/components/QABuilderPanel';
+import { KBFile, KBPair } from '@/lib/kb-data';
+
+const DIRECT_UPLOAD_LIMIT_BYTES = 3.5 * 1024 * 1024;
+
+function makeUploadPath(file: File): string {
+  const safeName = file.name
+    .replace(/[/\\?%*:|"<>]/g, '-')
+    .replace(/\s+/g, ' ')
+    .trim();
+  return `uploads/${Date.now()}-${safeName}`;
+}
+
+async function readJsonResponse(res: Response) {
+  const text = await res.text();
+  try {
+    return text ? JSON.parse(text) : {};
+  } catch {
+    throw new Error(text || `Request failed (${res.status})`);
+  }
+}
+
+export default function AdminPage() {
+  const [files, setFiles] = React.useState<KBFile[]>([]);
+  const [qaList, setQaList] = React.useState<KBPair[]>([]);
+  const [lastUpdated, setLastUpdated] = React.useState<string>('Just now');
+
+  // Ids currently being deleted, so the cards can show a "Removing…" state.
+  const [deletingFileIds, setDeletingFileIds] = React.useState<Set<string>>(new Set());
+  const [deletingQaIds, setDeletingQaIds] = React.useState<Set<string>>(new Set());
+
+  // Load the knowledge base from the server on mount.
+  React.useEffect(() => {
+    (async () => {
+      try {
+        const [filesRes, qaRes] = await Promise.all([
+          fetch('/api/documents'),
+          fetch('/api/qa'),
+        ]);
+        const [filesData, qaData] = await Promise.all(
+          [filesRes, qaRes].map(async (res) => {
+            const data = await readJsonResponse(res);
+            if (!res.ok) throw new Error(data.error || `Request failed (${res.status})`);
+            return data;
+          })
+        );
+        setFiles(filesData.files ?? []);
+        setQaList(qaData.qa ?? []);
+      } catch (e) {
+        console.error('Failed to load knowledge base', e);
+      }
+      const now = new Date();
+      setLastUpdated(now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+    })();
+  }, []);
+
+  // Update Last Updated Timestamp helper
+  const triggerUpdateTimestamp = () => {
+    const now = new Date();
+    setLastUpdated(now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+  };
+
+  // 1. Files Upload and Management — parse + embed happens server-side.
+  const handleUploadFile = async (file: File) => {
+    // Let failures reject so the upload panel can surface an error state.
+    let res: Response;
+
+    if (file.size > DIRECT_UPLOAD_LIMIT_BYTES) {
+      const blob = await upload(makeUploadPath(file), file, {
+        access: 'private',
+        handleUploadUrl: '/api/documents/upload',
+        multipart: true,
+        contentType: file.type || 'application/octet-stream',
+      });
+
+      res = await fetch('/api/documents', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          blobPathname: blob.pathname,
+          name: file.name,
+          size: file.size,
+        }),
+      });
+    } else {
+      const form = new FormData();
+      form.append('file', file);
+      res = await fetch('/api/documents', { method: 'POST', body: form });
+    }
+
+    const data = await readJsonResponse(res);
+    if (!res.ok) throw new Error(data.error || `Upload failed (${res.status})`);
+    if (!data.file) throw new Error('Upload returned no file');
+    setFiles((prev) => {
+      const others = prev.filter((f) => f.id !== data.file.id);
+      return [...others, data.file];
+    });
+    triggerUpdateTimestamp();
+  };
+
+  const handleDeleteFile = async (id: string) => {
+    setDeletingFileIds((prev) => new Set(prev).add(id));
+    try {
+      const res = await fetch(`/api/documents/${id}`, { method: 'DELETE' });
+      if (!res.ok) throw new Error(`Delete failed (${res.status})`);
+      setFiles((prev) => prev.filter((f) => f.id !== id));
+      triggerUpdateTimestamp();
+    } catch (e) {
+      console.error('Delete failed', e);
+    } finally {
+      setDeletingFileIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }
+  };
+
+  // 2. Custom Q&A Management
+  const handleAddQA = async (question: string, answer: string, category: string, prioritize: boolean) => {
+    try {
+      const res = await fetch('/api/qa', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ question, answer, category, prioritize }),
+      });
+      const data = await res.json();
+      if (data.qa) {
+        setQaList((prev) => [...prev, data.qa]);
+        triggerUpdateTimestamp();
+      }
+    } catch (e) {
+      console.error('Add Q&A failed', e);
+    }
+  };
+
+  const handleUpdateQA = async (id: string, question: string, answer: string, category: string, prioritize: boolean) => {
+    try {
+      const res = await fetch(`/api/qa/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ question, answer, category, prioritize }),
+      });
+      const data = await res.json();
+      if (data.qa) {
+        setQaList((prev) => prev.map((qa) => (qa.id === id ? data.qa : qa)));
+        triggerUpdateTimestamp();
+      }
+    } catch (e) {
+      console.error('Update Q&A failed', e);
+    }
+  };
+
+  const handleDeleteQA = async (id: string) => {
+    setDeletingQaIds((prev) => new Set(prev).add(id));
+    try {
+      const res = await fetch(`/api/qa/${id}`, { method: 'DELETE' });
+      if (!res.ok) throw new Error(`Delete failed (${res.status})`);
+      setQaList((prev) => prev.filter((qa) => qa.id !== id));
+      triggerUpdateTimestamp();
+    } catch (e) {
+      console.error('Delete Q&A failed', e);
+    } finally {
+      setDeletingQaIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }
+  };
+
+  // Calculating counters
+  const totalFiles = files.length;
+  const readyFilesCount = files.filter((f) => f.status === 'Ready').length;
+  const totalQAs = qaList.length;
+
+  return (
+    <main className="min-h-screen bg-black/95 text-white pt-10 pb-16 relative overflow-hidden font-sans">
+      {/* Decorative dark aurora hints behind the panels */}
+      <div className="absolute inset-0 z-0 opacity-40 pointer-events-none aurora-bg" />
+      <div className="absolute inset-0 bg-black/60 pointer-events-none z-0" />
+
+      {/* Main Container */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+
+        {/* Admin header */}
+        <AdminHeader />
+
+        {/* Core Workspace Panels split side-by-side or stacked on mobile */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start mt-6">
+
+          {/* Left column: File loader + its index metrics */}
+          <div className="flex flex-col gap-8">
+            <section className="bg-[#141414]/80 backdrop-blur-md border border-white/10 rounded-3xl p-6 sm:p-8 shadow-2xl hover:border-white/15 transition-all duration-300">
+              <FileUploadPanel
+                files={files}
+                onUpload={handleUploadFile}
+                onDelete={handleDeleteFile}
+                deletingIds={deletingFileIds}
+              />
+            </section>
+
+            {/* Index metrics — sits directly below Upload documents */}
+            <div className="bg-[#141414]/80 backdrop-blur-md border border-white/10 rounded-2xl p-5 flex flex-wrap gap-6 sm:gap-10 items-center justify-between shadow-2xl">
+              <div className="flex items-center gap-6 sm:gap-10">
+                <div>
+                  <p className="text-[10px] font-bold text-white/50 uppercase tracking-wider">Total Documents</p>
+                  <p className="text-2xl font-semibold text-white mt-0.5 tracking-tight">{totalFiles}</p>
+                </div>
+                <div>
+                  <p className="text-[10px] font-bold text-white/50 uppercase tracking-wider">Indexed (Ready)</p>
+                  <p className="text-2xl font-semibold text-emerald-400 mt-0.5 tracking-tight">{readyFilesCount}</p>
+                </div>
+                <div>
+                  <p className="text-[10px] font-bold text-white/50 uppercase tracking-wider">Custom Q&As</p>
+                  <p className="text-2xl font-semibold text-white mt-0.5 tracking-tight">{totalQAs}</p>
+                </div>
+              </div>
+              <div className="text-left">
+                <p className="text-[10px] font-bold text-white/50 uppercase tracking-wider">Last Sync</p>
+                <p className="text-sm font-medium text-white/70 mt-0.5">Updated {lastUpdated}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Right panel: Custom Q&A compiler */}
+          <section className="bg-[#141414]/80 backdrop-blur-md border border-white/10 rounded-3xl p-6 sm:p-8 shadow-2xl hover:border-white/15 transition-all duration-300">
+            <QABuilderPanel
+              qaList={qaList}
+              onAdd={handleAddQA}
+              onUpdate={handleUpdateQA}
+              onDelete={handleDeleteQA}
+              deletingIds={deletingQaIds}
+            />
+          </section>
+
+        </div>
+
+      </div>
+    </main>
+  );
+}

app/api/chat/route.ts

@@ -0,0 +1,150 @@
+import { NextResponse } from 'next/server';
+import { getAllChunksWithMeta } from '@/lib/kb-store';
+import {
+  embedQuery,
+  rerank,
+  chatWithDocuments,
+  cosineSimilarity,
+} from '@/lib/cohere';
+import {
+  RETRIEVE_TOP_K,
+  CONTEXT_TOP_N,
+  PER_SOURCE_CAP,
+  QA_PRIORITY_BOOST,
+} from '@/lib/cohere-config';
+
+/**
+ * Pick the final context chunks from a relevance-ranked list while guaranteeing
+ * that multiple source documents are represented. Without this, a question that
+ * spans two documents ("what is X and Y") gets answered from whichever document
+ * dominates the ranking, because every top slot is filled from it.
+ *
+ * Strategy: round-robin across documents (one chunk per document per pass, in
+ * relevance order) so each relevant document contributes its best chunks first,
+ * capped per source and limited to `limit` chunks total.
+ */
+function diversifyBySource<T extends { sourceName: string }>(
+  ranked: T[],
+  limit: number,
+  perSourceCap: number
+): T[] {
+  const bySource = new Map<string, T[]>();
+  for (const chunk of ranked) {
+    const arr = bySource.get(chunk.sourceName);
+    if (arr) arr.push(chunk);
+    else bySource.set(chunk.sourceName, [chunk]);
+  }
+
+  const used = new Map<string, number>();
+  const result: T[] = [];
+  let progressed = true;
+  while (result.length < limit && progressed) {
+    progressed = false;
+    for (const [name, chunks] of bySource) {
+      if ((used.get(name) ?? 0) >= perSourceCap) continue;
+      const next = chunks.shift();
+      if (!next) continue;
+      result.push(next);
+      used.set(name, (used.get(name) ?? 0) + 1);
+      progressed = true;
+      if (result.length >= limit) break;
+    }
+  }
+  return result;
+}
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+const EMPTY_KB_REPLY =
+  "I couldn't find any documents or custom Q&A answers in your knowledge base yet. Head to the **Admin Dashboard** to upload documents (PDF, Word, Excel) or add custom Q&A pairs, and I'll be able to answer grounded questions.";
+
+type Source = { name: string; type: string };
+
+export async function POST(request: Request) {
+  let body: { query?: string };
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON body.' }, { status: 400 });
+  }
+
+  const query = body.query?.trim();
+  if (!query) {
+    return NextResponse.json({ error: 'A query is required.' }, { status: 400 });
+  }
+
+  try {
+    const candidates = await getAllChunksWithMeta();
+
+    // Empty knowledge base — friendly fallback, no model call needed.
+    if (candidates.length === 0) {
+      return NextResponse.json({ text: EMPTY_KB_REPLY, sources: [] });
+    }
+
+    // 1. Embed the query and score candidates by cosine similarity.
+    const qVec = await embedQuery(query);
+    const scored = candidates
+      .map((c) => {
+        const base = cosineSimilarity(qVec, c.embedding);
+        return { c, score: c.prioritize ? base + QA_PRIORITY_BOOST : base };
+      })
+      .sort((a, b) => b.score - a.score)
+      .slice(0, RETRIEVE_TOP_K)
+      .map((s) => s.c);
+
+    // 2. Rerank the whole candidate pool for precision (best-first).
+    const reranked = await rerank(query, scored.map((c) => c.text));
+    const rankedChunks =
+      reranked.length > 0 ? reranked.map((r) => scored[r.index]) : scored;
+
+    // 3. Select the final context, balancing relevance with document coverage so
+    //    multi-document questions are answered from every relevant document.
+    const finalDocs = diversifyBySource(rankedChunks, CONTEXT_TOP_N, PER_SOURCE_CAP);
+
+    // 4. Build Cohere documents + an id -> source map for citation resolution.
+    const idToSource = new Map<string, Source>();
+    const documents = finalDocs.map((c, i) => {
+      const id = String(i);
+      idToSource.set(id, { name: c.sourceName, type: c.sourceType });
+      return { id, data: { title: c.sourceName, text: c.text } };
+    });
+
+    // 5. Generate the grounded answer with citations.
+    const { text, citations } = await chatWithDocuments(query, documents);
+
+    // 6. Resolve cited document ids back to UI sources, deduped by name.
+    const seen = new Set<string>();
+    const sources: Source[] = [];
+    for (const citation of citations) {
+      for (const src of citation.sources ?? []) {
+        const id = src.id;
+        if (!id) continue;
+        const mapped = idToSource.get(id);
+        if (mapped && !seen.has(mapped.name)) {
+          seen.add(mapped.name);
+          sources.push(mapped);
+        }
+      }
+    }
+
+    // If the model produced no citations, fall back to the top reranked sources.
+    if (sources.length === 0) {
+      for (const c of finalDocs.slice(0, 2)) {
+        if (!seen.has(c.sourceName)) {
+          seen.add(c.sourceName);
+          sources.push({ name: c.sourceName, type: c.sourceType });
+        }
+      }
+    }
+
+    return NextResponse.json({ text, sources });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Something went wrong.';
+    console.error('Chat error:', message);
+    return NextResponse.json(
+      { error: 'Failed to generate a response. ' + message },
+      { status: 500 }
+    );
+  }
+}

app/api/documents/[id]/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server';
+import { deleteFileRecord } from '@/lib/kb-store';
+
+export const runtime = 'nodejs';
+
+export async function DELETE(
+  _request: Request,
+  ctx: { params: Promise<{ id: string }> }
+) {
+  const { id } = await ctx.params;
+  const removed = await deleteFileRecord(id);
+  if (!removed) {
+    return NextResponse.json({ error: 'File not found.' }, { status: 404 });
+  }
+  return new NextResponse(null, { status: 204 });
+}

app/api/documents/route.ts

@@ -0,0 +1,156 @@
+import { NextResponse } from 'next/server';
+import {
+  readStore,
+  addFileRecord,
+  updateFileRecord,
+  toPublicFile,
+  type KBFileRecord,
+  type Chunk,
+} from '@/lib/kb-store';
+import {
+  getFileType,
+  formatSize,
+} from '@/lib/file-meta';
+
+// pdf-parse / mammoth / xlsx require Node, not the edge runtime.
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+export const maxDuration = 60;
+
+function makeId() {
+  return `file-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+async function streamToBuffer(stream: ReadableStream<Uint8Array>): Promise<Buffer> {
+  const arrayBuffer = await new Response(stream).arrayBuffer();
+  return Buffer.from(arrayBuffer);
+}
+
+async function createFileRecord(
+  fileName: string,
+  fileSize: number,
+  buffer: Buffer
+): Promise<NextResponse> {
+  const type = getFileType(fileName);
+  if (!type) {
+    return NextResponse.json(
+      { error: 'Unsupported file type. Use PDF, DOCX, XLSX, XLS, or CSV.' },
+      { status: 400 }
+    );
+  }
+
+  const record: KBFileRecord = {
+    id: makeId(),
+    name: fileName,
+    type,
+    size: formatSize(fileSize),
+    status: 'Processing',
+    uploadedAt: new Date().toISOString(),
+    chunks: [],
+  };
+  await addFileRecord(record);
+
+  try {
+    const [{ extractText, chunkText }, { embedDocuments }] = await Promise.all([
+      import('@/lib/parsers'),
+      import('@/lib/cohere'),
+    ]);
+    const text = await extractText(buffer, type);
+    const chunkTexts = chunkText(text);
+
+    if (chunkTexts.length === 0) {
+      const updated = await updateFileRecord(record.id, {
+        status: 'Failed',
+        error: 'No extractable text found in the document.',
+      });
+      return NextResponse.json({ file: toPublicFile(updated ?? record) }, { status: 422 });
+    }
+
+    const embeddings = await embedDocuments(chunkTexts);
+    const chunks: Chunk[] = chunkTexts.map((t, i) => ({
+      id: `${record.id}-c${i}`,
+      text: t,
+      embedding: embeddings[i] ?? [],
+    }));
+
+    const updated = await updateFileRecord(record.id, { status: 'Ready', chunks });
+    return NextResponse.json({ file: toPublicFile(updated ?? record) });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Processing failed.';
+    const updated = await updateFileRecord(record.id, { status: 'Failed', error: message });
+    return NextResponse.json(
+      { file: toPublicFile(updated ?? record), error: message },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET() {
+  try {
+    const store = await readStore();
+    return NextResponse.json({ files: store.files.map(toPublicFile) });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Failed to load documents.';
+    return NextResponse.json({ error: message, files: [] }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request) {
+  const contentType = request.headers.get('content-type') ?? '';
+
+  if (contentType.includes('application/json')) {
+    let body: { blobPathname?: string; name?: string; size?: number };
+    try {
+      body = await request.json();
+    } catch {
+      return NextResponse.json({ error: 'Invalid JSON body.' }, { status: 400 });
+    }
+
+    const blobPathname = body.blobPathname?.trim();
+    const fileName = body.name?.trim();
+    if (!blobPathname || !fileName) {
+      return NextResponse.json(
+        { error: 'blobPathname and name are required.' },
+        { status: 400 }
+      );
+    }
+
+    try {
+      const { del, get } = await import('@vercel/blob');
+      const blob = await get(blobPathname, { access: 'private', useCache: false });
+      if (!blob || blob.statusCode !== 200) {
+        return NextResponse.json({ error: 'Uploaded blob was not found.' }, { status: 404 });
+      }
+
+      const buffer = await streamToBuffer(blob.stream);
+      const response = await createFileRecord(fileName, body.size ?? blob.blob.size, buffer);
+
+      // The raw upload is only a handoff object. The indexed KB is stored separately.
+      await del(blobPathname).catch(() => undefined);
+      return response;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Blob processing failed.';
+      return NextResponse.json({ error: message }, { status: 500 });
+    }
+  }
+
+  let form: FormData;
+  try {
+    form = await request.formData();
+  } catch {
+    return NextResponse.json({ error: 'Expected multipart/form-data.' }, { status: 400 });
+  }
+
+  const file = form.get('file');
+  if (!(file instanceof File)) {
+    return NextResponse.json({ error: 'No file provided.' }, { status: 400 });
+  }
+
+  try {
+    const buffer = Buffer.from(await file.arrayBuffer());
+    return createFileRecord(file.name, file.size, buffer);
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Processing failed.';
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

app/api/documents/upload/route.ts

@@ -0,0 +1,40 @@
+import { handleUpload, type HandleUploadBody } from '@vercel/blob/client';
+import { NextResponse } from 'next/server';
+import { getFileType } from '@/lib/file-meta';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+const MAX_UPLOAD_BYTES = 25 * 1024 * 1024;
+
+export async function POST(request: Request) {
+  let body: HandleUploadBody;
+  try {
+    body = (await request.json()) as HandleUploadBody;
+  } catch {
+    return NextResponse.json({ error: 'Invalid upload request.' }, { status: 400 });
+  }
+
+  try {
+    const response = await handleUpload({
+      body,
+      request,
+      onBeforeGenerateToken: async (pathname) => {
+        const fileName = pathname.split('/').pop() ?? pathname;
+        if (!getFileType(fileName)) {
+          throw new Error('Unsupported file type. Use PDF, DOCX, XLSX, XLS, or CSV.');
+        }
+
+        return {
+          addRandomSuffix: true,
+          maximumSizeInBytes: MAX_UPLOAD_BYTES,
+        };
+      },
+    });
+
+    return NextResponse.json(response);
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Upload token generation failed.';
+    return NextResponse.json({ error: message }, { status: 400 });
+  }
+}

app/api/qa/[id]/route.ts

@@ -0,0 +1,74 @@
+import { NextResponse } from 'next/server';
+import { readStore, updateQA, deleteQA, toPublicQA } from '@/lib/kb-store';
+
+export const runtime = 'nodejs';
+
+function qaEmbeddingText(question: string, answer: string): string {
+  return `Q: ${question}\nA: ${answer}`;
+}
+
+export async function PUT(
+  request: Request,
+  ctx: { params: Promise<{ id: string }> }
+) {
+  const { id } = await ctx.params;
+
+  let body: {
+    question?: string;
+    answer?: string;
+    category?: string;
+    prioritize?: boolean;
+  };
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON body.' }, { status: 400 });
+  }
+
+  const question = body.question?.trim();
+  const answer = body.answer?.trim();
+  if (!question || !answer) {
+    return NextResponse.json(
+      { error: 'Both question and answer are required.' },
+      { status: 400 }
+    );
+  }
+
+  const store = await readStore();
+  const existing = store.qa.find((q) => q.id === id);
+  if (!existing) {
+    return NextResponse.json({ error: 'Q&A not found.' }, { status: 404 });
+  }
+
+  // Re-embed only if the question or answer text changed.
+  const textChanged =
+    existing.question !== question || existing.answer !== answer;
+  const { embedDocuments } = textChanged
+    ? await import('@/lib/cohere')
+    : { embedDocuments: null };
+  const embedding = textChanged
+    ? (await embedDocuments!([qaEmbeddingText(question, answer)]))[0] ?? existing.embedding
+    : existing.embedding;
+
+  const updated = await updateQA(id, {
+    question,
+    answer,
+    category: body.category?.trim() || 'General',
+    prioritize: Boolean(body.prioritize),
+    embedding,
+  });
+
+  return NextResponse.json({ qa: toPublicQA(updated!) });
+}
+
+export async function DELETE(
+  _request: Request,
+  ctx: { params: Promise<{ id: string }> }
+) {
+  const { id } = await ctx.params;
+  const removed = await deleteQA(id);
+  if (!removed) {
+    return NextResponse.json({ error: 'Q&A not found.' }, { status: 404 });
+  }
+  return new NextResponse(null, { status: 204 });
+}

app/api/qa/route.ts

@@ -0,0 +1,59 @@
+import { NextResponse } from 'next/server';
+import { readStore, addQA, toPublicQA, type QARecord } from '@/lib/kb-store';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+function qaEmbeddingText(question: string, answer: string): string {
+  return `Q: ${question}\nA: ${answer}`;
+}
+
+// GET — public list of Q&A pairs (no embeddings).
+export async function GET() {
+  try {
+    const store = await readStore();
+    return NextResponse.json({ qa: store.qa.map(toPublicQA) });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Failed to load Q&A pairs.';
+    return NextResponse.json({ error: message, qa: [] }, { status: 500 });
+  }
+}
+
+// POST — create a Q&A pair, embed it for retrieval.
+export async function POST(request: Request) {
+  let body: {
+    question?: string;
+    answer?: string;
+    category?: string;
+    prioritize?: boolean;
+  };
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON body.' }, { status: 400 });
+  }
+
+  const question = body.question?.trim();
+  const answer = body.answer?.trim();
+  if (!question || !answer) {
+    return NextResponse.json(
+      { error: 'Both question and answer are required.' },
+      { status: 400 }
+    );
+  }
+
+  const { embedDocuments } = await import('@/lib/cohere');
+  const [embedding] = await embedDocuments([qaEmbeddingText(question, answer)]);
+
+  const record: QARecord = {
+    id: `qa-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    question,
+    answer,
+    category: body.category?.trim() || 'General',
+    prioritize: Boolean(body.prioritize),
+    embedding: embedding ?? [],
+  };
+  await addQA(record);
+
+  return NextResponse.json({ qa: toPublicQA(record) });
+}

app/globals.css

@@ -0,0 +1,438 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga" 1, "calt" 1;
+}
+
+/* Scrollable but with no visible scrollbar (used by the chat thread). */
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* ===== Query Bot Custom Animations & Styles ===== */
+
+@keyframes float-top-right {
+  0% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.55;
+  }
+
+  50% {
+    transform: translate(-4%, 6%) scale(1.12);
+    opacity: 0.7;
+  }
+
+  100% {
+    transform: translate(3%, -3%) scale(0.92);
+    opacity: 0.45;
+  }
+}
+
+@keyframes float-bottom-left {
+  0% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.5;
+  }
+
+  50% {
+    transform: translate(5%, -8%) scale(1.08);
+    opacity: 0.65;
+  }
+
+  100% {
+    transform: translate(-3%, 3%) scale(0.95);
+    opacity: 0.45;
+  }
+}
+
+@keyframes float-bottom-right {
+  0% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.45;
+  }
+
+  50% {
+    transform: translate(-8%, -5%) scale(1.15);
+    opacity: 0.6;
+  }
+
+  100% {
+    transform: translate(3%, 2%) scale(0.9);
+    opacity: 0.35;
+  }
+}
+
+.animate-ambient-tr {
+  animation: float-top-right 16s ease-in-out infinite alternate;
+}
+
+.animate-ambient-bl {
+  animation: float-bottom-left 18s ease-in-out infinite alternate;
+}
+
+.animate-ambient-br {
+  animation: float-bottom-right 14s ease-in-out infinite alternate;
+}
+
+/* Typography styles for premium SaaS feeling */
+.font-sans-geist {
+  font-family: var(--font-geist-sans), sans-serif;
+}
+
+.gif-clipped-word {
+  background-image: url("https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExcTIyN2RwbGdkc2w4YWxva3pudHl6M3BtdXV0eW00ZDMzMDdhMzExMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/irCR68lB8tZDy8GKb0/giphy.gif");
+  background-size: cover;
+  background-position: center;
+  background-repeat: repeat;
+  color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  position: relative;
+  display: inline-block;
+  font-weight: 700;
+  padding-right: 0.15em;
+  /* Prevents italic character clipping on the right edge */
+}
+
+/* ===== Aurora glass cards — vibrant gradient glow bleeding up from the
+   bottom of each card. Set --aurora-1 / --aurora-2 per card to recolor. ===== */
+.aurora-card {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.aurora-card::after {
+  content: "";
+  position: absolute;
+  left: -15%;
+  right: -15%;
+  bottom: -55%;
+  height: 110%;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    radial-gradient(ellipse 55% 100% at 35% 100%, var(--aurora-1, rgba(139, 92, 246, 0.55)) 0%, transparent 68%),
+    radial-gradient(ellipse 55% 100% at 70% 100%, var(--aurora-2, rgba(6, 182, 212, 0.5)) 0%, transparent 68%);
+  filter: blur(26px);
+  opacity: 0.5;
+  transform: translateY(8%);
+  transition: opacity 0.45s ease, transform 0.45s ease;
+}
+
+.aurora-card:hover::after {
+  opacity: 0.9;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aurora-card::after {
+    transition: none;
+  }
+}
+
+/* Animated GIF fill — same asset used by the "documents" hero word, reused
+   as a button background. Paused by default (single still frame), and it
+   plays only while the user hovers the button. */
+.gif-bg {
+  background-image: url("https://media3.giphy.com/media/irCR68lB8tZDy8GKb0/giphy_s.gif");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* On hover, swap to the animated GIF so it plays from the first frame. */
+.gif-bg:hover {
+  background-image: url("https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExcTIyN2RwbGdkc2w4YWxva3pudHl6M3BtdXV0eW00ZDMzMDdhMzExMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/irCR68lB8tZDy8GKb0/giphy.gif");
+}
+
+/* While pressed, drop the GIF entirely so the button reads as a transparent
+   (ghost) button on click. */
+.gif-bg:active {
+  background-image: none;
+  background-color: transparent;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gif-bg {
+    background-image: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #06b6d4 100%) !important;
+  }
+}
+
+/* ===== Radial glow emanating from the center boundary between white/dark halves ===== */
+.hero-radial-glow {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  background:
+    /* Primary large glow – soft indigo/violet */
+    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(99, 102, 241, 0.35) 0%, rgba(79, 70, 229, 0.15) 30%, transparent 70%),
+    /* Secondary wider cyan tint */
+    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(6, 182, 212, 0.18) 0%, rgba(20, 184, 166, 0.06) 40%, transparent 75%),
+    /* Tight bright core */
+    radial-gradient(ellipse 40% 30% at 50% 0%, rgba(168, 85, 247, 0.25) 0%, transparent 60%);
+}
+
+/* The redesigned glowing horizon */
+.hero-bloom {
+  /* Brand color variables — luminous indigo/periwinkle.
+     The inner basin is a soft periwinkle (not near-white), so the bottom of
+     the screen fills with gentle colour instead of reading as white space. */
+  --bloom-inner-start: #c7d2fe;
+  --bloom-inner-mid: #818cf8;
+  --bloom-arch-core: #4f46e5;
+  --bloom-arch-dark: #3730a3;
+
+  /* Cursor influence — driven from JS, defaults keep the bloom centered */
+  --bloom-mx: 0;
+  --bloom-my: 0;
+
+  /* Extra downward shift of the gradient centre. 0% on the landing hero;
+     bumped up in chat mode (.is-chatting) so the arch finishes just above
+     the chat input instead of rising into the middle of the screen. */
+  --bloom-push: 0%;
+
+  position: absolute;
+  /* Overhang past the viewport bottom so the GSAP breathing translate (y: -8)
+     never lifts the layer enough to reveal a white strip at the bottom edge. */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: -12%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+  /* Origin at the bottom so the GSAP entrance grows upward from the floor */
+  transform-origin: bottom center;
+
+  /* Entrance + breathing are driven by GSAP (see HeroSection.tsx).
+     The two pseudo-element layers still drift via CSS for the liquid effect. */
+}
+
+/* In chat mode, push the glow down so it sits just above the input. */
+.hero-bloom.is-chatting {
+  --bloom-push: 14%;
+}
+
+.hero-bloom::before,
+.hero-bloom::after {
+  content: "";
+  position: absolute;
+  inset: -10%;
+  transform-origin: bottom center;
+  pointer-events: none;
+}
+
+/* --- LIGHT LAYER A (Slightly left-biased) --- */
+/* The gradient center is nudged by the cursor (--bloom-mx/--bloom-my) so the
+   bright core of the arch leans toward wherever the mouse is. */
+.hero-bloom::before {
+  background:
+    radial-gradient(ellipse 80% 60% at calc(48% + 5% * var(--bloom-mx)) calc(113% + 3% * var(--bloom-my) + var(--bloom-push)),
+      transparent 83%,
+      rgba(255, 255, 255, 0.8) 88%,
+      transparent 93%),
+    radial-gradient(ellipse 80% 60% at calc(48% + 5% * var(--bloom-mx)) calc(113% + 3% * var(--bloom-my) + var(--bloom-push)),
+      var(--bloom-inner-start) 0%,
+      var(--bloom-inner-mid) 45%,
+      var(--bloom-arch-core) 72%,
+      var(--bloom-arch-dark) 85%,
+      transparent 92%);
+
+  filter: blur(8px);
+  animation: bloom-drift-left 11s ease-in-out infinite alternate;
+}
+
+/* --- LIGHT LAYER B (Slightly right-biased, opposite cursor lean for depth) --- */
+.hero-bloom::after {
+  background:
+    radial-gradient(ellipse 82% 62% at calc(52% + 8% * var(--bloom-mx)) calc(116% + 4% * var(--bloom-my) + var(--bloom-push)),
+      transparent 83%,
+      rgba(255, 255, 255, 0.6) 88%,
+      transparent 93%),
+    radial-gradient(ellipse 82% 62% at calc(52% + 8% * var(--bloom-mx)) calc(116% + 4% * var(--bloom-my) + var(--bloom-push)),
+      var(--bloom-inner-start) 0%,
+      var(--bloom-inner-mid) 42%,
+      var(--bloom-arch-core) 70%,
+      var(--bloom-arch-dark) 84%,
+      transparent 92%);
+
+  filter: blur(10px);
+  mix-blend-mode: multiply;
+  animation: bloom-drift-right 15s ease-in-out infinite alternate;
+}
+
+/* White wash behind the headline that melts smoothly into the dark — no hard
+   seam. Solid white up top, fading fully transparent before the bloom. */
+.hero-top-wash {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 64%;
+  z-index: 2;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    #ffffff 0%,
+    #ffffff 56%,
+    rgba(255, 255, 255, 0.85) 72%,
+    rgba(255, 255, 255, 0.4) 86%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+@keyframes bloom-drift-left {
+  0% {
+    transform: translate(-1.5%, 1%) scale(0.97);
+    filter: blur(8px) brightness(0.95);
+  }
+  100% {
+    transform: translate(1.5%, -1%) scale(1.03);
+    filter: blur(11px) brightness(1.05);
+  }
+}
+
+@keyframes bloom-drift-right {
+  0% {
+    transform: translate(1.5%, -0.5%) scale(1.02);
+    filter: blur(11px) brightness(1.03);
+  }
+  100% {
+    transform: translate(-1.5%, 0.5%) scale(0.98);
+    filter: blur(8px) brightness(0.97);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-bloom {
+    animation: none;
+  }
+  .hero-bloom::before,
+  .hero-bloom::after {
+    animation: none;
+    transform: none;
+    filter: blur(8px);
+  }
+}
+
+/* ===== Chat page ambient glow ===== */
+.chat-page-glow {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background:
+    /* Center ambient glow */
+    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(99, 102, 241, 0.12) 0%, transparent 70%),
+    /* Soft violet accent */
+    radial-gradient(ellipse 50% 40% at 60% 60%, rgba(139, 92, 246, 0.08) 0%, transparent 65%),
+    /* Subtle cyan tint */
+    radial-gradient(ellipse 45% 35% at 35% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 60%);
+}
+
+
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Graceful fallback for browsers or users who preferred reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .gif-clipped-word {
+    background-image: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%) !important;
+    background-size: 100% 100% !important;
+    animation: none !important;
+  }
+}
+
+.aurora-bg {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  /* No background-color here – parent already sets it */
+  background-image:
+    /* Left side soft glow - Modern Teal/Cyan */
+    radial-gradient(ellipse 60% 60% at -10% 30%, rgba(20, 184, 166, 0.16) 0%, rgba(13, 148, 136, 0.04) 50%, transparent 90%),
+
+    /* Right side soft glow - Sophisticated Violet/Purple */
+    radial-gradient(ellipse 60% 60% at 110% 40%, rgba(168, 85, 247, 0.15) 0%, rgba(139, 92, 246, 0.04) 50%, transparent 90%),
+
+    /* Center bottom soft blue ambient light */
+    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(59, 130, 246, 0.14) 0%, rgba(29, 78, 216, 0.02) 60%, transparent 100%);
+}
+
+.aurora-bg::before {
+  content: "";
+  position: absolute;
+  inset: -15%;
+  background:
+    /* Floating cyan mist */
+    radial-gradient(ellipse 40% 40% at 30% 45%, rgba(6, 182, 212, 0.18) 0%, transparent 70%),
+    /* Floating violet mist */
+    radial-gradient(ellipse 40% 40% at 70% 55%, rgba(139, 92, 246, 0.16) 0%, transparent 70%),
+    /* Floating blue deep ambient */
+    radial-gradient(ellipse 45% 45% at 50% 75%, rgba(59, 130, 246, 0.12) 0%, transparent 75%);
+  filter: blur(60px);
+  animation: auroraFloat 20s ease-in-out infinite alternate;
+}
+
+.aurora-bg::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  opacity: 0.18;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.35'/%3E%3C/svg%3E");
+}
+
+@keyframes auroraFloat {
+  from {
+    transform: translate3d(-2%, 1%, 0) scale(1);
+    opacity: 0.75;
+  }
+
+  to {
+    transform: translate3d(2%, -2%, 0) scale(1.08);
+    opacity: 1;
+  }
+}

app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Query Bot",
+  description: "Chat with your documents - A modern company knowledge-base Q&A platform.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col font-sans" suppressHydrationWarning>{children}</body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+import HeroSection from '@/components/HeroSection';
+
+export default function Home() {
+  return (
+    <main className="min-h-screen">
+      <HeroSection />
+    </main>
+  );
+}

app/template.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import * as React from 'react';
+import { motion } from 'motion/react';
+
+/**
+ * App-level template re-mounts on every route change, so animating its mount
+ * gives a smooth cross-route transition (e.g. / → /chat) without needing the
+ * experimental React <ViewTransition> component.
+ */
+export default function Template({ children }: { children: React.ReactNode }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.45, ease: [0.16, 1, 0.3, 1] }}
+    >
+      {children}
+    </motion.div>
+  );
+}

components/AdminHeader.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import Link from 'next/link';
+
+export default function AdminHeader() {
+  return (
+    <div className="w-full pb-6 mb-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+      {/* Left Side: Back to home and Dashboard title */}
+      <div className="flex items-center gap-4">
+        <Link
+          href="/"
+          className="inline-flex items-center justify-center h-9 px-4 rounded-full text-xs font-semibold text-white bg-gradient-to-r from-cyan-500 to-blue-600 shadow-lg shadow-blue-500/25 hover:brightness-110 transition-all duration-150 active:scale-95 cursor-pointer"
+        >
+          ← Home
+        </Link>
+        <h1 className="text-xl font-bold text-white tracking-tight">Knowledge Base Admin</h1>
+      </div>
+
+      {/* Changes save and publish automatically — no manual publish step. */}
+      <div className="flex items-center gap-2 text-xs font-medium text-white/50">
+        <span className="relative flex h-2 w-2">
+          <span className="absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75 animate-ping" />
+          <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-400" />
+        </span>
+        Auto-saved &amp; published
+      </div>
+    </div>
+  );
+}

components/Badge.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'neutral';
+}
+
+export default function Badge({
+  children,
+  className = '',
+  variant = 'neutral',
+  ...props
+}: BadgeProps) {
+  const baseStyle = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border transition-all duration-150';
+
+  const variants = {
+    neutral: 'bg-neutral-50 text-neutral-600 border-neutral-200',
+    primary: 'bg-neutral-900 text-white border-neutral-900',
+    secondary: 'bg-neutral-100 text-neutral-700 border-neutral-200',
+    info: 'bg-blue-50 text-blue-600 border-blue-100',
+    success: 'bg-emerald-50 text-emerald-700 border-emerald-100',
+    warning: 'bg-amber-50 text-amber-700 border-amber-100',
+    danger: 'bg-red-50 text-red-700 border-red-100',
+    purple: 'bg-purple-50 text-purple-700 border-purple-100',
+  };
+
+  return (
+    <span className={`${baseStyle} ${variants[variant]} ${className}`} {...props}>
+      {children}
+    </span>
+  );
+}

components/Button.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+  size?: 'sm' | 'md' | 'lg' | 'icon';
+}
+
+export default function Button({
+  children,
+  className = '',
+  variant = 'primary',
+  size = 'md',
+  type = 'button',
+  ...props
+}: ButtonProps) {
+  // Styles for different variants
+  const baseStyle = 'inline-flex items-center justify-center font-medium transition-all duration-200 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 disabled:opacity-50 disabled:pointer-events-none active:scale-[0.98] cursor-pointer';
+  
+  const variants = {
+    primary: 'bg-neutral-900 text-white hover:bg-neutral-800 border border-neutral-900 shadow-sm',
+    secondary: 'bg-neutral-100 text-neutral-800 hover:bg-neutral-200 border border-transparent',
+    outline: 'bg-white border border-neutral-200 text-neutral-700 hover:bg-neutral-50 hover:border-neutral-300',
+    ghost: 'text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 border border-transparent',
+    danger: 'bg-red-50 text-red-600 border border-red-200 hover:bg-red-100 active:bg-red-200',
+  };
+
+  const sizes = {
+    sm: 'px-3 py-1.5 text-xs font-semibold',
+    md: 'px-4 py-2.5 text-sm',
+    lg: 'px-6 py-3.5 text-base',
+    icon: 'p-2',
+  };
+
+  return (
+    <button
+      type={type}
+      className={`${baseStyle} ${variants[variant]} ${sizes[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

components/FileTypeIcon.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Image from 'next/image';
+
+// Colored brand logos from icons8 — these are multicolor icons, so the
+// `color` query param is intentionally omitted (it has no effect on them).
+const ICON_SOURCES: Record<string, string> = {
+  PDF: 'https://img.icons8.com/?size=100&id=l0vjMqIboTRs&format=png',
+  DOC: 'https://img.icons8.com/?size=100&id=EqxMzyq5jqdz&format=png',
+  DOCX: 'https://img.icons8.com/?size=100&id=EqxMzyq5jqdz&format=png',
+  EXCEL: 'https://img.icons8.com/?size=100&id=13654&format=png',
+  XLS: 'https://img.icons8.com/?size=100&id=13654&format=png',
+  XLSX: 'https://img.icons8.com/?size=100&id=13654&format=png',
+  CSV: 'https://img.icons8.com/?size=100&id=13654&format=png',
+};
+
+interface FileTypeIconProps {
+  type: string;
+  size?: number;
+  className?: string;
+}
+
+/**
+ * Renders the icons8 brand logo for a known document type (PDF, Word,
+ * Excel/CSV). Returns `null` for anything else so callers can fall back
+ * to their own glyph (e.g. custom Q&A sources).
+ */
+export default function FileTypeIcon({ type, size = 24, className = '' }: FileTypeIconProps) {
+  const src = ICON_SOURCES[type.toUpperCase()];
+  if (!src) return null;
+
+  return (
+    <Image
+      src={src}
+      alt={`${type} document`}
+      width={size}
+      height={size}
+      className={className}
+    />
+  );
+}

components/FileUploadPanel.tsx

@@ -0,0 +1,346 @@
+'use client';
+
+import * as React from 'react';
+import UploadedFileCard from './UploadedFileCard';
+import FileTypeIcon from './FileTypeIcon';
+import { KBFile } from '@/lib/kb-data';
+
+interface FileUploadPanelProps {
+  files: KBFile[];
+  onUpload: (file: File) => Promise<void>;
+  onDelete: (id: string) => void;
+  deletingIds: Set<string>;
+}
+
+type UploadStatus = 'uploading' | 'done' | 'error';
+
+interface PendingUpload {
+  id: string;
+  name: string;
+  file: File;
+  progress: number;
+  status: UploadStatus;
+}
+
+let uploadSeq = 0;
+
+export default function FileUploadPanel({ files, onUpload, onDelete, deletingIds }: FileUploadPanelProps) {
+  const [isDragOver, setIsDragOver] = React.useState(false);
+  const [uploads, setUploads] = React.useState<PendingUpload[]>([]);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const dismissUpload = (id: string) =>
+    setUploads((prev) => prev.filter((u) => u.id !== id));
+
+  // Upload a real file: parsing + embedding happens server-side, so we show an
+  // indeterminate progress bar that creeps toward 90% until the POST resolves.
+  const startUpload = (file: File) => {
+    const fileId = `up-${uploadSeq++}`;
+
+    setUploads((prev) => [
+      ...prev,
+      { id: fileId, name: file.name, file, progress: 8, status: 'uploading' },
+    ]);
+
+    let prog = 8;
+    const interval = setInterval(() => {
+      prog = Math.min(90, prog + Math.floor(Math.random() * 8) + 4);
+      setUploads((prev) =>
+        prev.map((u) => (u.id === fileId && u.status === 'uploading' ? { ...u, progress: prog } : u))
+      );
+    }, 300);
+
+    const succeed = () => {
+      clearInterval(interval);
+      // Don't show a separate "file uploaded" card. The file is already added
+      // to the knowledge-base list below, so just remove the progress toast and
+      // let the file card itself signal completion.
+      dismissUpload(fileId);
+    };
+
+    const fail = () => {
+      clearInterval(interval);
+      setUploads((prev) =>
+        prev.map((u) => (u.id === fileId ? { ...u, status: 'error' } : u))
+      );
+    };
+
+    Promise.resolve(onUpload(file)).then(succeed, fail);
+  };
+
+  const retryUpload = (u: PendingUpload) => {
+    dismissUpload(u.id);
+    startUpload(u.file);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      const droppedFiles = Array.from(e.dataTransfer.files);
+      const eligibleFiles = droppedFiles.filter(f => {
+        const ext = f.name.split('.').pop()?.toLowerCase() || '';
+        return ['pdf', 'docx', 'doc', 'xlsx', 'xls', 'csv'].includes(ext);
+      });
+
+      if (eligibleFiles.length > 0) {
+        eligibleFiles.forEach((f) => startUpload(f));
+      } else {
+        alert('Please drop accepted file types (PDF, DOCX, XLSX, XLS, CSV).');
+      }
+    }
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const selected = Array.from(e.target.files);
+      selected.forEach((f) => startUpload(f));
+      // Reset input value to allow uploading same file again if deleted
+      if (fileInputRef.current) fileInputRef.current.value = '';
+    }
+  };
+
+  const triggerBrowse = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Panel Headers */}
+      <div>
+        <h2 className="text-xl font-semibold text-white tracking-tight">Upload documents</h2>
+        <p className="text-sm text-white/50 mt-1 leading-relaxed">
+          Drag and drop PDFs, Word documents, and spreadsheets into your knowledge base.
+        </p>
+      </div>
+
+      {/* Hidden File Input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        accept=".pdf,.docx,.doc,.xlsx,.xls,.csv"
+        className="hidden"
+        onChange={handleFileChange}
+      />
+
+      {/* Drop Zone Box */}
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={`mt-6 border-2 border-dashed rounded-2xl flex flex-col items-center justify-center p-8 text-center transition-all duration-300 ${
+          isDragOver
+            ? 'border-white/40 bg-white/5 hover:border-white/50'
+            : 'border-white/10 bg-black/20 hover:border-white/20'
+        }`}
+      >
+        {/* Document Icons – fanned-out brand logos */}
+        <div className="flex items-end justify-center mb-5">
+          <FileTypeIcon
+            type="PDF"
+            size={44}
+            className="-rotate-12 translate-y-1 drop-shadow-xl transition-transform duration-300"
+          />
+          <FileTypeIcon
+            type="DOCX"
+            size={54}
+            className="-mx-2 z-10 drop-shadow-2xl transition-transform duration-300"
+          />
+          <FileTypeIcon
+            type="EXCEL"
+            size={44}
+            className="rotate-12 translate-y-1 drop-shadow-xl transition-transform duration-300"
+          />
+        </div>
+
+        <p className="text-sm font-medium text-white/90">Drop your files here</p>
+        <p className="text-xs text-white/40 mt-1">PDF, DOCX, XLSX, XLS, or CSV up to 25MB</p>
+
+        <button
+          type="button"
+          onClick={triggerBrowse}
+          className="mt-5 inline-flex items-center justify-center h-9 px-4 rounded-full text-xs font-semibold bg-white/5 border border-white/10 text-white hover:bg-white/10 transition-colors duration-150 active:scale-[0.98] cursor-pointer"
+        >
+          Browse files
+        </button>
+      </div>
+
+      {/* Files List Heading */}
+      <div className="mt-8">
+        <h3 className="text-xs font-bold text-white/40 uppercase tracking-wider">
+          Knowledge Base (Files)
+        </h3>
+
+        {/* Upload status toasts (uploading / done / error) */}
+        {uploads.length > 0 && (
+          <div className="mt-3 space-y-2.5">
+            {uploads.map((u) => (
+              <UploadToast
+                key={u.id}
+                upload={u}
+                onCancel={() => dismissUpload(u.id)}
+                onRetry={() => retryUpload(u)}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Stable List of Files */}
+        {files.length === 0 && uploads.length === 0 ? (
+          <div className="mt-3 p-8 border border-white/5 rounded-2xl bg-black/20 text-center text-xs text-white/30">
+            No documents uploaded yet. Place your documents here to augment AI knowledge.
+          </div>
+        ) : (
+          <div className="mt-3 space-y-2.5 max-h-[300px] overflow-y-auto pr-1">
+            {files.map((file) => (
+              <UploadedFileCard
+                key={file.id}
+                file={file}
+                onDelete={onDelete}
+                isDeleting={deletingIds.has(file.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Bottom informational footline */}
+      <p className="text-[11px] text-white/30 mt-auto pt-6 leading-normal flex items-center gap-1.5">
+        <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        Documents are indexed for AI search after upload.
+      </p>
+    </div>
+  );
+}
+
+const TOAST_CONFIG: Record<
+  UploadStatus,
+  { glow: string; ring: string; bar: string; title: string; desc: string; icon: React.ReactNode }
+> = {
+  uploading: {
+    glow: 'radial-gradient(circle, rgba(99,102,241,0.6) 0%, rgba(59,130,246,0.25) 45%, transparent 72%)',
+    ring: 'border-indigo-400/60 text-indigo-300',
+    bar: 'from-indigo-400 to-violet-400',
+    title: 'Just a minute…',
+    desc: 'Your file is uploading right now. Hang tight while we finish.',
+    icon: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 5v14m0 0l5-5m-5 5l-5-5" />
+      </svg>
+    ),
+  },
+  done: {
+    glow: 'radial-gradient(circle, rgba(16,185,129,0.55) 0%, rgba(20,184,166,0.2) 45%, transparent 72%)',
+    ring: 'border-emerald-400/60 text-emerald-300',
+    bar: 'from-emerald-400 to-teal-400',
+    title: 'Your file was uploaded!',
+    desc: 'Added to your knowledge base and queued for AI indexing.',
+    icon: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+      </svg>
+    ),
+  },
+  error: {
+    glow: 'radial-gradient(circle, rgba(244,63,94,0.55) 0%, rgba(225,29,72,0.2) 45%, transparent 72%)',
+    ring: 'border-rose-400/60 text-rose-300',
+    bar: 'from-rose-400 to-pink-400',
+    title: 'We are so sorry!',
+    desc: "There was an error and your file couldn't be uploaded. Try again?",
+    icon: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 6l12 12M18 6L6 18" />
+      </svg>
+    ),
+  },
+};
+
+interface UploadToastProps {
+  upload: PendingUpload;
+  onCancel: () => void;
+  onRetry: () => void;
+}
+
+function UploadToast({ upload, onCancel, onRetry }: UploadToastProps) {
+  const { name, progress, status } = upload;
+  const cfg = TOAST_CONFIG[status];
+  const btn =
+    'inline-flex items-center justify-center h-8 px-4 rounded-lg text-xs font-semibold bg-white/[0.06] border border-white/10 text-white hover:bg-white/10 transition-colors duration-150 cursor-pointer';
+
+  return (
+    <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-[#161616]/90 backdrop-blur-md p-4">
+      {/* Soft corner glow tinted by status */}
+      <div
+        className="pointer-events-none absolute -top-12 -right-10 h-32 w-52 blur-3xl opacity-70"
+        style={{ background: cfg.glow }}
+      />
+
+      <div className="relative flex gap-3.5">
+        {/* Status icon ring */}
+        <div className={`mt-0.5 h-9 w-9 flex-shrink-0 rounded-full border-2 flex items-center justify-center ${cfg.ring} ${status === 'uploading' ? 'animate-pulse' : ''}`}>
+          {cfg.icon}
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-bold text-white leading-tight">{cfg.title}</p>
+          <p className="text-xs text-white/50 mt-1 leading-relaxed">{cfg.desc}</p>
+          <p className="text-[11px] text-white/40 mt-1 truncate font-mono" title={name}>
+            {name}
+          </p>
+
+          {status === 'uploading' && (
+            <div className="mt-3 flex items-end gap-3">
+              <div className="flex-1">
+                <div className="flex justify-end mb-1">
+                  <span className="text-[11px] font-semibold text-white/70 font-mono">{progress}%</span>
+                </div>
+                <div className="w-full h-1.5 rounded-full bg-white/10 overflow-hidden">
+                  <div
+                    className={`h-full rounded-full bg-gradient-to-r ${cfg.bar} transition-all duration-200`}
+                    style={{ width: `${progress}%` }}
+                  />
+                </div>
+              </div>
+              <button onClick={onCancel} className={btn}>
+                Cancel
+              </button>
+            </div>
+          )}
+
+          {status === 'error' && (
+            <div className="mt-3 flex items-center gap-2">
+              <button onClick={onRetry} className={btn}>
+                Retry
+              </button>
+              <button onClick={onCancel} className={btn}>
+                Cancel
+              </button>
+            </div>
+          )}
+
+          {status === 'done' && (
+            <div className="mt-3">
+              <button onClick={onCancel} className={btn}>
+                Done
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

components/FloatingChatInput.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+
+const PLACEHOLDERS = [
+  "Ask your documents a question...",
+  "Summarize the Q3 financial report...",
+  "Extract action items from the meeting notes...",
+  "Find clauses about termination...",
+];
+
+interface FloatingChatInputProps {
+  /**
+   * When provided, submitting calls this instead of navigating to /chat —
+   * used by the homepage to run the conversation inline. Without it, the
+   * input falls back to routing to the dedicated /chat page.
+   */
+  onSubmitText?: (text: string) => void;
+  disabled?: boolean;
+}
+
+export default function FloatingChatInput({ onSubmitText, disabled }: FloatingChatInputProps) {
+  const router = useRouter();
+  const [val, setVal] = React.useState('');
+  const [phText, setPhText] = React.useState('');
+  const [phIndex, setPhIndex] = React.useState(0);
+  const [isDeleting, setIsDeleting] = React.useState(false);
+
+  React.useEffect(() => {
+    const currentString = PLACEHOLDERS[phIndex];
+    let timeout: NodeJS.Timeout;
+    
+    if (isDeleting) {
+      timeout = setTimeout(() => {
+        setPhText(currentString.substring(0, phText.length - 1));
+        if (phText.length <= 1) {
+          setIsDeleting(false);
+          setPhIndex((prev) => (prev + 1) % PLACEHOLDERS.length);
+        }
+      }, 40);
+    } else {
+      timeout = setTimeout(() => {
+        setPhText(currentString.substring(0, phText.length + 1));
+        if (phText.length === currentString.length) {
+          timeout = setTimeout(() => {
+            setIsDeleting(true);
+          }, 2500);
+        }
+      }, 60);
+    }
+
+    return () => clearTimeout(timeout);
+  }, [phText, isDeleting, phIndex]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const text = val.trim();
+    if (!text) return;
+    if (onSubmitText) {
+      onSubmitText(text);
+      setVal('');
+    } else {
+      router.push(`/chat?q=${encodeURIComponent(text)}`);
+    }
+  };
+
+  const handleKeydown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e as unknown as React.FormEvent);
+    }
+  };
+
+  return (
+    <div className="w-full max-w-3xl mx-auto px-4 mt-8">
+      <form
+        onSubmit={handleSubmit}
+        className="flex flex-col relative bg-[#262626]/90 backdrop-blur-2xl border border-white/5 rounded-3xl shadow-[0_12px_50px_-6px_rgba(0,0,0,0.3)] focus-within:shadow-[0_16px_60px_-4px_rgba(0,0,0,0.5)] focus-within:border-white/15 hover:border-white/10 transition-all duration-300 p-3 min-h-[140px] max-w-[720px] mx-auto"
+      >
+        {/* Input Area */}
+        <div className="flex-1 px-3 pt-2 pb-2">
+          <textarea
+            value={val}
+            onChange={(e) => setVal(e.target.value)}
+            onKeyDown={handleKeydown}
+            placeholder={phText}
+            disabled={disabled}
+            className="w-full h-full min-h-[60px] bg-transparent text-white placeholder-neutral-400 focus:outline-none text-base resize-none font-sans disabled:opacity-60"
+          />
+        </div>
+
+        {/* Bottom Actions Row */}
+        <div className="flex items-center justify-end px-2 pt-2 border-t border-transparent">
+          {/* Right Actions (Submit) */}
+          <button
+            type="submit"
+            disabled={!val.trim() || disabled}
+            className={`flex-shrink-0 h-9 w-9 rounded-full flex items-center justify-center transition-all duration-200 shadow-sm ${
+              val.trim() && !disabled
+                ? 'bg-white text-black hover:scale-105 active:scale-95 cursor-pointer'
+                : 'bg-white/10 text-white/30 cursor-not-allowed'
+            }`}
+          >
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.8}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 19V5m0 0l-6 6m6-6l6 6" />
+            </svg>
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

components/HeroSection.tsx

@@ -0,0 +1,334 @@
+'use client';
+
+import * as React from 'react';
+import Link from 'next/link';
+import { motion, AnimatePresence } from 'motion/react';
+import gsap from 'gsap';
+import FloatingChatInput from './FloatingChatInput';
+import MessageBubble from './MessageBubble';
+import { useChatSession } from '@/lib/use-chat-session';
+
+export default function HeroSection() {
+  const bloomRef = React.useRef<HTMLDivElement>(null);
+  const threadRef = React.useRef<HTMLDivElement>(null);
+  const outsideTouchYRef = React.useRef<number | null>(null);
+
+  // Inline conversation — runs the chat right here on `/` instead of routing
+  // away to the dedicated /chat page.
+  const { messages, isTyping, sendMessage, reset } = useChatSession();
+  const active = messages.length > 0 || isTyping;
+
+  // Follow-up input shown inside the chat view (separate from the big hero input).
+  const [chatInput, setChatInput] = React.useState('');
+  const handleChatSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const text = chatInput.trim();
+    if (!text || isTyping) return;
+    setChatInput('');
+    sendMessage(text);
+  };
+
+  // Auto-scroll the *thread container only* (not the window) to the latest
+  // message. Using scrollIntoView here would scroll the whole page and push
+  // the header off-screen.
+  React.useEffect(() => {
+    const el = threadRef.current;
+    if (active && el) {
+      el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+    }
+  }, [messages, isTyping, active]);
+
+  const handleChatWheel = React.useCallback(
+    (e: React.WheelEvent<HTMLElement>) => {
+      const el = threadRef.current;
+      if (!active || !el || el.contains(e.target as Node)) return;
+      if (el.scrollHeight <= el.clientHeight) return;
+
+      el.scrollTop += e.deltaY;
+      e.preventDefault();
+    },
+    [active]
+  );
+
+  const handleChatTouchStart = React.useCallback(
+    (e: React.TouchEvent<HTMLElement>) => {
+      const el = threadRef.current;
+      if (!active || !el || el.contains(e.target as Node)) {
+        outsideTouchYRef.current = null;
+        return;
+      }
+
+      outsideTouchYRef.current = e.touches[0]?.clientY ?? null;
+    },
+    [active]
+  );
+
+  const handleChatTouchMove = React.useCallback((e: React.TouchEvent<HTMLElement>) => {
+    const el = threadRef.current;
+    const previousY = outsideTouchYRef.current;
+    const currentY = e.touches[0]?.clientY;
+    if (!el || previousY === null || currentY === undefined) return;
+    if (el.scrollHeight <= el.clientHeight) return;
+
+    el.scrollTop += previousY - currentY;
+    outsideTouchYRef.current = currentY;
+    e.preventDefault();
+  }, []);
+
+  // GSAP-driven entrance + breathing on the bloom container.
+  // The two pseudo-element layers keep drifting via CSS, so this composes on
+  // top of the liquid effect rather than replacing it.
+  React.useEffect(() => {
+    const bloom = bloomRef.current;
+    if (!bloom) return;
+
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduced) {
+      // Skip animation; just reveal it in its resting state.
+      gsap.set(bloom, { opacity: 1, clearProps: 'transform,filter' });
+      return;
+    }
+
+    const ctx = gsap.context(() => {
+      const tl = gsap.timeline();
+
+      // 1. Cinematic bottom-to-top power-up on load.
+      tl.fromTo(
+        bloom,
+        {
+          scaleY: 0.1,
+          scaleX: 0.85,
+          y: 100,
+          opacity: 0,
+          filter: 'blur(20px) brightness(0.4)',
+        },
+        {
+          scaleY: 1,
+          scaleX: 1,
+          y: 0,
+          opacity: 1,
+          filter: 'blur(0px) brightness(1)',
+          duration: 2.4,
+          ease: 'power4.out',
+        }
+      );
+
+      // 2. Organic breathing loop once the entrance settles.
+      tl.to(bloom, {
+        scaleY: 1.02,
+        scaleX: 1.01,
+        y: -8,
+        filter: 'blur(0px) brightness(1.04)',
+        duration: 6,
+        ease: 'sine.inOut',
+        repeat: -1,
+        yoyo: true,
+      });
+    }, bloom);
+
+    return () => ctx.revert();
+  }, []);
+
+  // Drive CSS variables so the gradient's bright core follows the cursor.
+  // (We set variables, not transforms, so this never fights the GSAP tweens.)
+  React.useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      const bloom = bloomRef.current;
+      if (!bloom) return;
+      const x = e.clientX / window.innerWidth - 0.5;
+      const y = e.clientY / window.innerHeight - 0.5;
+      bloom.style.setProperty('--bloom-mx', String(x));
+      bloom.style.setProperty('--bloom-my', String(y));
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  return (
+    <section
+      id="hero"
+      onWheel={active ? handleChatWheel : undefined}
+      onTouchStart={active ? handleChatTouchStart : undefined}
+      onTouchMove={active ? handleChatTouchMove : undefined}
+      onTouchEnd={active ? () => { outsideTouchYRef.current = null; } : undefined}
+      className={`relative min-h-screen flex flex-col items-center overflow-hidden transition-colors duration-700 ${
+        active ? 'bg-white' : ''
+      }`}
+    >
+      {/* Radial multi-gradient bloom rising from the bottom-center.
+          Starts hidden; GSAP fades/sweeps it in (see effect above).
+          In chat mode it drops lower to sit just above the input. */}
+      <div
+        ref={bloomRef}
+        className={`hero-bloom ${active ? 'is-chatting' : ''}`}
+        style={{ opacity: 0 }}
+      />
+
+      {/* White wash behind the headline — only while in landing (idle) mode. */}
+      {!active && <div className="hero-top-wash" />}
+
+      <AnimatePresence mode="wait" initial={false}>
+        {active ? (
+          /* ─────────────── Inline chat view ─────────────── */
+          <motion.div
+            key="chat"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+            className="relative z-10 w-full max-w-3xl mx-auto flex flex-col h-screen px-4 sm:px-6"
+          >
+            {/* Minimalist navbar — controls only, no logo */}
+            <header className="flex items-center justify-end gap-1.5 py-4 select-none flex-shrink-0">
+              {/* New chat — subtle text+icon button */}
+              <button
+                onClick={reset}
+                className="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium text-neutral-500 hover:text-neutral-900 hover:bg-neutral-100 transition-colors duration-150 cursor-pointer"
+              >
+                <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                </svg>
+                New chat
+              </button>
+              {/* Admin — subtle outlined pill */}
+              <Link
+                href="/admin"
+                className="inline-flex items-center rounded-full border border-neutral-200 bg-white/60 backdrop-blur px-3.5 py-1.5 text-xs font-medium text-neutral-700 hover:bg-neutral-100 hover:border-neutral-300 transition-all duration-150"
+              >
+                Admin
+              </Link>
+            </header>
+
+            {/* Thread — only this scrolls. The inner wrapper is min-h-full with
+                justify-end so a few messages rest just above the input, while a
+                long conversation still scrolls naturally from the top. */}
+            <div ref={threadRef} className="flex-1 overflow-y-auto no-scrollbar px-1 min-h-0">
+              <div className="min-h-full flex flex-col justify-end py-8">
+                {messages.map((item) => (
+                  <MessageBubble key={item.id} message={item} />
+                ))}
+
+                {/* Thinking indicator — minimal, document-style (no avatar/bubble) */}
+                {isTyping && (
+                  <motion.div
+                    initial={{ opacity: 0, y: 6 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="w-full mb-10 flex items-center gap-2 text-[15px] text-neutral-400"
+                  >
+                    <span>Searching your knowledge base</span>
+                    <span className="flex items-center gap-1">
+                      <span className="h-1.5 w-1.5 bg-neutral-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                      <span className="h-1.5 w-1.5 bg-neutral-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                      <span className="h-1.5 w-1.5 bg-neutral-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                    </span>
+                  </motion.div>
+                )}
+              </div>
+            </div>
+
+            {/* Follow-up input pinned to the bottom — dark, matching the home input */}
+            <div className="flex-shrink-0 pb-5 pt-2">
+              <form
+                onSubmit={handleChatSubmit}
+                className="relative flex items-center gap-2 rounded-full bg-[#262626] border border-white/10 shadow-xl shadow-black/25 pl-5 pr-2 py-2 focus-within:border-white/20 transition-all duration-200"
+              >
+                <input
+                  type="text"
+                  value={chatInput}
+                  onChange={(e) => setChatInput(e.target.value)}
+                  disabled={isTyping}
+                  placeholder="Ask a follow-up question..."
+                  className="flex-1 bg-transparent text-[15px] text-white placeholder-white/40 focus:outline-none py-2 disabled:opacity-60"
+                />
+                <button
+                  type="submit"
+                  disabled={!chatInput.trim() || isTyping}
+                  aria-label="Send message"
+                  className={`flex-shrink-0 h-10 w-10 rounded-full flex items-center justify-center transition-all duration-200 ${
+                    chatInput.trim() && !isTyping
+                      ? 'bg-white text-black hover:scale-105 active:scale-95 cursor-pointer'
+                      : 'bg-white/10 text-white/30 cursor-not-allowed'
+                  }`}
+                >
+                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 19V5m0 0l-6 6m6-6l6 6" />
+                  </svg>
+                </button>
+              </form>
+              <p className="text-[10px] text-white/45 text-center mt-2.5">
+                Query Bot prioritizes your custom Q&amp;A over document matches and cites its sources.
+              </p>
+            </div>
+          </motion.div>
+        ) : (
+          /* ─────────────── Landing (idle) view ─────────────── */
+          <motion.div
+            key="hero"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+            className="relative z-10 w-full flex flex-col items-center"
+          >
+            {/* ── Headline content (sits on the white wash) ── */}
+            <div className="w-full flex flex-col items-center pt-28 px-6">
+              {/* Large Headline */}
+              <motion.h1
+                initial={{ opacity: 0, y: 15 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+                className="text-[40px] sm:text-5xl md:text-6xl lg:text-7xl font-sans font-bold tracking-tight text-neutral-900 leading-[1.05] max-w-3xl text-center"
+              >
+                Chat with your{' '}
+                <span className="gif-clipped-word italic select-all">documents</span>
+              </motion.h1>
+
+              {/* Subtitle */}
+              <motion.p
+                initial={{ opacity: 0, y: 15 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 0.12, ease: [0.16, 1, 0.3, 1] }}
+                className="mt-6 text-[15px] sm:text-base md:text-lg text-neutral-500 max-w-2xl font-normal leading-relaxed mx-auto text-center"
+              >
+                Upload PDFs, Word docs, and spreadsheets. Add custom Q&A. Get fast, grounded answers with sources.
+              </motion.p>
+
+              {/* Premium Dual CTA Pill Container */}
+              <motion.div
+                initial={{ opacity: 0, y: 15 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: 0.24, ease: [0.16, 1, 0.3, 1] }}
+                className="mt-8 flex flex-col items-center gap-3 w-full"
+              >
+                <div className="flex items-center justify-between bg-neutral-100 backdrop-blur-md pl-5 pr-1 py-1 rounded-full border border-neutral-200 shadow-xs max-w-md w-full sm:w-auto gap-4">
+                  <span className="text-xs sm:text-[13px] font-sans font-normal text-neutral-500 tracking-tight text-left">
+                    Build your knowledge base
+                  </span>
+                  <Link href="/admin" className="flex-shrink-0">
+                    <button className="bg-neutral-900 hover:bg-neutral-800 text-white font-sans font-semibold text-xs px-4.5 py-2 rounded-full transition-all duration-150 active:scale-95 shadow-2xl cursor-pointer">
+                      Open Admin
+                    </button>
+                  </Link>
+                </div>
+              </motion.div>
+            </div>
+
+            {/* ── Floating AI Chat Input (sits in the dark, above the bloom) ── */}
+            <motion.div
+              initial={{ opacity: 0, y: 25 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.36, ease: [0.16, 1, 0.3, 1] }}
+              className="relative z-20 w-full max-w-4xl px-6 mt-12"
+            >
+              <FloatingChatInput onSubmitText={sendMessage} />
+            </motion.div>
+
+            {/* Spacer so the bloom has room to breathe below the input */}
+            <div className="min-h-[18vh]" />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </section>
+  );
+}

components/MessageBubble.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import { motion } from 'motion/react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import FileTypeIcon from './FileTypeIcon';
+import Badge from './Badge';
+import { ChatMessage } from '@/lib/kb-data';
+
+interface SourceCardProps {
+  name: string;
+  type: string;
+}
+
+function SourceCard({ name, type }: SourceCardProps) {
+  const isFileType = ['PDF', 'DOC', 'DOCX', 'EXCEL', 'XLS', 'XLSX', 'CSV'].includes(
+    type.toUpperCase()
+  );
+
+  const getBadgeColor = (): 'danger' | 'success' | 'info' | 'purple' | 'neutral' => {
+    switch (type.toUpperCase()) {
+      case 'PDF':
+        return 'danger';
+      case 'EXCEL':
+      case 'XLS':
+        return 'success';
+      case 'DOCX':
+        return 'info';
+      case 'Q&A':
+        return 'purple';
+      default:
+        return 'neutral';
+    }
+  };
+
+  return (
+    <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-white hover:bg-neutral-50 border border-neutral-200 rounded-full text-xs text-neutral-600 shadow-sm transition-colors duration-200 cursor-default">
+      <span className="flex-shrink-0 flex items-center justify-center">
+        {isFileType ? (
+          <FileTypeIcon type={type} size={16} className="block" />
+        ) : (
+          <span className="text-[13px] text-violet-500">*</span>
+        )}
+      </span>
+      <span className="font-medium truncate max-w-[150px]" title={name}>
+        {name}
+      </span>
+      <Badge variant={getBadgeColor()} className="px-1.5 py-0 text-[8px] font-bold">
+        {type}
+      </Badge>
+    </div>
+  );
+}
+
+interface MessageBubbleProps {
+  message: ChatMessage;
+}
+
+function MarkdownContent({ text, compact = false }: { text: string; compact?: boolean }) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        h1: ({ children }) => (
+          <h1 className="mt-6 first:mt-0 mb-2 text-xl font-bold tracking-tight text-neutral-950">
+            {children}
+          </h1>
+        ),
+        h2: ({ children }) => (
+          <h2 className="mt-5 first:mt-0 mb-2 text-lg font-bold tracking-tight text-neutral-950">
+            {children}
+          </h2>
+        ),
+        h3: ({ children }) => (
+          <h3 className="mt-5 first:mt-0 mb-1 text-[13px] font-bold uppercase tracking-wide text-neutral-900">
+            {children}
+          </h3>
+        ),
+        p: ({ children }) => (
+          <p className={`${compact ? 'mt-1 leading-6' : 'mt-3 leading-7'} first:mt-0 text-[15px] text-neutral-700`}>
+            {children}
+          </p>
+        ),
+        strong: ({ children }) => (
+          <strong className="font-semibold text-neutral-900">{children}</strong>
+        ),
+        em: ({ children }) => <em className="italic text-neutral-800">{children}</em>,
+        a: ({ href, children }) => (
+          <a
+            href={href}
+            target="_blank"
+            rel="noreferrer"
+            className="font-medium text-violet-700 underline decoration-violet-300 underline-offset-2 hover:text-violet-900"
+          >
+            {children}
+          </a>
+        ),
+        ul: ({ children }) => (
+          <ul className={`${compact ? 'mt-2' : 'mt-3'} space-y-1.5 pl-5 text-[15px] text-neutral-700 list-disc`}>
+            {children}
+          </ul>
+        ),
+        ol: ({ children }) => (
+          <ol className={`${compact ? 'mt-2' : 'mt-3'} space-y-1.5 pl-5 text-[15px] text-neutral-700 list-decimal`}>
+            {children}
+          </ol>
+        ),
+        li: ({ children }) => (
+          <li className="leading-7 marker:text-violet-400">{children}</li>
+        ),
+        blockquote: ({ children }) => (
+          <blockquote className="mt-4 border-l-2 border-violet-300 pl-4 text-neutral-600">
+            {children}
+          </blockquote>
+        ),
+        code: ({ className, children, ...props }) => {
+          const isBlock = className?.startsWith('language-');
+
+          if (isBlock) {
+            return (
+              <code className={`block overflow-x-auto whitespace-pre p-4 text-[13px] ${className ?? ''}`} {...props}>
+                {children}
+              </code>
+            );
+          }
+
+          return (
+            <code
+              className="rounded border border-violet-200 bg-violet-50 px-1.5 py-0.5 font-mono text-[13px] font-medium text-violet-700"
+              {...props}
+            >
+              {children}
+            </code>
+          );
+        },
+        pre: ({ children }) => (
+          <pre className="mt-4 overflow-x-auto rounded-xl border border-neutral-200 bg-neutral-950 text-neutral-50 shadow-sm">
+            {children}
+          </pre>
+        ),
+        table: ({ children }) => (
+          <div className="mt-4 overflow-x-auto rounded-xl border border-neutral-200">
+            <table className="min-w-full border-collapse text-left text-sm text-neutral-700">
+              {children}
+            </table>
+          </div>
+        ),
+        th: ({ children }) => (
+          <th className="border-b border-neutral-200 bg-neutral-50 px-3 py-2 font-semibold text-neutral-900">
+            {children}
+          </th>
+        ),
+        td: ({ children }) => (
+          <td className="border-t border-neutral-100 px-3 py-2 align-top">{children}</td>
+        ),
+        hr: () => <hr className="my-5 border-neutral-200" />,
+      }}
+    >
+      {text}
+    </ReactMarkdown>
+  );
+}
+
+export default function MessageBubble({ message }: MessageBubbleProps) {
+  const isUser = message.sender === 'user';
+
+  if (isUser) {
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+        className="flex w-full justify-end mb-6"
+      >
+        <div className="max-w-[80%] rounded-2xl rounded-tr-md bg-neutral-100 border border-neutral-200/80 px-4 py-2.5">
+          <MarkdownContent text={message.text} compact />
+        </div>
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
+      className="w-full mb-10"
+    >
+      <MarkdownContent text={message.text} />
+
+      {message.sources && message.sources.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 mt-4">
+          {message.sources.map((src, idx) => (
+            <SourceCard key={idx} name={src.name} type={src.type} />
+          ))}
+        </div>
+      )}
+    </motion.div>
+  );
+}

components/Navbar.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import * as React from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export default function Navbar() {
+  const pathname = usePathname();
+  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
+
+  const navLinks = [
+    { name: 'Admin', href: '/admin' },
+    { name: 'Chat', href: '/' },
+    { name: 'Docs', href: '#' },
+  ];
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-white/40 backdrop-blur-md border-b border-neutral-200/30">
+      <div className="max-w-7xl mx-auto px-6 sm:px-8">
+        <div className="flex justify-between h-14 items-center">
+          {/* Logo Section */}
+          <div className="flex-shrink-0">
+            <Link href="/" className="group flex items-center">
+              <span className="font-sans font-semibold text-base sm:text-lg tracking-tight text-neutral-950 transition-colors duration-150">
+                Query Bot
+              </span>
+            </Link>
+          </div>
+
+          {/* Desktop Navigation Links */}
+          <div className="hidden md:flex items-center gap-8">
+            {navLinks.map((link) => {
+              const isActive = pathname === link.href;
+              return (
+                <Link
+                  key={link.name}
+                  href={link.href}
+                  className={`text-xs font-medium tracking-wide transition-colors duration-150 uppercase ${
+                    isActive
+                      ? 'text-neutral-950 font-semibold'
+                      : 'text-neutral-500 hover:text-neutral-950'
+                  }`}
+                >
+                  {link.name}
+                </Link>
+              );
+            })}
+          </div>
+
+          {/* CTA Button */}
+          <div className="hidden md:flex items-center">
+            <Link href="/">
+              <button className="h-8 px-4 rounded-full bg-neutral-950 hover:bg-neutral-800 text-white text-[11px] font-semibold tracking-wide transition-all duration-150 shadow-3xs cursor-pointer">
+                Get Started
+              </button>
+            </Link>
+          </div>
+
+          {/* Mobile hamburger menu button */}
+          <div className="md:hidden flex items-center">
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              type="button"
+              className="inline-flex items-center justify-center p-1.5 rounded-md text-neutral-500 hover:text-neutral-950 focus:outline-none"
+              aria-controls="mobile-menu"
+              aria-expanded="false"
+            >
+              <span className="sr-only">Open main menu</span>
+              {mobileMenuOpen ? (
+                <svg className="block h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              ) : (
+                <svg className="block h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu dropdown */}
+      {mobileMenuOpen && (
+        <div className="md:hidden border-b border-neutral-200/30 bg-white/95 backdrop-blur-md" id="mobile-menu">
+          <div className="px-4 pt-2 pb-4 space-y-1">
+            {navLinks.map((link) => {
+              const isActive = pathname === link.href;
+              return (
+                <Link
+                  key={link.name}
+                  href={link.href}
+                  onClick={() => setMobileMenuOpen(false)}
+                  className={`block px-3 py-2 rounded-lg text-xs font-semibold tracking-wide uppercase ${
+                    isActive
+                      ? 'bg-neutral-50 text-neutral-950'
+                      : 'text-neutral-600 hover:bg-neutral-50/50 hover:text-neutral-950'
+                  }`}
+                >
+                  {link.name}
+                </Link>
+              );
+            })}
+            <div className="pt-3 px-3">
+              <Link href="/" onClick={() => setMobileMenuOpen(false)}>
+                <button className="w-full h-9 rounded-full bg-neutral-950 text-white text-xs font-semibold tracking-wide">
+                  Get Started
+                </button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}

components/QABuilderPanel.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import * as React from 'react';
+import QACard from './QACard';
+import { KBPair } from '@/lib/kb-data';
+
+interface QABuilderPanelProps {
+  qaList: KBPair[];
+  onAdd: (q: string, a: string, cat: string, prio: boolean) => void;
+  onUpdate: (id: string, q: string, a: string, cat: string, prio: boolean) => void;
+  onDelete: (id: string) => void;
+  deletingIds: Set<string>;
+}
+
+export default function QABuilderPanel({ qaList, onAdd, onUpdate, onDelete, deletingIds }: QABuilderPanelProps) {
+  const [question, setQuestion] = React.useState('');
+  const [answer, setAnswer] = React.useState('');
+  const [category, setCategory] = React.useState('General');
+
+  // Track active edit mode
+  const [editingId, setEditingId] = React.useState<string | null>(null);
+
+  const categories = ['General', 'HR', 'Support', 'Pricing', 'Technical'];
+
+  // Vibrant per-category gradients used when a chip is selected.
+  const categoryGradients: Record<string, string> = {
+    General: 'from-violet-500 to-indigo-500',
+    HR: 'from-pink-500 to-fuchsia-500',
+    Support: 'from-blue-500 to-cyan-500',
+    Pricing: 'from-emerald-500 to-teal-500',
+    Technical: 'from-orange-500 to-rose-500',
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!question.trim() || !answer.trim()) return;
+
+    if (editingId) {
+      onUpdate(editingId, question.trim(), answer.trim(), category.trim(), false);
+      setEditingId(null);
+    } else {
+      onAdd(question.trim(), answer.trim(), category.trim(), false);
+    }
+
+    // Reset fields
+    setQuestion('');
+    setAnswer('');
+    setCategory('General');
+  };
+
+  const handleEditInit = (qa: KBPair) => {
+    setEditingId(qa.id);
+    setQuestion(qa.question);
+    setAnswer(qa.answer);
+    setCategory(qa.category || 'General');
+  };
+
+  const handleCancelEdit = () => {
+    setEditingId(null);
+    setQuestion('');
+    setAnswer('');
+    setCategory('General');
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Panel Headers */}
+      <div>
+        <h2 className="text-xl font-semibold text-white tracking-tight">Custom Q&A</h2>
+        <p className="text-sm text-white/50 mt-1 leading-relaxed">
+          Add direct answers for important questions your users may ask.
+        </p>
+      </div>
+
+      {/* Main Q&A Form */}
+      <form onSubmit={handleSubmit} className="mt-6 bg-black/20 border border-white/10 p-5 rounded-2xl flex flex-col gap-4">
+        {editingId && (
+          <div className="flex items-center justify-between bg-white text-black px-3.5 py-1.5 rounded-xl text-xs font-medium border border-white/20">
+            <span className="flex items-center gap-1.5 animate-pulse">
+              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+              Editing Q&A Pair
+            </span>
+            <button
+              type="button"
+              onClick={handleCancelEdit}
+              className="text-neutral-500 hover:text-black transition-colors duration-150 underline decoration-dotted text-[11px] cursor-pointer"
+            >
+              Cancel Edit
+            </button>
+          </div>
+        )}
+
+        {/* Question Input */}
+        <div>
+          <label htmlFor="question-input" className="block text-xs font-bold text-white/50 uppercase tracking-wider mb-2">
+            Question
+          </label>
+          <input
+            id="question-input"
+            type="text"
+            required
+            value={question}
+            onChange={(e) => setQuestion(e.target.value)}
+            placeholder="e.g., What are standard work hours?"
+            className="w-full bg-white/5 border border-white/10 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-white/30 placeholder:text-white/30"
+          />
+        </div>
+
+        {/* Answer Text Area */}
+        <div>
+          <label htmlFor="answer-textarea" className="block text-xs font-bold text-white/50 uppercase tracking-wider mb-2">
+            Direct Answer
+          </label>
+          <textarea
+            id="answer-textarea"
+            required
+            rows={3}
+            value={answer}
+            onChange={(e) => setAnswer(e.target.value)}
+            placeholder="Provide a clear, detailed answer..."
+            className="w-full bg-white/5 border border-white/10 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-white/30 placeholder:text-white/30 resize-none"
+          />
+        </div>
+
+        {/* Category + Suggestion Chips */}
+        <div>
+          <label className="block text-xs font-bold text-white/50 uppercase tracking-wider mb-2">
+            Category
+          </label>
+          <div className="flex flex-wrap gap-2">
+            {categories.map((cat) => {
+              const acts = category === cat;
+              return (
+                <button
+                  key={cat}
+                  type="button"
+                  onClick={() => setCategory(cat)}
+                  className={`px-3.5 py-1.5 rounded-full text-xs font-semibold border transition-all duration-100 cursor-pointer active:scale-95 ${
+                    acts
+                      ? `bg-gradient-to-r ${categoryGradients[cat]} text-white border-transparent shadow-lg shadow-black/30`
+                      : 'bg-white/5 text-white/60 border-white/10 hover:bg-white/10 hover:border-white/20 hover:text-white'
+                  }`}
+                >
+                  {cat}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Submit — animated GIF background matching the hero "documents" word */}
+        <button
+          type="submit"
+          className="gif-bg group relative mt-2 w-full h-11 inline-flex items-center justify-center overflow-hidden rounded-full text-sm font-bold tracking-wide cursor-pointer ring-1 ring-white/20 transition-all duration-200 hover:ring-white/40 active:ring-white/50 active:scale-[0.98]"
+        >
+          {/* Dark scrim keeps the label legible over the moving GIF; clears on
+              press so the button turns transparent on click. */}
+          <span className="absolute inset-0 bg-black/35 group-hover:bg-black/20 group-active:bg-transparent transition-colors duration-200" />
+          <span className="relative text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.7)]">
+            {editingId ? 'Update Q&A' : 'Add Q&A'}
+          </span>
+        </button>
+      </form>
+
+      {/* Custom Q&A list container */}
+      <div className="mt-8">
+        <h3 className="text-xs font-bold text-white/40 uppercase tracking-wider mb-3">
+          Configured Pairings ({qaList.length})
+        </h3>
+
+        {qaList.length === 0 ? (
+          <div className="p-8 border border-white/5 rounded-2xl bg-black/20 text-center text-xs text-white/30 select-none">
+            No Q&A pairs configured yet. Add them above to bypass search algorithms.
+          </div>
+        ) : (
+          <div className="space-y-3 max-h-[350px] overflow-y-auto pr-1">
+            {qaList.map((qa) => (
+              <QACard
+                key={qa.id}
+                qa={qa}
+                onEdit={handleEditInit}
+                onDelete={onDelete}
+                isDeleting={deletingIds.has(qa.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

components/QACard.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import * as React from 'react';
+import { KBPair } from '@/lib/kb-data';
+
+interface QACardProps {
+  qa: KBPair;
+  onEdit: (qa: KBPair) => void;
+  onDelete: (id: string) => void;
+  isDeleting?: boolean;
+}
+
+function Spinner({ className = '' }: { className?: string }) {
+  return (
+    <svg className={`animate-spin ${className}`} viewBox="0 0 24 24" fill="none">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+    </svg>
+  );
+}
+
+// Vibrant per-category gradient used for the category chip.
+const CATEGORY_GRADIENT: Record<string, string> = {
+  General: 'from-violet-500 to-indigo-500',
+  HR: 'from-pink-500 to-fuchsia-500',
+  Support: 'from-blue-500 to-cyan-500',
+  Pricing: 'from-emerald-500 to-teal-500',
+  Technical: 'from-orange-500 to-rose-500',
+};
+
+// Per-category aurora glow colors bleeding up from the bottom of the card.
+const CATEGORY_AURORA: Record<string, React.CSSProperties> = {
+  General: { ['--aurora-1' as string]: 'rgba(168,85,247,0.5)', ['--aurora-2' as string]: 'rgba(99,102,241,0.45)' },
+  HR: { ['--aurora-1' as string]: 'rgba(236,72,153,0.5)', ['--aurora-2' as string]: 'rgba(168,85,247,0.4)' },
+  Support: { ['--aurora-1' as string]: 'rgba(59,130,246,0.5)', ['--aurora-2' as string]: 'rgba(34,211,238,0.45)' },
+  Pricing: { ['--aurora-1' as string]: 'rgba(16,185,129,0.5)', ['--aurora-2' as string]: 'rgba(132,204,22,0.4)' },
+  Technical: { ['--aurora-1' as string]: 'rgba(249,115,22,0.5)', ['--aurora-2' as string]: 'rgba(244,63,94,0.4)' },
+};
+
+export default function QACard({ qa, onEdit, onDelete, isDeleting = false }: QACardProps) {
+  const aurora = CATEGORY_AURORA[qa.category] ?? CATEGORY_AURORA.General;
+  const gradient = CATEGORY_GRADIENT[qa.category] ?? CATEGORY_GRADIENT.General;
+  return (
+    <div
+      style={aurora}
+      className={`aurora-card p-4 bg-white/[0.04] backdrop-blur-sm border border-white/10 rounded-2xl transition-all duration-300 select-none ${
+        isDeleting ? 'opacity-50' : 'hover:border-white/20'
+      }`}
+    >
+      <div className="flex flex-col gap-2">
+        {/* badges line */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-1.5 flex-wrap">
+            <span className={`inline-flex items-center rounded-full bg-gradient-to-r ${gradient} px-2 py-0.5 text-[9px] font-bold uppercase tracking-wide text-white shadow-sm`}>
+              {qa.category || 'General'}
+            </span>
+          </div>
+
+          {/* edit + delete buttons (or a Removing… indicator) */}
+          {isDeleting ? (
+            <span className="inline-flex items-center gap-2 text-[11px] font-medium text-red-300/90">
+              <Spinner className="w-3.5 h-3.5" />
+              Removing…
+            </span>
+          ) : (
+            <div className="flex items-center gap-1">
+              <button
+                onClick={() => onEdit(qa)}
+                title="Edit Q&A Pair"
+                className="h-8 w-8 rounded-lg flex items-center justify-center text-white/40 hover:text-white hover:bg-white/10 border border-transparent transition-all duration-200 cursor-pointer"
+              >
+                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                </svg>
+              </button>
+              <button
+                onClick={() => onDelete(qa.id)}
+                title="Delete Q&A Pair"
+                className="h-8 w-8 rounded-lg flex items-center justify-center text-white/30 hover:text-red-400 hover:bg-red-500/20 border border-transparent transition-all duration-200 cursor-pointer"
+              >
+                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Question text */}
+        <h4 className="text-sm font-semibold text-white/90 tracking-tight leading-snug">
+          {qa.question}
+        </h4>
+
+        {/* Answer text */}
+        <p className="text-xs text-white/60 line-clamp-2 leading-relaxed">
+          {qa.answer}
+        </p>
+      </div>
+    </div>
+  );
+}

components/UploadedFileCard.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import * as React from 'react';
+import Badge from './Badge';
+import FileTypeIcon from './FileTypeIcon';
+import { KBFile } from '@/lib/kb-data';
+
+interface UploadedFileCardProps {
+  file: KBFile;
+  onDelete: (id: string) => void;
+  isDeleting?: boolean;
+}
+
+function Spinner({ className = '' }: { className?: string }) {
+  return (
+    <svg className={`animate-spin ${className}`} viewBox="0 0 24 24" fill="none">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+    </svg>
+  );
+}
+
+// Per-type aurora glow colors that bleed up from the bottom of the card.
+const AURORA: Record<string, React.CSSProperties> = {
+  PDF: { ['--aurora-1' as string]: 'rgba(244,63,94,0.55)', ['--aurora-2' as string]: 'rgba(249,115,22,0.45)' },
+  DOCX: { ['--aurora-1' as string]: 'rgba(59,130,246,0.55)', ['--aurora-2' as string]: 'rgba(34,211,238,0.45)' },
+  EXCEL: { ['--aurora-1' as string]: 'rgba(16,185,129,0.55)', ['--aurora-2' as string]: 'rgba(132,204,22,0.4)' },
+  CSV: { ['--aurora-1' as string]: 'rgba(168,85,247,0.55)', ['--aurora-2' as string]: 'rgba(99,102,241,0.45)' },
+};
+
+export default function UploadedFileCard({ file, onDelete, isDeleting = false }: UploadedFileCardProps) {
+  // Brand logo for the file type, sitting on a subtle dark tile to match
+  // the admin theme.
+  const renderIcon = () => (
+    <div className="h-10 w-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center flex-shrink-0">
+      <FileTypeIcon type={file.type} size={22} />
+    </div>
+  );
+
+  const statusVariants: Record<string, 'success' | 'warning' | 'danger'> = {
+    Ready: 'success',
+    Processing: 'warning',
+    Failed: 'danger',
+  };
+
+  return (
+    <div
+      style={AURORA[file.type] ?? AURORA.CSV}
+      className={`aurora-card flex items-center justify-between p-4 bg-white/[0.04] backdrop-blur-sm border border-white/10 rounded-2xl transition-all duration-300 select-none ${
+        isDeleting ? 'opacity-50' : 'hover:border-white/20'
+      }`}
+    >
+      {/* File Metainfo */}
+      <div className="flex items-center gap-3 min-w-0 pr-4">
+        {renderIcon()}
+        <div className="min-w-0">
+          <p className="text-sm font-medium text-white truncate" title={file.name}>
+            {file.name}
+          </p>
+          <div className="flex items-center gap-2 mt-1">
+            <span className="text-[11px] text-white/50 font-mono">{file.size}</span>
+            <span className="text-white/30 text-[10px]">•</span>
+            <Badge variant={file.type === 'PDF' ? 'danger' : file.type === 'EXCEL' ? 'success' : file.type === 'DOCX' ? 'info' : 'purple'} className="py-0 px-1.5 text-[9px] bg-white/10 text-white border-white/10">
+              {file.type}
+            </Badge>
+          </div>
+        </div>
+      </div>
+
+      {/* Delete and Status */}
+      <div className="flex items-center gap-3 flex-shrink-0">
+        {isDeleting ? (
+          <span className="inline-flex items-center gap-2 text-[11px] font-medium text-red-300/90">
+            <Spinner className="w-3.5 h-3.5" />
+            Removing…
+          </span>
+        ) : (
+          <>
+            <Badge
+              variant={statusVariants[file.status] || 'neutral'}
+              className={`text-[10px] py-0.5 px-2 bg-white/10 text-white border-white/10 ${file.status === 'Processing' ? 'animate-pulse' : ''}`}
+            >
+              {file.status}
+            </Badge>
+
+            <button
+              onClick={() => onDelete(file.id)}
+              aria-label="Delete document"
+              className="h-8 w-8 rounded-lg flex items-center justify-center text-white/40 hover:text-red-400 hover:bg-red-500/20 hover:border-red-500/30 transition-colors duration-200 border border-transparent cursor-pointer"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    Promise.resolve().then(() => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    })
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

lib/cohere-config.ts

@@ -0,0 +1,29 @@
+// Central, editable configuration for the Cohere RAG pipeline.
+// Swap these model names if your Cohere account exposes different versions.
+
+export const EMBED_MODEL = 'embed-v4.0';
+export const RERANK_MODEL = 'rerank-v4.0-pro';
+export const CHAT_MODEL = 'command-a-plus-05-2026';
+
+// Chunking: Cohere recommends ~400-word chunks for best retrieval performance.
+export const CHUNK_WORDS = 400;
+export const CHUNK_OVERLAP_WORDS = 50;
+
+// Retrieval tuning.
+// A wide cosine pool so a blended multi-topic query ("X and Y") still pulls in
+// the weaker topic's chunks before reranking — for most small KBs this is
+// effectively "rerank everything", which is the most robust option.
+export const RETRIEVE_TOP_K = 120; // candidates pulled by cosine similarity before rerank
+export const CONTEXT_TOP_N = 12; // chunks handed to the chat model after rerank + diversification
+export const PER_SOURCE_CAP = 5; // max chunks from any single document in the final context
+export const QA_PRIORITY_BOOST = 0.15; // cosine-score bonus for prioritized Q&A pairs
+export const EMBED_BATCH = 96; // max texts per embed request
+
+export const CHAT_SYSTEM_PROMPT = [
+  'You are Query Bot, a helpful knowledge-base assistant.',
+  'Answer only from the supplied documents and custom Q&A context.',
+  'Keep responses accurate, relevant, and conversational.',
+  'If the context is insufficient or does not answer the question, say that clearly and ask for the missing document or detail.',
+  'Do not invent facts, numbers, citations, policies, names, or conclusions that are not supported by the context.',
+  'When useful, mention the source context briefly in natural language.',
+].join(' ');

lib/cohere.ts

@@ -0,0 +1,122 @@
+import { CohereClientV2, Cohere } from 'cohere-ai';
+import {
+  EMBED_MODEL,
+  RERANK_MODEL,
+  CHAT_MODEL,
+  CHAT_SYSTEM_PROMPT,
+  EMBED_BATCH,
+} from './cohere-config';
+
+// The only module that talks to Cohere. The API key is read server-side only
+// and must never be imported into a client component.
+
+let client: CohereClientV2 | null = null;
+
+function getClient(): CohereClientV2 {
+  const token = process.env.COHERE_API_KEY;
+  if (!token) {
+    throw new Error(
+      'COHERE_API_KEY is not set. Add it to .env.local (see .env.example).'
+    );
+  }
+  if (!client) {
+    client = new CohereClientV2({ token });
+  }
+  return client;
+}
+
+/** Embed documents (for the knowledge base) in batches. Returns one float vector per text. */
+export async function embedDocuments(texts: string[]): Promise<number[][]> {
+  if (texts.length === 0) return [];
+  const co = getClient();
+  const out: number[][] = [];
+  for (let i = 0; i < texts.length; i += EMBED_BATCH) {
+    const batch = texts.slice(i, i + EMBED_BATCH);
+    const res = await co.embed({
+      model: EMBED_MODEL,
+      inputType: 'search_document',
+      embeddingTypes: ['float'],
+      texts: batch,
+    });
+    const floats = res.embeddings.float ?? [];
+    out.push(...floats);
+  }
+  return out;
+}
+
+/** Embed a single user query for retrieval. */
+export async function embedQuery(text: string): Promise<number[]> {
+  const co = getClient();
+  const res = await co.embed({
+    model: EMBED_MODEL,
+    inputType: 'search_query',
+    embeddingTypes: ['float'],
+    texts: [text],
+  });
+  const vec = res.embeddings.float?.[0];
+  if (!vec) throw new Error('Cohere returned no query embedding.');
+  return vec;
+}
+
+/**
+ * Rerank candidate document texts against the query. Returns index + relevance,
+ * best first. By default returns *all* candidates ranked, so the caller can
+ * apply its own selection (e.g. per-source diversification) on the full pool.
+ */
+export async function rerank(
+  query: string,
+  documents: string[],
+  topN: number = documents.length
+): Promise<{ index: number; relevanceScore: number }[]> {
+  if (documents.length === 0) return [];
+  const co = getClient();
+  const res = await co.rerank({
+    model: RERANK_MODEL,
+    query,
+    documents,
+    topN: Math.min(topN, documents.length),
+  });
+  return res.results.map((r) => ({
+    index: r.index,
+    relevanceScore: r.relevanceScore,
+  }));
+}
+
+/** Grounded chat: pass retrieved documents and get an answer plus fine-grained citations. */
+export async function chatWithDocuments(
+  query: string,
+  documents: Cohere.Document[]
+): Promise<{ text: string; citations: Cohere.Citation[] }> {
+  const co = getClient();
+  const res = await co.chat({
+    model: CHAT_MODEL,
+    messages: [
+      { role: 'system', content: CHAT_SYSTEM_PROMPT },
+      { role: 'user', content: query },
+    ],
+    documents,
+  });
+
+  const text =
+    res.message.content
+      ?.filter((c): c is { type: 'text'; text: string } => c.type === 'text')
+      .map((c) => c.text)
+      .join('') ?? '';
+
+  return { text, citations: res.message.citations ?? [] };
+}
+
+/** Cosine similarity between two equal-length vectors. */
+export function cosineSimilarity(a: number[], b: number[]): number {
+  let dot = 0;
+  let normA = 0;
+  let normB = 0;
+  const len = Math.min(a.length, b.length);
+  for (let i = 0; i < len; i++) {
+    dot += a[i] * b[i];
+    normA += a[i] * a[i];
+    normB += b[i] * b[i];
+  }
+  if (normA === 0 || normB === 0) return 0;
+  return dot / (Math.sqrt(normA) * Math.sqrt(normB));
+}

lib/file-meta.ts

@@ -0,0 +1,26 @@
+import type { KBFile } from './kb-data';
+
+export type FileType = KBFile['type'];
+
+const EXT_TO_TYPE: Record<string, FileType> = {
+  pdf: 'PDF',
+  doc: 'DOCX',
+  docx: 'DOCX',
+  xls: 'EXCEL',
+  xlsx: 'EXCEL',
+  csv: 'CSV',
+};
+
+export const ACCEPTED_EXTENSIONS = Object.keys(EXT_TO_TYPE);
+
+/** Map a filename to one of the KBFile.type labels. Returns null if unsupported. */
+export function getFileType(fileName: string): FileType | null {
+  const ext = fileName.split('.').pop()?.toLowerCase() ?? '';
+  return EXT_TO_TYPE[ext] ?? null;
+}
+
+/** Human-readable size string matching the original FileUploadPanel formatting. */
+export function formatSize(bytes: number): string {
+  const mb = bytes / (1024 * 1024);
+  return mb < 1 ? `${Math.round(bytes / 1024)} KB` : `${mb.toFixed(1)} MB`;
+}

lib/kb-data.ts

@@ -0,0 +1,27 @@
+// Shared types for the knowledge base UI. The source of truth lives server-side
+// (see lib/kb-store.ts) and is accessed by the client through the /api routes.
+
+export interface KBFile {
+  id: string;
+  name: string;
+  type: 'PDF' | 'DOCX' | 'EXCEL' | 'CSV';
+  size: string;
+  status: 'Processing' | 'Ready' | 'Failed';
+  uploadedAt: string;
+}
+
+export interface KBPair {
+  id: string;
+  question: string;
+  answer: string;
+  category: string;
+  prioritize: boolean;
+}
+
+export interface ChatMessage {
+  id: string;
+  sender: 'user' | 'ai';
+  text: string;
+  timestamp: string;
+  sources?: Array<{ name: string; type: string }>;
+}

lib/kb-store.ts

@@ -0,0 +1,291 @@
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import type { KBFile, KBPair } from './kb-data';
+
+// Server-side source of truth for the knowledge base.
+// In Vercel production this is persisted as a private Vercel Blob object.
+// Local development without Blob credentials falls back to data/kb.json.
+
+const DATA_DIR = path.join(process.cwd(), 'data');
+const STORE_PATH = path.join(DATA_DIR, 'kb.json');
+const TMP_PATH = path.join(DATA_DIR, 'kb.json.tmp');
+const BLOB_STORE_PATH = 'query-bot/kb.json';
+
+export interface Chunk {
+  id: string;
+  text: string;
+  embedding: number[];
+}
+
+export interface KBFileRecord {
+  id: string;
+  name: string;
+  type: KBFile['type'];
+  size: string;
+  status: KBFile['status'];
+  uploadedAt: string;
+  error?: string;
+  chunks: Chunk[];
+}
+
+export interface QARecord extends KBPair {
+  embedding: number[];
+}
+
+export interface KBStore {
+  version: 1;
+  files: KBFileRecord[];
+  qa: QARecord[];
+}
+
+// Uniform retrieval candidate produced from both files and Q&A pairs.
+export interface RetrievalCandidate {
+  kind: 'file' | 'qa';
+  sourceName: string;
+  sourceType: string;
+  text: string;
+  embedding: number[];
+  prioritize: boolean;
+}
+
+const EMPTY_STORE: KBStore = { version: 1, files: [], qa: [] };
+
+function hasBlobConfig(): boolean {
+  return Boolean(
+    process.env.BLOB_READ_WRITE_TOKEN ||
+      (process.env.VERCEL_OIDC_TOKEN && process.env.BLOB_STORE_ID)
+  );
+}
+
+function shouldUseBlob(): boolean {
+  if (hasBlobConfig()) return true;
+  return process.env.VERCEL === '1';
+}
+
+function normalizeStore(parsed: Partial<KBStore>): KBStore {
+  return {
+    version: 1,
+    files: parsed.files ?? [],
+    qa: parsed.qa ?? [],
+  };
+}
+
+// --- In-process write lock -------------------------------------------------
+// Chains every read-modify-write so concurrent route invocations in the same
+// Node process don't interleave and clobber each other. Cross-instance writes
+// still need a database/vector store if this grows beyond a small admin tool.
+let queue: Promise<unknown> = Promise.resolve();
+
+function withLock<T>(fn: () => Promise<T>): Promise<T> {
+  const run = queue.then(fn, fn);
+  // Keep the chain alive even if a step rejects.
+  queue = run.then(
+    () => undefined,
+    () => undefined
+  );
+  return run;
+}
+
+async function ensureDataDir(): Promise<void> {
+  await fs.mkdir(DATA_DIR, { recursive: true });
+}
+
+export async function readStore(): Promise<KBStore> {
+  if (shouldUseBlob()) {
+    return readBlobStore();
+  }
+
+  return readLocalStore();
+}
+
+async function readBlobStore(): Promise<KBStore> {
+  if (!hasBlobConfig()) {
+    throw new Error('Vercel Blob is not configured. Add BLOB_READ_WRITE_TOKEN in Vercel.');
+  }
+
+  try {
+    const { get } = await import('@vercel/blob');
+    const blob = await get(BLOB_STORE_PATH, { access: 'private', useCache: false });
+    if (!blob || blob.statusCode !== 200) {
+      return process.env.VERCEL === '1' ? { ...EMPTY_STORE } : readLocalStore();
+    }
+
+    const raw = await new Response(blob.stream).text();
+    return normalizeStore(JSON.parse(raw) as Partial<KBStore>);
+  } catch (err) {
+    if (err instanceof Error && err.name === 'BlobNotFoundError') {
+      return process.env.VERCEL === '1' ? { ...EMPTY_STORE } : readLocalStore();
+    }
+    if (err instanceof SyntaxError) {
+      console.error('Failed to parse Blob kb.json, starting empty:', err);
+      return { ...EMPTY_STORE };
+    }
+    throw err;
+  }
+}
+
+async function readLocalStore(): Promise<KBStore> {
+  try {
+    const raw = await fs.readFile(STORE_PATH, 'utf8');
+    const parsed = JSON.parse(raw) as Partial<KBStore>;
+    return normalizeStore(parsed);
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+      return { ...EMPTY_STORE };
+    }
+    // Corrupt JSON or other read error: fail safe to an empty store rather than crash.
+    console.error('Failed to read kb.json, starting empty:', err);
+    return { ...EMPTY_STORE };
+  }
+}
+
+async function writeStore(store: KBStore): Promise<void> {
+  if (shouldUseBlob()) {
+    if (!hasBlobConfig()) {
+      throw new Error('Vercel Blob is not configured. Add BLOB_READ_WRITE_TOKEN in Vercel.');
+    }
+
+    const { put } = await import('@vercel/blob');
+    await put(BLOB_STORE_PATH, JSON.stringify(store), {
+      access: 'private',
+      addRandomSuffix: false,
+      allowOverwrite: true,
+      cacheControlMaxAge: 60,
+      contentType: 'application/json',
+    });
+    return;
+  }
+
+  await ensureDataDir();
+  // Atomic write: write to a temp file, then rename over the target.
+  await fs.writeFile(TMP_PATH, JSON.stringify(store), 'utf8');
+  await fs.rename(TMP_PATH, STORE_PATH);
+}
+
+// --- Public projections (strip embeddings/chunks before sending to client) --
+
+export function toPublicFile(rec: KBFileRecord): KBFile {
+  return {
+    id: rec.id,
+    name: rec.name,
+    type: rec.type,
+    size: rec.size,
+    status: rec.status,
+    uploadedAt: rec.uploadedAt,
+  };
+}
+
+export function toPublicQA(rec: QARecord): KBPair {
+  return {
+    id: rec.id,
+    question: rec.question,
+    answer: rec.answer,
+    category: rec.category,
+    prioritize: rec.prioritize,
+  };
+}
+
+// --- File record mutations -------------------------------------------------
+
+export function addFileRecord(rec: KBFileRecord): Promise<void> {
+  return withLock(async () => {
+    const store = await readStore();
+    store.files.push(rec);
+    await writeStore(store);
+  });
+}
+
+export function updateFileRecord(
+  id: string,
+  patch: Partial<KBFileRecord>
+): Promise<KBFileRecord | null> {
+  return withLock(async () => {
+    const store = await readStore();
+    const idx = store.files.findIndex((f) => f.id === id);
+    if (idx === -1) return null;
+    store.files[idx] = { ...store.files[idx], ...patch };
+    await writeStore(store);
+    return store.files[idx];
+  });
+}
+
+export function deleteFileRecord(id: string): Promise<boolean> {
+  return withLock(async () => {
+    const store = await readStore();
+    const before = store.files.length;
+    store.files = store.files.filter((f) => f.id !== id);
+    if (store.files.length === before) return false;
+    await writeStore(store);
+    return true;
+  });
+}
+
+// --- Q&A mutations ---------------------------------------------------------
+
+export function addQA(rec: QARecord): Promise<void> {
+  return withLock(async () => {
+    const store = await readStore();
+    store.qa.push(rec);
+    await writeStore(store);
+  });
+}
+
+export function updateQA(
+  id: string,
+  patch: Partial<QARecord>
+): Promise<QARecord | null> {
+  return withLock(async () => {
+    const store = await readStore();
+    const idx = store.qa.findIndex((q) => q.id === id);
+    if (idx === -1) return null;
+    store.qa[idx] = { ...store.qa[idx], ...patch };
+    await writeStore(store);
+    return store.qa[idx];
+  });
+}
+
+export function deleteQA(id: string): Promise<boolean> {
+  return withLock(async () => {
+    const store = await readStore();
+    const before = store.qa.length;
+    store.qa = store.qa.filter((q) => q.id !== id);
+    if (store.qa.length === before) return false;
+    await writeStore(store);
+    return true;
+  });
+}
+
+// --- Retrieval -------------------------------------------------------------
+
+/** Flatten every Ready file's chunks plus every Q&A pair into uniform candidates. */
+export async function getAllChunksWithMeta(): Promise<RetrievalCandidate[]> {
+  const store = await readStore();
+  const candidates: RetrievalCandidate[] = [];
+
+  for (const file of store.files) {
+    if (file.status !== 'Ready') continue;
+    for (const chunk of file.chunks) {
+      candidates.push({
+        kind: 'file',
+        sourceName: file.name,
+        sourceType: file.type,
+        text: chunk.text,
+        embedding: chunk.embedding,
+        prioritize: false,
+      });
+    }
+  }
+
+  for (const qa of store.qa) {
+    candidates.push({
+      kind: 'qa',
+      sourceName: `Custom Q&A: ${qa.category}`,
+      sourceType: 'Q&A',
+      text: `Q: ${qa.question}\nA: ${qa.answer}`,
+      embedding: qa.embedding,
+      prioritize: qa.prioritize,
+    });
+  }
+
+  return candidates;
+}

lib/parsers.ts

@@ -0,0 +1,66 @@
+import pdf from 'pdf-parse';
+import mammoth from 'mammoth';
+import * as XLSX from 'xlsx';
+import { CHUNK_WORDS, CHUNK_OVERLAP_WORDS } from './cohere-config';
+import type { FileType } from './file-meta';
+
+export { ACCEPTED_EXTENSIONS, formatSize, getFileType } from './file-meta';
+
+// Document parsing (server-side only; these libraries require the Node runtime).
+
+async function extractPdf(buffer: Buffer): Promise<string> {
+  const data = await pdf(buffer);
+  return data.text;
+}
+
+async function extractDocx(buffer: Buffer): Promise<string> {
+  const { value } = await mammoth.extractRawText({ buffer });
+  return value;
+}
+
+function extractSpreadsheet(buffer: Buffer): string {
+  const wb = XLSX.read(buffer, { type: 'buffer' });
+  const blocks: string[] = [];
+  for (const sheetName of wb.SheetNames) {
+    const sheet = wb.Sheets[sheetName];
+    const csv = XLSX.utils.sheet_to_csv(sheet);
+    if (csv.trim()) {
+      blocks.push(`Sheet: ${sheetName}\n${csv}`);
+    }
+  }
+  return blocks.join('\n\n');
+}
+
+/** Extract plain text from an uploaded file buffer based on its type. */
+export async function extractText(
+  buffer: Buffer,
+  type: FileType
+): Promise<string> {
+  switch (type) {
+    case 'PDF':
+      return extractPdf(buffer);
+    case 'DOCX':
+      return extractDocx(buffer);
+    case 'EXCEL':
+    case 'CSV':
+      return extractSpreadsheet(buffer);
+    default:
+      return '';
+  }
+}
+
+/** Split text into ~CHUNK_WORDS-word windows with CHUNK_OVERLAP_WORDS overlap. */
+export function chunkText(text: string): string[] {
+  const words = text.split(/\s+/).filter(Boolean);
+  if (words.length === 0) return [];
+
+  const chunks: string[] = [];
+  const step = Math.max(1, CHUNK_WORDS - CHUNK_OVERLAP_WORDS);
+  for (let i = 0; i < words.length; i += step) {
+    const slice = words.slice(i, i + CHUNK_WORDS);
+    const chunk = slice.join(' ').trim();
+    if (chunk) chunks.push(chunk);
+    if (i + CHUNK_WORDS >= words.length) break;
+  }
+  return chunks;
+}

lib/pdf-parse.d.ts

@@ -0,0 +1,19 @@
+declare module 'pdf-parse' {
+  interface PDFData {
+    /** Number of pages */
+    numpages: number;
+    /** Number of rendered pages */
+    numrender: number;
+    /** PDF info */
+    info: Record<string, unknown>;
+    /** PDF metadata */
+    metadata: unknown;
+    /** PDF.js version */
+    version: string;
+    /** All text content concatenated */
+    text: string;
+  }
+
+  function pdfParse(dataBuffer: Buffer, options?: Record<string, unknown>): Promise<PDFData>;
+  export = pdfParse;
+}

lib/use-chat-session.ts

@@ -0,0 +1,84 @@
+'use client';
+
+import * as React from 'react';
+import { ChatMessage } from '@/lib/kb-data';
+
+/**
+ * Shared chat session logic (messages + RAG request handling).
+ *
+ * Extracted so the same conversation engine drives both the dedicated
+ * `/chat` page and the inline chat on the homepage (`/`).
+ */
+export function useChatSession() {
+  const [messages, setMessages] = React.useState<ChatMessage[]>([]);
+  const [isTyping, setIsTyping] = React.useState(false);
+
+  // Monotonic counter guarantees unique keys even within the same millisecond.
+  const idCounter = React.useRef(0);
+  const makeId = React.useCallback(
+    (role: 'user' | 'ai') => `m-${Date.now()}-${idCounter.current++}-${role}`,
+    []
+  );
+
+  const sendMessage = React.useCallback(
+    async (textToSend: string) => {
+      if (!textToSend.trim()) return;
+
+      const userMsg: ChatMessage = {
+        id: makeId('user'),
+        sender: 'user',
+        text: textToSend,
+        timestamp: new Date().toLocaleTimeString(),
+      };
+
+      setMessages((prev) => [...prev, userMsg]);
+      setIsTyping(true);
+
+      // Query the RAG pipeline: retrieve + rerank + grounded answer with citations.
+      try {
+        const res = await fetch('/api/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ query: textToSend }),
+        });
+
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}));
+          throw new Error(err.error || `Request failed (${res.status})`);
+        }
+
+        const data: { text: string; sources?: Array<{ name: string; type: string }> } =
+          await res.json();
+
+        const aiMsg: ChatMessage = {
+          id: makeId('ai'),
+          sender: 'ai',
+          text: data.text,
+          timestamp: new Date().toLocaleTimeString(),
+          sources: data.sources,
+        };
+
+        setMessages((prev) => [...prev, aiMsg]);
+      } catch {
+        const aiMsg: ChatMessage = {
+          id: makeId('ai'),
+          sender: 'ai',
+          text:
+            "Sorry — I ran into a problem reaching the knowledge base. Please make sure your Cohere API key is configured and try again.",
+          timestamp: new Date().toLocaleTimeString(),
+        };
+        setMessages((prev) => [...prev, aiMsg]);
+      } finally {
+        setIsTyping(false);
+      }
+    },
+    [makeId]
+  );
+
+  const reset = React.useCallback(() => {
+    setMessages([]);
+    setIsTyping(false);
+  }, []);
+
+  return { messages, isTyping, sendMessage, reset };
+}

next.config.ts

@@ -0,0 +1,32 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  // Emit a self-contained server bundle (.next/standalone) so the Docker
+  // image used by the Hugging Face Space stays small and runs with `node server.js`.
+  output: 'standalone',
+  // Pin the workspace root to this project. A stray lockfile higher up the
+  // drive (E:\pnpm-lock.yaml) otherwise makes Next infer E:\ as the root and
+  // nest the standalone output under a query-bot/ subdir, breaking the image.
+  outputFileTracingRoot: __dirname,
+  turbopack: {
+    root: __dirname,
+  },
+  transpilePackages: ['motion'],
+  // Keep these Node-only parsers/SDK out of the server bundle so their
+  // dynamic requires (pdf.js worker, native bits) resolve at runtime.
+  serverExternalPackages: ['pdf-parse', 'mammoth', 'xlsx', 'cohere-ai'],
+  // Allow the brand file-type icons served from icons8 to flow through
+  // the next/image optimizer. The query string carries the icon id, so
+  // `search` is omitted to permit it.
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'img.icons8.com',
+        pathname: '/**',
+      },
+    ],
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "query-bot",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@vercel/blob": "^2.4.0",
+    "cohere-ai": "^8.0.0",
+    "gsap": "^3.15.0",
+    "mammoth": "^1.12.0",
+    "motion": "^12.40.0",
+    "next": "16.2.6",
+    "pdf-parse": "1.1.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}