@audashai/cli 1.0.0

package/dist/templates/context/AudashAIProvider.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudashAIProvider = void 0;
+const react_1 = require("react");
+const api_1 = require("../utils/api");
+const AudashAIContext_1 = require("./AudashAIContext");
+const AudashAIProvider = ({ config, children }) => {
+    const [chartData, setChartData] = (0, react_1.useState)(null);
+    const [descData, setDescData] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [errorInfo, setErrorInfo] = (0, react_1.useState)(null);
+    const [isRefreshing, setIsRefreshing] = (0, react_1.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) => (0, api_1.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_1.AudashAIContext.Provider value={value}>{children}</AudashAIContext_1.AudashAIContext.Provider>;
+};
+exports.AudashAIProvider = AudashAIProvider;

package/dist/templates/hooks/useAudashAI.d.ts

@@ -0,0 +1 @@
+export declare const useAudashAI: () => any;

package/dist/templates/hooks/useAudashAI.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAudashAI = void 0;
+const react_1 = require("react");
+const AudashAIContext_1 = require("../context/AudashAIContext");
+const useAudashAI = () => {
+    const context = (0, react_1.useContext)(AudashAIContext_1.AudashAIContext);
+    if (context === undefined) {
+        throw new Error('useAudashAI must be used within AudashAIProvider');
+    }
+    return context;
+};
+exports.useAudashAI = useAudashAI;

package/dist/templates/index.d.ts

@@ -0,0 +1,9 @@
+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 { ErrorDisplay } from './components/ErrorDisplay';
+export { AudashAIContext } from './context/AudashAIContext';
+export { useAudashAI } from './hooks/useAudashAI';
+export * from './types';

package/dist/templates/index.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAudashAI = exports.AudashAIContext = exports.ErrorDisplay = exports.LineChart = exports.BarChart = exports.AudashAIOutput = exports.AudashAIInput = exports.AudashAIChatbot = void 0;
+// src/index.tsx
+var AudashAIChatBot_1 = require("./components/AudashAIChatBot");
+Object.defineProperty(exports, "AudashAIChatbot", { enumerable: true, get: function () { return __importDefault(AudashAIChatBot_1).default; } });
+var AudashAIInput_1 = require("./components/AudashAIInput");
+Object.defineProperty(exports, "AudashAIInput", { enumerable: true, get: function () { return AudashAIInput_1.AudashAIInput; } });
+var AudashAIOutput_1 = require("./components/AudashAIOutput");
+Object.defineProperty(exports, "AudashAIOutput", { enumerable: true, get: function () { return AudashAIOutput_1.AudashAIOutput; } });
+var BarChart_1 = require("./components/BarChart");
+Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
+var LineChart_1 = require("./components/LineChart");
+Object.defineProperty(exports, "LineChart", { enumerable: true, get: function () { return LineChart_1.LineChart; } });
+var ErrorDisplay_1 = require("./components/ErrorDisplay");
+Object.defineProperty(exports, "ErrorDisplay", { enumerable: true, get: function () { return ErrorDisplay_1.ErrorDisplay; } });
+var AudashAIContext_1 = require("./context/AudashAIContext");
+Object.defineProperty(exports, "AudashAIContext", { enumerable: true, get: function () { return AudashAIContext_1.AudashAIContext; } });
+var useAudashAI_1 = require("./hooks/useAudashAI");
+Object.defineProperty(exports, "useAudashAI", { enumerable: true, get: function () { return useAudashAI_1.useAudashAI; } });
+__exportStar(require("./types"), exports);

package/dist/templates/types/index.d.ts

@@ -0,0 +1,39 @@
+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/dist/templates/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/templates/utils/api.d.ts

@@ -0,0 +1,3 @@
+import { AudashAIConfig } from '../types';
+export declare function fetchDataFromAPI(endpoint: string, baseUrl: string): Promise<unknown>;
+export declare function ingestSingleEndpoint(endpoint: string, config: AudashAIConfig): Promise<unknown>;

package/dist/templates/utils/api.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchDataFromAPI = fetchDataFromAPI;
+exports.ingestSingleEndpoint = ingestSingleEndpoint;
+async function fetchDataFromAPI(endpoint, baseUrl) {
+    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;
+    }
+}
+async function ingestSingleEndpoint(endpoint, config) {
+    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();
+}

package/dist/utils/config.d.ts

@@ -0,0 +1,6 @@
+interface Config {
+    componentsPath: string;
+    version: string;
+}
+export declare function getConfig(): Promise<Config | null>;
+export {};

package/dist/utils/config.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConfig = getConfig;
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+async function getConfig() {
+    const configPath = path_1.default.join(process.cwd(), 'audashai.config.json');
+    if (!(await fs_extra_1.default.pathExists(configPath))) {
+        return null;
+    }
+    return await fs_extra_1.default.readJSON(configPath);
+}

package/dist/utils/copy-files.d.ts

@@ -0,0 +1 @@
+export declare function copyTemplate(templatePath: string, targetPath: string): Promise<void>;

package/dist/utils/copy-files.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyTemplate = copyTemplate;
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+async function copyTemplate(templatePath, targetPath) {
+    // Path ke templates di root folder (bukan di src)
+    const sourcePath = path_1.default.join(__dirname, '../../templates', templatePath);
+    await fs_extra_1.default.ensureDir(path_1.default.dirname(targetPath));
+    await fs_extra_1.default.copy(sourcePath, targetPath);
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@audashai/cli",
+  "version": "1.0.0",
+  "description": "CLI tool to add AudashAI components to your React project",
+  "bin": {
+    "audashai": "./bin/audashai.js"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "templates",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "cli",
+    "audashai",
+    "react",
+    "components"
+  ],
+  "author": "AudashAI Team",
+  "license": "MIT",
+  "type": "commonjs",
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "commander": "^14.0.2",
+    "execa": "^9.6.0",
+    "fs-extra": "^11.3.2",
+    "inquirer": "^13.0.1",
+    "ora": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/inquirer": "^9.0.9",
+    "@types/node": "^24.10.1",
+    "typescript": "^5.9.3"
+  }
+}

package/templates/components/AudashAIChatBot.tsx

@@ -0,0 +1,34 @@
+import { AudashAIProvider } from '../context/AudashAIProvider';
+import { AudashAIInput } from './AudashAIInput';
+import { AudashAIOutput } from './AudashAIOutput';
+
+interface AudashAIChatbotProps {
+  apiKey: string;
+  apiUrl: string;
+  dataApiUrl?: string;
+  endpoints?: string[];
+}
+
+const AudashAIChatbot: React.FC<AudashAIChatbotProps> = ({
+  apiKey,
+  apiUrl,
+  dataApiUrl,
+  endpoints,
+}) => {
+  return (
+    <AudashAIProvider config={{ apiKey, apiUrl, dataApiUrl, endpoints }}>
+      <div className="w-full max-w-7xl mx-auto p-4">
+        <div className="flex flex-col lg:flex-row-reverse gap-4 lg:h-[300px] items-stretch">
+          <div className="w-full lg:w-[350px] flex-shrink-0">
+            <AudashAIInput />
+          </div>
+          <div className="w-full flex-1 min-w-0 overflow-hidden">
+            <AudashAIOutput />
+          </div>
+        </div>
+      </div>
+    </AudashAIProvider>
+  );
+};
+
+export default AudashAIChatbot;

package/templates/components/AudashAIInput.tsx

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import type { QueryResponse } from '../types';
+import { useAudashAI } from '../hooks/useAudashAI';
+
+export const AudashAIInput: React.FC = () => {
+  const {
+    config,
+    setChartData,
+    setDescData,
+    setLoading,
+    setErrorInfo,
+    loading,
+    refreshData,
+    isRefreshing,
+  } = useAudashAI();
+  const [inputValue, setInputValue] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = async () => {
+    const wordCount = inputValue.trim().split(/\s+/).length;
+    if (inputValue.trim() === '' || wordCount < 3) {
+      setError('Minimal 3 kata.');
+      return;
+    }
+
+    setLoading(true);
+    setChartData(null);
+    setDescData(null);
+    setErrorInfo(null);
+
+    try {
+      const response = await fetch(`${config.apiUrl}/query`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          query: inputValue,
+          api_key: config.apiKey,
+          limit: 10,
+        }),
+      });
+
+      const result: QueryResponse = await response.json();
+
+      if (result.response_type === 'visualization') {
+        setChartData(result.chart_config || null);
+        setDescData(null);
+        setErrorInfo(null);
+      } else if (result.response_type === 'description') {
+        setDescData(result.text_response || null);
+        setChartData(null);
+        setErrorInfo(null);
+      } else if (result.response_type === 'error') {
+        setChartData(null);
+        setDescData(null);
+        setErrorInfo({
+          error_type: result.processing_info?.error_type || 'unknown_error',
+          message: result.text_response || 'Terjadi kesalahan',
+          reason: result.processing_info?.message,
+          suggestion: result.processing_info?.suggestion,
+          available_data_summary: result.processing_info?.available_data_summary,
+          documents_found: result.processing_info?.documents_found || 0,
+        });
+      }
+    } catch (error: unknown) {
+      console.error('Error:', error);
+      const reason = error instanceof Error ? error.message : 'Network error';
+
+      setChartData(null);
+      setDescData(null);
+      setErrorInfo({
+        error_type: 'network_error',
+        message: 'Koneksi gagal',
+        reason,
+        suggestion: 'Coba lagi nanti',
+        documents_found: 0,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputValue(event.target.value);
+    if (error) setError('');
+  };
+
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div className="bg-white h-full w-full rounded-xl border border-slate-200 shadow-sm flex flex-col">
+      <div className="px-4 py-3 border-b border-slate-100 flex justify-between items-center bg-slate-50/50 rounded-t-xl">
+        <div className="flex items-center gap-2">
+          <div className="h-2 w-2 rounded-full bg-emerald-500"></div>
+          <h1 className="text-xs font-bold text-slate-600 uppercase tracking-wider">AI Control</h1>
+        </div>
+
+        {config.dataApiUrl && (
+          <button
+            onClick={refreshData}
+            disabled={isRefreshing}
+            className="hover:cursor-pointer text-xs text-slate-400 hover:text-indigo-600 transition-colors disabled:opacity-50"
+            title="Refresh Data Source"
+          >
+            <svg
+              className={`h-4 w-4 ${isRefreshing ? 'animate-spin text-indigo-500' : ''}`}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M4 4v5h.058M20 20v-5h-.058M4.05 9a9 9 0 0115.66-4.5M19.95 15a9 9 0 01-15.66 4.5"
+              />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      <div className="p-4 flex flex-col flex-1 gap-3">
+        <div
+          className={`relative flex-1 rounded-xl border transition-all duration-200 flex flex-col ${
+            error
+              ? 'border-red-300 bg-red-50/30'
+              : 'border-slate-200 bg-slate-50/30 focus-within:bg-white focus-within:ring-2 focus-within:ring-indigo-100 focus-within:border-indigo-400'
+          }`}
+        >
+          <textarea
+            value={inputValue}
+            onChange={handleInputChange}
+            onKeyPress={handleKeyPress}
+            className="w-full h-full bg-transparent px-4 py-3 text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none resize-none"
+            placeholder="Ketik perintah analisis..."
+          />
+        </div>
+
+        {error && <p className="text-xs text-red-500 font-medium px-1">{error}</p>}
+
+        <button
+          onClick={handleSubmit}
+          disabled={loading || !inputValue.trim()}
+          className="w-full flex justify-center items-center gap-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-300 text-white px-4 py-2.5 rounded-lg text-sm font-medium transition-all shadow-sm"
+        >
+          {loading ? (
+            <span className="flex items-center gap-2">
+              <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                  fill="none"
+                ></circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+              </svg>
+              Processing
+            </span>
+          ) : (
+            'Analisis Data'
+          )}
+        </button>
+
+        <p className="text-center text-[10px] text-slate-400">AudashAI Analyst v1.0</p>
+      </div>
+    </div>
+  );
+};

package/templates/components/AudashAIOutput.tsx

@@ -0,0 +1,90 @@
+import { useAudashAI } from '../hooks/useAudashAI';
+import { BarChart } from './BarChart';
+import { ErrorDisplay } from './ErrorDisplay';
+import { LineChart } from './LineChart';
+
+export const AudashAIOutput: React.FC = () => {
+  const { chartData, descData, loading, errorInfo } = useAudashAI();
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <div className="w-full h-full flex flex-col justify-center items-center p-8 space-y-6">
+          <div className="w-full h-48 bg-slate-100 rounded-lg animate-pulse relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent -translate-x-full animate-[shimmer_1.5s_infinite]"></div>
+          </div>
+          <div className="w-full space-y-2">
+            <div className="h-3 bg-slate-100 rounded w-1/2 animate-pulse"></div>
+            <div className="h-3 bg-slate-100 rounded w-1/3 animate-pulse"></div>
+          </div>
+        </div>
+      );
+    }
+
+    if (errorInfo) {
+      return (
+        <div className="p-4 h-full flex flex-col justify-center">
+          <ErrorDisplay errorInfo={errorInfo} />
+        </div>
+      );
+    }
+
+    if (descData) {
+      return (
+        <div className="w-full h-full overflow-y-auto p-6 scrollbar-thin scrollbar-thumb-slate-200">
+          <div className="prose prose-sm max-w-none">
+            <h3 className="text-slate-800 font-semibold mb-3 flex items-center gap-2">
+              <span className="bg-indigo-100 p-1 rounded">✨</span> Hasil Analisis
+            </h3>
+            <p className="text-slate-600 leading-relaxed whitespace-pre-wrap">{descData}</p>
+          </div>
+        </div>
+      );
+    }
+
+    if (chartData) {
+      return (
+        <div className="w-full h-full flex flex-col p-4 animate-in zoom-in-95 duration-300">
+          <div className="flex-1 relative min-h-[300px]">
+            {chartData.visualization_type === 'bar' && (
+              <BarChart labels={chartData.labels} datasets={chartData.datasets} />
+            )}
+            {chartData.visualization_type === 'line' && (
+              <LineChart labels={chartData.labels} datasets={chartData.datasets} />
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="h-full flex flex-col items-center justify-center text-center p-8 bg-slate-50/30">
+        <div className="w-16 h-16 bg-white rounded-full shadow-sm border border-slate-100 flex items-center justify-center mb-4">
+          <svg
+            className="h-8 w-8 text-slate-300"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1}
+              d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+            />
+          </svg>
+        </div>
+        <h3 className="text-sm font-semibold text-slate-700">Area Visualisasi</h3>
+        <p className="text-xs text-slate-400 mt-1 max-w-[200px]">
+          Grafik akan muncul di sini setelah Anda mengirimkan perintah.
+        </p>
+      </div>
+    );
+  };
+
+  return (
+    <div className="bg-white h-full w-full rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
+      {renderContent()}
+    </div>
+  );
+};