function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [lastInteraction, setLastInteraction] = React.useState(Date.now()); const translations = { welcome: "ご質問にAIがお答えいたします。\nお気軽にお問い合わせください！\n\n『　　相談窓口　　』", options: ["よくある質問", "セミナー申し込み", "サポートに連絡"], inputPlaceholder: "質問を入力してください...", sendButton: "送信", loading: "回答を作成中です...", errorMessage: "申し訳ありません。もう一度お試しください。", timeout: "まだご質問がございましたら、お気軽にお問い合わせください。\nセミナー説明会でお会いできるのを楽しみにしております。", outOfHours: "営業時間外です。メールアドレスとメッセージをお残しください。営業時間内に折り返しご連絡いたします。", }; const faqs = [ { question: "質問1: AI自動集客、Zoom集客セミナーの申し込み方法を教えてください", answer: "こちらからお申込みください\n→セミナー説明会", }, { question: "質問2: AI、Zoom集客のセミナーの日程が合わないのですが", answer: "セミナーの追加日程を調整中です。\nセミナー説明会の日程が追加されましたらHPで\n告知させていただきます\n→セミナー説明会", }, { question: "質問3: 教科書がダウンロードできません。どうしたらもらえますか？", answer: "LINEに友達追加いただくと、『らくらくAI自動集客の教科書』のPDFをダウンロードできます。\n→特典を受け取る", }, { question: "質問4: 開催は昼間しかないんですか？（夜開催はないのですか？）", answer: "現時点ではお昼の13時からと午前10時からの開催となっています。平日や土日など色々な曜日で開催しています。お客様はどの曜日がご都合よろしいですか？\n→セミナー説明会", }, { question: "質問5: チャットGPTを使ったことがないのですが大丈夫ですか？", answer: "使ったことが無い方にも事例を交えながらわかりやすくご説明するので大丈夫です。\nセミナー申し込みの特典としてチャットGPTの始め方マニュアルもプレゼントしていますよ。\n→セミナー説明会", }, { question: "質問6: お申し込み後の連絡方法はどうなりますか？", answer: "お申し込み後、詳細な参加方法については、LINEでご案内いたします。\n→セミナー説明会", }, { question: "質問7: パソコン初心者でも大丈夫ですか？", answer: "はい、大丈夫です。サポートチームがサポートしますのでご安心ください。\n→セミナー説明会", }, { question: "質問8: セミナー参加は4時間の確保が難しいです。本業がある、小さい子どもがいる、親の介護があるなどの理由です。", answer: "この度はセミナーに興味をお持ちいただきありがとうございます。今回のセミナーは2部に分かれています。 1部：セミナー（13:00〜15:30頃） 2部：有料講座の説明会（15:40〜17:00頃） 1部のみのご参加も可能ですし、2部は別日に受けることも可能ですので、お気軽にご相談ください。\n→セミナー説明会", }, { question: "質問9: 無料セミナーへの申し込みをしようとしましたが、提案された3つの日程ともに都合がつきません。", answer: "この度はセミナーに興味を持っていただきありがとうございます。ちなみに平日と土日でしたら、どちらがご都合よろしいでしょうか？\n→セミナー説明会", }, { question: "質問10: まだ具体的なことが決まっていないのですが、参加しても大丈夫ですか？", answer: "大丈夫です(^^) これから何かを始めたい方にこそおすすめです。AI（チャットGPT）を活用してどんなことができたら嬉しいですか？\n→セミナー説明会", }, { question: "質問11: Zoomを使ったことがないのですが、大丈夫ですか？", answer: "はい、専門の講師が丁寧に使い方を指導しますのでご安心ください。\n→セミナー説明会", }, { question: "質問12: セミナー（Zoom）は、顔出しをしないとダメですか？", answer: "より良い学習環境と集中力向上のため、Zoomでのご参加の際にはカメラをオンにしていただけると助かります。顔出しが難しい場合はご相談ください。\n→セミナー説明会", }, { question: "質問13: セミナー参加は、スマートフォンでも大丈夫ですか？", answer: "はい、スマートフォンでもご参加いただけますが、より良い学習環境のためにパソコンの使用をおすすめしています。\n→セミナー説明会", }, { question: "質問14: 他の起業塾でも勉強していますが、大丈夫ですか？", answer: "大丈夫です。勉強熱心な方も多く、他の学びと並行してご参加いただいています。\n→セミナー説明会", }, { question: "質問15: こちらの集客方法は法人にも有効な方法でしょうか？", answer: "はい、Zoom集客セミナーでは、個人だけでなく法人向けにも役立つ集客の本質について学べます。幅広い業種で成果が上がっています。\n→セミナー説明会", }, { question: "質問16: 当社は事業所専門の不動産賃貸仲介業者ですが、そのような業種にも効果は期待できますか？", answer: "はい、Zoom集客の学校には様々な業種の方が参加され、成功事例も多数あります。ぜひご参加ください。\n→セミナー説明会", }, { question: "質問17: （紹介サイトの）動画第1話、第2話を見ました。第3話はないですか？", answer: "第3話は近日公開予定です。ぜひお楽しみにお待ちください。\n→セミナー説明会", }, { question: "質問18: このセミナーはなぜ無料ですか？", answer: "通常3万円で行っている内容の濃いセミナーです。本気度の高い方に参加してほしいため、登録特典として無料期間を設けております。\n→セミナー説明会", }, { question: "質問19: 得意な資格もなく、パソコンもできませんが大丈夫ですか？", answer: "資格がなくても起業（ビジネス）は可能です＾＾あなたの学びたい気持ちをサポートします。\n→セミナー説明会", }, { question: "質問20: 課題があると聞いて難しそうですが…。", answer: "予習課題として10分程度の短い動画をお送りしています。初めての方でも理解しやすい内容ですのでご安心ください。\n→セミナー説明会", }, { question: "質問21: 無料で参加した後に有料講座が続くと、続けられるか不安です。", answer: "参加者の成果と結果につなげるためのセミナーです。売り込み等は一切ありませんので、ご安心くださいね。\n→セミナー説明会", }, { question: "質問22: 私はこれから起業しようと思っていますが、物販にも使えますか？", answer: "はい、ビジネスの本質を学ぶことで、どの業種でも応用できる内容です。物販にも効果的に活用できます。\n→セミナー説明会", }, { question: "質問23: 利益はどこから生まれるのでしょうか？", answer: "お客様が必要とする価値を提供することで利益が生まれます。ビジネスの本質は、お客様に喜んでいただけるサービスや商品を提供することです。\n→セミナー説明会", }, { question: "質問24: 他のセミナーと違う点は何ですか？", answer: "このセミナーは実践的なオンライン起業に特化しており、AIを活用したビジネスの可能性について具体的に学べます。他のセミナーとは異なり、個別の状況に応じたサポートも充実しています。\n→セミナー説明会", }, { question: "質問25: 必要な準備や事前知識はありますか？", answer: "特に準備は必要ありません。ビジネスに興味を持っていただければ十分です。\n→セミナー説明会", }, { question: "質問26: 有料講座の料金はいくらですか？", answer: "料金については、無料セミナー内で詳しくご説明いたします。\n→セミナー説明会", }, { question: "質問27: 資料を配布してもらえますか？", answer: "セミナー自体の資料はありませんが、参加特典をお送りしておりますので、そちらをご活用ください。\n→セミナー説明会", }, { question: "質問28: セミナーの録画はありますか？", answer: "申し訳ありませんが、セミナーの録画提供は行っておりません。ぜひライブでのご参加をおすすめします。\n→セミナー説明会", }, { question: "質問29: セミナー後の強引な個別説明はありますか？", answer: "セミナーは2部構成です。1部ではオンラインビジネスの基本と成功事例を具体的にお話しし、2部でZoom集客学校の有料講座についてご案内しています。押し売りなどは一切ありませんのでご安心ください。\n→セミナー説明会", }, { question: "質問30: セミナーに参加すると何が得られますか？", answer: "ビジネスの基本的な考え方と、AIを活用したオンラインビジネスの可能性について学べます。実践的な内容で、これからのビジネス展開に役立つ知識を提供しています。\n→セミナー説明会", }, { question: "質問31: セミナー後に起業のサポートはありますか？", answer: "無料セミナーの後半では、有料講座のサポート内容についてご紹介しています。起業に向けた具体的な支援が含まれています。\n→セミナー説明会", }, { question: "質問32: 途中参加は可能ですか？", answer: "途中参加は難しいですが、ぜひ開始時刻からご参加いただけるよう調整いただけると嬉しいです。\n→セミナー説明会", }, { question: "質問33: セミナーだけで起業できますか？", answer: "セミナーでは基本的な考え方と事例をお伝えしますが、その後の行動が成功の鍵となります。継続的なサポートもご用意しております。\n→セミナー説明会", }, { question: "質問34: 過去の参加者の声や実績はありますか？", answer: "はい、多くの方が学んで起業されています。セミナー内で事例紹介も行っていますので、ご参考にしてください。\n→セミナー説明会", }, { question: "質問35: 申し込みをキャンセルしたい場合はどうすればいいですか？", answer: "キャンセルの際は、お手数ですが、お申込み時にご案内した連絡先までご連絡ください。\n→セミナー説明会", }, { question: "質問36: お申し込み後の連絡方法はどうなりますか？", answer: "お申し込み後、詳細な参加方法についてLINEでご案内いたします。\n→セミナー説明会", }, ]; const [showFAQ, setShowFAQ] = React.useState(false); const [selectedFAQ, setSelectedFAQ] = React.useState(null); React.useEffect(() => { setMessages([{ text: translations.welcome, isUser: false }]); const intervalId = setInterval(() => { if (Date.now() - lastInteraction > 300000) { setMessages((prev) => [ ...prev, { text: translations.timeout, isUser: false }, ]); } }, 60000); return () => clearInterval(intervalId); }, []); const handleSendMessage = async (message) => { setLastInteraction(Date.now()); const newMessages = [...messages, { text: message, isUser: true }]; setMessages(newMessages); setIsLoading(true); try { const lowerMessage = message.toLowerCase(); let response = null; const matchedFAQ = faqs.find((faq) => lowerMessage.includes(faq.question.toLowerCase().split(":")[1].trim()), ); if (matchedFAQ) { response = matchedFAQ.answer; } else { const aiResponse = await fetch( "/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ messages: [ { role: "system", content: "あなたはまる現のAIアシスタントです。以下の36の質問と回答を参考に、ユーザーの質問に正確かつ詳細に答えてください。" + faqs .map((faq) => `${faq.question}\n${faq.answer}`) .join("\n\n") + "\n\nもし質問の回答が見つからない場合は、「申し訳ございませんが、その質問についてはサポートチームにお問い合わせいただくのが最適です。」と回答してください。回答は常に丁寧で親切な口調を保ってください。", }, { role: "user", content: message }, ], }), }, ); const data = await aiResponse.json(); if (data.choices && data.choices[0] && data.choices[0].message) { response = data.choices[0].message.content; } else { response = translations.errorMessage; } } setMessages([...newMessages, { text: response, isUser: false }]); } catch (error) { console.error("Error:", error); setMessages([ ...newMessages, { text: translations.errorMessage, isUser: false }, ]); } finally { setIsLoading(false); } }; const handleInputChange = (e) => { setInputValue(e.target.value); }; const handleSend = () => { if (inputValue.trim() !== "") { handleSendMessage(inputValue.trim()); setInputValue(""); } }; const handleOptionClick = (option) => { if (option === "サポートに連絡") { window.open("https://marugen.tokyo/contact/", "_blank"); } else if (option === "よくある質問") { setShowFAQ(true); } else if (option === "セミナー申し込み") { window.open("https://zoom-shukyaku.net/7s/gpaibot9ex001/", "_blank"); } else { handleSendMessage(option); } }; const handleFAQClick = (faq) => { setSelectedFAQ(faq); setMessages([ ...messages, { text: faq.question, isUser: true }, { text: faq.answer, isUser: false }, ]); setShowFAQ(false); }; return (

AI自動集客１DAYセミナー

ご質問はこちら！

{messages.map((message, index) => (

))} {isLoading && (

{translations.loading}

)}

{showFAQ && (

{faqs.map((faq, index) => ( ))}

)}

{translations.options.map((option, index) => ( ))}

); }