@gram-ai/elements 1.27.3 → 1.27.5

package/src/components/assistant-ui/message-feedback.tsx

@@ -3,93 +3,106 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { EASE_OUT_QUINT } from '@/lib/easing'
-import { cn } from '@/lib/utils'
-import { Heart, X } from 'lucide-react'
-import { AnimatePresence } from 'motion/react'
-import * as m from 'motion/react-m'
-import { useState, type FC } from 'react'
+} from "@/components/ui/tooltip";
+import { EASE_OUT_QUINT } from "@/lib/easing";
+import { cn } from "@/lib/utils";
+import { Heart, X } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import * as m from "motion/react-m";
+import { useState, type FC } from "react";
 
-export type FeedbackType = 'dislike' | 'like'
+export type FeedbackType = "dislike" | "like";
 
 interface MessageFeedbackProps {
-  onFeedback?: (type: FeedbackType) => void
-  onResolved?: () => void
-  className?: string
+  onFeedback?: (type: FeedbackType) => void;
+  onResolved?: () => void;
+  className?: string;
 }
 
 const feedbackButtons = [
   {
-    type: 'like' as const,
+    type: "like" as const,
     icon: Heart,
-    label: 'This resolved my question',
-    color: 'text-emerald-500',
-    hoverBg: 'hover:bg-emerald-500/10',
-    activeBg: 'bg-emerald-500/20',
+    label: "This resolved my question",
+    color: "text-emerald-500",
+    hoverBg: "hover:bg-emerald-500/10",
+    activeBg: "bg-emerald-500/20",
   },
   {
-    type: 'dislike' as const,
+    type: "dislike" as const,
     icon: X,
     label: "This didn't help",
-    color: 'text-rose-500',
-    hoverBg: 'hover:bg-rose-500/10',
-    activeBg: 'bg-rose-500/20',
+    color: "text-rose-500",
+    hoverBg: "hover:bg-rose-500/10",
+    activeBg: "bg-rose-500/20",
   },
-]
+];
 
-const subtleBounceKeyframes = `
+const feedbackStyles = `
 @keyframes subtle-bounce {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-2px); }
 }
-`
+.aui-feedback-buttons {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
+}
+.dark .aui-feedback-buttons,
+:host(.dark) .aui-feedback-buttons {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+.aui-feedback-thank-you {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+.dark .aui-feedback-thank-you,
+:host(.dark) .aui-feedback-thank-you {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+`;
 
 export const MessageFeedback: FC<MessageFeedbackProps> = ({
   onFeedback,
   onResolved,
   className,
 }) => {
+  const [tooltipContainer, setTooltipContainer] =
+    useState<HTMLDivElement | null>(null);
   const [selectedFeedback, setSelectedFeedback] = useState<FeedbackType | null>(
-    null
-  )
-  const [showDislikeFeedback, setShowDislikeFeedback] = useState(false)
+    null,
+  );
+  const [showDislikeFeedback, setShowDislikeFeedback] = useState(false);
 
   const handleFeedback = (type: FeedbackType) => {
-    setSelectedFeedback(type)
-    onFeedback?.(type)
-    if (type === 'like') {
-      onResolved?.()
+    setSelectedFeedback(type);
+    onFeedback?.(type);
+    if (type === "like") {
+      onResolved?.();
     } else {
-      setShowDislikeFeedback(true)
+      setShowDislikeFeedback(true);
     }
-  }
+  };
 
   return (
     <div
       className={cn(
-        'aui-message-feedback flex items-center justify-center',
-        className
+        "aui-message-feedback flex items-center justify-center",
+        className,
       )}
     >
-      <style>{subtleBounceKeyframes}</style>
+      <style>{feedbackStyles}</style>
       <AnimatePresence mode="wait">
         {!showDislikeFeedback ? (
           <m.div
             key="feedback-buttons"
-            className="relative flex items-center gap-1.5 rounded-full border border-black/[0.08] bg-gradient-to-b from-white/80 to-white/60 px-3 py-1 shadow-lg backdrop-blur-2xl dark:border-white/[0.08] dark:from-white/15 dark:to-white/10"
+            ref={setTooltipContainer}
+            className="aui-feedback-buttons relative flex items-center gap-1.5 rounded-full border border-black/[0.08] bg-gradient-to-b from-white/80 to-white/60 px-3 py-1 backdrop-blur-2xl dark:border-white/5 dark:from-white/10 dark:to-white/[0.03]"
             initial={{ opacity: 0, scale: 0.8, y: 10 }}
             animate={{ opacity: 1, scale: 1, y: 0 }}
             exit={{ opacity: 0, scale: 0.8, y: 5 }}
             transition={{ duration: 0.4, delay: 0.75, ease: EASE_OUT_QUINT }}
-            style={{
-              boxShadow:
-                '0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.02)',
-            }}
           >
             <TooltipProvider delayDuration={300}>
               {feedbackButtons.map((button, index) => {
-                const Icon = button.icon
+                const Icon = button.icon;
                 return (
                   <Tooltip key={button.type}>
                     <TooltipTrigger asChild>
@@ -97,9 +110,9 @@ export const MessageFeedback: FC<MessageFeedbackProps> = ({
                         type="button"
                         onClick={() => handleFeedback(button.type)}
                         className={cn(
-                          'group/btn relative flex size-8 items-center justify-center rounded-full transition-[background-color] duration-200 ease-out',
+                          "group/btn relative flex size-8 items-center justify-center rounded-full transition-[background-color] duration-200 ease-out",
                           button.hoverBg,
-                          selectedFeedback === button.type && button.activeBg
+                          selectedFeedback === button.type && button.activeBg,
                         )}
                         initial="initial"
                         animate="animate"
@@ -113,7 +126,7 @@ export const MessageFeedback: FC<MessageFeedbackProps> = ({
                         transition={{
                           duration: 0.8,
                           delay: 0.75 + index * 0.15,
-                          type: 'spring',
+                          type: "spring",
                           stiffness: 150,
                           damping: 10,
                         }}
@@ -122,55 +135,55 @@ export const MessageFeedback: FC<MessageFeedbackProps> = ({
                         <span
                           className="flex"
                           style={{
-                            animation: 'none',
+                            animation: "none",
                           }}
                           onMouseEnter={(e) => {
                             e.currentTarget.style.animation =
-                              'subtle-bounce 0.6s ease-in-out infinite'
+                              "subtle-bounce 0.6s ease-in-out infinite";
                           }}
                           onMouseLeave={(e) => {
-                            e.currentTarget.style.animation = 'none'
+                            e.currentTarget.style.animation = "none";
                           }}
                         >
                           <Icon
                             className={cn(
-                              'size-5 transition-[fill] duration-200',
+                              "size-5 transition-[fill] duration-200",
                               button.color,
-                              button.type === 'like' &&
-                                'group-hover/btn:fill-emerald-500',
+                              button.type === "like" &&
+                                "group-hover/btn:fill-emerald-500",
                               selectedFeedback === button.type &&
-                                button.type === 'like' &&
-                                'fill-emerald-500'
+                                button.type === "like" &&
+                                "fill-emerald-500",
                             )}
                             strokeWidth={2}
                           />
                         </span>
                       </m.button>
                     </TooltipTrigger>
-                    <TooltipContent side="top" sideOffset={8}>
+                    <TooltipContent
+                      side="top"
+                      sideOffset={8}
+                      container={tooltipContainer}
+                    >
                       {button.label}
                     </TooltipContent>
                   </Tooltip>
-                )
+                );
               })}
             </TooltipProvider>
           </m.div>
         ) : (
           <m.div
             key="thank-you"
-            className="text-muted-foreground rounded-full border border-black/[0.08] bg-gradient-to-b from-white/80 to-white/60 px-4 py-2 text-sm shadow-lg backdrop-blur-2xl dark:border-white/[0.08] dark:from-white/15 dark:to-white/10"
+            className="aui-feedback-thank-you rounded-full border border-black/[0.08] bg-gradient-to-b from-white/80 to-white/60 px-4 py-2 text-sm text-muted-foreground backdrop-blur-2xl dark:border-white/5 dark:from-white/10 dark:to-white/[0.03]"
             initial={{ opacity: 0, y: 5 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.25, ease: EASE_OUT_QUINT }}
-            style={{
-              boxShadow:
-                '0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6)',
-            }}
           >
             Feedback received, thank you
           </m.div>
         )}
       </AnimatePresence>
     </div>
-  )
-}
+  );
+};

package/src/components/assistant-ui/reasoning.tsx

@@ -1,6 +1,6 @@
-'use client'
+"use client";
 
-import { BrainIcon, ChevronDownIcon } from 'lucide-react'
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
 import {
   memo,
   useCallback,
@@ -8,24 +8,24 @@ import {
   useState,
   type FC,
   type PropsWithChildren,
-} from 'react'
+} from "react";
 
 import {
   useAssistantState,
   useScrollLock,
   type ReasoningGroupComponent,
   type ReasoningMessagePartComponent,
-} from '@assistant-ui/react'
+} from "@assistant-ui/react";
 
-import { MarkdownText } from '@/components/assistant-ui/markdown-text'
+import { MarkdownText } from "@/components/assistant-ui/markdown-text";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/components/ui/collapsible'
-import { cn } from '@/lib/utils'
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
 
-const ANIMATION_DURATION = 200
+const ANIMATION_DURATION = 200;
 
 /**
  * Root collapsible container that manages open/closed state and scroll lock.
@@ -33,41 +33,41 @@ const ANIMATION_DURATION = 200
  */
 const ReasoningRoot: FC<
   PropsWithChildren<{
-    className?: string
+    className?: string;
   }>
 > = ({ className, children }) => {
-  const collapsibleRef = useRef<HTMLDivElement>(null)
-  const [isOpen, setIsOpen] = useState(false)
-  const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION)
+  const collapsibleRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
 
   const handleOpenChange = useCallback(
     (open: boolean) => {
       if (!open) {
-        lockScroll()
+        lockScroll();
       }
-      setIsOpen(open)
+      setIsOpen(open);
     },
-    [lockScroll]
-  )
+    [lockScroll],
+  );
 
   return (
     <Collapsible
       ref={collapsibleRef}
       open={isOpen}
       onOpenChange={handleOpenChange}
-      className={cn('aui-reasoning-root mb-4 w-full', className)}
+      className={cn("aui-reasoning-root mb-4 w-full", className)}
       style={
         {
-          '--animation-duration': `${ANIMATION_DURATION}ms`,
+          "--animation-duration": `${ANIMATION_DURATION}ms`,
         } as React.CSSProperties
       }
     >
       {children}
     </Collapsible>
-  )
-}
+  );
+};
 
-ReasoningRoot.displayName = 'ReasoningRoot'
+ReasoningRoot.displayName = "ReasoningRoot";
 
 /**
  * Gradient overlay that softens the bottom edge during expand/collapse animations.
@@ -76,19 +76,19 @@ ReasoningRoot.displayName = 'ReasoningRoot'
 const GradientFade: FC<{ className?: string }> = ({ className }) => (
   <div
     className={cn(
-      'aui-reasoning-fade pointer-events-none absolute inset-x-0 bottom-0 z-10 h-16',
-      'bg-[linear-gradient(to_top,var(--color-background),transparent)]',
-      'fade-in-0 animate-in',
-      'group-data-[state=open]/collapsible-content:animate-out',
-      'group-data-[state=open]/collapsible-content:fade-out-0',
-      'group-data-[state=open]/collapsible-content:delay-[calc(var(--animation-duration)*0.75)]', // calc for timing the delay
-      'group-data-[state=open]/collapsible-content:fill-mode-forwards',
-      'duration-(--animation-duration)',
-      'group-data-[state=open]/collapsible-content:duration-(--animation-duration)',
-      className
+      "aui-reasoning-fade pointer-events-none absolute inset-x-0 bottom-0 z-10 h-16",
+      "bg-[linear-gradient(to_top,var(--color-background),transparent)]",
+      "animate-in fade-in-0",
+      "group-data-[state=open]/collapsible-content:animate-out",
+      "group-data-[state=open]/collapsible-content:fade-out-0",
+      "group-data-[state=open]/collapsible-content:delay-[calc(var(--animation-duration)*0.75)]", // calc for timing the delay
+      "group-data-[state=open]/collapsible-content:fill-mode-forwards",
+      "duration-(--animation-duration)",
+      "group-data-[state=open]/collapsible-content:duration-(--animation-duration)",
+      className,
     )}
   />
-)
+);
 
 /**
  * Trigger button for the Reasoning collapsible.
@@ -100,9 +100,9 @@ const ReasoningTrigger: FC<{ active: boolean; className?: string }> = ({
 }) => (
   <CollapsibleTrigger
     className={cn(
-      'aui-reasoning-trigger group/trigger text-muted-foreground hover:text-foreground -mb-2 flex max-w-[75%] items-center gap-2 py-2 text-sm transition-colors',
+      "aui-reasoning-trigger group/trigger -mb-2 flex max-w-[75%] items-center gap-2 py-2 text-sm text-muted-foreground transition-colors hover:text-foreground",
       className,
-      active && 'shimmer'
+      active && "shimmer",
     )}
   >
     <BrainIcon className="aui-reasoning-trigger-icon size-4 shrink-0" />
@@ -111,7 +111,7 @@ const ReasoningTrigger: FC<{ active: boolean; className?: string }> = ({
       {active ? (
         <span
           aria-hidden
-          className="aui-reasoning-trigger-shimmer shimmer pointer-events-none absolute inset-0 motion-reduce:animate-none"
+          className="aui-reasoning-trigger-shimmer pointer-events-none absolute inset-0 shimmer motion-reduce:animate-none"
         >
           Reasoning
         </span>
@@ -119,14 +119,14 @@ const ReasoningTrigger: FC<{ active: boolean; className?: string }> = ({
     </span>
     <ChevronDownIcon
       className={cn(
-        'aui-reasoning-trigger-chevron mt-0.5 size-4 shrink-0',
-        'transition-transform duration-(--animation-duration) ease-out',
-        'group-data-[state=closed]/trigger:-rotate-90',
-        'group-data-[state=open]/trigger:rotate-0'
+        "aui-reasoning-trigger-chevron mt-0.5 size-4 shrink-0",
+        "transition-transform duration-(--animation-duration) ease-out",
+        "group-data-[state=closed]/trigger:-rotate-90",
+        "group-data-[state=open]/trigger:rotate-0",
       )}
     />
   </CollapsibleTrigger>
-)
+);
 
 /**
  * Collapsible content wrapper that handles height expand/collapse animation.
@@ -135,30 +135,30 @@ const ReasoningTrigger: FC<{ active: boolean; className?: string }> = ({
  */
 const ReasoningContent: FC<
   PropsWithChildren<{
-    className?: string
-    'aria-busy'?: boolean
+    className?: string;
+    "aria-busy"?: boolean;
   }>
-> = ({ className, children, 'aria-busy': ariaBusy }) => (
+> = ({ className, children, "aria-busy": ariaBusy }) => (
   <CollapsibleContent
     className={cn(
-      'aui-reasoning-content text-muted-foreground relative overflow-hidden text-sm outline-none',
-      'group/collapsible-content ease-out',
-      'data-[state=closed]:animate-collapsible-up',
-      'data-[state=open]:animate-collapsible-down',
-      'data-[state=closed]:fill-mode-forwards',
-      'data-[state=closed]:pointer-events-none',
-      'data-[state=open]:duration-(--animation-duration)',
-      'data-[state=closed]:duration-(--animation-duration)',
-      className
+      "aui-reasoning-content relative overflow-hidden text-sm text-muted-foreground outline-none",
+      "group/collapsible-content ease-out",
+      "data-[state=closed]:animate-collapsible-up",
+      "data-[state=open]:animate-collapsible-down",
+      "data-[state=closed]:fill-mode-forwards",
+      "data-[state=closed]:pointer-events-none",
+      "data-[state=open]:duration-(--animation-duration)",
+      "data-[state=closed]:duration-(--animation-duration)",
+      className,
     )}
     aria-busy={ariaBusy}
   >
     {children}
     <GradientFade />
   </CollapsibleContent>
-)
+);
 
-ReasoningContent.displayName = 'ReasoningContent'
+ReasoningContent.displayName = "ReasoningContent";
 
 /**
  * Text content wrapper that animates the reasoning text visibility.
@@ -167,30 +167,30 @@ ReasoningContent.displayName = 'ReasoningContent'
  */
 const ReasoningText: FC<
   PropsWithChildren<{
-    className?: string
+    className?: string;
   }>
 > = ({ className, children }) => (
   <div
     className={cn(
-      'aui-reasoning-text relative z-0 space-y-4 pt-4 pl-6 leading-relaxed',
-      'transform-gpu transition-[transform,opacity]',
-      'group-data-[state=open]/collapsible-content:animate-in',
-      'group-data-[state=closed]/collapsible-content:animate-out',
-      'group-data-[state=open]/collapsible-content:fade-in-0',
-      'group-data-[state=closed]/collapsible-content:fade-out-0',
-      'group-data-[state=open]/collapsible-content:slide-in-from-top-4',
-      'group-data-[state=closed]/collapsible-content:slide-out-to-top-4',
-      'group-data-[state=open]/collapsible-content:duration-(--animation-duration)',
-      'group-data-[state=closed]/collapsible-content:duration-(--animation-duration)',
-      '[&_p]:-mb-2',
-      className
+      "aui-reasoning-text relative z-0 space-y-4 pt-4 pl-6 leading-relaxed",
+      "transform-gpu transition-[transform,opacity]",
+      "group-data-[state=open]/collapsible-content:animate-in",
+      "group-data-[state=closed]/collapsible-content:animate-out",
+      "group-data-[state=open]/collapsible-content:fade-in-0",
+      "group-data-[state=closed]/collapsible-content:fade-out-0",
+      "group-data-[state=open]/collapsible-content:slide-in-from-top-4",
+      "group-data-[state=closed]/collapsible-content:slide-out-to-top-4",
+      "group-data-[state=open]/collapsible-content:duration-(--animation-duration)",
+      "group-data-[state=closed]/collapsible-content:duration-(--animation-duration)",
+      "[&_p]:-mb-2",
+      className,
     )}
   >
     {children}
   </div>
-)
+);
 
-ReasoningText.displayName = 'ReasoningText'
+ReasoningText.displayName = "ReasoningText";
 
 /**
  * Renders a single reasoning part's text with markdown support.
@@ -208,7 +208,7 @@ ReasoningText.displayName = 'ReasoningText'
  * />
  * ```
  */
-const ReasoningImpl: ReasoningMessagePartComponent = () => <MarkdownText />
+const ReasoningImpl: ReasoningMessagePartComponent = () => <MarkdownText />;
 
 /**
  * Collapsible wrapper that groups consecutive reasoning parts together.
@@ -235,13 +235,13 @@ const ReasoningGroupImpl: ReasoningGroupComponent = ({
    * Detects if reasoning is currently streaming within this group's range.
    */
   const isReasoningStreaming = useAssistantState(({ message }) => {
-    if (message.status?.type !== 'running') return false
-    const lastIndex = message.parts.length - 1
-    if (lastIndex < 0) return false
-    const lastType = message.parts[lastIndex]?.type
-    if (lastType !== 'reasoning') return false
-    return lastIndex >= startIndex && lastIndex <= endIndex
-  })
+    if (message.status?.type !== "running") return false;
+    const lastIndex = message.parts.length - 1;
+    if (lastIndex < 0) return false;
+    const lastType = message.parts[lastIndex]?.type;
+    if (lastType !== "reasoning") return false;
+    return lastIndex >= startIndex && lastIndex <= endIndex;
+  });
 
   return (
     <ReasoningRoot>
@@ -251,11 +251,11 @@ const ReasoningGroupImpl: ReasoningGroupComponent = ({
         <ReasoningText>{children}</ReasoningText>
       </ReasoningContent>
     </ReasoningRoot>
-  )
-}
+  );
+};
 
-export const Reasoning = memo(ReasoningImpl)
-Reasoning.displayName = 'Reasoning'
+export const Reasoning = memo(ReasoningImpl);
+Reasoning.displayName = "Reasoning";
 
-export const ReasoningGroup = memo(ReasoningGroupImpl)
-ReasoningGroup.displayName = 'ReasoningGroup'
+export const ReasoningGroup = memo(ReasoningGroupImpl);
+ReasoningGroup.displayName = "ReasoningGroup";