@restnfeel/agentc-starter-kit/dist/esm/lib/chatbot/client/components/chatbot-demo.js

한국어 기업용 CMS 모듈 - Task Master AI와 함께 빠르게 웹사이트를 구현할 수 있는 재사용 가능한 컴포넌트 시스템

import { jsx, jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
import { I18nProvider } from './i18n-context.js';
import { ChatbotWidget } from './chatbot-widget.js';

// Theme selector component
function ThemeSelector() {
    const currentTheme = "default";
    const availableThemes = ["default", "dark", "compact"];
    return (jsx("select", { value: currentTheme, className: "\n        bg-[var(--chatbot-surface)] \n        text-[var(--chatbot-text-primary)]\n        border border-[var(--chatbot-border)]\n        rounded-[var(--chatbot-radius-md)]\n        px-[var(--chatbot-spacing-sm)]\n        py-[var(--chatbot-spacing-xs)]\n        text-[var(--chatbot-font-size-sm)]\n        focus:border-[var(--chatbot-primary)]\n        focus:ring-2 \n        focus:ring-[var(--chatbot-primary)] \n        focus:ring-opacity-50\n        transition-all \n        duration-200\n      ", children: availableThemes.map((theme) => (jsxs("option", { value: theme, children: [theme.charAt(0).toUpperCase() + theme.slice(1), " Theme"] }, theme))) }));
}
// Demo component without providers
function ChatbotDemoInternal() {
    const [apiConfig, setApiConfig] = useState({
        apiBaseUrl: process.env.NEXT_PUBLIC_API_URL || "/api",
        apiKey: process.env.NEXT_PUBLIC_API_KEY || "",
    });
    return (jsxs("div", { className: "min-h-screen bg-[var(--chatbot-background)] p-8", children: [jsxs("div", { className: "max-w-4xl mx-auto space-y-8", children: [jsxs("header", { className: "text-center space-y-4", children: [jsx("h1", { className: "text-4xl font-bold text-[var(--chatbot-text-primary)]", children: "Chatbot Demo" }), jsx("p", { className: "text-[var(--chatbot-text-secondary)]", children: "Test the chatbot with different themes and languages" })] }), jsxs("div", { className: "bg-[var(--chatbot-surface)] rounded-[var(--chatbot-radius-lg)] p-6 shadow-[var(--chatbot-shadow)]", children: [jsx("h2", { className: "text-xl font-semibold text-[var(--chatbot-text-primary)] mb-4", children: "Settings" }), jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [jsxs("div", { className: "space-y-2", children: [jsx("label", { className: "block text-sm font-medium text-[var(--chatbot-text-primary)]", children: "Language" }), jsx("div", { className: "w-full p-2 bg-gray-100 rounded text-sm", children: "Language selector placeholder" })] }), jsxs("div", { className: "space-y-2", children: [jsx("label", { className: "block text-sm font-medium text-[var(--chatbot-text-primary)]", children: "Theme" }), jsx(ThemeSelector, {})] })] })] }), jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [jsxs("div", { className: "bg-[var(--chatbot-surface)] rounded-[var(--chatbot-radius-lg)] p-6 shadow-[var(--chatbot-shadow)]", children: [jsx("h3", { className: "text-lg font-semibold text-[var(--chatbot-text-primary)] mb-2", children: "Multi-language Support" }), jsx("p", { className: "text-[var(--chatbot-text-secondary)] text-sm", children: "The chatbot supports Korean, English, Japanese, and Arabic with proper RTL support." })] }), jsxs("div", { className: "bg-[var(--chatbot-surface)] rounded-[var(--chatbot-radius-lg)] p-6 shadow-[var(--chatbot-shadow)]", children: [jsx("h3", { className: "text-lg font-semibold text-[var(--chatbot-text-primary)] mb-2", children: "Theme System" }), jsx("p", { className: "text-[var(--chatbot-text-secondary)] text-sm", children: "Switch between default, dark, and compact themes. All components adapt automatically." })] }), jsxs("div", { className: "bg-[var(--chatbot-surface)] rounded-[var(--chatbot-radius-lg)] p-6 shadow-[var(--chatbot-shadow)]", children: [jsx("h3", { className: "text-lg font-semibold text-[var(--chatbot-text-primary)] mb-2", children: "RAG Integration" }), jsx("p", { className: "text-[var(--chatbot-text-secondary)] text-sm", children: "Connected to RAG-based AI system for contextual responses with document search." })] })] }), jsxs("div", { className: "bg-[var(--chatbot-surface)] rounded-[var(--chatbot-radius-lg)] p-6 shadow-[var(--chatbot-shadow)]", children: [jsx("h2", { className: "text-xl font-semibold text-[var(--chatbot-text-primary)] mb-4", children: "How to Test" }), jsxs("ul", { className: "space-y-2 text-[var(--chatbot-text-secondary)]", children: [jsx("li", { children: "\u2022 Click the floating chat button in the bottom-right corner" }), jsx("li", { children: "\u2022 Try switching languages and see the interface update" }), jsx("li", { children: "\u2022 Switch themes to see the color scheme change" }), jsx("li", { children: "\u2022 Test suggested questions in different languages" }), jsx("li", { children: "\u2022 Try typing in different languages to test RTL support" })] })] })] }), jsx(ChatbotWidget, { apiBaseUrl: apiConfig.apiBaseUrl, apiKey: apiConfig.apiKey, position: "bottom-right", buttonSize: "lg", enableSuggestedQuestions: true, enableTypingIndicator: true, enableRetry: true, enableLanguageSelector: false, enableThemeToggle: false, onError: (error) => {
                    console.error("Chatbot error:", error);
                }, onMessageSent: (message) => {
                    console.log("Message sent:", message);
                }, onMessageReceived: (message) => {
                    console.log("Message received:", message);
                } })] }));
}
// Main demo component with providers
function ChatbotDemo({ defaultLanguage = "en", defaultTheme = "default", }) {
    return (jsx(I18nProvider, { defaultLanguage: defaultLanguage, enableAutoDetect: !defaultLanguage, enablePersistence: true, children: jsx("div", { "data-chatbot": true, children: jsx(ChatbotDemoInternal, {}) }) }));
}

export { ChatbotDemo, ChatbotDemo as default };
//# sourceMappingURL=chatbot-demo.js.map