Chattery AI

Model: Gemini 2.0 Flash

\n\n \n {messages.map((msg, index) => (\n \n {msg.role === \"bot\" && (\n \n )}\n

{msg.content}

\n {msg.file && (\n \n )}\n

\n ))}\n \n\n

\n Chattery AI can make mistakes, so double-check it.\n

\n \n );\n}\n\n// Client-side rendering\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\n// Server-side handler\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n Chattery AI / Gemini 2.0 Flash\n \n \n \n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}\n\n// CSS Styles\nconst css = `\n/* Import Google Font - Poppins */\n@import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap\");\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Poppins\", sans-serif;\n}\n\n:root {\n /* Dark theme colors */\n --text-color: #edf3ff;\n --subheading-color: #97a7ca;\n --placeholder-color: #c3cdde;\n --primary-color: #101623;\n --secondary-color: #283045;\n --secondary-hover-color: #333e58;\n --scrollbar-color: #626a7f;\n}\n\nbody.light-theme {\n /* Light theme colors */\n --text-color: #090c13;\n --subheading-color: #7b8cae;\n --placeholder-color: #606982;\n --primary-color: #f3f7ff;\n --secondary-color: #dce6f9;\n --secondary-hover-color: #d2ddf2;\n --scrollbar-color: #a2aac2;\n}\n\nbody {\n color: var(--text-color);\n background: var(--primary-color);\n}\n\n.container {\n overflow-y: auto;\n padding: 32px 0 60px;\n height: 100vh;\n scrollbar-color: var(--scrollbar-color) transparent;\n}\n\n.container :where(.app-header, .message, .prompt-wrapper) {\n position: relative;\n margin: 0 auto;\n width: 100%;\n padding: 0 20px;\n max-width: 990px;\n}\n\n.container .app-header {\n margin-top: 3vh;\n}\n\n.app-header .heading {\n width: fit-content;\n font-size: 3rem;\n background: linear-gradient(to right, #1d7efd, #8f6fff);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.app-header .sub-heading {\n font-size: 2.6rem;\n margin-top: -5px;\n color: var(--subheading-color);\n}\n\n.container .chats-container {\n display: flex;\n gap: 20px;\n flex-direction: column;\n max-height: calc(100vh - 250px);\n overflow-y: auto;\n padding-bottom: 20px;\n}\n\n.chats-container .message {\n display: flex;\n gap: 11px;\n align-items: flex-start;\n}\n\n.chats-container .message .avatar {\n width: 43px;\n height: 43px;\n flex-shrink: 0;\n border-radius: 50%;\n padding: 6px;\n background: var(--secondary-color);\n border: 1px solid var(--secondary-hover-color);\n}\n\n.chats-container .message .message-text {\n padding: 12px 16px;\n word-wrap: break-word;\n white-space: pre-line;\n}\n\n.chats-container .user-message {\n align-self: flex-end;\n max-width: 75%;\n}\n\n.chats-container .user-message .message-text {\n background: var(--secondary-color);\n border-radius: 13px 13px 3px 13px;\n}\n\n.chats-container .bot-message .message-text {\n background: var(--secondary-hover-color);\n border-radius: 13px 13px 13px 3px;\n}\n\n.chats-container .message .img-attachment {\n max-width: 50%;\n border-radius: 13px;\n margin-top: 10px;\n}\n\n.container .prompt-container {\n position: fixed;\n width: 100%;\n left: 0;\n bottom: 0;\n padding: 16px 0;\n background: var(--primary-color);\n}\n\n.prompt-container .prompt-wrapper {\n display: flex;\n gap: 12px;\n align-items: center;\n max-width: 990px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\n.prompt-container .prompt-form {\n flex-grow: 1;\n height: 56px;\n border-radius: 130px;\n background: var(--secondary-color);\n display: flex;\n align-items: center;\n}\n\n.prompt-form .prompt-input {\n flex-grow: 1;\n height: 100%;\n background: none;\n outline: none;\n border: none;\n font-size: 1rem;\n color: var(--text-color);\n padding-left: 24px;\n}\n\n.prompt-form .prompt-input::placeholder {\n color: var(--placeholder-color);\n}\n\n.prompt-form .prompt-actions {\n display: flex;\n align-items: center;\n gap: 5px;\n margin-right: 7px;\n}\n\n.prompt-wrapper button {\n width: 45px;\n height: 45px;\n border-radius: 50%;\n border: none;\n cursor: pointer;\n background: var(--secondary-color);\n color: var(--text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.4rem;\n}\n\n.prompt-form #send-prompt-btn {\n background: #1d7efd;\n color: white;\n}\n\n.prompt-container .disclaimer-text {\n text-align: center;\n font-size: 0.9rem;\n color: var(--placeholder-color);\n margin-top: 10px;\n}\n\n.file-upload-wrapper {\n position: relative;\n}\n\n.file-upload-wrapper .file-preview {\n max-width: 45px;\n max-height: 45px;\n border-radius: 50%;\n object-fit: cover;\n}\n\n@media (max-width: 768px) {\n .container {\n padding: 20px 0;\n }\n\n .app-header .heading {\n font-size: 2rem;\n }\n\n .app-header .sub-heading {\n font-size: 1.7rem;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/srijanb69/ChatteryGen2Flash/code/main.tsx","extension","actionData","errors"]