💡[Feature]: Day 2 - ChatBot: Build "Chat with Gemini" Core Interface (Web Version)

[SB2318]

Is there an existing issue for this?

• [x] I have searched the existing issues

✅ Tasks

• [ ] Fork the submodule (https://github.com/SB2318/IEEE-s-Mindful-Devs-Bootcamp)
• [ ] Create a new branch add your changes there
• [ ] Create PR For the submodule

Feature Description

📌 Overview

We need to create the core web interface for a "Chat with Gemini" feature.
This includes building a clean UI layout inspired by modern AI chat apps and preparing the base structure for future backend/API integration.

🎯 Goals

• Build a minimal, clean, responsive chat UI.
• Follow a Gemini-style aesthetic: simple, modern, white layout, soft rounded bubbles.
• Support static chat messages for now (no backend required).
• Include message input + mic icon (UI only).
• Include a placeholder for Gemini logo/brand.

🧩 Core Requirements

1. Header

• Gemini logo (placeholder icon + "Gemini" text)
• Center aligned

2. Chat Area

• Vertical scrollable chat container
• Two types of message bubbles:
  • AI bubble: left aligned, light gray background (#F1F3F4)
  • User bubble: right aligned, slightly darker background (#E6E9EB)

3. Input Box

• Rounded input field
• Placeholder: "Enter your message…"
• Mic icon on the right (SVG allowed)
• Should stay sticky at the bottom

---

✔️ Acceptance Criteria

• UI must be responsive (mobile + desktop)
• Chat bubbles should auto-wrap and maintain spacing
• Input should be fully functional (UI only, no API calls)
• Code should be clean, reusable, component-based (if using React)
• Add screenshots in PR description after completion

Use Case

📁 Suggested File Structure (React Example)

/src ├── components │ ├── ChatHeader.jsx │ ├── ChatBubble.jsx │ ├── ChatInput.jsx │ ├── pages │ └── ChatWithGemini.jsx │ ├── styles │ └── chat.css (optional)

Notes

• No backend integration yet — this task is UI only.
• The design should be minimal, clean, and futuristic.

Benefits

No need to follow my suggested design, you can follow your own intuition.

Add ScreenShots

Priority

High

Record

• [x] I have read the Contributing Guidelines
• [ ] I'm a GSSOC'24 contributor
• [ ] I'm a IEEE IGDTUW contributor
• [ ] I want to work on this issue

[github-actions[bot]]

Thank you for creating this issue! We'll look into it as soon as possible. Your contributions are highly appreciated! 😊

[justynakwasniak]

hi, i'd like to try with this issue

[SB2318]

hi, i'd like to try with this issue

Yeah sure!

Your Work Repository: https://github.com/SB2318/IEEE-s-Mindful-Devs-Bootcamp