scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-08-28 05:27:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

More tweaks to chatview layout (#5643)

Browse source
This commit is contained in:
Matt Rubens 2025-07-12 20:05:18 -04:00 • committed by GitHub
parent 10f3e30126
commit 5fab8521cd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 45 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
webview-ui/src/components/chat/ChatView.tsx
View file

@ -1663,9 +1663,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
<RooHero />
{telemetrySetting === "unset" && <TelemetryBanner />}
{/* Show the task history preview if expanded and tasks exist */}
{taskHistory.length > 0 && isExpanded && <HistoryPreview />}
<p className="text-vscode-editor-foreground leading-tight font-vscode-font-family text-center text-balance max-w-[380px] mx-auto">
<p className="text-vscode-editor-foreground leading-tight font-vscode-font-family text-center text-balance max-w-[380px] mx-auto my-0">
<Trans
i18nKey="chat:about"
components={{
@ -1677,7 +1675,11 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
}}
/>
</p>
<RooTips cycle={false} />
<div className="mb-2.5">
<RooTips cycle={false} />
</div>
{/* Show the task history preview if expanded and tasks exist */}
{taskHistory.length > 0 && isExpanded && <HistoryPreview />}
</div>
</div>
)}

4
webview-ui/src/components/history/HistoryPreview.tsx
View file

@ -18,12 +18,12 @@ const HistoryPreview = () => {
<div className="flex flex-col gap-3">
{tasks.length !== 0 && (
<>
{tasks.slice(0, 2).map((item) => (
{tasks.slice(0, 3).map((item) => (
<TaskItem key={item.id} item={item} variant="compact" />
))}
<button
onClick={handleViewAllHistory}
className="text-base text-vscode-descriptionForeground hover:text-vscode-textLink-foreground transition-colors cursor-pointer text-center w-full bg-vscode-editor-background rounded p-3 hover:border-vscode-toolbar-hoverBackground/60"
className="text-base text-vscode-descriptionForeground hover:text-vscode-textLink-foreground transition-colors cursor-pointer text-center w-full"
aria-label={t("history:viewAllHistory")}>
{t("history:viewAllHistory")}
</button>

46
webview-ui/src/components/history/__tests__/HistoryPreview.spec.tsx
View file

@ -59,6 +59,24 @@ const mockTasks: HistoryItem[] = [
tokensOut: 150,
totalCost: 0.03,
},
{
id: "task-5",
number: 5,
task: "Fifth task",
ts: Date.now(),
tokensIn: 250,
tokensOut: 125,
totalCost: 0.025,
},
{
id: "task-6",
number: 6,
task: "Sixth task",
ts: Date.now(),
tokensIn: 400,
tokensOut: 200,
totalCost: 0.04,
},
]
describe("HistoryPreview", () => {
@ -86,7 +104,7 @@ describe("HistoryPreview", () => {
expect(screen.queryByTestId(/task-item-/)).not.toBeInTheDocument()
})
it("renders up to 2 tasks when tasks are available", () => {
it("renders up to 3 tasks when tasks are available", () => {
mockUseTaskSearch.mockReturnValue({
tasks: mockTasks,
searchQuery: "",
@ -101,17 +119,19 @@ describe("HistoryPreview", () => {
render(<HistoryPreview />)
// Should render only the first 2 tasks
// Should render only the first 3 tasks
expect(screen.getByTestId("task-item-task-1")).toBeInTheDocument()
expect(screen.getByTestId("task-item-task-2")).toBeInTheDocument()
expect(screen.queryByTestId("task-item-task-3")).not.toBeInTheDocument()
expect(screen.getByTestId("task-item-task-3")).toBeInTheDocument()
expect(screen.queryByTestId("task-item-task-4")).not.toBeInTheDocument()
expect(screen.queryByTestId("task-item-task-5")).not.toBeInTheDocument()
expect(screen.queryByTestId("task-item-task-6")).not.toBeInTheDocument()
})
it("renders all tasks when there are 2 or fewer", () => {
const twoTasks = mockTasks.slice(0, 2)
it("renders all tasks when there are 3 or fewer", () => {
const threeTasks = mockTasks.slice(0, 3)
mockUseTaskSearch.mockReturnValue({
tasks: twoTasks,
tasks: threeTasks,
searchQuery: "",
setSearchQuery: vi.fn(),
sortOption: "newest",
@ -126,7 +146,8 @@ describe("HistoryPreview", () => {
expect(screen.getByTestId("task-item-task-1")).toBeInTheDocument()
expect(screen.getByTestId("task-item-task-2")).toBeInTheDocument()
expect(screen.queryByTestId("task-item-task-3")).not.toBeInTheDocument()
expect(screen.getByTestId("task-item-task-3")).toBeInTheDocument()
expect(screen.queryByTestId("task-item-task-4")).not.toBeInTheDocument()
})
it("renders only 1 task when there is only 1 task", () => {
@ -151,7 +172,7 @@ describe("HistoryPreview", () => {
it("passes correct props to TaskItem components", () => {
mockUseTaskSearch.mockReturnValue({
tasks: mockTasks.slice(0, 2),
tasks: mockTasks.slice(0, 3),
searchQuery: "",
setSearchQuery: vi.fn(),
sortOption: "newest",
@ -164,7 +185,7 @@ describe("HistoryPreview", () => {
render(<HistoryPreview />)
// Verify TaskItem was called with correct props
// Verify TaskItem was called with correct props for first 3 tasks
expect(mockTaskItem).toHaveBeenCalledWith(
expect.objectContaining({
item: mockTasks[0],
@ -179,6 +200,13 @@ describe("HistoryPreview", () => {
}),
expect.anything(),
)
expect(mockTaskItem).toHaveBeenCalledWith(
expect.objectContaining({
item: mockTasks[2],
variant: "compact",
}),
expect.anything(),
)
})
it("renders with correct container classes", () => {