chore: update ai elements

src/components/ai-elements/message.tsx

@@ -35,11 +35,12 @@ export const MessageContent = ({
       'flex flex-col gap-2 overflow-hidden rounded-lg px-4 py-3 text-foreground text-sm',
       'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',
       'group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground',
+      'is-user:dark',
       className
     )}
     {...props}
   >
-    <div className="is-user:dark">{children}</div>
+    {children}
   </div>
 );
 
@@ -54,10 +55,7 @@ export const MessageAvatar = ({
   className,
   ...props
 }: MessageAvatarProps) => (
-  <Avatar
+  <Avatar className={cn('size-8 ring-1 ring-border', className)} {...props}>
-    className={cn('size-8 ring ring-1 ring-border', className)}
-    {...props}
-  >
     <AvatarImage alt="" className="mt-0 mb-0" src={src} />
     <AvatarFallback>{name?.slice(0, 2) || 'ME'}</AvatarFallback>
   </Avatar>

src/components/ai-elements/reasoning.tsx

@@ -38,13 +38,14 @@ export type ReasoningProps = ComponentProps<typeof Collapsible> & {
 };
 
 const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
 
 export const Reasoning = memo(
   ({
     className,
     isStreaming = false,
     open,
-    defaultOpen = false,
+    defaultOpen = true,
     onOpenChange,
     duration: durationProp,
     children,
@@ -70,23 +71,22 @@ export const Reasoning = memo(
           setStartTime(Date.now());
         }
       } else if (startTime !== null) {
-        setDuration(Math.round((Date.now() - startTime) / 1000));
+        setDuration(Math.round((Date.now() - startTime) / MS_IN_S));
         setStartTime(null);
       }
     }, [isStreaming, startTime, setDuration]);
 
     // Auto-open when streaming starts, auto-close when streaming ends (once only)
     useEffect(() => {
-      if (isStreaming && !isOpen) {
+      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosedRef) {
-        setIsOpen(true);
+          // Add a small delay before closing to allow user to see the content
-      } else if (!isStreaming && isOpen && !defaultOpen && !hasAutoClosedRef) {
+          const timer = setTimeout(() => {
-        // Add a small delay before closing to allow user to see the content
+            setIsOpen(false);
-        const timer = setTimeout(() => {
+            setHasAutoClosedRef(true);
-          setIsOpen(false);
+          }, AUTO_CLOSE_DELAY);
-          setHasAutoClosedRef(true);
+
-        }, AUTO_CLOSE_DELAY);
+          return () => clearTimeout(timer);
-        return () => clearTimeout(timer);
+        }
-      }
     }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosedRef]);
 
     const handleOpenChange = (newOpen: boolean) => {
@@ -110,19 +110,10 @@ export const Reasoning = memo(
   }
 );
 
-export type ReasoningTriggerProps = ComponentProps<
+export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
-  typeof CollapsibleTrigger
-> & {
-  title?: string;
-};
 
 export const ReasoningTrigger = memo(
-  ({
+  ({ className, children, ...props }: ReasoningTriggerProps) => {
-    className,
-    title = 'Reasoning',
-    children,
-    ...props
-  }: ReasoningTriggerProps) => {
     const { isStreaming, isOpen, duration } = useReasoning();
 
     return (

src/components/ai-elements/sources.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
+import { BookIcon, ChevronDownIcon } from 'lucide-react';
+import type { ComponentProps } from 'react';
+
+export type SourcesProps = ComponentProps<'div'>;
+
+export const Sources = ({ className, ...props }: SourcesProps) => (
+  <Collapsible
+    className={cn('not-prose mb-4 text-primary text-xs', className)}
+    {...props}
+  />
+);
+
+export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  count: number;
+};
+
+export const SourcesTrigger = ({
+  className,
+  count,
+  children,
+  ...props
+}: SourcesTriggerProps) => (
+  <CollapsibleTrigger className={cn("flex items-center gap-2", className)} {...props}>
+    {children ?? (
+      <>
+        <p className="font-medium">Used {count} sources</p>
+        <ChevronDownIcon className="h-4 w-4" />
+      </>
+    )}
+  </CollapsibleTrigger>
+);
+
+export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const SourcesContent = ({
+  className,
+  ...props
+}: SourcesContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      'mt-3 flex w-fit flex-col gap-2',
+      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+      className
+    )}
+    {...props}
+  />
+);
+
+export type SourceProps = ComponentProps<'a'>;
+
+export const Source = ({ href, title, children, ...props }: SourceProps) => (
+  <a
+    className="flex items-center gap-2"
+    href={href}
+    rel="noreferrer"
+    target="_blank"
+    {...props}
+  >
+    {children ?? (
+      <>
+        <BookIcon className="h-4 w-4" />
+        <span className="block font-medium">{title}</span>
+      </>
+    )}
+  </a>
+);

src/components/ai-elements/tool.tsx

@@ -50,7 +50,7 @@ const getStatusBadge = (status: ToolUIPart['state']) => {
   } as const;
 
   return (
-    <Badge className="rounded-full text-xs" variant="secondary">
+    <Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
       {icons[status]}
       {labels[status]}
     </Badge>