import React, { useEffect, useState, useRef } 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: 'こんにちは！人数よりも過ごし方を、にぎやかさよりも落ち着きを大切にしながら——海の目の前で1日1組限定の滞在を丁寧にご案内する、OCEANVIEW KAMOGAWA AIです。何をお手伝いしましょうか？', loading: 'ただいま、丁寧に考えながらお答えを準備しております…', error: '申し訳ございません。エラーが発生しました。もう一度お試しください。', connectionError: 'チャットサービスに接続できません。インターネット接続を確認してもう一度お試しください。', placeholder: 'どのようにお手伝いできますか？', relatedQuestions: '関連質問', relatedArticles: '関連記事' }, ja: { welcome: 'こんにちは！人数よりも過ごし方を、にぎやかさよりも落ち着きを大切にしながら——海の目の前で1日1組限定の滞在を丁寧にご案内する、OCEANVIEW KAMOGAWA AIです。何をお手伝いしましょうか？', loading: 'ただいま、丁寧に考えながらお答えを準備しております…', error: '申し訳ございません。エラーが発生しました。もう一度お試しください。', connectionError: 'チャットサービスに接続できません。インターネット接続を確認してもう一度お試しください。', placeholder: 'どのようにお手伝いできますか？', relatedQuestions: '関連質問', relatedArticles: '関連記事' }, en: { welcome: 'Hello! We\'re OCEANVIEW KAMOGAWA AI, here to carefully guide you through a stay limited to one group per day right in front of the ocean—putting how you spend your time ahead of headcount, and calm ahead of bustle. How can I help you?', 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.', placeholder: 'How can I help you?', relatedQuestions: 'Related Questions', relatedArticles: 'Related Articles' } }; return messages[lang] || messages.ja; }; // よくある質問（OCEANVIEW KAMOGAWA ウェルカム用） const DEFAULT_WELCOME_QUESTIONS = [ { id: 'q1', question: '周辺スポットについて教えてください。' }, { id: 'q2', question: 'オーシャンビュー鴨川はどこにありますか？' }, { id: 'contact-question', question: '担当者に問い合わせたいです。' } ]; // FAQ 翻訳関数 const translateFAQs = async (faqs) => { if (!faqs || faqs.length === 0) return faqs; try { // FAQ質問と回答を番号付きテキストとして結合 const faqsText = faqs.map((faq, idx) => `${idx + 1}.\nQ: ${faq.question}\nA: ${faq.answer}` ).join('\n\n'); const prompt = `以下の韓国語のQ&Aペアを日本語に翻訳してください。同じ番号付けとQ:/A:形式を維持してください。質問と回答の両方を正確に翻訳してください。同じ形式で翻訳されたQ&Aペアのみを返してください:\n\n${faqsText}`; const data = await window.GachiAI.sendChatMessage(prompt, null); if (data.result === 'SUCCESS' && data.answer) { // AI応答をパースして各FAQにマッピング const translatedFaqs = []; const sections = data.answer.split(/\n\d+\.\s*\n/).filter(s => s.trim()); faqs.forEach((faq, idx) => { const section = sections[idx] || sections.find(s => s.includes('Q:') && s.includes('A:')); if (section) { const qMatch = section.match(/Q:\s*(.+?)(?=\nA:)/s); const aMatch = section.match(/A:\s*(.+?)$/s); if (qMatch && aMatch) { translatedFaqs.push({ ...faq, question: qMatch[1].trim(), answer: aMatch[1].trim(), originalQuestion: faq.question, originalAnswer: faq.answer }); } else { translatedFaqs.push(faq); } } else { translatedFaqs.push(faq); } }); return translatedFaqs.length > 0 ? translatedFaqs : faqs; } return faqs; } catch (error) { console.error('FAQ翻訳失敗:', error); return faqs; } }; // FAQ データを取得する関数 const fetchRelatedFAQs = async (content) => { try { 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); // FAQを日本語に翻訳 const translatedFaqs = await translateFAQs(sortedFaqs); return translatedFaqs; } return []; } catch (error) { console.error('FAQ データロード失敗:', error); return []; } }; // アーティクル翻訳関数 const translateArticles = async (articles) => { if (!articles || articles.length === 0) return articles; try { // アーティクルタイトルと内容を番号付きテキストとして結合 const articlesText = articles.map((article, idx) => { // 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 > 100 ? cleanContent.substring(0, 100) : cleanContent; return `${idx + 1}.\nTitle: ${article.title}\nContent: ${excerpt}`; }).join('\n\n'); const prompt = `以下の韓国語のアーティクルタイトルと内容の抜粋を日本語に翻訳してください。同じ番号付けとTitle:/Content:形式を維持してください。同じ形式で翻訳されたテキストのみを返してください:\n\n${articlesText}`; const data = await window.GachiAI.sendChatMessage(prompt, null); if (data.result === 'SUCCESS' && data.answer) { // AI応答をパースして各アーティクルにマッピング const translatedArticles = []; const sections = data.answer.split(/\n\d+\.\s*\n/).filter(s => s.trim()); articles.forEach((article, idx) => { const section = sections[idx] || sections.find(s => s.includes('Title:') && s.includes('Content:')); if (section) { const titleMatch = section.match(/Title:\s*(.+?)(?=\nContent:)/s); const contentMatch = section.match(/Content:\s*(.+?)$/s); if (titleMatch) { translatedArticles.push({ ...article, title: titleMatch[1].trim(), originalTitle: article.title }); } else { translatedArticles.push(article); } } else { translatedArticles.push(article); } }); return translatedArticles.length > 0 ? translatedArticles : articles; } return articles; } catch (error) { console.error('アーティクル翻訳失敗:', error); return articles; } }; // アーティクルデータを取得する関数 const fetchRelatedArticles = async (content) => { try { 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); // アーティクルを日本語に翻訳 const translatedArticles = await translateArticles(sortedArticles); return translatedArticles; } return []; } catch (error) { console.error('アーティクルデータロード失敗:', error); return []; } }; // メール本文生成関数 const getContactEmailBody = (formData) => { return `[OCEANVIEW_KAMOGAWA AI チャット窓口お問い合わせ受付] 内容: 名前: ${formData.name} メール: ${formData.email} ご宿泊予定人数: ${formData.company || '未入力'} 電話番号: ${formData.phone || '未入力'} 件名: ${formData.subject || '未入力'} お問い合わせ内容: ${formData.message} `.trim(); }; // 入力値サニタイズ（XSS対策） const sanitizeInput = (input) => { if (!input) return ''; return input .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, ''') .replace(/\//g, '/'); }; // メール形式検証 const isValidEmail = (email) => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); }; // GachiAI Function CallによるOfficenext通知送信 const sendToOfficenextViaBot = async (formData, conversationId, setConversationId) => { try { const notificationMessage = `[OCEANVIEW_KAMOGAWA AI チャット窓口お問い合わせ受付] 名前: ${formData.name} メール: ${formData.email} ご宿泊予定人数: ${formData.company || '未入力'} 電話番号: ${formData.phone || '未入力'} 件名: ${formData.subject || '未入力'} お問い合わせ内容: ${formData.message}`; const botMessage = `ユーザー確認後、以下のメッセージをOfficenextへ送信してください: ${notificationMessage} hasConfirmedをtrueに設定し、onext_notification_as_gachiai_fixed関数を即時実行してください。`; const data = await window.GachiAI.sendChatMessage(botMessage, conversationId); if (data.result === 'SUCCESS') { if (data.conversationId && data.conversationId !== conversationId) { setConversationId(data.conversationId); } const botAnswer = data.answer || ''; const hasError = botAnswer.includes('>>> Error') || botAnswer.includes('Could not') || botAnswer.includes('問題が発生') || botAnswer.toLowerCase().includes('failed'); const hasSuccess = botAnswer.includes('通知が送信されました') || botAnswer.includes('成功'); return { success: hasSuccess && !hasError, botAnswer }; } else { throw new Error('ボット応答失敗: ' + (data.message || 'Unknown error')); } } catch (error) { return { success: false, error }; } }; const ChatbotWidget = () => { // チャットボットポップアップ状態 const [isChatOpen, setIsChatOpen] = useState(false); const [chatMessages, setChatMessages] = useState([]); const [chatInputValue, setChatInputValue] = useState(''); const [chatConversationId, setChatConversationId] = useState(null); const [isChatLoading, setIsChatLoading] = useState(false); const [currentLanguage, setCurrentLanguage] = useState('ja'); const [expandedQuestions, setExpandedQuestions] = useState(new Set()); const chatContainerRef = useRef(null); const [initialQuestions, setInitialQuestions] = useState(DEFAULT_WELCOME_QUESTIONS); const [allQuestions, setAllQuestions] = useState([]); // 全質問保存 const [lastScrolledMessageId, setLastScrolledMessageId] = useState(null); // 最後にスクロールしたメッセージID const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); // モバイルメニュー開閉状態 // モバイル(幅640px以下): 55px / PC: 84px（Header Menuの高さに合わせる） const getHeaderHeight = () => (typeof window !== 'undefined' && window.innerWidth <= 640 ? 55 : 84); const [headerHeight, setHeaderHeight] = useState(() => (typeof window !== 'undefined' && window.innerWidth <= 640 ? 55 : 84)); // お問い合わせフォーム関連状態 const [contactFormData, setContactFormData] = useState({ name: '', email: '', company: '', phone: '', subject: '', message: '' }); const [isSubmittingContact, setIsSubmittingContact] = useState(false); const [contactSubmitStatus, setContactSubmitStatus] = useState(null); const [contactSubmitAttempted, setContactSubmitAttempted] = useState(false); const [submitProgress, setSubmitProgress] = useState(''); const [contactFormStartTime, setContactFormStartTime] = useState(null); useEffect(() => { loadInitialQuestions(); // Chat Widgetロード完了をグローバルに通知 window.hasChatWidget = true; return () => { window.hasChatWidget = false; }; }, []); // モバイルメニュー状態検知 useEffect(() => { const checkMobileMenuState = () => { const newMobileMenuOpen = !!window.isMobileMenuOpen; // モバイルメニューが開いたらチャットボットを閉じる if (newMobileMenuOpen && !isMobileMenuOpen) { setIsChatOpen(false); } setIsMobileMenuOpen(newMobileMenuOpen); }; // 初期状態確認 checkMobileMenuState(); // 定期的に状態確認（モバイルメニュー変更検知） const interval = setInterval(checkMobileMenuState, 100); return () => clearInterval(interval); }, [isMobileMenuOpen]); // ヘッダー高さを画面幅に応じて設定（モバイル640px以下: 55px / PC: 84px） useEffect(() => { const updateHeaderHeight = () => setHeaderHeight(getHeaderHeight()); updateHeaderHeight(); window.addEventListener('resize', updateHeaderHeight); return () => window.removeEventListener('resize', updateHeaderHeight); }, []); // チャットボットが開いたときの初期質問ロードまたは固定表示 useEffect(() => { if (isChatOpen) { // スクロールフラグリセット（チャットを開くたびにスクロール可能に） setLastScrolledMessageId(null); if (allQuestions.length === 0) { // 質問がなければAPIから取得 console.log('チャットが開いたため質問データをロード開始...'); loadInitialQuestions(); } else { // よくある質問を固定表示 setInitialQuestions(DEFAULT_WELCOME_QUESTIONS); } } }, [isChatOpen]); // チャットボット関数をグローバルに公開（他ウィジェットから利用可能） useEffect(() => { window.openChatWithMessage = (message) => { setIsChatOpen(true); setChatInputValue(message); }; // Header MenuからAIチャットボットを開閉できるように window.toggleChatWidget = () => { setIsChatOpen(prev => !prev); }; // 関連質問をチャット画面に表示する関数 window.showRelatedQuestions = async (questions) => { console.log('showRelatedQuestions呼び出し、受信した質問:', questions); console.log('質問タイプ:', typeof questions, '配列か?', Array.isArray(questions)); console.log('質問数:', questions ? questions.length : 0); setIsChatOpen(true); setChatInputValue(''); // 入力欄をクリア // ローディング状態表示 - 既存メッセージに追加 const loadingSuggestionsMessage = { id: Date.now(), type: 'suggestions', suggestions: [], isLoading: true }; setChatMessages(prev => [...prev, loadingSuggestionsMessage]); // ローディングメッセージ追加後すぐにスクロール scrollToMessage(loadingSuggestionsMessage.id); // questionsが配列でないか空の場合はデフォルトメッセージ if (!Array.isArray(questions) || questions.length === 0) { console.log('質問がないか配列ではない'); // ローディングメッセージを削除し空のsuggestionsで置換 setChatMessages(prev => prev.map(msg => msg.id === loadingSuggestionsMessage.id ? { ...msg, isLoading: false, suggestions: [] } : msg ) ); return; } try { // AIに深い質問の生成を依頼 const questionsText = questions.join('\n'); const detectedLang = detectLanguage(questionsText); let prompt = ''; if (detectedLang === 'ko') { prompt = `以下の質問を基に、より深く具体的な3つの質問を生成してください。各質問は明確で回答可能であり、元の質問よりも詳細で実用的である必要があります:\n\n${questionsText}\n\n3つの質問のみを記述してください（番号や記号なしで、各行に1つずつ）。`; } else if (detectedLang === 'en') { prompt = `Based on the following questions, generate 3 deeper and more specific questions. Each question should be clear, answerable, and more detailed and practical than the original:\n\n${questionsText}\n\nPlease write only 3 questions (one per line, without numbers or symbols).`; } else { prompt = `以下の質問を基に、より深く具体的な3つの質問を生成してください。各質問は明確で回答可能であり、元の質問よりも詳細で実用的である必要があります:\n\n${questionsText}\n\n3つの質問のみを記述してください（番号や記号なしで、各行に1つずつ）。`; } const data = await window.GachiAI.sendChatMessage(prompt, null); if (data.result === 'SUCCESS' && data.answer) { // AI応答から質問を抽出（改行で区切り） const generatedQuestions = data.answer .split('\n') .map(q => q.trim()) .filter(q => q.length > 0 && !q.match(/^[\d\-\*\•\.]+[\s\)\.]/)) // 番号・記号で始まる部分を除去 .map(q => q.replace(/^[\d\-\*\•\.]+[\s\)\.]*/, '').trim()) // 残った番号を除去 .filter(q => q.length > 10) // 短すぎるものを除外 .slice(0, 3); // 最大3件 console.log('AIが生成した質問:', generatedQuestions); // ローディングメッセージを実際の質問で更新 setChatMessages(prev => prev.map(msg => msg.id === loadingSuggestionsMessage.id ? { ...msg, isLoading: false, suggestions: generatedQuestions.length > 0 ? generatedQuestions : questions.slice(0, 3) } : msg ) ); // 推奨質問が生成されたらそのメッセージへスクロール scrollToMessage(loadingSuggestionsMessage.id); } else { // AI呼び出し失敗時は元の質問を使用 setChatMessages(prev => prev.map(msg => msg.id === loadingSuggestionsMessage.id ? { ...msg, isLoading: false, suggestions: questions.slice(0, 3) } : msg ) ); // 推奨質問が表示されたらそのメッセージへスクロール scrollToMessage(loadingSuggestionsMessage.id); } } catch (error) { console.error('AI質問生成失敗:', error); // エラー時は元の質問を使用 setChatMessages(prev => prev.map(msg => msg.id === loadingSuggestionsMessage.id ? { ...msg, isLoading: false, suggestions: questions.slice(0, 3) } : msg ) ); // 推奨質問が表示されたらそのメッセージへスクロール scrollToMessage(loadingSuggestionsMessage.id); } }; return () => { delete window.openChatWithMessage; delete window.showRelatedQuestions; }; }, []); // 質問翻訳関数（バッチ処理） const translateQuestions = async (questions) => { if (!questions || questions.length === 0) return questions; try { const BATCH_SIZE = 10; // 一度に10個ずつ翻訳 const allTranslatedQuestions = []; // バッチに分けて翻訳 for (let i = 0; i < questions.length; i += BATCH_SIZE) { const batch = questions.slice(i, i + BATCH_SIZE); // 質問を番号付きテキストとして結合 const questionsText = batch.map((q, idx) => `${idx + 1}. ${q.question}`).join('\n'); const prompt = `以下の韓国語の質問を日本語に翻訳してください。同じ番号付け形式を維持し、各質問を正確に翻訳してください。番号付きの翻訳された質問のみを返してください:\n\n${questionsText}`; const data = await window.GachiAI.sendChatMessage(prompt, null); if (data.result === 'SUCCESS' && data.answer) { // AI応答から翻訳された質問を抽出 const translatedLines = data.answer.split('\n').filter(line => line.trim().length > 0); // 翻訳された質問を元の質問オブジェクトにマッピング const translatedBatch = batch.map((q, idx) => { // 番号を削除した翻訳された質問を見つける const translatedLine = translatedLines.find(line => line.trim().startsWith(`${idx + 1}.`)); if (translatedLine) { const translatedText = translatedLine.replace(/^\d+\.\s*/, '').trim(); return { ...q, question: translatedText, originalQuestion: q.question // 元の質問を保存 }; } return q; // 翻訳失敗時は元のまま }); allTranslatedQuestions.push(...translatedBatch); } else { // 翻訳失敗時は元のバッチを追加 allTranslatedQuestions.push(...batch); } } return allTranslatedQuestions; } catch (error) { console.error('質問翻訳失敗:', error); return questions; // エラー時は元の質問を返す } }; const loadInitialQuestions = async () => { try { console.log('初期推奨質問ロード開始...'); // window.GachiAIが定義されているか確認 if (!window.GachiAI || !window.GachiAI.loadQuestions) { console.error('window.GachiAI.loadQuestionsが定義されていません。'); return; } // window.GachiAI.loadQuestions使用（より多くの質問を取得） const data = await window.GachiAI.loadQuestions(null, null, 50); console.log('API応答:', data); if (data.result === 'SUCCESS' && data.questions && Array.isArray(data.questions)) { console.log('受け取った質問数:', data.questions.length); // 質問を日本語に翻訳 const translatedQuestions = await translateQuestions(data.questions); // 全質問を保存（関連質問表示などで使用） setAllQuestions(translatedQuestions); // ウェルカムは固定のよくある質問を表示 setInitialQuestions(DEFAULT_WELCOME_QUESTIONS); } else { console.log('質問を取得できませんでした:', data); setInitialQuestions(DEFAULT_WELCOME_QUESTIONS); } } catch (error) { console.error('初期質問ロード失敗:', error); setInitialQuestions(DEFAULT_WELCOME_QUESTIONS); } }; // ランダムに3問選択する関数 const selectRandomQuestions = (questions) => { if (!questions || questions.length === 0) return; // '担当者にお問い合わせしたいです' 質問オブジェクト生成 const contactQuestion = { id: 'contact-question', question: '担当者にお問い合わせしたいです' }; // Fisher-Yatesシャッフルでランダムに並べ替え const shuffled = [...questions]; for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; } // ランダムに2個選択し担当者質問を追加 const randomQuestions = [ ...shuffled.slice(0, 2), contactQuestion ]; // 最終3個を再度ランダムに並べ替え（担当者が常に最後にならないように） for (let i = randomQuestions.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [randomQuestions[i], randomQuestions[j]] = [randomQuestions[j], randomQuestions[i]]; } console.log('ランダム選択された推奨質問3件:', randomQuestions); setInitialQuestions(randomQuestions); }; // 特定メッセージへスクロールする関数 const scrollToMessage = (messageId) => { // 既にスクロール済みのメッセージなら再スクロールしない if (messageId === lastScrolledMessageId) return; // DOMレンダリング直後にスクロール（requestAnimationFrame使用） requestAnimationFrame(() => { setTimeout(() => { const messageElement = document.querySelector(`[data-message-id="${messageId}"]`); if (messageElement && chatContainerRef.current) { const messageTop = messageElement.offsetTop; chatContainerRef.current.scrollTo({ top: messageTop - 20, behavior: 'smooth' }); setLastScrolledMessageId(messageId); } }, 100); // DOMレンダリング確保のための最小遅延 }); }; // チャットボットメッセージ送信関数 const sendChatMessage = async (message) => { if (isChatLoading || !message.trim()) return; const detectedLang = detectLanguage(message.trim()); setCurrentLanguage(detectedLang); setIsChatLoading(true); const userMessage = { id: Date.now(), text: message.trim(), type: 'user' }; setChatMessages(prev => [...prev, userMessage]); setChatInputValue(''); const loadingMessage = { id: Date.now() + 0.5, text: '', type: 'loading' }; setChatMessages(prev => [...prev, loadingMessage]); // ユーザーメッセージとローディングメッセージ追加後すぐにスクロール scrollToMessage(userMessage.id); // "担当者に問い合わせたいです" / "担当者にお問い合わせしたいです" 質問に対する特別処理 const trimmedMsg = message.trim(); if (trimmedMsg === '担当者に問い合わせたいです。' || trimmedMsg === '担当者に問い合わせたいです' || trimmedMsg === '担当者にお問い合わせしたいです') { // 3秒ローディング後、回答表示 setTimeout(() => { // ローディングメッセージを削除 setChatMessages(prev => prev.filter(msg => msg.type !== 'loading')); const contactAnswer = `担当者へのご連絡をご希望いただきありがとうございます！下記のお問い合わせフォームにご記入いただければ、迅速にご連絡いたします。`; const botMessage = { id: Date.now() + 1, text: contactAnswer, suggestions: [], type: 'bot', relatedFAQs: [], relatedArticles: [], showContactForm: true }; setChatMessages(prev => [...prev, botMessage]); setIsChatLoading(false); }, 3000); // 3秒ローディング return; } try { const data = await window.GachiAI.sendChatMessage(message.trim(), chatConversationId); setChatMessages(prev => prev.filter(msg => msg.type !== 'loading')); if (data.result === 'SUCCESS') { setChatConversationId(data.conversationId); // API応答の韓国語メッセージを日本語に変換 let answer = data.answer || ''; answer = answer.replace(/의 내용을 읽는 중\.\.\./g, 'の内容を読み込んでいます...'); answer = answer.replace(/$으$로부터/g, 'から'); answer = answer.replace(/검색 중\.\.\./g, '検索中...'); answer = answer.replace(/처리 중\.\.\./g, '処理中...'); answer = answer.replace(/분석 중\.\.\./g, '分析中...'); answer = answer.replace(/생성 중\.\.\./g, '生成中...'); const tempBotMessage = { id: Date.now() + 1, text: answer, suggestions: data.suggestions || [], type: 'bot', relatedFAQs: [], relatedArticles: [] }; setChatMessages(prev => [...prev.filter(msg => msg.type !== 'loading'), tempBotMessage]); Promise.all([ fetchRelatedFAQs(data.answer), fetchRelatedArticles(data.answer) ]).then(([faqs, articles]) => { const finalBotMessage = { ...tempBotMessage, relatedFAQs: faqs, relatedArticles: articles }; setChatMessages(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' }; setChatMessages(prev => [...prev, errorMessage]); } } catch (error) { console.error('API Error:', error); setChatMessages(prev => prev.filter(msg => msg.type !== 'loading')); const langMessages = getLanguageMessages(currentLanguage); const errorMessage = { id: Date.now() + 1, text: langMessages.connectionError, type: 'error' }; setChatMessages(prev => [...prev, errorMessage]); } finally { setIsChatLoading(false); } }; const handleSuggestionClick = (suggestion) => { setChatInputValue(suggestion); sendChatMessage(suggestion); }; const handleChatKeyDown = (e) => { if (e.key === 'Enter') { if (e.nativeEvent.isComposing) { return; } sendChatMessage(chatInputValue); e.preventDefault(); } }; const toggleQuestion = (questionId) => { setExpandedQuestions(prev => { const newSet = new Set(prev); if (newSet.has(questionId)) { newSet.delete(questionId); } else { newSet.add(questionId); } return newSet; }); }; // お問い合わせフォームハンドラ const handleContactFormChange = (e) => { const { name, value } = e.target; // Bot対策: 初回入力時に開始時刻を記録 if (!contactFormStartTime && name === 'name' && value.length > 0) { setContactFormStartTime(Date.now()); } setContactFormData(prev => ({ ...prev, [name]: value })); }; // お問い合わせフォーム送信 const handleContactSubmit = async () => { setContactSubmitAttempted(true); // 入力チェック if (!contactFormData.name || !contactFormData.email || !contactFormData.company || !contactFormData.phone || !contactFormData.message) { setContactSubmitStatus({ type: 'error', message: '必須項目をすべてご入力ください。' }); return; } if (!isValidEmail(contactFormData.email)) { setContactSubmitStatus({ type: 'error', message: '有効なメールアドレスをご入力ください。' }); return; } // Bot対策：短時間での送信をブロック if (contactFormStartTime) { const editingDuration = Date.now() - contactFormStartTime; if (editingDuration < 3000) { setContactSubmitStatus({ type: 'error', message: 'しばらくしてから再度お試しください。' }); return; } } setIsSubmittingContact(true); setContactSubmitStatus(null); setSubmitProgress(''); try { // 入力値サニタイズ const sanitizedData = { name: sanitizeInput(contactFormData.name), email: sanitizeInput(contactFormData.email), company: sanitizeInput(contactFormData.company), phone: sanitizeInput(contactFormData.phone), subject: sanitizeInput(contactFormData.subject), message: sanitizeInput(contactFormData.message) }; // 1. メール送信 setSubmitProgress('email'); const subject = sanitizedData.subject || "[OCEANVIEW_KAMOGAWA AI チャット窓口お問い合わせ受付]"; const emailBody = getContactEmailBody(sanitizedData); // Calculate editing duration for bot protection const durationMS = contactFormStartTime ? Date.now() - contactFormStartTime : undefined; await API.Site_SendEmailToAdmin(subject, emailBody, durationMS); // 2. Officenext通知送信 setSubmitProgress('officenext'); try { await sendToOfficenextViaBot(sanitizedData, chatConversationId, setChatConversationId); } catch (botError) { console.error('OfficeNEXT送信失敗:', botError); } // 3. 完了 setSubmitProgress('complete'); setContactSubmitStatus({ type: 'success', message: 'お問い合わせいただきありがとうございます。早急にご連絡いたします。' }); // フォーム初期化 setTimeout(() => { setContactFormData({ name: '', email: '', company: '', phone: '', subject: '', message: '' }); setContactSubmitStatus(null); setContactSubmitAttempted(false); setSubmitProgress(''); setContactFormStartTime(null); // お問い合わせフォームを隠して完了表示 setChatMessages(prev => prev.map(msg => msg.type === 'bot' && msg.showContactForm ? { ...msg, showContactForm: false, contactSubmitted: true } : msg )); }, 3000); } catch (error) { console.error('Contact form error:', error); if (error.message && error.message.includes('HTTP 403')) { setContactSubmitStatus({ type: 'error', message: '異常なアクセスが検出されました。' }); } else if (error.message && error.message.includes('HTTP 400')) { setContactSubmitStatus({ type: 'error', message: error.message }); } else { setContactSubmitStatus({ type: 'error', message: '申し訳ございません。送信中にエラーが発生しました。しばらくしてから再度お試しください。' }); } setSubmitProgress(''); } finally { setIsSubmittingContact(false); } }; const containsHTML = (text) => { const htmlRegex = /<[^>]*>/; return htmlRegex.test(text); }; const processIframeHTML = (html) => { return html.replace( /]*?)(?:\s+style\s*=\s*"[^"]*")?([^>]*?)>/gi, '' ); }; const processLinks = (text) => { const urlPattern = /(https?:\/\/[^\s<>"'\[\]]+|www\.[^\s<>"'\[\]]+)/gi; return text.replace(urlPattern, (match) => { let url = match.replace(/[,;.!?)\]\}]+$/, ''); const href = url.startsWith('www.') ? `http://${url}` : url; return `${url}`; }); }; // 全メッセージを順にレンダリングする関数 const organizeMessages = (messages) => { const items = []; let currentGroup = null; messages.forEach((message) => { if (message.type === 'suggestions') { // suggestionsタイプなら現在のグループを閉じてsuggestionsを追加 if (currentGroup) { items.push({ type: 'group', data: currentGroup }); currentGroup = null; } items.push({ type: 'suggestions', data: message }); } else if (message.type === 'user') { // userタイプなら現在のグループを閉じて新規グループ開始 if (currentGroup) { items.push({ type: 'group', data: 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' || message.type === 'error') && currentGroup) { currentGroup.aiMessage = message; } }); if (currentGroup) { items.push({ type: 'group', data: currentGroup }); } return items; }; // タイピングアニメーションコンポーネント 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 { timeoutId = setTimeout(() => { setDisplayText(''); currentIndex = 0; timeoutId = setTimeout(typeText, 500); }, 2000); } }; typeText(); return () => { if (timeoutId) { clearTimeout(timeoutId); } }; }, [fullText]); return ( {displayText} | ); }; return ( <> {/* チャットボットアイコン - Header Menuと統合された位置 */} {/* モバイル: ハンバーガーアイコン左側 - メインメニューと整列（モバイルメニュー開時は非表示） */} {!isMobileMenuOpen && (

)} {/* PC: Header Menuのナビゲーションと同じレイアウトで統合 */}

{/* チャットボットポップアップ */}

{/* ポップアップウィンドウ */}

e.stopPropagation()} > {/* メッセージエリア */}

{/* 歓迎メッセージ - 常に表示 */}

{getLanguageMessages(currentLanguage).welcome}

{/* よくある質問 - 固定表示 */} {initialQuestions.length > 0 && (

よくある質問

{initialQuestions.map((question, index) => ( ))}

)} {/* 全メッセージを順に表示 */} {organizeMessages(chatMessages).map((item) => { if (item.type === 'suggestions') { // suggestionsタイプ: 推奨質問UI const suggestionsMsg = item.data; return (

{suggestionsMsg.isLoading ? (currentLanguage === 'ko' ? 'AIが深い質問を生成しています...' : currentLanguage === 'en' ? 'AI is generating deeper questions...' : 'AIが深い質問を生成しています...') : (currentLanguage === 'ko' ? '次の質問をお勧めします：' : currentLanguage === 'en' ? 'We recommend the following questions:' : '次の質問をお勧めします：') }

{suggestionsMsg.isLoading || suggestionsMsg.suggestions.length === 0 ? (

{currentLanguage === 'ko' ? '推奨質問を生成中...' : currentLanguage === 'en' ? 'Generating recommended questions...' : '推奨質問を生成中...'}

) : (

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

)}

); } else { // groupタイプ: 会話UI const group = item.data; return (

{/* ユーザーメッセージ */}

{group.userMessage.text}

{/* AI回答エリア */}

{group.loadingMessage ? (

) : group.aiMessage ? (

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

{getLanguageMessages(currentLanguage).error}

) : ( <>

{containsHTML(group.aiMessage.text) ? (

) : (

)}

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

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

)} {/* お問い合わせフォーム */} {group.aiMessage.showContactForm && (

お問い合わせ

製品およびサービスに関するお問い合わせを含め、その他のお問い合わせは下記のフォームよりお送りください。お送りいただいた内容は担当者が確認後、順次ご連絡いたします。

{/* お名前、メールアドレス */}

お名前 * {!contactFormData.name && contactSubmitAttempted && (

お名前をご入力ください。

)}

メールアドレス * {!contactFormData.email && contactSubmitAttempted && (

メールアドレスをご入力ください。

)}

{/* ご宿泊予定人数、お電話番号 */}

ご宿泊予定人数 * {!contactFormData.company && contactSubmitAttempted && (

ご宿泊予定人数をご入力ください。

)}

電話番号 * {!contactFormData.phone && contactSubmitAttempted && (

電話番号をご入力ください。

)}

{/* 件名 */}

件名

{/* お問い合わせ内容 */}

お問い合わせ内容 *

{!contactFormData.message && contactSubmitAttempted && (
                                      <p className="mt-1 text-xs text-red-600">
                                        お問い合わせ内容をご入力ください。
                                      </p>
                                    )}
                                  </div>

{/* 状態メッセージ */}
                                  {contactSubmitStatus && (
                                    <div className={`p-4 rounded-lg ${contactSubmitStatus.type === 'success'
                                      ? 'bg-green-50 border border-green-200 text-green-700'
                                      : 'bg-red-50 border border-red-200 text-red-700'
                                      }`}>
                                      <div className="flex items-center gap-2">
                                        {contactSubmitStatus.type === 'success' ? (
                                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                                          </svg>
                                        ) : (
                                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
                                          </svg>
                                        )}
                                        <span>{contactSubmitStatus.message}</span>
                                      </div>
                                    </div>
                                  )}

{/* 送信ボタン */}
                                  <button
                                    onClick={handleContactSubmit}
                                    disabled={isSubmittingContact}
                                    className="w-full bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                                  >
                                    {isSubmittingContact ? (
                                      <>
                                        <svg className="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                        </svg>
                                        <span>
                                          {submitProgress === 'complete' 
                                            ? '担当者のメールとOfficeNEXTメッセンジャーに送信完了！' 
                                            : '担当者のメールとOfficeNEXTメッセンジャーに送信中...'}
                                        </span>
                                      </>
                                    ) : (
                                      <>
                                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                        </svg>
                                        <span>お問い合わせを送信</span>
                                      </>
                                    )}
                                  </button>
                                </div>
                              </div>
                            )}

{/* お問い合わせ完了メッセージ */}
                            {group.aiMessage.contactSubmitted && !group.aiMessage.showContactForm && (
                              <div className="mt-6 p-4 bg-green-50 rounded-lg border border-green-200">
                                <div className="flex items-start gap-3">
                                  <svg className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                  </svg>
                                  <div>
                                    <h4 className="text-sm font-medium text-green-900 mb-1">
                                      お問い合わせ受付完了！
                                    </h4>
                                    <p className="text-sm text-green-800">
                                      お送りいただいた内容は担当者が確認後、順次ご連絡いたします。
                                    </p>
                                  </div>
                                </div>
                              </div>
                            )}

{/* Q&Aと記事セクション */}
                            {!group.aiMessage.type?.includes('error') && (
                              <div className="mt-6 space-y-6 border-t border-gray-100 pt-6">
                                {/* Q&Aセクション */}
                                {group.aiMessage.relatedFAQs === undefined ? (
                                  <div className="space-y-3">
                                    <h3 className="text-base font-medium text-gray-900">{getLanguageMessages(currentLanguage).relatedQuestions}</h3>
                                    <div className="text-center py-4 text-gray-500">
                                      <div className="animate-pulse">
                                        {currentLanguage === 'ko' ? '読み込み中...' : 
                                         currentLanguage === 'en' ? 'Loading...' : '読み込み中...'}
                                      </div>
                                    </div>
                                  </div>
                                ) : group.aiMessage.relatedFAQs?.length > 0 ? (
                                  <div className="space-y-3">
                                    <h3 className="text-base font-medium text-gray-900">{getLanguageMessages(currentLanguage).relatedQuestions}</h3>
                                    {group.aiMessage.relatedFAQs.map(qa => {
                                        const questionId = 'q-' + qa.id;
                                        const isExpanded = expandedQuestions.has(questionId);
                                        
                                        return (
                                          <div key={qa.id} className="bg-white border border-gray-200 rounded-lg p-3 hover:shadow-md transition-shadow">
                                            <button
                                              onClick={() => toggleQuestion(questionId)}
                                              className="w-full text-left"
                                            >
                                            <div className="flex items-center justify-between">
                                              <h3 className="text-sm font-medium text-gray-900">{qa.question}</h3>
                                              <svg 
                                                className={`w-5 h-5 text-gray-500 transition-transform duration-200 ${
                                                  isExpanded ? 'rotate-180' : 'rotate-0'
                                                }`}
                                                fill="none" 
                                                stroke="currentColor" 
                                                viewBox="0 0 24 24"
                                              >
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
                                              </svg>
                                            </div>
                                            </button>
                                          
                                            {isExpanded && (
                                              <div className="mt-3 pt-3 border-t border-gray-200">
                                                <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-line font-light">
                                                  {qa.answer}
                                                </p>
                                              </div>
                                            )}
                                          </div>
                                        );
                                      })}
                                  </div>
                                ) : null}

{/* 記事セクション */}
                                {group.aiMessage.relatedArticles === undefined ? (
                                  <div>
                                    <h3 className="text-base font-medium text-gray-900 mb-3">{getLanguageMessages(currentLanguage).relatedArticles}</h3>
                                    <div className="text-center py-4 text-gray-500">
                                      <div className="animate-pulse">
                                        {currentLanguage === 'ko' ? '読み込み中...' : 
                                         currentLanguage === 'en' ? 'Loading...' : '読み込み中...'}
                                      </div>
                                    </div>
                                  </div>
                                ) : group.aiMessage.relatedArticles?.length > 0 ? (
                                  <div>
                                    <h3 className="text-base font-medium text-gray-900 mb-3">{getLanguageMessages(currentLanguage).relatedArticles}</h3>
                                    <div className="grid grid-cols-1 lg:grid-cols-4 gap-3">
                                      {group.aiMessage.relatedArticles.map(article => {
                                        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 (
                                          <a
                                            key={article.id}
                                            href={`/article?articleId=${article.id}`}
                                            className="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-200 cursor-pointer block group no-underline hover:no-underline"
                                            style={{ textDecoration: 'none' }}
                                          >
                                            <div className="aspect-video bg-gray-100 overflow-hidden">
                                              <img 
                                                src={article.thumbUrl || 'https://app.gachiai.com/assets/img/article/article-default.png'} 
                                                alt={article.title}
                                                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
                                              />
                                            </div>
                                            <div className="p-3 space-y-2">
                                              <h3 className="text-sm font-medium text-gray-900 group-hover:text-blue-600 transition-colors duration-200 line-clamp-2">
                                                {article.title}
                                              </h3>
                                              <p className="text-xs text-gray-600 leading-relaxed line-clamp-2 font-light">
                                                {excerpt}
                                              </p>
                                            </div>
                                          </a>
                                        );
                                      })}
                                    </div>
                                  </div>
                                ) : null}
                              </div>
                            )}
                          </>
                        )}
                      </div>
                    </div>
                  ) : null}
                </div>
              </div>
                );
              }
            })}
          </div>

{/* 入力エリア */}
          <div className="p-4 bg-transparent">
            <div className={`flex gap-2 items-center bg-white backdrop-blur border rounded-lg p-1 transition-all duration-200 shadow-lg hover:shadow-xl ${
              isChatLoading ? 'border-blue-500' : 'border-gray-200 focus-within:border-blue-500'
            }`}>
              <input
                type="text"
                placeholder={getLanguageMessages(currentLanguage).placeholder}
                value={chatInputValue}
                onChange={(e) => setChatInputValue(e.target.value)}
                onKeyDown={handleChatKeyDown}
                disabled={isChatLoading}
                className="flex-1 px-3 py-2 border-0 bg-transparent focus:outline-none text-sm text-blue-500 placeholder-gray-400 min-w-0"
              />
              <button
                onClick={() => sendChatMessage(chatInputValue)}
                disabled={isChatLoading || !chatInputValue.trim()}
                className="bg-blue-500 hover:bg-blue-600 text-white px-2 sm:px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200 flex items-center gap-1 sm:gap-2 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0"
              >
                {isChatLoading ? (
                  <>
                    <svg className="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    <span>処理中...</span>
                  </>
                ) : (
                  <span>AI会話</span>
                )}
              </button>
            </div>
          </div>
    </div>
  </div>

{/* タイピングカーソルスタイル */}
<style>{`
  .typing-cursor {
    animation: blink 1s infinite;
    font-weight: bold;
    color: #2563EB;
  }
  @keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  .ai-loading-border {
    position: relative;
    overflow: visible;
  }
  .ai-loading-border::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 0.75rem;
    padding: 3px;
    box-sizing: border-box;
    background: linear-gradient(
      90deg, 
      transparent 0%, 
      transparent 10%, 
      #2563EB 30%, 
      #3B82F6 50%, 
      #60A5FA 70%, 
      #2563EB 90%, 
      transparent 100%
    );
    background-size: 300% 100%;
    animation: neon-flow 2.5s linear infinite;
    pointer-events: none;
    z-index: 10;
    -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  @keyframes neon-flow {
    0% { 
      background-position: -100% 50%; 
    }
    100% { 
      background-position: 200% 50%; 
    }
  }
  .text-gray-800 a {
    color: #3b82f6 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
  }
  .text-gray-800 a:hover {
    color: #1d4ed8 !important;
  }
  /* スクロールバースタイル */
  .overflow-y-auto::-webkit-scrollbar {
    width: 6px;
  }
  .overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
  }
  .overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
  }
  .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 1);
  }
  
  /* PC画面: Header Menuの右側ボタン領域がチャットボットアイコンのスペースを確保するように */
  @media (min-width: 640px) {
    /* Header Menuの右側ボタン領域に右マージンを追加 */
    .w-full.bg-white.shadow-sm nav .flex.items-center.gap-2.flex-shrink-0 {
      margin-right: 90px !important;
    }
  }
`}</style>
</>
  );
};

export default ChatbotWidget;

</article></body></html>