Chatter - Standalone Chat Application

A standalone chat application with Monaco editor support and Groq API integration. Uses the Full Build approach with SCSS and chunked CSS for Val Town deployment.

1. Install dependencies: This app uses Deno with npm imports for build tools.

2. Configure Groq API:

   • Get your API key from https://console.groq.com/
   • Create a .env file in this directory:

     GROQ_API_KEY=your_groq_api_key_here
     

3. Build styles (first time or after changes):

   deno task build:styles

4. Run the server:

   deno task serve

   This will automatically build styles before starting the server.

   The app will be available at http://localhost:8001

chat-app/
├── styles/
│   ├── build.ts              # Build script (compiles SCSS + chunks CSS)
│   ├── app.scss              # App-specific SCSS with @apply support
│   ├── tailwind.config.js    # Tailwind configuration
│   ├── postcss.config.js     # PostCSS configuration
│   ├── design-system/        # Copied design system (gitignored)
│   └── chat-app-*.css        # Generated CSS chunks
├── src/
│   └── monaco-utils.js       # Monaco editor utilities
├── index.html                # Main HTML file
├── main.tsx                  # Hono server with Groq endpoint
└── README.md                 # This file

The build script (styles/build.ts) does the following:

1. Copies design system from ../../../styles → styles/design-system/
2. Compiles design system from theme.scss (compressed)
3. Compiles app styles from app.scss with PostCSS/Tailwind for @apply support
4. Combines both into a single CSS file
5. Chunks if total size > 60KB (for Val Town deployment)

• GET / - Main chat interface
• POST /api/chat - Chat completion endpoint (uses Groq API)
• GET /styles.css - Combined CSS (stitches chunks together)
• GET /src/monaco-utils.js - Monaco editor utilities
• GET /health - Health check

• Real-time chat with Groq API
• Monaco editor for code blocks
• Markdown rendering
• Responsive design
• Full design system integration
• SCSS with @apply directives
• Chunked CSS for Val Town deployment

This app uses Approach 1: Full Build from the styling workflow:

• ✅ Complete design system copied and compiled
• ✅ SCSS files with @apply support
• ✅ PostCSS + Tailwind processing
• ✅ Chunked CSS output (< 60KB per chunk)
• ✅ Server-side CSS stitching

To rebuild styles after making changes to styles/app.scss:

deno task build:styles

Or just run deno task serve which will build automatically.

The chunked CSS files (chat-app-1.css, chat-app-2.css, etc.) should be committed to your repo. The server automatically stitches them together when serving /styles.css.