"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * Native AI Plugin System Integration Demo
 *
 * This demo showcases the integration of the Native AI plugin system
 * with BFUI components, demonstrating how to register and use plugins.
 */
const react_1 = require("react");
const ai_js_1 = require("../components/ai.js");
const useNativeAI_js_1 = require("../hooks/useNativeAI.js");
const NativeAIPluginSystemDemo = () => {
    // State
    const [activeTab, setActiveTab] = (0, react_1.useState)('plugins');
    const [analysisResults, setAnalysisResults] = (0, react_1.useState)(null);
    const [plugins, setPlugins] = (0, react_1.useState)([]);
    // Use the Native AI hook
    const { initialized, loading, error } = (0, useNativeAI_js_1.useNativeAI)();
    // Handle tab change
    const handleTabChange = (tab) => {
        setActiveTab(tab);
    };
    // Handle analysis completion
    const handleAnalysisComplete = (results) => {
        setAnalysisResults(results);
    };
    // Handle plugin change
    const handlePluginChange = (updatedPlugins) => {
        setPlugins(updatedPlugins);
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: "max-w-6xl mx-auto p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-white rounded-lg shadow-lg overflow-hidden", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-6 bg-blue-600 text-white", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold", children: "Native AI Plugin System Demo" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-2 opacity-80", children: "This demo showcases the integration between BFUI and the Native AI plugin system." }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex items-center text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: `w-3 h-3 rounded-full ${initialized ? 'bg-green-400' : loading ? 'bg-yellow-400 animate-pulse' : 'bg-red-400'} mr-2` }), (0, jsx_runtime_1.jsx)("span", { children: initialized ? 'Plugin system initialized' : loading ? 'Initializing plugin system...' : 'Plugin system not initialized' }), error && (0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-red-200", children: error.message })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex border-b", children: [(0, jsx_runtime_1.jsx)("button", { className: `px-6 py-3 text-lg font-medium transition-colors ${activeTab === 'plugins'
                                ? 'border-b-2 border-blue-500 text-blue-600'
                                : 'text-gray-500 hover:text-gray-700'}`, onClick: () => handleTabChange('plugins'), children: "Plugins" }), (0, jsx_runtime_1.jsx)("button", { className: `px-6 py-3 text-lg font-medium transition-colors ${activeTab === 'chat'
                                ? 'border-b-2 border-blue-500 text-blue-600'
                                : 'text-gray-500 hover:text-gray-700'}`, onClick: () => handleTabChange('chat'), children: "Chat Demo" }), (0, jsx_runtime_1.jsx)("button", { className: `px-6 py-3 text-lg font-medium transition-colors ${activeTab === 'analyzer'
                                ? 'border-b-2 border-blue-500 text-blue-600'
                                : 'text-gray-500 hover:text-gray-700'}`, onClick: () => handleTabChange('analyzer'), children: "Document Analyzer" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [activeTab === 'plugins' && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold mb-2", children: "Plugin System" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 mb-4", children: "The Native AI plugin system allows for modular, extensible AI capabilities through a standardized interface. Use the plugin manager below to enable/disable plugins." })] }), (0, jsx_runtime_1.jsx)(ai_js_1.PluginManager, { onPluginChange: handlePluginChange }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-3", children: "Plugin System Architecture" }), (0, jsx_runtime_1.jsxs)("div", { className: "border rounded-lg overflow-hidden", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-gray-100 px-4 py-2 border-b", children: (0, jsx_runtime_1.jsx)("code", { className: "text-sm font-mono", children: "plugin-system.ts" }) }), (0, jsx_runtime_1.jsx)("pre", { className: "bg-gray-800 text-green-400 p-4 text-sm overflow-x-auto", children: `// Core plugin manager implementation
export class BFUIPluginManager {
  private registry: PluginRegistry;
  private events: EventEmitter;
  
  async initialize(): Promise<void> {
    // Initialize all registered plugins
    for (const plugin of this.registry.getAllPlugins()) {
      await plugin.initialize(context);
    }
  }
  
  registerPlugin(plugin: Plugin): void {
    this.registry.register(plugin);
  }
  
  getProviderPlugins(): ProviderPlugin[] {
    return this.registry.getPluginsByType('provider');
  }
}` })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-3", children: "Provider Plugin Example" }), (0, jsx_runtime_1.jsxs)("div", { className: "border rounded-lg overflow-hidden", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-gray-100 px-4 py-2 border-b", children: (0, jsx_runtime_1.jsx)("code", { className: "text-sm font-mono", children: "anthropic-provider-plugin.ts" }) }), (0, jsx_runtime_1.jsx)("pre", { className: "bg-gray-800 text-green-400 p-4 text-sm overflow-x-auto", children: `export class AnthropicProviderPlugin implements ProviderPlugin {
  public readonly id = 'anthropic-provider';
  public readonly name = 'Anthropic Provider';
  public readonly version = '1.0.0';
  public readonly type = 'provider';
  
  async execute<T, U>(request: any, options?: any): Promise<U> {
    // Execute request against Anthropic API
    const response = await this.callAnthropicAPI(request);
    return response as unknown as U;
  }
  
  getCapabilities(): ProviderCapabilities {
    return {
      streaming: true,
      toolCalls: true,
      embeddings: false,
      vision: true
    };
  }
}` })] })] })] })), activeTab === 'chat' && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold mb-2", children: "AI Chat with Plugin System" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600", children: "This example demonstrates how to use the Native AI plugin system for chat functionality. The implementation uses React hooks and the plugin system's provider capabilities." })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-[500px] border rounded-lg", children: (0, jsx_runtime_1.jsx)(ai_js_1.AIChatDemo, { initialPrompt: "Hello, I'd like to learn about the Native AI plugin system.", initialSystemPrompt: "You are a helpful assistant specialized in explaining software integration concepts. Provide clear, concise answers with examples when appropriate." }) })] })), activeTab === 'analyzer' && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold mb-2", children: "Document Analyzer with Plugin System" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600", children: "This example shows how to use the Native AI plugin system for document analysis. You can paste any text and get AI-powered insights." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(ai_js_1.DocumentAnalyzer, { onAnalysisComplete: handleAnalysisComplete }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-3", children: "Plugin Integration Details" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-700 mb-4", children: "This component uses the Native AI plugin system, specifically:" }), (0, jsx_runtime_1.jsxs)("ul", { className: "list-disc pl-5 space-y-2 text-gray-700", children: [(0, jsx_runtime_1.jsxs)("li", { children: ["The ", (0, jsx_runtime_1.jsx)("code", { className: "bg-gray-100 px-1 py-0.5 rounded", children: "BFUIAdapter" }), " provides specialized methods for BFUI"] }), (0, jsx_runtime_1.jsxs)("li", { children: ["The ", (0, jsx_runtime_1.jsx)("code", { className: "bg-gray-100 px-1 py-0.5 rounded", children: "ProviderAdapter" }), " connects to specific provider plugins"] }), (0, jsx_runtime_1.jsx)("li", { children: "Plugin lifecycle management is handled automatically" }), (0, jsx_runtime_1.jsx)("li", { children: "Flexible provider selection based on capabilities" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium mb-2", children: "Plugin System Integration" }), (0, jsx_runtime_1.jsx)("pre", { className: "bg-gray-800 text-green-400 p-3 rounded-md text-sm overflow-x-auto", children: `// Service integration
const nativeAiService = {
  async analyzeDocument(document, options) {
    // Get plugin adapter
    const adapter = new BFUIAdapter(options?.providerId);
    
    // Use plugin to analyze document
    return await adapter.analyzeDocument(document, {
      detailed: options?.detailed,
      categories: options?.categories
    });
  }
};

// React hook usage
function useDocumentAnalysis() {
  const analyzeDocument = async (text) => {
    return nativeAiService.analyzeDocument(text, {
      detailed: true,
      providerId: 'anthropic-provider'
    });
  };
  
  return { analyzeDocument };
}` })] })] })] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4 bg-gray-50 border-t", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 text-sm", children: "This integration uses the Native AI plugin system developed as part of the standardization effort across the Bluefly platform. The plugin system provides type-safe, consistent integration patterns for all projects." }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex items-center text-sm text-gray-500", children: [(0, jsx_runtime_1.jsx)("div", { className: `w-3 h-3 rounded-full ${initialized ? 'bg-green-500' : 'bg-yellow-500'} mr-2` }), (0, jsx_runtime_1.jsxs)("span", { children: ["Plugin System ", initialized ? 'Ready' : 'Initializing'] }), (0, jsx_runtime_1.jsx)("span", { className: "mx-2", children: "\u2022" }), (0, jsx_runtime_1.jsxs)("span", { children: [plugins.length, " Plugins Available"] }), (0, jsx_runtime_1.jsx)("span", { className: "mx-2", children: "\u2022" }), (0, jsx_runtime_1.jsxs)("span", { children: [plugins.filter(p => p.enabled).length, " Plugins Enabled"] })] })] })] }) }));
};
exports.default = NativeAIPluginSystemDemo;
//# sourceMappingURL=NativeAIPluginSystemDemo.js.map