@gram-ai/elements 1.20.1 → 1.21.1

package/bin/cli.js

@@ -1,8 +1,9 @@
 #!/usr/bin/env node
 
 import { execSync } from 'node:child_process'
-import { existsSync } from 'node:fs'
-import { resolve } from 'node:path'
+import { existsSync, readFileSync } from 'node:fs'
+import { resolve, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 // Colors
 const c = {
@@ -20,15 +21,14 @@ const c = {
   white: '\x1b[37m',
 }
 
-const PEER_DEPS = [
-  'react',
-  'react-dom',
-  'motion',
-  'remark-gfm',
-  'zustand',
-  'vega',
-  'shiki',
-]
+// Read peer dependencies from package.json (excluding @types/* packages)
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const packageJson = JSON.parse(
+  readFileSync(resolve(__dirname, '../package.json'), 'utf-8')
+)
+const PEER_DEPS = Object.keys(packageJson.peerDependencies || {}).filter(
+  (dep) => !dep.startsWith('@types/')
+)
 
 const PACKAGE_NAME = '@gram-ai/elements'
 
@@ -110,7 +110,9 @@ ${c.dim}Package manager:${c.reset} ${c.cyan}${pm}${c.reset}
 `)
 
   // Install everything in one command
-  console.log(`${c.yellow}○${c.reset} Installing ${c.cyan}@gram-ai/elements${c.reset} and peer dependencies...`)
+  console.log(
+    `${c.yellow}○${c.reset} Installing ${c.cyan}@gram-ai/elements${c.reset} and peer dependencies...`
+  )
   const allPackages = [...PEER_DEPS, PACKAGE_NAME]
   const cmd = getInstallCommand(pm, allPackages)
   if (!run(cmd)) {

package/dist/components/Chat/stories/ConnectionConfiguration.stories.d.ts

@@ -1,10 +1,10 @@
-import { Chat } from '..';
 import { Meta, StoryFn } from '@storybook/react-vite';
+import { Chat } from '..';
 declare const meta: Meta<typeof Chat>;
 export default meta;
 type Story = StoryFn<typeof Chat>;
 export declare const SystemPrompt: Story;
 export declare const WithImplicitSessionAuth: Story;
 export declare const WithExplicitSessionAuth: Story;
-export declare const WithExplicitAPIKeyAuth: Story;
+export declare const WithStaticSessionAuth: Story;
 export declare const LanguageModel: Story;

package/dist/components/Chat/stories/{ColorScheme.stories.d.ts → ErrorBoundary.stories.d.ts}

@@ -1,8 +1,8 @@
-import { Chat } from '..';
 import { Meta, StoryFn } from '@storybook/react-vite';
+import { Chat } from '..';
 declare const meta: Meta<typeof Chat>;
 export default meta;
 type Story = StoryFn<typeof Chat>;
-export declare const Light: Story;
-export declare const Dark: Story;
-export declare const System: Story;
+export declare const Modal: Story;
+export declare const Standalone: Story;
+export declare const Sidecar: Story;

package/dist/components/Chat/stories/ToolApproval.stories.d.ts

@@ -4,5 +4,7 @@ declare const meta: Meta<typeof Chat>;
 export default meta;
 type Story = StoryFn<typeof Chat>;
 export declare const SingleTool: Story;
+export declare const SingleToolWithFunction: Story;
 export declare const MultipleGroupedTools: Story;
 export declare const FrontendTool: Story;
+export declare const FrontendToolWithFunction: Story;

package/dist/components/assistant-ui/error-boundary.d.ts

@@ -0,0 +1,28 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    onReset?: () => void;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+    resetKey: number;
+}
+/**
+ * Global error boundary for the Elements library. Catches unexpected errors and renders a fallback UI.
+ * We wrap the assistant-modal, assistant-sidecar, and chat components with this error boundary.
+ * Each variant needs to have the error boundary rendered at the appropriate level e.g if using
+ * the widget variant, then the error screen must be rendered within the widget modal.
+ * TODO: We should add more granular error boundaries (e.g wrapping AssistantMessage, ThreadWelcome, etc.)
+ * TODO: We should also wrap ChatHistory, which may yield its own errors.
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleRetry: () => void;
+    render(): ReactNode;
+}
+export {};

package/dist/components/ui/dialog.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ container, ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
 declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {

package/dist/components/ui/tooltip.d.ts

@@ -3,5 +3,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
 declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, container, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+    container?: HTMLElement | null;
+}): import("react/jsx-runtime").JSX.Element;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/constants/tailwind.d.ts

@@ -0,0 +1 @@
+export declare const ROOT_SELECTOR = "gram-elements";

package/dist/contexts/portal-container-context.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const PortalContainerContext: import('react').Context<RefObject<HTMLElement | null> | null>;

package/dist/contexts/portal-container.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+import { PortalContainerContext } from './portal-container-context';
+export { PortalContainerContext };
+export declare function PortalContainerProvider({ containerRef, children, }: {
+    containerRef: RefObject<HTMLElement | null>;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;