@restnfeel/agentc-starter-kit
Version:
한국어 기업용 CMS 모듈 - Task Master AI와 함께 빠르게 웹사이트를 구현할 수 있는 재사용 가능한 컴포넌트 시스템
51 lines (48 loc) • 2.53 kB
JavaScript
"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useCallback } from 'react';
import { FloatingChatButton } from './floating-chat-button.js';
import { DesktopChatModal } from './desktop-chat-modal.js';
import { I18nProvider } from './i18n-context.js';
import { ModalStateProvider, useModalState } from './modal-state-context.js';
// import { ChatbotAPI } from "@/lib/chatbot/client/api";
// Inner component that uses the modal state context
function DesktopChatbotInner() {
const { openModal, addMessage } = useModalState();
const [isTyping, setIsTyping] = useState(false);
const handleSendMessage = useCallback(async (message) => {
try {
setIsTyping(true);
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 1000));
// Add AI response to state
addMessage({
content: `AI 응답: ${message}에 대한 답변입니다.`,
sender: "ai",
type: "text",
});
}
catch (error) {
console.error("Failed to send message:", error);
// Add error message to state
addMessage({
content: "죄송합니다. 메시지를 처리하는 중 오류가 발생했습니다.",
sender: "ai",
type: "error",
});
}
finally {
setIsTyping(false);
}
}, [addMessage]);
const handleButtonClick = useCallback(() => {
openModal();
}, [openModal]);
return (jsxs("div", { className: "relative", children: [jsx(FloatingChatButton, { onClick: handleButtonClick, position: "bottom-right", size: "lg", className: "z-40", ariaLabel: "\uCC44\uD305 \uC2DC\uC791\uD558\uAE30" }), jsx(DesktopChatModal, { onSendMessage: handleSendMessage, isTyping: isTyping, title: "AI \uC5B4\uC2DC\uC2A4\uD134\uD2B8", placeholder: "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694...", showSuggestedQuestions: true, suggestedQuestionsContext: "welcome", allowMinimize: true, width: "800px", height: "600px" })] }));
}
// Main component with providers
function DesktopChatbotExample() {
return (jsx(I18nProvider, { defaultLanguage: "ko", children: jsx(ModalStateProvider, { persistToStorage: true, maxSessions: 10, sessionTimeout: 24 * 60 * 60 * 1000, children: jsx(DesktopChatbotInner, {}) }) }));
}
export { DesktopChatbotExample, DesktopChatbotExample as default };
//# sourceMappingURL=desktop-chatbot-example.js.map