存客宝 React

Cunkebao/app/components/ChatMessage.tsx

@@ -0,0 +1,40 @@
+import { Avatar } from "@/components/ui/avatar"
+import { cn } from "@/lib/utils"
+
+interface ChatMessageProps {
+  content: string
+  isUser: boolean
+  timestamp: Date
+  avatar?: string
+}
+
+export function ChatMessage({ content, isUser, timestamp, avatar }: ChatMessageProps) {
+  return (
+    <div className={cn("flex w-full gap-3 p-4", isUser ? "justify-end" : "justify-start")}>
+      {!isUser && (
+        <Avatar className="h-8 w-8">
+          <div className="bg-primary text-primary-foreground flex h-full w-full items-center justify-center rounded-full text-sm font-semibold">
+            AI
+          </div>
+        </Avatar>
+      )}
+
+      <div className={cn("rounded-lg p-3 max-w-[80%]", isUser ? "bg-primary text-primary-foreground" : "bg-muted")}>
+        <p className="whitespace-pre-wrap">{content}</p>
+        <div className={cn("text-xs mt-1", isUser ? "text-primary-foreground/70" : "text-muted-foreground")}>
+          {timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+          })}
+        </div>
+      </div>
+
+      {isUser && avatar && (
+        <Avatar className="h-8 w-8">
+          <img src={avatar || "/placeholder.svg"} alt="User" className="rounded-full" />
+        </Avatar>
+      )}
+    </div>
+  )
+}
+