diff --git a/chat/CLAUDE.md b/chat/CLAUDE.md new file mode 100644 index 000000000..63fe17c3c --- /dev/null +++ b/chat/CLAUDE.md @@ -0,0 +1,122 @@ +# Chat Project Guide + +## Project Structure + +``` +chat/ +├── apps/ +│ ├── landing/ # Astro marketing landing page (@chat/landing) +│ ├── web/ # SvelteKit web application (@chat/web) +│ └── mobile/ # Expo/React Native mobile app (@chat/mobile) +├── backend/ # NestJS API server (@chat/backend) +├── packages/ +│ └── chat-types/ # Shared TypeScript types (@chat/types) +└── package.json +``` + +## Commands + +### Root Level +```bash +pnpm chat:dev # Run all chat apps +pnpm dev:chat:mobile # Start mobile app +pnpm dev:chat:web # Start web app +pnpm dev:chat:landing # Start landing page +pnpm dev:chat:backend # Start backend server +``` + +### Mobile App (chat/apps/mobile) +```bash +pnpm dev # Start Expo dev server +pnpm ios # Run on iOS simulator +pnpm android # Run on Android emulator +pnpm build:dev # Build development version +pnpm build:preview # Build preview version +pnpm build:prod # Build production version +``` + +### Backend (chat/backend) +```bash +pnpm start:dev # Start with hot reload +pnpm build # Build for production +pnpm start:prod # Start production server +``` + +### Web App (chat/apps/web) +```bash +pnpm dev # Start dev server +pnpm build # Build for production +pnpm preview # Preview production build +``` + +### Landing Page (chat/apps/landing) +```bash +pnpm dev # Start dev server +pnpm build # Build for production +pnpm preview # Preview production build +``` + +## Technology Stack + +- **Mobile**: React Native 0.76.7 + Expo SDK 52, NativeWind, Expo Router +- **Web**: SvelteKit 2.x, Svelte 5, Tailwind CSS 4 +- **Landing**: Astro 5.16, Tailwind CSS +- **Backend**: NestJS 10, Azure OpenAI, Supabase +- **Types**: TypeScript 5.x + +## Architecture + +### Backend API Endpoints + +| Endpoint | Method | Description | +|----------|--------|-------------| +| `/api/health` | GET | Health check | +| `/api/chat/models` | GET | List available AI models | +| `/api/chat/completions` | POST | Create chat completion | +| `/api/conversations` | GET | List user conversations | +| `/api/conversations/:id` | GET | Get conversation details | +| `/api/conversations/:id/messages` | GET | Get conversation messages | +| `/api/conversations` | POST | Create new conversation | +| `/api/conversations/:id/messages` | POST | Add message to conversation | + +### Environment Variables + +#### Backend (.env) +``` +AZURE_OPENAI_ENDPOINT=https://... +AZURE_OPENAI_API_KEY=... +AZURE_OPENAI_API_VERSION=2024-12-01-preview +SUPABASE_URL=https://... +SUPABASE_SERVICE_KEY=... +PORT=3001 +``` + +#### Mobile (.env) +``` +EXPO_PUBLIC_SUPABASE_URL=https://... +EXPO_PUBLIC_SUPABASE_ANON_KEY=... +EXPO_PUBLIC_BACKEND_URL=http://localhost:3001 +``` + +## Code Style Guidelines + +- **TypeScript**: Strict typing with interfaces +- **Mobile**: Functional components with hooks +- **Web**: Svelte 5 runes mode +- **Styling**: Tailwind CSS everywhere +- **Formatting**: 100 char line limit, 2 space tabs, single quotes + +## AI Models Available + +| Model ID | Name | Description | +|----------|------|-------------| +| 550e8400-e29b-41d4-a716-446655440000 | GPT-O3-Mini | Fast, efficient responses | +| 550e8400-e29b-41d4-a716-446655440004 | GPT-4o-Mini | Compact, powerful | +| 550e8400-e29b-41d4-a716-446655440005 | GPT-4o | Most advanced | + +## Important Notes + +1. **Security**: API keys are stored in the backend only - never in client apps +2. **Authentication**: Uses Supabase Auth, shared with Mana Core ecosystem +3. **Database**: Supabase PostgreSQL with RLS policies +4. **Deployment**: Backend runs on port 3001 by default diff --git a/chat/apps/landing/astro.config.mjs b/chat/apps/landing/astro.config.mjs new file mode 100644 index 000000000..689f23fdb --- /dev/null +++ b/chat/apps/landing/astro.config.mjs @@ -0,0 +1,11 @@ +import { defineConfig } from 'astro/config'; +import tailwind from '@astrojs/tailwind'; +import sitemap from '@astrojs/sitemap'; + +export default defineConfig({ + site: 'https://chat.manacore.app', + integrations: [ + tailwind(), + sitemap() + ] +}); diff --git a/chat/apps/landing/package.json b/chat/apps/landing/package.json new file mode 100644 index 000000000..f7286504f --- /dev/null +++ b/chat/apps/landing/package.json @@ -0,0 +1,26 @@ +{ + "name": "@chat/landing", + "version": "1.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro check && astro build", + "preview": "astro preview", + "astro": "astro", + "type-check": "astro check" + }, + "dependencies": { + "@astrojs/check": "^0.9.0", + "@astrojs/sitemap": "^3.2.1", + "@manacore/shared-landing-ui": "workspace:*", + "astro": "^5.16.0", + "typescript": "^5.0.0" + }, + "devDependencies": { + "@astrojs/tailwind": "^6.0.0", + "@tailwindcss/typography": "^0.5.16", + "tailwindcss": "^3.4.17" + } +} diff --git a/chat/apps/landing/src/layouts/BaseLayout.astro b/chat/apps/landing/src/layouts/BaseLayout.astro new file mode 100644 index 000000000..6ddbd1850 --- /dev/null +++ b/chat/apps/landing/src/layouts/BaseLayout.astro @@ -0,0 +1,28 @@ +--- +interface Props { + title: string; + description?: string; +} + +const { title, description = 'ManaChat - AI Chat Assistant' } = Astro.props; +--- + + + + + + + + + {title} + + + + + + + diff --git a/chat/apps/landing/src/pages/index.astro b/chat/apps/landing/src/pages/index.astro new file mode 100644 index 000000000..ba96864c4 --- /dev/null +++ b/chat/apps/landing/src/pages/index.astro @@ -0,0 +1,100 @@ +--- +import BaseLayout from '../layouts/BaseLayout.astro'; +--- + + +
+ +
+
+

+ ManaChat +

+

+ Dein intelligenter KI-Chat-Assistent +

+

+ Chatte mit den leistungsstärksten KI-Modellen. GPT-4o, GPT-4o-Mini und mehr - + alles in einer einfachen, eleganten Oberfläche. +

+
+ + Mehr erfahren + + + App herunterladen + +
+
+
+ + +
+
+

+ Funktionen +

+
+
+
🤖
+

+ Mehrere KI-Modelle +

+

+ Wähle zwischen GPT-4o, GPT-4o-Mini und weiteren Modellen für deine Gespräche. +

+
+
+
💬
+

+ Konversationen speichern +

+

+ Alle deine Chats werden sicher gespeichert und sind jederzeit abrufbar. +

+
+
+
📱
+

+ Plattformübergreifend +

+

+ Nutze ManaChat auf iOS, Android und im Web - deine Daten sind überall synchronisiert. +

+
+
+
+
+ + +
+
+

+ Bereit für intelligente Gespräche? +

+

+ Starte jetzt kostenlos mit ManaChat. +

+ + Jetzt herunterladen + +
+
+ + +
+
+

© 2024 ManaChat. Powered by Mana Core.

+
+
+
+ diff --git a/chat/apps/landing/tailwind.config.mjs b/chat/apps/landing/tailwind.config.mjs new file mode 100644 index 000000000..c751e832a --- /dev/null +++ b/chat/apps/landing/tailwind.config.mjs @@ -0,0 +1,28 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + theme: { + extend: { + colors: { + primary: { + 50: '#eff6ff', + 100: '#dbeafe', + 200: '#bfdbfe', + 300: '#93c5fd', + 400: '#60a5fa', + 500: '#0A84FF', + 600: '#2563eb', + 700: '#1d4ed8', + 800: '#1e40af', + 900: '#1e3a8a', + }, + secondary: { + 500: '#5E5CE6', + } + } + }, + }, + plugins: [ + require('@tailwindcss/typography'), + ], +}; diff --git a/chat/apps/landing/tsconfig.json b/chat/apps/landing/tsconfig.json new file mode 100644 index 000000000..c5450d304 --- /dev/null +++ b/chat/apps/landing/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "astro/tsconfigs/strict", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + } +} diff --git a/chat/apps/mobile/.env.example b/chat/apps/mobile/.env.example new file mode 100644 index 000000000..ff93a8b32 --- /dev/null +++ b/chat/apps/mobile/.env.example @@ -0,0 +1,7 @@ +# Supabase Konfiguration +EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co +EXPO_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key + +# Chat Backend API +# The backend handles AI API calls securely - no API keys needed in the mobile app +EXPO_PUBLIC_BACKEND_URL=http://localhost:3001 diff --git a/chat/apps/mobile/.gitignore b/chat/apps/mobile/.gitignore new file mode 100644 index 000000000..1861e0868 --- /dev/null +++ b/chat/apps/mobile/.gitignore @@ -0,0 +1,25 @@ +node_modules/ +.expo/ +dist/ +npm-debug.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision +*.orig.* +web-build/ +# expo router +expo-env.d.ts + +# firebase/supabase/vexo +.env + +ios +android + +# macOS +.DS_Store + +# Temporary files created by Metro to check the health of the file watcher +.metro-health-check* \ No newline at end of file diff --git a/chat/apps/mobile/CLAUDE.md b/chat/apps/mobile/CLAUDE.md new file mode 100644 index 000000000..7b6d8928f --- /dev/null +++ b/chat/apps/mobile/CLAUDE.md @@ -0,0 +1,52 @@ +# Claude's Guide to Chat Mobile App + +## Commands +- Start app: `pnpm dev` or `pnpm start` +- iOS: `pnpm ios` +- Android: `pnpm android` +- Lint: `pnpm lint` +- Format: `pnpm format` +- Build: `pnpm build:dev`, `pnpm build:preview`, `pnpm build:prod` +- Supabase: `pnpm supabase:cli`, `pnpm supabase:update-models`, `pnpm supabase:setup` + +## Architecture + +### Backend Integration +- **AI API calls go through the backend** - NOT directly from the mobile app +- Backend URL configured via `EXPO_PUBLIC_BACKEND_URL` environment variable +- API keys are stored securely in the backend only +- `utils/backendApi.ts` - Backend client for AI completions +- `utils/api.ts` - API wrapper that routes calls to backend + +### Key Files +- `config/azure.ts` - Model definitions (NO API keys!) +- `services/openai.ts` - Chat service using backend +- `utils/backendApi.ts` - Backend API client +- `utils/supabase.ts` - Supabase client for data persistence + +## Code Style Guidelines +- **TypeScript**: Strict typing with interfaces for props and state +- **Components**: Functional components with hooks, located in `/components` +- **Navigation**: Expo Router in `/app` directory +- **Styling**: NativeWind (Tailwind CSS for React Native) +- **Imports**: Path aliases with `~/*` for project root +- **Formatting**: 100 char line limit, 2 space tabs, single quotes +- **State**: React Context API for global state +- **Backend**: Uses NestJS backend for AI calls, Supabase for data +- **Naming**: PascalCase for components, camelCase for functions/variables +- **Error Handling**: Try/catch with contextual error messages + +## Environment Variables + +``` +EXPO_PUBLIC_SUPABASE_URL=https://... +EXPO_PUBLIC_SUPABASE_ANON_KEY=... +EXPO_PUBLIC_BACKEND_URL=http://localhost:3001 +``` + +## Running with Backend + +1. Start the backend first: `pnpm dev:chat:backend` +2. Then start the mobile app: `pnpm dev:chat:mobile` + +The mobile app will connect to the backend for AI completions. diff --git a/chat/apps/mobile/README.md b/chat/apps/mobile/README.md new file mode 100644 index 000000000..3751d20f8 --- /dev/null +++ b/chat/apps/mobile/README.md @@ -0,0 +1,63 @@ +# Chat App + +Eine moderne mobile Chat-Anwendung zur Interaktion mit verschiedenen KI-Sprachmodellen. + +## Funktionen + +- 💬 Chat mit verschiedenen KI-Modellen (GPT-4, GPT-3.5, Claude 3) +- 🔄 Verschiedene Konversationsmodi (frei, geführt, vorlagenbasiert) +- 👤 Benutzerauthentifizierung (Registrierung, Anmeldung, Passwort-Reset) +- 📱 Cross-Platform (iOS, Android, Web) mit Expo +- 🎨 Modernes UI mit NativeWind (Tailwind CSS) + +## Technologie-Stack + +- **Frontend:** React Native mit Expo SDK 52 +- **Routing:** Expo Router v4 +- **Styling:** NativeWind (Tailwind CSS) +- **Backend:** Supabase (Auth, PostgreSQL) +- **API:** Azure OpenAI API + +## Einrichtung + +1. Repository klonen + ``` + git clone + cd chat + ``` + +2. Abhängigkeiten installieren + ``` + npm install + ``` + +3. Umgebungsvariablen konfigurieren + ``` + cp .env.example .env + ``` + Dann `.env` mit deinen Supabase- und Azure OpenAI-Zugangsdaten bearbeiten. + +4. Entwicklungsserver starten + ``` + npm run start + ``` + +## Projektstruktur + +- `/app` - Hauptanwendungslogik (Expo Router) +- `/components` - Wiederverwendbare UI-Komponenten +- `/services` - Business-Logik und API-Dienste +- `/utils` - Hilfsfunktionen +- `/context` - React Context Provider + +## Nutzung + +Nach dem Start kannst du: +- Dich registrieren oder anmelden +- Ein KI-Modell auswählen +- Eine neue Konversation starten +- Zwischen verschiedenen Konversationsmodi wechseln + +## Lizenz + +MIT \ No newline at end of file diff --git a/chat/apps/mobile/VEREINFACHUNG.md b/chat/apps/mobile/VEREINFACHUNG.md new file mode 100644 index 000000000..cb707c8e6 --- /dev/null +++ b/chat/apps/mobile/VEREINFACHUNG.md @@ -0,0 +1,55 @@ +# Vereinfachungsplan für Chat App + +Basierend auf der Codeanalyse schlage ich folgende Maßnahmen zur Vereinfachung des Projekts vor: + +## 1. Komponenten-Konsolidierung + +- **Chat-Eingabefelder**: `MessageInput.tsx` und `ChatPromptInput.tsx` zu einer Komponente zusammenführen +- **Modell-Auswahl**: Die Logik aus `ModelDropdown.tsx` und `model-selection.tsx` in einen gemeinsamen Service extrahieren +- **Nachrichten-Darstellung**: Eine wiederverwendbare `MessageRenderer`-Komponente für alle Nachrichten-Displaytypen erstellen + +## 2. Code-Reduktion + +- **Redundante Modell-Definitionen**: Gemeinsame Typendefinitionen in `types/index.ts` zentralisieren +- **API-Wrapper**: XHR durch einfachen Fetch-API-Wrapper in `utils/api.ts` ersetzen +- **Error Handling**: Zentrales Fehlerbehandlungssystem statt wiederholter try/catch-Blöcke +- **Styling**: Vollständig auf NativeWind umstellen und StyleSheet.create entfernen + +## 3. Architektur-Optimierung + +- **State Management**: + - Auth-Zustand über einen zentralen Store verwalten + - Modell- und Konversationszustand aus UI-Komponenten in Services verlagern + +- **Typ-System**: + - Gemeinsame Schnittstellen für Modelle, Nachrichten und Konversationen + - Striktere Typprüfung für alle API-Antworten + +- **Service-Layer**: + - Klare Trennung zwischen UI, Datenmodell und API-Logik + - Einheitliche Fehlerrückgabe mit Typisierung + +## 4. Dateistruktur + +``` +/app - Screens & Routing +/components - UI-Komponenten +/hooks - Gemeinsame React Hooks +/services - Business-Logik +/types - Typendefinitionen +/utils - Hilfsfunktionen +``` + +## 5. Performance-Optimierungen + +- Virtualisierte Listen für große Nachrichtenthreads +- Optimistische UI-Updates für bessere UX +- Caching von Modellantworten zur Reduzierung von API-Aufrufen + +## Implementierungsreihenfolge + +1. Typensystem konsolidieren +2. API-Wrapper erstellen +3. State Management umstellen +4. UI-Komponenten vereinheitlichen +5. Styling standardisieren \ No newline at end of file diff --git a/chat/apps/mobile/VEREINFACHUNG_STATUS.md b/chat/apps/mobile/VEREINFACHUNG_STATUS.md new file mode 100644 index 000000000..3c11b787b --- /dev/null +++ b/chat/apps/mobile/VEREINFACHUNG_STATUS.md @@ -0,0 +1,38 @@ +# Vereinfachungsplan: Status + +Fortschritt bei der Umsetzung des Vereinfachungsplans: + +## ✅ Zentrale Typendefinitionen +- Typendefinitionen für Message, Model, Conversation, etc. in `/types/index.ts` erstellt +- Stellt sicher, dass alle Komponenten die gleichen Typen verwenden + +## ✅ API-Wrapper +- Modern `fetch`-basierter API-Wrapper in `/utils/api.ts` erstellt +- Ersetzt ältere XHR-Implementierung +- Implementiert Timeout-Handling, Fehlerbehandlung und Typsicherheit + +## ✅ Fehlerbehandlung +- Zentrale Fehlerbehandlung in `/utils/error.ts` erstellt +- Unterstützt verschiedene Fehlertypen (API, Netzwerk, Validierung, etc.) +- Bietet einheitliche Fehleranzeige und -protokollierung + +## ✅ UI-Komponenten +- `useChatInput`-Hook für Eingabefelder erstellt +- `ChatInput`-Komponente vereinheitlicht die verschiedenen Nachrichteneingabefelder +- `MessageRenderer`-Komponente für einheitliche Nachrichtenanzeige erstellt + +## ✅ Services +- `modelService.ts` zentralisiert die Modell-Logik +- Implementiert Caching, Fallback-Modelle und Validierung + +## ⏳ Noch ausstehend +- Umstellung redundanter Modell-Code auf den neuen `modelService` +- Konsolidierung der Konversationslogik +- Standardisierung aller Komponenten auf NativeWind +- Erstellen weiterer gemeinsamer React Hooks + +## Verbesserungen +1. **Einfachere Codeorganisation**: zentrale Typen, weniger doppelter Code +2. **Verbesserte Fehlerbehandlung**: konsistente Fehlermeldungen +3. **Reduzierte Redundanz**: vereinheitlichte UI-Komponenten +4. **Bessere Wartbarkeit**: klare Trennung zwischen Datenzugriff und UI \ No newline at end of file diff --git a/chat/apps/mobile/app-env.d.ts b/chat/apps/mobile/app-env.d.ts new file mode 100644 index 000000000..88dc403ea --- /dev/null +++ b/chat/apps/mobile/app-env.d.ts @@ -0,0 +1,2 @@ +// @ts-ignore +/// diff --git a/chat/apps/mobile/app.json b/chat/apps/mobile/app.json new file mode 100644 index 000000000..232ce735c --- /dev/null +++ b/chat/apps/mobile/app.json @@ -0,0 +1,56 @@ +{ + "expo": { + "name": "chat", + "slug": "chat", + "version": "1.0.0", + "scheme": "chat", + "web": { + "bundler": "metro", + "output": "server", + "favicon": "./assets/favicon.png" + }, + "plugins": [ + "expo-router", + [ + "expo-dev-launcher", + { + "launchMode": "most-recent" + } + ] + ], + "experiments": { + "typedRoutes": true, + "tsconfigPaths": true + }, + "orientation": "portrait", + "icon": "./assets/icon.png", + "userInterfaceStyle": "light", + "splash": { + "image": "./assets/splash.png", + "resizeMode": "contain", + "backgroundColor": "#ffffff" + }, + "assetBundlePatterns": [ + "**/*" + ], + "ios": { + "supportsTablet": true, + "bundleIdentifier": "com.tilljs.chat" + }, + "android": { + "adaptiveIcon": { + "foregroundImage": "./assets/adaptive-icon.png", + "backgroundColor": "#ffffff" + }, + "package": "com.tilljs.chat" + }, + "extra": { + "router": { + "origin": false + }, + "eas": { + "projectId": "67f22a8b-3cae-487d-af1f-55bdaca50e81" + } + } + } +} diff --git a/chat/apps/mobile/app/(drawer)/_layout.tsx b/chat/apps/mobile/app/(drawer)/_layout.tsx new file mode 100644 index 000000000..80add684b --- /dev/null +++ b/chat/apps/mobile/app/(drawer)/_layout.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; +import { Drawer } from 'expo-router/drawer'; +import { Ionicons } from '@expo/vector-icons'; +import { useAppTheme } from '../../theme/ThemeProvider'; + +export default function DrawerLayout() { + const { isDarkMode } = useAppTheme(); + + // Anpassen des Drawer-Stils basierend auf dem Farbschema + const drawerStyles = { + backgroundColor: isDarkMode ? '#1C1C1E' : '#FFFFFF', + contentOptions: { + activeTintColor: '#0A84FF', + inactiveTintColor: isDarkMode ? '#FFFFFF' : '#000000', + activeBackgroundColor: isDarkMode ? '#2C2C2E' : '#E5E5EA', + }, + }; + + return ( + + ( + + ), + }} + /> + ( + + ), + }} + /> + ( + + ), + }} + /> + ( + + ), + }} + /> + ( + + ), + }} + /> + + ); +} \ No newline at end of file diff --git a/chat/apps/mobile/app/+html.tsx b/chat/apps/mobile/app/+html.tsx new file mode 100644 index 000000000..2fe284848 --- /dev/null +++ b/chat/apps/mobile/app/+html.tsx @@ -0,0 +1,46 @@ +import { ScrollViewStyleReset } from 'expo-router/html'; + +// This file is web-only and used to configure the root HTML for every +// web page during static rendering. +// The contents of this function only run in Node.js environments and +// do not have access to the DOM or browser APIs. +export default function Root({ children }: { children: React.ReactNode }) { + return ( + + + + + + {/* + This viewport disables scaling which makes the mobile website act more like a native app. + However this does reduce built-in accessibility. If you want to enable scaling, use this instead: + + */} + + {/* + Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. + However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line. + */} + + + {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */} +