import React, { useState, useRef, useEffect } from 'react'; // 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 [hasScrolledOnce, setHasScrolledOnce] = useState(false); const [showFooter, setShowFooter] = useState(false); const [expandedQuestions, setExpandedQuestions] = useState(new Set()); const chatContainerRef = useRef(null); // 타이핑 애니메이션 컴포넌트 const TypingAnimation = () => { const [displayText, setDisplayText] = useState(''); const fullText = 'ただいま、丁寧に考えながらお答えを準備しております…'; 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); }; }, []); // 메시지 추가될 때마다 스크롤을 아래로 이동 useEffect(() => { if (messages.length > 0) { setTimeout(() => { window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); }, 100); } }, [messages]); const sendMessage = async (message) => { if (isLoading || !message.trim()) return; setIsLoading(true); // 사용자 메시지 먼저 추가 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 )); }); // 첫 번째 스크롤 완료 표시 if (!hasScrolledOnce) { setHasScrolledOnce(true); } } else { const errorMessage = { id: Date.now() + 1, text: '申し訳ございません。エラーが発生しました。もう一度お試しください。', type: 'error' }; setMessages(prev => [...prev, errorMessage]); } } catch (error) { console.error('API Error:', error); // 로딩 메시지 제거 setMessages(prev => prev.filter(msg => msg.type !== 'loading')); const errorMessage = { id: Date.now() + 1, text: 'チャットサービスに接続できません。インターネット接続を確認してもう一度お試しください。', type: 'error' }; setMessages(prev => [...prev, errorMessage]); } finally { setIsLoading(false); } }; 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 애니메이션 정의 */} {/* 대화창 */}

{/* 초기 환영 메시지 */} {messages.length === 0 && (

こんにちは。JIRAN JAPAN AIです。私たちは「安心・安全なデジタル社会の実現」を使命に、情報セキュリティ分野で革新的なソリューションを提供しています。グローバル市場で培った経験と技術力を活かし、お客様の信頼を守り続けることをお約束します。ご質問や必要な情報がございましたら、どうぞお気軽にお尋ねください。

)}

{groupMessages(messages).map((group) => (

{/* 사용자 메시지 */}

🧡

{group.userMessage.text}

{/* AI 답변 영역 */}

{group.loadingMessage ? ( /* AI 로딩 메시지 */

) : group.aiMessage ? ( /* AI 메시지 */

{group.aiMessage.type === 'error' ? (

申し訳ございません。エラーが発生しました。もう一度お試しください。

) : ( <>

{containsHTML(group.aiMessage.text) ? (

) : (

)}

{group.aiMessage.suggestions && group.aiMessage.suggestions.length > 0 && (

{group.aiMessage.suggestions.map((suggestion, index) => ( ))}

)} {/* Q&A와 아티클 섹션 */} {!group.aiMessage.type?.includes('error') && (

{/* Q&A 섹션 */} {group.aiMessage.relatedFAQs === undefined ? (

{article.title}

{excerpt}

); })}

) : null}

)} )}

) : null}

))}

{/* 풋터 */}

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

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

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

setInputValue(e.target.value)} onKeyDown={handleKeyDown} 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" />

); }

関連Q&A

関連Q&A

{qa.question}

関連記事

関連記事

{article.title}