Feature/chat implementation

[JuanPedroOrtega]

Chat Widget - Implementation Summary

Challenge Overview

Build a modern chat widget for chatbots with:

• Core features: messages, bot avatar, dropdown menu, multiple message types, responsive design
• Bonus: Pre-chat CTA, tests, Docker

Solution Delivered

Requirements Completed ✅

Core (5/5)

• ✅ Chat window with modern UI
• ✅ Distinguished messages (bot left, user right)
• ✅ Bot avatar and name visible
• ✅ Dropdown menu (language, forget data, privacy)
• ✅ Message types: text, image cards, buttons
• ✅ Responsive (fullscreen on mobile)

Bonus (3/3)

• ✅ Pre-chat CTA button
• ✅ 114 unit tests (100% passing)
• ✅ Docker + docker-compose

Extra Features

• i18n System: Spanish/English with 40+ translations
• Typing Indicators: "typing..." + typewriter effect
• Anti-Spam: Max 5 messages per 10 seconds
• Quick Suggestions: Action buttons
• News Carousel: Scrollable news feed
• Contextual Bot: Detects greetings, farewells, help
• Persistence: localStorage for messages and preferences

Tech Stack

• Angular 16.2 (standalone components)
• TypeScript 5.1 (strict mode)
• Tailwind CSS 3.x
• RxJS (state management)
• Jasmine + Karma (testing)
• Docker

Architecture

src/app/
├── core/
│   ├── models/              # Interfaces
│   └── services/            # State, Translation
├── chat/
│   └── components/          # Chat components
└── features/
    └── mock-bot/            # Bot simulator

Key Decisions

Standalone Components

• Modern Angular architecture
• Easier to extract as library
• Better tree-shaking

No RouterModule

• Widget doesn't need routing
• Smaller bundle size

BehaviorSubject

• RxJS for state management
• No external state library

localStorage

• Persistence without backend
• Simple synchronous API

Custom i18n

• Runtime language switching
• No Angular built-in complexity

Angular 16

• Using proven project seeds
• LTS stable version
• Complete standalone support

Quick Start

# Local
npm install
npm start

# Docker
npm run docker:start

# Tests
npm test

Screenshots

---