Grexz AI

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Rebuild an interactive browser chat experience titled “Grexz AI,” presented as a dark ChatGPT-like assistant prototype rather than an action game. Use Indonesian UI text throughout. Make the app fill the viewport with a centered layout capped at 1180px. On desktop, create a two-column layout: a 255px left sidebar in very dark charcoal (#202123) with a thin gray divider, a bordered “＋ Chat baru” button at the top, an uppercase muted “HARI INI” section label, one highlighted history item reading “Grexz AI · Percakapan baru,” and a bottom profile area with a purple-blue circular GX icon, “Grexz AI,” and “Prototipe lokal.” The main panel is charcoal gray (#343541). Its top bar is about 62px high with “Grexz AI ⌄” on the left and a muted status on the right reading “● siap membantu,” with the dot green.

Below the header, show a centered welcome area: heading “Ada yang bisa saya bantu?”, explanatory text “Grexz AI adalah asisten percakapan buatanmu. Tulis pertanyaan atau pilih salah satu contoh di bawah.” and three compact rounded suggestion buttons: “Buat ide game,” “Jelaskan pelajaran,” and “Tulis cerita pendek.” Beneath it, provide a vertically scrollable message area. Render each message as a full-width row with generous horizontal padding and a small square avatar at the left. AI rows use a slightly lighter charcoal background (#444654), a green avatar labeled “GX”; user rows use the main charcoal background and a purple avatar labeled “KAMU.” Message text is light gray, preserves line breaks, and has a small muted timestamp beneath it in Indonesian locale 24-hour format.

At the bottom, use a dark composer footer with a centered, wide rounded input form. The textarea should have a transparent background, white text, placeholder “Kirim pesan ke Grexz AI...”, one-line initial height, auto-grow up to roughly 120px, and Enter submits while Shift+Enter inserts a newline. Put a green rounded square send button at the right with a white “➤” icon. Under the form, show the small centered disclaimer “Grexz AI bisa membuat kesalahan. Periksa informasi penting.” Add subtle hover states and a pressed scale effect on the send button. On screens narrower than 680px, hide the sidebar, reduce header and welcome sizing, use narrower message padding, hide the online status, and account for mobile safe-area padding at the bottom. The attached mobile visual should feel like the same polished dark navy/charcoal chat UI, with the GX branding represented by purple-blue gradient accents.

Implement the actual interaction. Initialize the transcript with an AI message: “Halo! Aku Grexz AI 👋\nTanyakan apa saja atau pilih salah satu contoh di atas.” Clicking any suggestion button sends its label as a user message. Submitting typed text appends it as a user message, clears and resets the textarea, then displays an AI typing row with three animated pulsing dots for about 650ms before replacing it with a canned response. Ignore empty submissions and prevent another send while a response is pending. Match message text case-insensitively using these rules: greetings containing halo/hai/hello/hi return “Halo! Aku Grexz AI 👋\nAda yang ingin kamu buat atau tanyakan hari ini?”; game/permainan returns an idea titled “Ide game: “Kota Terakhir” — pemain memimpin tim kecil bertahan dari gelombang zombie di kota, mengumpulkan perlengkapan, lalu membuka area baru.\n\nAku bisa bantu membuat karakter, misi, sistem skor, atau kode prototipenya.”; belajar/pelajaran/matematika/soal returns “Tentu. Kirim soal atau materi yang ingin dipelajari. Aku akan menjelaskan langkah demi langkah dengan bahasa sederhana.”; cerita/cerpen/story returns “Ide cerita: seorang anak menemukan radio tua yang bisa menerima pesan dari masa depan. Setiap pesan menyelamatkan seseorang, tetapi perlahan mengubah hidupnya sendiri.”; siapa kamu/kamu siapa returns “Aku Grexz AI, asisten virtual buatanmu. Saat ini aku berjalan sebagai prototipe lokal di browser.”; and terima kasih/makasih returns “Sama-sama! Kita bisa lanjut kapan saja.” For all other text, echo it in this exact style: “Aku memahami pesanmu:\n\n“[user text]”\n\nAku adalah prototipe Grexz AI lokal, jadi jawabanku belum memakai model bahasa sungguhan. Untuk menjadi AI seperti ChatGPT, aplikasi ini perlu dihubungkan ke backend dan model AI.” Escape user-provided HTML so it is displayed as text. Keep the transcript in memory, auto-scroll to the newest message, and make “Chat baru” clear the transcript and add “Chat baru dimulai. Ada yang ingin kamu tanyakan?” as an AI message. The visual style should be clean, restrained, responsive, and prototype-like, with no gameplay HUD, enemies, scoring, or camera movement.