@antipopp/agno-react 0.10.0 → 0.11.0

package/dist/index.js

@@ -98,9 +98,9 @@ var ComponentRegistry = class _ComponentRegistry {
    * Register multiple components at once
    */
   registerBatch(components) {
-    Object.entries(components).forEach(([type, renderer]) => {
+    for (const [type, renderer] of Object.entries(components)) {
       this.register(type, renderer);
-    });
+    }
   }
   /**
    * Get a registered component renderer
@@ -213,12 +213,80 @@ function useToolHandlers() {
 }
 
 // src/hooks/useAgnoToolExecution.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function getCustomRenderFunction(value) {
+  if (value.type !== "custom") {
+    return void 0;
+  }
+  const maybeRender = value.render;
+  return typeof maybeRender === "function" ? maybeRender : void 0;
+}
 var customRenderRegistry = /* @__PURE__ */ new Map();
 function registerCustomRender(renderFn) {
   const key = `custom-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   customRenderRegistry.set(key, renderFn);
   return key;
 }
+function toSerializableUIComponent(spec) {
+  const renderFn = getCustomRenderFunction(spec);
+  if (!renderFn) {
+    return spec;
+  }
+  const { render: _render, ...uiWithoutRender } = spec;
+  return {
+    ...uiWithoutRender,
+    renderKey: registerCustomRender(renderFn)
+  };
+}
+async function executeToolCall(tool, handlers) {
+  const handler = handlers[tool.tool_name];
+  if (!handler) {
+    return {
+      ...tool,
+      result: JSON.stringify({
+        error: `No handler registered for ${tool.tool_name}`
+      })
+    };
+  }
+  try {
+    const result = await handler(tool.tool_args);
+    const { resultData, uiComponent } = processToolResult(result, tool);
+    return {
+      ...tool,
+      result: resultData,
+      ui_component: uiComponent
+    };
+  } catch (error) {
+    return {
+      ...tool,
+      result: JSON.stringify({
+        error: error instanceof Error ? error.message : String(error)
+      })
+    };
+  }
+}
+async function hydrateToolUIForSession(tools, handlers, onHydrate) {
+  for (const tool of tools) {
+    if (tool.ui_component) {
+      continue;
+    }
+    const handler = handlers[tool.tool_name];
+    if (!handler) {
+      continue;
+    }
+    try {
+      const result = await handler(tool.tool_args);
+      const { uiComponent } = processToolResult(result, tool);
+      if (uiComponent) {
+        onHydrate(tool.tool_call_id, uiComponent);
+      }
+    } catch (error) {
+      console.error(`Failed to hydrate UI for ${tool.tool_name}:`, error);
+    }
+  }
+}
 function getCustomRender(key) {
   return customRenderRegistry.get(key);
 }
@@ -226,27 +294,17 @@ function clearCustomRenderRegistry() {
   customRenderRegistry.clear();
 }
 function isToolHandlerResult(value) {
-  return value && typeof value === "object" && ("data" in value || "ui" in value);
+  return isRecord(value) && ("data" in value || "ui" in value);
 }
 function isUIComponentSpec(value) {
-  return value && typeof value === "object" && "type" in value;
+  return isRecord(value) && typeof value.type === "string";
 }
 function processToolResult(result, _tool) {
   if (isToolHandlerResult(result)) {
     const { data, ui } = result;
     let uiComponent;
     if (ui) {
-      if (ui.type === "custom" && typeof ui.render === "function") {
-        const renderKey = registerCustomRender(ui.render);
-        uiComponent = {
-          ...ui,
-          renderKey,
-          render: void 0
-          // Don't store the function itself
-        };
-      } else {
-        uiComponent = ui;
-      }
+      uiComponent = toSerializableUIComponent(ui);
     }
     return {
       resultData: typeof data === "string" ? data : JSON.stringify(data),
@@ -254,17 +312,7 @@ function processToolResult(result, _tool) {
     };
   }
   if (isUIComponentSpec(result)) {
-    let uiComponent;
-    if (result.type === "custom" && typeof result.render === "function") {
-      const renderKey = registerCustomRender(result.render);
-      uiComponent = {
-        ...result,
-        renderKey,
-        render: void 0
-      };
-    } else {
-      uiComponent = result;
-    }
+    const uiComponent = toSerializableUIComponent(result);
     return {
       resultData: JSON.stringify(result),
       uiComponent
@@ -325,35 +373,9 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     setExecutionError(void 0);
     try {
       const updatedTools = await Promise.all(
-        pendingTools.map(async (tool) => {
-          const handler = mergedHandlers[tool.tool_name];
-          if (!handler) {
-            return {
-              ...tool,
-              result: JSON.stringify({
-                error: `No handler registered for ${tool.tool_name}`
-              })
-            };
-          }
-          try {
-            const result = await handler(tool.tool_args);
-            const { resultData, uiComponent } = processToolResult(result, tool);
-            return {
-              ...tool,
-              result: resultData,
-              ui_component: uiComponent
-            };
-          } catch (error) {
-            return {
-              ...tool,
-              result: JSON.stringify({
-                error: error instanceof Error ? error.message : String(error)
-              })
-            };
-          }
-        })
+        pendingTools.map((tool) => executeToolCall(tool, mergedHandlers))
       );
-      const toolsWithUI = updatedTools.filter((t) => t.ui_component);
+      const toolsWithUI = updatedTools.filter((tool) => tool.ui_component);
       if (toolsWithUI.length > 0) {
         client.emit("ui:render", {
           tools: updatedTools,
@@ -370,31 +392,20 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     }
   }, [client, mergedHandlers, isPaused, pendingTools]);
   (0, import_react3.useEffect)(() => {
-    const handleSessionLoaded = async (_sessionId) => {
-      const messages = client.getMessages();
-      for (const message of messages) {
-        if (!message.tool_calls) {
-          continue;
+    const handleSessionLoaded = (_sessionId) => {
+      const tools = client.getMessages().flatMap((message) => message.tool_calls || []);
+      hydrateToolUIForSession(
+        tools,
+        mergedHandlers,
+        (toolCallId, uiComponent) => {
+          client.hydrateToolCallUI(toolCallId, uiComponent);
         }
-        for (const tool of message.tool_calls) {
-          if (tool.ui_component) {
-            continue;
-          }
-          const handler = mergedHandlers[tool.tool_name];
-          if (!handler) {
-            continue;
-          }
-          try {
-            const result = await handler(tool.tool_args);
-            const { uiComponent } = processToolResult(result, tool);
-            if (uiComponent) {
-              client.hydrateToolCallUI(tool.tool_call_id, uiComponent);
-            }
-          } catch (err) {
-            console.error(`Failed to hydrate UI for ${tool.tool_name}:`, err);
-          }
-        }
-      }
+      ).catch((error) => {
+        console.error(
+          "[useAgnoToolExecution] Failed to hydrate session UI:",
+          error
+        );
+      });
     };
     client.on("session:loaded", handleSessionLoaded);
     return () => {
@@ -402,30 +413,9 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     };
   }, [client, mergedHandlers]);
   const executeTools = (0, import_react3.useCallback)(
-    async (tools) => {
+    (tools) => {
       return Promise.all(
-        tools.map(async (tool) => {
-          const handler = mergedHandlers[tool.tool_name];
-          if (!handler) {
-            return tool;
-          }
-          try {
-            const result = await handler(tool.tool_args);
-            const { resultData, uiComponent } = processToolResult(result, tool);
-            return {
-              ...tool,
-              result: resultData,
-              ui_component: uiComponent
-            };
-          } catch (error) {
-            return {
-              ...tool,
-              result: JSON.stringify({
-                error: error instanceof Error ? error.message : String(error)
-              })
-            };
-          }
-        })
+        tools.map((tool) => executeToolCall(tool, mergedHandlers))
       );
     },
     [mergedHandlers]
@@ -446,13 +436,15 @@ function useAgnoToolExecution(handlers = {}, autoExecute = true) {
     [client, isPaused]
   );
   (0, import_react3.useEffect)(() => {
-    if (autoExecute && isPaused && !isExecuting && pendingTools.length > 0) {
-      executeAndContinue();
+    if (autoExecute && isPaused && !isExecuting && !executionError && pendingTools.length > 0) {
+      executeAndContinue().catch(() => {
+      });
     }
   }, [
     autoExecute,
     isPaused,
     isExecuting,
+    executionError,
     pendingTools.length,
     executeAndContinue
   ]);
@@ -502,108 +494,183 @@ var UIErrorBoundary = class extends import_react4.default.Component {
     return this.props.children;
   }
 };
-function GenerativeUIRenderer({
-  spec,
-  className,
-  onError
-}) {
-  const registry = getComponentRegistry();
-  if (spec.type === "custom") {
-    const customSpec = spec;
-    if (customSpec.renderKey) {
-      const renderFn = getCustomRender(customSpec.renderKey);
-      if (renderFn) {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: renderFn(customSpec.props || {}) }) });
-      }
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        className: `rounded-md border border-yellow-300 bg-yellow-50 p-4 text-yellow-800 ${className || ""}`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "font-semibold", children: "Custom component not available" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1 text-sm", children: "The custom render function for this component is not available." })
-        ]
-      }
-    );
+function joinClassNames(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+function renderHeader(title, description) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "mb-2 font-semibold", children: title }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-4 text-gray-600 text-sm", children: description }) : null
+  ] });
+}
+function renderFromRegistry(renderer, props) {
+  if (!renderer) {
+    return void 0;
   }
-  if (spec.type === "chart") {
-    const chartSpec = spec;
-    const chartType = `chart:${chartSpec.component}`;
-    if (registry.has(chartType)) {
-      const ChartRenderer = registry.get(chartType);
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
-        chartSpec.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "mb-2 font-semibold", children: chartSpec.title }),
-        chartSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-4 text-gray-600 text-sm", children: chartSpec.description }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartRenderer, { ...chartSpec.props })
-      ] }) });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        className: `rounded-md border border-gray-300 p-4 ${className || ""}`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-2 font-semibold", children: chartSpec.title || "Chart Data" }),
-          chartSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-2 text-gray-600 text-sm", children: chartSpec.description }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "overflow-auto rounded bg-gray-100 p-2 text-xs", children: JSON.stringify(chartSpec.props.data, null, 2) })
-        ]
-      }
-    );
+  return renderer(props);
+}
+function getSpecKey(spec) {
+  switch (spec.type) {
+    case "chart":
+      return `${spec.type}-${spec.component}-${spec.title ?? "untitled"}-${spec.props.data.length}`;
+    case "card-grid":
+      return `${spec.type}-${spec.title ?? "untitled"}-${spec.props.cards.map((card) => card.id).join("|")}`;
+    case "table":
+      return `${spec.type}-${spec.title ?? "untitled"}-${spec.props.columns.map((column) => column.key).join("|")}`;
+    case "markdown":
+      return `${spec.type}-${spec.props.content.slice(0, 48)}`;
+    case "custom":
+      return `${spec.type}-${spec.renderKey}`;
+    case "artifact":
+      return `${spec.type}-${spec.title ?? "untitled"}-${spec.props.content.length}`;
+    default:
+      return "unknown-spec";
   }
-  if (spec.type === "card-grid") {
-    const cardGridSpec = spec;
-    if (registry.has("card-grid")) {
-      const CardGridRenderer = registry.get("card-grid");
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
-        cardGridSpec.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "mb-2 font-semibold", children: cardGridSpec.title }),
-        cardGridSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-4 text-gray-600 text-sm", children: cardGridSpec.description }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardGridRenderer, { ...cardGridSpec.props })
-      ] }) });
-    }
+}
+function renderCustomSpec(spec, className, onError) {
+  const renderFn = getCustomRender(spec.renderKey);
+  if (renderFn) {
+    const renderedContent = renderFn(spec.props || {});
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: renderedContent }) });
   }
-  if (spec.type === "table") {
-    const tableSpec = spec;
-    if (registry.has("table")) {
-      const TableRenderer = registry.get("table");
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
-        tableSpec.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "mb-2 font-semibold", children: tableSpec.title }),
-        tableSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-4 text-gray-600 text-sm", children: tableSpec.description }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TableRenderer, { ...tableSpec.props })
-      ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: joinClassNames(
+        "rounded-md border border-yellow-300 bg-yellow-50 p-4 text-yellow-800",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "font-semibold", children: "Custom component not available" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1 text-sm", children: "The custom render function for this component is not available." })
+      ]
     }
+  );
+}
+function renderChartSpec(spec, className, onError) {
+  const registry = getComponentRegistry();
+  const chartType = `chart:${spec.component}`;
+  const chartRenderer = registry.get(chartType);
+  const renderedChart = renderFromRegistry(
+    chartRenderer,
+    spec.props
+  );
+  if (renderedChart) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
+      renderHeader(spec.title, spec.description),
+      renderedChart
+    ] }) });
   }
-  if (spec.type === "markdown") {
-    const markdownSpec = spec;
-    if (registry.has("markdown")) {
-      const MarkdownRenderer = registry.get("markdown");
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MarkdownRenderer, { ...markdownSpec.props }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: joinClassNames(
+        "rounded-md border border-gray-300 p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-2 font-semibold", children: spec.title || "Chart Data" }),
+        spec.description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-2 text-gray-600 text-sm", children: spec.description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "overflow-auto rounded bg-gray-100 p-2 text-xs", children: JSON.stringify(spec.props.data, null, 2) })
+      ]
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: markdownSpec.props.content });
+  );
+}
+function renderCardGridSpec(spec, className, onError) {
+  const registry = getComponentRegistry();
+  const cardGridRenderer = registry.get("card-grid");
+  const renderedGrid = renderFromRegistry(
+    cardGridRenderer,
+    spec.props
+  );
+  if (!renderedGrid) {
+    return renderUnsupportedSpec(spec, className);
   }
-  if (spec.type === "artifact") {
-    const artifactSpec = spec;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `rounded-md border p-4 ${className || ""}`, children: [
-      artifactSpec.title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "mb-4 font-semibold", children: artifactSpec.title }),
-      artifactSpec.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-4 text-gray-600 text-sm", children: artifactSpec.description }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "space-y-4", children: artifactSpec.props.content?.map(
-        (childSpec, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          GenerativeUIRenderer,
-          {
-            onError,
-            spec: childSpec
-          },
-          index
-        )
-      ) })
-    ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
+    renderHeader(spec.title, spec.description),
+    renderedGrid
+  ] }) });
+}
+function renderTableSpec(spec, className, onError) {
+  const registry = getComponentRegistry();
+  const tableRenderer = registry.get("table");
+  const renderedTable = renderFromRegistry(
+    tableRenderer,
+    spec.props
+  );
+  if (!renderedTable) {
+    return renderUnsupportedSpec(spec, className);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, children: [
+    renderHeader(spec.title, spec.description),
+    renderedTable
+  ] }) });
+}
+function renderMarkdownSpec(spec, className, onError) {
+  const registry = getComponentRegistry();
+  const markdownRenderer = registry.get("markdown");
+  const renderedMarkdown = renderFromRegistry(
+    markdownRenderer,
+    spec.props
+  );
+  if (!renderedMarkdown) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: spec.props.content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: renderedMarkdown }) });
+}
+function renderArtifactSpec(spec, className, onError) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: joinClassNames("rounded-md border p-4", className), children: [
+    spec.title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "mb-4 font-semibold", children: spec.title }) : null,
+    spec.description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-4 text-gray-600 text-sm", children: spec.description }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "space-y-4", children: spec.props.content.map((childSpec) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      GenerativeUIRenderer,
+      {
+        onError,
+        spec: childSpec
+      },
+      getSpecKey(childSpec)
+    )) })
+  ] }) });
+}
+function renderUnsupportedSpec(spec, className) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: joinClassNames(
+        "rounded-md border border-gray-300 p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "font-semibold", children: "Unsupported UI component" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "mt-1 text-gray-600 text-sm", children: [
+          "Component type: ",
+          spec.type
+        ] })
+      ]
+    }
+  );
+}
+function GenerativeUIRenderer({
+  spec,
+  className,
+  onError
+}) {
+  switch (spec.type) {
+    case "custom":
+      return renderCustomSpec(spec, className, onError);
+    case "chart":
+      return renderChartSpec(spec, className, onError);
+    case "card-grid":
+      return renderCardGridSpec(spec, className, onError);
+    case "table":
+      return renderTableSpec(spec, className, onError);
+    case "markdown":
+      return renderMarkdownSpec(spec, className, onError);
+    case "artifact":
+      return renderArtifactSpec(spec, className, onError);
+    default:
+      return renderUnsupportedSpec(spec, className);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `rounded-md border border-gray-300 p-4 ${className || ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "font-semibold", children: "Unsupported UI component" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "mt-1 text-gray-600 text-sm", children: [
-      "Component type: ",
-      spec.type
-    ] })
-  ] });
 }
 
 // src/hooks/useAgnoActions.ts
@@ -712,10 +779,7 @@ function useAgnoChat() {
       const { tools } = event;
       for (const tool of tools) {
         if (tool.ui_component) {
-          client.hydrateToolCallUI(
-            tool.tool_call_id,
-            tool.ui_component
-          );
+          client.hydrateToolCallUI(tool.tool_call_id, tool.ui_component);
         }
       }
     };
@@ -1032,6 +1096,7 @@ function createSmartChart(data, options) {
     (k) => k !== xKey && typeof firstItem[k] === "number"
   );
   const yKeys = options?.yKeys || numericKeys;
+  const firstValueKey = yKeys[0] ?? numericKeys[0];
   if (options?.preferredType) {
     switch (options.preferredType) {
       case "bar":
@@ -1056,11 +1121,18 @@ function createSmartChart(data, options) {
           options
         );
       case "pie":
-        return createPieChart(data, yKeys[0], xKey, options);
+        return createPieChart(data, firstValueKey ?? "value", xKey, options);
+      default:
+        return createBarChart(
+          data,
+          xKey,
+          yKeys.map((key) => ({ key })),
+          options
+        );
     }
   }
-  if (yKeys.length === 1 && typeof firstItem[xKey] === "string") {
-    return createPieChart(data, yKeys[0], xKey, options);
+  if (yKeys.length === 1 && firstValueKey && typeof firstItem[xKey] === "string") {
+    return createPieChart(data, firstValueKey, xKey, options);
   }
   if (xKey.toLowerCase().includes("date") || xKey.toLowerCase().includes("time") || xKey.toLowerCase().includes("month") || xKey.toLowerCase().includes("year")) {
     return createLineChart(