@gram-ai/elements 1.33.2 → 1.35.0

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

@@ -1,6 +1,7 @@
 import {
   ArrowDownIcon,
   ArrowUpIcon,
+  AtSign,
   CheckIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -8,8 +9,10 @@ import {
   CopyIcon,
   DownloadIcon,
   PencilIcon,
+  Search,
   Settings2,
   Square,
+  Wrench,
 } from "lucide-react";
 
 import {
@@ -20,6 +23,7 @@ import {
   ImageMessagePartProps,
   MessagePrimitive,
   ThreadPrimitive,
+  useAssistantApi,
   useAssistantState,
 } from "@assistant-ui/react";
 
@@ -68,6 +72,10 @@ import { useToolMentions } from "@/hooks/useToolMentions";
 import { getApiUrl } from "@/lib/api";
 import { EASE_OUT_QUINT } from "@/lib/easing";
 import { MODELS } from "@/lib/models";
+import {
+  type MentionableTool,
+  toolSetToMentionableTools,
+} from "@/lib/tool-mentions";
 import { cn } from "@/lib/utils";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import {
@@ -262,7 +270,7 @@ const ThreadScrollToBottom: FC = () => {
 const ThreadWelcome: FC = () => {
   const { config } = useElements();
   const d = useDensity();
-  const { title, subtitle } = config.welcome ?? {};
+  const { logo, title, subtitle } = config.welcome ?? {};
   const isStandalone = config.variant === "standalone";
 
   return (
@@ -288,6 +296,19 @@ const ThreadWelcome: FC = () => {
             !isStandalone && d("py-md"),
           )}
         >
+          {logo && (
+            <m.img
+              src={logo}
+              alt=""
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 10 }}
+              transition={{ duration: 0.25, ease: EASE_OUT_QUINT }}
+              className={cn(
+                "aui-thread-welcome-logo mb-2 size-12 object-contain",
+              )}
+            />
+          )}
           <m.div
             initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
@@ -524,7 +545,9 @@ const ComposerFeedback: FC = () => {
               <MessageFeedback
                 className="mx-auto"
                 onResolved={setResolved}
-                onFeedback={handleFeedback}
+                onFeedback={(type) => {
+                  void handleFeedback(type);
+                }}
               />
             </m.div>
           )}
@@ -794,6 +817,218 @@ const ComposerCassetteRecorder: FC = () => {
   );
 };
 
+// Sentinel for the "All" pseudo-category in the tool-mention picker.
+const TOOL_MENTION_ALL_CATEGORY = "__all__";
+
+function humanizeToolCategory(raw: string): string {
+  const cleaned = raw.replace(/[-_]+/g, " ").trim();
+  if (!cleaned) return "Tools";
+  return cleaned.replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+// Derive a grouping label for a tool. Tools from multiple MCP servers are
+// namespaced as `<server>__<tool>`; otherwise group by the first
+// underscore-delimited segment (e.g. `platform_search_logs` -> "Platform"),
+// falling back to a single "Tools" bucket.
+function deriveToolCategory(name: string): string {
+  const namespaceIdx = name.indexOf("__");
+  if (namespaceIdx > 0)
+    return humanizeToolCategory(name.slice(0, namespaceIdx));
+  const underscoreIdx = name.indexOf("_");
+  if (underscoreIdx > 0)
+    return humanizeToolCategory(name.slice(0, underscoreIdx));
+  return "Tools";
+}
+
+interface ToolCategory {
+  name: string;
+  tools: MentionableTool[];
+}
+
+// A discoverable counterpart to the type-`@` autocomplete: a composer button
+// that opens a searchable, category-grouped picker of the available tools and
+// inserts an @mention for the chosen one. Inserts through the composer runtime
+// so it stays in sync with the autocomplete's own textarea handling. Hidden when
+// tool mentions are disabled or there are no tools.
+const ComposerToolMentionPicker: FC = () => {
+  const { config, mcpTools, mcpToolsLoading } = useElements();
+  const api = useAssistantApi();
+  // Read the composer text from the same reactive source the tool-mention
+  // badges parse, so an inserted mention renders a pill just like the type-`@`
+  // autocomplete does.
+  const composerText = useAssistantState(({ composer }) => composer.text);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeCategory, setActiveCategory] = useState(
+    TOOL_MENTION_ALL_CATEGORY,
+  );
+
+  const composerConfig = config.composer;
+  const toolMentionsEnabled =
+    composerConfig?.toolMentions === undefined ||
+    composerConfig.toolMentions === true ||
+    (typeof composerConfig.toolMentions === "object" &&
+      composerConfig.toolMentions.enabled !== false);
+
+  const tools = useMemo(() => toolSetToMentionableTools(mcpTools), [mcpTools]);
+
+  const categories = useMemo<ToolCategory[]>(() => {
+    const grouped = new Map<string, MentionableTool[]>();
+    for (const tool of tools) {
+      const category = deriveToolCategory(tool.name);
+      const existing = grouped.get(category);
+      if (existing) {
+        existing.push(tool);
+      } else {
+        grouped.set(category, [tool]);
+      }
+    }
+    return [...grouped.entries()]
+      .map(([name, categoryTools]) => ({ name, tools: categoryTools }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [tools]);
+
+  // Show the button while tools are still loading (so it appears immediately
+  // rather than popping in once the async MCP list resolves) or once there are
+  // tools — but hide it when the list has loaded and is empty, so we don't
+  // expose a dead-end control.
+  if (!toolMentionsEnabled || (!mcpToolsLoading && tools.length === 0)) {
+    return null;
+  }
+
+  const normalizedQuery = query.trim().toLowerCase();
+  const inActiveCategory =
+    activeCategory === TOOL_MENTION_ALL_CATEGORY
+      ? tools
+      : (categories.find((c) => c.name === activeCategory)?.tools ?? []);
+  const visibleTools = normalizedQuery
+    ? inActiveCategory.filter(
+        (tool) =>
+          tool.name.toLowerCase().includes(normalizedQuery) ||
+          (tool.description?.toLowerCase().includes(normalizedQuery) ?? false),
+      )
+    : inActiveCategory;
+
+  const insertMention = (toolName: string) => {
+    const base =
+      composerText && !/\s$/.test(composerText)
+        ? `${composerText} `
+        : composerText;
+    api.composer().setText(`${base}@${toolName} `);
+    setOpen(false);
+    setQuery("");
+  };
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      setQuery("");
+      setActiveCategory(TOOL_MENTION_ALL_CATEGORY);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          data-state={open ? "open" : "closed"}
+          className="aui-composer-tool-mention-picker flex w-fit items-center gap-2 rounded-full px-2.5 py-1 text-xs font-semibold data-[state=open]:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
+          aria-label="Mention a tool"
+        >
+          <AtSign className="size-5 stroke-[1.5px]" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        side="top"
+        align="start"
+        className="aui-composer-tool-mention-popover w-[420px] overflow-hidden p-0"
+      >
+        <div className="flex items-center gap-2 border-b border-input px-3 py-2">
+          <Search className="size-4 shrink-0 text-muted-foreground" />
+          <input
+            autoFocus
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search tools…"
+            className="w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
+            aria-label="Search tools"
+          />
+        </div>
+        <div className="flex h-72">
+          <div className="w-36 shrink-0 overflow-y-auto border-r border-input p-2">
+            <div className="px-2 pb-1 text-[10px] font-semibold tracking-wide text-muted-foreground uppercase">
+              Categories
+            </div>
+            <button
+              type="button"
+              onClick={() => setActiveCategory(TOOL_MENTION_ALL_CATEGORY)}
+              className={cn(
+                "flex w-full items-center justify-between rounded px-2 py-1 text-left text-xs transition-colors",
+                activeCategory === TOOL_MENTION_ALL_CATEGORY
+                  ? "bg-muted font-medium text-foreground"
+                  : "text-muted-foreground hover:bg-muted/60",
+              )}
+            >
+              <span className="truncate">All</span>
+              <span className="ml-2 shrink-0 tabular-nums opacity-60">
+                {tools.length}
+              </span>
+            </button>
+            {categories.map((category) => (
+              <button
+                key={category.name}
+                type="button"
+                onClick={() => setActiveCategory(category.name)}
+                className={cn(
+                  "flex w-full items-center justify-between rounded px-2 py-1 text-left text-xs transition-colors",
+                  activeCategory === category.name
+                    ? "bg-muted font-medium text-foreground"
+                    : "text-muted-foreground hover:bg-muted/60",
+                )}
+              >
+                <span className="truncate">{category.name}</span>
+                <span className="ml-2 shrink-0 tabular-nums opacity-60">
+                  {category.tools.length}
+                </span>
+              </button>
+            ))}
+          </div>
+          <div className="min-w-0 flex-1 overflow-y-auto p-2">
+            {visibleTools.length === 0 ? (
+              <div className="px-2 py-6 text-center text-xs text-muted-foreground">
+                {mcpToolsLoading ? "Loading tools…" : "No tools found"}
+              </div>
+            ) : (
+              visibleTools.map((tool) => (
+                <button
+                  key={tool.id}
+                  type="button"
+                  onClick={() => insertMention(tool.name)}
+                  className="flex w-full items-start gap-2 rounded px-2 py-1.5 text-left transition-colors hover:bg-muted"
+                >
+                  <Wrench className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-sm font-medium text-foreground">
+                      {tool.name}
+                    </span>
+                    {tool.description && (
+                      <span className="line-clamp-2 text-xs text-muted-foreground">
+                        {tool.description}
+                      </span>
+                    )}
+                  </span>
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
 const ComposerAction: FC = () => {
   const { config } = useElements();
   const r = useRadius();
@@ -807,6 +1042,8 @@ const ComposerAction: FC = () => {
           <div className="aui-composer-add-attachment-placeholder" />
         )}
 
+        <ComposerToolMentionPicker />
+
         {config.model?.showModelPicker && !config.languageModel && (
           <ComposerModelPicker />
         )}
@@ -879,21 +1116,22 @@ const ToolCallStreamingIndicator: FC = () => {
 const AssistantMessage: FC = () => {
   const { config } = useElements();
   const toolsConfig = config.tools ?? {};
-  const components = config.components ?? {};
+  const components = config.components;
+  const toolsComponents = toolsConfig.components;
 
   const partsComponents = useMemo(
     () => ({
-      Text: components.Text ?? MarkdownText,
-      Image: components.Image ?? Image,
+      Text: components?.Text ?? MarkdownText,
+      Image: components?.Image ?? Image,
       tools: {
-        by_name: toolsConfig.components,
-        Fallback: components.ToolFallback ?? ToolFallback,
+        by_name: toolsComponents,
+        Fallback: components?.ToolFallback ?? ToolFallback,
       },
-      Reasoning: components.Reasoning ?? Reasoning,
-      ReasoningGroup: components.ReasoningGroup ?? ReasoningGroup,
-      ToolGroup: components.ToolGroup ?? ToolGroup,
+      Reasoning: components?.Reasoning ?? Reasoning,
+      ReasoningGroup: components?.ReasoningGroup ?? ReasoningGroup,
+      ToolGroup: components?.ToolGroup ?? ToolGroup,
     }),
-    [components, toolsConfig.components],
+    [components, toolsComponents],
   );
 
   return (
@@ -950,6 +1188,8 @@ const AssistantActionBar: FC = () => {
 
 const UserMessage: FC = () => {
   const r = useRadius();
+  const { config } = useElements();
+  const allowEdit = config.allowMessageEdit !== false;
   return (
     <MessagePrimitive.Root asChild>
       <div
@@ -967,9 +1207,11 @@ const UserMessage: FC = () => {
           >
             <MessagePrimitive.Parts />
           </div>
-          <div className="aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2">
-            <UserActionBar />
-          </div>
+          {allowEdit && (
+            <div className="aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2">
+              <UserActionBar />
+            </div>
+          )}
         </div>
 
         <BranchPicker className="aui-user-branch-picker col-span-full col-start-1 row-start-3 -mr-1 justify-end" />

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

@@ -74,7 +74,7 @@ export const ToolMentionAutocomplete: FC<ToolMentionAutocompleteProps> = ({
       onValueChange(result.text, result.cursorPosition);
       setIsVisible(false);
     },
-    [mentionContext, value, cursorPosition, onValueChange, textareaRef],
+    [mentionContext, value, cursorPosition, onValueChange],
   );
 
   useEffect(() => {

package/src/components/ui/avatar.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
 function Avatar({
   className,
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+}: React.ComponentProps<typeof AvatarPrimitive.Root>): React.JSX.Element {
   return (
     <AvatarPrimitive.Root
       data-slot="avatar"
@@ -22,7 +22,7 @@ function Avatar({
 function AvatarImage({
   className,
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+}: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element {
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
@@ -35,7 +35,7 @@ function AvatarImage({
 function AvatarFallback({
   className,
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element {
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"

package/src/components/ui/calendar.tsx

@@ -130,7 +130,7 @@ function Calendar({
   minDate,
   maxDate,
   className,
-}: CalendarProps) {
+}: CalendarProps): React.JSX.Element {
   const [viewDate, setViewDate] = React.useState(() => {
     if (selected.start) return new Date(selected.start);
     return new Date();

package/src/components/ui/collapsible.tsx

@@ -2,13 +2,15 @@ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
 function Collapsible({
   ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>): React.JSX.Element {
   return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
 }
 
 function CollapsibleTrigger({
   ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+}: React.ComponentProps<
+  typeof CollapsiblePrimitive.CollapsibleTrigger
+>): React.JSX.Element {
   return (
     <CollapsiblePrimitive.CollapsibleTrigger
       data-slot="collapsible-trigger"
@@ -19,7 +21,9 @@ function CollapsibleTrigger({
 
 function CollapsibleContent({
   ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+}: React.ComponentProps<
+  typeof CollapsiblePrimitive.CollapsibleContent
+>): React.JSX.Element {
   return (
     <CollapsiblePrimitive.CollapsibleContent
       data-slot="collapsible-content"

package/src/components/ui/dialog.tsx

@@ -7,20 +7,20 @@ import { usePortalContainer } from "@/hooks/usePortalContainer";
 
 function Dialog({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+}: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
   container,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+}: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element {
   const portalContainer = usePortalContainer();
   return (
     <DialogPrimitive.Portal
@@ -33,14 +33,14 @@ function DialogPortal({
 
 function DialogClose({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+}: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element {
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element {
   return (
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
@@ -60,7 +60,7 @@ function DialogContent({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
-}) {
+}): React.JSX.Element {
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
@@ -87,7 +87,10 @@ function DialogContent({
   );
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="dialog-header"
@@ -97,7 +100,10 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+function DialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="dialog-footer"
@@ -113,7 +119,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
 function DialogTitle({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
@@ -126,7 +132,9 @@ function DialogTitle({
 function DialogDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+}: React.ComponentProps<
+  typeof DialogPrimitive.Description
+>): React.JSX.Element {
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"

package/src/components/ui/generative-ui.tsx

@@ -4,7 +4,7 @@ import { useDensity } from "@/hooks/useDensity";
 import { cn } from "@/lib/utils";
 import { isJsonRenderTree, type JsonRenderNode } from "@/lib/generative-ui";
 import { AlertCircleIcon } from "lucide-react";
-import { FC, useMemo } from "react";
+import { ElementType, FC, useMemo } from "react";
 
 // Import all components from the generative-ui plugin ui directory
 import {
@@ -42,9 +42,10 @@ interface GenerativeUIProps {
 /**
  * Built-in components for rendering json-render trees.
  * These provide a default set of UI primitives for tool results.
+ * Each entry has its own prop shape; the registry erases those generics via
+ * `ElementType` so heterogeneous components can coexist under one map.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const components: Record<string, FC<any>> = {
+const components: Record<string, ElementType> = {
   // Layout
   Card: CardWrapper,
   Grid,
@@ -98,7 +99,11 @@ function renderNode(node: JsonRenderNode, key?: number): React.ReactNode {
     ? node.children.map((child, i) => renderNode(child, i))
     : undefined;
 
-  return <Component key={key} {...(node.props ?? {})} children={children} />;
+  return (
+    <Component key={key} {...(node.props ?? {})}>
+      {children}
+    </Component>
+  );
 }
 
 /**

package/src/components/ui/popover.tsx

@@ -6,13 +6,13 @@ import { usePortalContainer } from "@/hooks/usePortalContainer";
 
 function Popover({
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+}: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
 function PopoverTrigger({
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element {
   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
@@ -24,7 +24,7 @@ function PopoverContent({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
   container?: HTMLElement | null;
-}) {
+}): React.JSX.Element {
   const portalContainer = usePortalContainer();
   return (
     <PopoverPrimitive.Portal container={container ?? portalContainer}>
@@ -44,7 +44,7 @@ function PopoverContent({
 
 function PopoverAnchor({
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element {
   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 

package/src/components/ui/skeleton.tsx

@@ -1,6 +1,9 @@
 import { cn } from "@/lib/utils";
 
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+function Skeleton({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="skeleton"