From c325a634728d81191713b05eab5f245535458eed Mon Sep 17 00:00:00 2001
From: Karol Chudzik <iipandarx@protonmail.com>
Date: Thu, 28 Nov 2024 16:19:06 +0100
Subject: [PATCH] fix(chat-message): allow passing classnames

---
 apps/www/public/r/chat-message.json           |  2 +-
 apps/www/registry/default/ui/chat-message.tsx | 25 +++++++++++--------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/apps/www/public/r/chat-message.json b/apps/www/public/r/chat-message.json
index 0e4aa5c..a74fbdd 100644
--- a/apps/www/public/r/chat-message.json
+++ b/apps/www/public/r/chat-message.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "ui/chat-message.tsx",
-      "content": "\"use client\"\n\nimport React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { MarkdownRenderer } from \"@/registry/default/ui/markdown-renderer\"\n\nconst chatBubbleVariants = cva(\n  \"group/message relative break-words rounded-lg p-3 text-sm sm:max-w-[70%]\",\n  {\n    variants: {\n      isUser: {\n        true: \"bg-primary\",\n        false: \"bg-muted\",\n      },\n      animation: {\n        none: \"\",\n        slide: \"animate-in fade-in-0 duration-300\",\n        scale: \"animate-in fade-in-0 zoom-in-75 duration-300\",\n        fade: \"animate-in fade-in-0 duration-500\",\n      },\n    },\n    compoundVariants: [\n      {\n        isUser: true,\n        animation: \"slide\",\n        class: \"slide-in-from-right\",\n      },\n      {\n        isUser: false,\n        animation: \"slide\",\n        class: \"slide-in-from-left\",\n      },\n      {\n        isUser: true,\n        animation: \"scale\",\n        class: \"origin-bottom-right\",\n      },\n      {\n        isUser: false,\n        animation: \"scale\",\n        class: \"origin-bottom-left\",\n      },\n    ],\n  }\n)\n\ntype Animation = VariantProps<typeof chatBubbleVariants>[\"animation\"]\n\nexport interface Message {\n  id: string\n  role: \"user\" | \"assistant\" | (string & {})\n  content: string\n  createdAt?: Date\n  attachments?: File[]\n}\n\nexport interface ChatMessageProps extends Message {\n  showTimeStamp?: boolean\n  animation?: Animation\n  actions?: React.ReactNode\n}\n\nexport const ChatMessage: React.FC<ChatMessageProps> = ({\n  role,\n  content,\n  createdAt,\n  showTimeStamp = false,\n  animation = \"scale\",\n  actions,\n}) => {\n  const isUser = role === \"user\"\n\n  const formattedTime = createdAt?.toLocaleTimeString(\"en-US\", {\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  })\n\n  return (\n    <div className={cn(\"flex flex-col\", isUser ? \"items-end\" : \"items-start\")}>\n      <div className={chatBubbleVariants({ isUser, animation })}>\n        <div className={isUser ? \"text-primary-foreground\" : \"text-foreground\"}>\n          <MarkdownRenderer>{content}</MarkdownRenderer>\n        </div>\n\n        {role === \"assistant\" && actions ? (\n          <div className=\"bg-background absolute -bottom-4 right-2 flex space-x-1 rounded-lg border p-1 opacity-0 transition-opacity group-hover/message:opacity-100\">\n            {actions}\n          </div>\n        ) : null}\n      </div>\n\n      {showTimeStamp && createdAt ? (\n        <span\n          className={cn(\n            \"mt-1 block px-1 text-xs opacity-50\",\n            animation !== \"none\" && \"animate-in fade-in-0 duration-500\"\n          )}\n        >\n          {formattedTime}\n        </span>\n      ) : null}\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { MarkdownRenderer } from \"@/registry/default/ui/markdown-renderer\"\n\nconst chatBubbleVariants = cva(\n  \"group/message relative break-words rounded-lg p-3 text-sm sm:max-w-[70%]\",\n  {\n    variants: {\n      isUser: {\n        true: \"bg-primary text-primary-foreground\",\n        false: \"bg-muted text-foreground\",\n      },\n      animation: {\n        none: \"\",\n        slide: \"duration-300 animate-in fade-in-0\",\n        scale: \"duration-300 animate-in fade-in-0 zoom-in-75\",\n        fade: \"duration-500 animate-in fade-in-0\",\n      },\n    },\n    compoundVariants: [\n      {\n        isUser: true,\n        animation: \"slide\",\n        class: \"slide-in-from-right\",\n      },\n      {\n        isUser: false,\n        animation: \"slide\",\n        class: \"slide-in-from-left\",\n      },\n      {\n        isUser: true,\n        animation: \"scale\",\n        class: \"origin-bottom-right\",\n      },\n      {\n        isUser: false,\n        animation: \"scale\",\n        class: \"origin-bottom-left\",\n      },\n    ],\n  }\n)\n\ntype Animation = VariantProps<typeof chatBubbleVariants>[\"animation\"]\n\nexport interface Message {\n  id: string\n  role: \"user\" | \"assistant\" | (string & {})\n  content: string\n  createdAt?: Date\n  attachments?: File[]\n}\n\nexport interface ChatMessageProps extends Message {\n  showTimeStamp?: boolean\n  animation?: Animation\n  actions?: React.ReactNode\n  className?: string\n}\n\nexport const ChatMessage: React.FC<ChatMessageProps> = ({\n  role,\n  content,\n  createdAt,\n  showTimeStamp = false,\n  animation = \"scale\",\n  actions,\n  className,\n}) => {\n  const isUser = role === \"user\"\n\n  const formattedTime = createdAt?.toLocaleTimeString(\"en-US\", {\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  })\n\n  return (\n    <div className={cn(\"flex flex-col\", isUser ? \"items-end\" : \"items-start\")}>\n      <div className={cn(chatBubbleVariants({ isUser, animation }), className)}>\n        <div>\n          <MarkdownRenderer>{content}</MarkdownRenderer>\n        </div>\n\n        {role === \"assistant\" && actions ? (\n          <div className=\"absolute -bottom-4 right-2 flex space-x-1 rounded-lg border bg-background p-1 opacity-0 transition-opacity group-hover/message:opacity-100 text-foreground\">\n            {actions}\n          </div>\n        ) : null}\n      </div>\n\n      {showTimeStamp && createdAt ? (\n        <time\n          dateTime={createdAt.toISOString()}\n          className={cn(\n            \"mt-1 block px-1 text-xs opacity-50\",\n            animation !== \"none\" && \"duration-500 animate-in fade-in-0\"\n          )}\n        >\n          {formattedTime}\n        </time>\n      ) : null}\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/registry/default/ui/chat-message.tsx b/apps/www/registry/default/ui/chat-message.tsx
index c20eb64..ac5dd16 100644
--- a/apps/www/registry/default/ui/chat-message.tsx
+++ b/apps/www/registry/default/ui/chat-message.tsx
@@ -11,14 +11,14 @@ const chatBubbleVariants = cva(
   {
     variants: {
       isUser: {
-        true: "bg-primary",
-        false: "bg-muted",
+        true: "bg-primary text-primary-foreground",
+        false: "bg-muted text-foreground",
       },
       animation: {
         none: "",
-        slide: "animate-in fade-in-0 duration-300",
-        scale: "animate-in fade-in-0 zoom-in-75 duration-300",
-        fade: "animate-in fade-in-0 duration-500",
+        slide: "duration-300 animate-in fade-in-0",
+        scale: "duration-300 animate-in fade-in-0 zoom-in-75",
+        fade: "duration-500 animate-in fade-in-0",
       },
     },
     compoundVariants: [
@@ -60,6 +60,7 @@ export interface ChatMessageProps extends Message {
   showTimeStamp?: boolean
   animation?: Animation
   actions?: React.ReactNode
+  className?: string
 }
 
 export const ChatMessage: React.FC<ChatMessageProps> = ({
@@ -69,6 +70,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
   showTimeStamp = false,
   animation = "scale",
   actions,
+  className,
 }) => {
   const isUser = role === "user"
 
@@ -79,27 +81,28 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
 
   return (
     <div className={cn("flex flex-col", isUser ? "items-end" : "items-start")}>
-      <div className={chatBubbleVariants({ isUser, animation })}>
-        <div className={isUser ? "text-primary-foreground" : "text-foreground"}>
+      <div className={cn(chatBubbleVariants({ isUser, animation }), className)}>
+        <div>
           <MarkdownRenderer>{content}</MarkdownRenderer>
         </div>
 
         {role === "assistant" && actions ? (
-          <div className="bg-background absolute -bottom-4 right-2 flex space-x-1 rounded-lg border p-1 opacity-0 transition-opacity group-hover/message:opacity-100">
+          <div className="absolute -bottom-4 right-2 flex space-x-1 rounded-lg border bg-background p-1 opacity-0 transition-opacity group-hover/message:opacity-100 text-foreground">
             {actions}
           </div>
         ) : null}
       </div>
 
       {showTimeStamp && createdAt ? (
-        <span
+        <time
+          dateTime={createdAt.toISOString()}
           className={cn(
             "mt-1 block px-1 text-xs opacity-50",
-            animation !== "none" && "animate-in fade-in-0 duration-500"
+            animation !== "none" && "duration-500 animate-in fade-in-0"
           )}
         >
           {formattedTime}
-        </span>
+        </time>
       ) : null}
     </div>
   )