This project is an AI-powered chatbot implemented using HTML, CSS, and JavaScript. The chatbot interface allows users to interact with an AI model to receive responses to their queries. The project includes features such as emoji selection, file upload, and responsive design for mobile devices.
The project directory contains the following files:
index.html: The main HTML file that defines the structure of the chatbot interface.
style.css: The CSS file that styles the chatbot interface.
script.js: The JavaScript file that handles the chatbot's functionality.
README.md: This documentation file.
index.html
This file contains the HTML structure of the chatbot interface. Key elements include:
- A button to toggle the chatbot visibility.
- A popup container for the chatbot.
- The chatbot header, body, and footer.
- Integration of Google Fonts and linking to the CSS and JavaScript files.
style.css
This file contains the CSS styles for the chatbot interface. Key styles include:
- General body and element styles.
- Styles for the chatbot toggler button.
- Styles for the chatbot popup, header, body, and footer.
- Responsive styles for mobile devices.
script.js
This file contains the JavaScript code that handles the chatbot's functionality. Key functionalities include:
- Toggling the chatbot visibility.
- Handling user input and sending messages.
- Displaying bot responses.
- Emoji picker integration.
- File upload handling.
The chatbot toggler button allows users to open and close the chatbot interface. It is styled and positioned using CSS and toggled using JavaScript.
The chatbot popup contains the main interface for interacting with the chatbot. It includes:
- A header with the chatbot logo and a close button.
- A body where messages are displayed.
- A footer with a form for user input, emoji picker, and file upload options.
The emoji picker allows users to select emojis to include in their messages. It is integrated using the EmojiMart library.
Users can upload image files to send as part of their messages. The file upload functionality is handled using JavaScript and styled using CSS.
The chatbot interface is designed to be responsive and works well on mobile devices. Media queries are used to adjust styles for different screen sizes.
To run the project, simply open the
index.html
file in a web browser. The chatbot interface will be displayed, and users can interact with it by clicking the toggler button.
Users can type messages in the input field and press the Enter key or click the send button to send messages. The chatbot will respond with AI-generated messages.
Users can click the emoji picker button to open the emoji picker and select emojis to include in their messages.
Users can click the file upload button to select an image file to upload. The uploaded file will be displayed in the message.
- EmojiMart: A library for selecting emojis.
This project is licensed under the MIT License. See the LICENSE file for more details.
Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.
For any questions or inquiries, please contact the project maintainer.
This documentation provides an overview of the AI Chatbot project, its structure, key features, and usage instructions.