@gram-ai/elements 1.27.4 → 1.27.6

package/src/components/assistant-ui/tool-fallback.tsx

@@ -1,14 +1,14 @@
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 import {
   useAssistantState,
   type ToolCallMessagePartComponent,
-} from '@assistant-ui/react'
-import { useToolApproval } from '@/hooks/useToolApproval'
+} from "@assistant-ui/react";
+import { useToolApproval } from "@/hooks/useToolApproval";
 import {
   ToolUI,
   type ToolStatus,
   type ContentItem,
-} from '@/components/ui/tool-ui'
+} from "@/components/ui/tool-ui";
 
 export const ToolFallback: ToolCallMessagePartComponent = ({
   toolName,
@@ -22,47 +22,47 @@ export const ToolFallback: ToolCallMessagePartComponent = ({
     whitelistTool,
     confirmPendingApproval,
     rejectPendingApproval,
-  } = useToolApproval()
+  } = useToolApproval();
 
   // Check if this specific tool call has a pending approval
-  const pendingApproval = pendingApprovals.get(toolCallId)
-  const message = useAssistantState(({ message }) => message)
-  const toolParts = message.parts.filter((part) => part.type === 'tool-call')
+  const pendingApproval = pendingApprovals.get(toolCallId);
+  const message = useAssistantState(({ message }) => message);
+  const toolParts = message.parts.filter((part) => part.type === "tool-call");
   const matchingMessagePartIndex = toolParts.findIndex(
-    (part) => part.toolCallId === toolCallId
-  )
+    (part) => part.toolCallId === toolCallId,
+  );
 
   const handleApproveOnce = () => {
-    confirmPendingApproval(toolCallId)
-  }
+    confirmPendingApproval(toolCallId);
+  };
 
   const handleApproveForSession = () => {
-    whitelistTool(toolName)
-    confirmPendingApproval(toolCallId)
-  }
+    whitelistTool(toolName);
+    confirmPendingApproval(toolCallId);
+  };
 
   const handleDeny = () => {
-    rejectPendingApproval(toolCallId)
-  }
+    rejectPendingApproval(toolCallId);
+  };
 
   // Map assistant-ui status to ToolUI status
   const getToolStatus = (): ToolStatus => {
-    if (pendingApproval) return 'approval'
-    if (status.type === 'incomplete') return 'error'
-    if (status.type === 'complete') {
+    if (pendingApproval) return "approval";
+    if (status.type === "incomplete") return "error";
+    if (status.type === "complete") {
       // Check if the result indicates an error (e.g., tool was denied)
       if (
         result &&
-        typeof result === 'object' &&
-        'isError' in result &&
+        typeof result === "object" &&
+        "isError" in result &&
         result.isError
       ) {
-        return 'error'
+        return "error";
       }
-      return 'complete'
+      return "complete";
     }
-    return 'running'
-  }
+    return "running";
+  };
 
   // Parse result to structured content if possible
   const getResult = ():
@@ -70,28 +70,28 @@ export const ToolFallback: ToolCallMessagePartComponent = ({
     | Record<string, unknown>
     | { content: ContentItem[] }
     | undefined => {
-    if (result === undefined) return undefined
+    if (result === undefined) return undefined;
     // Check if it's structured content with a content array
     if (
-      typeof result === 'object' &&
+      typeof result === "object" &&
       result !== null &&
-      'content' in result &&
+      "content" in result &&
       Array.isArray((result as { content: unknown }).content)
     ) {
-      return result as { content: ContentItem[] }
+      return result as { content: ContentItem[] };
     }
     // Otherwise return as-is (string or object)
-    if (typeof result === 'string') return result
-    return result as Record<string, unknown>
-  }
+    if (typeof result === "string") return result;
+    return result as Record<string, unknown>;
+  };
 
   return (
     <div
       className={cn(
-        'aui-tool-fallback-root flex w-full flex-col',
+        "aui-tool-fallback-root flex w-full flex-col",
         matchingMessagePartIndex !== -1 &&
           matchingMessagePartIndex !== toolParts.length - 1 &&
-          'border-b'
+          "border-b",
       )}
     >
       <ToolUI
@@ -107,5 +107,5 @@ export const ToolFallback: ToolCallMessagePartComponent = ({
         className="rounded-none border-0"
       />
     </div>
-  )
-}
+  );
+};

package/src/components/assistant-ui/tool-group.tsx

@@ -1,9 +1,9 @@
-import { cn } from '@/lib/utils'
-import { useAssistantState } from '@assistant-ui/react'
-import { useMemo, type FC, type PropsWithChildren } from 'react'
-import { useElements } from '@/hooks/useElements'
-import { humanizeToolName } from '@/lib/humanize'
-import { ToolUIGroup } from '@/components/ui/tool-ui'
+import { cn } from "@/lib/utils";
+import { useAssistantState } from "@assistant-ui/react";
+import { useMemo, type FC, type PropsWithChildren } from "react";
+import { useElements } from "@/hooks/useElements";
+import { humanizeToolName } from "@/lib/humanize";
+import { ToolUIGroup } from "@/components/ui/tool-ui";
 
 export const ToolGroup: FC<
   PropsWithChildren<{ startIndex: number; endIndex: number }>
@@ -11,48 +11,48 @@ export const ToolGroup: FC<
   // startIndex/endIndex are inclusive indices into message.parts.
   // assistant-ui only groups consecutive tool-call parts, so every part
   // in the range is a tool-call — the count is simply the range size.
-  const toolCount = endIndex - startIndex + 1
+  const toolCount = endIndex - startIndex + 1;
 
   const firstToolName = useAssistantState(({ message }) => {
-    const part = message.parts[startIndex]
-    return part?.type === 'tool-call' ? part.toolName : undefined
-  })
+    const part = message.parts[startIndex];
+    return part?.type === "tool-call" ? part.toolName : undefined;
+  });
   const anyMessagePartsAreRunning = useAssistantState(({ message }) => {
     for (let i = startIndex; i <= endIndex; i++) {
-      if (message.parts[i]?.status?.type === 'running') return true
+      if (message.parts[i]?.status?.type === "running") return true;
     }
-    return false
-  })
+    return false;
+  });
 
-  const { config } = useElements()
-  const defaultExpanded = config.tools?.expandToolGroupsByDefault ?? false
+  const { config } = useElements();
+  const defaultExpanded = config.tools?.expandToolGroupsByDefault ?? false;
 
   const groupTitle = useMemo(() => {
-    if (toolCount === 0) return 'No tools called'
+    if (toolCount === 0) return "No tools called";
     if (toolCount === 1) {
       return firstToolName
         ? `Calling ${humanizeToolName(firstToolName)}...`
-        : 'Calling tool...'
+        : "Calling tool...";
     }
     return anyMessagePartsAreRunning
       ? `Calling ${toolCount} tools...`
-      : `Executed ${toolCount} tools`
-  }, [toolCount, firstToolName, anyMessagePartsAreRunning])
+      : `Executed ${toolCount} tools`;
+  }, [toolCount, firstToolName, anyMessagePartsAreRunning]);
 
   // If there's a custom component for the single tool, render children directly
   if (firstToolName && config.tools?.components?.[firstToolName]) {
-    return children
+    return children;
   }
 
   // For single tool calls, render without the group wrapper
   if (toolCount === 1) {
     return (
-      <div className={cn('my-4 w-full max-w-xl')}>
-        <div className="border-border bg-card overflow-hidden rounded-lg border">
+      <div className={cn("my-4 w-full max-w-xl")}>
+        <div className="overflow-hidden rounded-lg border border-border bg-card">
           {children}
         </div>
       </div>
-    )
+    );
   }
 
   // For multiple tool calls, use the group component
@@ -60,11 +60,11 @@ export const ToolGroup: FC<
     <div className="my-4 w-full max-w-xl">
       <ToolUIGroup
         title={groupTitle}
-        status={anyMessagePartsAreRunning ? 'running' : 'complete'}
+        status={anyMessagePartsAreRunning ? "running" : "complete"}
         defaultExpanded={defaultExpanded}
       >
         {children}
       </ToolUIGroup>
     </div>
-  )
-}
+  );
+};

package/src/components/assistant-ui/tool-mention-autocomplete.tsx

@@ -1,25 +1,25 @@
-import { FC, useCallback, useEffect, useRef, useState } from 'react'
-import { Wrench } from 'lucide-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 { FC, useCallback, useEffect, useRef, useState } from "react";
+import { Wrench } from "lucide-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,
   detectMentionContext,
   filterToolsByQuery,
   insertToolMention,
-} from '@/lib/tool-mentions'
+} from "@/lib/tool-mentions";
 
 export interface ToolMentionAutocompleteProps {
-  tools: MentionableTool[]
-  value: string
-  cursorPosition: number
-  onValueChange: (value: string, cursorPosition: number) => void
-  textareaRef: React.RefObject<HTMLTextAreaElement | null>
-  className?: string
+  tools: MentionableTool[];
+  value: string;
+  cursorPosition: number;
+  onValueChange: (value: string, cursorPosition: number) => void;
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+  className?: string;
 }
 
 export const ToolMentionAutocomplete: FC<ToolMentionAutocompleteProps> = ({
@@ -30,112 +30,112 @@ export const ToolMentionAutocomplete: FC<ToolMentionAutocompleteProps> = ({
   textareaRef,
   className,
 }) => {
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const [isVisible, setIsVisible] = useState(false)
-  const [filteredTools, setFilteredTools] = useState<MentionableTool[]>([])
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
+  const [filteredTools, setFilteredTools] = useState<MentionableTool[]>([]);
   const [mentionContext, setMentionContext] = useState<{
-    atPosition: number
-    query: string
-  } | null>(null)
+    atPosition: number;
+    query: string;
+  } | null>(null);
 
-  const containerRef = useRef<HTMLDivElement>(null)
-  const d = useDensity()
-  const r = useRadius()
+  const containerRef = useRef<HTMLDivElement>(null);
+  const d = useDensity();
+  const r = useRadius();
 
   useEffect(() => {
-    const context = detectMentionContext(value, cursorPosition)
+    const context = detectMentionContext(value, cursorPosition);
 
     if (context.isInMention && tools.length > 0) {
-      const filtered = filterToolsByQuery(tools, context.query)
-      setFilteredTools(filtered)
-      setIsVisible(filtered.length > 0)
+      const filtered = filterToolsByQuery(tools, context.query);
+      setFilteredTools(filtered);
+      setIsVisible(filtered.length > 0);
       setMentionContext({
         atPosition: context.atPosition,
         query: context.query,
-      })
-      setSelectedIndex(0)
+      });
+      setSelectedIndex(0);
     } else {
-      setIsVisible(false)
-      setMentionContext(null)
+      setIsVisible(false);
+      setMentionContext(null);
     }
-  }, [value, cursorPosition, tools])
+  }, [value, cursorPosition, tools]);
 
   const selectTool = useCallback(
     (tool: MentionableTool) => {
-      if (!mentionContext) return
+      if (!mentionContext) return;
 
       const result = insertToolMention(
         value,
         tool.name,
         mentionContext.atPosition,
-        cursorPosition
-      )
+        cursorPosition,
+      );
 
-      onValueChange(result.text, result.cursorPosition)
-      setIsVisible(false)
+      onValueChange(result.text, result.cursorPosition);
+      setIsVisible(false);
     },
-    [mentionContext, value, cursorPosition, onValueChange, textareaRef]
-  )
+    [mentionContext, value, cursorPosition, onValueChange, textareaRef],
+  );
 
   useEffect(() => {
-    if (!isVisible) return
+    if (!isVisible) return;
 
     const handleKeyDown = (e: KeyboardEvent) => {
       switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault()
-          e.stopPropagation()
-          setSelectedIndex((prev) => (prev + 1) % filteredTools.length)
-          break
-        case 'ArrowUp':
-          e.preventDefault()
-          e.stopPropagation()
+        case "ArrowDown":
+          e.preventDefault();
+          e.stopPropagation();
+          setSelectedIndex((prev) => (prev + 1) % filteredTools.length);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          e.stopPropagation();
           setSelectedIndex(
-            (prev) => (prev - 1 + filteredTools.length) % filteredTools.length
-          )
-          break
-        case 'Enter':
-        case 'Tab':
-          e.preventDefault()
-          e.stopPropagation()
+            (prev) => (prev - 1 + filteredTools.length) % filteredTools.length,
+          );
+          break;
+        case "Enter":
+        case "Tab":
+          e.preventDefault();
+          e.stopPropagation();
           if (filteredTools[selectedIndex]) {
-            selectTool(filteredTools[selectedIndex])
+            selectTool(filteredTools[selectedIndex]);
           }
-          break
-        case 'Escape':
-          e.preventDefault()
-          e.stopPropagation()
-          setIsVisible(false)
-          break
+          break;
+        case "Escape":
+          e.preventDefault();
+          e.stopPropagation();
+          setIsVisible(false);
+          break;
       }
-    }
+    };
 
-    const textarea = textareaRef.current
+    const textarea = textareaRef.current;
     if (textarea) {
-      textarea.addEventListener('keydown', handleKeyDown, { capture: true })
+      textarea.addEventListener("keydown", handleKeyDown, { capture: true });
       return () =>
-        textarea.removeEventListener('keydown', handleKeyDown, {
+        textarea.removeEventListener("keydown", handleKeyDown, {
           capture: true,
-        })
+        });
     }
-  }, [isVisible, filteredTools, selectedIndex, selectTool, textareaRef])
+  }, [isVisible, filteredTools, selectedIndex, selectTool, textareaRef]);
 
   // Scroll selected item into view
   useEffect(() => {
-    if (!isVisible) return
-    const container = containerRef.current
-    if (!container) return
+    if (!isVisible) return;
+    const container = containerRef.current;
+    if (!container) return;
 
     const selectedItem = container.querySelector(
-      `[data-index="${selectedIndex}"]`
-    ) as HTMLElement
+      `[data-index="${selectedIndex}"]`,
+    ) as HTMLElement;
     if (selectedItem) {
-      selectedItem.scrollIntoView({ block: 'nearest' })
+      selectedItem.scrollIntoView({ block: "nearest" });
     }
-  }, [selectedIndex, isVisible])
+  }, [selectedIndex, isVisible]);
 
   useEffect(() => {
-    if (!isVisible) return
+    if (!isVisible) return;
 
     const handleClickOutside = (e: MouseEvent) => {
       if (
@@ -144,62 +144,62 @@ export const ToolMentionAutocomplete: FC<ToolMentionAutocompleteProps> = ({
         textareaRef.current &&
         !textareaRef.current.contains(e.target as Node)
       ) {
-        setIsVisible(false)
+        setIsVisible(false);
       }
-    }
+    };
 
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [isVisible, textareaRef])
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isVisible, textareaRef]);
 
   // When autocomplete is visible, modify composer styles and position autocomplete to match composer width
   useEffect(() => {
-    const textarea = textareaRef.current
-    if (!textarea) return
+    const textarea = textareaRef.current;
+    if (!textarea) return;
 
-    const composer = textarea.closest('.aui-composer-root') as HTMLElement
-    if (!composer) return
+    const composer = textarea.closest(".aui-composer-root") as HTMLElement;
+    if (!composer) return;
 
     const updateStyles = () => {
-      const autocomplete = containerRef.current
-      if (!autocomplete) return
+      const autocomplete = containerRef.current;
+      if (!autocomplete) return;
 
       if (isVisible) {
         // Modify composer to connect with autocomplete
-        composer.style.borderTopColor = 'var(--ring)'
-        composer.style.borderTopLeftRadius = '0'
-        composer.style.borderTopRightRadius = '0'
+        composer.style.borderTopColor = "var(--ring)";
+        composer.style.borderTopLeftRadius = "0";
+        composer.style.borderTopRightRadius = "0";
 
         // Position autocomplete to match composer width
-        const composerRect = composer.getBoundingClientRect()
-        const autocompleteParent = autocomplete.offsetParent as HTMLElement
+        const composerRect = composer.getBoundingClientRect();
+        const autocompleteParent = autocomplete.offsetParent as HTMLElement;
         if (autocompleteParent) {
-          const parentRect = autocompleteParent.getBoundingClientRect()
-          autocomplete.style.left = `${composerRect.left - parentRect.left}px`
-          autocomplete.style.right = 'auto'
-          autocomplete.style.width = `${composerRect.width}px`
+          const parentRect = autocompleteParent.getBoundingClientRect();
+          autocomplete.style.left = `${composerRect.left - parentRect.left}px`;
+          autocomplete.style.right = "auto";
+          autocomplete.style.width = `${composerRect.width}px`;
         }
       }
-    }
+    };
 
     if (isVisible) {
       // Use requestAnimationFrame to ensure DOM is updated
-      requestAnimationFrame(updateStyles)
+      requestAnimationFrame(updateStyles);
     } else {
-      composer.style.borderTopColor = ''
-      composer.style.borderTopLeftRadius = ''
-      composer.style.borderTopRightRadius = ''
+      composer.style.borderTopColor = "";
+      composer.style.borderTopLeftRadius = "";
+      composer.style.borderTopRightRadius = "";
     }
 
     return () => {
-      composer.style.borderTopColor = ''
-      composer.style.borderTopLeftRadius = ''
-      composer.style.borderTopRightRadius = ''
-    }
-  }, [isVisible, textareaRef])
+      composer.style.borderTopColor = "";
+      composer.style.borderTopLeftRadius = "";
+      composer.style.borderTopRightRadius = "";
+    };
+  }, [isVisible, textareaRef]);
 
   if (!isVisible || filteredTools.length === 0) {
-    return null
+    return null;
   }
 
   return (
@@ -210,9 +210,9 @@ export const ToolMentionAutocomplete: FC<ToolMentionAutocompleteProps> = ({
       exit={{ opacity: 0, y: 8 }}
       transition={{ duration: 0.15, ease: EASE_OUT_QUINT }}
       className={cn(
-        'aui-tool-mention-autocomplete border-ring bg-background absolute bottom-full z-50 max-h-[220px] overflow-clip overflow-y-auto overscroll-contain rounded-br-none! rounded-bl-none! border border-b-0 shadow-xs',
-        r('xl'),
-        className
+        "aui-tool-mention-autocomplete absolute bottom-full z-50 max-h-[220px] overflow-clip overflow-y-auto overscroll-contain rounded-br-none! rounded-bl-none! border border-b-0 border-ring bg-background shadow-xs",
+        r("xl"),
+        className,
       )}
     >
       <div className="flex flex-col gap-1">
@@ -222,15 +222,15 @@ export const ToolMentionAutocomplete: FC<ToolMentionAutocompleteProps> = ({
             type="button"
             data-index={index}
             className={cn(
-              'aui-tool-mention-item flex w-full items-center gap-2 text-left transition-colors',
-              d('p-sm'),
-              'hover:bg-accent hover:text-accent-foreground',
-              index === selectedIndex && 'bg-accent text-accent-foreground'
+              "aui-tool-mention-item flex w-full items-center gap-2 text-left transition-colors",
+              d("p-sm"),
+              "hover:bg-accent hover:text-accent-foreground",
+              index === selectedIndex && "bg-accent text-accent-foreground",
             )}
             onClick={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              selectTool(tool)
+              e.preventDefault();
+              e.stopPropagation();
+              selectTool(tool);
             }}
             onMouseEnter={() => setSelectedIndex(index)}
           >
@@ -238,7 +238,7 @@ export const ToolMentionAutocomplete: FC<ToolMentionAutocompleteProps> = ({
             <div className="min-w-0 flex-1">
               <div className="text-sm font-medium">{tool.name}</div>
               {tool.description && (
-                <div className="text-muted-foreground line-clamp-2 text-xs">
+                <div className="line-clamp-2 text-xs text-muted-foreground">
                   {tool.description}
                 </div>
               )}
@@ -247,7 +247,7 @@ export const ToolMentionAutocomplete: FC<ToolMentionAutocompleteProps> = ({
         ))}
       </div>
     </m.div>
-  )
-}
+  );
+};
 
-export default ToolMentionAutocomplete
+export default ToolMentionAutocomplete;

package/src/components/assistant-ui/tooltip-icon-button.tsx

@@ -1,21 +1,21 @@
-'use client'
+"use client";
 
-import { ComponentPropsWithRef, forwardRef } from 'react'
-import { Slottable } from '@radix-ui/react-slot'
+import { ComponentPropsWithRef, forwardRef } from "react";
+import { Slottable } from "@radix-ui/react-slot";
 
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
+} from "@/components/ui/tooltip";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
-  tooltip: string
-  side?: 'top' | 'bottom' | 'left' | 'right'
-  align?: 'start' | 'center' | 'end'
-}
+  tooltip: string;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+};
 
 export const TooltipIconButton = forwardRef<
   HTMLButtonElement,
@@ -25,12 +25,12 @@ export const TooltipIconButton = forwardRef<
     {
       children,
       tooltip,
-      side = 'bottom',
-      align = 'center',
+      side = "bottom",
+      align = "center",
       className,
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <Tooltip>
@@ -39,7 +39,7 @@ export const TooltipIconButton = forwardRef<
             variant="ghost"
             size="icon"
             {...rest}
-            className={cn('aui-button-icon size-6 p-1', className)}
+            className={cn("aui-button-icon size-6 p-1", className)}
             ref={ref}
           >
             <Slottable>{children}</Slottable>
@@ -50,8 +50,8 @@ export const TooltipIconButton = forwardRef<
           {tooltip}
         </TooltipContent>
       </Tooltip>
-    )
-  }
-)
+    );
+  },
+);
 
-TooltipIconButton.displayName = 'TooltipIconButton'
+TooltipIconButton.displayName = "TooltipIconButton";