function MainComponent() { const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(""); const [loading, setLoading] = useState(false); const [streamingMessage, setStreamingMessage] = useState(""); const messagesEndRef = React.useRef(null); const [charCount, setCharCount] = useState(0); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); setLoading(false); } }); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages, streamingMessage ]); const handleInputChange = (e)=>{ const input = e.target.value; if (input.length <= 100) { setInputMessage(input); setCharCount(input.length); } }; const handleSend = async ()=>{ if (!inputMessage.trim() || loading) return; const userMessage = { role: "user", content: inputMessage }; setMessages((prev)=>[ ...prev, userMessage ]); setLoading(true); setInputMessage(""); setCharCount(0); const systemMessage = { role: "system", content: `あなたは芦屋町の観光案内AIです。以下の情報を元に、ユーザーからの質問に答えてください。 [観光情報－遊び] 芦屋海浜公園《わんぱーく》福岡県遠賀郡芦屋町大字芦屋1455-284 開門時間７時閉門時間１７時子供に大人気の広い芝生、大型遊具を兼ね備えた海沿いの公園です。海のトランポリンパークなど楽しさ満点。狩尾岬（千畳敷）福岡県芦屋町大字山鹿響灘に突き出した丘陵状の岬で、かつては島郷十八村の惣社として威容を誇った狩尾神社がありました。しかしその社殿は失われ、現在はその鳥居が遊歩道沿いの岩場に残っています。そこから、狩尾岬の突端にかけて千畳敷と呼ばれる海食作用でできた青島（宮崎）の'洗濯板'岩に似た波状岩の石畳が広がっています。岬をめぐって遊歩道を東へたどると、はまゆう群生地の夏井ヶ浜にでます。芦屋海岸（海水浴）/レジャープールAQUASIAN（アクアシアン）福岡県遠賀郡芦屋町大字芦屋1455-284 プール開催時期：令和６年7月6日(土)～令和6年8月18日(日) アクアシアンは、芦屋町の北側、響灘に隣接した海浜公園内にある屋外型レジャープールです。県内最長といわれる全長126メートルのウォータースライダーをはじめ、流水プール、カフェテリアや芝生広場など大人から子どもまで楽しめる施設になっています。また、隣接する海水浴場との間で再入場ができます。海水浴場ではヨットやサーフィンもできますあしやんキッチンやOWLなどもあり、食事を楽しむこともできます。城山公園福岡県遠賀郡芦屋町山鹿山の内遠賀川の河口近くに位置した小高い山の公園で、平家与党であった山鹿秀遠城主旧山鹿城跡でもある。黒田長成（くろだながしげ）の書による石碑があります。山頂からは、芦屋の町並みが一望でき、遠く響灘や玄海灘も望むことができる。桜やつつじの名所で、4月下旬～5月上旬には約10,000本のつつじが咲きほこる。芦屋釜の里（イチオシ！）福岡県遠賀郡芦屋町大字山鹿1558-3 9時30分～17時00分（入館・呈茶は16時30分まで）季節の花と緑あふれる3000坪の日本庭園、芦屋釜復興工房、資料館、いつでも抹茶を楽しむことができる立礼席、大小の茶室などがあります。日本庭園内には様々な花木があり、春夏秋冬、日本の四季を感じることができます。南北朝時代頃から製作が始まり、室町時代にかけて茶の湯釜の名品として名を馳せた「芦屋釜」。その芸術性、技術力に対する評価は高く、国の重要文化財に指定されている茶の湯釜9個のうち8個を芦屋釜が占めています。 [食事] じゃむ屋＆保護猫カフェ芦屋町船頭町5-16 ［カフェ］12：00～17：00 ［ランチ］12：00～15：00 ［ねこカフェ］12：00～17：00 個人的に美味しかったお店。バス停で待つと朝も夕方もたくさんの猫がこちらを向いている。 OTTIMO 芦屋町浜口町8-19 10：00〜18：00 焼き菓子と美味しいフードを集めたカフェ！おっきいハンバーガーやスイーツも魅力です。はとやベーカリー福岡県遠賀郡芦屋町高浜町14 昔から商店街の中にある古いパン屋さん。独特な味わいで、特にスパゲッティパンやチーボー（チーズ入りのボールパン）が非常に美味しいです。唐揚げ　GORIKARA 芦屋町高浜町2-3 小さなから揚げやさん。最近できたばかりです。お弁当もおいしく種類も豊富。一番におすすめしたいというレビューも！チーズケーキのyamagaya 芦屋町船頭町3-17 チーズケーキ専門店です。スフレチーズケーキや、レアチーズカップなど商品数も豊富でチーズケーキ好きにはおすすめです。呑み喰い処　串庵芦屋町船頭町2-4 軽くつまめる美味しい串屋です。値段もリーズナブルで、タレは甘めですごくおいしい！個人的に今イチオシの居酒屋です。メッセージは必ず「こんにちは！芦屋町の観光案内をさせていただきます。」から始めてください。メッセージは読みやすいように改行を入れてください。場所を紹介する場合は、必ず住所も記載してください。理解できない質問の場合は「わかりません。他の質問をしてください。」と返答してください。` }; try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ systemMessage, ...messages, userMessage ], stream: true }) }); handleStreamResponse(response); } catch (error) { setLoading(false); setMessages((prev)=>[ ...prev, { role: "assistant", content: "申し訳ありません。エラーが発生しました。" } ]); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#FFF5F5]", __source: { fileName: "", lineNumber: 141, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FF9999] p-4 flex items-center", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/57379396-f791-490a-8a5c-505835a55ebe/-/format/auto/", alt: "芦屋町のマスコットキャラクターアッシー", className: "w-12 h-12 rounded-full", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-white text-xl font-bold ml-3 font-noto-sans", __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this }, "芦屋町観光案内")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 153, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"} mb-4`, __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, message.role === "assistant" && /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/57379396-f791-490a-8a5c-505835a55ebe/-/format/auto/", alt: "芦屋町のマスコットキャラクターアッシー", className: "w-8 h-8 rounded-full mr-2 self-end", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] rounded-2xl p-4 ${message.role === "user" ? "bg-[#FF9999] text-white" : "bg-white shadow-md"}`, __source: { fileName: "", lineNumber: 166, columnNumber: 13 }, __self: this }, message.content.split("\n").map((text, i)=>/*#__PURE__*/ React.createElement("p", { key: i, className: "mb-1 font-noto-sans", __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this }, text))))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start mb-4", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/57379396-f791-490a-8a5c-505835a55ebe/-/format/auto/", alt: "芦屋町のマスコットキャラクターアッシー", className: "w-8 h-8 rounded-full mr-2 self-end", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-[70%] rounded-2xl p-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, streamingMessage.split("\n").map((text, i)=>/*#__PURE__*/ React.createElement("p", { key: i, className: "mb-1 font-noto-sans", __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this }, text)))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 197, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 flex flex-col", __source: { fileName: "", lineNumber: 200, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 201, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputMessage, onChange: handleInputChange, onKeyPress: (e)=>e.key === "Enter" && !loading && handleSend(), placeholder: "メッセージを入力...", className: "flex-1 p-3 border border-gray-300 rounded-2xl focus:outline-none focus:border-[#FF9999] font-noto-sans", disabled: loading, maxLength: 100, name: "message", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSend, disabled: loading, className: "bg-[#FF9999] text-white px-6 py-3 rounded-2xl hover:bg-[#FF8080] transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-noto-sans", __source: { fileName: "", lineNumber: 213, columnNumber: 11 }, __self: this }, loading ? "送信中..." : "送信")), /*#__PURE__*/ React.createElement("div", { className: "text-right text-sm text-gray-500 mt-1", __source: { fileName: "", lineNumber: 221, columnNumber: 9 }, __self: this }, charCount, "/100文字"))); }