Skip to content

Pull Request: Integrate Helpmate-AI Chatbot with Enhanced User Experience #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 8, 2025

Conversation

jkarthid
Copy link
Contributor

@jkarthid jkarthid commented Mar 8, 2025

Overview

This PR integrates the Helpmate-AI chatbot directly into the CoderAI Streamlit application, providing a seamless user experience by embedding the chatbot within the main application interface rather than opening it in a separate browser window.

Changes

1. Streamlit Application Enhancements

  • Fixed Browser Window Behavior: Modified launch.py to use the --server.headless=true flag, preventing Streamlit from automatically opening a separate browser window
  • Removed Success Notification: Eliminated the "Helpmate-AI integration initialized successfully!" message to create a cleaner user interface
  • Added Session State Management: Implemented proper state management for the chatbot using Streamlit's session state

2. Chatbot UI Implementation

  • Popup Interface: Created a popup chatbot interface that appears within the main application when triggered
  • Multiple Access Points: Added buttons in both the Dashboard and Chat tabs to access the chatbot
  • Styled Header Bar: Implemented a styled header bar with title and close button
  • Responsive Design: Ensured the chatbot popup is properly sized and positioned for optimal user experience

3. Bug Fixes

  • Fixed TypeError: Resolved issues with the html() function by removing unsupported parameters
  • Improved Close Functionality: Implemented a reliable close button using page refresh
  • Simplified JavaScript: Removed complex JavaScript code that was causing compatibility issues

Technical Details

  • The chatbot is embedded using an iframe that loads the Helpmate-AI React application
  • Communication between the main application and the chatbot is handled through Streamlit's session state
  • The UI is designed to be consistent with the overall application style

Testing

  • Verified that only one browser window opens when launching the application
  • Confirmed that the chatbot can be opened and closed from multiple access points
  • Tested the chatbot functionality to ensure it works correctly within the iframe

Screenshots

image
image

Related Issues

Closes #1 - Integrate Helpmate-AI with CoderAI

jkarthid added 3 commits March 8, 2025 18:42
…This commit represents a significant architectural change in our integration approach:- Remove Langflow integration components and dependencies- Implement direct GitHub integration with enhanced features- Add new project management capabilities- Update dependency management in pyproject.tomlThe changes include:- Removal of Langflow-specific code and configurations- Addition of GitHub service layer for direct API integration- Implementation of project management features- Cleanup of unused dependencies- Update of Python package requirementsThis change improves the application's efficiency and provides bettercontrol over the integration features while reducing external dependencies.
…Code of Conduct enforcement contact details

The following changes have been made to the Code of Conduct:
- Updated the contact email for reporting incidents to contact@coderai.co
- Ensured proper formatting and consistency throughout the document
- Maintained alignment with Contributor Covenant v2.0

This update helps ensure clear communication channels for
Code of Conduct enforcement and community safety.
This commit improves the integration of the Helpmate-AI chatbot into the CoderAI application with several key enhancements:

- fix(launch): prevent multiple browser windows by adding --server.headless=true flag to Streamlit
- feat(ui): implement popup chatbot interface accessible from dashboard and chat tab
- fix(ui): remove success notification message for Helpmate-AI initialization
- refactor(ui): simplify chatbot implementation using Streamlit session state
- fix(ui): implement reliable close button using page refresh
- style(ui): improve chatbot popup styling with header bar and proper dimensions
- perf(ui): remove complex JavaScript that caused TypeError with html() component

The chatbot now appears as a popup window when triggered by buttons in the UI rather than opening in a separate browser window, providing a more seamless user experience.
@jkarthid jkarthid self-assigned this Mar 8, 2025
@jkarthid jkarthid merged commit c7c44f7 into main Mar 8, 2025
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Integrate Helpmate-AI with CoderAI
1 participant