@agentmark-ai/ui-components 0.2.0 → 0.3.1

package/dist/index.mjs

@@ -1190,7 +1190,7 @@ import {
   getGridNumericOperators,
   getGridStringOperators
 } from "@mui/x-data-grid";
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 
 // src/components/iconify/iconify.tsx
 import { forwardRef } from "react";
@@ -1284,6 +1284,7 @@ function EmptyContent({
 }
 
 // src/components/datagrid/datagrid.tsx
+import { memo, useMemo } from "react";
 import {
   DataGrid as MuiDataGrid,
   Toolbar,
@@ -1291,57 +1292,60 @@ import {
   FilterPanelTrigger
 } from "@mui/x-data-grid";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DataGridToolbar = memo(function DataGridToolbar2() {
+  return /* @__PURE__ */ jsxs2(Toolbar, { children: [
+    /* @__PURE__ */ jsx3(ColumnsPanelTrigger, { startIcon: /* @__PURE__ */ jsx3(Iconify, { icon: "solar:eye-bold" }), children: "Columns" }),
+    /* @__PURE__ */ jsx3(FilterPanelTrigger, { startIcon: /* @__PURE__ */ jsx3(Iconify, { icon: "solar:filter-bold" }), children: "Filters" })
+  ] });
+});
 var DataGrid = ({
   t,
   emptyContentImgUrl,
   ...props
 }) => {
+  const slots = useMemo(
+    () => ({
+      toolbar: DataGridToolbar,
+      noRowsOverlay: () => /* @__PURE__ */ jsx3(
+        EmptyContent,
+        {
+          sx: { margin: 2 },
+          title: t("noResults"),
+          imgUrl: emptyContentImgUrl
+        }
+      ),
+      noResultsOverlay: () => /* @__PURE__ */ jsx3(
+        EmptyContent,
+        {
+          title: t("noResults"),
+          sx: { py: 10 },
+          imgUrl: emptyContentImgUrl
+        }
+      )
+    }),
+    [t, emptyContentImgUrl]
+  );
   return /* @__PURE__ */ jsx3(
     MuiDataGrid,
     {
       sx: { "--DataGrid-overlayHeight": "530px" },
       ...props,
-      slots: {
-        toolbar: () => {
-          return /* @__PURE__ */ jsxs2(Toolbar, { children: [
-            /* @__PURE__ */ jsx3(
-              ColumnsPanelTrigger,
-              {
-                startIcon: /* @__PURE__ */ jsx3(Iconify, { icon: "solar:eye-bold" }),
-                children: "Columns"
-              }
-            ),
-            /* @__PURE__ */ jsx3(
-              FilterPanelTrigger,
-              {
-                startIcon: /* @__PURE__ */ jsx3(Iconify, { icon: "solar:filter-bold" }),
-                children: "Filters"
-              }
-            )
-          ] });
-        },
-        noRowsOverlay: () => /* @__PURE__ */ jsx3(
-          EmptyContent,
-          {
-            sx: { margin: 2 },
-            title: t("noResults"),
-            imgUrl: emptyContentImgUrl
-          }
-        ),
-        noResultsOverlay: () => /* @__PURE__ */ jsx3(
-          EmptyContent,
-          {
-            title: t("noResults"),
-            sx: { py: 10 },
-            imgUrl: emptyContentImgUrl
-          }
-        )
-      },
+      slots,
       slotProps: {
         loadingOverlay: {
           sx: {
             padding: 5
           }
+        },
+        filterPanel: {
+          sx: {
+            maxWidth: "100vw"
+          }
+        },
+        columnsPanel: {
+          sx: {
+            maxWidth: "100vw"
+          }
         }
       }
     }
@@ -17448,7 +17452,7 @@ var RequestTable = ({
   t,
   emptyContentImgUrl
 }) => {
-  const tableData = useMemo(() => {
+  const tableData = useMemo2(() => {
     if (requests) {
       return requests.map((item) => ({
         ...item,
@@ -17458,7 +17462,7 @@ var RequestTable = ({
       }));
     } else return [];
   }, [requests]);
-  const columns = useMemo(() => {
+  const columns = useMemo2(() => {
     const col = [
       {
         field: "input",
@@ -19428,7 +19432,7 @@ var TracesList = ({
 import {
   createContext as createContext2,
   useContext as useContext3,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   useCallback as useCallback2,
   useState as useState4,
   useEffect as useEffect2
@@ -19494,7 +19498,7 @@ var TraceDrawerProvider = ({
   onSpanChange
 }) => {
   const [selectedSpanId, setSelectedSpanId] = useState4(null);
-  const selectedSpan = useMemo2(() => {
+  const selectedSpan = useMemo3(() => {
     if (!selectedSpanId) {
       if (traces.length > 0 && traces[0]) {
         return {
@@ -19530,7 +19534,7 @@ var TraceDrawerProvider = ({
     }
     return null;
   }, [selectedSpanId, traces]);
-  const spanTree = useMemo2(() => {
+  const spanTree = useMemo3(() => {
     const buildSpanTree = (traces2) => {
       const tree = [];
       const lookup = {};
@@ -20285,7 +20289,7 @@ var TraceLabel = ({
 };
 
 // src/sections/traces/trace-drawer/trace-tree/trace-tree.tsx
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var renderTree = (node, findCostAndTokens) => {
   if (!node) {
@@ -20323,7 +20327,7 @@ var TraceTree = () => {
     findCostAndTokens,
     traceId
   } = useTraceDrawerContext();
-  const tree = useMemo3(() => {
+  const tree = useMemo4(() => {
     return spanTree.map((node) => renderTree(node, findCostAndTokens));
   }, [spanTree]);
   return /* @__PURE__ */ jsx33(Box15, { sx: { height: "100%", overflowY: "auto", p: 2 }, children: selectedSpan?.id && /* @__PURE__ */ jsx33(
@@ -20349,10 +20353,10 @@ var TraceTree = () => {
 
 // src/sections/traces/trace-drawer/trace-graph/trace-graph-canvas.tsx
 import { Box as Box17, CircularProgress, useTheme as useTheme8 } from "@mui/material";
-import { useCallback as useCallback3, useEffect as useEffect3, useState as useState5, useMemo as useMemo6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useState as useState5, useMemo as useMemo7 } from "react";
 
 // src/sections/traces/trace-drawer/trace-graph/use-trace-graph.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 
 // src/sections/traces/trace-drawer/trace-graph/workflow-graph-generator.ts
 function hasManualGraphMetadata(spans) {
@@ -20610,7 +20614,7 @@ function convertWorkflowEdgesToGraphEdges(workflowEdges) {
   }));
 }
 var useTraceGraph = (graphData, spans) => {
-  const result2 = useMemo4(() => {
+  const result2 = useMemo5(() => {
     if (graphData && graphData.length > 0) {
       return processManualGraphData(graphData);
     }
@@ -20646,7 +20650,7 @@ import {
 } from "@xyflow/react";
 
 // src/sections/traces/trace-drawer/trace-graph/trace-node.tsx
-import { memo } from "react";
+import { memo as memo2 } from "react";
 import { Handle, Position } from "@xyflow/react";
 import { Box as Box16, Typography as Typography8, useTheme as useTheme6 } from "@mui/material";
 import { Fragment as Fragment2, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -20795,10 +20799,10 @@ function TraceNodeComponent(props) {
     )
   ] });
 }
-var TraceNode = memo(TraceNodeComponent);
+var TraceNode = memo2(TraceNodeComponent);
 
 // src/sections/traces/trace-drawer/trace-graph/use-graph-data.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 import { useTheme as useTheme7 } from "@mui/material";
 function useGraphData({
   nodes: rawNodes,
@@ -20808,7 +20812,7 @@ function useGraphData({
   nodeSpanIndices
 }) {
   const theme2 = useTheme7();
-  const reactFlowNodes = useMemo5(() => {
+  const reactFlowNodes = useMemo6(() => {
     if (!rawNodes.length) return [];
     const initialNodes = rawNodes.map((node) => ({
       id: node.id,
@@ -20846,7 +20850,7 @@ function useGraphData({
     });
     return styledNodes;
   }, [rawNodes, rawEdges, theme2, onNodeClick, onNodeCycleClick, nodeSpanIndices]);
-  const reactFlowEdges = useMemo5(() => {
+  const reactFlowEdges = useMemo6(() => {
     const edges = [];
     rawEdges.forEach((edge) => {
       edges.push({
@@ -20859,7 +20863,7 @@ function useGraphData({
     });
     return edges;
   }, [rawEdges]);
-  const { nodes: layoutedNodes, edges: layoutedEdges } = useMemo5(
+  const { nodes: layoutedNodes, edges: layoutedEdges } = useMemo6(
     () => applyDagreLayout(reactFlowNodes, reactFlowEdges),
     [reactFlowNodes, reactFlowEdges]
   );
@@ -20881,7 +20885,7 @@ function TraceGraphCanvas({
 }) {
   const theme2 = useTheme8();
   const { onSelectSpan, traces } = useTraceDrawerContext();
-  const spansForAutoGeneration = useMemo6(() => {
+  const spansForAutoGeneration = useMemo7(() => {
     if (graphData && graphData.length > 0) {
       return [];
     }
@@ -20903,7 +20907,7 @@ function TraceGraphCanvas({
   const [nodeSpanIndices, setNodeSpanIndices] = useState5(
     () => /* @__PURE__ */ new Map()
   );
-  const nodeMap = useMemo6(() => {
+  const nodeMap = useMemo7(() => {
     const map = /* @__PURE__ */ new Map();
     rawNodes.forEach((node) => map.set(node.id, node));
     return map;
@@ -21385,9 +21389,9 @@ function computeTimelineLayout(spans) {
 }
 
 // src/sections/traces/trace-drawer/trace-timeline/use-timeline-layout.ts
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 function useTimelineLayout(spans) {
-  return useMemo7(() => computeTimelineLayout(spans), [spans]);
+  return useMemo8(() => computeTimelineLayout(spans), [spans]);
 }
 
 // src/sections/traces/trace-drawer/trace-timeline/use-timeline-zoom.ts
@@ -21643,12 +21647,12 @@ function useTimelineViewPreference() {
 }
 
 // src/sections/traces/trace-drawer/trace-timeline/trace-timeline.tsx
-import { memo as memo6, useRef as useRef2, useState as useState8, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo9 } from "react";
+import { memo as memo7, useRef as useRef2, useState as useState8, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo10 } from "react";
 import { Box as Box21, Skeleton as Skeleton3, Typography as Typography12, IconButton as IconButton3, Tooltip as Tooltip2 } from "@mui/material";
 import { useTheme as useTheme13 } from "@mui/material/styles";
 
 // src/sections/traces/trace-drawer/trace-timeline/timeline-bar.tsx
-import { memo as memo2 } from "react";
+import { memo as memo3 } from "react";
 import { useTheme as useTheme9 } from "@mui/material/styles";
 import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var { ROW_HEIGHT, MIN_BAR_WIDTH, BAR_HEIGHT_RATIO } = TIMELINE_CONSTANTS;
@@ -21658,7 +21662,7 @@ function formatBarDuration(ms) {
   }
   return `${(ms / 1e3).toFixed(1)}s`;
 }
-var TimelineBar = memo2(function TimelineBar2({
+var TimelineBar = memo3(function TimelineBar2({
   layout,
   isSelected,
   isFocused = false,
@@ -21746,11 +21750,11 @@ var TimelineBar = memo2(function TimelineBar2({
 });
 
 // src/sections/traces/trace-drawer/trace-timeline/timeline-ruler.tsx
-import { memo as memo3 } from "react";
+import { memo as memo4 } from "react";
 import { useTheme as useTheme10 } from "@mui/material/styles";
 import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 var { RULER_HEIGHT } = TIMELINE_CONSTANTS;
-var TimelineRuler = memo3(function TimelineRuler2({
+var TimelineRuler = memo4(function TimelineRuler2({
   ticks,
   width: width2,
   height: height2 = RULER_HEIGHT
@@ -21816,7 +21820,7 @@ var TimelineRuler = memo3(function TimelineRuler2({
 });
 
 // src/sections/traces/trace-drawer/trace-timeline/timeline-tooltip.tsx
-import { memo as memo4, useMemo as useMemo8 } from "react";
+import { memo as memo5, useMemo as useMemo9 } from "react";
 import { Box as Box18, Typography as Typography9, Paper, Divider as Divider2, Chip as Chip2 } from "@mui/material";
 import { useTheme as useTheme11 } from "@mui/material/styles";
 import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
@@ -21864,13 +21868,13 @@ function truncateText(text, maxLength) {
   if (cleanText.length <= maxLength) return cleanText;
   return cleanText.slice(0, maxLength) + "...";
 }
-var TimelineTooltip = memo4(function TimelineTooltip2({
+var TimelineTooltip = memo5(function TimelineTooltip2({
   layout,
   position,
   visible
 }) {
   const theme2 = useTheme11();
-  const parsedAttributes = useMemo8(() => {
+  const parsedAttributes = useMemo9(() => {
     const attributes = layout?.span?.data?.attributes;
     if (!attributes) return null;
     try {
@@ -22153,7 +22157,7 @@ var TimelineTooltip = memo4(function TimelineTooltip2({
 });
 
 // src/sections/traces/trace-drawer/trace-timeline/timeline-legend.tsx
-import { memo as memo5 } from "react";
+import { memo as memo6 } from "react";
 import { Box as Box19, Typography as Typography10 } from "@mui/material";
 import { useTheme as useTheme12 } from "@mui/material/styles";
 import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -22177,7 +22181,7 @@ var NODE_TYPE_ORDER = [
   "memory",
   "default"
 ];
-var TimelineLegend = memo5(function TimelineLegend2({
+var TimelineLegend = memo6(function TimelineLegend2({
   typeBreakdown,
   showCounts = false
 }) {
@@ -22328,7 +22332,7 @@ import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 var { ROW_HEIGHT: ROW_HEIGHT2, RULER_HEIGHT: RULER_HEIGHT2, PADDING, LABEL_WIDTH } = TIMELINE_CONSTANTS;
 var VIRTUALIZATION_THRESHOLD = 100;
 var VIRTUALIZATION_OVERSCAN = 5;
-var TraceTimeline = memo6(function TraceTimeline2({
+var TraceTimeline = memo7(function TraceTimeline2({
   spans,
   selectedSpanId,
   onSelectSpan,
@@ -22358,7 +22362,7 @@ var TraceTimeline = memo6(function TraceTimeline2({
     onWheel,
     panHandlers
   } = useTimelineZoom(timelineWidth, contentHeight);
-  const { visibleLayouts } = useMemo9(() => {
+  const { visibleLayouts } = useMemo10(() => {
     if (layouts.length < VIRTUALIZATION_THRESHOLD) {
       return {
         visibleLayouts: layouts,
@@ -22713,11 +22717,11 @@ import { Typography as Typography14, Stack as Stack11 } from "@mui/material";
 import { createContext as createContext3, useContext as useContext4 } from "react";
 
 // src/sections/traces/trace-drawer/span-info/hooks/use-span-info.ts
-import { useState as useState9, useEffect as useEffect6, useMemo as useMemo10 } from "react";
+import { useState as useState9, useEffect as useEffect6, useMemo as useMemo11 } from "react";
 var useSpanInfo = ({ span }) => {
   const [activeTab, setActiveTab] = useState9("attributes");
   const [tabs, setTabs] = useState9([]);
-  const isLLMCall = useMemo10(() => {
+  const isLLMCall = useMemo11(() => {
     return span?.data?.type === "GENERATION" || !!span?.data?.model;
   }, [span?.data?.type, span?.data?.model]);
   useEffect6(() => {
@@ -22868,7 +22872,7 @@ var SpanInfoTabs = ({ children }) => {
 import { TabPanel } from "@mui/lab";
 
 // src/sections/traces/trace-drawer/span-info/tabs/hooks/use-span-attributes.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 
 // src/sections/traces/trace-drawer/span-info/tabs/attribute-transformer-registry.ts
 var AttributeTransformerRegistry = class {
@@ -23174,7 +23178,7 @@ var transformAttributes = (attributes, normalizedData) => {
 // src/sections/traces/trace-drawer/span-info/tabs/hooks/use-span-attributes.ts
 var useSpanAttributes = () => {
   const { selectedSpan } = useTraceDrawerContext();
-  const rawAttributes = useMemo11(() => {
+  const rawAttributes = useMemo12(() => {
     if (!selectedSpan?.data?.attributes) return {};
     try {
       return JSON.parse(selectedSpan.data.attributes);
@@ -23182,7 +23186,7 @@ var useSpanAttributes = () => {
       return {};
     }
   }, [selectedSpan]);
-  const transformedAttributes = useMemo11(() => {
+  const transformedAttributes = useMemo12(() => {
     return transformAttributes(rawAttributes, selectedSpan?.data);
   }, [rawAttributes, selectedSpan?.data]);
   return {
@@ -23258,7 +23262,7 @@ var AttributesTab = () => {
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/hooks/use-span-prompts.ts
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 var extractPromptsFromSpan = (span) => {
   if (!span?.data?.input) return [];
   try {
@@ -23301,10 +23305,10 @@ var extractOutputFromSpan = (span) => {
 };
 var useSpanPrompts = () => {
   const { selectedSpan } = useTraceDrawerContext();
-  const prompts = useMemo12(() => {
+  const prompts = useMemo13(() => {
     return extractPromptsFromSpan(selectedSpan);
   }, [selectedSpan]);
-  const outputData = useMemo12(() => {
+  const outputData = useMemo13(() => {
     return extractOutputFromSpan(selectedSpan);
   }, [selectedSpan]);
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentmark-ai/ui-components",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -42,11 +42,11 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
     "@eslint/eslintrc": "^3",
-    "@storybook/addon-a11y": "^9.1.15",
-    "@storybook/addon-docs": "^9.1.15",
-    "@storybook/addon-vitest": "^9.1.15",
+    "@storybook/addon-a11y": "^9.1.17",
+    "@storybook/addon-docs": "^9.1.17",
+    "@storybook/addon-vitest": "^9.1.17",
     "@storybook/components": "^8.6.14",
-    "@storybook/react-vite": "^9.1.15",
+    "@storybook/react-vite": "^9.1.17",
     "@types/dagre": "^0",
     "@types/node": "^20",
     "@types/numeral": "^2",
@@ -57,11 +57,11 @@
     "@vitest/browser-playwright": "^4.0.4",
     "@vitest/coverage-v8": "^4.0.4",
     "eslint": "^9",
-    "eslint-config-next": "15.5.6",
-    "eslint-plugin-storybook": "^9.1.15",
+    "eslint-config-next": "15.5.9",
+    "eslint-plugin-storybook": "^9.1.17",
     "playwright": "^1.56.1",
     "refractor": "^5.0.0",
-    "storybook": "^9.1.15",
+    "storybook": "^9.1.17",
     "tsup": "^8.5.0",
     "typescript": "^5",
     "vitest": "^4.0.4"