feat!: ContentPartText is now a <p> (#325)

* feat!: ContentPartText is now a <p> * fix
assistant-ui · Jun 26, 2024 · de20b1c · de20b1c
1 parent 5d54829
commit de20b1c
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 21 deletions.
diff --git a/.changeset/seven-walls-agree.md b/.changeset/seven-walls-agree.md
@@ -0,0 +1,6 @@
+---
+"@assistant-ui/react-ui": minor
+"@assistant-ui/react": minor
+---
+
+feat!: ContentPartText is now a <p> element
diff --git a/apps/www/pages/docs/migrations/v0.2.md b/apps/www/pages/docs/migrations/v0.2.md
@@ -0,0 +1,36 @@
+---
+title: Migration to v0.2
+---
+
+## Changes to the `Thread.tsx` template
+
+1. Change the type of the wrapper around the `MessagePrimitive.Content` component to `<div>` instead of `<p>`.
+2. Remove the `whitespace-pre-line` class from the wrapper.
+
+```diff
+const UserMessage = () => {
+  return ( 
+    ...
+-   <p className="whitespace-pre-line ...">
++     <div className="...">
+        <MessagePrimitive.Content />
+-     </p>
++     </div>
+    </div>
+    ...
+  );
+};
+
+const AssistantMessage = () => {
+  return ( 
+    ...
+-   <p className="whitespace-pre-line ...">
++     <div className="...">
+        <MessagePrimitive.Content />
+-     </p>
++     </div>
+    </div>
+    ...
+  );
+};
+```
diff --git a/apps/www/pages/reference/primitives/ContentPart.mdx b/apps/www/pages/reference/primitives/ContentPart.mdx
@@ -32,7 +32,7 @@ const UIContentPart = () => {
 
 Renders the text content of a text content part.
 
-This primitive renders a `<span>` element.
+This primitive renders a `<p>` element.
 
 #### `useContentPartText`
 

diff --git a/examples/with-react-hook-form/components/ui/assistant-ui/thread.tsx b/examples/with-react-hook-form/components/ui/assistant-ui/thread.tsx
@@ -113,9 +113,9 @@ const UserMessage: FC = () => {
       <div className="flex-grow">
         <p className="font-semibold">You</p>
 
-        <p className="text-foreground whitespace-pre-line">
+        <div className="text-foreground">
           <MessagePrimitive.Content />
-        </p>
+        </div>
 
         <div className="flex pt-2">
           <BranchPicker />
@@ -176,7 +176,7 @@ const AssistantMessage: FC = () => {
         <p className="font-semibold">Assistant</p>
 
         <MessagePrimitive.InProgress className="bg-foreground inline-block size-3 animate-pulse rounded-full" />
-        <div className="text-foreground flex flex-col gap-3 whitespace-pre-line">
+        <div className="text-foreground flex flex-col gap-3">
           <MessagePrimitive.Content />
         </div>
 

diff --git a/packages/react-ui/src/thread.tsx b/packages/react-ui/src/thread.tsx
@@ -67,9 +67,9 @@ const UserMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="relative mb-6 flex w-full max-w-2xl flex-col items-end gap-2 pl-24">
       <div className="relative mr-1 flex items-start gap-3">
-        <p className="bg-foreground/5 text-foreground max-w-xl whitespace-pre-line break-words rounded-3xl px-5 py-2.5">
+        <div className="bg-foreground/5 text-foreground max-w-xl break-words rounded-3xl px-5 py-2.5">
           <MessagePrimitive.Content />
-        </p>
+        </div>
       </div>
     </MessagePrimitive.Root>
   );
@@ -84,9 +84,9 @@ const AssistantMessage: FC = () => {
 
       <div className="mt-2 flex-grow">
         <MessagePrimitive.InProgress className="bg-foreground inline-block size-3 animate-[aui-pulse] rounded-full" />
-        <p className="text-foreground max-w-xl whitespace-pre-line break-words">
+        <div className="text-foreground max-w-xl break-words">
           <MessagePrimitive.Content />
-        </p>
+        </div>
       </div>
     </MessagePrimitive.Root>
   );

diff --git a/packages/react/src/primitives/contentPart/ContentPartText.tsx b/packages/react/src/primitives/contentPart/ContentPartText.tsx
@@ -2,8 +2,8 @@ import { Primitive } from "@radix-ui/react-primitive";
 import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { useContentPartText } from "../../primitive-hooks/contentPart/useContentPartText";
 
-type ContentPartTextElement = ElementRef<typeof Primitive.span>;
-type PrimitiveSpanProps = ComponentPropsWithoutRef<typeof Primitive.span>;
+type ContentPartTextElement = ElementRef<typeof Primitive.p>;
+type PrimitiveSpanProps = ComponentPropsWithoutRef<typeof Primitive.p>;
 
 type ContentPartTextProps = Omit<PrimitiveSpanProps, "children">;
 
@@ -14,9 +14,9 @@ export const ContentPartText = forwardRef<
   const text = useContentPartText();
 
   return (
-    <Primitive.span {...props} ref={forwardedRef}>
+    <Primitive.p {...props} ref={forwardedRef}>
       {text}
-    </Primitive.span>
+    </Primitive.p>
   );
 });
 

diff --git a/packages/react/src/primitives/message/MessageContent.tsx b/packages/react/src/primitives/message/MessageContent.tsx
@@ -34,7 +34,7 @@ export type MessageContentProps = {
 const defaultComponents = {
   Text: () => (
     <>
-      <ContentPartText />
+      <ContentPartText style={{ whiteSpace: "pre-line" }} />
       <ContentPartInProgressIndicator />
     </>
   ),

diff --git a/packages/shadcn-registry/registry/assistant-ui/full/thread.tsx b/packages/shadcn-registry/registry/assistant-ui/full/thread.tsx
@@ -120,9 +120,9 @@ const UserMessage: FC = () => {
           </ActionBarPrimitive.Edit>
         </ActionBarPrimitive.Root>
 
-        <p className="bg-foreground/5 text-foreground max-w-xl whitespace-pre-line break-words rounded-3xl px-5 py-2.5">
+        <div className="bg-foreground/5 text-foreground max-w-xl break-words rounded-3xl px-5 py-2.5">
           <MessagePrimitive.Content />
-        </p>
+        </div>
       </div>
 
       <BranchPicker />
@@ -158,9 +158,9 @@ const AssistantMessage: FC = () => {
 
       <div className="mt-2 flex-grow">
         <MessagePrimitive.InProgress className="bg-foreground inline-block size-3 animate-pulse rounded-full" />
-        <p className="text-foreground max-w-xl whitespace-pre-line break-words">
+        <div className="text-foreground max-w-xl break-words">
           <MessagePrimitive.Content />
-        </p>
+        </div>
 
         <div className="flex pt-2">
           <BranchPicker />

diff --git a/packages/shadcn-registry/registry/assistant-ui/thread.tsx b/packages/shadcn-registry/registry/assistant-ui/thread.tsx
@@ -67,9 +67,9 @@ const UserMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="relative mb-6 flex w-full max-w-2xl flex-col items-end gap-2 pl-24">
       <div className="relative mr-1 flex items-start gap-3">
-        <p className="bg-foreground/5 text-foreground max-w-xl whitespace-pre-line break-words rounded-3xl px-5 py-2.5">
+        <div className="bg-foreground/5 text-foreground max-w-xl break-words rounded-3xl px-5 py-2.5">
           <MessagePrimitive.Content />
-        </p>
+        </div>
       </div>
     </MessagePrimitive.Root>
   );
@@ -84,9 +84,9 @@ const AssistantMessage: FC = () => {
 
       <div className="mt-2 flex-grow">
         <MessagePrimitive.InProgress className="bg-foreground inline-block size-3 animate-pulse rounded-full" />
-        <p className="text-foreground max-w-xl whitespace-pre-line break-words">
+        <div className="text-foreground max-w-x break-words">
           <MessagePrimitive.Content />
-        </p>
+        </div>
       </div>
     </MessagePrimitive.Root>
   );