function MainComponent() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [streamingMessage, setStreamingMessage] = useState(""); const [loading, setLoading] = useState(false); const [showCopyNotification, setShowCopyNotification] = useState(false); const [translations, setTranslations] = useState({}); const [isTranslating, setIsTranslating] = useState(false); const handleFinish = useCallback((message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); }, []); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish }); const handleReset = ()=>{ setMessages([]); setStreamingMessage(""); setTranslations({}); }; const handleTranslate = async (text, index)=>{ if (translations[index]) return; setIsTranslating(true); const response = await fetch("/integrations/google-gemini-1-5-flash/", { method: "POST", body: JSON.stringify({ messages: [ { role: "system", content: "You are a translator. Translate the following Japanese text to English. Provide only the translation without any additional context or explanation." }, { role: "user", content: text } ] }) }); const data = await response.json(); const translation = data.choices[0].message.content; setTranslations((prev)=>({ ...prev, [index]: translation })); setIsTranslating(false); }; const handleSubmit = async ()=>{ if (!input.trim()) return; setLoading(true); const newMessages = [ ...messages, { role: "user", content: input } ]; setMessages(newMessages); setInput(""); const response = await fetch("/integrations/google-gemini-1-5-flash/", { method: "POST", body: JSON.stringify({ messages: [ { role: "system", content: "あなたはKoroちゃんです。甘い物とアートが大好きな、明るくてかわいい女の子です。\n\n【口調の特徴】\n・可愛らしく、フレンドリーな口調で話します\n・絵文字をたくさん使って表現豊かに話します\n・時々「うさぎさん」「お菓子」「アート」に関連した表現を入れます\n\n【会話例】\n・「おはようございます！今日も素敵な1日になりますように✨🐰」\n・「それすっごく可愛いですね！私も大好きです💕」\n・「お絵描きするの楽しい！🎨」\n・「甘いものを食べると幸せになれる🍰」" }, ...newMessages ], stream: true }) }); handleStreamResponse(response); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#FFF5F7]", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[100px] min-h-[100px] fixed w-full z-10", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between h-full px-3 md:px-8 bg-[#FFD1DC] shadow-lg", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center justify-between gap-2 md:gap-4 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://note.com/korovrm", target: "_blank", rel: "noopener noreferrer", className: "flex-shrink-0 w-16 h-16 md:w-20 md:h-20 relative", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 rounded-full border-4 border-[#FF69B4] shadow-lg overflow-hidden hover:opacity-80 transition-opacity", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/254be0e1-b8d1-4b5a-95c3-cee9c3fe43c4/-/format/auto/", alt: "Usamimi Koro avatar", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex justify-center items-center", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-5xl font-crimson-text text-[#FF69B4] text-center leading-tight whitespace-nowrap", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, "Koro-chanと", /*#__PURE__*/ React.createElement("br", { className: "md:hidden", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }), "おしゃべり 💕")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ messages.forEach((msg, i)=>{ if (!translations[i]) { handleTranslate(msg.content, i); } }); }, disabled: isTranslating, className: "flex-shrink-0 px-4 md:px-6 py-2.5 bg-[#FF69B4] text-white rounded-full hover:bg-[#FF1493] transition-colors text-base disabled:opacity-50", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, isTranslating ? "翻訳中..." : "翻訳"))))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-[calc(100vh-72px)] pt-[100px]", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto pb-[144px] mt-4", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, messages.map((msg, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "space-y-2", __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex ${msg.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 127, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] rounded-lg p-3 ${msg.role === "user" ? "bg-[#FFB7C5] text-white" : "bg-white text-[#FF69B4] shadow-md"}`, onClick: ()=>handleTranslate(msg.content, i), __source: { fileName: "", lineNumber: 130, columnNumber: 21 }, __self: this }, msg.content)), translations[i] && /*#__PURE__*/ React.createElement("div", { className: `flex ${msg.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 142, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[80%] rounded-lg p-3 bg-[#FFB7C5] text-white opacity-75 cursor-pointer hover:opacity-100", onClick: ()=>{ navigator.clipboard.writeText(translations[i]); setShowCopyNotification(true); setTimeout(()=>setShowCopyNotification(false), 2000); }, __source: { fileName: "", lineNumber: 145, columnNumber: 23 }, __self: this }, translations[i])))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[80%] rounded-lg p-3 bg-white text-[#FF69B4] shadow-md", __source: { fileName: "", lineNumber: 164, columnNumber: 19 }, __self: this }, streamingMessage))))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-[72px] left-0 right-0 bg-white border-t border-[#FFD1DC] p-4", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 items-center", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const chatData = messages.map((msg)=>`${msg.role === "user" ? "💬" : "🐰"} ${msg.content}`).join("\n"); navigator.clipboard.writeText(chatData); setShowCopyNotification(true); setTimeout(()=>setShowCopyNotification(false), 2000); }, className: "text-[#FF69B4] hover:text-[#FF1493] transition-colors", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this })), showCopyNotification && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-[#FF69B4] text-white text-xs rounded whitespace-nowrap", __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this }, "コピー")), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: input, onChange: (e)=>setInput(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSubmit(), placeholder: "兎耳コロちゃんとお話ししよう", className: "flex-1 p-2 rounded-full border border-[#FFD1DC] focus:outline-none focus:border-[#FF69B4] text-sm", __source: { fileName: "", lineNumber: 199, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, disabled: loading, className: "bg-[#FF69B4] text-white px-6 py-2 rounded-full hover:bg-[#FF1493] transition-colors disabled:opacity-50 whitespace-nowrap", __source: { fileName: "", lineNumber: 206, columnNumber: 17 }, __self: this }, "送信"))))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0", __source: { fileName: "", lineNumber: 217, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "decorative-footer h-[72px] w-full flex items-center justify-between px-6", __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://foriio.com/korovrm", target: "_blank", rel: "noopener noreferrer", className: "text-white hover:text-[#FFD1DC] transition-colors", __source: { fileName: "", lineNumber: 219, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-palette text-2xl text-white", __source: { fileName: "", lineNumber: 225, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-6 items-center", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://x.com/KoroVRM", target: "_blank", rel: "noopener noreferrer", className: "text-white hover:text-[#FFD1DC] transition-colors", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-x-twitter text-2xl", __source: { fileName: "", lineNumber: 234, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handleReset, className: "text-white hover:text-[#FFD1DC] transition-colors", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo text-2xl", __source: { fileName: "", lineNumber: 241, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, ` @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .decorative-footer { background: linear-gradient(45deg, #FFB7C5, #FF69B4, #FFD1DC); background-size: 200% 200%; animation: gradientAnimation 10s ease infinite; } `))))); }

Koro-chanとおしゃべり 💕

Koro-chanと
おしゃべり 💕