Chart support

.gitignore

@@ -23,3 +23,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.yarn/

package.json

@@ -1,6 +1,5 @@
 {
   "name": "anythingllm-embedded-chat",
-  "private": false,
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -20,16 +19,19 @@
     "@microsoft/fetch-event-source": "^2.0.1",
     "@phosphor-icons/react": "^2.0.13",
     "dompurify": "^3.0.8",
+    "file-saver": "^2.0.5",
     "he": "^1.2.0",
     "highlight.js": "^11.9.0",
+    "i18next": "^23.11.3",
+    "i18next-browser-languagedetector": "^7.2.1",
     "lodash.debounce": "^4.0.8",
     "markdown-it": "^13.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "uuid": "^9.0.1",
-    "i18next": "^23.11.3",
     "react-i18next": "^14.1.1",
-    "i18next-browser-languagedetector": "^7.2.1"
+    "recharts": "^3.2.1",
+    "recharts-to-png": "^3.0.1",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@rollup/plugin-image": "^3.0.3",
@@ -53,4 +55,4 @@
     "vite": "^5.0.0",
     "vite-plugin-singlefile": "^0.13.5"
   }
-}
+}

src/components/Chart/DownloadChart.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { CircleNotch, DownloadSimple } from '@phosphor-icons/react';
+
+// Download button component for chart export
+function DownloadChart({ onClick }) {
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    setLoading(true);
+    await onClick?.();
+    setLoading(false);
+  };
+
+  return (
+    <div className="allm-absolute allm-top-3 allm-right-3 allm-z-50 allm-cursor-pointer">
+      <div className="allm-flex allm-flex-col allm-items-center">
+        <div className="allm-p-1 allm-rounded-full allm-border-none">
+          {loading ? (
+            <CircleNotch
+              className="allm-w-5 allm-h-5 allm-animate-spin"
+              aria-label="Downloading image..."
+            />
+          ) : (
+            <DownloadSimple
+              weight="bold"
+              className="allm-w-5 allm-h-5"
+              onClick={handleClick}
+              aria-label="Download graph image"
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DownloadChart;

src/components/Chart/chart-utils.js

@@ -0,0 +1,76 @@
+// Color utilities
+export const Colors = {
+  blue: "#3b82f6",
+  sky: "#0ea5e9",
+  cyan: "#06b6d4",
+  teal: "#14b8a6",
+  emerald: "#10b981",
+  green: "#22c55e",
+  lime: "#84cc16",
+  yellow: "#eab308",
+  amber: "#f59e0b",
+  orange: "#f97316",
+  red: "#ef4444",
+  rose: "#f43f5e",
+  pink: "#ec4899",
+  fuchsia: "#d946ef",
+  purple: "#a855f7",
+  violet: "#8b5cf6",
+  indigo: "#6366f1",
+  neutral: "#737373",
+  stone: "#78716c",
+  gray: "#6b7280",
+  slate: "#64748b",
+  zinc: "#71717a",
+};
+
+export function getColor(color) {
+  return Colors[color] || Colors.blue;
+}
+
+export const CHART_COLORS = [
+  Colors.blue, 
+  Colors.emerald, 
+  Colors.violet, 
+  Colors.amber, 
+  Colors.rose, 
+  Colors.cyan
+];
+
+// Data formatter
+export const dataFormatter = (number) => {
+  return new Intl.NumberFormat('en-US').format(number).toString();
+};
+
+// JSON parser
+export function safeJsonParse(jsonString, fallback = null) {
+  try {
+    return JSON.parse(jsonString);
+  } catch (x) {
+    console.error("Failed to parse data", x);
+      if (jsonString.startsWith("[") && jsonString.endsWith("]}")) { //fallback: try to remove redundant closing bracket if exists. seems like a server side issue or LLM generation quirk for the dataset json string
+          return JSON.parse(jsonString.slice(0, -1));
+      }
+  }
+  return fallback;
+}
+
+// Auto-detect value key from data
+export const getValueKey = (data) => {
+  if (!data || data.length === 0) return "value";
+  const firstItem = data[0];
+
+  // Check if 'value' key exists
+  if ('value' in firstItem) return 'value';
+
+  // Find the first numeric field that isn't 'name'
+  for (const [key, val] of Object.entries(firstItem)) {
+    if (key !== 'name' && (typeof val === 'number' || !isNaN(Number(val)))) {
+      return key;
+    }
+  }
+
+  // Fallback to second key if no numeric field found
+  const keys = Object.keys(firstItem);
+  return keys.find(k => k !== 'name') || keys[1] || 'value';
+};