@gram-ai/elements 1.16.2 → 1.16.4

package/dist/types/index.d.ts

@@ -20,6 +20,8 @@ export type Variant = (typeof VARIANTS)[number];
  *
  * @example
  * const config: ElementsConfig = {
+ *   mcp: 'https://app.getgram.ai/mcp/your-mcp-slug',
+ *   projectSlug: 'my-project',
  *   systemPrompt: 'You are a helpful assistant.',
  * }
  */
@@ -117,7 +119,7 @@ export interface ElementsConfig {
      * @example
      * const config: ElementsConfig = {
      *   model: {
-     *     availableModels: ['gpt-4o-mini', 'gpt-4o'],
+     *     defaultModel: 'openai/gpt-4o',
      *     showModelPicker: true,
      *   },
      * }
@@ -151,7 +153,7 @@ export interface ElementsConfig {
      *   },
      * }
      */
-    welcome: WelcomeConfig;
+    welcome?: WelcomeConfig;
     /**
      * The configuration for the composer.
      *
@@ -172,12 +174,14 @@ export interface ElementsConfig {
      *   modal: {
      *     title: 'Chat',
      *     position: 'bottom-right',
-     *   },
-     *   expandable: true,
-     *   defaultExpanded: false,
-     *   dimensions: {
-     *     width: 400,
-     *     height: 600,
+     *     expandable: true,
+     *     defaultExpanded: false,
+     *     dimensions: {
+     *       default: {
+     *         width: 400,
+     *         height: 600,
+     *       },
+     *     },
      *   },
      * }
      */
@@ -190,12 +194,14 @@ export interface ElementsConfig {
      * const config: ElementsConfig = {
      *   sidecar: {
      *     title: 'Chat',
-     *   },
-     *   expandable: true,
-     *   defaultExpanded: false,
-     *   dimensions: {
-     *     width: 400,
-     *     height: 600,
+     *     expandable: true,
+     *     defaultExpanded: false,
+     *     dimensions: {
+     *       default: {
+     *         width: 400,
+     *         height: 600,
+     *       },
+     *     },
      *   },
      * }
      */
@@ -207,15 +213,12 @@ export interface ElementsConfig {
      * const config: ElementsConfig = {
      *   tools: {
      *     expandToolGroupsByDefault: true,
-     *   },
-     *   components: {
-     *     ToolFallback: CustomToolFallbackComponent,
-     *   },
-     *   frontendTools: {
-     *     fetchUrl: FetchTool,
-     *   },
-     *   components: {
-     *     fetchUrl: FetchToolComponent,
+     *     frontendTools: {
+     *       fetchUrl: FetchTool,
+     *     },
+     *     components: {
+     *       fetchUrl: FetchToolComponent,
+     *     },
      *   },
      * }
      */
@@ -397,8 +400,10 @@ export interface ToolsConfig {
      *   'fetchUrl'
      * )
      * const config: ElementsConfig = {
-     *   frontendTools: {
-     *     fetchUrl: FetchTool,
+     *   tools: {
+     *     frontendTools: {
+     *       fetchUrl: FetchTool,
+     *     },
      *   },
      * }
      * ```
@@ -491,6 +496,22 @@ export interface ModalConfig extends ExpandableConfig {
     /**
      * The icon to use for the modal window.
      * Receives the current state of the modal window.
+     *
+     * @example
+     * ```ts
+     * import { MessageCircleIcon } from 'lucide-react'
+     * import { cn } from '@/lib/utils'
+     *
+     * const config: ElementsConfig = {
+     *   modal: {
+     *     icon: (state) => {
+     *       return <div className={cn('size-6', state === 'open' ? 'rotate-90' : 'rotate-0')}>
+     *         <MessageCircleIcon className="size-6" />
+     *       </div>
+     *     },
+     *   },
+     * }
+     * ```
      */
     icon?: (state: 'open' | 'closed' | undefined) => ReactNode;
 }
@@ -511,9 +532,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.
+ * Note: not yet implemented. Attachments are not supported yet.
  */
 export interface AttachmentsConfig {
     /**
@@ -539,6 +559,9 @@ export interface SidecarConfig extends ExpandableConfig {
      */
     title?: string;
 }
+/**
+ * @internal
+ */
 export type ElementsContextType = {
     config: ElementsConfig;
     setModel: (model: Model) => void;

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.16.2",
+  "version": "1.16.4",
   "main": "dist/index.js",
   "exports": {
     ".": {