Fixes

Blazity · Oct 26, 2024 · cab16bb · cab16bb
1 parent f8bb735
commit cab16bb
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 29 deletions.
diff --git a/apps/www/content/docs/components/chat.mdx b/apps/www/content/docs/components/chat.mdx
@@ -161,7 +161,9 @@ export function CustomChat() {
       ) : null}
 
       {messages.length > 0 ? (
-        <ChatMessages messages={messages} isTyping={isTyping} />
+        <ChatMessages>
+          <MessageList messages={messages} isTyping={isTyping} />
+        </ChatMessages>
       ) : null}
 
       <ChatForm

diff --git a/apps/www/registry/default/ui/chat-message.tsx b/apps/www/registry/default/ui/chat-message.tsx
@@ -2,11 +2,8 @@
 
 import React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-import { ThumbsDown, ThumbsUp } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import { CopyButton } from "@/registry/default/ui/copy-button"
 import { MarkdownRenderer } from "@/registry/default/ui/markdown-renderer"
 
 const chatBubbleVariants = cva(
@@ -62,6 +59,7 @@ export interface Message {
 export interface ChatMessageProps extends Message {
   showTimeStamp?: boolean
   animation?: Animation
+  actions?: React.ReactNode
 }
 
 export const ChatMessage: React.FC<ChatMessageProps> = ({
@@ -70,6 +68,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
   createdAt,
   showTimeStamp = false,
   animation = "scale",
+  actions,
 }) => {
   const isUser = role === "user"
 
@@ -90,20 +89,9 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
           <MarkdownRenderer>{content}</MarkdownRenderer>
         </div>
 
-        {role === "assistant" ? (
+        {role === "assistant" && actions ? (
           <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">
-            <div className="border-r pr-1">
-              <CopyButton
-                content={content}
-                copyMessage="Copied response to clipboard!"
-              />
-            </div>
-            <Button size="icon" variant="ghost" className="h-6 w-6">
-              <ThumbsUp className="h-4 w-4" />
-            </Button>
-            <Button size="icon" variant="ghost" className="h-6 w-6">
-              <ThumbsDown className="h-4 w-4" />
-            </Button>
+            {actions}
           </div>
         ) : null}
       </div>

diff --git a/apps/www/registry/default/ui/chat.tsx b/apps/www/registry/default/ui/chat.tsx
@@ -1,12 +1,13 @@
 "use client"
 
 import { forwardRef, useState, type ReactElement } from "react"
-import { ArrowDown } from "lucide-react"
+import { ArrowDown, ThumbsDown, ThumbsUp } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { useAutoScroll } from "@/registry/default/hooks/use-auto-scroll"
 import { Button } from "@/registry/default/ui/button"
 import { type Message } from "@/registry/default/ui/chat-message"
+import { CopyButton } from "@/registry/default/ui/copy-button"
 import { MessageInput } from "@/registry/default/ui/message-input"
 import { MessageList } from "@/registry/default/ui/message-list"
 import { PromptSuggestions } from "@/registry/default/ui/prompt-suggestions"
@@ -58,7 +59,30 @@ export function Chat({
       ) : null}
 
       {messages.length > 0 ? (
-        <ChatMessages messages={messages} isTyping={isTyping} />
+        <ChatMessages messages={messages}>
+          <MessageList
+            messages={messages}
+            isTyping={isTyping}
+            messageOptions={(message) => ({
+              actions: (
+                <>
+                  <div className="border-r pr-1">
+                    <CopyButton
+                      content={message.content}
+                      copyMessage="Copied response to clipboard!"
+                    />
+                  </div>
+                  <Button size="icon" variant="ghost" className="h-6 w-6">
+                    <ThumbsUp className="h-4 w-4" />
+                  </Button>
+                  <Button size="icon" variant="ghost" className="h-6 w-6">
+                    <ThumbsDown className="h-4 w-4" />
+                  </Button>
+                </>
+              ),
+            })}
+          />
+        </ChatMessages>
       ) : null}
 
       <ChatForm
@@ -85,11 +109,10 @@ Chat.displayName = "Chat"
 
 export function ChatMessages({
   messages,
-  isTyping,
-}: {
+  children,
+}: React.PropsWithChildren<{
   messages: Message[]
-  isTyping: boolean
-}) {
+}>) {
   const { containerRef, scrollToBottom, handleScroll, shouldAutoScroll } =
     useAutoScroll([messages])
 
@@ -99,7 +122,8 @@ export function ChatMessages({
       ref={containerRef}
       onScroll={handleScroll}
     >
-      <MessageList messages={messages} isTyping={isTyping} />
+      {children}
+
       {!shouldAutoScroll && (
         <div className="sticky bottom-0 left-0 flex w-full justify-end">
           <Button

diff --git a/apps/www/registry/default/ui/message-list.tsx b/apps/www/registry/default/ui/message-list.tsx
@@ -1,22 +1,44 @@
-import { ChatMessage, type Message } from "@/registry/default/ui/chat-message"
+import {
+  ChatMessage,
+  type ChatMessageProps,
+  type Message,
+} from "@/registry/default/ui/chat-message"
 import { TypingIndicator } from "@/registry/default/ui/typing-indicator"
 
+type AdditionalMessageOptions = Omit<ChatMessageProps, keyof Message>
+
 interface MessageListProps {
   messages: Message[]
   showTimeStamps?: boolean
   isTyping?: boolean
+  messageOptions?:
+    | AdditionalMessageOptions
+    | ((message: Message) => AdditionalMessageOptions)
 }
 
 export function MessageList({
   messages,
   showTimeStamps = true,
-  isTyping: isTyping = false,
+  isTyping = false,
+  messageOptions,
 }: MessageListProps) {
   return (
     <div className="space-y-4 overflow-visible">
-      {messages.map((message, index) => (
-        <ChatMessage key={index} showTimeStamp={showTimeStamps} {...message} />
-      ))}
+      {messages.map((message, index) => {
+        const additionalOptions =
+          typeof messageOptions === "function"
+            ? messageOptions(message)
+            : messageOptions
+
+        return (
+          <ChatMessage
+            key={index}
+            showTimeStamp={showTimeStamps}
+            {...message}
+            {...additionalOptions}
+          />
+        )
+      })}
       {isTyping && <TypingIndicator />}
     </div>
   )