TASK: Frontend Development for AI-Powered Chatbot System

[mvadodariya]

Describe the task
Create an intuitive, user-friendly frontend interface for the AI-powered chatbot. This will allow users to easily report issues, track tickets, and get real-time support, while offering multilingual capabilities, dynamic reporting flows, and AI-driven assistance.

Key Features:

• Interactive Chat Interface: Provide an easy-to-use interface for users to communicate via text, voice, and attachments.
• Multilingual UI: Allow users to choose their preferred language and switch seamlessly during interactions.
• Dynamic Issue Reporting: Guide users step-by-step to report issues effectively.
• Ticket Tracking Dashboard: Display ticket statuses with real-time updates and filtering options.
• AI Assistant (AI ANM): Offer task-specific advice and in-app resources to help users solve problems.
• Real-Time Notifications: Alert users about updates to their tickets or escalations.
• Admin Dashboard: Allow admins to monitor ticket trends and chatbot performance.

[Tomkndn]

is there any design for creating the frontend of the application for any reference?
it will be useful for the developers to build it.

Well I am interested in this issue.

[Sana2319]

Hi @mvadodariya

I would like to work on this issue as part of the SheCodes (C4GT) program. Since this feature is quite extensive, I would like to begin by building a structured frontend UI prototype for the chatbot interface.

I plan to implement the chat layout, multilingual toggle (UI level), guided issue reporting flow with mock data, and a basic ticket status view. This would help establish a clean and user-friendly UI foundation before deeper backend or AI integrations are added.

Please let me know if this approach works. Thank you!

[deepthigopisetti]

Hi @mvadodariya,

I'm interested in working on this issue as part of SheCodes (C4GT).

My plan is to first build a UI prototype covering:

1. Chat interface with message bubbles
2. Language switcher (UI-level)
3. Guided issue reporting flow with mock data
4. Basic ticket status view

This will create a solid foundation before adding backend or AI features.

Does this approach sound good to you?

Thank you!

[veerakumari810]

Hi @mvadodariya,

I'm interested in working on this issue as part of SheCodes (C4GT).

My Plan:

✅ Build ticket cards with status badges

✅ Add filter buttons (All/Open/In Progress/Resolved)

✅ Implement search functionality

✅ Create empty state design

✅ Use mock data for demo

Please let me know if I can proceed. Thank you!

[KolisettiVyshnavi-2108]

@devaanshSingh
I would like to work on this issue as part of the SheCodes (C4GT) program. Since the feature scope is quite extensive, I propose starting with a well-structured frontend UI prototype for the chatbot interface.
I plan to implement the chat layout, a multilingual toggle (UI level), a guided issue reporting flow using mock data, and a basic ticket status view. This will help establish a clean, scalable, and user-friendly UI foundation before moving on to backend and AI integrations.
Please let me know if this approach aligns with your expectations. Thank you!

[Shanmukha2775]

Hello @mvadodariya
I’m interested in working on this issue as part of SheCodes (C4GT).
My idea is to first focus on building a clean and structured UI prototype. I’m planning to include:
A proper chat interface with message bubbles
A simple language switcher (UI-level for now)
A guided issue reporting flow using mock data
A basic ticket status view
I feel this will create a strong frontend base before we move to backend integration or AI features.
Please let me know if this approach looks good. I’m happy to make any changes based on your suggestions.
Thank you!

[Aruna45-star]

Hi @mvadodariya

I would like to work on this frontend task as part of the SheCodes (C4GT) program.
I plan to build a modular and scalable chatbot UI including a reusable chat component and structured layout.
I will implement multilingual support at the UI level using a configurable i18n setup.
I also aim to design a guided issue reporting flow and a ticket tracking view with filters.
The components will be structured to be backend and AI integration ready.
Please let me know if I can proceed with this approach.

Thank you!

[regulanikhitha]

AI Chatbot Frontend System is a web-based user interface designed to interact with an AI-powered backend. The system allows users to send messages and receive intelligent responses in real time. The frontend is built using modern web technologies such as HTML, CSS, and JavaScript (or React), providing a responsive and user-friendly chat experience.