File size: 2,217 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | import { ExternalLink } from "lucide-react";
import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";
import { cn } from "#/utils/utils";
type BrowserChromeBarProps = {
url: string;
hasPage: boolean;
};
export function BrowserChromeBar({ url, hasPage }: BrowserChromeBarProps) {
const { t } = useTranslation("openhands");
const disabledButtonClassName = cn(
"shrink-0 inline-flex items-center justify-center w-6 h-6 rounded-md",
"text-[var(--oh-text-tertiary)] opacity-40 cursor-not-allowed",
);
const iconClassName = "w-3.5 h-3.5";
return (
<div
className="flex w-full min-h-[34px] shrink-0 items-center gap-1 border-b border-[var(--oh-border)] px-2 py-1.5"
data-testid="browser-chrome-bar"
>
<div
className={cn(
"flex min-h-7 min-w-0 flex-1 items-center rounded-md border border-[var(--oh-border)]",
"bg-[var(--oh-surface-raised)] px-2 text-xs leading-5",
url ? "text-[var(--oh-text-tertiary)]" : "text-[var(--oh-text-dim)]",
)}
data-testid="browser-chrome-url"
title={url || undefined}
>
<span className="truncate">
{url || t(I18nKey.BROWSER$URL_PLACEHOLDER)}
</span>
</div>
{hasPage && url ? (
<a
href={url}
target="_blank"
rel="noopener noreferrer"
aria-label={t(I18nKey.BUTTON$OPEN_IN_NEW_TAB)}
title={t(I18nKey.BUTTON$OPEN_IN_NEW_TAB)}
data-testid="browser-chrome-open-external"
className={cn(
"shrink-0 inline-flex items-center justify-center w-6 h-6 rounded-md",
"text-[var(--oh-text-tertiary)] hover:bg-tertiary cursor-pointer",
)}
>
<ExternalLink className={iconClassName} aria-hidden strokeWidth={2} />
</a>
) : (
<button
type="button"
disabled
aria-label={t(I18nKey.BUTTON$OPEN_IN_NEW_TAB)}
title={t(I18nKey.BUTTON$OPEN_IN_NEW_TAB)}
className={disabledButtonClassName}
>
<ExternalLink className={iconClassName} aria-hidden strokeWidth={2} />
</button>
)}
</div>
);
}
|