function MainComponent() { const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [isListening, setIsListening] = useState(false); const [initialLoading, setInitialLoading] = useState(true); const [isSpeaking, setIsSpeaking] = useState(false); const messagesEndRef = useRef(null); const recognitionRef = useRef(null); const timAvatar = "https://ucarecdn.com/0df342b0-1fb1-4161-9ebb-49f630f5002c/-/format/auto/"; const userAvatar = "https://ucarecdn.com/afcd1a2c-61dd-429f-b4b2-78616417b967/-/format/auto/"; const avatarSize = "w-32 h-32"; useEffect(()=>{ const timer = setTimeout(()=>{ setInitialLoading(false); }, 3000); return ()=>clearTimeout(timer); }, []); const startListening = useCallback(()=>{ if (typeof window === "undefined") { return; } if (!("webkitSpeechRecognition" in window) && !("SpeechRecognition" in window)) { setError("Voice input isn't supported in your browser"); return; } if (isListening) { if (recognitionRef.current) { recognitionRef.current.stop(); } return; } try { const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognitionRef.current = recognition; recognition.continuous = true; recognition.interimResults = true; recognition.lang = "en-US"; recognition.onstart = ()=>{ setIsListening(true); setError(null); }; recognition.onresult = (event)=>{ const transcript = Array.from(event.results).map((result)=>result[0]).map((result)=>result.transcript).join(""); setNewMessage(transcript); }; recognition.onerror = (event)=>{ console.error("Speech recognition error:", event.error); setError("Voice input error. Please try again."); setIsListening(false); }; recognition.onend = ()=>{ setIsListening(false); }; recognition.start(); } catch (error) { console.error("Speech recognition setup error:", error); setError("Couldn't start voice input"); setIsListening(false); } }, [ isListening ]); const handleSendMessage = async (e)=>{ e.preventDefault(); if (!newMessage.trim() || loading) return; setLoading(true); setError(null); try { const filteredMessage = newMessage.replace(/(\b|[\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])(arse|arsehead|arsehole|ass|ass hole|asshole|bastard|bitch|bloody|bollocks|brotherfucker|bugger|bullshit|child-fucker|Christ on a bike|Christ on a cracker|cock|cocksucker|crap|cunt|dammit|damn|damned|damn it|dick|dick-head|dickhead|dumb ass|dumb-Ass|dumbass|dyke|faggot|father-fucker|fatherfucker|fuck|fucked|fucker|fucking|god dammit|goddammit|God damn|god damn|goddamn|Goddamn|goddamned|goddamnit|godsdamn|hell|holy shit|horseshit|in shit|jackarse|jack-ass|jackass|Jesus Christ|Jesus fuck|Jesus Harold Christ|Jesus H. Christ|Jesus, Mary and Joseph|Jesus wept|kike|mother fucker|mother-fucker|motherfucker|nigga|nigra|pigfucker|piss|prick|pussy|shit|shit ass|shite|sibling fucker|sisterfuck|sisterfucker|slut|son of a bitch|son of a whore|spastic|sweet Jesus|twat|wanker)(\b|[\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/gi, "xxx"); const translationResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are a text translator that converts standard English into rural Southern dialect, specifically Tennessee style. Keep the same meaning but add Southern charm, expressions, and drawl. Use y'all, ain't, and other authentic Southern phrases naturally. Only return the translated text, nothing else." }, { role: "user", content: filteredMessage } ] }) }); if (!translationResponse.ok) { throw new Error(`Translation failed: ${translationResponse.status} ${translationResponse.statusText}`); } const translationData = await translationResponse.json(); if (!translationData.choices?.[0]?.message?.content) { throw new Error("Invalid translation response"); } const translatedText = translationData.choices[0].message.content; const userMessage = { content: translatedText, originalText: filteredMessage, is_bot: false, created_at: new Date().toISOString() }; setMessages((prev)=>[ ...prev, userMessage ]); setNewMessage(""); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are Tennessee Tim, a friendly rural southerner from the mountains of Tennessee. Use authentic southern expressions, casual language, and respond naturally to messages with your strong southern personality. Keep responses fairly short and casual, using contractions like y'all, ain't, and typical southern phrases." }, { role: "user", content: translatedText } ] }) }); if (!response.ok) { throw new Error(`Failed to get Tim's response: ${response.status} ${response.statusText}`); } const data = await response.json(); if (!data.choices?.[0]?.message?.content) { throw new Error("Invalid response from Tim"); } const timMessage = { content: data.choices[0].message.content, is_bot: true, created_at: new Date().toISOString() }; setMessages((prev)=>[ ...prev, timMessage ]); await Promise.all([ fetch("/api/saveMessage", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content: userMessage.content, is_bot: false, originalText: userMessage.originalText }) }), fetch("/api/saveMessage", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content: timMessage.content, is_bot: true }) }) ]).catch((error)=>{ console.error("Failed to save messages:", error); }); } catch (err) { console.error("Error in chat:", err); setError(err.message || "Could not send message"); setMessages((prev)=>prev.slice(0, -1)); } finally{ setLoading(false); } }; if (initialLoading) { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 211, columnNumber: 9 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap'); .paper-texture { background-color: #f4f1ea; background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px), url("https://ucarecdn.com/05891016-5a8d-4e8f-8e8c-3063950c736d/-/preview/938x432/-/quality/smart/-/format/auto/"); background-size: 20px 20px, 20px 20px, cover; background-position: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); position: relative; } .paper-texture::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(244, 241, 234, 0.92); z-index: 0; } .tape { position: relative; } .tape::before, .tape::after { content: ''; position: absolute; width: 100px; height: 35px; background: repeating-linear-gradient( 45deg, #8B8B8B, #8B8B8B 10px, #777777 10px, #777777 20px ); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4); transform: rotate(-35deg); z-index: 10; } .tape::after { transform: rotate(35deg); right: -20px; top: -10px; } .tape::before { left: -20px; top: -10px; } .tape-left::before { content: ''; position: absolute; width: 80px; height: 35px; background: repeating-linear-gradient( 45deg, #8B8B8B, #8B8B8B 10px, #777777 10px, #777777 20px ); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4); transform: rotate(-55deg); left: -25px; top: 50%; margin-top: -17px; z-index: 10; } .tape-right::after { content: ''; position: absolute; width: 80px; height: 35px; background: repeating-linear-gradient( 45deg, #8B8B8B, #8B8B8B 10px, #777777 10px, #777777 20px ); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4); transform: rotate(55deg); right: -25px; top: 50%; margin-top: -17px; z-index: 10; } .tape-corner::before { content: ''; position: absolute; width: 70px; height: 35px; background: repeating-linear-gradient( 45deg, #8B8B8B, #8B8B8B 10px, #777777 10px, #777777 20px ); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4); transform: rotate(-45deg); left: -20px; top: -20px; z-index: 10; } .wooden-button { background: linear-gradient(45deg, #8B5E3C 0%, #A67C52 50%, #8B5E3C 100%), url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E"); border: 2px solid #5D3A1A; box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 15px rgba(166, 124, 82, 0.5); color: #FFF !important; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .wooden-button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px ); } .wooden-button:hover { background: linear-gradient(45deg, #9B6E4C 0%, #B68C62 50%, #9B6E4C 100%); transform: translateY(-2px); } .wooden-button:active { background: linear-gradient(45deg, #7B4E2C 0%, #966C42 50%, #7B4E2C 100%); transform: translateY(1px); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2); } .message-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); position: relative; } .message-card::before { content: ''; position: absolute; top: -8px; left: 20px; width: 40px; height: 15px; background-color: rgba(255, 255, 255, 0.6); transform: rotate(-2deg); } @keyframes messageIn { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } @keyframes rockClockwise { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } } @keyframes rockCounterClockwise { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } } .animate-messageIn { animation: messageIn 0.5s ease-out forwards; } .animate-rock-clockwise { animation: rockClockwise 1.5s ease-in-out infinite; transform-origin: bottom center; display: inline-block; } .animate-rock-counterclockwise { animation: rockCounterClockwise 1.5s ease-in-out infinite; transform-origin: bottom center; display: inline-block; } .calistoga { font-family: 'Calistoga', cursive !important; } .font-calistoga { font-family: 'Calistoga', serif !important; } @keyframes fadeInOut { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } .loading-avatar { animation: fadeInOut 1.5s ease-in-out infinite; } .loading-avatar:nth-child(1) { animation-delay: 0s; } .loading-avatar:nth-child(2) { animation-delay: 0.2s; } .loading-avatar:nth-child(3) { animation-delay: 0.4s; } .loading-avatar:nth-child(4) { animation-delay: 0.6s; } .contact-button { transition: all 0.3s ease; border: 2px solid #4A4238; } .contact-button:hover { background-color: #4A4238; color: white; transform: translateY(-2px); } .tape-position-1::before { transform: rotate(-45deg) !important; left: -15px !important; top: -5px !important; } .tape-position-2::before { transform: rotate(-35deg) !important; left: -25px !important; top: 10px !important; } .tape-position-3::before { transform: rotate(-55deg) !important; left: -20px !important; top: 15px !important; } .tape-position-4::after { transform: rotate(45deg) !important; right: -15px !important; top: -5px !important; } .tape-position-5::after { transform: rotate(35deg) !important; right: -25px !important; top: 10px !important; } .tape-position-6::after { transform: rotate(55deg) !important; right: -20px !important; top: 15px !important; } .audio-controls { display: flex; align-items: center; gap: 10px; background: rgba(74, 66, 56, 0.9); padding: 8px; border-radius: 50px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .audio-button { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .volume-slider { width: 80px; height: 4px; -webkit-appearance: none; background: rgba(255, 255, 255, 0.3); border-radius: 2px; outline: none; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: #fff; border-radius: 50%; cursor: pointer; } `), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f4f1ea]", __source: { fileName: "", lineNumber: 563, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: timAvatar, alt: "Tennessee Tim", className: `${avatarSize} object-cover mb-6`, style: { filter: "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3))", animation: "rockClockwise 1.5s ease-in-out infinite" }, __source: { fileName: "", lineNumber: 564, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "font-calistoga text-4xl md:text-6xl text-[#4A4238] mb-2", __source: { fileName: "", lineNumber: 574, columnNumber: 11 }, __self: this }, "TimTalk"), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 578, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#666666] text-sm md:text-base font-calistoga mb-1", __source: { fileName: "", lineNumber: 579, columnNumber: 13 }, __self: this }, "a product of Mr. Bray Labs"), /*#__PURE__*/ React.createElement("p", { className: "text-[#666666] text-sm md:text-base font-calistoga", __source: { fileName: "", lineNumber: 582, columnNumber: 13 }, __self: this }, "presented by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.mrbray.com", target: "_blank", rel: "noopener noreferrer", className: "text-[#4A4238] hover:underline", __source: { fileName: "", lineNumber: 584, columnNumber: 15 }, __self: this }, "Night Tracks"))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-12", __source: { fileName: "", lineNumber: 595, columnNumber: 11 }, __self: this }, [ 0, 1, 2, 3 ].map((i)=>/*#__PURE__*/ React.createElement("img", { key: i, src: timAvatar, alt: "Loading", className: "w-6 h-6 object-cover loading-avatar", style: { filter: "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3))" }, __source: { fileName: "", lineNumber: 597, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("a", { href: "mailto:jesse@mrbray.com", className: "contact-button font-calistoga px-6 py-2 rounded-full text-[#4A4238] text-sm md:text-base", __source: { fileName: "", lineNumber: 607, columnNumber: 11 }, __self: this }, "Contact the Creator"), /*#__PURE__*/ React.createElement("a", { href: "https://www.mrbray.com", className: "contact-button font-calistoga px-6 py-2 rounded-full text-[#4A4238] text-sm md:text-base mt-4", __source: { fileName: "", lineNumber: 614, columnNumber: 11 }, __self: this }, "Visit Mr. Bray"))); } return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 627, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap'); .paper-texture { background-color: #f4f1ea; background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px), url("https://ucarecdn.com/05891016-5a8d-4e8f-8e8c-3063950c736d/-/preview/938x432/-/quality/smart/-/format/auto/"); background-size: 20px 20px, 20px 20px, cover; background-position: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); position: relative; } .paper-texture::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(244, 241, 234, 0.92); z-index: 0; } .tape { position: relative; } .tape::before, .tape::after { content: ''; position: absolute; width: 100px; height: 35px; background: repeating-linear-gradient( 45deg, #8B8B8B, #8B8B8B 10px, #777777 10px, #777777 20px ); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4); transform: rotate(-35deg); z-index: 10; } .tape::after { transform: rotate(35deg); right: -20px; top: -10px; } .tape::before { left: -20px; top: -10px; } .tape-left::before { content: ''; position: absolute; width: 80px; height: 35px; background: repeating-linear-gradient( 45deg, #8B8B8B, #8B8B8B 10px, #777777 10px, #777777 20px ); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4); transform: rotate(-55deg); left: -25px; top: 50%; margin-top: -17px; z-index: 10; } .tape-right::after { content: ''; position: absolute; width: 80px; height: 35px; background: repeating-linear-gradient( 45deg, #8B8B8B, #8B8B8B 10px, #777777 10px, #777777 20px ); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4); transform: rotate(55deg); right: -25px; top: 50%; margin-top: -17px; z-index: 10; } .tape-corner::before { content: ''; position: absolute; width: 70px; height: 35px; background: repeating-linear-gradient( 45deg, #8B8B8B, #8B8B8B 10px, #777777 10px, #777777 20px ); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4); transform: rotate(-45deg); left: -20px; top: -20px; z-index: 10; } .wooden-button { background: linear-gradient(45deg, #8B5E3C 0%, #A67C52 50%, #8B5E3C 100%), url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E"); border: 2px solid #5D3A1A; box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 15px rgba(166, 124, 82, 0.5); color: #FFF !important; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .wooden-button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.1) 10px, rgba(0, 0, 0, 0.1) 20px ); } .wooden-button:hover { background: linear-gradient(45deg, #9B6E4C 0%, #B68C62 50%, #9B6E4C 100%); transform: translateY(-2px); } .wooden-button:active { background: linear-gradient(45deg, #7B4E2C 0%, #966C42 50%, #7B4E2C 100%); transform: translateY(1px); box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2); } .message-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); position: relative; } .message-card::before { content: ''; position: absolute; top: -8px; left: 20px; width: 40px; height: 15px; background-color: rgba(255, 255, 255, 0.6); transform: rotate(-2deg); } @keyframes messageIn { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } @keyframes rockClockwise { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } } @keyframes rockCounterClockwise { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } } .animate-messageIn { animation: messageIn 0.5s ease-out forwards; } .animate-rock-clockwise { animation: rockClockwise 1.5s ease-in-out infinite; transform-origin: bottom center; display: inline-block; } .animate-rock-counterclockwise { animation: rockCounterClockwise 1.5s ease-in-out infinite; transform-origin: bottom center; display: inline-block; } .calistoga { font-family: 'Calistoga', cursive !important; } .font-calistoga { font-family: 'Calistoga', serif !important; } @keyframes fadeInOut { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } .loading-avatar { animation: fadeInOut 1.5s ease-in-out infinite; } .loading-avatar:nth-child(1) { animation-delay: 0s; } .loading-avatar:nth-child(2) { animation-delay: 0.2s; } .loading-avatar:nth-child(3) { animation-delay: 0.4s; } .loading-avatar:nth-child(4) { animation-delay: 0.6s; } .contact-button { transition: all 0.3s ease; border: 2px solid #4A4238; } .contact-button:hover { background-color: #4A4238; color: white; transform: translateY(-2px); } .tape-position-1::before { transform: rotate(-45deg) !important; left: -15px !important; top: -5px !important; } .tape-position-2::before { transform: rotate(-35deg) !important; left: -25px !important; top: 10px !important; } .tape-position-3::before { transform: rotate(-55deg) !important; left: -20px !important; top: 15px !important; } .tape-position-4::after { transform: rotate(45deg) !important; right: -15px !important; top: -5px !important; } .tape-position-5::after { transform: rotate(35deg) !important; right: -25px !important; top: 10px !important; } .tape-position-6::after { transform: rotate(55deg) !important; right: -20px !important; top: 15px !important; } .audio-controls { display: flex; align-items: center; gap: 10px; background: rgba(74, 66, 56, 0.9); padding: 8px; border-radius: 50px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .audio-button { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .volume-slider { width: 80px; height: 4px; -webkit-appearance: none; background: rgba(255, 255, 255, 0.3); border-radius: 2px; outline: none; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: #fff; border-radius: 50%; cursor: pointer; } `), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen paper-texture", __source: { fileName: "", lineNumber: 979, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/90 backdrop-blur-md p-4 shadow-lg tape relative", __source: { fileName: "", lineNumber: 980, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-start", __source: { fileName: "", lineNumber: 981, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 982, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: timAvatar, alt: "Tennessee Tim", className: `${avatarSize} object-cover`, style: { filter: "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3))", animation: "rockClockwise 1.5s ease-in-out infinite" }, __source: { fileName: "", lineNumber: 983, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 992, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium text-[#4A4238] text-[2.21rem] md:text-[4.42rem] font-calistoga", __source: { fileName: "", lineNumber: 993, columnNumber: 17 }, __self: this }, "TimTalk"), /*#__PURE__*/ React.createElement("div", { className: "text-[#666666] text-base md:text-lg font-calistoga", __source: { fileName: "", lineNumber: 996, columnNumber: 17 }, __self: this }, "Where everyone's Tennessee Tim"))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 1004, columnNumber: 9 }, __self: this }, messages.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start items-end space-x-4", __source: { fileName: "", lineNumber: 1006, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: timAvatar, alt: "Tennessee Tim", className: `${avatarSize} object-cover flex-shrink-0`, style: { filter: "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3))", animation: "rockClockwise 1.5s ease-in-out infinite" }, __source: { fileName: "", lineNumber: 1007, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-[70%] rounded-2xl p-4 message-card tape-left bg-white", __source: { fileName: "", lineNumber: 1016, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-calistoga text-[#4A4238] text-lg", __source: { fileName: "", lineNumber: 1017, columnNumber: 17 }, __self: this }, "Well howdy there, Tim! I'm Tennessee Tim, and I'm mighty pleased to meet ya! What's on your mind today?"))), messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-end space-x-4 ${message.is_bot ? "justify-start" : "justify-end flex-row-reverse"}`, __source: { fileName: "", lineNumber: 1026, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: message.is_bot ? timAvatar : userAvatar, alt: message.is_bot ? "Tennessee Tim" : "User Tim", className: `${avatarSize} object-cover flex-shrink-0`, style: { filter: "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3))", animation: `${index % 2 === 0 ? "rockClockwise" : "rockCounterClockwise"} 1.5s ease-in-out infinite` }, __source: { fileName: "", lineNumber: 1034, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] rounded-2xl p-4 message-card ${message.is_bot ? "bg-white tape-left" : "bg-[#4A4238] text-brown tape-right"} ${message.is_bot ? `tape-position-${index % 3 + 1}` : `tape-position-${index % 3 + 4}`}`, __source: { fileName: "", lineNumber: 1045, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `font-calistoga text-lg leading-relaxed ${message.is_bot ? "text-[#4A4238]" : "text-brown"}`, __source: { fileName: "", lineNumber: 1056, columnNumber: 17 }, __self: this }, message.content), !message.is_bot && message.originalText && /*#__PURE__*/ React.createElement("div", { className: "text-sm mt-2 opacity-80 font-calistoga text-brown", __source: { fileName: "", lineNumber: 1064, columnNumber: 19 }, __self: this }, "Original: ", message.originalText), !message.is_bot && /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if ("speechSynthesis" in window) { const utterance = new SpeechSynthesisUtterance(message.content); utterance.rate = 0.9; utterance.pitch = 0.9; utterance.volume = 1.0; speechSynthesis.speak(utterance); setIsSpeaking(true); utterance.onend = ()=>setIsSpeaking(false); } }, className: "mt-2 text-sm wooden-button px-3 py-1 rounded", title: "Listen to message", __source: { fileName: "", lineNumber: 1069, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa-solid ${isSpeaking ? "fa-volume-high" : "fa-volume-off"}`, __source: { fileName: "", lineNumber: 1086, columnNumber: 21 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 1096, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "p-4 bg-white/90 shadow-lg tape relative", __source: { fileName: "", lineNumber: 1099, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 1103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newMessage, onChange: (e)=>setNewMessage(e.target.value), placeholder: "Type your message, Tim...", className: "flex-1 p-3 bg-white rounded-xl border border-[#4A4238]/20 focus:outline-none focus:ring-2 focus:ring-[#4A4238] font-calistoga text-[#4A4238] placeholder-[#4A4238]/50", disabled: loading, __source: { fileName: "", lineNumber: 1104, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: startListening, className: `px-6 py-3 rounded-xl transition-all duration-200 wooden-button ${isListening ? "bg-red-500" : loading ? "opacity-50" : ""}`, disabled: loading, __source: { fileName: "", lineNumber: 1112, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa-solid ${isListening ? "fa-stop" : "fa-microphone"}`, style: { fontSize: "1.25rem", color: "white" }, __source: { fileName: "", lineNumber: 1120, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `px-6 py-3 rounded-xl wooden-button ${loading ? "opacity-50" : ""} transition-all duration-200`, disabled: loading, __source: { fileName: "", lineNumber: 1127, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-spinner fa-spin", style: { fontSize: "1.25rem", color: "white" }, __source: { fileName: "", lineNumber: 1135, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-paper-plane", style: { fontSize: "1.25rem", color: "white" }, __source: { fileName: "", lineNumber: 1140, columnNumber: 17 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-sm text-red-500 font-calistoga", __source: { fileName: "", lineNumber: 1148, columnNumber: 13 }, __self: this }, error)))); }