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: '안녕하세요. JIRAN JAPAN AI입니다. 우리는 "안전하고 신뢰할 수 있는 디지털 사회의 실현"을 사명으로 정보보안 분야에서 혁신적인 솔루션을 제공하고 있습니다. 글로벌 시장에서 쌓은 경험과 기술력을 바탕으로 고객의 신뢰를 지속적으로 보호하겠습니다. 질문이나 필요한 정보가 있으시면 언제든 편하게 문의해 주세요.', loading: '현재 신중하게 생각하면서 답변을 준비하고 있습니다…', error: '죄송합니다. 오류가 발생했습니다. 다시 한 번 시도해 주세요.', connectionError: '채팅 서비스에 연결할 수 없습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.', relatedQuestions: '관련 질문', relatedArticles: '관련 아티클', expand: '펼치기', collapse: '접기' }, ja: { welcome: 'こんにちは。JIRAN JAPAN AIです。私たちは「安心・安全なデジタル社会の実現」を使命に、情報セキュリティ分野で革新的なソリューションを提供しています。グローバル市場で培った経験と技術力を活かし、お客様の信頼を守り続けることをお約束します。ご質問や必要な情報がございましたら、どうぞお気軽にお尋ねください。', loading: 'ただいま、丁寧に考えながらお答えを準備しております…', error: '申し訳ございません。エラーが発生しました。もう一度お試しください。', connectionError: 'チャットサービスに接続できません。インターネット接続を確認してもう一度お試しください。', relatedQuestions: '関連質問', relatedArticles: '関連記事', expand: '展開', collapse: '折りたたみ' }, en: { welcome: 'Hello. I am JIRAN JAPAN AI. We are committed to "realizing a safe and secure digital society" and provide innovative solutions in the information security field. Leveraging our experience and technological capabilities cultivated in the global market, we promise to continuously protect our customers\' trust. If you have any questions or need information, please feel free to ask.', 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' } }; 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 [isMobile, setIsMobile] = useState( typeof window !== 'undefined' && window.innerWidth <= 768 ); 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 handleResize = () => { setIsMobile(window.innerWidth <= 768); }; window.addEventListener('resize', handleResize); window.addEventListener('orientationchange', handleResize); return () => { window.removeEventListener('resize', handleResize); window.removeEventListener('orientationchange', handleResize); }; }, []); // 스크롤 위치 감지하여 풋터 표시 여부 결정 (모바일 최적화) useEffect(() => { const handleScroll = () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const windowHeight = window.innerHeight; const documentHeight = document.documentElement.scrollHeight; // 모바일 브라우저의 주소 표시줄 변화를 고려한 여유값 설정 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); }; }, [isMobile]); 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}