chatbot

Frontend & UI Features, Functionality Features, and Tech Highlights of your chatbot

🎨 Frontend & UI Features

1. Responsive Chat Layout

   • Mobile-first design with max-width of 480px (perfect for mobile devices).

   • Full-height chat interface (height:100vh) with center alignment.

2. Chat Header

   • Bot profile image (circular with border).

   • Bot name “Excel Tech Bot” and online status indicator.

   • Language selection dropdown (English, Hindi, Malayalam) in the header.

3. Chat Messages Section

   • Scrollable conversation area (overflow-y:auto).

   • User messages: Green (#dcf8c6) with right-side alignment (WhatsApp style).

   • Bot messages: White with border, left-side alignment.

   • Rounded bubble-style chat design with timestamps.

4. Typing Indicator

   • Shows "Bot is typing..." while processing a query.

5. Chat Input Area

   • Rounded text input field with placeholder "Type a message...".

   • Send button styled as a circle with an arrow ➤.

   • Gesture-based mic activation (button turns into 🎤 if swiped up).

6. UI Enhancements

   • Soft shadows, rounded corners.

   • Sticky header & footer for mobile usability.

   • Auto-scroll to the latest message.

---

⚙️ Functionality Features

1. User & Bot Messages

   • Messages added dynamically to the chat window.

   • Timestamps included for each message.

2. Blogger Integration

   • Uses Google Blogger API to fetch answers from your Prime Academy blog.

   • Extracts Q&A pairs from blog posts.

   • Best answer chosen using Jaccard similarity (semantic word overlap).

   • If no answer is found → returns a fallback message.

3. MathJax Support

   • Supports LaTeX formulas rendering (useful for Electrical/Math Q&A).

4. Multilingual Support

   • Text-to-Speech (TTS):

     • English & Hindi → uses browser’s SpeechSynthesis.

     • Malayalam → uses ResponsiveVoice API (external TTS service).

   • Speech-to-Text (STT):

     • Uses webkitSpeechRecognition (Google Chrome API).

     • Captures voice input in the selected language.

5. Voice/Mic Mode

   • Normal tap → sends message.

   • Swipe up (or drag) on send button → activates mic mode 🎤.

   • Real-time speech recognition for asking questions.

6. Error Handling

   • If Blogger API fails → returns error message.

   • If no relevant Q&A found → fallback "❌ No matching content found in the blog.".

---

💡 Tech Highlights

1. Frontend Stack

   • HTML5: Structure.

   • CSS3: Custom styling, WhatsApp-like theme.

   • JavaScript (Vanilla): Core chatbot logic, no frameworks used (lightweight).

2. APIs & Libraries

   • Google Blogger API: Fetching blog Q&A content.

   • MathJax: Rendering LaTeX equations in answers.

   • ResponsiveVoice.js: Malayalam text-to-speech.

   • SpeechRecognition (Web Speech API): Voice input.

3. Algorithms

   • Text Cleaning: Removes HTML tags, trims answers.

   • Q&A Extraction: Regex-based extraction of Q... Answer....

   • Similarity Matching: Jaccard similarity for best answer selection.

4. Accessibility & UX

   • Multilingual speech input/output.

   • Mic gesture for voice-friendly usage.

   • Auto-scroll, sticky header/footer for smooth chat flow.

5. Scalable Design

   • Ready for embedding into WordPress, custom websites, or mobile WebView apps.

   • API-driven (can extend to other data sources beyond Blogger).

   • Easy to expand with more features (admin panel, DB storage, AI integration).

---

✅ In short:
This chatbot is a lightweight, mobile-optimized, multilingual educational assistant that fetches Q&A from Blogger, supports voice input/output, renders math equations, and has a WhatsApp-like UI for familiarity.