lekoundanmgedeon/nlp-lingua-lingala

# LinguaLingala — Frontend A production-grade Vue.js 3 chatbot interface for the LinguaLingala NLP system. Supports **Lingala → French / English** translation, sentiment analysis, and cultural explanations. --- ## Tech stack | Layer | Technology | |---|---| | Framework | Vue 3 (Composition API) | | Build tool | Vite 5 | | State | Pinia | | HTTP client | Axios | | Router | Vue Router 4 | | Fonts | Sora + JetBrains Mono (Google Fonts) | --- ## Quick start ```bash # 1. Install dependencies npm install # 2. Configure environment cp .env.example .env # Edit .env and set VITE_API_BASE_URL to your FastAPI backend # 3. Start dev server npm run dev # → localhost # 4. Build for production npm run build ``` --- ## Project structure ``` src/ ├── assets/ │ └── main.css # Global design tokens, dark mode, animations ├── components/ │ ├── ChatWindow.vue # Scrollable chat container + empty state + typing indicator │ ├── MessageList.vue # Renders all message types (user / AI / error) │ ├── MessageInput.vue # Auto-resize textarea + send button + error banner │ └── LanguageSelector.vue # FR / EN language toggle ├── composables/ │ ├── useScrollToBottom.js # Reactive auto-scroll helper │ └── useTimeFormat.js # Timestamp formatters ├── services/ │ └── api.js # Axios instance + translateText / analyzeSentiment / chatWithAI ├── store/ │ └── chatStore.js # Pinia store: messages, loading, errors, settings ├── views/ │ └── ChatView.vue # Main layout: sidebar + header + chat + input ├── App.vue └── main.js ``` --- ## Backend API contract The frontend expects a FastAPI backend with the following endpoints: ### `POST /chat` (primary) ```json // Request { "text": "Nazali na esengo.", "target_lang": "fr", "session_id": "sess_..." } // Response { "original": "Nazali na esengo.", "translation": "Je suis heureux.", "sentiment": "positive", "confidence": 0.94, "intensity": " …