diff --git a/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.test.tsx b/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.test.tsx index 8db7ef7e81..c63bdf3f08 100644 --- a/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.test.tsx +++ b/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.test.tsx @@ -11,7 +11,23 @@ import { import { MessageBubble } from "./message-bubble"; vi.mock("streamdown", () => ({ - Streamdown: ({ children }: { children: ReactNode }) => <>{children}, + Streamdown: ({ children }: { children: ReactNode }) => { + const text = String(children); + if (text.includes("very-wide-header")) { + return ( + + + + + + + +
Wide markdown table
{text}
+ ); + } + + return <>{children}; + }, defaultRehypePlugins: { katex: undefined, harden: undefined }, })); @@ -39,6 +55,38 @@ describe("MessageBubble", () => { expect(isBefore(firstText, toolCall)).toBe(true); expect(isBefore(toolCall, secondText)).toBe(true); }); + + it("should keep wide assistant tables inside the message width", () => { + // Given + const wideTableMessage = buildAssistantMessage([ + textPart( + "part-1", + "| very-wide-header | another-wide-header |\n| --- | --- |\n| very-long-cell-value-that-should-not-resize-the-message | value |", + ), + ]); + + // When + render(); + + // Then + const table = screen.getByRole("table", { + name: "Wide markdown table", + }); + const markdown = table.closest(".lighthouse-markdown"); + if (!(markdown instanceof HTMLElement)) { + throw new Error("Expected markdown wrapper around assistant table"); + } + + expect(markdown).toHaveClass("min-w-0", "max-w-full", "overflow-x-auto"); + expect(markdown.parentElement).toHaveClass("min-w-0"); + expect(markdown.parentElement?.parentElement).toHaveClass( + "min-w-0", + "max-w-full", + ); + expect(markdown.parentElement?.parentElement?.parentElement).toHaveClass( + "min-w-0", + ); + }); }); function isBefore(first: HTMLElement, second: HTMLElement): boolean { diff --git a/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.tsx b/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.tsx index 0dc60821d7..54118139c5 100644 --- a/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.tsx +++ b/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.tsx @@ -43,20 +43,20 @@ export function MessageBubble({ message }: { message: LighthouseV2Message }) { return (
{!isUser && }
+
{groups.map((group) => group.type === ASSISTANT_PART_GROUP_TYPE.TOOL_CALL ? ( diff --git a/ui/app/(prowler)/lighthouse/_components/chat/message-markdown.tsx b/ui/app/(prowler)/lighthouse/_components/chat/message-markdown.tsx index 57da15628c..89755c155e 100644 --- a/ui/app/(prowler)/lighthouse/_components/chat/message-markdown.tsx +++ b/ui/app/(prowler)/lighthouse/_components/chat/message-markdown.tsx @@ -12,7 +12,7 @@ export function MessageMarkdown({ isStreaming?: boolean; }) { return ( -
+
0; return ( -
+
-
+
{streamState.activityItems.length > 0 ? ( ) : ( @@ -74,7 +74,7 @@ function StreamingActivityGroups({ streamState.status === LIGHTHOUSE_V2_STREAM_STATUS.DISCONNECTED; return ( -
+
{groups.map((group) => group.type === STREAMING_ACTIVITY_GROUP_TYPE.TOOL_CALL ? ( diff --git a/ui/styles/globals.css b/ui/styles/globals.css index 56d8dc1d9e..6a902e6db1 100644 --- a/ui/styles/globals.css +++ b/ui/styles/globals.css @@ -312,6 +312,11 @@ .lighthouse-markdown p + ol { margin-top: 0.25rem; } + + .lighthouse-markdown table { + min-width: 100%; + width: max-content; + } } /* ===== UTILITY LAYER ===== */