@retrivora-ai/rag-engine 1.2.0 → 1.2.2

package/src/components/ChatWindow.tsx

@@ -11,33 +11,43 @@ import {
   RotateCcw,
   Maximize2,
   Minimize2,
+  Mic,
+  MicOff,
 } from 'lucide-react';
 import { MessageBubble } from './MessageBubble';
 import { useConfig } from './ConfigProvider';
 import { useRagChat } from '../hooks/useRagChat';
 import { BORDER_RADIUS_MAP, CHAT_SUGGESTIONS } from '../config/uiConstants';
+import { ChatWindowProps } from '../types';
 
-interface ChatWindowProps {
-  /** Additional className for the wrapper div */
-  className?: string;
-  /** Inline styles for the wrapper div */
-  style?: React.CSSProperties;
-  /** Called when the close button is clicked (for widget mode) */
-  onClose?: () => void;
-  /** Whether to show a close (X) button in the header */
-  showClose?: boolean;
-  /** Called when the user starts dragging the resize handle */
-  onResizeStart?: (e: React.MouseEvent) => void;
-  /** Called when the user clicks the reset size button */
-  onResetResize?: () => void;
-  /** Whether the window has been resized from its default */
-  isResized?: boolean;
-  /** Called when the user clicks the maximize/minimize button */
-  onMaximize?: () => void;
-  /** Whether the window is currently maximized */
-  isMaximized?: boolean;
-  /** Called when the user clicks 'Add to Cart' on a product */
-  onAddToCart?: (product: any) => void;
+interface SpeechRecognitionEvent {
+  resultIndex: number;
+  results: {
+    length: number;
+    [index: number]: {
+      isFinal: boolean;
+      [index: number]: { transcript: string };
+    };
+  };
+}
+
+interface SpeechRecognitionErrorEvent {
+  error: string;
+}
+
+interface ISpeechRecognition {
+  continuous: boolean;
+  interimResults: boolean;
+  onresult: ((event: SpeechRecognitionEvent) => void) | null;
+  onerror: ((event: SpeechRecognitionErrorEvent) => void) | null;
+  onend: (() => void) | null;
+  start: () => void;
+  stop: () => void;
+}
+
+interface WindowWithSpeech extends Window {
+  SpeechRecognition?: new () => ISpeechRecognition;
+  webkitSpeechRecognition?: new () => ISpeechRecognition;
 }
 
 export function ChatWindow({ 
@@ -61,6 +71,66 @@ export function ChatWindow({
     namespace: projectId,
   });
 
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [isSuggesting, setIsSuggesting] = useState(false);
+
+  const [isListening, setIsListening] = useState(false);
+  const recognitionRef = useRef<ISpeechRecognition | null>(null);
+
+  // Initialize SpeechRecognition
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const win = window as unknown as WindowWithSpeech;
+      const SpeechRecognition = win.SpeechRecognition || win.webkitSpeechRecognition;
+      if (SpeechRecognition) {
+        const recognition = new SpeechRecognition();
+        recognition.continuous = true;
+        recognition.interimResults = true;
+
+        recognition.onresult = (event: SpeechRecognitionEvent) => {
+          let finalTranscript = '';
+          for (let i = event.resultIndex; i < event.results.length; ++i) {
+            if (event.results[i].isFinal) {
+              finalTranscript += event.results[i][0].transcript;
+            }
+          }
+          if (finalTranscript) {
+            setInput((prev) => (prev ? prev + ' ' : '') + finalTranscript.trim());
+          }
+        };
+
+        recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
+          console.error('Speech recognition error:', event.error);
+          setIsListening(false);
+        };
+
+        recognition.onend = () => {
+          setIsListening(false);
+        };
+
+        recognitionRef.current = recognition;
+      }
+    }
+  }, []);
+
+  const toggleListening = () => {
+    if (!recognitionRef.current) {
+      alert('Speech recognition is not supported in your browser.');
+      return;
+    }
+    
+    if (isListening) {
+      recognitionRef.current.stop();
+    } else {
+      try {
+        recognitionRef.current.start();
+        setIsListening(true);
+      } catch (err) {
+        console.error('Failed to start recognition:', err);
+      }
+    }
+  };
+
   useEffect(() => {
     // eslint-disable-next-line react-hooks/set-state-in-effect
     setMounted(true);
@@ -76,10 +146,17 @@ export function ChatWindow({
   const sendMessage = useCallback(async () => {
     const text = input.trim();
     if (!text || isLoading) return;
+    
+    if (isListening) {
+      recognitionRef.current?.stop();
+    }
+
     setInput('');
+    setSuggestions([]);
+    setIsSuggesting(false);
     await send(text);
     window.setTimeout(() => inputRef.current?.focus(), 50);
-  }, [input, isLoading, send]);
+  }, [input, isLoading, send, isListening]);
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -90,13 +167,43 @@ export function ChatWindow({
 
   const clearHistory = () => {
     clear();
+    setSuggestions([]);
+    setIsSuggesting(false);
   };
 
   const isEmpty = messages.length === 0;
 
-    const currentRadius = BORDER_RADIUS_MAP[ui.borderRadius || 'xl'];
+  const currentRadius = BORDER_RADIUS_MAP[ui.borderRadius || 'xl'];
   const isGlass = ui.visualStyle !== 'solid';
 
+  // Auto-suggestions fetcher (debounced)
+  useEffect(() => {
+    if (input.trim().length < 3) {
+      return;
+    }
+
+    const timer = setTimeout(async () => {
+      setIsSuggesting(true);
+      try {
+        const response = await fetch('/api/suggestions', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ query: input, namespace: projectId }),
+        });
+        const data = await response.json();
+        if (data.suggestions) {
+          setSuggestions(data.suggestions);
+        }
+      } catch (err) {
+        console.error('Failed to fetch suggestions:', err);
+      } finally {
+        setIsSuggesting(false);
+      }
+    }, 800); // 800ms debounce to save costs/latency
+
+    return () => clearTimeout(timer);
+  }, [input, projectId]);
+
   return (
     <div
       className={`relative flex flex-col border border-slate-200 dark:border-white/10 shadow-2xl transition-all duration-300 ${currentRadius} ${
@@ -244,7 +351,7 @@ export function ChatWindow({
         {/* Typing indicator (only if assistant hasn't started replying yet) */}
         {isLoading && messages[messages.length - 1]?.role !== 'assistant' && (
           <MessageBubble
-            message={{ role: 'assistant', content: '' }}
+            message={{ id: 'loading', role: 'assistant', content: '', createdAt: new Date().toISOString() }}
             isStreaming
             primaryColor={ui.primaryColor}
             accentColor={ui.accentColor}
@@ -265,11 +372,44 @@ export function ChatWindow({
 
       {/* ── Input ── */}
       <div className={`px-4 pb-4 pt-2 border-t border-slate-200 dark:border-white/10 ${isGlass ? 'bg-transparent' : 'bg-white dark:bg-[#0f0f1a]'}`}>
+        
+        {/* Dynamic Suggestions */}
+        {(suggestions.length > 0 || isSuggesting) && !isLoading && (
+          <div className="mb-3 flex flex-wrap gap-2 animate-in fade-in slide-in-from-bottom-2 duration-300">
+            {suggestions.map((suggestion) => (
+              <button
+                key={suggestion}
+                onClick={() => {
+                  setInput(suggestion);
+                  setSuggestions([]);
+                  inputRef.current?.focus();
+                }}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/90 hover:border-slate-300 dark:hover:border-white/20 transition-all shadow-sm cursor-pointer group"
+              >
+                <Sparkles className="w-3 h-3 text-amber-400" />
+                {suggestion}
+              </button>
+            ))}
+            {isSuggesting && suggestions.length === 0 && (
+              <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium text-slate-400 dark:text-white/30 animate-pulse">
+                <Sparkles className="w-3 h-3" />
+                Thinking...
+              </div>
+            )}
+          </div>
+        )}
+
         <div className={`flex items-end gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-2 focus-within:border-slate-300 dark:focus-within:border-white/20 transition-all ${ui.borderRadius === 'full' ? 'rounded-3xl' : 'rounded-2xl'}`}>
           <textarea
             ref={inputRef}
             value={input}
-            onChange={(e) => setInput(e.target.value)}
+            onChange={(e) => {
+              const val = e.target.value;
+              setInput(val);
+              if (val.trim().length < 3) {
+                setSuggestions([]);
+              }
+            }}
             onKeyDown={handleKeyDown}
             placeholder={ui.placeholder}
             rows={1}
@@ -278,6 +418,21 @@ export function ChatWindow({
             style={{ scrollbarWidth: 'none' }}
           />
 
+          {ui.enableVoiceInput !== false && (
+            <button
+              type="button"
+              onClick={toggleListening}
+              className={`flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 ${
+                isListening
+                  ? 'bg-rose-500 text-white animate-pulse shadow-md shadow-rose-500/20'
+                  : 'text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10'
+              }`}
+              title={isListening ? 'Stop listening' : 'Start voice input'}
+            >
+              {isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
+            </button>
+          )}
+
           <button
             onClick={sendMessage}
             disabled={!input.trim() || isLoading}

package/src/components/ConfigProvider.tsx

@@ -7,47 +7,21 @@
  * Only the UI-safe portions of RagConfig are exposed to the client.
  */
 
-import React, { createContext, useContext, ReactNode } from 'react';
+import React, { createContext, useContext } from 'react';
 import { UIConfig } from '../config/RagConfig';
 import { mergeDefined } from '../utils/templateUtils';
+import { ClientConfig, ConfigProviderProps } from '../types';
+import { DEFAULT_CONFIG } from '../config/uiConstants';
 
-export interface ClientConfig {
-  projectId: string;
-  ui: Required<UIConfig>;
-}
-
-const defaultConfig: ClientConfig = {
-  projectId: 'default',
-  ui: {
-    title: 'AI Assistant',
-    subtitle: 'Powered by RAG',
-    primaryColor: '#6366f1',
-    accentColor: '#8b5cf6',
-    logoUrl: '',
-    placeholder: 'Ask me anything…',
-    showSources: true,
-    welcomeMessage: "Hello! I'm your AI assistant. Ask me anything about your documents.",
-    showWidget: true,
-    poweredBy: 'RAG',
-    visualStyle: 'glass',
-    borderRadius: 'xl',
-    allowUpload: true,
-    allowResize: true,
-  },
-};
-
-const ConfigContext = createContext<ClientConfig>(defaultConfig);
+const ConfigContext = createContext<ClientConfig>(DEFAULT_CONFIG);
 
 export function ConfigProvider({
   config,
   children,
-}: {
-  config?: { projectId?: string; ui?: Partial<UIConfig> };
-  children: ReactNode;
-}) {
+}: ConfigProviderProps) {
   const merged: ClientConfig = {
-    projectId: config?.projectId || defaultConfig.projectId,
-    ui: mergeDefined(defaultConfig.ui, config?.ui) as Required<UIConfig>,
+    projectId: config?.projectId || DEFAULT_CONFIG.projectId,
+    ui: mergeDefined(DEFAULT_CONFIG.ui, config?.ui) as Required<UIConfig>,
   };
 
   return <ConfigContext.Provider value={merged}>{children}</ConfigContext.Provider>;

package/src/components/DocumentUpload.tsx

@@ -4,14 +4,7 @@ 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;
-}
+import { DocumentUploadProps } from '../types';
 
 interface FileState {
   file: File;

package/src/components/MessageBubble.tsx

@@ -4,20 +4,9 @@ import React from 'react';
 import { Bot, User, ChevronDown, ChevronRight } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { ChatMessage } from '../llm/ILLMProvider';
-import { VectorMatch } from '../types';
+import { MessageBubbleProps, Product } from '../types';
 import { SourceCard } from './SourceCard';
 import { ProductCarousel } from './ProductCarousel';
-import { Product } from './ProductCard';
-
-interface MessageBubbleProps {
-  message: ChatMessage;
-  sources?: VectorMatch[];
-  isStreaming?: boolean;
-  primaryColor?: string;
-  accentColor?: string;
-  onAddToCart?: (product: Product) => void;
-}
 
 export function MessageBubble({
   message,

package/src/components/ProductCard.tsx

@@ -4,21 +4,7 @@ import React from 'react';
 import Image from 'next/image';
 import { ShoppingCart, ExternalLink } from 'lucide-react';
 
-export interface Product {
-  id: string | number;
-  name: string;
-  brand?: string;
-  price?: string | number;
-  image?: string;
-  link?: string;
-  description?: string;
-}
-
-interface ProductCardProps {
-  product: Product;
-  primaryColor?: string;
-  onAddToCart?: (product: Product) => void;
-}
+import { ProductCardProps } from '../types';
 
 export function ProductCard({ product, primaryColor = '#6366f1', onAddToCart }: ProductCardProps) {
   return (

package/src/components/ProductCarousel.tsx

@@ -2,13 +2,8 @@
 
 import React, { useRef, useState, useEffect } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { Product, ProductCard } from './ProductCard';
-
-interface ProductCarouselProps {
-  products: Product[];
-  primaryColor?: string;
-  onAddToCart?: (product: Product) => void;
-}
+import { ProductCard } from './ProductCard';
+import { ProductCarouselProps } from '../types';
 
 export function ProductCarousel({ products, primaryColor = '#6366f1', onAddToCart }: ProductCarouselProps) {
   const scrollRef = useRef<HTMLDivElement>(null);

package/src/components/SourceCard.tsx

@@ -2,12 +2,7 @@
 
 import React from 'react';
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { VectorMatch } from '../types';
-
-interface SourceCardProps {
-  source: VectorMatch;
-  index: number;
-}
+import { SourceCardProps } from '../types';
 
 export function SourceCard({ source, index }: SourceCardProps) {
   const [expanded, setExpanded] = React.useState(false);

package/src/config/RagConfig.ts

@@ -149,6 +149,8 @@ export interface UIConfig {
   allowUpload?: boolean;
   /** Whether to allow manual resizing of the chat window. Defaults to true. */
   allowResize?: boolean;
+  /** Whether to enable voice search input. Defaults to true. */
+  enableVoiceInput?: boolean;
 }
 
 // ---------------------------------------------------------------------------

package/src/config/uiConstants.ts

@@ -5,6 +5,29 @@
  * is consumed via npm without Next.js path-alias configuration.
  */
 
+import { ClientConfig } from '../types';
+
+export const DEFAULT_CONFIG: ClientConfig = {
+  projectId: 'default',
+  ui: {
+    title: 'AI Assistant',
+    subtitle: 'Powered by RAG',
+    primaryColor: '#6366f1',
+    accentColor: '#8b5cf6',
+    logoUrl: '',
+    placeholder: 'Ask me anything…',
+    showSources: true,
+    welcomeMessage: "Hello! I'm your AI assistant. Ask me anything about your documents.",
+    showWidget: true,
+    poweredBy: 'RAG',
+    visualStyle: 'glass',
+    borderRadius: 'xl',
+    allowUpload: true,
+    allowResize: true,
+    enableVoiceInput: true,
+  },
+};
+
 /** Maps the `borderRadius` config value to a Tailwind class. */
 export const BORDER_RADIUS_MAP: Record<string, string> = {
   none: 'rounded-none',

package/src/core/Pipeline.ts

@@ -1,6 +1,7 @@
 import { BaseVectorProvider } from '../providers/vectordb/BaseVectorProvider';
 import { BaseGraphProvider } from '../providers/graphdb/BaseGraphProvider';
-import { ILLMProvider, ChatMessage } from '../llm/ILLMProvider';
+import { ILLMProvider } from '../llm/ILLMProvider';
+import { ChatMessage } from '../types';
 import { DocumentChunker, Chunk } from '../rag/DocumentChunker';
 import { EntityExtractor } from '../rag/EntityExtractor';
 import { Reranker } from '../rag/Reranker';
@@ -423,4 +424,59 @@ Optimized Search Query:`;
 
     return rewrite.trim() || question;
   }
+
+  /**
+   * Generate 3-5 short, relevant questions based on the vector database content.
+   */
+  async getSuggestions(query: string, namespace?: string): Promise<string[]> {
+    if (!query || query.trim().length < 3) {
+      return [];
+    }
+
+    await this.initialize();
+    const ns = namespace ?? this.config.projectId;
+
+    try {
+      // 1. Retrieve relevant context (top 3 matches)
+      const { sources } = await this.retrieve(query, { namespace: ns, topK: 3 });
+
+      if (sources.length === 0) {
+        return [];
+      }
+
+      // 2. Generate suggestions using LLM
+      const context = sources.map((s) => s.content).join('\n\n---\n\n');
+      const prompt = `
+Based on the following snippets from a document, what are 3 short, relevant questions a user might ask? 
+Focus on questions that can be answered by the context.
+Keep each question under 10 words and make them very specific to the content.
+Return ONLY a JSON array of strings like ["Question 1", "Question 2", "Question 3"].
+
+Context:
+${context}
+
+Suggestions:`;
+
+      const response = await this.llmProvider.chat(
+        [
+          { role: 'system', content: 'You are a helpful assistant that generates search suggestions.' },
+          { role: 'user', content: prompt }
+        ],
+        ''
+      );
+
+      // Simple parsing of JSON array from LLM response
+      const match = response.match(/\[[\s\S]*\]/);
+      if (match) {
+        const suggestions = JSON.parse(match[0]);
+        if (Array.isArray(suggestions)) {
+          return suggestions.map(s => String(s)).slice(0, 3);
+        }
+      }
+    } catch (error) {
+      console.error('[Pipeline] Failed to generate suggestions:', error);
+    }
+
+    return [];
+  }
 }

package/src/core/VectorPlugin.ts

@@ -4,7 +4,7 @@ import { ConfigValidator } from './ConfigValidator';
 import { Pipeline } from './Pipeline';
 import { ProviderHealthCheck, HealthCheckResult } from './ProviderHealthCheck';
 import { IngestDocument, ChatResponse } from '../types';
-import { ChatMessage } from '../llm/ILLMProvider';
+import { ChatMessage } from '../types';
 
 /**
  * VectorPlugin — main orchestrator class.
@@ -81,4 +81,11 @@ export class VectorPlugin {
     return this.pipeline.ingest(documents, namespace);
   }
 
+  /**
+   * Get auto-suggestions based on a query prefix.
+   */
+  async getSuggestions(query: string, namespace?: string): Promise<string[]> {
+    await this.validationPromise;
+    return this.pipeline.getSuggestions(query, namespace);
+  }
 }

package/src/handlers/index.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { VectorPlugin } from '../core/VectorPlugin';
 import { RagConfig } from '../config/RagConfig';
-import { ChatMessage } from '../llm/ILLMProvider';
+import { ChatMessage } from '../types';
 import { DocumentParser } from '../utils/DocumentParser';
 
 // ─── SSE helpers ──────────────────────────────────────────────────────────────
@@ -261,5 +261,35 @@ export function createUploadHandler(configOrPlugin?: Partial<RagConfig> | Vector
   };
 }
 
+/**
+ * createSuggestionsHandler — factory for the auto-suggestions endpoint.
+ */
+export function createSuggestionsHandler(configOrPlugin?: Partial<RagConfig> | VectorPlugin) {
+  const plugin =
+    configOrPlugin instanceof VectorPlugin
+      ? configOrPlugin
+      : new VectorPlugin(configOrPlugin);
+
+  return async function POST(req: NextRequest) {
+    try {
+      const body = await req.json();
+      const { query, namespace } = body as {
+        query: string;
+        namespace?: string;
+      };
+
+      if (typeof query !== 'string') {
+        return NextResponse.json({ error: 'query is required' }, { status: 400 });
+      }
+
+      const suggestions = await plugin.getSuggestions(query, namespace);
+      return NextResponse.json({ suggestions });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Internal server error';
+      return NextResponse.json({ error: message }, { status: 500 });
+    }
+  };
+}
+
 // Re-export SSE helper so host apps can use it in custom handlers
 export { sseFrame, sseTextFrame, sseMetaFrame, sseErrorFrame };

package/src/hooks/useRagChat.ts

@@ -19,53 +19,9 @@
  */
 
 import { useState, useCallback, useRef, useEffect } from 'react';
-import { VectorMatch } from '../types';
+import { VectorMatch, RagMessage, UseRagChatOptions, UseRagChatReturn } from '../types';
 import { useStoredMessages } from './useStoredMessages';
 
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-export type MessageRole = 'user' | 'assistant';
-
-export interface RagMessage {
-  id: string;
-  role: MessageRole;
-  content: string;
-  /** Retrieved source chunks (assistant messages only) */
-  sources?: VectorMatch[];
-  /** ISO timestamp */
-  createdAt: string;
-}
-
-export interface UseRagChatOptions {
-  /** Override the chat API endpoint (default: /api/chat) */
-  apiUrl?: string;
-  /** Override project namespace */
-  namespace?: string;
-  /** Persist chat history to localStorage (default: true) */
-  persist?: boolean;
-  /** Called after each successful assistant reply */
-  onReply?: (message: RagMessage) => void;
-  /** Called on error */
-  onError?: (error: string) => void;
-}
-
-export interface UseRagChatReturn {
-  /** All messages in the current conversation */
-  messages: RagMessage[];
-  /** Whether a response is in flight */
-  isLoading: boolean;
-  /** Current error message, or null */
-  error: string | null;
-  /** Send a user message */
-  send: (text: string) => Promise<void>;
-  /** Clear the conversation (and localStorage if persist=true) */
-  clear: () => void;
-  /** Retry the last failed send */
-  retry: () => Promise<void>;
-  /** Programmatically set the conversation (e.g. to restore from a DB) */
-  setMessages: React.Dispatch<React.SetStateAction<RagMessage[]>>;
-}
-
 // ─── SSE Frame Parser ──────────────────────────────────────────────────────────
 
 interface SseTextFrame  { type: 'text';     text: string }

package/src/hooks/useStoredMessages.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 export interface StoredMessage {
   id: string;
-  role: 'user' | 'assistant';
+  role: 'user' | 'assistant' | 'system';
   content: string;
   createdAt?: string;
   sources?: unknown;