| import React from "react"; | |
| import ThreeDotsVerticalIcon from "#/icons/three-dots-vertical.svg?react"; | |
| import { cn } from "#/utils/utils"; | |
| import { | |
| formControlTransitionClassName, | |
| formControlMutedHoverClassName, | |
| } from "#/utils/form-control-classes"; | |
| interface EllipsisButtonProps { | |
| onClick: (event: React.MouseEvent<HTMLButtonElement>) => void; | |
| /** | |
| * Optional override classes applied to the button. Use this when a | |
| * caller needs to customize layout (e.g. translate, flex), not to | |
| * replace hover treatment which is intentionally shared. | |
| */ | |
| className?: string; | |
| /** Icon box; default `w-4 h-4` (use `mobileTopBarIconClassName` in mobile top bars). */ | |
| iconClassName?: string; | |
| ariaLabel?: string; | |
| /** | |
| * Override the default `ellipsis-button` test id. Most callers | |
| * should leave this unset; provide a custom id only when an | |
| * existing test suite already targets a specific id (e.g. the | |
| * `profile-menu-trigger` in LLM profile rows). | |
| */ | |
| testId?: string; | |
| } | |
| /** | |
| * Standardized "three vertical dots" overflow trigger. | |
| * | |
| * Use this anywhere the chrome needs an inline ellipsis menu trigger | |
| * (conversation header, conversation cards in the side panel, | |
| * conversation tabs, settings rows, etc.) so that size, color, and | |
| * hover treatment stay consistent. | |
| * | |
| * The chat input area's overflow button uses its own pill-shaped | |
| * variant with a custom hover background — do NOT replace that one | |
| * with this component; it is intentionally different. | |
| */ | |
| export const EllipsisButton = React.forwardRef< | |
| HTMLButtonElement, | |
| EllipsisButtonProps | |
| >(function EllipsisButton( | |
| { onClick, className, iconClassName, ariaLabel, testId = "ellipsis-button" }, | |
| ref, | |
| ) { | |
| return ( | |
| <button | |
| ref={ref} | |
| data-testid={testId} | |
| type="button" | |
| onClick={onClick} | |
| aria-label={ariaLabel} | |
| className={cn( | |
| "p-1 rounded-md cursor-pointer", | |
| formControlTransitionClassName, | |
| "text-[var(--oh-muted)]", | |
| formControlMutedHoverClassName, | |
| "flex items-center justify-center", | |
| className, | |
| )} | |
| > | |
| <ThreeDotsVerticalIcon className={iconClassName ?? "w-4 h-4"} /> | |
| </button> | |
| ); | |
| }); | |