1// AI Assistant Tutorial Response
  2export const AI_TUTORIAL_MD = String.raw`
  3# Building a Modern Chat Application with SvelteKit
  4
  5I'll help you create a **production-ready chat application** using SvelteKit, TypeScript, and WebSockets. This implementation includes real-time messaging, user authentication, and message persistence.
  6
  7## 🚀 Quick Start
  8
  9First, let's set up the project:
 10
 11${'```'}bash
 12npm create svelte@latest chat-app
 13cd chat-app
 14npm install
 15npm install socket.io socket.io-client
 16npm install @prisma/client prisma
 17npm run dev
 18${'```'}
 19
 20## 📁 Project Structure
 21
 22${'```'}
 23chat-app/
 24├── src/
 25│   ├── routes/
 26│   │   ├── +layout.svelte
 27│   │   ├── +page.svelte
 28│   │   └── api/
 29│   │       └── socket/+server.ts
 30│   ├── lib/
 31│   │   ├── components/
 32│   │   │   ├── ChatMessage.svelte
 33│   │   │   └── ChatInput.svelte
 34│   │   └── stores/
 35│   │       └── chat.ts
 36│   └── app.html
 37├── prisma/
 38│   └── schema.prisma
 39└── package.json
 40${'```'}
 41
 42## 💻 Implementation
 43
 44### WebSocket Server
 45
 46${'```'}typescript
 47// src/lib/server/socket.ts
 48import { Server } from 'socket.io';
 49import type { ViteDevServer } from 'vite';
 50
 51export function initializeSocketIO(server: ViteDevServer) {
 52    const io = new Server(server.httpServer || server, {
 53        cors: {
 54            origin: process.env.ORIGIN || 'http://localhost:5173',
 55            credentials: true
 56        }
 57    });
 58
 59    io.on('connection', (socket) => {
 60        console.log('User connected:', socket.id);
 61        
 62        socket.on('message', async (data) => {
 63            // Broadcast to all clients
 64            io.emit('new-message', {
 65                id: crypto.randomUUID(),
 66                userId: socket.id,
 67                content: data.content,
 68                timestamp: new Date().toISOString()
 69            });
 70        });
 71
 72        socket.on('disconnect', () => {
 73            console.log('User disconnected:', socket.id);
 74        });
 75    });
 76
 77    return io;
 78}
 79${'```'}
 80
 81### Client Store
 82
 83${'```'}typescript
 84// src/lib/stores/chat.ts
 85import { writable } from 'svelte/store';
 86import io from 'socket.io-client';
 87
 88export interface Message {
 89    id: string;
 90    userId: string;
 91    content: string;
 92    timestamp: string;
 93}
 94
 95function createChatStore() {
 96    const { subscribe, update } = writable<Message[]>([]);
 97    let socket: ReturnType<typeof io>;
 98    
 99    return {
100        subscribe,
101        connect: () => {
102            socket = io('http://localhost:5173');
103            
104            socket.on('new-message', (message: Message) => {
105                update(messages => [...messages, message]);
106            });
107        },
108        sendMessage: (content: string) => {
109            if (socket && content.trim()) {
110                socket.emit('message', { content });
111            }
112        }
113    };
114}
115
116export const chatStore = createChatStore();
117${'```'}
118
119## 🎯 Key Features
120
121✅ **Real-time messaging** with WebSockets  
122✅ **Message persistence** using Prisma + PostgreSQL  
123✅ **Type-safe** with TypeScript  
124✅ **Responsive UI** for all devices  
125✅ **Auto-reconnection** on connection loss  
126
127## 📊 Performance Metrics
128
129| Metric | Value |
130|--------|-------|
131| **Message Latency** | < 50ms |
132| **Concurrent Users** | 10,000+ |
133| **Messages/Second** | 5,000+ |
134| **Uptime** | 99.9% |
135
136## 🔧 Configuration
137
138### Environment Variables
139
140${'```'}env
141DATABASE_URL="postgresql://user:password@localhost:5432/chat"
142JWT_SECRET="your-secret-key"
143REDIS_URL="redis://localhost:6379"
144${'```'}
145
146## 🚢 Deployment
147
148Deploy to production using Docker:
149
150${'```'}dockerfile
151FROM node:20-alpine
152WORKDIR /app
153COPY package*.json ./
154RUN npm ci --only=production
155COPY . .
156RUN npm run build
157EXPOSE 3000
158CMD ["node", "build"]
159${'```'}
160
161---
162
163*Need help? Check the [documentation](https://kit.svelte.dev) or [open an issue](https://github.com/sveltejs/kit/issues)*
164`;