@restnfeel/agentc-starter-kit
Version:
한국어 기업용 CMS 모듈 - Task Master AI와 함께 빠르게 웹사이트를 구현할 수 있는 재사용 가능한 컴포넌트 시스템
63 lines (60 loc) • 3.39 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';
// Inner component that uses the modal state context and real API
function DesktopChatbotInner({ apiEndpoint = "/api/rag/answer", className = "", }) {
const { modalState, openModal, addMessage } = useModalState();
const [isTyping, setIsTyping] = useState(false);
const handleSendMessage = useCallback(async (message) => {
try {
setIsTyping(true);
// Call real RAG API
const response = await fetch(apiEndpoint, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
question: message,
sessionId: modalState.isOpen ? "desktop-modal-session" : undefined,
}),
});
if (!response.ok) {
throw new Error(`API call failed: ${response.status} ${response.statusText}`);
}
const data = await response.json();
// Add AI response to state
addMessage({
content: data.answer || data.response || "응답을 받지 못했습니다.",
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, apiEndpoint, modalState.isOpen]);
const handleButtonClick = useCallback(() => {
openModal();
}, [openModal]);
return (jsxs("div", { className: `relative ${className}`, children: [jsx(FloatingChatButton, { onClick: handleButtonClick, position: "bottom-right", size: "lg", className: "z-40", ariaLabel: "AI \uC5B4\uC2DC\uC2A4\uD134\uD2B8\uC640 \uCC44\uD305\uD558\uAE30" }), jsx(DesktopChatModal, { onSendMessage: handleSendMessage, isTyping: isTyping, title: "AI \uC5B4\uC2DC\uC2A4\uD134\uD2B8", placeholder: "\uC9C8\uBB38\uC744 \uC785\uB825\uD558\uC138\uC694...", showSuggestedQuestions: true, suggestedQuestionsContext: "welcome", allowMinimize: true, width: "800px", height: "600px" })] }));
}
// Main component with providers and full RAG API integration
function DesktopChatbotIntegrated({ apiEndpoint = "/api/rag/answer", language = "ko", theme = "light", position = "bottom-right", className = "", }) {
return (jsx(I18nProvider, { defaultLanguage: language, children: jsx(ModalStateProvider, { persistToStorage: true, maxSessions: 10, sessionTimeout: 24 * 60 * 60 * 1000, children: jsx(DesktopChatbotInner, { apiEndpoint: apiEndpoint, className: className }) }) }));
}
export { DesktopChatbotIntegrated, DesktopChatbotIntegrated as default };
//# sourceMappingURL=desktop-chatbot-integrated.js.map