@retrivora-ai/rag-engine 1.2.1 → 1.2.3

package/dist/server.d.mts

@@ -1,7 +1,8 @@
-import { i as VectorDBConfig, L as LLMConfig, c as EmbeddingConfig, g as RagConfig, e as IngestDocument, C as ChatMessage, b as ChatResponse, k as RetrievalResult, h as UpsertDocument, V as VectorMatch, G as GraphDBConfig, l as GraphNode, m as Edge, n as GraphSearchResult, I as ILLMProvider, j as VectorDBProvider, f as LLMProvider, d as EmbeddingProvider, R as RAGConfig, U as UIConfig, a as ChatOptions, E as EmbedOptions } from './RagConfig-BOLOz0_O.mjs';
-export { C as Chunk, a as ChunkOptions, D as DocumentChunker } from './DocumentChunker-Dh9TvmGG.mjs';
-import { H as HealthCheckResult, I as IProviderValidator, a as IProviderHealthChecker } from './index-64BDupW3.mjs';
-export { C as ConfigValidator, V as ValidationError, b as VectorPlugin, c as createChatHandler, d as createHealthHandler, e as createIngestHandler, f as createStreamHandler, g as createUploadHandler, s as sseErrorFrame, h as sseFrame, i as sseMetaFrame, j as sseTextFrame } from './index-64BDupW3.mjs';
+import { j as VectorDBConfig, L as LLMConfig, E as EmbeddingConfig, h as RagConfig, I as IngestDocument, C as ChatMessage, d as ChatResponse, l as RetrievalResult, i as UpsertDocument, V as VectorMatch, G as GraphDBConfig, m as GraphNode, n as Edge, o as GraphSearchResult, k as VectorDBProvider, f as LLMProvider, e as EmbeddingProvider, g as RAGConfig, U as UIConfig, c as ChatOptions } from './index-Cti1u0y1.mjs';
+import { I as ILLMProvider, E as EmbedOptions } from './DocumentChunker-D1dg5iCi.mjs';
+export { C as Chunk, a as ChunkOptions, D as DocumentChunker } from './DocumentChunker-D1dg5iCi.mjs';
+import { H as HealthCheckResult, I as IProviderValidator, a as IProviderHealthChecker } from './index-kUXnRvuI.mjs';
+export { C as ConfigValidator, V as ValidationError, b as VectorPlugin, c as createChatHandler, d as createHealthHandler, e as createIngestHandler, f as createStreamHandler, g as createUploadHandler, s as sseErrorFrame, h as sseFrame, i as sseMetaFrame, j as sseTextFrame } from './index-kUXnRvuI.mjs';
 import 'next/server';
 
 /**

package/dist/server.d.ts

@@ -1,7 +1,8 @@
-import { i as VectorDBConfig, L as LLMConfig, c as EmbeddingConfig, g as RagConfig, e as IngestDocument, C as ChatMessage, b as ChatResponse, k as RetrievalResult, h as UpsertDocument, V as VectorMatch, G as GraphDBConfig, l as GraphNode, m as Edge, n as GraphSearchResult, I as ILLMProvider, j as VectorDBProvider, f as LLMProvider, d as EmbeddingProvider, R as RAGConfig, U as UIConfig, a as ChatOptions, E as EmbedOptions } from './RagConfig-BOLOz0_O.js';
-export { C as Chunk, a as ChunkOptions, D as DocumentChunker } from './DocumentChunker-Dh9TvmGG.js';
-import { H as HealthCheckResult, I as IProviderValidator, a as IProviderHealthChecker } from './index-DbtE8wLM.js';
-export { C as ConfigValidator, V as ValidationError, b as VectorPlugin, c as createChatHandler, d as createHealthHandler, e as createIngestHandler, f as createStreamHandler, g as createUploadHandler, s as sseErrorFrame, h as sseFrame, i as sseMetaFrame, j as sseTextFrame } from './index-DbtE8wLM.js';
+import { j as VectorDBConfig, L as LLMConfig, E as EmbeddingConfig, h as RagConfig, I as IngestDocument, C as ChatMessage, d as ChatResponse, l as RetrievalResult, i as UpsertDocument, V as VectorMatch, G as GraphDBConfig, m as GraphNode, n as Edge, o as GraphSearchResult, k as VectorDBProvider, f as LLMProvider, e as EmbeddingProvider, g as RAGConfig, U as UIConfig, c as ChatOptions } from './index-Cti1u0y1.js';
+import { I as ILLMProvider, E as EmbedOptions } from './DocumentChunker-BXOUMKoP.js';
+export { C as Chunk, a as ChunkOptions, D as DocumentChunker } from './DocumentChunker-BXOUMKoP.js';
+import { H as HealthCheckResult, I as IProviderValidator, a as IProviderHealthChecker } from './index-B67KQ9NN.js';
+export { C as ConfigValidator, V as ValidationError, b as VectorPlugin, c as createChatHandler, d as createHealthHandler, e as createIngestHandler, f as createStreamHandler, g as createUploadHandler, s as sseErrorFrame, h as sseFrame, i as sseMetaFrame, j as sseTextFrame } from './index-B67KQ9NN.js';
 import 'next/server';
 
 /**

package/dist/server.js

@@ -3346,11 +3346,29 @@ Sources Used: ${JSON.stringify(
           )}`;
         }
       });
+      const defaultAgentPrompt = "You are a helpful AI assistant with access to a document search tool.";
+      let finalSystemPrompt = this.config.llm.systemPrompt || defaultAgentPrompt;
+      const chartInstruction = `
+
+When presenting structured data, statistics, or comparisons, decide if it is best presented as a table or a chart.
+- For tables: use standard Markdown tables.
+- For charts (bar, line, pie): Output a JSON code block with language 'chart' matching this schema:
+\`\`\`chart
+{
+  "type": "bar" | "line" | "pie",
+  "xAxisKey": "name",
+  "dataKeys": ["value"],
+  "data": [{"name": "A", "value": 10}]
+}
+\`\`\``;
+      if (!finalSystemPrompt.includes("chart")) {
+        finalSystemPrompt += chartInstruction;
+      }
       this.agent = createAgent({
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         model: chatModel,
         tools: [searchTool],
-        systemPrompt: this.config.llm.systemPrompt || "You are a helpful AI assistant with access to a document search tool."
+        systemPrompt: finalSystemPrompt
       });
       void HumanMessage;
     } catch (error) {
@@ -3885,8 +3903,24 @@ var Pipeline = class {
     this.reranker = new Reranker();
   }
   async initialize() {
-    var _a;
+    var _a, _b;
     if (this.initialised) return;
+    const chartInstruction = `
+
+When presenting structured data, statistics, or comparisons, decide if it is best presented as a table or a chart.
+- For tables: use standard Markdown tables.
+- For charts (bar, line, pie): Output a JSON code block with language 'chart' matching this schema:
+\`\`\`chart
+{
+  "type": "bar" | "line" | "pie",
+  "xAxisKey": "name",
+  "dataKeys": ["value"],
+  "data": [{"name": "A", "value": 10}]
+}
+\`\`\``;
+    if (!((_a = this.config.llm.systemPrompt) == null ? void 0 : _a.includes("chart"))) {
+      this.config.llm.systemPrompt = (this.config.llm.systemPrompt || "") + chartInstruction;
+    }
     console.log(`[Pipeline] Initializing with provider: ${this.config.vectorDb.provider}...`);
     this.vectorDB = await ProviderRegistry.createVectorProvider(this.config.vectorDb);
     const { llmProvider, embeddingProvider } = await EmbeddingStrategyResolver.resolve(
@@ -3901,7 +3935,7 @@ var Pipeline = class {
       this.entityExtractor = new EntityExtractor(this.llmProvider);
     }
     await this.vectorDB.initialize();
-    if (((_a = this.config.rag) == null ? void 0 : _a.architecture) === "agentic") {
+    if (((_b = this.config.rag) == null ? void 0 : _b.architecture) === "agentic") {
       this.agent = new LangChainAgent(this, this.config);
       await this.agent.initialize(this.llmProvider);
     }

package/dist/server.mjs

@@ -39,7 +39,7 @@ import {
   sseFrame,
   sseMetaFrame,
   sseTextFrame
-} from "./chunk-GCPPRD2G.mjs";
+} from "./chunk-WGPNEAK3.mjs";
 import "./chunk-YLTMFW4M.mjs";
 import {
   PineconeProvider

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "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",
@@ -95,6 +95,7 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-markdown": "^10.1.0",
+    "recharts": "^3.8.1",
     "remark-gfm": "^4.0.1"
   },
   "optionalDependencies": {

package/src/components/ChatWidget.tsx

@@ -4,14 +4,7 @@ import React, { useState } from 'react';
 import { MessageSquare, X } from 'lucide-react';
 import { ChatWindow } from './ChatWindow';
 import { useConfig } from './ConfigProvider';
-import { Product } from '../types';
-
-interface ChatWidgetProps {
-  /** Position of the floating button. Defaults to bottom-right. */
-  position?: 'bottom-right' | 'bottom-left';
-  /** Called when the user clicks 'Add to Cart' on a product */
-  onAddToCart?: (product: Product) => void;
-}
+import { ChatWidgetProps } from '../types';
 
 const DEFAULT_DIMENSIONS = { width: 380, height: 600 };
 

package/src/components/ChatWindow.tsx

@@ -11,34 +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 { Product } 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: Product) => void;
+import { ChatWindowProps } from '../types';
+
+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({ 
@@ -62,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);
@@ -77,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) {
@@ -91,16 +167,15 @@ 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';
 
-  const [suggestions, setSuggestions] = useState<string[]>([]);
-  const [isSuggesting, setIsSuggesting] = useState(false);
-
   // Auto-suggestions fetcher (debounced)
   useEffect(() => {
     if (input.trim().length < 3) {
@@ -276,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}
@@ -343,6 +418,22 @@ export function ChatWindow({
             style={{ scrollbarWidth: 'none' }}
           />
 
+          {ui.enableVoiceInput !== false && (
+            <button
+              type="button"
+              onClick={toggleListening}
+              disabled={isLoading}
+              className={`flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100 ${
+                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/DynamicChart.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import React from 'react';
+import {
+  BarChart, Bar, LineChart, Line, PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
+} from 'recharts';
+
+export interface ChartConfig {
+  type: 'bar' | 'line' | 'pie';
+  data: Array<Record<string, string | number>>;
+  xAxisKey?: string;
+  dataKeys?: string[];
+  colors?: string[];
+}
+
+interface DynamicChartProps {
+  config: ChartConfig;
+  primaryColor?: string;
+  accentColor?: string;
+}
+
+const DEFAULT_COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];
+
+export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '#8b5cf6' }: DynamicChartProps) {
+  const { type, data, xAxisKey = 'name', dataKeys = [] } = config;
+  const colors = config.colors || [primaryColor, accentColor, ...DEFAULT_COLORS];
+
+  if (!data || data.length === 0) {
+    return <div className="p-4 text-sm text-slate-500">No data available for chart.</div>;
+  }
+
+  // Handle Pie Chart separately as it has a different structure
+  if (type === 'pie') {
+    const pieDataKey = dataKeys[0] || Object.keys(data[0]).find(k => k !== xAxisKey) || 'value';
+    
+    return (
+      <div className="w-full h-64 mt-4 mb-2 select-none">
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Pie
+              data={data}
+              dataKey={pieDataKey}
+              nameKey={xAxisKey}
+              cx="50%"
+              cy="50%"
+              outerRadius={80}
+              label={({ name, percent }) => `${name} ${((percent ?? 0) * 100).toFixed(0)}%`}
+            >
+              {data.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
+              ))}
+            </Pie>
+            <Tooltip 
+              contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
+            />
+            <Legend />
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+    );
+  }
+
+  // Bar and Line charts
+  return (
+    <div className="w-full h-64 mt-4 mb-2 select-none">
+      <ResponsiveContainer width="100%" height="100%">
+        {type === 'bar' ? (
+          <BarChart data={data} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+            <XAxis dataKey={xAxisKey} tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={{ stroke: '#cbd5e1' }} />
+            <YAxis tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={false} />
+            <Tooltip 
+              contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
+              cursor={{ fill: '#f1f5f9' }}
+            />
+            <Legend wrapperStyle={{ fontSize: 12 }} />
+            {dataKeys.map((key, index) => (
+              <Bar 
+                key={key} 
+                dataKey={key} 
+                fill={colors[index % colors.length]} 
+                radius={[4, 4, 0, 0]}
+                barSize={Math.max(20, 60 / data.length)}
+              />
+            ))}
+          </BarChart>
+        ) : (
+          <LineChart data={data} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+            <XAxis dataKey={xAxisKey} tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={{ stroke: '#cbd5e1' }} />
+            <YAxis tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={false} />
+            <Tooltip 
+              contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
+            />
+            <Legend wrapperStyle={{ fontSize: 12 }} />
+            {dataKeys.map((key, index) => (
+              <Line 
+                key={key} 
+                type="monotone" 
+                dataKey={key} 
+                stroke={colors[index % colors.length]} 
+                strokeWidth={3}
+                dot={{ r: 4, strokeWidth: 2 }}
+                activeDot={{ r: 6 }}
+              />
+            ))}
+          </LineChart>
+        )}
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/components/MessageBubble.tsx

@@ -4,20 +4,10 @@ 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 '../types';
-
-interface MessageBubbleProps {
-  message: ChatMessage;
-  sources?: VectorMatch[];
-  isStreaming?: boolean;
-  primaryColor?: string;
-  accentColor?: string;
-  onAddToCart?: (product: Product) => void;
-}
+import { DynamicChart, ChartConfig } from './DynamicChart';
 
 export function MessageBubble({
   message,
@@ -166,7 +156,55 @@ export function MessageBubble({
             </span>
           ) : (
             <div className={`prose prose-sm max-w-none ${isUser ? 'prose-invert' : 'dark:prose-invert'}`}>
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              <ReactMarkdown 
+                remarkPlugins={[remarkGfm]}
+                components={{
+                  table: ({...props}) => (
+                    <div className="overflow-x-auto my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm">
+                      <table className="w-full text-left border-collapse min-w-[400px]" {...props} />
+                    </div>
+                  ),
+                  thead: ({...props}) => (
+                    <thead className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" {...props} />
+                  ),
+                  th: ({...props}) => (
+                    <th className="p-3 font-semibold text-slate-700 dark:text-white/90 first:rounded-tl-xl last:rounded-tr-xl" {...props} />
+                  ),
+                  td: ({...props}) => (
+                    <td className="p-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70" {...props} />
+                  ),
+                  code({ inline, className, children, ...props }: React.HTMLAttributes<HTMLElement> & { inline?: boolean }) {
+                    const match = /language-(\w+)/.exec(className || '');
+                    const isChart = match && match[1] === 'chart';
+                    
+                    if (!inline && isChart) {
+                      try {
+                        const config = JSON.parse(String(children).replace(/\n$/, '')) as ChartConfig;
+                        return (
+                          <div className="my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm">
+                            <DynamicChart 
+                              config={config} 
+                              primaryColor={primaryColor} 
+                              accentColor={accentColor} 
+                            />
+                          </div>
+                        );
+                      } catch {
+                        return (
+                          <div className="p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm">
+                            Failed to render chart: Invalid configuration.
+                          </div>
+                        );
+                      }
+                    }
+                    return (
+                      <code className={className} {...props}>
+                        {children}
+                      </code>
+                    );
+                  }
+                }}
+              >
                 {cleanContent || message.content}
               </ReactMarkdown>
 

package/src/components/ProductCard.tsx

@@ -4,13 +4,7 @@ import React from 'react';
 import Image from 'next/image';
 import { ShoppingCart, ExternalLink } from 'lucide-react';
 
-import { Product } from '../types';
-
-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

@@ -3,13 +3,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { ProductCard } from './ProductCard';
-import { Product } from '../types';
-
-interface ProductCarouselProps {
-  products: Product[];
-  primaryColor?: string;
-  onAddToCart?: (product: Product) => void;
-}
+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);