import React, { useState, useEffect, useRef } from 'react'; const CONTACT_STEPS = [ { key: 'name', question: '문의 접수를 도와드리겠습니다. 이름을 알려주세요.', errorMsg: '이름을 입력해 주세요.' }, { key: 'company', question: '회사명을 알려주세요.', errorMsg: '회사명을 입력해 주세요.' }, { key: 'email', question: '이메일 주소를 입력해 주세요.', errorMsg: '유효한 이메일 주소를 입력해 주세요. (예: name@company.com)' }, { key: 'phone', question: '전화번호를 알려주세요.', errorMsg: '유효한 전화번호를 입력해 주세요. (예: 010-1234-5678)' }, { key: 'message', question: '문의 내용을 입력해 주세요.', errorMsg: '문의 내용을 입력해 주세요.' }, ]; const validateContactInput = (key, value) => { if (!value.trim()) return false; if (key === 'email') return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value); if (key === 'phone') return /[\d]{2,}/.test(value.replace(/[\s\-+().]/g, '')); return true; }; export default function ChatWidget() { const COOLDOWN_MS = (Constants.cooldownSeconds ?? 3) * 1000; const MAX_MESSAGES = Constants.maxMessagesPerSession ?? 20; const [isOpen, setIsOpen] = useState(false); const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [conversationId, setConversationId] = useState(null); const [hasUnread, setHasUnread] = useState(false); const [lastSentAt, setLastSentAt] = useState(0); const [userMsgCount, setUserMsgCount] = useState(0); const abortRef = useRef(null); const messagesContainerRef = useRef(null); const inputRef = useRef(null); const pageContextCacheRef = useRef({ pages: null, loadingPromise: null, loadedAt: 0 }); const [contactFlow, setContactFlow] = useState({ active: false, step: 0, data: {}, flowId: 0 }); const [contactSubmitting, setContactSubmitting] = useState(false); const lastContactStartRef = useRef(0); const NON_STANDARD_REPLACEMENTS = { '짧답': '짧은 답변', '걍': '그냥', '넘': '너무', 'ㄱㄱ': '진행해 주세요', 'ㅇㅋ': '알겠습니다', 'ㄴㄴ': '아닙니다', 'ㄹㅇ': '정말', '레알': '정말', '존맛': '매우 맛있음', '존좋': '매우 좋음', '꿀팁': '유용한 팁' }; const sanitizeAssistantResponse = (text) => { if (typeof text !== 'string') return text; let normalized = text; Object.entries(NON_STANDARD_REPLACEMENTS).forEach(([from, to]) => { normalized = normalized.split(from).join(to); }); normalized = normalized.replace(/ㅋㅋ+/g, '').replace(/ㅎㅎ+/g, '').replace(/ㅠㅠ+/g, '').replace(/ㅜㅜ+/g, ''); return normalized; }; const renderAssistantMessage = (content) => { const normalized = sanitizeAssistantResponse(content); if (typeof normalized !== 'string') return normalized; const urlRegex = /(https?:\/\/[^\s<>"']+)/g; const parts = normalized.split(urlRegex); return parts.map((part, idx) => { if (/^https?:\/\/[^\s<>"']+$/.test(part)) { return ({part}); } return {part}; }); }; const FAQ_HARDCODED_ANSWERS = { '안녕하세요': `안녕하세요. 나모 사이트빌더 공식 AI 어시스턴트입니다. 무엇을 도와드릴까요?\n\n예) 시작 방법, 가격/플랜, 제품 상세, 사용자 가이드, 비지니스 제안, 아티클, 뉴스룸, 업데이트, 이용약관 등 사이트 관련 페이지 내용을 찾아드릴 수 있습니다. 원하는 항목을 말씀해 주세요.`, '요금제는 어떻게 되나요? 사람 수로 과금하나요?': `아니요. 저희 서비스는 계정(사용자) 수 기준으로 과금하지 않습니다.\n\n동일한 워크스페이스 내에서는 임직원 계정을 제한 없이 생성하여 이용하실 수 있으며, 사용자 수가 증가하더라도 별도의 인원 과금은 발생하지 않습니다.\n\n대신 서비스는 플랜별로 제공되는 월간 크레딧 기준으로 운영됩니다. AI 기능 사용, 사이트 생성 및 운영 등 시스템 자원을 사용하는 만큼 크레딧이 차감되는 방식입니다. 플랜별 상세 금액과 크레딧 제공량은 요금제 페이지( https://www.namo.site/price )에서 확인하실 수 있습니다.`, '"보여주는 홈페이지"에서 "일하는 홈페이지"란 무슨 의미인가요?': `기존의 "보여주는 홈페이지"는 회사 소개, 제품 정보, 포트폴리오 등을 방문자에게 전달하는 데 목적이 있는 홍보 중심의 웹사이트입니다.\n\n반면, "일하는 홈페이지"는 단순히 정보를 보여주는 것을 넘어 웹사이트 자체가 실제 업무를 수행하도록 설계된 홈페이지입니다.\n\n예를 들어 나모사이트빌더에서는 기업의 문서와 데이터를 학습한 AI가 방문자와 대화하고, 질문에 답변하며, 문의를 접수·분류하고, 필요한 정보를 찾아 제공할 수 있습니다. 이를 통해 고객 응대, 정보 안내, 문의 처리와 같은 반복 업무를 홈페이지가 24시간 대신 수행하거나 보조할 수 있습니다.\n\n이를 가능하게 하는 주요 기능은 다음과 같습니다.\n\nAI 챗봇\n문서 기반 지식 학습(RAG)\n위젯 시스템\n사용자 인증 기능\n페이지 에디터\n도메인 연결 기능\n\n예를 들어 다음과 같은 업무를 수행할 수 있습니다.\n\n24시간 고객 문의 응대\n문서에서 필요한 정보를 찾아 답변\n문의 내용을 자동으로 수집 및 분류\n담당자 연결 및 상담 예약 지원\n제안서·신청서 작성 지원\n\n즉, 홈페이지가 단순한 회사 소개 공간을 넘어 고객과 소통하고 업무를 처리하는 디지털 업무 창구로 동작하는 것이 "일하는 홈페이지"의 핵심 개념입니다.\n\n더 다양한 활용 사례는 ( https://stories.namo.site/ )에서 확인하실 수 있습니다.`, '나모사이트빌더에서 어떻게 이미지를 업로드를 하나요?': `네, 가능합니다.\n\n나모사이트빌더는 개발 지식이나 코딩 없이도 홈페이지를 제작하고 운영할 수 있도록 설계되었습니다. 템플릿 선택부터 콘텐츠 수정, AI 기능 설정, 사이트 게시까지 대부분의 작업을 관리자 화면에서 진행할 수 있습니다.\n\n홈페이지 제작 과정은 다음과 같습니다.\n\n1. 템플릿 선택\n새 홈페이지 생성 시 템플릿 마켓(Open Template Market)에서 원하는 디자인을 선택합니다. 이후 텍스트와 이미지만 변경해도 기본 홈페이지를 빠르게 완성할 수 있습니다.\n\n2. 페이지 편집\n페이지 에디터에서 텍스트, 이미지, 레이아웃을 수정하고 필요한 위젯을 추가할 수 있습니다. 별도의 HTML, CSS, JavaScript 작성은 필요하지 않습니다.\n\n3. AI 및 기능 설정\nAI 챗봇, 문서 기반 지식 학습, 사용자 인증, 도메인 연결 등의 기능을 설정할 수 있습니다. 기업 문서와 데이터를 업로드하면 AI가 이를 학습하여 고객 문의에 답변할 수 있습니다.\n\n4. 게시 및 운영\n편집이 완료되면 사이트를 게시하고 도메인을 연결하여 바로 운영할 수 있습니다.\n\n처음 홈페이지를 만드는 분부터 기업용 AI 홈페이지를 구축하려는 담당자까지 별도의 개발 없이 시작할 수 있으며, 필요에 따라 다양한 기능을 추가하여 확장할 수 있습니다.\n\n자세한 사용 방법은 사용자 가이드( https://www.namo.site/guide )에서 확인하실 수 있습니다.`, '코딩 없이 진짜로 홈페이지를 만들 수 있나요?': `네, 가능합니다.\n\n나모사이트빌더는 개발 지식이나 코딩 없이도 홈페이지를 제작하고 운영할 수 있도록 설계되었습니다. 템플릿 선택부터 콘텐츠 수정, AI 기능 설정, 사이트 게시까지 대부분의 작업을 관리자 화면에서 진행할 수 있습니다.\n\n홈페이지 제작 과정은 다음과 같습니다.\n\n1. 템플릿 선택\n새 홈페이지 생성 시 템플릿 마켓(Open Template Market)에서 원하는 디자인을 선택합니다. 이후 텍스트와 이미지만 변경해도 기본 홈페이지를 빠르게 완성할 수 있습니다.\n\n2. 페이지 편집\n페이지 에디터에서 텍스트, 이미지, 레이아웃을 수정하고 필요한 위젯을 추가할 수 있습니다. 별도의 HTML, CSS, JavaScript 작성은 필요하지 않습니다.\n\n3. AI 및 기능 설정\nAI 챗봇, 문서 기반 지식 학습, 사용자 인증, 도메인 연결 등의 기능을 설정할 수 있습니다. 기업 문서와 데이터를 업로드하면 AI가 이를 학습하여 고객 문의에 답변할 수 있습니다.\n\n4. 게시 및 운영\n편집이 완료되면 사이트를 게시하고 도메인을 연결하여 바로 운영할 수 있습니다.\n\n처음 홈페이지를 만드는 분부터 기업용 AI 홈페이지를 구축하려는 담당자까지 별도의 개발 없이 시작할 수 있으며, 필요에 따라 다양한 기능을 추가하여 확장할 수 있습니다.\n\n자세한 사용 방법은 사용자 가이드( https://www.namo.site/guide )에서 확인하실 수 있습니다.` }; const scrollToBottom = () => { if (messagesContainerRef.current) messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight; }; useEffect(() => { if (messages.length > 0) setTimeout(scrollToBottom, 50); }, [messages]); const startContactFlow = () => { const now = Date.now(); if (now - lastContactStartRef.current < 1000) return; lastContactStartRef.current = now; setContactFlow({ active: true, step: 0, data: { name: '', company: '', email: '', phone: '', message: '' }, flowId: now }); setMessages(prev => [...prev, { role: 'user', content: 'Namo Sitebuilder 문의하기 >' }, { role: 'assistant', content: CONTACT_STEPS[0].question }]); }; const startContactFlowRef = useRef(startContactFlow); startContactFlowRef.current = startContactFlow; const handleContactInput = async (userInput) => { const trimmed = userInput.trim(); const currentStep = CONTACT_STEPS[contactFlow.step]; setMessages(prev => [...prev, { role: 'user', content: trimmed }]); if (trimmed === '취소') { setContactFlow({ active: false, step: 0, data: {}, flowId: 0 }); setLoading(true); await new Promise(r => setTimeout(r, 300)); setMessages(prev => [...prev, { role: 'assistant', content: '문의 접수가 취소되었습니다. 다른 질문이 있으시면 말씀해 주세요.' }]); setLoading(false); return; } if (!validateContactInput(currentStep.key, trimmed)) { setLoading(true); await new Promise(r => setTimeout(r, 300)); setMessages(prev => [...prev, { role: 'assistant', content: currentStep.errorMsg }]); setLoading(false); return; } const newData = { ...contactFlow.data, [currentStep.key]: trimmed }; const nextStep = contactFlow.step + 1; setLoading(true); await new Promise(r => setTimeout(r, 400)); if (nextStep < CONTACT_STEPS.length) { setContactFlow(prev => ({ ...prev, step: nextStep, data: newData })); setMessages(prev => [...prev, { role: 'assistant', content: CONTACT_STEPS[nextStep].question }]); } else { setContactFlow(prev => ({ ...prev, step: nextStep, data: newData })); setMessages(prev => [...prev, { role: 'assistant', content: '__CONTACT_CONFIRM__', contactData: newData, flowId: contactFlow.flowId }]); } setLoading(false); }; const submitContactForm = async (data) => { if (contactSubmitting) return; setContactSubmitting(true); setLoading(true); try { const fd = data; const tag = '[Namo Sitebuilder 문의 접수]'; const header = 'Namo Sitebuilder 문의'; const msg = `${tag}\n\n이름: ${fd.name}\n이메일: ${fd.email}\n회사명: ${fd.company}\n전화번호: ${fd.phone}\n\n문의내용: ${fd.message}`; const toAdmins = (() => { const raw = Constants?.adminEmail; return Array.isArray(raw) ? raw.map(v => String(v).trim()).filter(Boolean) : String(raw || '').split(',').map(v => v.trim()).filter(Boolean); })(); await API.Site_SendEmailToAdmin(header, msg); if (toAdmins.length > 0) { const onextResult = await API.ToolCall('onext_notification_as_gachiai_fixed', { body: { whole: false, to: toAdmins, template: 'text', type: 'static', important: false, items: { header, contents: msg }, message: msg, hasConfirmed: true } }); const onextSuccess = onextResult?.success === true; const onextInner = onextResult?.result; const onextDelivered = onextInner?.result === 'success' || onextInner === 'success' || onextResult?.result === 'success'; if (!onextSuccess || !onextDelivered) throw new Error('OFFICENEXT_DELIVERY_FAILED'); } API.ToolCall('httpPostRequest', { body: { url: Constants.gasUrl || '', data: { type: '문의하기', name: fd.name, email: fd.email, company: fd.company, phone: fd.phone, message: fd.message, page: typeof window !== 'undefined' ? window.location.pathname : '' } } }).catch(err => console.warn('Sheets 기록 실패:', err)); setMessages(prev => [...prev, { role: 'assistant', content: '문의 접수가 완료되었습니다.\n\n기업용 AI 웹 플랫폼 나모 사이트빌더 하나로! Namo Sitebuilder에 관심을 가져주셔서 감사합니다.\n남겨주신 내용은 담당자에게 즉시 전달되었으며, 검토 후 기재하신 연락처로 신속히 답변드리겠습니다.' }]); setContactFlow({ active: false, step: 0, data: {}, flowId: 0 }); } catch (err) { const errorMsg = err.message?.includes('OFFICENEXT') ? '문의는 접수되었지만 알림 전송에 실패했습니다. 잠시 후 다시 시도해 주세요.' : '전송 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.'; setMessages(prev => [...prev, { role: 'assistant', content: errorMsg }]); } finally { setContactSubmitting(false); setLoading(false); } }; useEffect(() => { const checkCookie = () => { try { if (document.cookie.includes('open-gachi-contact=1')) { document.cookie = 'open-gachi-contact=;path=/;max-age=0'; setIsOpen(true); setTimeout(() => { startContactFlowRef.current(); }, 300); return true; } } catch(e) {} return false; }; if (!checkCookie()) { const interval = setInterval(() => { if (checkCookie()) clearInterval(interval); }, 300); const timeout = setTimeout(() => clearInterval(interval), 10000); return () => { clearInterval(interval); clearTimeout(timeout); }; } }, []); useEffect(() => { const handleOpenContact = () => { setIsOpen(true); setTimeout(() => { startContactFlowRef.current(); }, 150); }; let bc = null; try { bc = new BroadcastChannel('gachi-contact-channel'); bc.onmessage = (event) => { if (event.data?.type === 'open-gachi-contact' || event.data?.type === 'open-gachi-contact-with-plan') handleOpenContact(); }; } catch(e) {} const handleMessage = (event) => { if (event.data?.type === 'open-gachi-contact' || event.data?.type === 'open-gachi-contact-with-plan') handleOpenContact(); }; window.addEventListener('message', handleMessage); const handleCustom = () => { handleOpenContact(); }; window.addEventListener('open-gachi-contact', handleCustom); return () => { if (bc) bc.close(); window.removeEventListener('message', handleMessage); window.removeEventListener('open-gachi-contact', handleCustom); }; }, []); useEffect(() => { if (isOpen) { setHasUnread(false); setTimeout(() => inputRef.current?.focus(), 300); } const isMobile = window.innerWidth <= 480; if (isMobile) { if (isOpen) { document.body.style.overflow = 'hidden'; document.body.style.position = 'fixed'; document.body.style.width = '100%'; } else { document.body.style.overflow = ''; document.body.style.position = ''; document.body.style.width = ''; } } return () => { document.body.style.overflow = ''; document.body.style.position = ''; document.body.style.width = ''; }; }, [isOpen]); useEffect(() => { if (isOpen) { API.Site_GetMenuItems().then(r => loadPublicPagesContext(r.items || [])).catch(() => {}); } }, [isOpen]); const stopLoading = () => { if (abortRef.current) { abortRef.current.abort(); abortRef.current = null; } setLoading(false); }; const PAGE_CACHE_TTL_MS = 10 * 60 * 1000; const PAGE_LOAD_TIMEOUT_MS = 4000; const PAGE_SETTLE_WAIT_MS = 300; const PAGE_TEXT_MAX_CHARS = 4000; const TOTAL_CONTEXT_MAX_CHARS = 16000; const normalizeText = (text = '') => String(text).replace(/\s+/g, ' ').trim(); const buildSearchTokens = (text = '') => normalizeText(text).toLowerCase().replace(/[^\w가-힣\s/-]/g, ' ').split(/\s+/).map(t => t.trim()).filter(t => t.length >= 2); const chunkText = (text = '', size = 850, overlap = 120) => { const normalized = normalizeText(text); if (!normalized) return []; if (normalized.length <= size) return [normalized]; const chunks = []; let start = 0; while (start < normalized.length) { const end = Math.min(normalized.length, start + size); chunks.push(normalized.slice(start, end)); if (end >= normalized.length) break; start = Math.max(0, end - overlap); } return chunks; }; const getVisibleTextFromIframe = (origin, path) => { return new Promise((resolve, reject) => { const iframe = document.createElement('iframe'); iframe.setAttribute('aria-hidden', 'true'); iframe.style.position = 'fixed'; iframe.style.left = '-99999px'; iframe.style.top = '-99999px'; iframe.style.width = '1px'; iframe.style.height = '1px'; iframe.style.opacity = '0'; iframe.style.pointerEvents = 'none'; let finished = false; const finalize = (fn) => { if (finished) return; finished = true; clearTimeout(timeoutId); iframe.onload = null; try { iframe.remove(); } catch (e) {} fn(); }; const timeoutId = setTimeout(() => { finalize(() => reject(new Error(`IFRAME_TIMEOUT:${path}`))); }, PAGE_LOAD_TIMEOUT_MS); iframe.onload = () => { setTimeout(() => { try { const doc = iframe.contentDocument; if (!doc || !doc.body) throw new Error('IFRAME_NO_DOCUMENT'); doc.querySelectorAll('script, style, noscript, template, [data-namo-chatbot-root]').forEach(el => el.remove()); const text = normalizeText(doc.body.innerText || '').slice(0, PAGE_TEXT_MAX_CHARS); finalize(() => resolve(text)); } catch (err) { finalize(() => reject(err)); } }, PAGE_SETTLE_WAIT_MS); }; iframe.src = `${origin}${path}`; document.body.appendChild(iframe); }); }; const loadPublicPagesContext = async (menuItems = []) => { const cache = pageContextCacheRef.current; const isFresh = Array.isArray(cache.pages) && (Date.now() - (cache.loadedAt || 0) < PAGE_CACHE_TTL_MS); if (isFresh) return cache.pages; if (cache.loadingPromise) return cache.loadingPromise; const origin = typeof window !== 'undefined' ? window.location.origin : 'https://www.namo.site'; const dedupedPublicPages = []; const seenPaths = new Set(); (menuItems || []).filter(p => !p?.requiredAuthLevel || p.requiredAuthLevel === 0).forEach((p) => { const rawPath = String(p?.path || '/'); const safePath = rawPath.startsWith('/') ? rawPath : `/${rawPath}`; if (seenPaths.has(safePath)) return; seenPaths.add(safePath); dedupedPublicPages.push({ title: p?.title || safePath, path: safePath }); }); const loadingPromise = (async () => { const pages = await Promise.all( dedupedPublicPages.map(async (p) => { try { const text = await getVisibleTextFromIframe(origin, p.path); return { ...p, text }; } catch (err) { console.warn('[RAG] 페이지 텍스트 수집 실패:', p.path, err); return { ...p, text: '' }; } }) ); const validPages = pages.filter(p => p.text && p.text.length > 0); pageContextCacheRef.current = { pages: validPages, loadingPromise: null, loadedAt: Date.now() }; return validPages; })(); pageContextCacheRef.current.loadingPromise = loadingPromise; return loadingPromise; }; const pickRelevantPageSnippets = (pages = [], userMessage = '') => { const queryTokens = buildSearchTokens(userMessage); const priceKeywords = ['가격', '요금', '플랜', '구독', '비용', '월간', '연간', 'credit', '크레딧']; const asksPrice = priceKeywords.some(k => userMessage.toLowerCase().includes(k.toLowerCase())); if (!Array.isArray(pages) || pages.length === 0) return []; const scoredChunks = []; pages.forEach((page) => { const chunks = chunkText(page.text || '', 850, 120); chunks.forEach((chunk, idx) => { const lowChunk = chunk.toLowerCase(); const lowTitle = (page.title || '').toLowerCase(); const lowPath = (page.path || '').toLowerCase(); let score = 0; queryTokens.forEach((t) => { if (lowChunk.includes(t)) score += 1; if (lowTitle.includes(t) || lowPath.includes(t)) score += 2; }); if (asksPrice) { priceKeywords.forEach((k) => { if (lowChunk.includes(k.toLowerCase())) score += 2; if (lowTitle.includes(k.toLowerCase()) || lowPath.includes(k.toLowerCase())) score += 3; }); } scoredChunks.push({ title: page.title, path: page.path, chunk, idx, score }); }); }); const ranked = scoredChunks.filter(v => v.score > 0).sort((a, b) => b.score - a.score).slice(0, 10); const snippets = []; let totalLen = 0; for (const item of ranked) { const block = `## ${item.title} (${item.path}) [섹션 ${item.idx + 1}]\n${item.chunk}`; if (totalLen + block.length > TOTAL_CONTEXT_MAX_CHARS) break; snippets.push(block); totalLen += block.length; } return snippets; }; const buildContextMessage = async (userMessage) => { try { let searchResult = { results: [] }; let menuResult = { items: [] }; let pageSnippets = []; try { const [sr, mr] = await Promise.all([API.Docs_SearchDocuments({ query: userMessage, limit: 10, type: 'ARTICLE' }), API.Site_GetMenuItems()]); searchResult = sr || { results: [] }; menuResult = mr || { items: [] }; } catch (apiErr) { console.warn('[RAG] 문서/메뉴 API 호출 실패:', apiErr); } try { const pageContexts = await loadPublicPagesContext(menuResult.items || []); pageSnippets = pickRelevantPageSnippets(pageContexts, userMessage); } catch (pageErr) { console.warn('[RAG] 공개 페이지 렌더 텍스트 수집 실패:', pageErr); } const publicPages = (menuResult.items || []).filter(p => !p?.requiredAuthLevel || p.requiredAuthLevel === 0); const dedupMenuLines = []; const seen = new Set(); publicPages.forEach((p) => { const path = String(p?.path || '/'); if (seen.has(path)) return; seen.add(path); dedupMenuLines.push(` - ${p?.title || path} (${path})`); }); const DISTANCE_THRESHOLD = 0.72; const results = searchResult.results || []; const filteredDocs = results.filter(doc => typeof doc._distance !== 'number' || doc._distance <= DISTANCE_THRESHOLD); const relatedDocs = filteredDocs.slice(0, 5).map(doc => ({ id: doc.id, title: doc.title, thumbUrl: doc.thumbUrl || null, excerpt: normalizeText((doc.content || '').replace(/<[^>]+>/g, ' ')).slice(0, 120) })); const docsSection = filteredDocs.slice(0, 6).map(doc => { const text = normalizeText((doc.content || '').replace(/<[^>]+>/g, ' ')).slice(0, 700); return `## ${doc.title}\n${text}`; }).join('\n\n'); const staticFallbackSnippets = pageSnippets.length === 0 ? dedupMenuLines.slice(0, 8).map(line => `## 공개 페이지 목록\n${line}`) : []; const finalPageSnippets = pageSnippets.length > 0 ? pageSnippets : staticFallbackSnippets; const systemPrompt = ['당신은 Namo Sitebuilder의 공식 AI 어시스턴트입니다.', '답변의 최우선 근거는 제공된 "사이트 전체 공개 페이지의 실제 표시 텍스트(렌더 결과)"입니다. 현재 페이지에만 국한하지 마세요.', '가격/요금/플랜/구독/비용 질문에는 하드코딩 지식이나 추정값을 사용하지 말고, 반드시 제공된 렌더 텍스트 근거만 사용하세요.', '근거 텍스트에 없거나 불확실한 내용은 추측하지 말고, 확인이 어렵다고 명확히 안내하세요.', '비표준 표현(줄임말, 은어, 신조어, 자음/모음 반복)을 사용하지 말고 표준 한국어 문어체로 답변하세요.', '', '=== 사이트 정보 ===', '사이트명: Namo Sitebuilder (나모사이트빌더)', '설명: 기업의 데이터를 학습하고 고객과 대화하며 비즈니스를 수행하는 AI 에이전트 홈페이지 빌더', dedupMenuLines.length > 0 ? `주요 공개 페이지:\n${dedupMenuLines.join('\n')}` : '주요 공개 페이지: 확인되지 않음'].filter(Boolean).join('\n'); const pagesSection = finalPageSnippets.length > 0 ? `\n\n=== 사이트 전체 공개 페이지 렌더 텍스트 발췌 ===\n${finalPageSnippets.join('\n\n')}` : ''; const docSectionText = docsSection ? `\n\n=== 문서 검색 기반 보조 컨텍스트(폴백) ===\n${docsSection}` : ''; const fullPrompt = `${systemPrompt}${pagesSection}${docSectionText}\n\n=== 사용자 질문 ===\n${userMessage}`; const cappedPrompt = fullPrompt.length > 22000 ? fullPrompt.slice(0, 22000) : fullPrompt; return { prompt: cappedPrompt, relatedDocs }; } catch (e) { console.error('[RAG] 컨텍스트 빌드 실패:', e); return { prompt: `당신은 Namo Sitebuilder 공식 AI 어시스턴트입니다. 제공된 정보가 부족하면 추측하지 말고 확인이 어렵다고 답하세요.\n\n사용자 질문: ${userMessage}`, relatedDocs: [] }; } }; const sendMessageWithText = async (text) => { if (!text.trim() || loading) return; if (text.trim() === 'Namo Sitebuilder 문의하기 >') { if (contactFlow.active) setContactFlow({ active: false, step: 0, data: {}, flowId: 0 }); startContactFlow(); return; } if (contactFlow.active) setContactFlow({ active: false, step: 0, data: {}, flowId: 0 }); if (userMsgCount >= MAX_MESSAGES) { setError(`이 세션에서 최대 ${MAX_MESSAGES}개의 메시지를 보낼 수 있습니다.`); return; } const now = Date.now(); const elapsed = now - lastSentAt; if (lastSentAt > 0 && elapsed < COOLDOWN_MS) { setError(`잠시 후 다시 시도해 주세요. (${Math.ceil((COOLDOWN_MS - elapsed) / 1000)}초 후)`); return; } const userMessage = text.trim(); const hardcodedAnswer = FAQ_HARDCODED_ANSWERS[userMessage] || null; if (hardcodedAnswer) { setError(null); setLoading(true); setLastSentAt(Date.now()); setUserMsgCount(prev => prev + 1); setMessages(prev => [...prev, { role: 'user', content: userMessage }]); try { await new Promise(resolve => setTimeout(resolve, 900)); setMessages(prev => [...prev, { role: 'assistant', content: hardcodedAnswer }]); if (!isOpen) setHasUnread(true); } finally { setLoading(false); } return; } setError(null); setLoading(true); setLastSentAt(Date.now()); setUserMsgCount(prev => prev + 1); const controller = new AbortController(); abortRef.current = controller; setMessages(prev => [...prev, { role: 'user', content: userMessage }]); let relatedDocs = []; try { const ctx = await buildContextMessage(userMessage); relatedDocs = ctx.relatedDocs; if (controller.signal.aborted) return; const result = await API.Chat_Message(ctx.prompt, conversationId); if (controller.signal.aborted) return; if (result.conversationId) setConversationId(result.conversationId); setMessages(prev => [...prev, { role: 'assistant', content: result.response, relatedDocs }]); if (!isOpen) setHasUnread(true); } catch (err) { if (controller.signal.aborted) return; if (err.message?.includes('401') || err.message?.includes('Unauthorized')) { setConversationId(null); try { const r2 = await API.Chat_Message(userMessage, null); if (controller.signal.aborted) return; if (r2.conversationId) setConversationId(r2.conversationId); setMessages(prev => [...prev, { role: 'assistant', content: r2.response, relatedDocs }]); if (!isOpen) setHasUnread(true); return; } catch (e2) { console.error('[Chat API] 재시도 실패:', e2); setError('일시적인 오류로 답변을 가져오지 못했습니다. 잠시 후 다시 시도해 주세요.'); setMessages(prev => prev.slice(0, -1)); return; } } console.error('[Chat API] 호출 실패:', err); setError('일시적인 오류로 답변을 가져오지 못했습니다. 잠시 후 다시 시도해 주세요.'); setMessages(prev => prev.slice(0, -1)); } finally { if (!controller.signal.aborted) setLoading(false); abortRef.current = null; } }; const sendMessage = async () => { if (!input.trim() || loading) return; if (contactFlow.active && contactFlow.step < CONTACT_STEPS.length) { const text = input.trim(); setInput(''); handleContactInput(text); return; } if (contactFlow.active) setContactFlow({ active: false, step: 0, data: {}, flowId: 0 }); if (userMsgCount >= MAX_MESSAGES) { setError(`이 세션에서 최대 ${MAX_MESSAGES}개의 메시지를 보낼 수 있습니다.`); return; } const now = Date.now(); const elapsed = now - lastSentAt; if (lastSentAt > 0 && elapsed < COOLDOWN_MS) { setError(`잠시 후 다시 시도해 주세요. (${Math.ceil((COOLDOWN_MS - elapsed) / 1000)}초 후)`); return; } const userMessage = input.trim(); const hardcodedAnswer = FAQ_HARDCODED_ANSWERS[userMessage] || null; if (hardcodedAnswer) { setInput(''); setError(null); setLastSentAt(Date.now()); setUserMsgCount(prev => prev + 1); setMessages(prev => [...prev, { role: 'user', content: userMessage }, { role: 'assistant', content: hardcodedAnswer }]); if (!isOpen) setHasUnread(true); return; } setInput(''); setError(null); setLoading(true); setLastSentAt(Date.now()); setUserMsgCount(prev => prev + 1); const controller = new AbortController(); abortRef.current = controller; setMessages(prev => [...prev, { role: 'user', content: userMessage }]); let relatedDocs = []; try { const ctx = await buildContextMessage(userMessage); relatedDocs = ctx.relatedDocs; if (controller.signal.aborted) return; const result = await API.Chat_Message(ctx.prompt, conversationId); if (controller.signal.aborted) return; if (result.conversationId) setConversationId(result.conversationId); setMessages(prev => [...prev, { role: 'assistant', content: result.response, relatedDocs }]); if (!isOpen) setHasUnread(true); } catch (err) { if (controller.signal.aborted) return; if (err.message?.includes('401') || err.message?.includes('Unauthorized')) { setConversationId(null); try { const r2 = await API.Chat_Message(userMessage, null); if (controller.signal.aborted) return; if (r2.conversationId) setConversationId(r2.conversationId); setMessages(prev => [...prev, { role: 'assistant', content: r2.response, relatedDocs }]); if (!isOpen) setHasUnread(true); return; } catch (e2) { console.error('[Chat API] 재시도 실패:', e2); setError('일시적인 오류로 답변을 가져오지 못했습니다. 잠시 후 다시 시도해 주세요.'); setMessages(prev => prev.slice(0, -1)); return; } } console.error('[Chat API] 호출 실패:', err); setError('일시적인 오류로 답변을 가져오지 못했습니다. 잠시 후 다시 시도해 주세요.'); setMessages(prev => prev.slice(0, -1)); } finally { if (!controller.signal.aborted) setLoading(false); abortRef.current = null; } }; const handleKeyPress = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }; const startNewConversation = () => { setMessages([]); setConversationId(null); setError(null); setLastSentAt(0); setUserMsgCount(0); setContactFlow({ active: false, step: 0, data: {}, flowId: 0 }); }; const SUGGESTED = [ '"보여주는 홈페이지"에서 "일하는 홈페이지"란 무슨 의미인가요?', '나모사이트빌더에서 어떻게 이미지를 업로드를 하나요?', '코딩 없이 진짜로 홈페이지를 만들 수 있나요?', '요금제는 어떻게 되나요? 사람 수로 과금하나요?', 'Namo Sitebuilder 문의하기 >', ]; const isOrangeBtn = (q) => q === 'Namo Sitebuilder 문의하기 >'; const CHATBOT_IMG = 'https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F17c440b835e24b05bd68%2Fassets%2Fimg_chatbot.png?alt=media'; const confirmLabels = [{ label: '이름', key: 'name' }, { label: '회사명', key: 'company' }, { label: '이메일', key: 'email' }, { label: '전화번호', key: 'phone' }, { label: '문의 내용', key: 'message' }]; return ( <> {isOpen && (

Namo SiteBuilder 챗봇

0 ? '4px' : '0', marginBottom: messages.length > 0 ? '4px' : '0' }}> {messages.length === 0 && (<>

무엇이든 물어보세요

아래에 메시지를 입력해 대화를 시작하세요.

)}

{SUGGESTED.map((q, i) => ())}

{messages.length > 0 &&

}

{messages.map((msg, index) => { const isUser = msg.role === 'user'; const isContactConfirm = msg.role === 'assistant' && msg.content === '__CONTACT_CONFIRM__'; const isActiveConfirm = isContactConfirm && msg.flowId === contactFlow.flowId && contactFlow.active && contactFlow.step >= CONTACT_STEPS.length; return (

{!isUser && (

)} {isContactConfirm ? (

문의 내용 확인

{confirmLabels.map((item, i) => (

{item.label} {msg.contactData?.[item.key]}

))}

{isActiveConfirm && (

)}

) : (

{isUser ? msg.content : renderAssistantMessage(msg.content)}

)}

); })} {loading && (

)}

{error &&

⚠ {error}

}

e.currentTarget.style.borderColor = 'rgba(234,88,12,0.5)'} onBlurCapture={e => e.currentTarget.style.borderColor = 'rgba(0,0,0,0.1)'}> setInput(e.target.value)} onKeyPress={handleKeyPress} placeholder="메시지를 입력하세요..." readOnly={loading} className="chat-input" style={{ flex: 1, background: 'transparent', border: 'none', fontSize: '14px', color: '#0f172a', outline: 'none', boxShadow: 'none' }} />

)} ); }