"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * Advanced AI Features Demo
 *
 * A comprehensive demo of all AI features available through native_aijs SDK
 */
const react_1 = require("react");
const ai_js_1 = require("../components/ai.js");
const VectorSearch_js_1 = __importDefault(require("../components/ai/VectorSearch.js"));
const ContentGenerator_js_1 = __importDefault(require("../components/ai/ContentGenerator.js"));
const useAI_js_1 = __importDefault(require("../hooks/useAI.js"));
// Sample data for vector search
const SAMPLE_DOCUMENTS = [
    {
        id: '1',
        title: 'Introduction to Natural Language Processing',
        content: 'Natural Language Processing (NLP) is a field of artificial intelligence that focuses on the interaction between computers and humans through natural language. The ultimate objective of NLP is to read, decipher, understand, and make sense of human language in a valuable way.'
    },
    {
        id: '2',
        title: 'Machine Learning Fundamentals',
        content: 'Machine learning is a method of data analysis that automates analytical model building. It is a branch of artificial intelligence based on the idea that systems can learn from data, identify patterns, and make decisions with minimal human intervention.'
    },
    {
        id: '3',
        title: 'Deep Learning and Neural Networks',
        content: 'Deep learning is a subset of machine learning where artificial neural networks, algorithms inspired by the human brain, learn from large amounts of data. Deep learning allows machines to solve complex problems even when using a data set that is very diverse, unstructured, and interconnected.'
    },
    {
        id: '4',
        title: 'Vector Embeddings in AI',
        content: 'Vector embeddings are a way to represent words, phrases, or entire documents as vectors of real numbers. These vector representations capture semantic meaning and relationships between concepts, allowing machines to understand text in a way that approaches human comprehension.'
    },
    {
        id: '5',
        title: 'Transformer Architecture',
        content: 'The Transformer is a deep learning model architecture introduced in 2017 that has become the foundation of many modern NLP systems. Unlike earlier sequence models, Transformers process all words simultaneously using a mechanism called self-attention, which allows them to capture long-range dependencies more effectively.'
    },
    {
        id: '6',
        title: 'Large Language Models',
        content: 'Large Language Models (LLMs) are massive neural networks trained on vast amounts of text data. These models can generate human-like text, translate languages, answer questions, and even write creative content. Models like GPT, BERT, and Claude have billions of parameters and can perform a wide range of natural language tasks.'
    },
    {
        id: '7',
        title: 'Prompt Engineering',
        content: 'Prompt engineering is the practice of designing and optimizing inputs to AI models to get desired outputs. Effective prompts can dramatically improve the quality, relevance, and accuracy of AI-generated content. Techniques include chain-of-thought prompting, few-shot learning, and structured formatting.'
    },
    {
        id: '8',
        title: 'AI Ethics and Responsible Use',
        content: 'AI ethics concerns the moral issues that arise with the development and deployment of artificial intelligence. Key concerns include privacy, transparency, fairness, accountability, and potential societal impacts. Responsible AI use requires considering these ethical dimensions throughout the AI lifecycle.'
    }
];
// Content generation templates
const CONTENT_TEMPLATES = [
    {
        id: 'blog-post',
        name: 'Blog Post',
        description: 'Generate a structured blog post with introduction, main points, and conclusion.',
        systemPrompt: 'You are an expert content writer specializing in creating engaging, informative blog posts. Your task is to create a well-structured blog post based on the provided topic and key points. The blog post should include an attention-grabbing introduction, well-developed main sections with clear headings, and a compelling conclusion. Use a conversational yet professional tone, include relevant examples where appropriate, and ensure the content delivers value to the reader. Format the output in Markdown with proper headings, bullet points, and paragraph breaks.',
        outputFormat: 'markdown',
        fields: [
            {
                id: 'topic',
                name: 'Topic',
                description: 'The main subject of the blog post',
                type: 'text',
                required: true,
                placeholder: 'e.g., AI in Healthcare'
            },
            {
                id: 'audience',
                name: 'Target Audience',
                description: 'Who will be reading this blog post',
                type: 'select',
                options: [
                    'Beginners',
                    'Intermediate users',
                    'Technical experts',
                    'Business leaders',
                    'General public'
                ],
                required: true
            },
            {
                id: 'key-points',
                name: 'Key Points',
                description: 'Main ideas to cover in the post (one per line)',
                type: 'textarea',
                required: true,
                placeholder: 'Point 1\nPoint 2\nPoint 3'
            },
            {
                id: 'tone',
                name: 'Tone',
                description: 'The writing style to use',
                type: 'select',
                options: [
                    'Professional',
                    'Conversational',
                    'Educational',
                    'Enthusiastic',
                    'Technical'
                ],
                required: false,
                default: 'Conversational'
            },
            {
                id: 'word-count',
                name: 'Approximate Word Count',
                description: 'How long the blog post should be',
                type: 'select',
                options: [
                    '500-700 words',
                    '800-1000 words',
                    '1000-1500 words',
                    '1500-2000 words'
                ],
                required: false,
                default: '800-1000 words'
            }
        ]
    },
    {
        id: 'product-description',
        name: 'Product Description',
        description: 'Create compelling product descriptions for e-commerce or marketing.',
        systemPrompt: 'You are a skilled copywriter specializing in creating compelling product descriptions that drive sales. Your task is to craft a product description that highlights the features, benefits, and unique selling points of the product in a way that resonates with the target audience. The description should be engaging, persuasive, and concise, with a clear call-to-action. Use vivid language that appeals to the senses and emotions where appropriate, and ensure the tone matches the brand voice.',
        outputFormat: 'html',
        fields: [
            {
                id: 'product-name',
                name: 'Product Name',
                description: 'The name of the product',
                type: 'text',
                required: true,
                placeholder: 'e.g., UltraBoost Pro Running Shoes'
            },
            {
                id: 'product-category',
                name: 'Product Category',
                description: 'The category this product belongs to',
                type: 'select',
                options: [
                    'Electronics',
                    'Clothing',
                    'Home & Kitchen',
                    'Beauty & Personal Care',
                    'Sports & Outdoors',
                    'Tools & Home Improvement',
                    'Other'
                ],
                required: true
            },
            {
                id: 'key-features',
                name: 'Key Features',
                description: 'Main features of the product (one per line)',
                type: 'textarea',
                required: true,
                placeholder: 'Feature 1\nFeature 2\nFeature 3'
            },
            {
                id: 'target-audience',
                name: 'Target Audience',
                description: 'Who would buy this product',
                type: 'text',
                required: true,
                placeholder: 'e.g., Fitness enthusiasts aged 25-40'
            },
            {
                id: 'unique-selling-point',
                name: 'Unique Selling Point',
                description: 'What makes this product special',
                type: 'textarea',
                required: true,
                placeholder: 'What differentiates this product from competitors'
            },
            {
                id: 'brand-voice',
                name: 'Brand Voice',
                description: 'The tone and style of the brand',
                type: 'select',
                options: [
                    'Professional and authoritative',
                    'Friendly and conversational',
                    'Luxury and sophisticated',
                    'Energetic and passionate',
                    'Technical and precise'
                ],
                required: false,
                default: 'Friendly and conversational'
            }
        ]
    },
    {
        id: 'api-docs',
        name: 'API Documentation',
        description: 'Generate technical documentation for an API endpoint.',
        systemPrompt: 'You are a technical writer specializing in creating clear, comprehensive API documentation. Your task is to create documentation for an API endpoint that developers can easily understand and implement. The documentation should include the endpoint details, request parameters, response format, error codes, and example requests and responses. Use a clear, precise writing style that focuses on accuracy and completeness. Format the output in JSON with proper structure.',
        outputFormat: 'json',
        fields: [
            {
                id: 'endpoint-name',
                name: 'Endpoint Name',
                description: 'The name of the API endpoint',
                type: 'text',
                required: true,
                placeholder: 'e.g., Create User'
            },
            {
                id: 'http-method',
                name: 'HTTP Method',
                description: 'The HTTP method used for this endpoint',
                type: 'select',
                options: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
                required: true
            },
            {
                id: 'endpoint-path',
                name: 'Endpoint Path',
                description: 'The URL path for this endpoint',
                type: 'text',
                required: true,
                placeholder: 'e.g., /api/v1/users'
            },
            {
                id: 'description',
                name: 'Endpoint Description',
                description: 'What this endpoint does',
                type: 'textarea',
                required: true,
                placeholder: 'Describe the purpose and functionality of this endpoint'
            },
            {
                id: 'request-params',
                name: 'Request Parameters',
                description: 'Parameters that can be sent with the request (name, type, required, description)',
                type: 'textarea',
                required: true,
                placeholder: 'name: string, required, The user\'s full name\nemail: string, required, The user\'s email address\nage: number, optional, The user\'s age'
            },
            {
                id: 'response-format',
                name: 'Response Format',
                description: 'The structure of the successful response',
                type: 'textarea',
                required: true,
                placeholder: 'Describe the fields returned in the response'
            },
            {
                id: 'error-codes',
                name: 'Error Codes',
                description: 'Possible error codes and their meanings',
                type: 'textarea',
                required: false,
                placeholder: '400: Bad Request - Invalid parameters\n401: Unauthorized - Authentication required\n404: Not Found - Resource does not exist'
            }
        ]
    }
];
const AdvancedAIFeaturesDemo = () => {
    // State
    const [activeTab, setActiveTab] = (0, react_1.useState)('chat');
    const [generatedContent, setGeneratedContent] = (0, react_1.useState)('');
    const [selectedDocument, setSelectedDocument] = (0, react_1.useState)(null);
    const [documentAnalysis, setDocumentAnalysis] = (0, react_1.useState)(null);
    // Get AI capabilities from our hook
    const { status, isLoading } = (0, useAI_js_1.default)();
    // Handle tab change
    const handleTabChange = (tab) => {
        setActiveTab(tab);
    };
    // Handle content generation
    const handleContentGenerated = (content) => {
        setGeneratedContent(content);
    };
    // Handle document selection
    const handleDocumentSelect = (document) => {
        setSelectedDocument(document);
    };
    // Handle analysis completion
    const handleAnalysisComplete = (analysis) => {
        setDocumentAnalysis(analysis);
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: "max-w-7xl 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-gradient-to-r from-blue-600 to-indigo-700 text-white", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-3xl font-bold", children: "Advanced AI Features Demo" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-2 opacity-90", children: "This demo showcases the full range of AI capabilities enabled by the native_aijs SDK. All features are backed by a unified interface for AI interactions with consistent error handling, monitoring, and performance optimization." })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex border-b overflow-x-auto", children: ['chat', 'documents', 'search', 'generate'].map(tab => ((0, jsx_runtime_1.jsxs)("button", { className: `px-6 py-4 text-lg font-medium transition-colors whitespace-nowrap ${activeTab === tab
                            ? 'border-b-2 border-blue-500 text-blue-600'
                            : 'text-gray-500 hover:text-gray-700'}`, onClick: () => handleTabChange(tab), children: [tab === 'chat' && 'AI Chat', tab === 'documents' && 'Document Analysis', tab === 'search' && 'Vector Search', tab === 'generate' && 'Content Generation'] }, tab))) }), (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [activeTab === 'chat' && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "lg:col-span-2 h-[600px] border rounded-lg shadow-sm", children: (0, jsx_runtime_1.jsx)(ai_js_1.AIChatDemo, { initialPrompt: "Explain how vector embeddings work in AI and provide some examples of their applications.", initialSystemPrompt: "You are an AI expert specializing in explaining complex technical concepts in clear, accessible language. Provide detailed, accurate information with examples that help illustrate the concepts.", showModelSelector: true }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4 border", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-3", children: "About AI Chat" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-700 mb-4", children: "This component demonstrates the chat capabilities of the native_aijs SDK, including streaming responses, model selection, and error handling." }), (0, jsx_runtime_1.jsx)("h4", { className: "font-medium mb-2", children: "Key Features" }), (0, jsx_runtime_1.jsxs)("ul", { className: "list-disc pl-5 space-y-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("li", { children: "Real-time streaming responses" }), (0, jsx_runtime_1.jsx)("li", { children: "Multiple model support" }), (0, jsx_runtime_1.jsx)("li", { children: "Conversation history tracking" }), (0, jsx_runtime_1.jsx)("li", { children: "Error recovery mechanisms" }), (0, jsx_runtime_1.jsx)("li", { children: "Request cancellation" }), (0, jsx_runtime_1.jsx)("li", { children: "Automatic token counting" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-blue-50 rounded-lg p-4 border border-blue-100", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-2 text-blue-800", children: "Implementation Details" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-800 text-green-400 p-3 rounded-md text-sm overflow-x-auto mb-3", children: (0, jsx_runtime_1.jsx)("pre", { children: `const { 
  chat, 
  status, 
  messages, 
  isStreaming,
  cancel
} = useAI({
  initialConfig: {
    model: 'claude-3-haiku-20240307',
    temperature: 0.7,
    stream: true
  }
});` }) }), (0, jsx_runtime_1.jsxs)("p", { className: "text-blue-800 text-sm", children: ["The ", (0, jsx_runtime_1.jsx)("code", { className: "bg-blue-100 px-1 py-0.5 rounded", children: "useAI" }), " hook provides a simple interface to the native_aijs SDK's chat capabilities, handling state management, error handling, and streaming."] })] })] })] })), activeTab === 'documents' && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "lg:col-span-2", children: (0, jsx_runtime_1.jsx)(ai_js_1.DocumentAnalyzer, { onAnalysisComplete: handleAnalysisComplete }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4 border", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-3", children: "About Document Analysis" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-700 mb-4", children: "This component demonstrates the document analysis capabilities of the native_aijs SDK, including summarization, key point extraction, sentiment analysis, and categorization." }), (0, jsx_runtime_1.jsx)("h4", { className: "font-medium mb-2", children: "Key Features" }), (0, jsx_runtime_1.jsxs)("ul", { className: "list-disc pl-5 space-y-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("li", { children: "Comprehensive document summarization" }), (0, jsx_runtime_1.jsx)("li", { children: "Key point extraction" }), (0, jsx_runtime_1.jsx)("li", { children: "Sentiment analysis" }), (0, jsx_runtime_1.jsx)("li", { children: "Custom category classification" }), (0, jsx_runtime_1.jsx)("li", { children: "Detailed analysis options" })] })] }), documentAnalysis && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 rounded-lg p-4 border border-green-100", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-3 text-green-800", children: "Analysis Results" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-green-800", children: "Sentiment" }), (0, jsx_runtime_1.jsx)("span", { className: `inline-block px-3 py-1 rounded-full text-sm ${documentAnalysis.sentiment === 'positive' ? 'bg-green-100 text-green-800' :
                                                                documentAnalysis.sentiment === 'negative' ? 'bg-red-100 text-red-800' :
                                                                    'bg-gray-100 text-gray-800'}`, children: documentAnalysis.sentiment })] }), documentAnalysis.keyPoints && documentAnalysis.keyPoints.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-green-800 mb-1", children: "Key Points" }), (0, jsx_runtime_1.jsx)("ul", { className: "list-disc pl-5 space-y-1 text-gray-700", children: documentAnalysis.keyPoints.slice(0, 3).map((point, index) => ((0, jsx_runtime_1.jsx)("li", { children: point }, index))) })] })), documentAnalysis.categories && Object.keys(documentAnalysis.categories).length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-green-800 mb-1", children: "Top Categories" }), Object.entries(documentAnalysis.categories)
                                                            .sort(([, a], [, b]) => b - a)
                                                            .slice(0, 3)
                                                            .map(([category, score]) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-1", children: [(0, jsx_runtime_1.jsx)("span", { children: category }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-medium", children: [(score * 100).toFixed(1), "%"] })] }, category)))] }))] }))] })] })), activeTab === 'search' && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "lg:col-span-2", children: (0, jsx_runtime_1.jsx)(VectorSearch_js_1.default, { items: SAMPLE_DOCUMENTS, onSelect: handleDocumentSelect }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4 border", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-3", children: "About Vector Search" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-700 mb-4", children: "This component demonstrates semantic search capabilities using vector embeddings generated by the native_aijs SDK, allowing for concept-based rather than keyword-based search." }), (0, jsx_runtime_1.jsx)("h4", { className: "font-medium mb-2", children: "Key Features" }), (0, jsx_runtime_1.jsxs)("ul", { className: "list-disc pl-5 space-y-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("li", { children: "Semantic search using embeddings" }), (0, jsx_runtime_1.jsx)("li", { children: "Cosine similarity matching" }), (0, jsx_runtime_1.jsx)("li", { children: "Automatic content indexing" }), (0, jsx_runtime_1.jsx)("li", { children: "Result ranking and scoring" }), (0, jsx_runtime_1.jsx)("li", { children: "Concept-based matching" })] })] }), selectedDocument && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-purple-50 rounded-lg p-4 border border-purple-100", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-2 text-purple-800", children: "Selected Document" }), (0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-purple-800 mb-1", children: selectedDocument.title }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-700", children: selectedDocument.content }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 text-sm text-purple-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Match score:" }), " ", (selectedDocument.score * 100).toFixed(1), "%"] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "bg-blue-50 rounded-lg p-4 border border-blue-100", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-2 text-blue-800", children: "How It Works" }), (0, jsx_runtime_1.jsx)("p", { className: "text-blue-800 text-sm mb-3", children: "Vector search converts text into high-dimensional vectors that capture semantic meaning. When you search, your query is converted to the same vector space, and the system finds documents with the most similar vectors." }), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-800 text-green-400 p-3 rounded-md text-sm overflow-x-auto", children: (0, jsx_runtime_1.jsx)("pre", { children: `// Generate embeddings for search
const embeddings = await sdk.embeddings({
  texts: documents.map(d => d.content),
  model: 'text-embedding-ada-002'
});

// Calculate similarity
const results = documents.map((doc, i) => ({
  ...doc,
  score: cosineSimilarity(queryVector, embeddings[i])
})).sort((a, b) => b.score - a.score);` }) })] })] })] })), activeTab === 'generate' && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "lg:col-span-2", children: (0, jsx_runtime_1.jsx)(ContentGenerator_js_1.default, { templates: CONTENT_TEMPLATES, onContentGenerated: handleContentGenerated }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4 border", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-3", children: "About Content Generation" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-700 mb-4", children: "This component demonstrates structured content generation using the native_aijs SDK, allowing for template-based creation of various content types." }), (0, jsx_runtime_1.jsx)("h4", { className: "font-medium mb-2", children: "Key Features" }), (0, jsx_runtime_1.jsxs)("ul", { className: "list-disc pl-5 space-y-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("li", { children: "Template-based generation" }), (0, jsx_runtime_1.jsx)("li", { children: "Multiple output formats (Markdown, HTML, JSON)" }), (0, jsx_runtime_1.jsx)("li", { children: "Structured input fields" }), (0, jsx_runtime_1.jsx)("li", { children: "Token usage estimation" }), (0, jsx_runtime_1.jsx)("li", { children: "Preview and editing workflow" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-yellow-50 rounded-lg p-4 border border-yellow-100", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-2 text-yellow-800", children: "Available Templates" }), (0, jsx_runtime_1.jsx)("ul", { className: "space-y-2", children: CONTENT_TEMPLATES.map(template => ((0, jsx_runtime_1.jsxs)("li", { className: "p-2 bg-yellow-100 rounded-md", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-yellow-800", children: template.name }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-yellow-700", children: template.description }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-yellow-600 mt-1", children: ["Format: ", template.outputFormat, " \u2022 Fields: ", template.fields.length] })] }, template.id))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-blue-50 rounded-lg p-4 border border-blue-100", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-2 text-blue-800", children: "Implementation Details" }), (0, jsx_runtime_1.jsx)("p", { className: "text-blue-800 text-sm mb-3", children: "The content generator uses system prompts and structured user inputs to generate content in specific formats. It leverages the native_aijs SDK's chat capabilities with careful prompt engineering." }), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-800 text-green-400 p-3 rounded-md text-sm overflow-x-auto", children: (0, jsx_runtime_1.jsx)("pre", { children: `// Generate content
const response = await chat({
  messages: [
    { 
      role: 'system', 
      content: template.systemPrompt 
    },
    { 
      role: 'user', 
      content: formatUserPrompt(fieldValues) 
    }
  ],
  temperature: 0.7,
  maxTokens: 2000
});` }) })] })] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "px-6 py-4 bg-gray-50 border-t", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row justify-between items-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 text-sm", children: "Powered by native_aijs SDK \u2022 All AI capabilities in a standardized interface" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center mt-2 sm:mt-0", children: [(0, jsx_runtime_1.jsx)("div", { className: `w-3 h-3 rounded-full mr-2 ${isLoading ? 'bg-yellow-500' : 'bg-green-500'}` }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500", children: isLoading ? 'Processing request...' : 'SDK Connected' })] })] }) })] }) }));
};
exports.default = AdvancedAIFeaturesDemo;
//# sourceMappingURL=AdvancedAIFeaturesDemo.js.map