AI Chat Interface 🚀

Welcome to the AI Chat Interface, a modern and interactive chat application that leverages React, speech recognition, and theme customization to provide an intuitive user experience.

🎯 Features

🔹 Chat Functionality

Real-time message threading

Supports both text and speech input

Quick reply suggestions

AI-powered responses

🎤 Speech Recognition

Integrated browser API for voice input

Converts speech to text seamlessly

🎨 Theming & UI

Light and dark mode support

Responsive design for mobile and desktop

Accessible UI elements

⚡ Performance & State Management

Efficient React state management with Context API

Optimized rendering for smooth user interactions

📂 Project Structure

AI-Chat-Interface/ ├── src/ │ ├── components/ # UI components │ ├── hooks/ # Custom hooks │ ├── context/ # Global state management │ ├── services/ # API integrations │ └── types/ # Type definitions ├── public/ ├── Dockerfile ├── docker-compose.yml └── README.md

🚀 Getting Started

Prerequisites

Ensure you have the following installed:

Node.js (>= 16.x)

npm or yarn

Docker (optional)

Installation

git clone https://github.com/DeepaRaj123/ai-chat-interface.git cd ai-chat-interface

npm install

npm start

Running with Docker

docker-compose up

Access the app at: http://localhost:3000

🏗️ Architecture Overview

Component-based structure: Modular React components for maintainability.

Context API for state management: Handles global state efficiently.

Custom Hooks: Encapsulates reusable logic.

Theming system: Light/Dark mode support.

API Services: Handles message processing and interactions.

🛠️ Implementation Decisions

React with functional components: Ensures modern and optimized development.

TailwindCSS for styling: Provides flexibility and responsiveness.

SpeechRecognition API: Enables real-time voice input processing.

Jest & React Testing Library: Ensures robust testing.

Docker support: For easy deployment and environment consistency.

🧪 Testing Approach

The project includes:

Component Unit Tests using Jest & Testing Library.

Hook Testing for custom hooks.

Integration Tests for ensuring end-to-end functionality.

Accessibility Tests with jest-axe to maintain WCAG compliance.

Run tests with:

npm test