@retrivora-ai/rag-engine 1.8.0 → 1.8.2

package/src/components/Documentation.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React from 'react';
+import { FileText, Zap, Package, ExternalLink } from 'lucide-react';
+import { DocViewer } from '@/components/DocViewer';
+import { LANDING_PAGE_CONTENT, QUICK_START_STEPS, API_ENDPOINTS, SNIPPETS } from '@/app/constants';
+import { Snippet } from '@/app/types';
+
+export function Documentation() {
+  const [activeSnippet, setActiveSnippet] = React.useState<Snippet>(SNIPPETS[0]);
+
+  return (
+    <div className="mt-32 max-w-6xl mx-auto mb-24 relative">
+      <div className="text-center mb-16">
+        <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">{LANDING_PAGE_CONTENT.guide.title}</h2>
+        <p className="text-slate-600 dark:text-white/40 max-w-2xl mx-auto">{LANDING_PAGE_CONTENT.guide.subtitle}</p>
+      </div>
+      <div className="relative z-10 w-full grid gap-16 lg:grid-cols-[280px_1fr] items-start">
+        <aside className="flex flex-col gap-10">
+          <section>
+            <h2 className="mb-6 text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.3em] flex items-center gap-3">
+              <FileText size={14} className="text-indigo-500" /> Quick Start
+            </h2>
+            <ol className="space-y-6">
+              {QUICK_START_STEPS.map((step, i) => (
+                <li key={i} className="group flex items-start gap-4">
+                  <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-white dark:bg-white/5 text-slate-600 dark:text-white/40 font-mono text-[10px] border border-slate-200 dark:border-white/10 shadow-sm">{i + 1}</span>
+                  <span className="text-xs text-slate-500 dark:text-white/50 font-medium leading-relaxed pt-1">{step}</span>
+                </li>
+              ))}
+            </ol>
+          </section>
+          <section className="rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/3 p-6 shadow-sm">
+            <h2 className="mb-6 text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.3em] flex items-center gap-3">
+              <Zap size={14} className="text-indigo-500" /> API Endpoints
+            </h2>
+            <div className="grid gap-2.5">
+              {API_ENDPOINTS.map((slug) => (
+                <div key={slug} className="group flex items-center justify-between p-2 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5 hover:border-indigo-200 dark:hover:border-indigo-500/30">
+                  <span className="text-[10px] font-mono text-slate-500 dark:text-white/30 group-hover:text-indigo-600">/api/{slug}</span>
+                  <span className="text-[8px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-500/10 px-1.5 py-0.5 rounded border border-indigo-100 dark:border-indigo-500/20">POST</span>
+                </div>
+              ))}
+            </div>
+          </section>
+        </aside>
+        <section className="flex flex-col h-full min-h-[560px]">
+          <DocViewer activeSnippet={activeSnippet} setActiveSnippet={setActiveSnippet} />
+        </section>
+      </div>
+      <div className="mt-16 text-center">
+        <a href="https://www.npmjs.com/package/@retrivora-ai/rag-engine" className="inline-flex items-center gap-3 px-8 py-4 rounded-2xl bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold shadow-xl shadow-indigo-500/20">
+          <Package className="w-5 h-5" /> Get Started on NPM <ExternalLink className="w-4 h-4" />
+        </a>
+      </div>
+    </div>
+  );
+}

package/src/components/DynamicChart.tsx

@@ -20,18 +20,22 @@ interface DynamicChartProps {
   primaryColor?: string;
   accentColor?: string;
   viewportSize?: ChatViewportSize;
+  /** When true, renders a shimmer skeleton instead of the chart. */
+  isStreaming?: boolean;
 }
 
-const DEFAULT_COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];
+/** Shared palette — imported by VisualizationRenderer to avoid duplication. */
+export const CHART_COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];
 
 export function DynamicChart({
   config,
   primaryColor = '#6366f1',
   accentColor = '#8b5cf6',
   viewportSize = 'large',
+  isStreaming = false,
 }: DynamicChartProps) {
   const { type, data } = config;
-  const colors = config.colors || [primaryColor, accentColor, ...DEFAULT_COLORS];
+  const colors = config.colors || [primaryColor, accentColor, ...CHART_COLORS];
   const containerRef = React.useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = React.useState(0);
 
@@ -111,6 +115,27 @@ export function DynamicChart({
     });
   }, [data]);
 
+  if (isStreaming) {
+    const bars = type === 'pie' ? 6 : 5;
+    return (
+      <div className="w-full mt-4 mb-2 animate-pulse">
+        {type === 'pie' ? (
+          <div className="mx-auto w-40 h-40 rounded-full bg-slate-100 dark:bg-white/10" />
+        ) : (
+          <div className="flex items-end gap-2 h-32 px-2">
+            {Array.from({ length: bars }).map((_, i) => (
+              <div
+                key={i}
+                className="flex-1 rounded-t-md bg-slate-100 dark:bg-white/10"
+                style={{ height: `${40 + (i % 3) * 25}%` }}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
   if (!data || data.length === 0) {
     return <div className="p-4 text-sm text-slate-500">No data available for chart.</div>;
   }

package/src/components/Hero.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import React from 'react';
+import { useConfig } from '@/components/ConfigProvider';
+import { ChatWindow } from '@/components/ChatWindow';
+import { LANDING_PAGE_CONTENT, VECTOR_DATABASES, AI_MODELS } from '@/app/constants';
+
+export function Hero() {
+  const { ui } = useConfig();
+
+  return (
+    <div className="grid lg:grid-cols-2 gap-12 items-start">
+      <div className="flex flex-col gap-6 pt-4">
+        <div
+          className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-medium border w-fit"
+          style={{ borderColor: `${ui.primaryColor}40`, color: ui.primaryColor, background: `${ui.primaryColor}10` }}
+        >
+          <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background: ui.primaryColor }} />
+          {LANDING_PAGE_CONTENT.hero.badge}
+        </div>
+        <h1 className="text-5xl md:text-7xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">
+          {LANDING_PAGE_CONTENT.hero.title.split('for')[0]} <br />
+          <span className="text-transparent bg-clip-text" style={{ backgroundImage: `linear-gradient(to right, ${ui.primaryColor}, ${ui.accentColor})` }}>
+            for {LANDING_PAGE_CONTENT.hero.title.split('for')[1]}
+          </span>
+        </h1>
+        <p className="text-lg md:text-xl text-slate-600 dark:text-white/40 max-w-2xl leading-relaxed">
+          {LANDING_PAGE_CONTENT.hero.subtitle}
+        </p>
+        <div className="flex flex-col gap-4 mt-4">
+          <div className="flex flex-col gap-2">
+            <span className="text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.2em] ml-1">Vector Ecosystem</span>
+            <div className="flex flex-wrap gap-2">
+              {VECTOR_DATABASES.map(({ Icon, label }) => (
+                <span key={label} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-white/8 transition-all shadow-sm group">
+                  <Icon className="w-3 h-3 transition-transform group-hover:scale-110" style={{ color: ui.primaryColor }} /> {label}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <span className="text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.2em] ml-1">AI Model Garden</span>
+            <div className="flex flex-wrap gap-2">
+              {AI_MODELS.map(({ Icon, label }) => (
+                <span key={label} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-white/8 transition-all shadow-sm group">
+                  <Icon className="w-3 h-3 transition-transform group-hover:scale-110" style={{ color: ui.accentColor }} /> {label}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="lg:sticky lg:top-6 h-[calc(100vh-3rem)] min-h-[500px] max-h-[800px]">
+        <ChatWindow className="w-full h-full" />
+      </div>
+    </div>
+  );
+}

package/src/components/HourglassLoader.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+interface HourglassLoaderProps {
+  size?: number;
+  primaryColor?: string;
+  accentColor?: string;
+  glow?: boolean;
+}
+
+const HourglassLoader: React.FC<HourglassLoaderProps> = ({
+  size = 16,
+  primaryColor = '#10b981',
+  glow = false,
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+      style={{
+        width: size,
+        height: size,
+        background: 'transparent',
+        filter: glow ? `drop-shadow(0 0 4px ${primaryColor})` : 'none',
+      }}
+    >
+      <g>
+        {/* Rotation Animation */}
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          calcMode="spline"
+          values="0 50 50; 0 50 50; 180 50 50"
+          keyTimes="0; 0.8; 1"
+          keySplines="0 0 1 1; 0.4 0 0.2 1"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+
+        {/* Glass Outline */}
+        <path
+          d="M 25 15 L 75 15 L 75 20 L 55 50 L 75 80 L 75 85 L 25 85 L 25 80 L 45 50 L 25 20 Z"
+          fill="none"
+          stroke={primaryColor}
+          strokeWidth="5"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+
+        {/* Top Sand */}
+        <path fill={primaryColor}>
+          <animate
+            attributeName="d"
+            values="M 30 20 L 70 20 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z"
+            keyTimes="0; 0.8; 1"
+            dur="2s"
+            repeatCount="indefinite"
+          />
+        </path>
+
+        {/* Bottom Sand */}
+        <path fill={primaryColor}>
+          <animate
+            attributeName="d"
+            values="M 30 80 L 70 80 L 70 80 L 30 80 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z"
+            keyTimes="0; 0.8; 1"
+            dur="2s"
+            repeatCount="indefinite"
+          />
+        </path>
+
+        {/* Falling Sand Stream */}
+        <line x1="50" y1="50" x2="50" y2="80" stroke={primaryColor} strokeWidth="3">
+          <animate
+            attributeName="opacity"
+            values="0; 1; 1; 0; 0"
+            keyTimes="0; 0.1; 0.7; 0.8; 1"
+            dur="2s"
+            repeatCount="indefinite"
+          />
+        </line>
+      </g>
+    </svg>
+  );
+};
+
+export default HourglassLoader;

package/src/components/Lifecycle.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { LANDING_PAGE_CONTENT, PIPELINE_STEPS } from '@/app/constants';
+
+export function Lifecycle() {
+  return (
+    <div className="mt-24 mb-12">
+      <h2 className="text-2xl font-bold text-slate-900 dark:text-white text-center mb-2">{LANDING_PAGE_CONTENT.lifecycle.title}</h2>
+      <div className="relative max-w-5xl mx-auto py-12">
+        <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-slate-200 dark:bg-white/10 -translate-x-1/2 hidden md:block" />
+        <div className="space-y-12 md:space-y-0">
+          {PIPELINE_STEPS.map(({ step, Icon, title, desc, colors }, index) => {
+            const isLeft = index % 2 === 0;
+            return (
+              <div key={step} className={`relative flex flex-col md:flex-row items-center gap-8 ${isLeft ? 'md:flex-row' : 'md:flex-row-reverse'}`}>
+                <div className={`w-full md:w-1/2 relative flex ${isLeft ? 'justify-end' : 'justify-start'}`}>
+                  <div className="relative p-6 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/3 max-w-md text-left overflow-hidden group">
+                    <div className="absolute -right-2 -bottom-4 text-7xl font-bold opacity-[0.1] italic" style={{ color: colors.from }}>{step}</div>
+                    <h3 className="font-semibold text-slate-900 dark:text-white mb-2 text-lg flex items-center gap-2">
+                      <Icon className="w-5 h-5" style={{ color: colors.from }} /> {title}
+                    </h3>
+                    <p className="text-slate-600 dark:text-white/40 text-sm leading-relaxed">{desc}</p>
+                  </div>
+                </div>
+                <div className="relative z-10 w-12 h-12 rounded-2xl flex items-center justify-center shadow-xl border-4 border-slate-50 dark:border-[#080811]" style={{ background: `linear-gradient(135deg, ${colors.from}, ${colors.to})` }}>
+                  <Icon className="w-6 h-6 text-white" />
+                </div>
+                <div className="hidden md:block md:w-1/2" />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/MarkdownComponents.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { Components } from 'react-markdown';
+import { UIDispatcher } from './UIDispatcher';
+import { Product } from '../types';
+import { ChatViewportSize } from '../types/props';
+
+interface MarkdownComponentsProps {
+  primaryColor: string;
+  accentColor: string;
+  isStreaming: boolean;
+  onAddToCart?: (product: Product) => void;
+  viewportSize: ChatViewportSize;
+}
+
+export function createMarkdownComponents({
+  primaryColor,
+  accentColor,
+  isStreaming,
+  onAddToCart,
+  viewportSize,
+}: MarkdownComponentsProps): Components {
+  return {
+    table: ({ ...props }: React.HTMLAttributes<HTMLTableElement>) => {
+      // Fix: intercept table rendering during streaming instead of using sentinel
+      if (isStreaming) {
+        return (
+          <div className="my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none">
+            <div className="w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
+            <p className="text-xs text-slate-500 font-medium italic animate-pulse">
+              Generating data table...
+            </p>
+          </div>
+        );
+      }
+
+      return (
+        <div className="not-prose overflow-hidden my-5 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm bg-white dark:bg-slate-900/50">
+          <div className="overflow-x-auto">
+            <table
+              className="!table w-full text-left border-collapse min-w-[400px] text-sm"
+              {...props}
+            />
+          </div>
+        </div>
+      );
+    },
+    thead: ({ ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+      <thead
+        className="!table-header-group bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10"
+        {...props}
+      />
+    ),
+    tbody: ({ ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+      <tbody className="!table-row-group divide-y divide-slate-100 dark:divide-white/5" {...props} />
+    ),
+    tr: ({ ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
+      <tr
+        className="!table-row hover:bg-slate-50/70 dark:hover:bg-white/5 transition-colors"
+        {...props}
+      />
+    ),
+    th: ({ children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
+      <th
+        className="!table-cell px-4 py-3 font-bold text-slate-700 dark:text-white/90 whitespace-nowrap text-[11px] uppercase tracking-wider text-left"
+        {...props}
+      >
+        {normaliseChild(children)}
+      </th>
+    ),
+    td: ({ children, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
+      <td
+        className="!table-cell px-4 py-3 text-slate-600 dark:text-white/70 whitespace-nowrap text-sm"
+        {...props}
+      >
+        {normaliseChild(children)}
+      </td>
+    ),
+    code({
+      inline,
+      className,
+      children,
+      ...props
+    }: React.HTMLAttributes<HTMLElement> & { inline?: boolean }) {
+      const lang = /language-(\w+)/.exec(className ?? '')?.[1];
+
+      if (!inline && (lang === 'ui' || lang === 'chart' || lang === 'json')) {
+        const content = String(children ?? '').trim();
+        // Since we extract pure components, UIDispatcher handles these formats
+        return (
+          <UIDispatcher
+            rawContent={content}
+            primaryColor={primaryColor}
+            accentColor={accentColor}
+            isStreaming={isStreaming}
+            onAddToCart={onAddToCart}
+            viewportSize={viewportSize}
+          />
+        );
+      }
+
+      if (!inline) {
+        const content = String(children ?? '').trim();
+        // Fallback catch for json payload without lang block
+        if (content.startsWith('{') && content.endsWith('}')) {
+          return (
+            <UIDispatcher
+              rawContent={content}
+              primaryColor={primaryColor}
+              accentColor={accentColor}
+              isStreaming={isStreaming}
+              onAddToCart={onAddToCart}
+              viewportSize={viewportSize}
+            />
+          );
+        }
+      }
+
+      return (
+        <code className={className} {...props}>
+          {typeof children === 'string' || typeof children === 'number'
+            ? children
+            : JSON.stringify(children)}
+        </code>
+      );
+    },
+  };
+}
+
+/** Safely render table cell children that might be plain objects. */
+function normaliseChild(children: unknown): React.ReactNode {
+  if (
+    typeof children === 'object' &&
+    children !== null &&
+    !Array.isArray(children) &&
+    !React.isValidElement(children)
+  ) {
+    return JSON.stringify(children);
+  }
+  return children as React.ReactNode;
+}