feat: make workspace files panel collapsible · openclaw/openclaw@d03932a

Recent Commits to openclaw:main

sallyom · 2026-06-14 · via Recent Commits to openclaw:main

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,10 @@`
`8`	`8`	`overflow: hidden;`
`9`	`9`	`}`
`10`	`10`
	`11`	`+.chat-workbench--workspace-collapsed {`
	`12`	`+grid-template-columns: minmax(0, 1fr) 52px;`
	`13`	`+}`
	`14`	`+`
`11`	`15`	`.chat-split-container {`
`12`	`16`	`display: flex;`
`13`	`17`	`gap: 0;`
`@@ -45,6 +49,12 @@`
`45`	`49`	`background: color-mix(in srgb, var(--panel) 84%, transparent);`
`46`	`50`	`}`
`47`	`51`
	`52`	`+.chat-workspace-rail--collapsed {`
	`53`	`+align-items: center;`
	`54`	`+gap: 10px;`
	`55`	`+padding: 12px 8px;`
	`56`	`+}`
	`57`	`+`
`48`	`58`	`.chat-workspace-rail__header {`
`49`	`59`	`display: flex;`
`50`	`60`	`align-items: center;`
`@@ -75,14 +85,27 @@`
`75`	`85`	`line-height: 1.2;`
`76`	`86`	`}`
`77`	`87`
`78`		`-.chat-workspace-rail__refresh {`
	`88`	`+.chat-workspace-rail__actions {`
	`89`	`+display: inline-flex;`
	`90`	`+align-items: center;`
	`91`	`+gap: 6px;`
	`92`	`+}`
	`93`	`+`
	`94`	`+.chat-workspace-rail__refresh,`
	`95`	`+.chat-workspace-rail__collapse-toggle {`
`79`	`96`	`width: 32px;`
`80`	`97`	`min-width: 32px;`
`81`	`98`	`height: 32px;`
`82`	`99`	`padding: 0;`
`83`	`100`	`}`
`84`	`101`
	`102`	`+.chat-workspace-rail__collapse-toggle {`
	`103`	`+flex: 0 0 auto;`
	`104`	`+box-shadow: none;`
	`105`	`+}`
	`106`	`+`
`85`	`107`	`.chat-workspace-rail__refresh svg,`
	`108`	`+.chat-workspace-rail__collapse-toggle svg,`
`86`	`109`	`.chat-workspace-rail__file-icon svg {`
`87`	`110`	`width: 15px;`
`88`	`111`	`height: 15px;`
`@@ -93,6 +116,25 @@`
`93`	`116`	`stroke-linejoin: round;`
`94`	`117`	`}`
`95`	`118`
	`119`	`+.chat-workspace-rail__collapsed-icon {`
	`120`	`+color: var(--muted);`
	`121`	`+display: inline-flex;`
	`122`	`+align-items: center;`
	`123`	`+justify-content: center;`
	`124`	`+width: 32px;`
	`125`	`+height: 32px;`
	`126`	`+}`
	`127`	`+`
	`128`	`+.chat-workspace-rail__collapsed-icon svg {`
	`129`	`+width: 18px;`
	`130`	`+height: 18px;`
	`131`	`+fill: none;`
	`132`	`+stroke: currentColor;`
	`133`	`+stroke-width: 1.5px;`
	`134`	`+stroke-linecap: round;`
	`135`	`+stroke-linejoin: round;`
	`136`	`+}`
	`137`	`+`
`96`	`138`	`.chat-workspace-rail__path {`
`97`	`139`	`padding: 9px 12px;`
`98`	`140`	`border-bottom: 1px solid color-mix(in srgb, var(--border) 42%, transparent);`

Original file line number	Diff line number	Diff line change
`@@ -680,6 +680,7 @@ const lazyWorkboard = createLazyView(() => import("./views/workboard.ts"), notif`
`680`	`680`	`type ChatWorkspaceFilesState = {`
`681`	`681`	`activeName: string \| null;`
`682`	`682`	`agentId: string;`
	`683`	`+collapsed: boolean;`
`683`	`684`	`error: string \| null;`
`684`	`685`	`list: AgentsFilesListResult \| null;`
`685`	`686`	`loading: boolean;`
`@@ -700,6 +701,7 @@ function getChatWorkspaceFilesState(state: AppViewState, agentId: string): ChatW`
`700`	`701`	`const next = {`
`701`	`702`	`activeName: null,`
`702`	`703`	`agentId,`
	`704`	`+collapsed: false,`
`703`	`705`	`error: null,`
`704`	`706`	`list: null,`
`705`	`707`	`loading: false,`
`@@ -2098,6 +2100,7 @@ export function renderApp(state: AppViewState) {`
`2098`	`2100`	`};`
`2099`	`2101`	`if (`
`2100`	`2102`	`isChat &&`
	`2103`	`+!chatWorkspaceFiles.collapsed &&`
`2101`	`2104`	`state.connected &&`
`2102`	`2105`	`state.agentsList &&`
`2103`	`2106`	`!chatWorkspaceFiles.loading &&`
`@@ -2106,6 +2109,13 @@ export function renderApp(state: AppViewState) {`
`2106`	`2109`	`) {`
`2107`	`2110`	`loadChatWorkspaceFiles();`
`2108`	`2111`	`}`
	`2112`	`+const toggleChatWorkspaceFilesCollapsed = () => {`
	`2113`	`+chatWorkspaceFiles.collapsed = !chatWorkspaceFiles.collapsed;`
	`2114`	`+if (!chatWorkspaceFiles.collapsed && chatWorkspaceFiles.list?.agentId !== chatAgentId) {`
	`2115`	`+loadChatWorkspaceFiles();`
	`2116`	`+}`
	`2117`	`+requestHostUpdate?.();`
	`2118`	`+};`
`2109`	`2119`	`const refreshChatWorkspaceFiles = () => {`
`2110`	`2120`	`loadChatWorkspaceFiles({ force: true });`
`2111`	`2121`	`};`
`@@ -3534,6 +3544,7 @@ export function renderApp(state: AppViewState) {`
`3534`	`3544`	`sessions: state.sessionsResult,`
`3535`	`3545`	`composerControls: renderGuardedChatControls(state),`
`3536`	`3546`	`workspaceFiles: {`
	`3547`	`+ collapsed: chatWorkspaceFiles.collapsed,`
`3537`	`3548`	`agentId: chatAgentId,`
`3538`	`3549`	`list:`
`3539`	`3550`	`chatWorkspaceFiles.list?.agentId === chatAgentId`
`@@ -3542,6 +3553,7 @@ export function renderApp(state: AppViewState) {`
`3542`	`3553`	`loading: chatWorkspaceFiles.loading,`
`3543`	`3554`	`error: chatWorkspaceFiles.error,`
`3544`	`3555`	`activeName: chatWorkspaceFiles.activeName,`
	`3556`	`+ onToggleCollapsed: toggleChatWorkspaceFilesCollapsed,`
`3545`	`3557`	`onRefresh: refreshChatWorkspaceFiles,`
`3546`	`3558`	`onOpenFile: openChatWorkspaceFile,`
`3547`	`3559`	`},`

Original file line number	Diff line number	Diff line change
`@@ -221,6 +221,51 @@ describeControlUiE2e("Control UI mocked Gateway E2E", () => {`
`221`	`221`	`}`
`222`	`222`	`});`
`223`	`223`
	`224`	`+it("collapses the workspace files panel from its header control", async () => {`
	`225`	`+const context = await browser.newContext({`
	`226`	`+locale: "en-US",`
	`227`	`+serviceWorkers: "block",`
	`228`	`+viewport: { height: 900, width: 1280 },`
	`229`	`+});`
	`230`	`+const page = await context.newPage();`
	`231`	`+const gateway = await installMockGateway(page, {`
	`232`	`+methodResponses: {`
	`233`	`+"agents.files.list": {`
	`234`	`+agentId: "main",`
	`235`	`+files: [{ name: "AGENTS.md", path: "/workspace/AGENTS.md", size: 2048 }],`
	`236`	`+workspace: "/workspace",`
	`237`	`+},`
	`238`	`+},`
	`239`	`+});`
	`240`	`+`
	`241`	`+try {`
	`242`	+await page.goto(`${server.baseUrl}chat`);
	`243`	`+await page.getByRole("button", { name: "Collapse workspace files" }).waitFor({`
	`244`	`+timeout: 10_000,`
	`245`	`+});`
	`246`	`+await page.getByText("AGENTS.md").waitFor({ timeout: 10_000 });`
	`247`	`+expect(await gateway.getRequests("agents.files.list")).toHaveLength(1);`
	`248`	`+`
	`249`	`+await page.getByRole("button", { name: "Collapse workspace files" }).click();`
	`250`	`+await page.getByRole("button", { name: "Expand workspace files" }).waitFor({`
	`251`	`+timeout: 10_000,`
	`252`	`+});`
	`253`	`+expect(await page.locator(".chat-workspace-rail__file").count()).toBe(0);`
	`254`	`+expect(await page.locator(".chat-workspace-rail__collapsed-icon svg").count()).toBe(1);`
	`255`	`+`
	`256`	`+await page.getByRole("button", { name: "Expand workspace files" }).click();`
	`257`	`+await page.getByRole("button", { name: "Collapse workspace files" }).waitFor({`
	`258`	`+timeout: 10_000,`
	`259`	`+});`
	`260`	`+await page.getByText("AGENTS.md").waitFor({ timeout: 10_000 });`
	`261`	`+`
	`262`	`+await page.setViewportSize({ height: 900, width: 1000 });`
	`263`	`+expect(await page.locator(".chat-workspace-rail").isHidden()).toBe(true);`
	`264`	`+} finally {`
	`265`	`+await context.close();`
	`266`	`+}`
	`267`	`+});`
	`268`	`+`
`224`	`269`	`it("renders stable markdown during a streaming chat turn and finalizes the tail", async () => {`
`225`	`270`	`const context = await browser.newContext({`
`226`	`271`	`locale: "en-US",`

Original file line number	Diff line number	Diff line change
`@@ -496,6 +496,13 @@ export const icons = {`
`496`	`496`	`<path d="M10 10l-3 2 3 2" stroke-linecap="round" stroke-linejoin="round" />`
`497`	`497`	`</svg>`
`498`	`498`	`,
	`499`	+panelRightClose: html`
	`500`	`+ <svg viewBox="0 0 24 24">`
	`501`	`+ <rect x="3" y="3" width="18" height="18" rx="2" />`
	`502`	`+ <path d="M15 3v18" stroke-linecap="round" />`
	`503`	`+ <path d="M8 10l3 2-3 2" stroke-linecap="round" stroke-linejoin="round" />`
	`504`	`+ </svg>`
	`505`	+ `,
`499`	`506`	maximize: html`
`500`	`507`	`<svg viewBox="0 0 24 24">`
`501`	`508`	`<polyline points="15 3 21 3 21 9" />`

Original file line number	Diff line number	Diff line change
`@@ -875,12 +875,14 @@ describe("chat goal status", () => {`
`875`	`875`	`});`
`876`	`876`
`877`	`877`	`describe("chat composer workbench", () => {`
`878`		`-it("renders session controls in the composer and workspace files in the rail", () => {`
	`878`	`+it("renders session controls in the composer and workspace files in the expanded rail", () => {`
	`879`	`+const onToggleCollapsed = vi.fn();`
`879`	`880`	`const onRefresh = vi.fn();`
`880`	`881`	`const onOpenFile = vi.fn();`
`881`	`882`	`const container = renderChatView({`
`882`	`883`	composerControls: html`<button class="test-composer-control">Model</button>`,
`883`	`884`	`workspaceFiles: {`
	`885`	`+collapsed: false,`
`884`	`886`	`agentId: "main",`
`885`	`887`	`list: {`
`886`	`888`	`agentId: "main",`
`@@ -897,6 +899,7 @@ describe("chat composer workbench", () => {`
`897`	`899`	`loading: false,`
`898`	`900`	`error: null,`
`899`	`901`	`activeName: "AGENTS.md",`
	`902`	`+ onToggleCollapsed,`
`900`	`903`	`onRefresh,`
`901`	`904`	`onOpenFile,`
`902`	`905`	`},`
`@@ -913,8 +916,41 @@ describe("chat composer workbench", () => {`
`913`	`916`	`expect(file?.textContent).toContain("2 KB");`
`914`	`917`
`915`	`918`	`file?.click();`
	`919`	`+container`
	`920`	`+.querySelector<HTMLButtonElement>('button[aria-label="Collapse workspace files"]')`
	`921`	`+?.click();`
`916`	`922`
`917`	`923`	`expect(onOpenFile).toHaveBeenCalledWith("AGENTS.md");`
	`924`	`+expect(onToggleCollapsed).toHaveBeenCalledTimes(1);`
	`925`	`+expect(container.querySelector('button[aria-label="Workspace files"]')).toBeNull();`
	`926`	`+});`
	`927`	`+`
	`928`	`+it("keeps the workspace files rail reachable from the collapsed strip", () => {`
	`929`	`+const onToggleCollapsed = vi.fn();`
	`930`	`+const container = renderChatView({`
	`931`	`+workspaceFiles: {`
	`932`	`+collapsed: true,`
	`933`	`+agentId: "main",`
	`934`	`+list: null,`
	`935`	`+loading: false,`
	`936`	`+error: null,`
	`937`	`+activeName: null,`
	`938`	`+ onToggleCollapsed,`
	`939`	`+onRefresh: () => undefined,`
	`940`	`+onOpenFile: () => undefined,`
	`941`	`+},`
	`942`	`+});`
	`943`	`+`
	`944`	`+expect(container.querySelector(".chat-workspace-rail__list")).toBeNull();`
	`945`	`+expect(container.querySelector(".chat-workspace-rail__collapsed-icon")).not.toBeNull();`
	`946`	`+const toggle = container.querySelector<HTMLButtonElement>(`
	`947`	`+'button[aria-label="Expand workspace files"]',`
	`948`	`+);`
	`949`	`+expect(toggle?.getAttribute("aria-expanded")).toBe("false");`
	`950`	`+`
	`951`	`+toggle?.click();`
	`952`	`+`
	`953`	`+expect(onToggleCollapsed).toHaveBeenCalledTimes(1);`
`918`	`954`	`});`
`919`	`955`
`920`	`956`	`it("keeps the secondary New session and Export controls suppressed in the composer", () => {`

Original file line number	Diff line number	Diff line change
`@@ -199,11 +199,13 @@ export type ChatProps = {`
`199`	`199`	`basePath?: string;`
`200`	`200`	`composerControls?: TemplateResult \| typeof nothing \| ReturnType<typeof guard>;`
`201`	`201`	`workspaceFiles?: {`
	`202`	`+collapsed: boolean;`
`202`	`203`	`agentId: string;`
`203`	`204`	`list: AgentsFilesListResult \| null;`
`204`	`205`	`loading: boolean;`
`205`	`206`	`error: string \| null;`
`206`	`207`	`activeName: string \| null;`
	`208`	`+onToggleCollapsed: () => void;`
`207`	`209`	`onRefresh: () => void;`
`208`	`210`	`onOpenFile: (name: string) => void;`
`209`	`211`	`};`
`@@ -1028,6 +1030,28 @@ function renderWorkspaceFileRail(`
`1028`	`1030`	`if (!workspaceFiles) {`
`1029`	`1031`	`return nothing;`
`1030`	`1032`	`}`
	`1033`	`+if (workspaceFiles.collapsed) {`
	`1034`	+return html`
	`1035`	`+ <aside`
	`1036`	`+ class="chat-workspace-rail chat-workspace-rail--collapsed"`
	`1037`	`+ aria-label="Workspace files"`
	`1038`	`+ >`
	`1039`	`+ <button`
	`1040`	`+ type="button"`
	`1041`	`+ class="nav-collapse-toggle chat-workspace-rail__collapse-toggle"`
	`1042`	`+ title="Expand workspace files"`
	`1043`	`+ aria-label="Expand workspace files"`
	`1044`	`+ aria-expanded="false"`
	`1045`	`+ @click=${workspaceFiles.onToggleCollapsed}`
	`1046`	`+ >`
	`1047`	`+ <span class="nav-collapse-toggle__icon" aria-hidden="true">${icons.panelRightOpen}</span>`
	`1048`	`+ </button>`
	`1049`	`+ <span class="chat-workspace-rail__collapsed-icon" aria-hidden="true"`
	`1050`	`+ >${icons.fileText}</span`
	`1051`	`+ >`
	`1052`	`+ </aside>`
	`1053`	+ `;
	`1054`	`+}`
`1031`	`1055`	`const files = workspaceFiles.list?.files ?? [];`
`1032`	`1056`	return html`
`1033`	`1057`	`<aside class="chat-workspace-rail" aria-label="Workspace files">`
`@@ -1036,16 +1060,30 @@ function renderWorkspaceFileRail(`
`1036`	`1060`	`<span class="chat-workspace-rail__eyebrow">Workspace</span>`
`1037`	`1061`	`<strong>Files</strong>`
`1038`	`1062`	`</div>`
`1039`		`- <button`
`1040`		`- class="btn btn--ghost btn--sm chat-workspace-rail__refresh"`
`1041`		`- type="button"`
`1042`		`- title="Refresh files"`
`1043`		`- aria-label="Refresh files"`
`1044`		`- ?disabled=${workspaceFiles.loading}`
`1045`		`- @click=${workspaceFiles.onRefresh}`
`1046`		`- >`
`1047`		`- ${icons.refresh}`
`1048`		`- </button>`
	`1063`	`+ <div class="chat-workspace-rail__actions">`
	`1064`	`+ <button`
	`1065`	`+ class="btn btn--ghost btn--sm chat-workspace-rail__refresh"`
	`1066`	`+ type="button"`
	`1067`	`+ title="Refresh files"`
	`1068`	`+ aria-label="Refresh files"`
	`1069`	`+ ?disabled=${workspaceFiles.loading}`
	`1070`	`+ @click=${workspaceFiles.onRefresh}`
	`1071`	`+ >`
	`1072`	`+ ${icons.refresh}`
	`1073`	`+ </button>`
	`1074`	`+ <button`
	`1075`	`+ type="button"`
	`1076`	`+ class="nav-collapse-toggle chat-workspace-rail__collapse-toggle"`
	`1077`	`+ title="Collapse workspace files"`
	`1078`	`+ aria-label="Collapse workspace files"`
	`1079`	`+ aria-expanded="true"`
	`1080`	`+ @click=${workspaceFiles.onToggleCollapsed}`
	`1081`	`+ >`
	`1082`	`+ <span class="nav-collapse-toggle__icon" aria-hidden="true"`
	`1083`	`+ >${icons.panelRightClose}</span`
	`1084`	`+ >`
	`1085`	`+ </button>`
	`1086`	`+ </div>`
`1049`	`1087`	`</div>`
`1050`	`1088`	`${workspaceFiles.list?.workspace`
`1051`	`1089`	? html`<div class="chat-workspace-rail__path" title=${workspaceFiles.list.workspace}>
`@@ -2058,7 +2096,11 @@ export function renderChat(props: ChatProps) {`
`2058`	`2096`	`: nothing}`
`2059`	`2097`	`${renderSearchBar(requestUpdate)} ${renderPinnedSection(props, pinned, requestUpdate)}`
`2060`	`2098`
`2061`		`- <div class="chat-workbench">`
	`2099`	`+ <div`
	`2100`	`+ class="chat-workbench ${props.workspaceFiles?.collapsed`
	`2101`	`+ ? "chat-workbench--workspace-collapsed"`
	`2102`	`+ : ""}"`
	`2103`	`+ >`
`2062`	`2104`	`<div class="chat-split-container ${sidebarOpen ? "chat-split-container--open" : ""}">`
`2063`	`2105`	`<div`
`2064`	`2106`	`class="chat-main"`

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

Recent Commits to openclaw:main