import React, { useState, useRef, useEffect } from 'react'; // 언어 감지 함수 const detectLanguage = (text) => { // 한국어 패턴 const koreanPattern = /[가-힣]/; // 일본어 패턴 (히라가나, 카타카나, 한자) const japanesePattern = /[\u3040-\u309F\u30A0-\u30FF\u4E00-\u9FAF]/; // 영어 패턴 const englishPattern = /^[a-zA-Z\s.,!?;:'"()-]+$/; if (koreanPattern.test(text)) { return 'ko'; } else if (japanesePattern.test(text)) { return 'ja'; } else if (englishPattern.test(text)) { return 'en'; } return 'ja'; // 기본값은 일본어 }; // 언어별 메시지 텍스트 const getLanguageMessages = (lang) => { const messages = { ko: { welcome: '안녕하세요. ZERO SECURITY AI입니다. 다크웹 모니터링, 제로트러스트, 모바일 보안 등 최신 보안 솔루션을 제공하고 있습니다. 질문이나 필요한 정보가 있으시면 신속하게 안내해 드리겠습니다.', loading: '현재 신중하게 생각하면서 답변을 준비하고 있습니다…', error: '죄송합니다. 오류가 발생했습니다. 다시 한 번 시도해 주세요.', connectionError: '채팅 서비스에 연결할 수 없습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.', relatedQuestions: '관련 질문', relatedArticles: '관련 아티클', expand: '펼치기', collapse: '접기', placeholder: '어떻게 도움을 드릴까요?', thinking: '생각 중..', aiChat: 'AI 대화' }, ja: { welcome: 'こんにちは。ZERO SECURITY AIです。ダークウェブモニタリング、ゼロトラスト、モバイルセキュリティなど、最新のセキュリティソリューションを提供しています。ご質問や必要な情報がございましたら、迅速にご案内させていただきます。', loading: 'ただいま、丁寧に考えながらお答えを準備しております…', error: '申し訳ございません。エラーが発生しました。もう一度お試しください。', connectionError: 'チャットサービスに接続できません。インターネット接続を確認してもう一度お試しください。', relatedQuestions: '関連質問', relatedArticles: '関連記事', expand: '展開', collapse: '折りたたみ', placeholder: 'どのようにお手伝いできますか？', thinking: '考え中..', aiChat: 'AI会話' }, en: { welcome: 'Hello. I am ZERO SECURITY AI. We provide the latest security solutions including dark web monitoring, zero trust, and mobile security. If you have any questions or need information, we will guide you promptly.', loading: 'Currently thinking carefully and preparing an answer...', error: 'Sorry. An error occurred. Please try again.', connectionError: 'Cannot connect to chat service. Please check your internet connection and try again.', relatedQuestions: 'Related Questions', relatedArticles: 'Related Articles', expand: 'Expand', collapse: 'Collapse', placeholder: 'How can I help you?', thinking: 'Thinking..', aiChat: 'AI Chat' } }; return messages[lang] || messages.ja; }; // FAQ 데이터를 가져오는 함수 const fetchRelatedFAQs = async (content) => { try { // GachiAI API를 통해 FAQ 데이터 가져오기 const data = await window.GachiAI.loadQuestions(content, null, 2); if (data.result === 'SUCCESS' && data.questions && Array.isArray(data.questions)) { // 연관성 점수로 정렬 const sortedFaqs = data.questions .sort((a, b) => (b.relevance_score || 0) - (a.relevance_score || 0)) .slice(0, 2); return sortedFaqs; } return []; } catch (error) { console.error('FAQ データの読み込みに失敗しました:', error); return []; } }; // 아티클 데이터를 가져오는 함수 const fetchRelatedArticles = async (content) => { try { // GachiAI API를 통해 아티클 데이터 가져오기 const data = await window.GachiAI.loadArticles(content, null, 4); if (data.result === 'SUCCESS' && data.articles && Array.isArray(data.articles)) { // 연관성 점수로 정렬 const sortedArticles = data.articles .sort((a, b) => (b.relevance_score || 0) - (a.relevance_score || 0)) .slice(0, 4); return sortedArticles; } return []; } catch (error) { console.error('記事データの読み込みに失敗しました:', error); return []; } }; export default function ChatWidget() { const [messages, setMessages] = useState([]); const [inputValue, setInputValue] = useState(''); const [conversationId, setConversationId] = useState(null); const [isLoading, setIsLoading] = useState(false); const [loadingQuestion, setLoadingQuestion] = useState(''); // 로딩 중인 질문 const [showFooter, setShowFooter] = useState(false); const [expandedQuestions, setExpandedQuestions] = useState(new Set()); const [currentLanguage, setCurrentLanguage] = useState('ja'); // 기본 언어는 일본어 const chatContainerRef = useRef(null); // 특정 메시지로 스크롤하는 함수 const scrollToMessage = (messageId) => { // DOM 렌더링과 FAQ/아티클 로딩을 기다리기 위한 setTimeout setTimeout(() => { const messageElement = document.querySelector(`[data-message-id="${messageId}"]`); if (messageElement) { const headerHeight = 80; // 상단 메뉴 높이 고려 const elementTop = messageElement.offsetTop; const offsetPosition = elementTop - headerHeight; window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); } }, 500); // FAQ와 아티클 렌더링을 고려한 충분한 지연 }; // 타이핑 애니메이션 컴포넌트 const TypingAnimation = () => { const [displayText, setDisplayText] = useState(''); const langMessages = getLanguageMessages(currentLanguage); const fullText = langMessages.loading; useEffect(() => { let currentIndex = 0; let timeoutId; const typeText = () => { if (currentIndex <= fullText.length) { setDisplayText(fullText.slice(0, currentIndex)); currentIndex++; timeoutId = setTimeout(typeText, 80); } else { // 텍스트가 완성되면 2초 대기 후 텍스트를 지우고 다시 시작 timeoutId = setTimeout(() => { setDisplayText(''); currentIndex = 0; // 0.5초 후 다시 타이핑 시작 timeoutId = setTimeout(typeText, 500); }, 2000); } }; typeText(); return () => { if (timeoutId) { clearTimeout(timeoutId); } }; }, []); return ( {displayText} | ); }; // 풋터 컴포넌트 정의 const FooterComponent = () => { const [isMobile, setIsMobile] = React.useState( typeof window !== 'undefined' && window.innerWidth <= 768 ); React.useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth <= 768); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); const footerStyle = { backgroundColor: '#f3f4f6', margin: 0, padding: 0, width: '100%', boxSizing: 'border-box', fontFamily: 'Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' }; const containerStyle = { maxWidth: '1280px', margin: '0 auto', padding: '1rem 1.25rem', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start' }; const companyStyle = { color: '#6b7280', fontSize: '0.875rem', textAlign: 'left', margin: 0, padding: 0, lineHeight: '1.5' }; const infoStyle = { color: '#6b7280', fontSize: '0.875rem', textAlign: 'right', margin: 0, padding: 0, lineHeight: '1.5' }; return ( ); }; // 스크롤 위치 감지하여 풋터 표시 여부 결정 (모바일 최적화) useEffect(() => { const handleScroll = () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const windowHeight = window.innerHeight; const documentHeight = document.documentElement.scrollHeight; // 모바일 브라우저의 주소 표시줄 변화를 고려한 여유값 설정 const isMobile = window.innerWidth <= 768; const bottomThreshold = isMobile ? 30 : 10; // 모바일에서는 더 큰 여유값 const scrollThreshold = isMobile ? 100 : 50; // 모바일에서 스크롤 가능 판단 기준 조정 // 페이지가 스크롤 가능한 높이여야 하고, 하단에 도달했을 때 풋터 표시 const canScroll = documentHeight > windowHeight + scrollThreshold; const isAtBottom = canScroll && (scrollTop + windowHeight >= documentHeight - bottomThreshold); setShowFooter(isAtBottom); }; // 스크롤 이벤트와 리사이즈 이벤트 모두 감지 (모바일 주소 표시줄 변화 대응) window.addEventListener('scroll', handleScroll); window.addEventListener('resize', handleScroll); window.addEventListener('orientationchange', handleScroll); // 초기 로드 시에는 약간 지연 후 확인 (DOM과 뷰포트가 완전히 로드된 후) const timeoutId = setTimeout(() => { handleScroll(); }, 800); return () => { window.removeEventListener('scroll', handleScroll); window.removeEventListener('resize', handleScroll); window.removeEventListener('orientationchange', handleScroll); clearTimeout(timeoutId); }; }, []); const sendMessage = async (message) => { if (isLoading || !message.trim()) return; // 언어 감지 및 설정 const detectedLang = detectLanguage(message.trim()); setCurrentLanguage(detectedLang); setIsLoading(true); setLoadingQuestion(message.trim()); // 로딩 중인 질문 저장 // 사용자 메시지 먼저 추가 const userMessage = { id: Date.now(), text: message.trim(), type: 'user' }; setMessages(prev => [...prev, userMessage]); setInputValue(''); // 로딩 메시지 추가 const loadingMessage = { id: Date.now() + 0.5, text: '', type: 'loading' }; setMessages(prev => [...prev, loadingMessage]); try { const data = await window.GachiAI.sendChatMessage(message.trim(), conversationId); // 로딩 메시지 제거 setMessages(prev => prev.filter(msg => msg.type !== 'loading')); if (data.result === 'SUCCESS') { setConversationId(data.conversationId); // 임시 봇 메시지를 먼저 추가 (FAQ와 아티클 없이) const tempBotMessage = { id: Date.now() + 1, text: data.answer, suggestions: data.suggestions || [], type: 'bot', relatedFAQs: [], relatedArticles: [] }; // 로딩 메시지를 제거하고 임시 봇 메시지 추가 setMessages(prev => [...prev.filter(msg => msg.type !== 'loading'), tempBotMessage]); // FAQ와 아티클 데이터를 비동기로 가져오기 Promise.all([ fetchRelatedFAQs(data.answer), fetchRelatedArticles(data.answer) ]).then(([faqs, articles]) => { // 최종 봇 메시지로 업데이트 const finalBotMessage = { ...tempBotMessage, relatedFAQs: faqs, relatedArticles: articles }; setMessages(prev => prev.map(msg => msg.id === tempBotMessage.id ? finalBotMessage : msg )); // AI 답변 완료 후 해당 질문으로 스크롤 scrollToMessage(userMessage.id); }); } else { const langMessages = getLanguageMessages(currentLanguage); const errorMessage = { id: Date.now() + 1, text: langMessages.error, type: 'error' }; setMessages(prev => [...prev, errorMessage]); } } catch (error) { console.error('API Error:', error); // 로딩 메시지 제거 setMessages(prev => prev.filter(msg => msg.type !== 'loading')); const langMessages = getLanguageMessages(currentLanguage); const errorMessage = { id: Date.now() + 1, text: langMessages.connectionError, type: 'error' }; setMessages(prev => [...prev, errorMessage]); } finally { setIsLoading(false); setLoadingQuestion(''); // 로딩 완료 시 질문 초기화 } }; const handleSuggestionClick = (suggestion) => { setInputValue(suggestion); sendMessage(suggestion); }; const handleKeyDown = (e) => { if (e.key === 'Enter') { console.log(e); if (e.nativeEvent.isComposing) { // IME変換中のEnter → 無視 return; } // Enter送信処理 sendMessage(inputValue); e.preventDefault(); } }; // Q&A 토글 함수 const toggleQuestion = (questionId) => { setExpandedQuestions(prev => { const newSet = new Set(prev); if (newSet.has(questionId)) { newSet.delete(questionId); } else { newSet.add(questionId); } return newSet; }); }; // HTML 태그가 포함되어 있는지 확인하는 함수 const containsHTML = (text) => { const htmlRegex = /<[^>]*>/; return htmlRegex.test(text); }; // iframe을 대화창에 맞게 스타일링하는 함수 const processIframeHTML = (html) => { return html.replace( /]*?)(?:\s+style\s*=\s*"[^"]*")?([^>]*?)>/gi, '' ); }; // URL을 자동으로 링크로 변환하는 함수 const processLinks = (text) => { // URL 패턴 정의 (http, https, www로 시작하는 경우) // 끝부분의 특수문자들을 제외하도록 개선된 패턴 const urlPattern = /(https?:\/\/[^\s<>"'\[\]]+|www\.[^\s<>"'\[\]]+)/gi; return text.replace(urlPattern, (match) => { let url = match; // URL 끝부분의 불필요한 문자들 제거 (괄호, 쉼표, 마침표, 세미콜론 등) const endCharsToRemove = /[,;.!?)\]\}]+$/; url = url.replace(endCharsToRemove, ''); // www로 시작하는 경우 http://를 앞에 붙임 const href = url.startsWith('www.') ? `http://${url}` : url; return `${url}`; }); }; // 메시지들을 대화 그룹으로 묶는 함수 (최신 메시지가 위에 오도록 그룹을 역순으로 정렬) const groupMessages = (messages) => { const groups = []; let currentGroup = null; // 메시지를 순서대로 처리하여 올바른 그룹핑을 수행 messages.forEach((message) => { if (message.type === 'user') { // 새로운 대화 그룹 시작 if (currentGroup) { groups.push(currentGroup); } currentGroup = { id: message.id, userMessage: message, aiMessage: null, loadingMessage: null }; } else if (message.type === 'loading' && currentGroup) { // 현재 그룹에 로딩 메시지 추가 currentGroup.loadingMessage = message; } else if (message.type === 'bot' && currentGroup) { // 현재 그룹에 AI 메시지 추가 currentGroup.aiMessage = message; } else if (message.type === 'error' && currentGroup) { // 현재 그룹에 에러 메시지를 AI 메시지로 처리 currentGroup.aiMessage = message; } }); // 마지막 그룹 추가 if (currentGroup) { groups.push(currentGroup); } // 일반 순서대로 반환 (최신 메시지가 아래에 오도록) return groups; }; return ( <> {/* CSS 애니메이션 정의 */} {/* 대화창 */}

{/* 환영 메시지 - 항상 표시 */}

{getLanguageMessages(currentLanguage).welcome}

{/* 추천 질문 버튼들 */}

{getLanguageMessages(currentLanguage).relatedQuestions}

{currentLanguage === 'ko' ? '로딩 중...' : currentLanguage === 'en' ? 'Loading...' : '読み込み中...'}

) : group.aiMessage.relatedFAQs?.length > 0 ? (

{getLanguageMessages(currentLanguage).relatedQuestions}

{group.aiMessage.relatedFAQs.map(qa => { const questionId = 'q-' + qa.id; const isExpanded = expandedQuestions.has(questionId); return (

{isExpanded && (

{qa.answer}

)}

); })}

) : null} {/* 아티클 섹션 */} {group.aiMessage.relatedArticles === undefined ? (

{getLanguageMessages(currentLanguage).relatedArticles}

{currentLanguage === 'ko' ? '로딩 중...' : currentLanguage === 'en' ? 'Loading...' : '読み込み中...'}

) : group.aiMessage.relatedArticles?.length > 0 ? (

{getLanguageMessages(currentLanguage).relatedArticles}

{group.aiMessage.relatedArticles.map(article => { // HTML 태그 제거 및 텍스트 추출 const stripHtml = (html) => { if (!html) return ''; const tmp = document.createElement('div'); tmp.innerHTML = html; return tmp.textContent || tmp.innerText || ''; }; const cleanContent = stripHtml(article.content); const excerpt = cleanContent.length > 60 ? cleanContent.substring(0, 60) + '...' : cleanContent; return (

{article.title}

{excerpt}

); })}

) : null}

)} )}

) : null}

))}

{/* 풋터 */}

{/* AI 입력창 - 개선된 하단 고정 스타일 (모바일 최적화) */}

{/* 위쪽 그라데이션 배경으로 자연스러운 전환 효과 */}

{/* 메인 입력창 컨테이너 */}

setInputValue(e.target.value)} onKeyDown={handleKeyDown} disabled={isLoading} className="flex-1 px-3 py-2 border-0 bg-transparent focus:outline-none text-sm text-orange-500 placeholder-gray-400 min-w-0" />

); }

おすすめの質問

{getLanguageMessages(currentLanguage).relatedQuestions}

{getLanguageMessages(currentLanguage).relatedQuestions}

{qa.question}

{getLanguageMessages(currentLanguage).relatedArticles}

{getLanguageMessages(currentLanguage).relatedArticles}

{article.title}

最新情報