feat: improve ThreadContent component alignment and width TAM-141 (#447)

charliecreates[bot] · CharlieHelps · michaelmagan · web-flow · commit a25ea61e9d23 · 2025-05-21T16:22:32.000-07:00
Co-authored-by: CharlieHelps &lt;charlie@charlielabs.ai&gt;
Co-authored-by: Michael Magan &lt;magan@usehydra.ai&gt;
diff --git a/cli/src/registry/message/message.tsx b/cli/src/registry/message/message.tsx
@@ -227,7 +227,7 @@ const MessageContent = React.forwardRef<HTMLDivElement, MessageContentProps>(
       >
         {showLoading ? (
           <div
-            className="flex items-center justify-center h-4 py-1"
+            className="flex items-center justify-start h-4 py-1"
             data-slot="message-loading-indicator"
           >
             <LoadingIndicator />
diff --git a/cli/src/registry/thread-content/thread-content.tsx b/cli/src/registry/thread-content/thread-content.tsx
@@ -90,7 +90,7 @@ const ThreadContent = React.forwardRef<HTMLDivElement, ThreadContentProps>(
       <ThreadContentContext.Provider value={contextValue}>
         <div
           ref={ref}
-          className={cn(className)}
+          className={cn("w-full", className)}
           data-slot="thread-content-container"
           {...props}
         >
@@ -128,42 +128,47 @@ const ThreadContentMessages = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={cn(className)}
+      className={cn("w-full", className)}
       data-slot="thread-content-messages"
       {...props}
     >
       {messages.map((message, index) => {
-        const showLoading = isGenerating && index === messages.length - 1;
-
         return (
           <div
             key={
               message.id ??
-              `${message.role}-${message.createdAt ?? Date.now()}-${message.content?.toString().substring(0, 10)}`
+              `${message.role}-${
+                message.createdAt ?? Date.now()
+              }-${message.content?.toString().substring(0, 10)}`
             }
             data-slot="thread-content-item"
           >
             <Message
               role={message.role === "assistant" ? "assistant" : "user"}
               message={message}
               variant={variant}
-              isLoading={showLoading}
-              className={
+              isLoading={isGenerating && index === messages.length - 1}
+              className={cn(
+                "flex w-full",
                 message.role === "assistant"
-                  ? "flex justify-start"
-                  : "flex justify-end"
-              }
+                  ? "justify-start"
+                  : "justify-end max-w-3xl",
+              )}
             >
-              <div className="flex flex-col">
+              <div
+                className={cn(
+                  "flex flex-col",
+                  message.role === "assistant" ? "w-full" : "",
+                )}
+              >
                 <MessageContent
                   className={
                     message.role === "assistant"
                       ? "text-primary font-sans"
                       : "text-primary bg-container hover:bg-backdrop font-sans"
                   }
                 />
-                {/* Rendered component area determines if the message is a canvas message */}
-                <MessageRenderedComponentArea />
+                <MessageRenderedComponentArea className="w-full" />
               </div>
             </Message>
           </div>
diff --git a/showcase/src/components/ui/message.tsx b/showcase/src/components/ui/message.tsx
@@ -227,7 +227,7 @@ const MessageContent = React.forwardRef<HTMLDivElement, MessageContentProps>(
       >
         {showLoading ? (
           <div
-            className="flex items-center justify-center h-4 py-1"
+            className="flex items-center justify-start h-4 py-1"
             data-slot="message-loading-indicator"
           >
             <LoadingIndicator />
diff --git a/showcase/src/components/ui/thread-content.tsx b/showcase/src/components/ui/thread-content.tsx
@@ -90,7 +90,7 @@ const ThreadContent = React.forwardRef<HTMLDivElement, ThreadContentProps>(
       <ThreadContentContext.Provider value={contextValue}>
         <div
           ref={ref}
-          className={cn(className)}
+          className={cn("w-full", className)}
           data-slot="thread-content-container"
           {...props}
         >
@@ -128,42 +128,47 @@ const ThreadContentMessages = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={cn(className)}
+      className={cn("w-full", className)}
       data-slot="thread-content-messages"
       {...props}
     >
       {messages.map((message, index) => {
-        const showLoading = isGenerating && index === messages.length - 1;
-
         return (
           <div
             key={
               message.id ??
-              `${message.role}-${message.createdAt ?? Date.now()}-${message.content?.toString().substring(0, 10)}`
+              `${message.role}-${
+                message.createdAt ?? Date.now()
+              }-${message.content?.toString().substring(0, 10)}`
             }
             data-slot="thread-content-item"
           >
             <Message
               role={message.role === "assistant" ? "assistant" : "user"}
               message={message}
               variant={variant}
-              isLoading={showLoading}
-              className={
+              isLoading={isGenerating && index === messages.length - 1}
+              className={cn(
+                "flex w-full",
                 message.role === "assistant"
-                  ? "flex justify-start"
-                  : "flex justify-end"
-              }
+                  ? "justify-start"
+                  : "justify-end max-w-3xl",
+              )}
             >
-              <div className="flex flex-col">
+              <div
+                className={cn(
+                  "flex flex-col",
+                  message.role === "assistant" ? "w-full" : "",
+                )}
+              >
                 <MessageContent
                   className={
                     message.role === "assistant"
                       ? "text-primary font-sans"
                       : "text-primary bg-container hover:bg-backdrop font-sans"
                   }
                 />
-                {/* Rendered component area determines if the message is a canvas message */}
-                <MessageRenderedComponentArea />
+                <MessageRenderedComponentArea className="w-full" />
               </div>
             </Message>
           </div>

Original file line number	Diff line number	Diff line change
`@@ -227,7 +227,7 @@ const MessageContent = React.forwardRef<HTMLDivElement, MessageContentProps>(`
`227`	`227`	`>`
`228`	`228`	`{showLoading ? (`
`229`	`229`	`<div`
`230`		`- className="flex items-center justify-center h-4 py-1"`
	`230`	`+ className="flex items-center justify-start h-4 py-1"`
`231`	`231`	`data-slot="message-loading-indicator"`
`232`	`232`	`>`
`233`	`233`	`<LoadingIndicator />`