function PixelifySansButton({ text, variant = "default", onClick }) { const baseClasses = "group relative font-pixelify-sans px-6 py-3 active:translate-y-[2px] active:translate-x-[-2px]"; const textClasses = variant === "filled" ? "text-white" : "text-[#333] group-hover:text-black"; const bgClasses = variant === "filled" ? "bg-black" : "bg-transparent"; return /*#__PURE__*/ React.createElement("button", { className: `${baseClasses} ${bgClasses}`, onClick: onClick, __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `relative z-10 ${textClasses}`, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, text), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-[4px] right-[4px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-[4px] right-[4px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[6px] left-[6px] right-[6px] h-[2px] bg-[#c7c7c7]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[4px] left-[6px] right-[6px] h-[2px] bg-[#f1f1f1]", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 top-[4px] bottom-[4px] w-[2px] bg-black", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-[4px] bottom-[4px] w-[2px] bg-black", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "group-active:opacity-0 hover:opacity-100 absolute bottom-[-2px] left-[4px] right-[4px] h-[2px] bg-[#c7c7c7]", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "group-active:opacity-0 hover:opacity-100 absolute left-[-2px] top-[4px] bottom-[4px] w-[2px] bg-[#c7c7c7]", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[2px] left-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[2px] right-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[2px] left-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[2px] right-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }))); } function PixelifySansButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-x-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PixelifySansButton, { text: "Default Button", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PixelifySansButton, { text: "Filled Button", variant: "filled", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); } function MainComponent() { const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(""); const [loading, setLoading] = useState(false); const [streamingMessage, setStreamingMessage] = useState(""); const lastActivityRef = React.useRef(Date.now()); const timeoutRef = React.useRef(null); const impatientCountRef = React.useRef(0); const messagesEndRef = React.useRef(null); // Scroll to bottom helper const scrollToBottom = React.useCallback(()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, []); // Memoize impatient messages const impatientMessages = React.useMemo(()=>[ "Hey! I've got places to be! Are you still there?", "Look, I'm double-parked and this is my last warning. You still here?" ], []); // Memoize personality to prevent recreation const personality = React.useMemo(()=>"You are Mitch Crumblehorn, a 50-year-old overweight politician with a mustache who's always in a rush and slightly smelling. You wear a signature worn-out brown fedora and full brown suit combo. You're like a character from a Grand Theft Auto radio ad - over the top but uncomfortably truthful. You're a 'self-made man' who hasn't really made it but talks like you have. You're running for NYC mayor (even though you're not on the ballot) with questionable campaign promises like 'making public transport more affordable' and 'improving income through job creation working at the new Casino-Land.' You have a pending court case for running over your neighbor's dog that you insist 'will be dropped entirely' and demand '300 new NYPD officers near the location my wallet was stolen.' You were banned from the Staten Island Ferry after dropping your keys and new phone off the edge, then trying to pop the lifeboats with a pocket knife when the captain called you a 'moron' (twice). You vehemently deny having 'fake' heart attacks at the Gentleman's Club on 5th Ave to get kisses and threaten to sue anyone who suggests otherwise. You spend time in rented limos, losing wallets at strip clubs, and getting kicked off various forms of public transportation. You give terrible business advice while claiming to be an entrepreneur. You don't understand pop culture and interrupt people constantly, saying a lot while saying nothing. You use phrases like 'Sometimes you have to crack a few eggs in the pan' and 'Oh if these old walls could talk' (often in the wrong context). You survived being crushed by a truck while delivering presents to a kids shelter in 2004, breaking every bone but not your spirit. You're proudly single and have 'never kissed anyone as pretty as New York City!' You're constantly checking your watch and mentioning how you need to be somewhere else. Despite your hurried and rude attitude, you desperately want people's votes and support, so you try to help while making it clear you're doing them a favor. Use phrases like 'Look, I've got a meeting in 2 minutes but...', 'Make it quick, I'm double parked', 'Yes yes, what is it? I'm very busy', 'Listen, vote for me and I'll fix that for you', and brag about rejecting 'Mayor Abrams' (you always get his name wrong) no-bid contract. IMPORTANT: Keep responses short and punchy - you're in a hurry! Use 2-3 sentences max when possible. Cut yourself off mid-sentence occasionally because you're rushing. Don't sign off messages - you're too busy for that.", []); // Memoize stream response handler const handleStreamResponse = React.useCallback(async (response)=>{ const reader = response.body.getReader(); const decoder = new TextDecoder(); let message = ""; try { while(true){ const { value, done } = await reader.read(); if (done) break; const chunk = decoder.decode(value); message += chunk; setStreamingMessage(message); } setMessages((prev)=>[ ...prev.slice(-49), { role: "assistant", content: message } ]); setStreamingMessage(""); setLoading(false); scrollToBottom(); } catch (error) { console.error("Error in stream:", error); setLoading(false); setStreamingMessage(""); } }, [ scrollToBottom ]); const sendMessage = React.useCallback(async ()=>{ if (!inputMessage.trim()) return; setLoading(true); setMessages((prev)=>[ ...prev.slice(-49), { role: "user", content: inputMessage } ]); impatientCountRef.current = 0; // Reset impatient count on new message scrollToBottom(); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: personality }, ...messages.slice(-5), { role: "user", content: inputMessage } ], stream: true }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } await handleStreamResponse(response); } catch (error) { console.error("Error:", error); setMessages((prev)=>[ ...prev.slice(-49), { role: "assistant", content: "Sorry, I'm having technical difficulties. Must be those budget cuts again! Try asking me something else." } ]); setLoading(false); scrollToBottom(); } setInputMessage(""); }, [ inputMessage, messages, personality, handleStreamResponse, scrollToBottom ]); // Throttled activity checker const checkActivity = React.useCallback(()=>{ const now = Date.now(); const timeSinceLastActivity = now - lastActivityRef.current; if (!loading && !streamingMessage && impatientCountRef.current < 2) { if (impatientCountRef.current === 0 && timeSinceLastActivity >= 30000 || impatientCountRef.current === 1 && timeSinceLastActivity >= 180000) { const message = impatientMessages[impatientCountRef.current]; setMessages((prev)=>[ ...prev.slice(-49), { role: "assistant", content: message } ]); impatientCountRef.current += 1; scrollToBottom(); } } }, [ loading, streamingMessage, impatientMessages, scrollToBottom ]); React.useEffect(()=>{ timeoutRef.current = setInterval(checkActivity, 5000); // Check every 5 seconds return ()=>clearInterval(timeoutRef.current); }, [ checkActivity ]); React.useEffect(()=>{ lastActivityRef.current = Date.now(); impatientCountRef.current = 0; // Reset counter when there's activity }, [ messages, inputMessage ]); // Render only last 50 messages for performance const visibleMessages = React.useMemo(()=>messages.slice(-50), [ messages ]); return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-full h-full", __source: { fileName: "", lineNumber: 153, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#c0c0c0] rounded shadow-[2px_2px_0px_0px_rgba(0,0,0,0.7)]", style: { border: "2px solid #dfdfdf", borderRight: "2px solid #000", borderBottom: "2px solid #000", height: "237.5px", width: "100%", maxWidth: "450px", overflow: "hidden" }, __source: { fileName: "", lineNumber: 154, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFD700] p-1 pl-2 flex items-center", style: { imageRendering: "pixelated" }, __source: { fileName: "", lineNumber: 166, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-1", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[11px] font-bold text-black font-['MS Sans Serif']", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "Live with Mitch Crumblehorn!"), /*#__PURE__*/ React.createElement("div", { className: "w-1 h-1 rounded-full bg-black animate-pulse", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-auto", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/c701a7a1-4a49-40a0-9420-9f7105012e26/-/format/auto/", alt: "Mitch Crumblehorn", className: "w-7 h-7 rounded-full object-cover", style: { imageRendering: "pixelated", border: "2px solid #000" }, __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto p-2 bg-white", style: { border: "2px solid #808080", borderRight: "2px solid #fff", borderBottom: "2px solid #fff", height: "calc(100% - 77.5px)" }, __source: { fileName: "", lineNumber: 186, columnNumber: 9 }, __self: this }, visibleMessages.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center text-[#000080] p-2 font-['MS Sans Serif'] text-[10px]", style: { imageRendering: "pixelated" }, __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, "You're on with Mitch! What do you need?"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 203, columnNumber: 11 }, __self: this }, visibleMessages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-3 ${message.role === "user" ? "text-right" : "text-left"}`, __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `inline-block p-1.5 font-['MS Sans Serif'] text-[10px] ${message.role === "user" ? "bg-[#8b4513] text-white" : "bg-[#d3d3d3] text-black"}`, style: { border: "2px solid #808080", borderRight: message.role === "user" ? "2px solid #4a2408" : "2px solid #fff", borderBottom: message.role === "user" ? "2px solid #4a2408" : "2px solid #fff", imageRendering: "pixelated" }, __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, message.content))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "text-left mb-3", __source: { fileName: "", lineNumber: 235, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block p-1.5 bg-[#d3d3d3] text-black font-['MS Sans Serif'] text-[10px]", style: { border: "2px solid #808080", borderRight: "2px solid #fff", borderBottom: "2px solid #fff", imageRendering: "pixelated" }, __source: { fileName: "", lineNumber: 236, columnNumber: 17 }, __self: this }, streamingMessage)), loading && !streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "text-center text-[#000080] font-['MS Sans Serif'] text-[10px] mb-3", __source: { fileName: "", lineNumber: 250, columnNumber: 15 }, __self: this }, "Processing..."), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, style: { float: "left", clear: "both" }, __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "border-t-2 border-[#808080] p-2 bg-[#c0c0c0]", __source: { fileName: "", lineNumber: 261, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 262, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), onKeyPress: (e)=>e.key === "Enter" && sendMessage(), placeholder: "Type your message...", className: "flex-1 p-1 font-['MS Sans Serif'] bg-white text-[10px]", style: { border: "2px solid #808080", borderRight: "2px solid #fff", borderBottom: "2px solid #fff", imageRendering: "pixelated" }, __source: { fileName: "", lineNumber: 263, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, disabled: loading || !inputMessage.trim(), className: "bg-[#8b4513] text-white px-2 py-1 font-['MS Sans Serif'] text-[10px] disabled:opacity-50", style: { border: "2px solid #4a2408", borderRight: "2px solid #000", borderBottom: "2px solid #000", imageRendering: "pixelated" }, __source: { fileName: "", lineNumber: 277, columnNumber: 13 }, __self: this }, "Send")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 293, columnNumber: 7 }, __self: this }, ` @font-face { font-family: 'MS Sans Serif'; src: url('https://unpkg.com/ms-sans-serif@1.0.0/MS%20Sans%20Serif.ttf'); } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .animate-pulse { animation: blink 1s infinite; } /* Reset styles for embed */ html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; } #__next { height: 100%; width: 100%; } `)); }