@retrivora-ai/rag-engine 1.2.2 → 1.2.4

package/dist/server.js

@@ -3346,11 +3346,30 @@ 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'.
+- CRITICAL: Use ONLY valid JSON (double quotes, no trailing commas).
+\`\`\`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 +3904,25 @@ 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'.
+- CRITICAL: Use ONLY valid JSON (double quotes, no trailing commas).
+\`\`\`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 +3937,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-X4TMJV23.mjs";
 import "./chunk-YLTMFW4M.mjs";
 import {
   PineconeProvider

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "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/ChatWindow.tsx

@@ -422,7 +422,8 @@ export function ChatWindow({
             <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 ${
+              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'

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

@@ -7,6 +7,7 @@ import remarkGfm from 'remark-gfm';
 import { MessageBubbleProps, Product } from '../types';
 import { SourceCard } from './SourceCard';
 import { ProductCarousel } from './ProductCarousel';
+import { DynamicChart, ChartConfig } from './DynamicChart';
 
 export function MessageBubble({
   message,
@@ -155,7 +156,59 @@ 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) {
+                      const rawContent = String(children).trim();
+                      try {
+                        // Attempt to parse the JSON
+                        const config = JSON.parse(rawContent) 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 (err) {
+                        console.error('[MessageBubble] Chart parsing failed:', err, '\nRaw content:', rawContent);
+                        return (
+                          <div className="p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm border border-red-100 dark:border-red-900/30">
+                            <p className="font-medium mb-1">Failed to render chart</p>
+                            <p className="opacity-70 text-xs">The generated configuration is invalid. Check console for details.</p>
+                          </div>
+                        );
+                      }
+                    }
+                    return (
+                      <code className={className} {...props}>
+                        {children}
+                      </code>
+                    );
+                  }
+                }}
+              >
                 {cleanContent || message.content}
               </ReactMarkdown>
 

package/src/core/LangChainAgent.ts

@@ -47,12 +47,31 @@ export class LangChainAgent {
       // 2. Create the ReAct agent (langchain v1.x API)
       //    - `model` replaces the old `llm` parameter
       //    - `createAgent` replaces `createOpenAIFunctionsAgent` + `AgentExecutor`
+      const defaultAgentPrompt = 'You are a helpful AI assistant with access to a document search tool.';
+      let finalSystemPrompt = this.config.llm.systemPrompt || defaultAgentPrompt;
+
+      const chartInstruction = `\n\nWhen 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'.
+- CRITICAL: Use ONLY valid JSON (double quotes, no trailing commas).
+\`\`\`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 as any,
         tools: [searchTool],
-        systemPrompt: this.config.llm.systemPrompt ||
-          'You are a helpful AI assistant with access to a document search tool.',
+        systemPrompt: finalSystemPrompt,
       });
 
       // Suppress unused import warning — HumanMessage is used in run()

package/src/core/Pipeline.ts

@@ -99,6 +99,24 @@ export class Pipeline {
   async initialize(): Promise<void> {
     if (this.initialised) return;
 
+    // Augment system prompt with Chart/Table instructions if not already present
+    const chartInstruction = `\n\nWhen 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'.
+- CRITICAL: Use ONLY valid JSON (double quotes, no trailing commas).
+\`\`\`chart
+{
+  "type": "bar" | "line" | "pie",
+  "xAxisKey": "name",
+  "dataKeys": ["value"],
+  "data": [{"name": "A", "value": 10}]
+}
+\`\`\``;
+
+    if (!this.config.llm.systemPrompt?.includes('chart')) {
+      this.config.llm.systemPrompt = (this.config.llm.systemPrompt || '') + chartInstruction;
+    }
+
     console.log(`[Pipeline] Initializing with provider: ${this.config.vectorDb.provider}...`);
     // Resolve vector DB provider
     this.vectorDB = await ProviderRegistry.createVectorProvider(this.config.vectorDb);