✅ Fix chat interface - restore continuous conversation flow
🎯 Major improvements to MissionControl component: - Always keep input field visible and functional after AI responses - Auto-clear input after submitting questions for better UX - Add dynamic visual indicators (first question vs follow-up) - Improve response layout with clear separation and hints - Enable proper chat-like experience for continuous learning 🌟 Additional enhancements: - Better language-specific messaging throughout interface - Clearer visual hierarchy between input and response areas - Intuitive flow that guides users to ask follow-up questions - Maintains responsive design and accessibility 🔧 Technical changes: - Enhanced MissionControl state management - Improved component layout and styling - Better TypeScript integration across components - Updated tsconfig for stricter type checking
This commit is contained in:
rwiegand
100
README.md
100
README.md
@@ -1,55 +1,93 @@
|
||||
# KidsAI Explorer 🚀
|
||||
|
||||
A beautiful, interactive bilingual frontend designed to help children develop critical thinking skills through guided AI assistance. Available in **English** and **German**, the system encourages kids to think step-by-step and discover solutions themselves instead of providing direct answers.
|
||||
A beautiful, interactive bilingual frontend designed to help children develop critical thinking skills through guided AI assistance. Built with **Next.js 15**, **TypeScript**, **Tailwind CSS**, and runs fully containerized using **Docker Compose v2** with **Docker Bake** integration for optimal build performance.
|
||||
|
||||
## Features
|
||||
|
||||
✨ **Kid-Friendly Interface**: Colorful, animated design that appeals to children
|
||||
🌍 **Bilingual Support**: Full English and German language support with easy switching
|
||||
🧠 **Critical Thinking Focus**: Guides children through thinking processes rather than giving direct answers
|
||||
🎯 **Interactive Learning**: Step-by-step guidance for problem-solving
|
||||
🎨 **Beautiful Animations**: Engaging visual effects and smooth transitions
|
||||
📱 **Responsive Design**: Works perfectly on all devices
|
||||
🔍 **Smart Question Categories**: Different thinking frameworks for science, math, technology, and general questions
|
||||
💾 **Language Persistence**: Remembers your language preference
|
||||
✨ **Kid-Friendly Interface**: Vibrant space/adventure themed design that appeals to children aged 8-12
|
||||
🌍 **Bilingual Support**: Full English and German language support with easy switching
|
||||
🧠 **Critical Thinking Focus**: Guides children through thinking processes rather than giving direct answers
|
||||
🎯 **Interactive Learning**: Step-by-step guidance for problem-solving
|
||||
🎨 **Beautiful Animations**: Engaging visual effects with floating stars, planets, and friendly robots
|
||||
📱 **Responsive Design**: Works perfectly on all devices
|
||||
🔍 **Smart Question Categories**: Different thinking frameworks for science, math, technology, and general questions
|
||||
💾 **Language Persistence**: Remembers your language preference
|
||||
🐳 **Full Docker Integration**: Runs entirely in containers with Docker Bake support
|
||||
|
||||
## How It Works
|
||||
## Technology Stack
|
||||
|
||||
1. **Ask a Question**: Children type their questions in the friendly input area
|
||||
2. **Thinking Guidance**: The system provides step-by-step thinking prompts
|
||||
3. **Action Suggestions**: Three types of follow-up activities:
|
||||
- 🔍 Research Ideas
|
||||
- 🧪 Experiment Ideas
|
||||
- 💬 Discussion Ideas
|
||||
4. **Self-Discovery**: Children learn by exploring and thinking, not by receiving direct answers
|
||||
- **Frontend**: Next.js 15 with App Router
|
||||
- **Language**: TypeScript
|
||||
- **Styling**: Tailwind CSS
|
||||
- **Containerization**: Docker + Docker Compose v2 + Docker Bake
|
||||
- **Development**: Hot reload with volume mounting
|
||||
- **Production**: Optimized multi-stage builds
|
||||
|
||||
## Educational Philosophy
|
||||
## Quick Start with Docker
|
||||
|
||||
KidsAI Explorer is built on the principle that **learning happens best when children think for themselves**. Instead of providing immediate answers, it:
|
||||
### Prerequisites
|
||||
|
||||
- Encourages curiosity and wonder
|
||||
- Breaks complex questions into manageable steps
|
||||
- Suggests safe ways to explore and experiment
|
||||
- Promotes discussion with adults and peers
|
||||
- Builds confidence in problem-solving abilities
|
||||
- Docker Desktop with Docker Compose v2
|
||||
- Docker Buildx (for Bake support)
|
||||
|
||||
## Installation
|
||||
### Setup
|
||||
|
||||
1. Navigate to the project directory:
|
||||
1. **Clone and navigate to the project**:
|
||||
```bash
|
||||
cd /var/www/html/kidsai
|
||||
git clone <repository-url>
|
||||
cd kidsai
|
||||
```
|
||||
|
||||
2. Install dependencies:
|
||||
2. **Configure environment**:
|
||||
```bash
|
||||
npm install
|
||||
cp .env.example .env
|
||||
# Edit .env and add your API keys
|
||||
```
|
||||
|
||||
3. Start the server:
|
||||
3. **Start development environment**:
|
||||
```bash
|
||||
npm start
|
||||
./docker-dev.sh dev
|
||||
```
|
||||
|
||||
That's it! The application will be available at `http://localhost:3444`
|
||||
|
||||
## Docker Bake + Compose v2 Integration
|
||||
|
||||
This project uses **Docker Bake** with **Docker Compose v2** for optimized builds and better development experience:
|
||||
|
||||
### Features:
|
||||
- ⚡ **Fast Builds**: Docker Bake provides parallel builds and better caching
|
||||
- 🔄 **Multi-platform**: Builds for both `linux/amd64` and `linux/arm64`
|
||||
- 📦 **Smart Caching**: GitHub Actions cache integration ready
|
||||
- 🎯 **Multiple Targets**: Development and production optimized builds
|
||||
|
||||
### Available Commands:
|
||||
|
||||
```bash
|
||||
./docker-dev.sh dev # Start development with hot reload
|
||||
./docker-dev.sh prod # Start production environment
|
||||
./docker-dev.sh build # Build with Bake (falls back to Compose)
|
||||
./docker-dev.sh bake-all # Build all targets with Bake
|
||||
./docker-dev.sh logs # View application logs
|
||||
./docker-dev.sh shell # Access container shell
|
||||
./docker-dev.sh stop # Stop all services
|
||||
./docker-dev.sh clean # Clean up containers and images
|
||||
```
|
||||
|
||||
### Manual Docker Bake Usage:
|
||||
|
||||
```bash
|
||||
# Build all targets
|
||||
docker buildx bake
|
||||
|
||||
# Build specific target
|
||||
docker buildx bake development
|
||||
docker buildx bake production
|
||||
|
||||
# Build with custom registry
|
||||
REGISTRY=myregistry/kidsai docker buildx bake
|
||||
```
|
||||
|
||||
4. Open your browser and visit `http://localhost:3000`
|
||||
|
||||
## Usage
|
||||
|
||||
Reference in New Issue
Block a user