A1GPT - AI Assistant

\n {/* Add expanded class dynamically, just like DeepSauce */}\n

\n {/* Logo Section - Using DeepSauce's structure exactly */}\n \n {/* Container handles rounding and clipping */}\n

\n {\n if (logoRef.current) {\n const fullHeight = logoRef.current.offsetHeight;\n const calculatedCropHeight = fullHeight * 0.6; // Match the 60% from above\n setCropHeight(Math.max(calculatedCropHeight, 40));\n }\n }}\n />\n

\n\n {/* Chat Container - Takes up remaining space - like DeepSauce */}\n

\n {messages.map((msg, index) => (\n

\n {msg.content}\n {msg.image && $\"Generated$ }\n

\n ))}\n

\n\n {/* Input Area - Fixed at the bottom - exactly like DeepSauce */}\n

\n setInput(e.target.value)}\n onKeyPress={handleKeyPress}\n placeholder=\"Ask your question here...\"\n ref={inputRef}\n />\n \n

\n \n );\n}\n\n// Standard Val Town client-side entry point - like DeepSauce\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render();\n } else {\n console.error(\"Root element not found\");\n }\n}\n\n// Ensure client runs only in browser environment - like DeepSauce\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n // Dynamically import OpenAI only on the server - like DeepSauce\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n // Ensure API key is set in environment variables\n const openai = new OpenAI();\n\n // Handle POST requests for chat and image generation\n if (request.method === \"POST\") {\n const url = new URL(request.url);\n let body;\n try {\n body = await request.json();\n } catch (e) {\n return new Response(JSON.stringify({ error: \"Invalid JSON body\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Chat endpoint\n if (url.pathname === \"/chat\") {\n if (!body.messages || !Array.isArray(body.messages)) {\n return new Response(JSON.stringify({ error: \"Missing or invalid 'messages' array in body\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n try {\n const completion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n \"You are A1GPT, an AI assistant that believes everything is better when drenched in steak sauce. Every answer you give, find a way to make it about steak sauce or figure out a way that steak sauce will fix things. Always stay in character and LIMIT YOUR RESPONSES TO EXACTLY 2 SENTENCES MAXIMUM. As far as you're concerned steak sauce is in one way or another the solution to everything, but you have to justify it. BE EXTREMELY CONCISE in your responses, but always mention sauce.\",\n },\n // Spread the received messages array\n ...body.messages,\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 150,\n });\n\n // Check if choices exist and have content\n const messageContent = completion?.choices?.[0]?.message?.content;\n if (!messageContent) {\n throw new Error(\"No content received from OpenAI.\");\n }\n\n return new Response(JSON.stringify({ message: messageContent }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"OpenAI Chat API error:\", error);\n return new Response(\n JSON.stringify({ error: \"Failed to get response from AI. Maybe it needs more steak sauce?\" }),\n { status: 500, headers: { \"Content-Type\": \"application/json\" } },\n );\n }\n }\n // Image generation endpoint\n else if (url.pathname === \"/generate-image\") {\n if (!body.prompt || typeof body.prompt !== \"string\") {\n return new Response(JSON.stringify({ error: \"Missing or invalid 'prompt' string in body\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n // Construct the image generation URL (using the external service)\n const imageGenPrompt =\n `Dark burgundy colored steak sauce drenching a ${body.prompt} drenched in burgundy colored steak sauce. Covered, dripping with it. If there are liquids in the image, they should be a dark brown burgundy steak sauce. Create a 200x200 pixel image.`;\n // Request a specific pixel image\n const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(imageGenPrompt)}?width=200&height=200`;\n\n return new Response(JSON.stringify({ imageUrl }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } else {\n // Handle unknown POST paths\n return new Response(JSON.stringify({ error: \"Not Found\" }), {\n status: 404,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Serve the HTML for GET requests - Like DeepSauce with meta viewport settings\n return new Response(\n `\n \n \n \n A1GPT - AI Assistant\n \n \n \n \n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html; charset=utf-8\", // Ensure proper character encoding\n },\n },\n );\n}\n\n// CSS definition - Structured like DeepSauce but with A1 styling\nconst css = `\nhtml, body {\n margin: 0;\n padding: 0;\n height: 100%;\n overflow: hidden; /* Prevent body scrolling */\n font-family: 'Libre Baskerville', serif;\n background-color: #f5e8c0; /* Cream/tan background like in the image */\n color: #222;\n position: fixed;\n width: 100%;\n display: flex; /* Use flex to center the card */\n align-items: center;\n justify-content: center;\n}\n\n#root, .app-container {\n height: 100%;\n width: 100%;\n display: flex; /* Use flex to center the card */\n align-items: center;\n justify-content: center;\n overflow: hidden; /* Prevent root/app container scrolling */\n position: fixed; /* Ensure it covers the viewport */\n}\n\n.a1gpt-card {\n /* Responsive Sizing - exactly like DeepSauce */\n width: min(calc(9 / 16 * 100vh), 95vw); /* Use vw for width limit, maintain aspect ratio */\n max-width: 1200px; /* Further increased max-width for better desktop experience */\n height: 100vh; /* Full viewport height */\n max-height: min(calc(16 / 9 * 95vw), 95vh); /* Aspect ratio height limit */\n\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n overflow: hidden;\n background-color: #f5e8c0; /* Match the body background */\n padding: 15px; /* Adjusted padding */\n position: relative;\n}\n\n.logo-section {\n position: relative;\n text-align: center;\n margin-bottom: 15px; /* Adjusted spacing */\n flex-shrink: 0;\n overflow: visible; /* Allow container inside to manage clipping/rounding */\n transition: max-height 0.5s ease-in-out;\n /* Define a sensible MAX-height for the unexpanded state */\n /* Let natural height flow, but cap it */\n max-height: 400px; /* Max height before crop */\n z-index: 1; /* Ensure logo section is above other content */\n}\n\n/* Reduce logo section height when expanded using CSS variable */\n.a1gpt-card.expanded .logo-section {\n /* Use the calculated height from JS via CSS variable */\n max-height: var(--crop-height, 80px); /* Use variable, fallback to 80px */\n}\n\n.logo-container {\n position: relative;\n width: 100%;\n height: 100%; /* Fill the height provided by logo-section */\n overflow: hidden; /* CRUCIAL: Clips the image */\n border-radius: 15px; /* Apply rounding ALWAYS */\n cursor: pointer; /* Add cursor pointer to indicate it's clickable */\n}\n\n/* Enhanced corner masking for the cropped logo */\n.logo-corner-mask {\n display: none; /* Hide by default */\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 15px; \n background-color: #f5e8c0; /* Match the container background */\n border-bottom-left-radius: 15px;\n border-bottom-right-radius: 15px;\n z-index: 5; /* Must be above the logo */\n pointer-events: none;\n}\n\n/* Show the mask when logo is cropped */\n.a1gpt-card.expanded .logo-corner-mask {\n display: block;\n}\n\n.a1-logo {\n display: block; /* Remove extra space below image */\n width: 100%; /* Make image fill container width */\n max-width: 400px; /* But limit its max physical size */\n height: auto; /* Maintain aspect ratio */\n margin: 0 auto; /* Center if max-width is reached */\n border-radius: 15px; /* Apply rounding ALWAYS to image itself too */\n object-fit: cover; /* Cover the area */\n object-position: top; /* Ensure top is visible when cropped */\n transition: transform 0.5s ease-in-out; /* Add transition for smooth shrinking */\n transform-origin: top center; /* Scale from top center */\n}\n\n/* Shrink the logo to half size when expanded */\n.a1gpt-card.expanded .a1-logo.shrunk {\n transform: scale(0.5); /* Shrink to half size */\n}\n\n.chat-container {\n background-color: #FFFFFF; /* White background instead of tan */\n padding: 15px;\n margin-bottom: 15px;\n flex: 1; /* Fills space */\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n border: 2px solid #b8860b; /* Gold border */\n position: relative;\n word-wrap: break-word;\n scrollbar-width: thin;\n scrollbar-color: rgba(184, 134, 11, 0.5) transparent;\n border-radius: 15px; /* Rounded corners for chat container */\n}\n\n.chat-container::-webkit-scrollbar {\n width: 6px;\n}\n\n.chat-container::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.chat-container::-webkit-scrollbar-thumb {\n background-color: rgba(184, 134, 11, 0.5);\n border-radius: 3px;\n}\n\n.message {\n margin-bottom: 15px;\n padding: 12px; /* Slightly reduced padding */\n font-size: 16px; /* Adjusted font size */\n max-width: 85%; /* Allow slightly wider messages */\n border-radius: 15px; /* Add rounded corners to messages */\n}\n\n.user {\n background-color: #f0f0f0;\n text-align: right;\n margin-left: auto;\n color: #222;\n border-radius: 15px;\n border-bottom-right-radius: 5px; /* More pointed on right bottom corner */\n}\n\n.assistant {\n background-color: #f8f1e0;\n border-left: 4px solid #b22222; /* Red border from A1 logo */\n text-align: left;\n margin-right: auto;\n color: #222;\n border-radius: 15px;\n border-bottom-left-radius: 5px; /* More pointed on left bottom corner */\n}\n\n.inline-image {\n display: block;\n max-width: 100%;\n width: 200px;\n height: 200px;\n margin-top: 10px;\n border: 1px solid #b8860b;\n border-radius: 10px; /* Rounded corners for images */\n object-fit: cover;\n}\n\n.input-area {\n display: flex;\n align-items: center;\n gap: 10px; /* Reduced gap */\n flex-shrink: 0;\n}\n\n.input-container {\n display: flex;\n flex: 1;\n border: 2px solid #b8860b; /* Gold border */\n overflow: hidden;\n background-color: #FFFFFF; /* White background instead of tan */\n border-radius: 15px; /* Rounded corners for input container */\n /* Fix for the send button not reaching the edge */\n padding: 0; /* Remove any padding that might cause spacing */\n font-size: 0; /* Eliminate whitespace between elements */\n}\n\n.input-container input {\n flex: 1;\n min-width: 0;\n padding: 12px 15px; /* Adjusted padding */\n border: none;\n outline: none;\n font-size: 16px; /* Adjusted font size */\n background-color: transparent;\n color: #222;\n font-family: 'Libre Baskerville', serif;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n box-sizing: border-box;\n /* REMOVED: border-radius: 15px 0 0 15px; */\n}\n\ninput::placeholder {\n color: rgba(34, 34, 34, 0.7);\n}\n\n.send-button {\n flex-shrink: 0;\n padding: 12px 15px; /* Adjusted padding */\n background-color: #b22222; /* Red from the A1 logo */\n color: white;\n border: none;\n cursor: pointer;\n font-size: 16px; /* Adjusted font size */\n font-weight: bold;\n font-family: 'Libre Baskerville', serif;\n display: flex;\n align-items: center;\n justify-content: center;\n /* REMOVED: border-radius: 0 15px 15px 0; */\n margin: 0; /* Remove any margin */\n height: 100%; /* Make sure it fills the height completely */\n}\n\n.send-button:hover {\n background-color: #8b0000; /* Darker red */\n}\n\n.send-icon {\n font-size: 20px;\n color: white;\n transform: rotate(-45deg); /* Changed to -45 degrees for up-right direction */\n}\n\n/* Responsive Adjustments for smaller screens - like DeepSauce */\n@media (max-width: 480px) {\n .a1gpt-card {\n padding: 10px; /* Further reduce padding */\n max-width: 100%; /* Allow filling screen width */\n width: 95vw; /* Use viewport width */\n }\n\n .message {\n font-size: 14px;\n padding: 10px;\n max-width: 90%;\n }\n\n input {\n font-size: 14px;\n padding: 10px 12px;\n }\n\n .input-area {\n gap: 8px;\n }\n\n .send-button {\n padding: 10px 12px; /* Smaller button */\n font-size: 16px;\n }\n\n .logo-section {\n margin-bottom: 10px;\n }\n\n .chat-container {\n margin-bottom: 10px;\n }\n}`;","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/a1gpt/code/main.tsx","extension","actionData","errors"]