fix(message): wrap long words instead of clipping them

.changeset/message-response-wrap-long-words.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+Wrap long words in MessageResponse and ReasoningContent instead of clipping them at the message edge

packages/elements/__tests__/message.test.tsx

@@ -145,6 +145,13 @@ describe("messageResponse", () => {
     render(<MessageResponse># Heading</MessageResponse>);
     expect(screen.getByText("Heading")).toBeInTheDocument();
   });
+
+  it("wraps long words instead of letting them overflow", () => {
+    const { container } = render(
+      <MessageResponse>{"a".repeat(200)}</MessageResponse>
+    );
+    expect(container.firstChild).toHaveClass("break-words");
+  });
 });
 
 describe("messageBranch", () => {

packages/elements/__tests__/reasoning.test.tsx

@@ -248,4 +248,16 @@ describe("reasoningContent", () => {
     );
     expect(container.querySelector(".custom")).toBeInTheDocument();
   });
+
+  it("wraps long words instead of letting them overflow", () => {
+    const longWord = "a".repeat(200);
+    render(
+      <Reasoning defaultOpen>
+        <ReasoningContent>{longWord}</ReasoningContent>
+      </Reasoning>
+    );
+    expect(
+      screen.getByText(longWord).closest(".break-words")
+    ).toBeInTheDocument();
+  });
 });

packages/elements/src/message.tsx

@@ -327,7 +327,7 @@ export const MessageResponse = memo(
   ({ className, ...props }: MessageResponseProps) => (
     <Streamdown
       className={cn(
-        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        "size-full break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
         className
       )}
       plugins={streamdownPlugins}

packages/elements/src/reasoning.tsx

@@ -210,7 +210,7 @@ export const ReasoningContent = memo(
   ({ className, children, ...props }: ReasoningContentProps) => (
     <CollapsibleContent
       className={cn(
-        "mt-4 text-sm",
+        "mt-4 break-words text-sm",
         "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
         className
       )}