puter/paseo
1
0
Fork 0
mirror of https://github.com/getpaseo/paseo.git synced 2026-11-10 18:35:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): preserve the full tool badge disclosure hit area

Browse Source
This commit is contained in:
Mohamed Boudra
2026-11-10 13:26:44 +01:00
parent 10a3a86643
commit 6a3ed2aff9
2 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/agent-stream/disclosure.browser.test.tsx
+19 -5
View File
@@ -155,7 +155,7 @@ function renderFileDetails() {
describe("tool badge file action", () => {
it("keeps file opening separate from the accessible disclosure button", async () => {
let opened = 0;
function Badge() {
function Badge({ hasFile }: { hasFile: boolean }) {
const [expanded, setExpanded] = React.useState(false);
const toggle = React.useCallback(() => setExpanded(!expanded), [expanded]);
const openFile = React.useCallback(() => {
@@ -167,12 +167,26 @@ describe("tool badge file action", () => {
secondaryLabel="src/index.ts"
isExpanded={expanded}
onToggle={toggle}
onOpenFile={openFile}
onOpenFile={hasFile ? openFile : undefined}
renderDetails={renderFileDetails}
/>
);
}
act(() => root.render(<Badge />));
container.style.width = "300px";
container.style.marginLeft = "20px";
act(() => root.render(<Badge hasFile={false} />));
const header = page.getByRole("button", { name: "Read src/index.ts", exact: true });
const headerElement = view().getByRole("button", { name: /^Read src\/index\.ts$/ });
expect(headerElement.getBoundingClientRect().width).toBeGreaterThan(260);
await header.click({ position: { x: 220, y: 10 } });
await expect.element(page.getByText("File contents")).toBeVisible();
await header.click({ position: { x: 2, y: 2 } });
await expect.element(page.getByText("File contents")).not.toBeInTheDocument();
await header.click({ position: { x: 2, y: 2 } });
await expect.element(page.getByText("File contents")).toBeVisible();
await header.click({ position: { x: 220, y: 10 } });
await expect.element(page.getByText("File contents")).not.toBeInTheDocument();
act(() => root.render(<Badge hasFile />));
await page.getByRole("button", { name: "Read src/index.ts", exact: true }).hover();
const file = view().getByRole("button", { name: /^Open file$/ });
expect(file.parentElement?.closest("button")).toBeNull();
@@ -180,9 +194,9 @@ describe("tool badge file action", () => {
expect(opened).toBe(1);
const disclosure = view().getByRole("button", { name: /^Read src\/index\.ts$/ });
expect(view().queryByText("File contents")).toBeNull();
await page.getByRole("button", { name: "Read src/index.ts", exact: true }).click();
await header.click({ position: { x: 220, y: 10 } });
expect(view().getByText("File contents")).toBeTruthy();
await expect.element(page.getByText("File contents")).toBeVisible();
expect(opened).toBe(1);
act(() => file.focus());
await userEvent.keyboard("{Enter}");
packages/app/src/components/message.tsx
+6 -4
View File
@@ -922,15 +922,16 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
borderRadius: theme.borderRadius.lg,
borderWidth: theme.borderWidth[1],
borderColor: "transparent",
paddingHorizontal: theme.spacing[2],
paddingVertical: theme.spacing[1],
overflow: "hidden",
},
pressablePressed: {
opacity: 0.9,
},
disclosureButton: {
flexShrink: 1,
flex: 1,
minWidth: 0,
paddingHorizontal: theme.spacing[2],
paddingVertical: theme.spacing[1],
flexDirection: "row",
alignItems: "center",
},
@@ -939,7 +940,7 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
alignItems: "center",
},
labelRow: {
flexShrink: 1,
flex: 1,
flexDirection: "row",
alignItems: "center",
overflow: "hidden",
@@ -989,6 +990,7 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
flexShrink: 0,
},
openFileButton: {
marginRight: theme.spacing[2],
marginLeft: theme.spacing[1],
padding: theme.spacing[1],
borderRadius: theme.borderRadius.md,