@gram-ai/elements 1.11.0 → 1.13.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/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/types/index.d.ts

@@ -1,6 +1,6 @@
 import { MODELS } from '../lib/models';
-import { ToolCallMessagePartComponent } from '@assistant-ui/react';
-import { Dispatch, SetStateAction, ReactNode } from 'react';
+import { ImageMessagePartComponent, ReasoningGroupComponent, ReasoningMessagePartComponent, TextMessagePartComponent, ToolCallMessagePartComponent } from '@assistant-ui/react';
+import { ComponentType, Dispatch, PropsWithChildren, SetStateAction, ReactNode } from 'react';
 import { Plugin } from './plugins';
 export interface ElementsProviderProps {
     /**
@@ -20,7 +20,13 @@ export interface ElementsConfig {
      * The system prompt to use for the Elements library.
      */
     systemPrompt?: string;
+    /**
+     * Any plugins to use for the Elements library.
+     *
+     * @default import { recommended } from '@gram-ai/elements/plugins'
+     */
     plugins?: Plugin[];
+    components?: ComponentOverrides;
     /**
      * The project slug to use for the Elements library.
      */
@@ -155,6 +161,57 @@ export interface ThemeConfig {
      */
     radius?: Radius;
 }
+export interface ComponentOverrides {
+    /**
+     * The component to use for the composer (the input area where users type messages)
+     */
+    Composer?: ComponentType;
+    /**
+     * The component to use for the user message.
+     */
+    UserMessage?: ComponentType;
+    /**
+     * The component to use for the edit composer (inline message editor)
+     */
+    EditComposer?: ComponentType;
+    /**
+     * The component to use for the assistant message (messages generated by the LLM).
+     *
+     * Note: if you override this, the Text component will not be used.
+     */
+    AssistantMessage?: ComponentType;
+    /**
+     * The component to use for the thread welcome.
+     */
+    ThreadWelcome?: ComponentType;
+    /**
+     * The component to use for the text message.
+     */
+    Text?: TextMessagePartComponent;
+    /**
+     * The component to use for the image message.
+     */
+    Image?: ImageMessagePartComponent;
+    /**
+     * The component to use for the tool fallback (default UI shown when a tool returns a result).
+     */
+    ToolFallback?: ToolCallMessagePartComponent;
+    /**
+     * The component to use for the reasoning message.
+     */
+    Reasoning?: ReasoningMessagePartComponent;
+    /**
+     * The component to use for the reasoning group.
+     */
+    ReasoningGroup?: ReasoningGroupComponent;
+    /**
+     * The component to use for the tool group (a group of tool calls returned by the LLM in a single message).
+     */
+    ToolGroup?: ComponentType<PropsWithChildren<{
+        startIndex: number;
+        endIndex: number;
+    }>>;
+}
 /**
  * ToolsConfig is used to configure tool support in the Elements library.
  * At the moment, you can override the default React components used by
@@ -170,6 +227,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.
@@ -206,13 +268,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.
      */
@@ -233,23 +316,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 {
     /**
@@ -289,22 +355,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;

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