@audashai/cli 1.0.0

package/templates/components/BarChart.tsx

@@ -0,0 +1,113 @@
+import type { ChartProps } from '../types';
+import { Bar } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+  type ChartOptions,
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+);
+
+export const BarChart: React.FC<ChartProps> = ({ labels, datasets }) => {
+  const options: ChartOptions<'bar'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: 'top',
+        align: 'end',
+        labels: {
+          boxWidth: 10,
+          usePointStyle: true,
+          pointStyle: 'circle',
+          font: { family: "'Inter', sans-serif", size: 11 },
+          color: '#64748b',
+        },
+      },
+      title: {
+        display: false,
+      },
+      tooltip: {
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        titleColor: '#0f172a',
+        bodyColor: '#334155',
+        borderColor: '#e2e8f0',
+        borderWidth: 1,
+        padding: 10,
+        displayColors: true,
+        boxPadding: 4,
+        cornerRadius: 8,
+        titleFont: { family: "'Inter', sans-serif", weight: 'bold' },
+        bodyFont: { family: "'Inter', sans-serif" },
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          display: false,
+        },
+        ticks: {
+          color: '#94a3b8',
+          font: { family: "'Inter', sans-serif", size: 11 },
+        },
+      },
+      y: {
+        beginAtZero: true,
+        border: { dash: [4, 4] },
+        grid: {
+          color: '#f1f5f9',
+        },
+        ticks: {
+          padding: 10,
+          color: '#94a3b8',
+          font: { family: "'Inter', sans-serif", size: 11 },
+        },
+      },
+    },
+    layout: {
+      padding: 10,
+    },
+  };
+
+  const barData = {
+    labels: labels,
+    datasets: datasets.map((dataset, index) => ({
+      label: dataset.label,
+      data: dataset.data,
+      backgroundColor: index === 0 ? '#6366f1' : '#a5b4fc',
+      hoverBackgroundColor: '#4f46e5',
+      borderRadius: 4,
+      barPercentage: 0.6,
+      categoryPercentage: 0.8,
+    })),
+  };
+
+  return (
+    <div className="w-full h-full relative">
+      <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wide mb-2 absolute top-0 left-0">
+        Data Visualization
+      </h3>
+      <div className="pt-6 h-full w-full">
+        <Bar options={options} data={barData} />
+      </div>
+    </div>
+  );
+};

package/templates/components/ErrorDisplay.tsx

@@ -0,0 +1,87 @@
+import type { ErrorInfo } from '../types';
+
+export const ErrorDisplay: React.FC<{ errorInfo: ErrorInfo }> = ({ errorInfo }) => {
+  const isWarning =
+    errorInfo.error_type === 'data_not_found' || errorInfo.error_type === 'data_not_available';
+
+  return (
+    <div
+      className={`
+        w-full max-w-lg p-5 rounded-xl border flex gap-4
+        ${isWarning ? 'bg-amber-50/50 border-amber-200' : 'bg-red-50/50 border-red-200'}
+    `}
+    >
+      <div className="flex-shrink-0 pt-1">
+        {isWarning ? (
+          <svg
+            className="w-6 h-6 text-amber-600"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+            />
+          </svg>
+        ) : (
+          <svg
+            className="w-6 h-6 text-red-600"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        )}
+      </div>
+
+      <div className="flex-1 space-y-2">
+        <h3 className={`font-semibold text-sm ${isWarning ? 'text-amber-800' : 'text-red-800'}`}>
+          {errorInfo.message}
+        </h3>
+
+        {errorInfo.reason && (
+          <p className={`text-xs ${isWarning ? 'text-amber-700' : 'text-red-700'}`}>
+            {errorInfo.reason}
+          </p>
+        )}
+
+        {(errorInfo.suggestion || errorInfo.available_data_summary) && (
+          <div
+            className={`mt-3 pt-3 border-t ${
+              isWarning ? 'border-amber-200/50' : 'border-red-200/50'
+            }`}
+          >
+            {errorInfo.suggestion && (
+              <div className="text-xs space-y-1 mb-2">
+                <span className="font-semibold opacity-75 uppercase tracking-wider text-[10px]">
+                  Saran:
+                </span>
+                <p className="opacity-90">{errorInfo.suggestion}</p>
+              </div>
+            )}
+
+            {errorInfo.available_data_summary && (
+              <div className="text-xs space-y-1">
+                <span className="font-semibold opacity-75 uppercase tracking-wider text-[10px]">
+                  Data Tersedia:
+                </span>
+                <p className="opacity-90 font-mono text-[11px] bg-white/50 p-1.5 rounded">
+                  {errorInfo.available_data_summary}
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/templates/components/LineChart.tsx

@@ -0,0 +1,105 @@
+import type { ChartProps } from '../types';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+  type ChartOptions,
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+);
+
+export const LineChart: React.FC<ChartProps> = ({ labels, datasets }) => {
+  const options: ChartOptions<'line'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: {
+      mode: 'index',
+      intersect: false,
+    },
+    plugins: {
+      legend: {
+        position: 'top',
+        align: 'end',
+        labels: {
+          boxWidth: 10,
+          usePointStyle: true,
+          pointStyle: 'circle',
+          font: { family: "'Inter', sans-serif", size: 11 },
+          color: '#64748b',
+        },
+      },
+      title: { display: false },
+      tooltip: {
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        titleColor: '#0f172a',
+        bodyColor: '#334155',
+        borderColor: '#e2e8f0',
+        borderWidth: 1,
+        padding: 10,
+        cornerRadius: 8,
+      },
+    },
+    scales: {
+      x: {
+        grid: { display: false },
+        ticks: { color: '#94a3b8', font: { size: 11 } },
+      },
+      y: {
+        beginAtZero: true,
+        grid: { color: '#f1f5f9' },
+        ticks: { padding: 10, color: '#94a3b8', font: { size: 11 } },
+      },
+    },
+  };
+
+  const lineData = {
+    labels: labels,
+    datasets: datasets.map((dataset) => ({
+      label: dataset.label,
+      data: dataset.data,
+      borderColor: '#0ea5e9',
+      backgroundColor: (context: { chart: { ctx: CanvasRenderingContext2D } }) => {
+        const ctx = context.chart.ctx;
+        const gradient = ctx.createLinearGradient(0, 0, 0, 300);
+        gradient.addColorStop(0, 'rgba(14, 165, 233, 0.2)');
+        gradient.addColorStop(1, 'rgba(14, 165, 233, 0)');
+        return gradient;
+      },
+      borderWidth: 2,
+      pointBackgroundColor: '#fff',
+      pointBorderColor: '#0ea5e9',
+      pointBorderWidth: 2,
+      pointRadius: 3,
+      pointHoverRadius: 5,
+      fill: true,
+      tension: 0.4,
+    })),
+  };
+
+  return (
+    <div className="w-full h-full relative">
+      <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wide mb-2 absolute top-0 left-0">
+        Data Visualization
+      </h3>
+      <div className="pt-6 h-full w-full">
+        <Line options={options} data={lineData} />
+      </div>
+    </div>
+  );
+};

package/templates/context/AudashAIContext.tsx

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+import type { AudashAIConfig, ChartData, ErrorInfo } from '../types';
+
+interface AudashAIContextType {
+  config: AudashAIConfig;
+  chartData: ChartData | null;
+  setChartData: (data: ChartData | null) => void;
+  descData: string | null;
+  setDescData: (data: string | null) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  errorInfo: ErrorInfo | null;
+  setErrorInfo: (error: ErrorInfo | null) => void;
+  refreshData: () => Promise<void>;
+  isRefreshing: boolean;
+}
+
+export const AudashAIContext = createContext<AudashAIContextType | undefined>(undefined);

package/templates/context/AudashAIProvider.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import type { AudashAIConfig, ChartData, ErrorInfo } from '../types';
+import { ingestSingleEndpoint } from '../utils/api';
+import { AudashAIContext } from './AudashAIContext';
+
+interface AudashAIProviderProps {
+  config: AudashAIConfig;
+  children: React.ReactNode;
+}
+
+export const AudashAIProvider: React.FC<AudashAIProviderProps> = ({ config, children }) => {
+  const [chartData, setChartData] = useState<ChartData | null>(null);
+  const [descData, setDescData] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [errorInfo, setErrorInfo] = useState<ErrorInfo | null>(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const refreshData = async () => {
+    if (!config.dataApiUrl || !config.endpoints || config.endpoints.length === 0) {
+      console.warn('Data API URL or endpoints not configured');
+      return;
+    }
+
+    setIsRefreshing(true);
+    try {
+      const results = await Promise.allSettled(
+        config.endpoints.map((endpoint) => ingestSingleEndpoint(endpoint, config))
+      );
+
+      const successful = results.filter((r) => r.status === 'fulfilled').length;
+      const failed = results.filter((r) => r.status === 'rejected').length;
+
+      console.log(`✅ Data refresh completed: ${successful} success, ${failed} failed`);
+
+      if (failed > 0) {
+        console.warn('Some endpoints failed to ingest');
+      }
+    } catch (error) {
+      console.error('Error during data refresh:', error);
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const value = {
+    config,
+    chartData,
+    setChartData,
+    descData,
+    setDescData,
+    loading,
+    setLoading,
+    errorInfo,
+    setErrorInfo,
+    refreshData,
+    isRefreshing,
+  };
+
+  return <AudashAIContext.Provider value={value}>{children}</AudashAIContext.Provider>;
+};

package/templates/hooks/useAudashAI.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { AudashAIContext } from '../context/AudashAIContext';
+
+export const useAudashAI = () => {
+  const context = useContext(AudashAIContext);
+  if (context === undefined) {
+    throw new Error('useAudashAI must be used within AudashAIProvider');
+  }
+  return context;
+};

package/templates/index.tsx

@@ -0,0 +1,12 @@
+// src/index.tsx
+export { default as AudashAIChatbot } from './components/AudashAIChatBot';
+export { AudashAIInput } from './components/AudashAIInput';
+export { AudashAIOutput } from './components/AudashAIOutput';
+export { BarChart } from './components/BarChart';
+export { LineChart } from './components/LineChart';
+export { PieChart } from './components/PieChart';
+export { DoughnutChart } from './components/DoughnutChart';
+export { ErrorDisplay } from './components/ErrorDisplay';
+export { AudashAIContext } from './context/AudashAIContext';
+export { useAudashAI } from './hooks/useAudashAI';
+export * from './types';

package/templates/types/index.ts

@@ -0,0 +1,44 @@
+export interface ChartDataset {
+  label: string;
+  data: number[];
+}
+
+export interface ChartData {
+  visualization_type: 'bar' | 'line';
+  labels: string[];
+  datasets: ChartDataset[];
+}
+
+export interface ErrorInfo {
+  error_type: string;
+  message: string;
+  reason?: string;
+  suggestion?: string;
+  available_data_summary?: string;
+  documents_found: number;
+}
+
+export interface QueryResponse {
+  response_type: 'visualization' | 'description' | 'error';
+  chart_config?: ChartData;
+  text_response?: string;
+  processing_info?: {
+    error_type?: string;
+    message?: string;
+    suggestion?: string;
+    available_data_summary?: string;
+    documents_found?: number;
+  };
+}
+
+export interface AudashAIConfig {
+  apiKey: string;
+  apiUrl: string;
+  dataApiUrl?: string;
+  endpoints?: string[];
+}
+
+export interface ChartProps {
+  labels: string[];
+  datasets: ChartDataset[];
+}

package/templates/utils/api.ts

@@ -0,0 +1,57 @@
+import type { AudashAIConfig } from '../types';
+
+export async function fetchDataFromAPI(endpoint: string, baseUrl: string) {
+  try {
+    const response = await fetch(`${baseUrl}/${endpoint}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error('Error fetching data from API:', error);
+    throw error;
+  }
+}
+
+export async function ingestSingleEndpoint(endpoint: string, config: AudashAIConfig) {
+  if (!config.dataApiUrl) {
+    throw new Error('Data API URL not configured');
+  }
+
+  let data;
+  try {
+    data = await fetchDataFromAPI(endpoint, config.dataApiUrl);
+  } catch (error) {
+    console.error(`❌ Failed to fetch data from ${endpoint}:`, error);
+    throw new Error(`Failed to fetch data from ${endpoint}`);
+  }
+
+  const response = await fetch(`${config.apiUrl}/ingest`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      data: data.data || data,
+      source_name: endpoint,
+      api_key: config.apiKey,
+      metadata: { description: `${endpoint} data from API` },
+    }),
+  });
+
+  if (!response.ok) {
+    const errorBody = await response.text();
+    throw new Error(
+      `HTTP error! Status: ${response.status}, Endpoint: ${endpoint}, Body: ${errorBody}`
+    );
+  }
+
+  return await response.json();
+}