Improving AI Chat Accessibility

[EngrAJ8888]

Describe the bug
During the process of creating packs, users can utilize the AI chat function. Right now, users can access this feature through an "Open Chat" button, which might not offer the most straightforward user experience. The proposed update is to replace this button with hoverable avatars directly on the Pack creation page. Clicking on these avatars prompts the appearance of a floating comment box at the lower right of the screen. This comment box/avatar should maintain its position relative to the screen, similar to a persistent help chat icon, ensuring visibility and accessibility despite scrolling or other UI interactions.

To Reproduce
Steps to reproduce the behavior:

1. Visit the URL: https://packrat.pages.dev/
2. Log in to your account with the following credentials:
   Email: [email protected]
   Password: 12345678
3. Click on the "Create a pack" option, under quick actions.
4. Begin adding items to your pack
5. Use AI Chat

Expected behavior
Users should be able to seamlessly engage with the AI chat functionality while creating their packs. The transition from accessing pack creation options to utilizing the AI chat should be smooth and intuitive, enhancing the overall user experience.

Screenshots

Desktop (please complete the following information):
Windows 10 pro
Microsoft Edge
Version: 122.0.2365.92

Smartphone (please complete the following information):
Device: iPhone15
OS: iOs17.4
Browser: safari
Version: 17.4

Additional context
Utilize/Implement the new Tamagui Bento components for this update.

[EngrAJ8888]

Hi @pinocchio-life-like , I hope all is well! I wanted to check in about the status of this ticket. Feel free to reach out if you have any questions. Thank you!

[pinocchio-life-like]

Hi @EngrAJ8888 I had another task at hand, and I am working on this currently, I will let you know very soon.

[pinocchio-life-like]

Hello @EngrAJ8888 here is the PR:#975 for this issue

[EngrAJ8888]

Hi @pinocchio-life-like - upon checking the Andrew testing link. The AI chat screen is not moving along with the screen. Could you please check? I've attached a photo for reference. Thank you!

[pinocchio-life-like]

@EngrAJ8888 yes, Andrew removed the scroll effect because of possible weird double scroll effect he said. I will do some other solution.

[andrew-bierman]

@EngrAJ8888 yes, Andrew removed the scroll effect because of possible weird double scroll effect he said. I will do some other solution.

Sorry I did that fix pretty quickly, apologies if it broke something - the double scroll bar was seemingly putting our nav bar into a scroll container in addition to the one for the page.

[EngrAJ8888]

Hi @andrew-bierman , got it! I'll go ahead and close out this task for now. Thank you!