@gram-ai/elements 1.10.0 → 1.12.0

package/dist/hooks/useDensity.d.ts

@@ -3,61 +3,70 @@
  */
 declare const densityClasses: {
     readonly compact: {
-        readonly 'p-sm': "p-1";
+        readonly 'p-xs': "p-1";
+        readonly 'p-sm': "p-1.5";
         readonly 'p-md': "p-2";
-        readonly 'p-lg': "p-3";
-        readonly 'p-xl': "p-4";
-        readonly 'px-sm': "px-2";
-        readonly 'px-md': "px-3";
-        readonly 'px-lg': "px-4";
-        readonly 'px-xl': "px-5";
-        readonly 'py-sm': "py-1";
-        readonly 'py-md': "py-1.5";
-        readonly 'py-lg': "py-2";
+        readonly 'p-lg': "p-2.5";
+        readonly 'p-xl': "p-3";
+        readonly 'px-xs': "px-1";
+        readonly 'px-sm': "px-1.5";
+        readonly 'px-md': "px-2";
+        readonly 'px-lg': "px-2.5";
+        readonly 'px-xl': "px-3";
+        readonly 'py-xs': "py-1";
+        readonly 'py-sm': "py-1.5";
+        readonly 'py-md': "py-2";
+        readonly 'py-lg': "py-2.5";
         readonly 'py-xl': "py-3";
         readonly 'gap-sm': "gap-1";
-        readonly 'gap-md': "gap-2";
-        readonly 'gap-lg': "gap-3";
-        readonly 'gap-xl': "gap-4";
+        readonly 'gap-md': "gap-1.5";
+        readonly 'gap-lg': "gap-2";
+        readonly 'gap-xl': "gap-2.5";
         readonly 'h-header': "h-10";
-        readonly 'h-input': "min-h-12";
+        readonly 'h-input': "min-h-10";
         readonly 'text-base': "text-sm";
         readonly 'text-title': "text-xl";
         readonly 'text-subtitle': "text-sm";
     };
     readonly normal: {
+        readonly 'p-xs': "p-1";
         readonly 'p-sm': "p-2";
-        readonly 'p-md': "p-4";
-        readonly 'p-lg': "p-6";
-        readonly 'p-xl': "p-8";
-        readonly 'px-sm': "px-3";
-        readonly 'px-md': "px-4";
-        readonly 'px-lg': "px-6";
-        readonly 'px-xl': "px-8";
-        readonly 'py-sm': "py-1.5";
-        readonly 'py-md': "py-2.5";
-        readonly 'py-lg': "py-5";
-        readonly 'py-xl': "py-8";
-        readonly 'gap-sm': "gap-1";
+        readonly 'p-md': "p-3";
+        readonly 'p-lg': "p-4";
+        readonly 'p-xl': "p-6";
+        readonly 'px-xs': "px-1";
+        readonly 'px-sm': "px-2";
+        readonly 'px-md': "px-3";
+        readonly 'px-lg': "px-4";
+        readonly 'px-xl': "px-6";
+        readonly 'py-xs': "py-1";
+        readonly 'py-sm': "py-2";
+        readonly 'py-md': "py-3";
+        readonly 'py-lg': "py-4";
+        readonly 'py-xl': "py-6";
+        readonly 'gap-sm': "gap-1.5";
         readonly 'gap-md': "gap-2";
         readonly 'gap-lg': "gap-3";
-        readonly 'gap-xl': "gap-5";
+        readonly 'gap-xl': "gap-4";
         readonly 'h-header': "h-12";
-        readonly 'h-input': "min-h-16";
+        readonly 'h-input': "min-h-12";
         readonly 'text-base': "text-base";
         readonly 'text-title': "text-2xl";
         readonly 'text-subtitle': "text-base";
     };
     readonly spacious: {
+        readonly 'p-xs': "p-2";
         readonly 'p-sm': "p-3";
-        readonly 'p-md': "p-6";
-        readonly 'p-lg': "p-8";
+        readonly 'p-md': "p-4";
+        readonly 'p-lg': "p-6";
         readonly 'p-xl': "p-10";
-        readonly 'px-sm': "px-4";
-        readonly 'px-md': "px-6";
-        readonly 'px-lg': "px-8";
+        readonly 'px-xs': "px-2";
+        readonly 'px-sm': "px-3";
+        readonly 'px-md': "px-4";
+        readonly 'px-lg': "px-6";
         readonly 'px-xl': "px-10";
-        readonly 'py-sm': "py-2";
+        readonly 'py-xs': "py-2";
+        readonly 'py-sm': "py-3";
         readonly 'py-md': "py-4";
         readonly 'py-lg': "py-6";
         readonly 'py-xl': "py-10";
@@ -66,7 +75,7 @@ declare const densityClasses: {
         readonly 'gap-lg': "gap-4";
         readonly 'gap-xl': "gap-6";
         readonly 'h-header': "h-14";
-        readonly 'h-input': "min-h-20";
+        readonly 'h-input': "min-h-16";
         readonly 'text-base': "text-lg";
         readonly 'text-title': "text-3xl";
         readonly 'text-subtitle': "text-lg";
@@ -77,5 +86,5 @@ type DensityToken = keyof (typeof densityClasses)['normal'];
  * Hook to get density classes based on theme config
  * Use: const d = useDensity(); then d('p-md') returns the appropriate padding class
  */
-export declare const useDensity: () => (token: DensityToken) => "p-1" | "p-2" | "p-3" | "p-4" | "px-2" | "px-3" | "px-4" | "px-5" | "py-1" | "py-1.5" | "py-2" | "py-3" | "gap-1" | "gap-2" | "gap-3" | "gap-4" | "h-10" | "min-h-12" | "text-sm" | "text-xl" | "p-6" | "p-8" | "px-6" | "px-8" | "py-2.5" | "py-5" | "py-8" | "gap-5" | "h-12" | "min-h-16" | "text-base" | "text-2xl" | "p-10" | "px-10" | "py-4" | "py-6" | "py-10" | "gap-6" | "h-14" | "min-h-20" | "text-lg" | "text-3xl";
+export declare const useDensity: () => (token: DensityToken) => "p-1" | "p-1.5" | "p-2" | "p-2.5" | "p-3" | "px-1" | "px-1.5" | "px-2" | "px-2.5" | "px-3" | "py-1" | "py-1.5" | "py-2" | "py-2.5" | "py-3" | "gap-1" | "gap-1.5" | "gap-2" | "gap-2.5" | "h-10" | "min-h-10" | "text-sm" | "text-xl" | "p-4" | "p-6" | "px-4" | "px-6" | "py-4" | "py-6" | "gap-3" | "gap-4" | "h-12" | "min-h-12" | "text-base" | "text-2xl" | "p-10" | "px-10" | "py-10" | "gap-6" | "h-14" | "min-h-16" | "text-lg" | "text-3xl";
 export {};

package/dist/hooks/useExpanded.d.ts

@@ -2,6 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
 interface UseExpandedAPI {
     expandable: boolean;
     isExpanded: boolean;
+    defaultExpanded: boolean;
     setIsExpanded: Dispatch<SetStateAction<boolean>>;
 }
 export declare const useExpanded: () => UseExpandedAPI;

package/dist/hooks/usePluginComponents.d.ts

@@ -0,0 +1,9 @@
+import { CodeHeaderProps, SyntaxHighlighterProps } from '@assistant-ui/react-markdown';
+import { ComponentType } from 'react';
+import { Plugin } from '../types/plugins';
+type ComponentsByLanguage = Record<string, {
+    CodeHeader?: ComponentType<CodeHeaderProps> | undefined;
+    SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps> | undefined;
+}> | undefined;
+export declare function useComponentsByLanguage(plugins: Plugin[]): ComponentsByLanguage;
+export {};

package/dist/lib/humanize.d.ts

@@ -0,0 +1 @@
+export declare function humanizeToolName(toolName: string): string;

package/dist/lib/utils.d.ts

@@ -1,3 +1,4 @@
 import { ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
 export declare function assertNever(value: unknown): never;
+export declare function assert(condition: boolean, message: string): asserts condition;

package/dist/plugins/chart/component.d.ts

@@ -0,0 +1,3 @@
+import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown';
+import { FC } from 'react';
+export declare const ChartRenderer: FC<SyntaxHighlighterProps>;

package/dist/plugins/chart/index.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from '../../types/plugins';
+/**
+ * This plugin renders Vega charts.
+ */
+export declare const chart: Plugin;

package/dist/plugins/index.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from '../types/plugins';
+export declare const recommended: Plugin[];
+export { chart } from './chart';
+export type { Plugin } from '../types/plugins';

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 import { MODELS } from '../lib/models';
 import { ToolCallMessagePartComponent } from '@assistant-ui/react';
 import { Dispatch, SetStateAction, ReactNode } from 'react';
+import { Plugin } from './plugins';
 export interface ElementsProviderProps {
     /**
      * The children to render.
@@ -19,6 +20,7 @@ export interface ElementsConfig {
      * The system prompt to use for the Elements library.
      */
     systemPrompt?: string;
+    plugins?: Plugin[];
     /**
      * The project slug to use for the Elements library.
      */
@@ -168,6 +170,11 @@ export interface ThemeConfig {
  * }
  */
 export interface ToolsConfig {
+    /**
+     * Whether individual tool calls within a group should be expanded by default.
+     * @default false
+     */
+    expandToolGroupsByDefault?: boolean;
     /**
      * `components` can be used to override the default components used by the
      * Elements library for a given tool result.
@@ -204,13 +211,34 @@ export interface Suggestion {
     label: string;
     action: string;
 }
-type ModalDimension = {
-    width: number | `${number}%`;
-    height: number | `${number}%`;
-    maxHeight?: number | `${number}%`;
-};
+interface ExpandableDimensions {
+    default: {
+        width: number | string;
+        height: number | string;
+        maxHeight?: number | string;
+    };
+    expanded?: {
+        width: number | string;
+        height: number | string;
+    };
+}
+interface ExpandedConfig {
+    /**
+     * Whether the modal can be expanded to full screen.
+     */
+    expandable?: boolean;
+    /**
+     * Whether the modal should be expanded by default.
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * The dimensions for the modal window.
+     */
+    dimensions?: ExpandableDimensions;
+}
 export type ModalTriggerPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-export interface ModalConfig {
+export interface ModalConfig extends ExpandedConfig {
     /**
      * Whether to open the modal window by default.
      */
@@ -231,23 +259,6 @@ export interface ModalConfig {
      * Receives the current state of the modal window.
      */
     icon?: (state: 'open' | 'closed' | undefined) => ReactNode;
-    /**
-     * Whether the modal can be expanded to full screen.
-     */
-    expandable?: boolean;
-    /**
-     * The dimensions for the modal window.
-     */
-    dimensions?: {
-        /**
-         * The default dimensions for the modal window.
-         */
-        default: ModalDimension;
-        /**
-         * The expanded dimensions for the modal window.
-         */
-        expanded?: Pick<ModalDimension, 'width' | 'height'>;
-    };
 }
 export interface ComposerConfig {
     /**
@@ -287,22 +298,12 @@ export interface AttachmentsConfig {
      */
     maxSize?: number;
 }
-export interface SidecarConfig {
+export interface SidecarConfig extends ExpandedConfig {
     /**
      * The title displayed in the sidecar header.
      * @default 'Chat'
      */
     title?: string;
-    /**
-     * The width of the sidecar panel.
-     * @default '400px'
-     */
-    width?: string | number | `${number}%`;
-    /**
-     * The width of the sidecar panel when expanded.
-     * @default '800px'
-     */
-    expandedWidth?: string | number | `${number}%`;
 }
 export type ElementsContextType = {
     config: ElementsConfig;
@@ -312,5 +313,6 @@ export type ElementsContextType = {
     setIsExpanded: Dispatch<SetStateAction<boolean>>;
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
+    plugins: Plugin[];
 };
 export {};

package/dist/types/plugins.d.ts

@@ -0,0 +1,57 @@
+import { CodeHeaderProps, SyntaxHighlighterProps } from '@assistant-ui/react-markdown';
+import { ComponentType } from 'react';
+/**
+ * A plugin enables addition of custom rendering capabilities to the Elements library.
+ * For example, a plugin could provide a custom renderer for a specific language such as
+ * D3.js or Mermaid.
+ *
+ * The general flow of a plugin is:
+ * 1. Plugin extends the system prompt with a custom prompt instructing the LLM to return code fences marked with the specified language / format
+ * 2. The LLM returns a code fence marked with the specified language / format
+ * 3. The code fence is rendered using the custom renderer
+ */
+export interface Plugin {
+    /**
+     * Any prompt that the plugin may need to add to the system prompt.
+     * Will be appended to the built-in system prompt.
+     *
+     * @example
+     * ```
+     * If the user asks for a chart, use D3 to render it.
+     * Return only a d3 code block. The code will execute in a sandboxed environment where:
+     * - \`d3\` is the D3 library
+     * - \`container\` is the DOM element to render into (use \`d3.select(container)\` NOT \`d3.select('body')\`)
+     * The code should be wrapped in a \`\`\`d3
+     * \`\`\` block.
+     * ```
+     */
+    prompt: string;
+    /**
+     * The language identifier for the syntax highlighter
+     * e.g mermaid or d3
+     *
+     * Does not need to be an official language identifier, can be any string. The important part is that the
+     * prompt adequately instructs the LLM to return code fences marked with the specified language / format
+     *
+     * @example
+     * ```
+     * d3
+     * ```
+     */
+    language: string;
+    /**
+     * The component to use for the syntax highlighter.
+     */
+    Component: ComponentType<SyntaxHighlighterProps>;
+    /**
+     * The component to use for the code header.
+     * Will be rendered above the code block.
+     * @default () => null
+     */
+    Header?: ComponentType<CodeHeaderProps> | undefined;
+    /**
+     * Whether to override existing plugins with the same language.
+     * @default false
+     */
+    overrideExisting?: boolean;
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gram-ai/elements",
   "description": "Gram Elements is a library of UI primitives for building chat-like experiences for MCP Servers.",
   "type": "module",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "main": "dist/index.js",
   "exports": {
     ".": {
@@ -15,6 +15,11 @@
       "import": "./dist/server.js",
       "require": "./dist/server.cjs"
     },
+    "./plugins": {
+      "types": "./dist/plugins.d.ts",
+      "import": "./dist/plugins.js",
+      "require": "./dist/plugins.cjs"
+    },
     "./elements.css": "./dist/elements.css"
   },
   "files": [
@@ -44,7 +49,6 @@
     "@assistant-ui/react-markdown": "^0.11.0",
     "@types/react": ">=18 <20",
     "@types/react-dom": ">=18 <20",
-    "d3": "^7.9.0",
     "motion": "^12.0.0",
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
@@ -78,9 +82,6 @@
     },
     "zustand": {
       "optional": true
-    },
-    "d3": {
-      "optional": true
     }
   },
   "dependencies": {
@@ -99,6 +100,7 @@
     "lucide-react": "^0.544.0",
     "tailwind-merge": "^3.3.1",
     "tw-shimmer": "^0.4.0",
+    "vega": "^6.2.0",
     "zod": "^4.1.13"
   },
   "devDependencies": {