@gram-ai/elements 1.27.4 → 1.27.5

package/src/components/assistant-ui/follow-on-suggestions.tsx

@@ -1,14 +1,14 @@
-import { ThreadPrimitive } from '@assistant-ui/react'
-import { AnimatePresence } from 'motion/react'
-import * as m from 'motion/react-m'
-import { FC } from 'react'
+import { ThreadPrimitive } from "@assistant-ui/react";
+import { AnimatePresence } from "motion/react";
+import * as m from "motion/react-m";
+import { FC } from "react";
 
-import { Button } from '@/components/ui/button'
-import { useDensity } from '@/hooks/useDensity'
-import { useFollowOnSuggestions } from '@/hooks/useFollowOnSuggestions'
-import { useRadius } from '@/hooks/useRadius'
-import { EASE_OUT_QUINT } from '@/lib/easing'
-import { cn } from '@/lib/utils'
+import { Button } from "@/components/ui/button";
+import { useDensity } from "@/hooks/useDensity";
+import { useFollowOnSuggestions } from "@/hooks/useFollowOnSuggestions";
+import { useRadius } from "@/hooks/useRadius";
+import { EASE_OUT_QUINT } from "@/lib/easing";
+import { cn } from "@/lib/utils";
 
 const suggestionVariants = {
   hidden: {
@@ -35,7 +35,7 @@ const suggestionVariants = {
       ease: EASE_OUT_QUINT,
     },
   },
-}
+};
 
 const containerVariants = {
   hidden: { opacity: 0 },
@@ -53,26 +53,26 @@ const containerVariants = {
       staggerDirection: -1,
     },
   },
-}
+};
 
 /**
  * Displays follow-on suggestions after the assistant finishes responding.
  * These are dynamically generated based on the conversation context.
  */
 export const FollowOnSuggestions: FC = () => {
-  const { suggestions, isLoading } = useFollowOnSuggestions()
-  const r = useRadius()
-  const d = useDensity()
+  const { suggestions, isLoading } = useFollowOnSuggestions();
+  const r = useRadius();
+  const d = useDensity();
 
-  const showSuggestions = !isLoading && suggestions.length > 0
+  const showSuggestions = !isLoading && suggestions.length > 0;
 
   return (
     <div
       className={cn(
-        'aui-follow-on-suggestions w-full',
-        d('gap-sm'),
-        d('py-sm'),
-        d('px-md')
+        "aui-follow-on-suggestions w-full",
+        d("gap-sm"),
+        d("py-sm"),
+        d("px-md"),
       )}
     >
       <AnimatePresence mode="wait">
@@ -103,10 +103,10 @@ export const FollowOnSuggestions: FC = () => {
                     variant="outline"
                     size="sm"
                     className={cn(
-                      'aui-follow-on-suggestion text-muted-foreground hover:text-foreground h-auto cursor-pointer text-left text-sm whitespace-normal transition-colors',
-                      d('px-md'),
-                      d('py-sm'),
-                      r('lg')
+                      "aui-follow-on-suggestion h-auto cursor-pointer text-left text-sm whitespace-normal text-muted-foreground transition-colors hover:text-foreground",
+                      d("px-md"),
+                      d("py-sm"),
+                      r("lg"),
                     )}
                   >
                     {suggestion.prompt}
@@ -118,5 +118,5 @@ export const FollowOnSuggestions: FC = () => {
         )}
       </AnimatePresence>
     </div>
-  )
-}
+  );
+};

package/src/components/assistant-ui/markdown-text.tsx

@@ -1,24 +1,24 @@
-'use client'
+"use client";
 
 import {
   type CodeHeaderProps,
   MarkdownTextPrimitive,
   unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
   useIsMarkdownCodeBlock,
-} from '@assistant-ui/react-markdown'
-import { CheckIcon, CopyIcon } from 'lucide-react'
-import { type FC, memo, useState } from 'react'
-import remarkGfm from 'remark-gfm'
+} from "@assistant-ui/react-markdown";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { type FC, memo, useState } from "react";
+import remarkGfm from "remark-gfm";
 
-import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button'
-import { cn } from '@/lib/utils'
-import { useElements } from '@/hooks/useElements'
-import { useComponentsByLanguage } from '@/hooks/usePluginComponents'
-import { useAssistantState } from '@assistant-ui/react'
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { cn } from "@/lib/utils";
+import { useElements } from "@/hooks/useElements";
+import { useComponentsByLanguage } from "@/hooks/usePluginComponents";
+import { useAssistantState } from "@assistant-ui/react";
 
 const MarkdownTextImpl = () => {
-  const { plugins } = useElements()
-  const componentsByLanguage = useComponentsByLanguage(plugins)
+  const { plugins } = useElements();
+  const componentsByLanguage = useComponentsByLanguage(plugins);
 
   return (
     <MarkdownTextPrimitive
@@ -27,22 +27,22 @@ const MarkdownTextImpl = () => {
       components={defaultComponents}
       componentsByLanguage={componentsByLanguage}
     />
-  )
-}
+  );
+};
 
-export const MarkdownText = memo(MarkdownTextImpl)
+export const MarkdownText = memo(MarkdownTextImpl);
 
 const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
-  const message = useAssistantState(({ message }) => message)
-  const messageIsComplete = message.status?.type === 'complete'
-  const { isCopied, copyToClipboard } = useCopyToClipboard()
+  const message = useAssistantState(({ message }) => message);
+  const messageIsComplete = message.status?.type === "complete";
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
   const onCopy = () => {
-    if (!code || isCopied) return
-    copyToClipboard(code)
-  }
+    if (!code || isCopied) return;
+    copyToClipboard(code);
+  };
 
   return (
-    <div className="aui-code-header-root bg-muted-foreground/15 text-foreground dark:bg-muted-foreground/20 mt-4 flex items-center justify-between gap-4 rounded-t-lg px-4 py-2 text-sm font-semibold">
+    <div className="aui-code-header-root mt-4 flex items-center justify-between gap-4 rounded-t-lg bg-muted-foreground/15 px-4 py-2 text-sm font-semibold text-foreground dark:bg-muted-foreground/20">
       <span className="aui-code-header-language lowercase [&>span]:text-xs">
         {language}
       </span>
@@ -53,34 +53,34 @@ const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
         </TooltipIconButton>
       )}
     </div>
-  )
-}
+  );
+};
 
 const useCopyToClipboard = ({
   copiedDuration = 3000,
 }: {
-  copiedDuration?: number
+  copiedDuration?: number;
 } = {}) => {
-  const [isCopied, setIsCopied] = useState<boolean>(false)
+  const [isCopied, setIsCopied] = useState<boolean>(false);
 
   const copyToClipboard = (value: string) => {
-    if (!value) return
+    if (!value) return;
 
     navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true)
-      setTimeout(() => setIsCopied(false), copiedDuration)
-    })
-  }
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), copiedDuration);
+    });
+  };
 
-  return { isCopied, copyToClipboard }
-}
+  return { isCopied, copyToClipboard };
+};
 
 const defaultComponents = memoizeMarkdownComponents({
   h1: ({ className, ...props }) => (
     <h1
       className={cn(
-        'aui-md-h1 mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0',
-        className
+        "aui-md-h1 mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
+        className,
       )}
       {...props}
     />
@@ -88,8 +88,8 @@ const defaultComponents = memoizeMarkdownComponents({
   h2: ({ className, ...props }) => (
     <h2
       className={cn(
-        'aui-md-h2 mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0',
-        className
+        "aui-md-h2 mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        className,
       )}
       {...props}
     />
@@ -97,8 +97,8 @@ const defaultComponents = memoizeMarkdownComponents({
   h3: ({ className, ...props }) => (
     <h3
       className={cn(
-        'aui-md-h3 mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0',
-        className
+        "aui-md-h3 mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        className,
       )}
       {...props}
     />
@@ -106,8 +106,8 @@ const defaultComponents = memoizeMarkdownComponents({
   h4: ({ className, ...props }) => (
     <h4
       className={cn(
-        'aui-md-h4 mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0',
-        className
+        "aui-md-h4 mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        className,
       )}
       {...props}
     />
@@ -115,8 +115,8 @@ const defaultComponents = memoizeMarkdownComponents({
   h5: ({ className, ...props }) => (
     <h5
       className={cn(
-        'aui-md-h5 my-4 text-lg font-semibold first:mt-0 last:mb-0',
-        className
+        "aui-md-h5 my-4 text-lg font-semibold first:mt-0 last:mb-0",
+        className,
       )}
       {...props}
     />
@@ -124,8 +124,8 @@ const defaultComponents = memoizeMarkdownComponents({
   h6: ({ className, ...props }) => (
     <h6
       className={cn(
-        'aui-md-h6 my-4 font-semibold first:mt-0 last:mb-0',
-        className
+        "aui-md-h6 my-4 font-semibold first:mt-0 last:mb-0",
+        className,
       )}
       {...props}
     />
@@ -133,8 +133,8 @@ const defaultComponents = memoizeMarkdownComponents({
   p: ({ className, ...props }) => (
     <p
       className={cn(
-        'aui-md-p mt-5 mb-5 leading-7 first:mt-0 last:mb-0',
-        className
+        "aui-md-p mt-5 mb-5 leading-7 first:mt-0 last:mb-0",
+        className,
       )}
       {...props}
     />
@@ -142,38 +142,38 @@ const defaultComponents = memoizeMarkdownComponents({
   a: ({ className, ...props }) => (
     <a
       className={cn(
-        'aui-md-a text-primary font-medium underline underline-offset-4',
-        className
+        "aui-md-a font-medium text-primary underline underline-offset-4",
+        className,
       )}
       {...props}
     />
   ),
   blockquote: ({ className, ...props }) => (
     <blockquote
-      className={cn('aui-md-blockquote border-l-2 pl-6 italic', className)}
+      className={cn("aui-md-blockquote border-l-2 pl-6 italic", className)}
       {...props}
     />
   ),
   ul: ({ className, ...props }) => (
     <ul
-      className={cn('aui-md-ul my-5 ml-6 list-disc [&>li]:mt-2', className)}
+      className={cn("aui-md-ul my-5 ml-6 list-disc [&>li]:mt-2", className)}
       {...props}
     />
   ),
   ol: ({ className, ...props }) => (
     <ol
-      className={cn('aui-md-ol my-5 ml-6 list-decimal [&>li]:mt-2', className)}
+      className={cn("aui-md-ol my-5 ml-6 list-decimal [&>li]:mt-2", className)}
       {...props}
     />
   ),
   hr: ({ className, ...props }) => (
-    <hr className={cn('aui-md-hr my-5 border-b', className)} {...props} />
+    <hr className={cn("aui-md-hr my-5 border-b", className)} {...props} />
   ),
   table: ({ className, ...props }) => (
     <table
       className={cn(
-        'aui-md-table my-5 w-full border-separate border-spacing-0 overflow-y-auto',
-        className
+        "aui-md-table my-5 w-full border-separate border-spacing-0 overflow-y-auto",
+        className,
       )}
       {...props}
     />
@@ -181,8 +181,8 @@ const defaultComponents = memoizeMarkdownComponents({
   th: ({ className, ...props }) => (
     <th
       className={cn(
-        'aui-md-th bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [[align=center]]:text-center [[align=right]]:text-right',
-        className
+        "aui-md-th bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [[align=center]]:text-center [[align=right]]:text-right",
+        className,
       )}
       {...props}
     />
@@ -190,8 +190,8 @@ const defaultComponents = memoizeMarkdownComponents({
   td: ({ className, ...props }) => (
     <td
       className={cn(
-        'aui-md-td border-b border-l px-4 py-2 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right',
-        className
+        "aui-md-td border-b border-l px-4 py-2 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right",
+        className,
       )}
       {...props}
     />
@@ -199,39 +199,39 @@ const defaultComponents = memoizeMarkdownComponents({
   tr: ({ className, ...props }) => (
     <tr
       className={cn(
-        'aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg',
-        className
+        "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
+        className,
       )}
       {...props}
     />
   ),
   sup: ({ className, ...props }) => (
     <sup
-      className={cn('aui-md-sup [&>a]:text-xs [&>a]:no-underline', className)}
+      className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)}
       {...props}
     />
   ),
   pre: ({ className, ...props }) => (
     <pre
       className={cn(
-        'aui-md-pre text-foreground bg-muted overflow-x-auto rounded-t-none! rounded-b-lg border border-t-0 p-4',
-        className
+        "aui-md-pre overflow-x-auto rounded-t-none! rounded-b-lg border border-t-0 bg-muted p-4 text-foreground",
+        className,
       )}
       {...props}
     />
   ),
   code: function Code({ className, ...props }) {
-    const isCodeBlock = useIsMarkdownCodeBlock()
+    const isCodeBlock = useIsMarkdownCodeBlock();
     return (
       <code
         className={cn(
           !isCodeBlock &&
-            'aui-md-inline-code bg-muted rounded border font-semibold',
-          className
+            "aui-md-inline-code rounded border bg-muted font-semibold",
+          className,
         )}
         {...props}
       />
-    )
+    );
   },
   CodeHeader,
-})
+});

package/src/components/assistant-ui/mentioned-tools-badges.tsx

@@ -1,19 +1,19 @@
-import { FC } from 'react'
-import { Wrench, X } from 'lucide-react'
-import { AnimatePresence } from 'motion/react'
-import * as m from 'motion/react-m'
+import { FC } from "react";
+import { Wrench, X } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import * as m from "motion/react-m";
 
-import { cn } from '@/lib/utils'
-import { useDensity } from '@/hooks/useDensity'
-import { useRadius } from '@/hooks/useRadius'
-import { EASE_OUT_QUINT } from '@/lib/easing'
-import { MentionableTool } from '@/lib/tool-mentions'
+import { cn } from "@/lib/utils";
+import { useDensity } from "@/hooks/useDensity";
+import { useRadius } from "@/hooks/useRadius";
+import { EASE_OUT_QUINT } from "@/lib/easing";
+import { MentionableTool } from "@/lib/tool-mentions";
 
 export interface MentionedToolsBadgesProps {
-  mentionedToolIds: string[]
-  tools: MentionableTool[]
-  onRemove?: (toolId: string) => void
-  className?: string
+  mentionedToolIds: string[];
+  tools: MentionableTool[];
+  onRemove?: (toolId: string) => void;
+  className?: string;
 }
 
 export const MentionedToolsBadges: FC<MentionedToolsBadgesProps> = ({
@@ -22,25 +22,25 @@ export const MentionedToolsBadges: FC<MentionedToolsBadgesProps> = ({
   onRemove,
   className,
 }) => {
-  const d = useDensity()
+  const d = useDensity();
   const mentionedTools = tools.filter((tool) =>
-    mentionedToolIds.includes(tool.id)
-  )
+    mentionedToolIds.includes(tool.id),
+  );
 
   if (mentionedTools.length === 0) {
-    return null
+    return null;
   }
 
   return (
     <div
       className={cn(
-        'aui-mentioned-tools-badges flex flex-wrap items-center gap-1',
-        d('px-sm'),
-        d('py-xs'),
-        className
+        "aui-mentioned-tools-badges flex flex-wrap items-center gap-1",
+        d("px-sm"),
+        d("py-xs"),
+        className,
       )}
     >
-      <span className="text-muted-foreground flex-shrink-0 text-xs">
+      <span className="flex-shrink-0 text-xs text-muted-foreground">
         Tools:
       </span>
       <AnimatePresence mode="popLayout">
@@ -61,25 +61,25 @@ export const MentionedToolsBadges: FC<MentionedToolsBadgesProps> = ({
         ))}
       </AnimatePresence>
     </div>
-  )
-}
+  );
+};
 
 interface ToolBadgeProps {
-  tool: MentionableTool
-  onRemove?: () => void
+  tool: MentionableTool;
+  onRemove?: () => void;
 }
 
 const ToolBadge: FC<ToolBadgeProps> = ({ tool, onRemove }) => {
-  const d = useDensity()
-  const r = useRadius()
+  const d = useDensity();
+  const r = useRadius();
 
   return (
     <div
       className={cn(
-        'aui-tool-badge bg-primary/10 text-primary inline-flex items-center gap-1',
-        r('md'),
-        d('px-sm'),
-        d('py-xs')
+        "aui-tool-badge inline-flex items-center gap-1 bg-primary/10 text-primary",
+        r("md"),
+        d("px-sm"),
+        d("py-xs"),
       )}
     >
       <Wrench className="size-3 flex-shrink-0" />
@@ -88,9 +88,9 @@ const ToolBadge: FC<ToolBadgeProps> = ({ tool, onRemove }) => {
         <button
           type="button"
           onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            onRemove()
+            e.preventDefault();
+            e.stopPropagation();
+            onRemove();
           }}
           className="hover:opacity-70 focus:outline-none"
           aria-label={`Remove ${tool.name}`}
@@ -99,7 +99,7 @@ const ToolBadge: FC<ToolBadgeProps> = ({ tool, onRemove }) => {
         </button>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default MentionedToolsBadges
+export default MentionedToolsBadges;