@erdoai/ui 0.1.5

package/README.md

@@ -0,0 +1,300 @@
+# @erdoai/ui
+
+React components for rendering Erdo AI agent results, including charts, tables, and content renderers.
+
+## Installation
+
+```bash
+npm install @erdoai/ui
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom @tanstack/react-query
+```
+
+## Quick Start
+
+### 1. Set up the Provider
+
+```tsx
+import { ErdoProvider } from '@erdoai/ui';
+import { ErdoClient } from '@erdoai/server';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
+const erdoClient = new ErdoClient({
+  endpoint: 'https://api.erdo.ai',
+  authToken: process.env.ERDO_API_KEY,
+});
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ErdoProvider
+        config={{
+          baseUrl: 'https://api.erdo.ai',
+          client: erdoClient,
+        }}
+      >
+        <YourApp />
+      </ErdoProvider>
+    </QueryClientProvider>
+  );
+}
+```
+
+### 2. Invoke Agents and Render Results
+
+```tsx
+import { useInvocation, Content } from '@erdoai/ui';
+
+function ChatInterface() {
+  const { result, isStreaming, invoke } = useInvocation();
+
+  const handleSubmit = async (query: string) => {
+    await invoke('data-analyst', { query });
+  };
+
+  return (
+    <div>
+      <form onSubmit={(e) => {
+        e.preventDefault();
+        handleSubmit(e.target.query.value);
+      }}>
+        <input name="query" placeholder="Ask a question..." />
+        <button type="submit" disabled={isStreaming}>
+          {isStreaming ? 'Analyzing...' : 'Send'}
+        </button>
+      </form>
+
+      {result?.contents.map((content) => (
+        <Content key={content.id} item={content} />
+      ))}
+    </div>
+  );
+}
+```
+
+## Components
+
+### Content Router
+
+Automatically renders the appropriate component based on content type:
+
+```tsx
+import { Content } from '@erdoai/ui';
+
+<Content item={contentItem} />
+```
+
+### Individual Renderers
+
+```tsx
+import {
+  TextContent,
+  JsonContent,
+  MarkdownContent,
+  TableContent,
+  ChartContent,
+} from '@erdoai/ui';
+
+<TextContent content="Plain text content" />
+
+<JsonContent content={{ key: 'value', nested: { data: true } }} />
+
+<MarkdownContent text="# Heading\n\nParagraph with **bold** text." />
+
+<TableContent
+  columns={[
+    { column_name: 'Name', key: 'name' },
+    { column_name: 'Value', key: 'value', value_type: 'number' },
+  ]}
+  data={[
+    { name: 'Item 1', value: 100 },
+    { name: 'Item 2', value: 200 },
+  ]}
+/>
+
+<ChartContent
+  config={{
+    chart_type: 'bar',
+    chart_title: 'Sales by Region',
+    x_axis: { axis_label: 'Region', key: 'region' },
+    y_axes: [{ axis_label: 'Revenue', key: 'revenue' }],
+    series: [{ series_name: 'Revenue', key: 'revenue', color: '#3b82f6' }],
+  }}
+  data={chartData}
+/>
+```
+
+### Charts
+
+Standalone chart components that accept data as props:
+
+```tsx
+import { BarChart, LineChart, PieChart, ScatterChart, HeatmapChart } from '@erdoai/ui';
+
+<BarChart
+  title="Monthly Sales"
+  data={[
+    { month: 'Jan', revenue: 1000 },
+    { month: 'Feb', revenue: 1500 },
+    { month: 'Mar', revenue: 1200 },
+  ]}
+  displayConfig={{
+    month: { label: 'Month' },
+    revenue: { label: 'Revenue', color: '#3b82f6' },
+  }}
+  dataConfig={{
+    xAxis: { key: 'month', label: 'Month' },
+    yAxes: [{ key: 'revenue', label: 'Revenue' }],
+    series: [{ key: 'revenue', name: 'Revenue', color: '#3b82f6' }],
+  }}
+/>
+```
+
+### DatasetChart
+
+Fetches data automatically using the provider:
+
+```tsx
+import { DatasetChart } from '@erdoai/ui';
+
+<DatasetChart
+  chartType="bar"
+  title="Sales by Region"
+  invocationId="inv-123"
+  datasetSlugs={['sales-data']}
+  xAxis={{ key: 'region', label: 'Region' }}
+  yAxes={[{ key: 'revenue', label: 'Revenue' }]}
+  series={[
+    { key: 'revenue', name: 'Revenue', color: '#3b82f6', datasetSlug: 'sales-data' },
+  ]}
+  dataReduction={{ strategy: 'sample', target_points: 1000 }}
+  stacked={false}
+/>
+```
+
+## Hooks
+
+### useInvocation
+
+Invoke agents with streaming support:
+
+```tsx
+const {
+  result,       // Current result state
+  isStreaming,  // Whether streaming is in progress
+  error,        // Any error that occurred
+  invoke,       // Function to start invocation
+} = useInvocation({
+  onEvent: (event) => console.log('Event:', event),
+  onFinish: (result) => console.log('Complete:', result),
+  onError: (error) => console.error('Error:', error),
+});
+
+// Invoke an agent
+await invoke('data-analyst', {
+  query: 'Analyze our sales data',
+  threadId: 'thread-123',
+});
+```
+
+### useDatasetContents
+
+Fetch dataset contents:
+
+```tsx
+const { data, isLoading, error } = useDatasetContents('dataset-slug', 'invocation-id');
+```
+
+### useMultipleDatasetContents
+
+Fetch multiple datasets in parallel:
+
+```tsx
+const results = useMultipleDatasetContents(
+  ['dataset-1', 'dataset-2'],
+  'invocation-id'
+);
+
+const isLoading = results.some((r) => r.isLoading);
+const allData = results.map((r) => r.data || []);
+```
+
+### useChartZoom
+
+Manage chart zoom state:
+
+```tsx
+const { zoomDomain, setZoomDomain, resetZoom } = useChartZoom();
+```
+
+## Provider Configuration
+
+### Standard Configuration (REST API)
+
+```tsx
+<ErdoProvider
+  config={{
+    baseUrl: 'https://api.erdo.ai',
+    authToken: 'your-api-key',
+  }}
+>
+```
+
+### With ErdoClient
+
+```tsx
+import { ErdoClient } from '@erdoai/server';
+
+const client = new ErdoClient({ authToken: 'your-api-key' });
+
+<ErdoProvider
+  config={{
+    baseUrl: 'https://api.erdo.ai',
+    client,
+  }}
+>
+```
+
+### Custom Data Fetcher
+
+For custom backends or authentication:
+
+```tsx
+const customFetcher = {
+  fetchDatasetContents: async (slug, invocationId) => {
+    const response = await myCustomClient.getDataset(slug, invocationId);
+    return response.data;
+  },
+};
+
+<ErdoProvider
+  config={{
+    baseUrl: 'https://api.erdo.ai',
+    dataFetcher: customFetcher,
+  }}
+>
+```
+
+## Styling
+
+Components use Tailwind CSS classes. Make sure Tailwind is configured in your project and includes the @erdoai/ui package in your content paths:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@erdoai/ui/dist/**/*.js',
+  ],
+  // ...
+};
+```
+
+## License
+
+MIT