orchid-ai 2.1.5 → 2.2.0

package/orchid-ai.css

@@ -860,6 +860,39 @@
   color: #1f2937;
 }
 
+.ai-chart-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.ai-chart-card-header .ai-chart-title {
+  margin: 0;
+}
+
+.ai-chart-csv-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #1eaaf1;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.ai-chart-csv-btn:hover {
+  background: #f0f9ff;
+  border-color: #1eaaf1;
+}
+
 .ai-chart-error {
   color: #b91c1c;
   background: #fef2f2;
@@ -1877,8 +1910,9 @@
   font-size: 22px;
   font-weight: 700;
   color: #1f2937;
-  line-height: 1;
+  line-height: 1.15;
   margin-bottom: 5px;
+  overflow-wrap: break-word;
 }
 
 .ai-stat-unit {
@@ -2762,6 +2796,20 @@
     color: #1f2937 !important;
     box-shadow: none !important;
   }
+
+  body.ai-chat-printing #ai-cortex-print-section .ai-stat-card {
+    padding: 8px 10px !important;
+    min-width: 80px !important;
+  }
+
+  body.ai-chat-printing #ai-cortex-print-section .ai-stat-value {
+    font-size: 17px !important;
+    line-height: 1.2 !important;
+  }
+
+  body.ai-chat-printing #ai-cortex-print-section .ai-stat-label {
+    font-size: 9px !important;
+  }
 }
 
 /* ── Responsive ── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orchid-ai",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "description": "Shared Orchid AI chat UI and visualization components",
   "main": "src/index.js",
   "types": "src/index.d.ts",

package/src/components/visualizations/DataTable.jsx

@@ -1,11 +1,58 @@
 import React from "react";
 
+function csvEscape(value) {
+  const s = (value ?? "").toString();
+  return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+}
+
+function buildCsv(columns, rows) {
+  const header = columns.map((c) => csvEscape(c.label)).join(",");
+  const body = rows.map((row) => columns.map((c) => csvEscape(row[c.key])).join(",")).join("\r\n");
+  return `${header}\r\n${body}`;
+}
+
+function downloadCsv(filename, csv) {
+  // Prepend a BOM so Excel reads UTF-8 correctly.
+  const blob = new Blob([`${csv}`], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+
+function safeFilename(title) {
+  const base = (title || "table").replace(/[\\/:*?"<>|]+/g, "").trim().slice(0, 80);
+  return `${base || "table"}.csv`;
+}
+
 export default function DataTable({ chart }) {
   const { title, columns, rows } = chart;
 
+  const handleDownload = () => downloadCsv(safeFilename(title), buildCsv(columns, rows));
+
   return (
     <div className="ai-chart-card">
-      {title ? <h4 className="ai-chart-title">{title}</h4> : null}
+      <div className="ai-chart-card-header">
+        {title ? <h4 className="ai-chart-title">{title}</h4> : <span />}
+        <button
+          type="button"
+          className="ai-chart-csv-btn"
+          onClick={handleDownload}
+          title="Download as CSV"
+          aria-label="Download table as CSV"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" y1="15" x2="12" y2="3" />
+          </svg>
+          CSV
+        </button>
+      </div>
       <div className="ai-data-table-wrap">
         <table className="ai-data-table">
           <thead>