@gram-ai/elements 1.9.0 → 1.11.0

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/index.d.ts

@@ -3,4 +3,4 @@ export { useElements as useGramElements } from './hooks/useElements';
 export { Chat } from './components/Chat';
 export { ToolUI, ToolUISection } from './components/ui/tool-ui';
 export type { ToolUIProps, ToolUISectionProps, ToolStatus, } from './components/ui/tool-ui';
-export type { ElementsConfig, ComposerConfig, AttachmentsConfig, ModalConfig, SidecarConfig, ToolsConfig, ModelConfig, ThemeConfig, WelcomeConfig, Suggestion, Model, ModalTriggerPosition, } from './types';
+export type { ElementsConfig, ComposerConfig, AttachmentsConfig, ModalConfig, SidecarConfig, ToolsConfig, ModelConfig, ThemeConfig, WelcomeConfig, Suggestion, Model, ModalTriggerPosition, ColorScheme, Radius, Density, Variant, } from './types';

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,7 +1,7 @@
 import { MODELS } from '../lib/models';
 import { ToolCallMessagePartComponent } from '@assistant-ui/react';
 import { Dispatch, SetStateAction, ReactNode } from 'react';
-import { z } from 'zod';
+import { Plugin } from './plugins';
 export interface ElementsProviderProps {
     /**
      * The children to render.
@@ -20,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.
      */
@@ -268,6 +269,8 @@ export interface ComposerConfig {
 /**
  * AttachmentsConfig provides fine-grained control over file attachments.
  * Inspired by OpenAI ChatKit's attachment options.
+ *
+ * Note: not yet implemented on the Gram side.
  */
 export interface AttachmentsConfig {
     /**
@@ -302,16 +305,6 @@ export interface SidecarConfig {
      * @default '800px'
      */
     expandedWidth?: string | number | `${number}%`;
-    /**
-     * Callback when the pop-out button is clicked.
-     * If provided, the pop-out button will be shown.
-     */
-    onPopOut?: () => void;
-    /**
-     * Callback when the collapse button is clicked.
-     * If provided, the collapse button will be shown.
-     */
-    onCollapse?: () => void;
 }
 export type ElementsContextType = {
     config: ElementsConfig;
@@ -321,23 +314,6 @@ export type ElementsContextType = {
     setIsExpanded: Dispatch<SetStateAction<boolean>>;
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
+    plugins: Plugin[];
 };
-declare const ContentSchema: z.ZodUnion<readonly [z.ZodObject<{
-    type: z.ZodLiteral<"text">;
-    text: z.ZodString;
-}, z.core.$strip>, z.ZodObject<{
-    type: z.ZodLiteral<"image">;
-    data: z.ZodString;
-}, z.core.$strip>]>;
-export type ToolCallResultContent = z.infer<typeof ContentSchema>;
-export declare const ToolCallResultSchema: z.ZodUnion<[z.ZodObject<{
-    content: z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
-        type: z.ZodLiteral<"text">;
-        text: z.ZodString;
-    }, z.core.$strip>, z.ZodObject<{
-        type: z.ZodLiteral<"image">;
-        data: z.ZodString;
-    }, z.core.$strip>]>>;
-}, z.core.$strip>, z.ZodUndefined]>;
-export type ToolCallResult = z.infer<typeof ToolCallResultSchema>;
 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/dist/types/schemas.d.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod';
+declare const ContentSchema: z.ZodUnion<readonly [z.ZodObject<{
+    type: z.ZodLiteral<"text">;
+    text: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"image">;
+    data: z.ZodString;
+}, z.core.$strip>]>;
+export type ToolCallResultContent = z.infer<typeof ContentSchema>;
+export declare const ToolCallResultSchema: z.ZodUnion<[z.ZodObject<{
+    content: z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
+        type: z.ZodLiteral<"text">;
+        text: z.ZodString;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"image">;
+        data: z.ZodString;
+    }, z.core.$strip>]>>;
+}, z.core.$strip>, z.ZodUndefined]>;
+export type ToolCallResult = z.infer<typeof ToolCallResultSchema>;
+export {};

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.9.0",
+  "version": "1.11.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": {