@retrivora-ai/rag-engine 0.4.3 → 0.4.5

package/dist/server.js

@@ -457,7 +457,7 @@ var init_MongoDBProvider = __esm({
         return results.map((res) => ({
           id: res._id,
           content: res[this.contentKey],
-          metadata: res[this.metadataKey],
+          metadata: res[this.metadataKey] || {},
           score: res.score
         }));
       }
@@ -1205,6 +1205,81 @@ var init_UniversalVectorProvider = __esm({
   }
 });
 
+// src/providers/graphdb/BaseGraphProvider.ts
+var BaseGraphProvider;
+var init_BaseGraphProvider = __esm({
+  "src/providers/graphdb/BaseGraphProvider.ts"() {
+    "use strict";
+    BaseGraphProvider = class {
+      constructor(config) {
+        this.config = config;
+      }
+    };
+  }
+});
+
+// src/providers/graphdb/SimpleGraphProvider.ts
+var SimpleGraphProvider_exports = {};
+__export(SimpleGraphProvider_exports, {
+  SimpleGraphProvider: () => SimpleGraphProvider
+});
+var SimpleGraphProvider;
+var init_SimpleGraphProvider = __esm({
+  "src/providers/graphdb/SimpleGraphProvider.ts"() {
+    "use strict";
+    init_BaseGraphProvider();
+    SimpleGraphProvider = class extends BaseGraphProvider {
+      constructor() {
+        super(...arguments);
+        this.nodes = /* @__PURE__ */ new Map();
+        this.edges = [];
+      }
+      async initialize() {
+        console.log("[SimpleGraphProvider] Initialised in-memory graph store.");
+      }
+      async addNodes(nodes) {
+        for (const node of nodes) {
+          this.nodes.set(node.id, node);
+        }
+      }
+      async addEdges(edges) {
+        this.edges.push(...edges);
+      }
+      async query(queryText, limit = 5) {
+        const q = queryText.toLowerCase();
+        const matchedNodes = Array.from(this.nodes.values()).filter(
+          (node) => node.id.toLowerCase().includes(q) || node.label.toLowerCase().includes(q) || JSON.stringify(node.properties).toLowerCase().includes(q)
+        ).slice(0, limit);
+        const matchedNodeIds = new Set(matchedNodes.map((n) => n.id));
+        const matchedEdges = this.edges.filter(
+          (edge) => matchedNodeIds.has(edge.source) || matchedNodeIds.has(edge.target)
+        );
+        for (const edge of matchedEdges) {
+          if (!matchedNodeIds.has(edge.source)) {
+            const source = this.nodes.get(edge.source);
+            if (source) matchedNodes.push(source);
+          }
+          if (!matchedNodeIds.has(edge.target)) {
+            const target = this.nodes.get(edge.target);
+            if (target) matchedNodes.push(target);
+          }
+        }
+        return {
+          nodes: Array.from(new Set(matchedNodes)),
+          edges: matchedEdges
+        };
+      }
+      async ping() {
+        return true;
+      }
+      async disconnect() {
+        this.nodes.clear();
+        this.edges = [];
+      }
+    };
+  }
+});
+
 // src/server.ts
 var server_exports = {};
 __export(server_exports, {
@@ -1317,7 +1392,7 @@ function readEnum(env, name, fallback, allowed) {
   throw new Error(`[getRagConfig] ${name} must be one of: ${allowed.join(", ")}`);
 }
 function getRagConfig(env = process.env) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q;
   const projectId = (_b = (_a = readString(env, "RAG_PROJECT_ID")) != null ? _a : readString(env, "NEXT_PUBLIC_PROJECT_ID")) != null ? _b : "__default__";
   const vectorProvider = readEnum(env, "VECTOR_DB_PROVIDER", "pinecone", VECTOR_DB_PROVIDERS);
   const llmProvider = readEnum(env, "LLM_PROVIDER", "openai", LLM_PROVIDERS);
@@ -1414,7 +1489,8 @@ function getRagConfig(env = process.env) {
       showSources: ((_I = (_H = readString(env, "NEXT_PUBLIC_SHOW_SOURCES")) != null ? _H : readString(env, "UI_SHOW_SOURCES")) != null ? _I : "true") !== "false",
       welcomeMessage: (_K = (_J = readString(env, "NEXT_PUBLIC_WELCOME_MESSAGE")) != null ? _J : readString(env, "UI_WELCOME_MESSAGE")) != null ? _K : "Hello! I'm your AI assistant. Ask me anything about your documents.",
       visualStyle: (_M = (_L = readString(env, "NEXT_PUBLIC_UI_VISUAL_STYLE")) != null ? _L : readString(env, "UI_VISUAL_STYLE")) != null ? _M : "glass",
-      borderRadius: (_O = (_N = readString(env, "NEXT_PUBLIC_UI_BORDER_RADIUS")) != null ? _N : readString(env, "UI_BORDER_RADIUS")) != null ? _O : "xl"
+      borderRadius: (_O = (_N = readString(env, "NEXT_PUBLIC_UI_BORDER_RADIUS")) != null ? _N : readString(env, "UI_BORDER_RADIUS")) != null ? _O : "xl",
+      allowUpload: ((_Q = (_P = readString(env, "NEXT_PUBLIC_ALLOW_UPLOAD")) != null ? _P : readString(env, "UI_ALLOW_UPLOAD")) != null ? _Q : "false") === "true"
     },
     rag: {
       topK: readNumber(env, "RAG_TOP_K", 5),
@@ -1988,52 +2064,84 @@ var ConfigValidator = class {
 
 // src/rag/DocumentChunker.ts
 var DocumentChunker = class {
-  constructor(chunkSize = 1e3, chunkOverlap = 200) {
+  constructor(chunkSize = 1e3, chunkOverlap = 200, separators = ["\n\n", "\n", " ", ""]) {
     this.chunkSize = chunkSize;
     this.chunkOverlap = chunkOverlap;
+    this.separators = separators;
   }
   /**
-   * Split a single text string into overlapping chunks.
+   * Split a single text string into overlapping chunks using a recursive strategy.
    */
   chunk(text, options = {}) {
     const {
       chunkSize = this.chunkSize,
       chunkOverlap = this.chunkOverlap,
       docId = `doc_${Date.now()}`,
-      metadata = {}
+      metadata = {},
+      separators = this.separators
     } = options;
-    const cleaned = text.replace(/\r\n/g, "\n").trim();
-    if (!cleaned) return [];
-    const sentences = cleaned.split(new RegExp("(?<=[.!?])\\s+|\\n{2,}")).map((s) => s.trim()).filter(Boolean);
-    const chunks = [];
-    let current = "";
+    const finalChunks = [];
+    const splits = this.recursiveSplit(text, separators, chunkSize);
+    let currentChunk = [];
+    let currentLength = 0;
     let chunkIndex = 0;
-    for (const sentence of sentences) {
-      if ((current + " " + sentence).trim().length <= chunkSize) {
-        current = current ? `${current} ${sentence}` : sentence;
-      } else {
-        if (current) {
-          chunks.push({
-            id: `${docId}_chunk_${chunkIndex++}`,
-            content: current.trim(),
-            metadata: __spreadProps(__spreadValues({}, metadata), { docId, chunkIndex: chunkIndex - 1 })
-          });
-        }
-        if (chunkOverlap > 0 && current.length > chunkOverlap) {
-          current = current.slice(-chunkOverlap) + " " + sentence;
-        } else {
-          current = sentence;
+    for (const split of splits) {
+      if (currentLength + split.length > chunkSize && currentChunk.length > 0) {
+        finalChunks.push({
+          id: `${docId}_chunk_${chunkIndex++}`,
+          content: currentChunk.join("").trim(),
+          metadata: __spreadProps(__spreadValues({}, metadata), { docId, chunkIndex: chunkIndex - 1 })
+        });
+        const overlapItems = [];
+        let overlapLen = 0;
+        for (let i = currentChunk.length - 1; i >= 0; i--) {
+          if (overlapLen + currentChunk[i].length <= chunkOverlap) {
+            overlapItems.unshift(currentChunk[i]);
+            overlapLen += currentChunk[i].length;
+          } else {
+            break;
+          }
         }
+        currentChunk = overlapItems;
+        currentLength = overlapLen;
       }
+      currentChunk.push(split);
+      currentLength += split.length;
     }
-    if (current.trim()) {
-      chunks.push({
+    if (currentChunk.length > 0) {
+      finalChunks.push({
         id: `${docId}_chunk_${chunkIndex}`,
-        content: current.trim(),
+        content: currentChunk.join("").trim(),
         metadata: __spreadProps(__spreadValues({}, metadata), { docId, chunkIndex })
       });
     }
-    return chunks;
+    return finalChunks;
+  }
+  /**
+   * Recursively split text based on separators.
+   */
+  recursiveSplit(text, separators, chunkSize) {
+    const finalSplits = [];
+    let separator = separators[separators.length - 1];
+    let nextSeparators = [];
+    for (let i = 0; i < separators.length; i++) {
+      if (text.includes(separators[i])) {
+        separator = separators[i];
+        nextSeparators = separators.slice(i + 1);
+        break;
+      }
+    }
+    const parts = text.split(separator);
+    for (const part of parts) {
+      if (part.length <= chunkSize) {
+        finalSplits.push(part + separator);
+      } else if (nextSeparators.length > 0) {
+        finalSplits.push(...this.recursiveSplit(part, nextSeparators, chunkSize));
+      } else {
+        finalSplits.push(part);
+      }
+    }
+    return finalSplits;
   }
   /**
    * Chunk multiple documents at once.
@@ -2045,6 +2153,39 @@ var DocumentChunker = class {
   }
 };
 
+// src/rag/EntityExtractor.ts
+var EntityExtractor = class {
+  constructor(llm) {
+    this.llm = llm;
+  }
+  /**
+   * Extract nodes and edges from a text chunk.
+   */
+  async extract(text) {
+    const prompt = `
+Extract entities and relationships from the following text.
+Format the output as JSON with two keys: "nodes" (array of {id, label, properties}) and "edges" (array of {source, target, type, properties}).
+Use the same ID for the same entity.
+
+Text:
+"${text}"
+
+Output JSON:
+`;
+    const response = await this.llm.chat([
+      { role: "system", content: "You are an expert at knowledge graph extraction. Respond only with valid JSON." },
+      { role: "user", content: prompt }
+    ], "");
+    try {
+      const cleanJson = response.replace(/```json\n?|\n?```/g, "").trim();
+      return JSON.parse(cleanJson);
+    } catch (e) {
+      console.warn("[EntityExtractor] Failed to parse LLM response as JSON:", response);
+      return { nodes: [], edges: [] };
+    }
+  }
+};
+
 // src/llm/providers/OpenAIProvider.ts
 var import_openai = __toESM(require("openai"));
 var OpenAIProvider = class {
@@ -2589,16 +2730,15 @@ var LLMFactory = class _LLMFactory {
 
 // src/core/ProviderRegistry.ts
 var ProviderRegistry = class {
-  /**
-   * Register a custom vector provider class by name.
-   * The name must match the provider value used in VectorDBConfig.provider.
-   *
-   * @example
-   * ProviderRegistry.registerVectorProvider('my-db', MyCustomProvider);
-   */
   static registerVectorProvider(name, providerClass) {
     this.vectorProviders[name] = providerClass;
   }
+  /**
+   * Register a custom graph provider class by name.
+   */
+  static registerGraphProvider(name, providerClass) {
+    this.graphProviders[name] = providerClass;
+  }
   /**
    * Creates a vector database provider based on the configuration.
    * Built-in providers are dynamically imported to avoid bundling all SDKs.
@@ -2653,6 +2793,28 @@ var ProviderRegistry = class {
         );
     }
   }
+  /**
+   * Creates a graph database provider based on the configuration.
+   */
+  static async createGraphProvider(config) {
+    const { provider } = config;
+    if (this.graphProviders[provider]) {
+      return new this.graphProviders[provider](config);
+    }
+    switch (provider) {
+      case "neo4j": {
+        throw new Error("[ProviderRegistry] Neo4j provider not implemented yet.");
+      }
+      case "simple": {
+        const { SimpleGraphProvider: SimpleGraphProvider2 } = await Promise.resolve().then(() => (init_SimpleGraphProvider(), SimpleGraphProvider_exports));
+        return new SimpleGraphProvider2(config);
+      }
+      default:
+        throw new Error(
+          `[ProviderRegistry] Unsupported graph provider: "${provider}". Built-in providers: simple. For custom providers, call ProviderRegistry.registerGraphProvider("${provider}", YourClass).`
+        );
+    }
+  }
   /**
    * Creates an LLM provider based on the configuration.
    */
@@ -2661,6 +2823,7 @@ var ProviderRegistry = class {
   }
 };
 ProviderRegistry.vectorProviders = {};
+ProviderRegistry.graphProviders = {};
 
 // src/core/BatchProcessor.ts
 function isTransientError(error) {
@@ -3092,6 +3255,11 @@ var Pipeline = class {
     );
     this.llmProvider = llmProvider;
     this.embeddingProvider = embeddingProvider;
+    if (this.config.graphDb) {
+      this.graphDB = await ProviderRegistry.createGraphProvider(this.config.graphDb);
+      await this.graphDB.initialize();
+      this.entityExtractor = new EntityExtractor(this.llmProvider);
+    }
     await this.vectorDB.initialize();
     this.initialised = true;
   }
@@ -3145,6 +3313,30 @@ var Pipeline = class {
           docId: doc.docId,
           chunksIngested: upsertResult.totalProcessed
         });
+        if (this.graphDB && this.entityExtractor) {
+          console.log(`[Pipeline] Extracting entities for doc ${doc.docId} (${chunks.length} chunks)...`);
+          const extractionOptions = {
+            batchSize: 2,
+            // Low concurrency for LLM extraction
+            maxRetries: 1,
+            initialDelayMs: 500
+          };
+          await BatchProcessor.processBatch(
+            chunks,
+            async (batch) => {
+              for (const chunk of batch) {
+                try {
+                  const { nodes, edges } = await this.entityExtractor.extract(chunk.content);
+                  if (nodes.length > 0) await this.graphDB.addNodes(nodes);
+                  if (edges.length > 0) await this.graphDB.addEdges(edges);
+                } catch (err) {
+                  console.warn(`[Pipeline] Entity extraction failed for chunk:`, err);
+                }
+              }
+            },
+            extractionOptions
+          );
+        }
       } catch (error) {
         console.error(`[Pipeline] Failed to ingest document ${doc.docId}:`, error);
         results.push({ docId: doc.docId, chunksIngested: 0 });
@@ -3153,27 +3345,65 @@ var Pipeline = class {
     return results;
   }
   async ask(question, history = [], namespace) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     await this.initialize();
     const ns = namespace != null ? namespace : this.config.projectId;
     const topK = (_b = (_a = this.config.rag) == null ? void 0 : _a.topK) != null ? _b : 5;
     const scoreThreshold = (_d = (_c = this.config.rag) == null ? void 0 : _c.scoreThreshold) != null ? _d : 0;
     try {
-      const queryVector = await this.embeddingProvider.embed(question, { taskType: "query" });
+      let searchQuery = question;
+      if ((_e = this.config.rag) == null ? void 0 : _e.useQueryTransformation) {
+        searchQuery = await this.rewriteQuery(question, history);
+      }
+      const queryVector = await this.embeddingProvider.embed(searchQuery, { taskType: "query" });
       const fieldHints = extractQueryFieldHints(question);
       const filter = buildQueryFilter(question, fieldHints);
       filter.__entityHints = fieldHints;
       const rawMatches = await this.vectorDB.query(queryVector, topK, ns, filter);
       const sources = rawMatches.filter((m) => m.score >= scoreThreshold);
-      const context = sources.length ? sources.map((m, i) => `[Source ${i + 1}]
+      let graphData;
+      if (this.graphDB && ((_f = this.config.rag) == null ? void 0 : _f.useGraphRetrieval)) {
+        graphData = await this.graphDB.query(searchQuery);
+      }
+      let context = sources.length ? sources.map((m, i) => `[Source ${i + 1}]
 ${m.content}`).join("\n\n---\n\n") : "No relevant context found.";
+      if (graphData && graphData.nodes.length > 0) {
+        const graphContext = graphData.nodes.map(
+          (n) => `Entity: ${n.label} (${n.id})${n.properties ? " - " + JSON.stringify(n.properties) : ""}`
+        ).join("\n");
+        context = `GRAPH KNOWLEDGE:
+${graphContext}
+
+VECTOR CONTEXT:
+${context}`;
+      }
       const messages = [...history, { role: "user", content: question }];
       const reply = await this.llmProvider.chat(messages, context);
-      return { reply, sources };
+      return { reply, sources, graphData };
     } catch (error) {
       throw new Error(`[Pipeline] Chat failed: ${error instanceof Error ? error.message : String(error)}`);
     }
   }
+  /**
+   * Rewrite the user query for better retrieval performance.
+   */
+  async rewriteQuery(question, history) {
+    const prompt = `
+Given the following conversation history and a new question, rewrite the question to be a better search query for a vector database. 
+Focus on extracting the core intent and entities. Do not answer the question, just rewrite it.
+
+History:
+${history.map((m) => `${m.role}: ${m.content}`).join("\n")}
+
+New Question: ${question}
+
+Optimized Search Query:`;
+    const rewrite = await this.llmProvider.chat([
+      { role: "system", content: "You are an assistant that optimizes search queries for RAG systems." },
+      { role: "user", content: prompt }
+    ], "");
+    return rewrite.trim() || question;
+  }
 };
 
 // src/core/ProviderHealthCheck.ts
@@ -3974,7 +4204,7 @@ var DocumentParser = class {
     }
     if (extension === "pdf" || mimeType === "application/pdf") {
       try {
-        const pdf = await import("pdf-parse/lib/pdf-parse.js");
+        const pdf = await import("pdf-parse");
         const buffer = Buffer.isBuffer(file) ? file : Buffer.from(await file.arrayBuffer());
         const data = await pdf.default(buffer);
         return data.text;

package/dist/server.mjs

@@ -34,7 +34,7 @@ import {
   createIngestHandler,
   createUploadHandler,
   getRagConfig
-} from "./chunk-UUZ3F4WK.mjs";
+} from "./chunk-PRC5CZIZ.mjs";
 import "./chunk-EDLTMSNY.mjs";
 import {
   PineconeProvider
@@ -44,7 +44,7 @@ import {
 } from "./chunk-LJWWPTWE.mjs";
 import {
   MongoDBProvider
-} from "./chunk-IWHCAQEA.mjs";
+} from "./chunk-PQKTC73Y.mjs";
 import {
   MilvusProvider
 } from "./chunk-3QWAK3RZ.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Retrivora AI is a plug-and-play AI engine for RAG chat experiences — generic vector DB + LLM provider, embeddable or standalone.",
   "author": "Abhinav Alkuchi",
   "license": "MIT",

package/src/components/ConfigProvider.tsx

@@ -31,6 +31,7 @@ const defaultConfig: ClientConfig = {
     poweredBy: 'RAG',
     visualStyle: 'glass',
     borderRadius: 'xl',
+    allowUpload: true,
   },
 };
 

package/src/components/DocumentUpload.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import { Upload, File, X, CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
+import { useConfig } from './ConfigProvider';
+
+interface DocumentUploadProps {
+  /** Optional namespace for the upload */
+  namespace?: string;
+  /** Callback when upload completes */
+  onUploadComplete?: (results: unknown) => void;
+  /** Additional className */
+  className?: string;
+}
+
+interface FileState {
+  file: File;
+  status: 'idle' | 'uploading' | 'success' | 'error';
+  error?: string;
+}
+
+export function DocumentUpload({ namespace, onUploadComplete, className = '' }: DocumentUploadProps) {
+  const { ui } = useConfig();
+  const [fileStates, setFileStates] = useState<FileState[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const addFiles = (files: File[]) => {
+    const newStates = files.map(file => ({ file, status: 'idle' as const }));
+    setFileStates(prev => [...prev, ...newStates]);
+  };
+
+  const removeFile = (index: number) => {
+    setFileStates(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const onDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const onDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  const onDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (e.dataTransfer.files) {
+      addFiles(Array.from(e.dataTransfer.files));
+    }
+  };
+
+  const onFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      addFiles(Array.from(e.target.files));
+    }
+  };
+
+  const uploadFiles = async () => {
+    const idleFiles = fileStates.filter(s => s.status === 'idle');
+    if (idleFiles.length === 0) return;
+
+    // Update status to uploading
+    setFileStates(prev => prev.map(s => s.status === 'idle' ? { ...s, status: 'uploading' } : s));
+
+    const formData = new FormData();
+    idleFiles.forEach(s => formData.append('files', s.file));
+    if (namespace) formData.append('namespace', namespace);
+
+    try {
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const result = await response.json();
+
+      if (!response.ok) throw new Error(result.error || 'Upload failed');
+
+      setFileStates(prev => prev.map(s => s.status === 'uploading' ? { ...s, status: 'success' } : s));
+      if (onUploadComplete) onUploadComplete(result);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Upload failed';
+      setFileStates(prev => prev.map(s => s.status === 'uploading' ? { ...s, status: 'error', error: message } : s));
+    }
+  };
+
+  const isUploading = fileStates.some(s => s.status === 'uploading');
+  const hasIdle = fileStates.some(s => s.status === 'idle');
+
+  return (
+    <div 
+      className={`p-6 border-2 border-dashed transition-all duration-300 rounded-2xl ${
+        isDragging 
+          ? 'border-emerald-500 bg-emerald-50/50 dark:bg-emerald-500/5' 
+          : 'border-slate-200 dark:border-white/10 bg-white dark:bg-white/5'
+      } ${className}`}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+    >
+      <div className="flex flex-col items-center justify-center text-center">
+        <div 
+          className="w-12 h-12 rounded-full flex items-center justify-center mb-4 shadow-sm"
+          style={{ background: `linear-gradient(135deg, ${ui.primaryColor}20, ${ui.accentColor}20)` }}
+        >
+          <Upload className="w-6 h-6" style={{ color: ui.primaryColor }} />
+        </div>
+        <h3 className="text-slate-900 dark:text-white font-semibold mb-1">Upload Documents</h3>
+        <p className="text-slate-500 dark:text-white/40 text-sm mb-6 max-w-xs">
+          Drag and drop PDF, DOCX, TXT, or JSON files to train your AI on your own data.
+        </p>
+
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          disabled={isUploading}
+          className="px-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
+          style={{ 
+            backgroundColor: `${ui.primaryColor}15`,
+            color: ui.primaryColor,
+            border: `1px solid ${ui.primaryColor}30`
+          }}
+        >
+          Select Files
+        </button>
+        <input 
+          ref={fileInputRef}
+          type="file" 
+          multiple 
+          onChange={onFileSelect} 
+          className="hidden" 
+          accept=".pdf,.docx,.txt,.md,.json,.csv"
+        />
+      </div>
+
+      {fileStates.length > 0 && (
+        <div className="mt-8 space-y-3">
+          {fileStates.map((state, i) => (
+            <div 
+              key={i}
+              className="flex items-center justify-between p-3 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10"
+            >
+              <div className="flex items-center gap-3 overflow-hidden">
+                <div className="w-8 h-8 rounded-lg bg-white dark:bg-white/10 flex items-center justify-center shadow-sm">
+                  <File className="w-4 h-4 text-slate-400" />
+                </div>
+                <div className="truncate">
+                  <p className="text-xs font-medium text-slate-700 dark:text-white/80 truncate">
+                    {state.file.name}
+                  </p>
+                  <p className="text-[10px] text-slate-400">
+                    {(state.file.size / 1024).toFixed(1)} KB
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2">
+                {state.status === 'uploading' && <Loader2 className="w-4 h-4 text-slate-400 animate-spin" />}
+                {state.status === 'success' && <CheckCircle className="w-4 h-4 text-emerald-500" />}
+                {state.status === 'error' && (
+                  <div title={state.error}>
+                    <AlertCircle className="w-4 h-4 text-rose-500" />
+                  </div>
+                )}
+                
+                {state.status !== 'uploading' && (
+                  <button 
+                    onClick={() => removeFile(i)}
+                    className="p-1 rounded-md hover:bg-slate-200 dark:hover:bg-white/10 transition-colors"
+                  >
+                    <X className="w-3.5 h-3.5 text-slate-400" />
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+
+          {hasIdle && !isUploading && (
+            <button
+              onClick={uploadFiles}
+              className="w-full mt-4 py-2.5 rounded-xl text-sm font-semibold text-white shadow-lg transition-all hover:scale-[1.02] active:scale-[0.98]"
+              style={{ background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }}
+            >
+              Start Upload
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}