Public
Like
ASKNOVA
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
A beautiful, responsive ChatGPT-style web application with enhanced visual aesthetics and smooth user experience.
- 🎨 Modern Neumorphism/Dark Mode design with theme toggle
- 💬 Real-time chat interface with typing indicators
- 🤖 OpenAI GPT integration with fallback mock responses
- 📱 Fully responsive design (mobile/tablet/desktop)
- ✨ Smooth animations and micro-interactions
- 🌙 Dark/Light mode toggle
- 📜 Scrollable conversation history with auto-scroll
├── backend/
│ └── index.ts # Hono API server
├── frontend/
│ ├── index.html # Main HTML template
│ ├── index.tsx # React app entry point
│ ├── components/
│ │ ├── App.tsx # Main app component
│ │ ├── ChatBubble.tsx # Individual message component
│ │ ├── ChatInput.tsx # Message input component
│ │ └── ThemeToggle.tsx # Dark/light mode toggle
│ └── style.css # Global styles
├── shared/
│ └── types.ts # Shared TypeScript types
└── README.md
GET /
- Serves the main applicationPOST /api/chat
- Handles chat messages and AI responsesGET /frontend/*
- Serves frontend assetsGET /shared/*
- Serves shared utilities
OPENAI_API_KEY
- OpenAI API key (optional, falls back to mock responses)
The application automatically serves on the root path. Simply visit the URL to start chatting with AskNova!
✅ Modern UI/UX Design
- Neumorphism design with dark/light mode toggle
- Glassmorphism effects on chat bubbles and navigation
- Animated gradient background with floating shapes
- Smooth transitions and micro-interactions
✅ Chat Interface
- Real-time message exchange with typing indicators
- Typewriter effect for AI responses
- Auto-scroll to latest messages
- Message timestamps
- Responsive chat bubbles (user right-aligned, AI left-aligned)
✅ AI Integration
- OpenAI GPT-4o-mini integration with fallback mock responses
- Context-aware conversations (sends last 10 messages)
- Intelligent mock responses for demo purposes
- Error handling with graceful fallbacks
✅ Responsive Design
- Mobile-first approach with breakpoints for tablet/desktop
- Touch-friendly interface on mobile devices
- Adaptive layout and typography scaling
✅ Accessibility & UX
- Keyboard navigation support (Enter to send, Shift+Enter for new line)
- Auto-resizing input field
- Loading states and disabled states
- Theme persistence in localStorage
- Semantic HTML and ARIA labels
✅ Performance & Polish
- Smooth animations and transitions
- Optimized bundle with pinned React dependencies
- Error boundary for client-side error catching
- Clean, maintainable code structure