Add chat avatars for docs demo

components/qaChatbot/BotAvatar.tsx

@@ -0,0 +1,23 @@
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+export function BotAvatar({ className }: { className?: string }) {
+  return (
+    <div 
+      className={cn(
+        "flex h-6 w-6 items-center justify-center overflow-hidden rounded-full border bg-background", 
+        className
+      )} 
+      aria-label="Langfuse"
+    >
+      <Image
+        src="/langfuse_icon.svg"
+        alt="Langfuse"
+        width={20}
+        height={20}
+        priority
+        className="h-5 w-5"
+      />
+    </div>
+  );
+}

components/qaChatbot/UserAvatar.tsx

@@ -0,0 +1,16 @@
+import { UserRound } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function UserAvatar({ className }: { className?: string }) {
+  return (
+    <div 
+      className={cn(
+        "flex h-6 w-6 items-center justify-center rounded-full border bg-muted text-muted-foreground", 
+        className
+      )} 
+      aria-label="User"
+    >
+      <UserRound className="h-4 w-4" aria-hidden />
+    </div>
+  );
+}

components/qaChatbot/index.tsx

@@ -42,6 +42,8 @@ import {
 } from "@/components/ai-elements/tool";
 import { LangfuseWeb } from "langfuse";
 import { FeedbackDialog } from "./FeedbackPopover";
+import { BotAvatar } from "./BotAvatar";
+import { UserAvatar } from "./UserAvatar";
 
 const eulangfuseWebClient = new LangfuseWeb({
   baseUrl: process.env.NEXT_PUBLIC_EU_LANGFUSE_BASE_URL,
@@ -154,7 +156,10 @@ export const Chat = ({ className, ...props }: ChatProps) => {
                     })}
                   </Sources>
                 )}
-                <Message from={message.role} key={message.id}>
+                <div className="flex items-start gap-3">
+                  {message.role === "assistant" && <BotAvatar />}
+                  <div className="flex-1">
+                    <Message from={message.role} key={message.id}>
                   <MessageContent>
                     {message.parts.map((part, i) => {
                       if (part.type === "text") {
@@ -239,6 +244,9 @@ export const Chat = ({ className, ...props }: ChatProps) => {
                     })}
                   </MessageContent>
                 </Message>
+                  </div>
+                  {message.role === "user" && <UserAvatar />}
+                </div>
               </div>
             ))}
             {status === "submitted" && <Loader />}

src/github-stars.ts

@@ -1 +1 @@
-export const GITHUB_STARS = 15234;
+export const GITHUB_STARS = 15260;