fix: tools call available dropdown

[urmauur]

Describe Your Changes

https://discord.com/channels/1107178041848909847/1380250208163860641/1380250208163860641

This pull request introduces several updates to the ChatInput and related components in the web-app directory, focusing on improving the user experience by refining tooltips, dropdowns, and UI behavior. Additionally, it includes minor adjustments to other components for better functionality and design consistency.

Enhancements to ChatInput Component:

• Introduced state variables dropdownToolsAvailable and tooltipToolsAvailable to manage the interaction between dropdowns and tooltips, ensuring smoother user experience. (web-app/src/containers/ChatInput.tsx, web-app/src/containers/ChatInput.tsxR67-R68)
• Updated TooltipTrigger and DropdownToolsAvailable to disable/enable based on state, preventing overlapping interactions. (web-app/src/containers/ChatInput.tsx, web-app/src/containers/ChatInput.tsxL466-R486)
• Adjusted the badge size and positioning for tool counts, improving visual clarity. (web-app/src/containers/ChatInput.tsx, web-app/src/containers/ChatInput.tsxL484-R506)

Improvements to DropdownToolsAvailable:

• Added a scrollable container for tools to handle long lists gracefully. (web-app/src/containers/DropdownToolsAvailable.tsx, web-app/src/containers/DropdownToolsAvailable.tsxL102-R129)
• Enhanced layout and alignment for better readability and usability. (web-app/src/containers/DropdownToolsAvailable.tsx, web-app/src/containers/DropdownToolsAvailable.tsxL102-R129)

Minor UI Adjustments:

• Ensured truncation of long provider names in the ProvidersMenu for a cleaner display. (web-app/src/containers/ProvidersMenu.tsx, web-app/src/containers/ProvidersMenu.tsxR99-R103)
• Prevented event propagation when copying code in RenderMarkdown, avoiding unintended interactions. (web-app/src/containers/RenderMarkdown.tsx, web-app/src/containers/RenderMarkdown.tsxL83-R86)

Fixes Issues

• Closes #
• Closes #

Self Checklist

• Added relevant comments, esp in complex areas
• Updated docs (for bug fixes / features)
• Created issues for follow-up changes or refactoring needed

---

Important

Improves ChatInput and related components by refining tooltips, dropdowns, and UI behavior, with minor UI adjustments in other components.

• ChatInput Enhancements:
  • Added dropdownToolsAvailable and tooltipToolsAvailable state variables to manage dropdown and tooltip interactions in ChatInput.tsx.
  • Updated TooltipTrigger and DropdownToolsAvailable to toggle based on state, preventing overlap in ChatInput.tsx.
  • Adjusted badge size and positioning for tool counts in ChatInput.tsx.
• DropdownToolsAvailable Improvements:
  • Added scrollable container for long tool lists in DropdownToolsAvailable.tsx.
  • Enhanced layout and alignment for better readability in DropdownToolsAvailable.tsx.
• Minor UI Adjustments:
  • Truncated long provider names in ProvidersMenu.tsx for cleaner display.
  • Prevented event propagation when copying code in RenderMarkdown.tsx.

^{This description was created by for 94bdaac. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 94bdaac in 2 minutes and 0 seconds. Click for details.

• Reviewed 224 lines of code in 4 files
• Skipped 0 files when reviewing.
• Skipped posting 4 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/containers/ChatInput.tsx:481

• Draft comment:
  Avoid updating state directly inside the render callback of the DropdownToolsAvailable children function. Calling setDropdownToolsAvailable and setTooltipToolsAvailable here may lead to unexpected re-renders or side effects. Consider using a useEffect hook to synchronize these state changes based on the open state.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% While it's generally not ideal to update state in render callbacks, in this case: 1) The state updates are simple boolean toggles 2) They're based on props passed to the render callback 3) The logic is straightforward coordination between UI elements 4) Moving this to useEffect would actually make the code more complex and potentially introduce race conditions. The current approach, while not textbook perfect, is pragmatic and unlikely to cause issues. The comment correctly identifies a React anti-pattern. State updates during render can sometimes cause infinite re-render loops or unexpected behavior. However, in this specific case, the state updates are simple, deterministic, and the risk of issues is very low. Moving this to useEffect would add complexity without clear benefits. The comment should be deleted. While technically correct about React best practices, the current implementation is pragmatic and changing it would likely make the code worse, not better.

2. web-app/src/containers/RenderMarkdown.tsx:83

• Draft comment:
  Good improvement: adding e.stopPropagation in the copy button's onClick handler prevents unintended event propagation when copying code.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

3. web-app/src/containers/ProvidersMenu.tsx:100

• Draft comment:
  Wrapping the provider title in a div with the 'truncate' class ensures long provider names are properly handled. Nice UI enhancement for consistent text display.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

4. web-app/src/containers/DropdownToolsAvailable.tsx:102

• Draft comment:
  Using a scrollable container with 'max-h-64 overflow-y-auto' for the tools list improves usability when there are many tools. This layout update helps maintain a clean UI.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

Workflow ID: wflow_qmuRyFX0JXbFhvSZ

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}