Content-Length: 354037 | pFad | https://github.com/All-Hands-AI/OpenHands/pull/9917

6D feat(frontend): improve conversation card context menu by llamantino · Pull Request #9917 · All-Hands-AI/OpenHands · GitHub
Skip to content

Conversation

llamantino
Copy link
Contributor

  • This change is worth documenting at https://docs.all-hands.dev/
  • Include this change in the Release Notes. If checked, you must provide an end-user friendly description for your change below

End-user friendly description of the problem this fixes or functionality this introduces.

Improved conversation context menu UI with icons and separators


Summarize what the PR does, explaining any non-trivial design decisions.

Updated the conversation context menu:

  • Added icons to the menu items
  • Sorted and grouped the menu items, with separators
  • Added logic for the separators so they remain consistent no matter what menu items are active

Screenshot - all icons visible (all menu items force-enabled):
image

Screenshots - normal usage (before):
image
image

Screenshots - normal usage (after):
image
image


Link of any specific issues this addresses:

@llamantino llamantino requested review from amanape and rbren as code owners July 26, 2025 10:04
@xingyaoww xingyaoww added the needs-qa This PR needs QA label Jul 29, 2025
Copy link
Member

@amanape amanape left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice, thank you. Maybe we can also do something like:

const IconTextButton = ({ 
  icon: Icon, 
  text, 
  className, 
  iconClassName 
}: {
  icon: React.ComponentType<{ className?: string }>;
  text: string;
  className?: string;
  iconClassName?: string;
}) => (
  <div className={cn("flex items-center gap-3 px-1", className)}>
    <Icon className={cn("w-4 h-4 shrink-0", iconClassName)} />
    {text}
  </div>
);

// Usage remains the same:
<IconTextButton 
  icon={Wrench} 
  text={t(I18nKey.BUTTON$SHOW_AGENT_TOOLS_AND_METADATA)} 
/>

@hieptl
Copy link
Collaborator

hieptl commented Jul 29, 2025

I think we should add a cursor: pointer style when hovering over these items.

Screen.Recording.2025-07-30.at.02.56.19.mov

@llamantino
Copy link
Contributor Author

I created a new component, since context menus are also used in account-settings-context-menu.tsx and could be used somewhere else in the future, it made more sense. I also added the pointer cursor.

@Abubakar-01
Copy link
Collaborator

Reviewed the PR

Before (Main Branch):
image

After (PR Branch):
image

Conclusion:
Tested the PR branch — it displays the same items as the main branch, I can't see the new items in the context menu. The only differences are that the items are grouped, sorted and the cursor changes to a pointer on hover.

Copy link
Member

@amanape amanape left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@amanape amanape merged commit fdf9a49 into All-Hands-AI:main Jul 30, 2025
18 checks passed
@llamantino llamantino deleted the feat-improve-context-menu branch July 30, 2025 15:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs-qa This PR needs QA

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants









ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: https://github.com/All-Hands-AI/OpenHands/pull/9917

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy