@audashai/cli 1.0.0

package/README.md

@@ -0,0 +1,57 @@
+# @audashai/cli
+
+CLI tool to add AudashAI components to your React project.
+
+## Installation
+
+```bash
+npm install -g @audashai/cli
+```
+
+## Usage
+
+### Initialize AudashAI in your project
+
+```bash
+audashai init
+```
+
+### Add components
+
+```bash
+audashai add chatbot
+```
+
+## Available Components
+
+- `chatbot` - AI-powered chatbot with data visualization
+
+## Configuration
+
+After running `audashai init`, a `audashai.config.json` file will be created:
+
+```json
+{
+  "componentsPath": "src/components/audashai",
+  "version": "1.0.0"
+}
+```
+
+## Example
+
+```tsx
+import { AudashAIChatbot } from './components/audashai/components/AudashAIChatBot';
+
+function App() {
+  return (
+    <AudashAIChatbot
+      apiKey={import.meta.env.VITE_SECRET_KEY_AUDASHAI}
+      apiUrl={import.meta.env.VITE_API_AI_AUDASHAI}
+    />
+  );
+}
+```
+
+## License
+
+MIT

package/bin/audashai.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/index.js');

package/dist/commands/add.d.ts

@@ -0,0 +1 @@
+export declare function addCommand(component: string): Promise<void>;

package/dist/commands/add.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addCommand = addCommand;
+const chalk_1 = __importDefault(require("chalk"));
+const ora_1 = __importDefault(require("ora"));
+const path_1 = __importDefault(require("path"));
+const copy_files_1 = require("../utils/copy-files");
+const config_1 = require("../utils/config");
+const COMPONENTS = {
+    chatbot: {
+        name: 'AudashAI Chatbot',
+        files: [
+            'components/AudashAIChatBot.tsx',
+            'components/AudashAIInput.tsx',
+            'components/AudashAIOutput.tsx',
+            'components/BarChart.tsx',
+            'components/LineChart.tsx',
+            'components/ErrorDisplay.tsx',
+            'context/AudashAIContext.tsx',
+            'context/AudashAIProvider.tsx',
+            'hooks/useAudashAI.ts',
+            'types/index.ts',
+            'utils/api.ts',
+        ],
+    },
+};
+async function addCommand(component) {
+    console.log(chalk_1.default.blue.bold(`\n📦 Adding ${component}...\n`));
+    if (!COMPONENTS[component]) {
+        console.error(chalk_1.default.red(`❌ Component "${component}" not found`));
+        console.log(chalk_1.default.cyan('\nAvailable components:'));
+        Object.keys(COMPONENTS).forEach((key) => {
+            console.log(chalk_1.default.white(`  - ${key}`));
+        });
+        process.exit(1);
+    }
+    const config = await (0, config_1.getConfig)();
+    if (!config) {
+        console.error(chalk_1.default.red('❌ Config not found. Run "audashai init" first'));
+        process.exit(1);
+    }
+    const spinner = (0, ora_1.default)('Copying files...').start();
+    try {
+        const componentConfig = COMPONENTS[component];
+        const targetDir = path_1.default.join(process.cwd(), config.componentsPath);
+        for (const file of componentConfig.files) {
+            await (0, copy_files_1.copyTemplate)(file, path_1.default.join(targetDir, file));
+        }
+        spinner.succeed('Files copied successfully');
+        console.log(chalk_1.default.green.bold('\n✅ Component added successfully!\n'));
+        console.log(chalk_1.default.cyan('Usage example:'));
+        console.log(chalk_1.default.white(`
+import { AudashAIChatbot } from './${config.componentsPath}/components/AudashAIChatBot';
+
+function App() {
+  return (
+    <AudashAIChatbot
+      apiKey={import.meta.env.VITE_SECRET_KEY_AUDASHAI}
+      apiUrl={import.meta.env.VITE_API_AI_AUDASHAI}
+    />
+  );
+}
+    `));
+    }
+    catch (error) {
+        spinner.fail('Failed to add component');
+        console.error(chalk_1.default.red(error));
+        process.exit(1);
+    }
+}

package/dist/commands/init.d.ts

@@ -0,0 +1 @@
+export declare function initCommand(): Promise<void>;

package/dist/commands/init.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initCommand = initCommand;
+const inquirer_1 = __importDefault(require("inquirer"));
+const chalk_1 = __importDefault(require("chalk"));
+const ora_1 = __importDefault(require("ora"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+const execa_1 = require("execa");
+async function initCommand() {
+    console.log(chalk_1.default.blue.bold('\n🚀 Initialize AudashAI in your project\n'));
+    const answers = await inquirer_1.default.prompt([
+        {
+            type: 'input',
+            name: 'componentsPath',
+            message: 'Where would you like to install components?',
+            default: 'src/components/audashai',
+        },
+        {
+            type: 'confirm',
+            name: 'installDeps',
+            message: 'Install dependencies (chart.js, react-chartjs-2)?',
+            default: true,
+        },
+    ]);
+    const spinner = (0, ora_1.default)('Setting up AudashAI...').start();
+    try {
+        // Create directories
+        const componentsDir = path_1.default.join(process.cwd(), answers.componentsPath);
+        await fs_extra_1.default.ensureDir(componentsDir);
+        await fs_extra_1.default.ensureDir(path_1.default.join(componentsDir, 'context'));
+        await fs_extra_1.default.ensureDir(path_1.default.join(componentsDir, 'hooks'));
+        await fs_extra_1.default.ensureDir(path_1.default.join(componentsDir, 'types'));
+        await fs_extra_1.default.ensureDir(path_1.default.join(componentsDir, 'utils'));
+        // Create config file
+        const config = {
+            componentsPath: answers.componentsPath,
+            version: '1.0.0',
+        };
+        await fs_extra_1.default.writeJSON(path_1.default.join(process.cwd(), 'audashai.config.json'), config, { spaces: 2 });
+        spinner.succeed('Created directory structure');
+        // Install dependencies
+        if (answers.installDeps) {
+            spinner.start('Installing dependencies...');
+            await (0, execa_1.execa)('npm', ['install', 'chart.js', 'react-chartjs-2']);
+            spinner.succeed('Dependencies installed');
+        }
+        console.log(chalk_1.default.green.bold('\n✅ AudashAI initialized successfully!\n'));
+        console.log(chalk_1.default.cyan('Next steps:'));
+        console.log(chalk_1.default.white('  1. Run: ') + chalk_1.default.yellow('audashai add chatbot'));
+        console.log(chalk_1.default.white('  2. Import in your app'));
+        console.log(chalk_1.default.white('  3. Configure your API keys\n'));
+    }
+    catch (error) {
+        spinner.fail('Failed to initialize');
+        console.error(chalk_1.default.red(error));
+        process.exit(1);
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const init_1 = require("./commands/init");
+const add_1 = require("./commands/add");
+const program = new commander_1.Command();
+program
+    .name('audashai')
+    .description('CLI to add AudashAI components to your project')
+    .version('1.0.0');
+program.command('init').description('Initialize AudashAI in your project').action(init_1.initCommand);
+program
+    .command('add <component>')
+    .description('Add a component to your project')
+    .action(add_1.addCommand);
+program.parse();

package/dist/templates/components/AudashAIChatBot.d.ts

@@ -0,0 +1,8 @@
+interface AudashAIChatbotProps {
+    apiKey: string;
+    apiUrl: string;
+    dataApiUrl?: string;
+    endpoints?: string[];
+}
+declare const AudashAIChatbot: React.FC<AudashAIChatbotProps>;
+export default AudashAIChatbot;

package/dist/templates/components/AudashAIChatBot.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const AudashAIProvider_1 = require("../context/AudashAIProvider");
+const AudashAIInput_1 = require("./AudashAIInput");
+const AudashAIOutput_1 = require("./AudashAIOutput");
+const AudashAIChatbot = ({ apiKey, apiUrl, dataApiUrl, endpoints, }) => {
+    return (<AudashAIProvider_1.AudashAIProvider config={{ apiKey, apiUrl, dataApiUrl, endpoints }}>
+      <div className="space-y-6 max-w-6xl mx-auto">
+        <AudashAIInput_1.AudashAIInput />
+        <AudashAIOutput_1.AudashAIOutput />
+      </div>
+    </AudashAIProvider_1.AudashAIProvider>);
+};
+exports.default = AudashAIChatbot;

package/dist/templates/components/AudashAIInput.d.ts

@@ -0,0 +1 @@
+export declare const AudashAIInput: React.FC;

package/dist/templates/components/AudashAIInput.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudashAIInput = void 0;
+const react_1 = require("react");
+const useAudashAI_1 = require("../hooks/useAudashAI");
+const AudashAIInput = () => {
+    const { config, setChartData, setDescData, setLoading, setErrorInfo, loading, refreshData, isRefreshing, } = (0, useAudashAI_1.useAudashAI)();
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)('');
+    const handleSubmit = async () => {
+        const wordCount = inputValue.trim().split(/\s+/).length;
+        if (inputValue.trim() === '' || wordCount < 3) {
+            setError('Pesan harus terdiri dari 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 = 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 yang tidak diketahui',
+                    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) {
+            console.error('An error occurred:', error);
+            const reason = error instanceof Error
+                ? error.message
+                : typeof error === 'string'
+                    ? error
+                    : 'Network error occurred';
+            setChartData(null);
+            setDescData(null);
+            setErrorInfo({
+                error_type: 'network_error',
+                message: 'Terjadi kesalahan koneksi ke server',
+                reason,
+                suggestion: 'Silakan coba lagi dalam beberapa saat',
+                documents_found: 0,
+            });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleInputChange = (event) => {
+        setInputValue(event.target.value);
+        if (error) {
+            setError('');
+        }
+    };
+    const handleKeyPress = (event) => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            handleSubmit();
+        }
+    };
+    return (<div className="bg-white w-full rounded-2xl shadow-lg p-6">
+      <div className="flex justify-between items-center mb-4">
+        <h1 className="text-2xl font-bold">AudashAI Chatbot</h1>
+        {config.dataApiUrl && config.endpoints && config.endpoints.length > 0 && (<button onClick={refreshData} disabled={isRefreshing} className="border border-blue-400 px-5 py-3 text-blue-500 rounded-2xl hover:bg-blue-50 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
+            {isRefreshing ? (<span className="flex items-center gap-2">
+                <svg className="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></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>
+                Refreshing...
+              </span>) : ('Refresh Data')}
+          </button>)}
+      </div>
+
+      <div className="flex flex-col">
+        <div className="flex gap-2">
+          <textarea rows={3} value={inputValue} onChange={handleInputChange} onKeyPress={handleKeyPress} className={`flex-grow border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 ${error ? 'border-red-500 focus:ring-red-400' : 'border-gray-300 focus:ring-blue-400'}`} placeholder="Berikan perintah dengan spesifik..."/>
+          <button onClick={handleSubmit} className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 disabled:bg-gray-400 cursor-pointer transition-colors duration-200" disabled={loading || !inputValue.trim()}>
+            {loading ? 'Loading...' : 'Kirim'}
+          </button>
+        </div>
+        {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
+      </div>
+    </div>);
+};
+exports.AudashAIInput = AudashAIInput;

package/dist/templates/components/AudashAIOutput.d.ts

@@ -0,0 +1 @@
+export declare const AudashAIOutput: React.FC;

package/dist/templates/components/AudashAIOutput.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudashAIOutput = void 0;
+const useAudashAI_1 = require("../hooks/useAudashAI");
+const BarChart_1 = require("./BarChart");
+const ErrorDisplay_1 = require("./ErrorDisplay");
+const LineChart_1 = require("./LineChart");
+const AudashAIOutput = () => {
+    const { chartData, descData, loading, errorInfo } = (0, useAudashAI_1.useAudashAI)();
+    const renderContent = () => {
+        if (loading) {
+            return (<div className="w-full space-y-4">
+          <div className="animate-pulse rounded-md h-64 w-full bg-gray-200"></div>
+          <div className="animate-pulse rounded-md h-8 w-3/4 bg-gray-200"></div>
+          <div className="animate-pulse rounded-md h-8 w-1/2 bg-gray-200"></div>
+        </div>);
+        }
+        if (errorInfo) {
+            return <ErrorDisplay_1.ErrorDisplay errorInfo={errorInfo}/>;
+        }
+        if (descData) {
+            return (<div className="w-full">
+          <div className="p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-200">
+            <div className="flex items-start gap-3">
+              <div className="flex-shrink-0 mt-1">
+                <svg className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                </svg>
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-gray-800 mb-2">Hasil Analisis</h3>
+                <p className="text-slate-700 text-base leading-relaxed whitespace-pre-wrap">
+                  {descData}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>);
+        }
+        if (chartData) {
+            return (<div className="w-full">
+          {chartData.visualization_type === 'bar' && (<BarChart_1.BarChart labels={chartData.labels} datasets={chartData.datasets}/>)}
+          {chartData.visualization_type === 'line' && (<LineChart_1.LineChart labels={chartData.labels} datasets={chartData.datasets}/>)}
+        </div>);
+        }
+        return (<div className="text-center text-gray-500 py-16">
+        <div className="mb-4">
+          <svg className="mx-auto h-16 w-16 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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-lg font-medium text-gray-900 mb-2">Belum Ada Data</h3>
+        <p className="text-sm text-gray-600 max-w-sm mx-auto">
+          Kirim query untuk melihat visualisasi atau deskripsi.
+          <br />
+          Mulai dengan <span className="font-semibold">"Tampilkan"</span> untuk visualisasi.
+        </p>
+      </div>);
+    };
+    return (<div className="bg-white min-h-[400px] rounded-2xl shadow-lg">
+      <div className="flex justify-center items-center h-full">
+        <div className="flex w-full items-center justify-center p-8">{renderContent()}</div>
+      </div>
+    </div>);
+};
+exports.AudashAIOutput = AudashAIOutput;

package/dist/templates/components/BarChart.d.ts

@@ -0,0 +1,2 @@
+import { ChartProps } from '../types';
+export declare const BarChart: React.FC<ChartProps>;

package/dist/templates/components/BarChart.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarChart = void 0;
+const react_chartjs_2_1 = require("react-chartjs-2");
+const chart_js_1 = require("chart.js");
+chart_js_1.Chart.register(chart_js_1.CategoryScale, chart_js_1.LinearScale, chart_js_1.PointElement, chart_js_1.LineElement, chart_js_1.BarElement, chart_js_1.Title, chart_js_1.Tooltip, chart_js_1.Legend, chart_js_1.Filler);
+const BarChart = ({ labels, datasets }) => {
+    const options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+            y: {
+                beginAtZero: true,
+            },
+        },
+        plugins: {
+            legend: {
+                position: 'bottom',
+            },
+            title: {
+                display: true,
+                text: 'Bar Chart',
+                position: 'bottom',
+            },
+        },
+    };
+    const barData = {
+        labels: labels,
+        datasets: datasets.map((dataset) => ({
+            label: dataset.label,
+            data: dataset.data,
+            backgroundColor: 'rgba(59, 130, 246, 0.5)',
+            borderColor: 'rgba(59, 130, 246, 1)',
+            borderWidth: 2,
+        })),
+    };
+    return (<div className="w-full h-72 flex justify-center items-center">
+      <react_chartjs_2_1.Bar options={options} data={barData}/>
+    </div>);
+};
+exports.BarChart = BarChart;

package/dist/templates/components/ErrorDisplay.d.ts

@@ -0,0 +1,4 @@
+import { ErrorInfo } from '../types';
+export declare const ErrorDisplay: React.FC<{
+    errorInfo: ErrorInfo;
+}>;

package/dist/templates/components/ErrorDisplay.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorDisplay = void 0;
+const ErrorDisplay = ({ errorInfo }) => {
+    const getErrorIcon = (errorType) => {
+        switch (errorType) {
+            case 'data_not_found':
+                return (<svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
+          </svg>);
+            case 'data_not_available':
+                return (<svg className="h-12 w-12" 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>);
+            default:
+                return (<svg className="h-12 w-12" 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>);
+        }
+    };
+    const getErrorColor = (errorType) => {
+        switch (errorType) {
+            case 'data_not_found':
+                return 'text-orange-600 bg-orange-50 border-orange-200';
+            case 'data_not_available':
+                return 'text-yellow-700 bg-yellow-50 border-yellow-200';
+            default:
+                return 'text-red-600 bg-red-50 border-red-200';
+        }
+    };
+    return (<div className={`w-full p-6 rounded-lg border-2 ${getErrorColor(errorInfo.error_type)}`}>
+      <div className="flex items-start gap-4">
+        <div className="flex-shrink-0">{getErrorIcon(errorInfo.error_type)}</div>
+        <div className="flex-1 space-y-3">
+          <div>
+            <h3 className="text-lg font-bold mb-1">{errorInfo.message}</h3>
+            {errorInfo.reason && (<p className="text-sm opacity-90">
+                <strong>Alasan:</strong> {errorInfo.reason}
+              </p>)}
+          </div>
+
+          {errorInfo.suggestion && (<div className="p-3 bg-white bg-opacity-50 rounded-md">
+              <p className="text-sm">
+                <strong>💡 Saran:</strong> {errorInfo.suggestion}
+              </p>
+            </div>)}
+
+          {errorInfo.available_data_summary && (<div className="p-3 bg-white bg-opacity-50 rounded-md">
+              <p className="text-sm">
+                <strong>📊 Data yang tersedia:</strong> {errorInfo.available_data_summary}
+              </p>
+            </div>)}
+
+          <div className="text-xs opacity-75">
+            <p>Dokumen ditemukan: {errorInfo.documents_found}</p>
+          </div>
+        </div>
+      </div>
+    </div>);
+};
+exports.ErrorDisplay = ErrorDisplay;

package/dist/templates/components/LineChart.d.ts

@@ -0,0 +1,2 @@
+import { ChartProps } from '../types';
+export declare const LineChart: React.FC<ChartProps>;

package/dist/templates/components/LineChart.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChart = void 0;
+const react_chartjs_2_1 = require("react-chartjs-2");
+const chart_js_1 = require("chart.js");
+chart_js_1.Chart.register(chart_js_1.CategoryScale, chart_js_1.LinearScale, chart_js_1.PointElement, chart_js_1.LineElement, chart_js_1.Title, chart_js_1.Tooltip, chart_js_1.Legend, chart_js_1.Filler);
+const LineChart = ({ labels, datasets }) => {
+    const options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+            y: {
+                beginAtZero: true,
+            },
+        },
+        plugins: {
+            legend: {
+                position: 'bottom',
+            },
+            title: {
+                display: true,
+                text: 'Line Chart',
+            },
+        },
+    };
+    const lineData = {
+        labels: labels,
+        datasets: datasets.map((dataset) => ({
+            label: dataset.label,
+            data: dataset.data,
+            backgroundColor: 'rgba(16, 185, 129, 0.2)',
+            borderColor: 'rgba(16, 185, 129, 1)',
+            borderWidth: 2,
+            fill: true,
+        })),
+    };
+    return (<div className="w-full h-72 flex justify-center items-center">
+      <react_chartjs_2_1.Line data={lineData} options={options}/>
+    </div>);
+};
+exports.LineChart = LineChart;

package/dist/templates/context/AudashAIContext.d.ts

@@ -0,0 +1 @@
+export declare const AudashAIContext: any;

package/dist/templates/context/AudashAIContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudashAIContext = void 0;
+const react_1 = require("react");
+exports.AudashAIContext = (0, react_1.createContext)(undefined);

package/dist/templates/context/AudashAIProvider.d.ts

@@ -0,0 +1,7 @@
+import { AudashAIConfig } from '../types';
+interface AudashAIProviderProps {
+    config: AudashAIConfig;
+    children: React.ReactNode;
+}
+export declare const AudashAIProvider: React.FC<AudashAIProviderProps>;
+export {};