@gram-ai/elements 1.18.6 → 1.18.8

package/dist/hooks/useAuth.d.ts

@@ -1,4 +1,4 @@
-import { AuthConfig } from '../types';
+import { ApiConfig } from '../types';
 export type Auth = {
     headers: Record<string, string>;
     isLoading: false;
@@ -11,6 +11,6 @@ export type Auth = {
  * @returns The session token string or null
  */
 export declare const useAuth: ({ projectSlug, auth, }: {
-    auth?: AuthConfig;
+    auth?: ApiConfig;
     projectSlug: string;
 }) => Auth;

package/dist/lib/auth.d.ts

@@ -1,5 +1,6 @@
-import { ApiKeyAuthConfig, AuthConfig } from '../types';
+import { ApiKeyAuthConfig, ApiConfig, SessionAuthConfig } from '../types';
 /**
  * Checks if the auth config is an API key auth config
  */
-export declare function isApiKeyAuth(auth: AuthConfig | undefined): auth is ApiKeyAuthConfig;
+export declare function isApiKeyAuth(auth: ApiConfig | undefined): auth is ApiKeyAuthConfig;
+export declare function hasExplicitSessionAuth(auth: ApiConfig | undefined): auth is SessionAuthConfig;

package/dist/types/index.d.ts

@@ -231,18 +231,36 @@ export interface ElementsConfig {
      * }
      */
     tools?: ToolsConfig;
-    api?: {
-        /**
-         * The Gram API URL to use for the Elements library.
-         *
-         * @example
-         * const config: ElementsConfig = {
-         *   apiURL: 'https://api.getgram.ai',
-         * }
-         */
-        url?: string;
-    } & AuthConfig;
+    /**
+     * The API configuration to use for the Elements library.
+     *
+     * Use this to override the default API URL, or add explicit auth configuration
+     *
+     * @example
+     * const config: ElementsConfig = {
+     *   api: {
+     *     url: 'https://api.getgram.ai',
+     *   },
+     * }
+     */
+    api?: ApiConfig;
 }
+/**
+ * Base API configuration with the server URL.
+ */
+export type BaseApiConfig = {
+    /**
+     * The Gram API URL to use for the Elements library.
+     *
+     * @example
+     * const config: ElementsConfig = {
+     *   api: {
+     *     url: 'https://api.getgram.ai',
+     *   },
+     * }
+     */
+    url?: string;
+};
 export type SessionAuthConfig = {
     /**
      * The function to use to retrieve the session token from the backend endpoint.
@@ -287,7 +305,10 @@ export type ApiKeyAuthConfig = {
      */
     UNSAFE_apiKey: string;
 };
-export type AuthConfig = SessionAuthConfig | ApiKeyAuthConfig | undefined;
+/**
+ * API configuration - can be just the URL, or URL with session auth, or URL with API key auth.
+ */
+export type ApiConfig = BaseApiConfig | (BaseApiConfig & SessionAuthConfig) | (BaseApiConfig & ApiKeyAuthConfig);
 /**
  * The LLM model to use for the Elements library.
  *

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

package/src/components/Chat/stories/{Customization.stories.tsx → ConnectionConfiguration.stories.tsx}

@@ -1,12 +1,10 @@
-import React from 'react'
 import { Chat } from '..'
 import type { Meta, StoryFn } from '@storybook/react-vite'
-import { useAssistantState } from '@assistant-ui/react'
 import { google } from '@ai-sdk/google'
-import { ComponentOverrides } from '../../../types'
+import { GetSessionFn } from '@/types'
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/Customization',
+  title: 'Chat/Connection Configuration',
   component: Chat,
   parameters: {
     layout: 'fullscreen',
@@ -35,26 +33,47 @@ SystemPrompt.parameters = {
   },
 }
 
-const customComponents: ComponentOverrides = {
-  Text: () => {
-    const message = useAssistantState(({ message }) => message)
-    return (
-      <div className="text-red-500">
-        {message.parts
-          .map((part) => (part.type === 'text' ? part.text : ''))
-          .join('')}
-      </div>
-    )
+export const WithImplicitSessionAuth: Story = () => <Chat />
+WithImplicitSessionAuth.storyName = 'With Implicit Session Auth'
+WithImplicitSessionAuth.parameters = {
+  elements: {
+    config: {
+      // This story tests the case where no API config is provided, which should default to implicit session auth
+      api: undefined,
+    },
+  },
+}
+
+const sessionFn: GetSessionFn = async () => {
+  const response = await fetch('/chat/session', {
+    method: 'POST',
+    headers: {
+      'Gram-Project':
+        import.meta.env.VITE_GRAM_ELEMENTS_STORYBOOK_PROJECT_SLUG ?? '',
+    },
+  })
+  const data = await response.json()
+  return data.client_token
+}
+
+export const WithExplicitSessionAuth: Story = () => <Chat />
+WithExplicitSessionAuth.storyName = 'With Explicit Session Auth'
+WithExplicitSessionAuth.parameters = {
+  elements: {
+    config: {
+      api: { sessionFn },
+    },
   },
 }
 
-export const ComponentOverridesStory: Story = () => <Chat />
-ComponentOverridesStory.storyName = 'Component Overrides'
-ComponentOverridesStory.parameters = {
+// NOTE: api key auth is currently non functional due to concerns with security
+// Update this story when api key auth is secure
+export const WithExplicitAPIKeyAuth: Story = () => <Chat />
+WithExplicitAPIKeyAuth.storyName = 'With Explicit API Key Auth'
+WithExplicitAPIKeyAuth.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
-      components: customComponents,
+      api: { UNSAFE_apiKey: 'test' },
     },
   },
 }

package/src/components/Chat/stories/CustomComponents.stories.tsx

@@ -0,0 +1,46 @@
+import { Chat, ComponentOverrides } from '@/index'
+import { useAssistantState } from '@assistant-ui/react'
+import { Meta, StoryFn } from '@storybook/react-vite'
+
+const meta: Meta<typeof Chat> = {
+  title: 'Chat/Customization',
+  component: Chat,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div className="m-auto flex h-screen w-full max-w-3xl flex-col">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Chat>
+
+export default meta
+
+type Story = StoryFn<typeof Chat>
+
+const customComponents: ComponentOverrides = {
+  Text: () => {
+    const message = useAssistantState(({ message }) => message)
+    return (
+      <div className="text-red-500">
+        {message.parts
+          .map((part) => (part.type === 'text' ? part.text : ''))
+          .join('')}
+      </div>
+    )
+  },
+}
+
+export const ComponentOverridesStory: Story = () => <Chat />
+ComponentOverridesStory.storyName = 'Component Overrides'
+ComponentOverridesStory.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      components: customComponents,
+    },
+  },
+}

package/src/components/assistant-ui/reasoning.tsx

@@ -11,10 +11,10 @@ import {
 } from 'react'
 
 import {
-  useScrollLock,
   useAssistantState,
-  type ReasoningMessagePartComponent,
+  useScrollLock,
   type ReasoningGroupComponent,
+  type ReasoningMessagePartComponent,
 } from '@assistant-ui/react'
 
 import { MarkdownText } from '@/components/assistant-ui/markdown-text'

package/src/contexts/ElementsProvider.tsx

@@ -1,6 +1,7 @@
 import { FrontendTools } from '@/components/FrontendTools'
 import { useMCPTools } from '@/hooks/useMCPTools'
 import { useToolApproval } from '@/hooks/useToolApproval'
+import { getApiUrl } from '@/lib/api'
 import { MODELS } from '@/lib/models'
 import {
   clearFrontendToolApprovalConfig,
@@ -40,7 +41,6 @@ import {
 import { useAuth } from '../hooks/useAuth'
 import { ElementsContext } from './contexts'
 import { ToolApprovalProvider } from './ToolApprovalContext'
-import { getApiUrl } from '@/lib/api'
 
 export interface ElementsProviderProps {
   children: ReactNode
@@ -63,6 +63,33 @@ function mergeInternalSystemPromptWith(
   ${plugins.map((plugin) => `- ${plugin.language}: ${plugin.prompt}`).join('\n')}`
 }
 
+/**
+ * Cleans messages before sending to the model to work around an AI SDK bug.
+ * Strips callProviderMetadata from all parts (AI SDK bug #9731)
+ */
+function cleanMessagesForModel(messages: UIMessage[]): UIMessage[] {
+  return messages.map((message) => {
+    const partsArray = message.parts
+    if (!Array.isArray(partsArray)) {
+      return message
+    }
+
+    // Process each part: strip providerOptions/providerMetadata and filter reasoning
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cleanedParts = partsArray.map((part: any) => {
+      // Strip providerOptions and providerMetadata from all remaining parts
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-vars
+      const { callProviderMetadata, ...cleanPart } = part
+      return cleanPart
+    })
+
+    return {
+      ...message,
+      parts: cleanedParts,
+    }
+  })
+}
+
 const ElementsProviderWithApproval = ({
   children,
   config,
@@ -180,10 +207,14 @@ const ElementsProviderWithApproval = ({
           : openRouterModel!.chat(model)
 
         try {
+          // This works around AI SDK bug where these fields cause validation failures
+          const cleanedMessages = cleanMessagesForModel(messages)
+          const modelMessages = convertToModelMessages(cleanedMessages)
+
           const result = streamText({
             system: systemPrompt,
             model: modelToUse,
-            messages: convertToModelMessages(messages),
+            messages: modelMessages,
             tools,
             stopWhen: stepCountIs(10),
             experimental_transform: smoothStream({ delayInMs: 15 }),

package/src/hooks/useAuth.ts

@@ -1,6 +1,7 @@
-import { isApiKeyAuth } from '@/lib/auth'
-import { AuthConfig } from '../types'
+import { hasExplicitSessionAuth, isApiKeyAuth } from '@/lib/auth'
+import { ApiConfig } from '../types'
 import { useSession } from './useSession'
+import { useMemo } from 'react'
 
 export type Auth =
   | {
@@ -33,17 +34,24 @@ export const useAuth = ({
   projectSlug,
   auth,
 }: {
-  auth?: AuthConfig
+  auth?: ApiConfig
   projectSlug: string
 }): Auth => {
+  const getSession = useMemo(() => {
+    if (isApiKeyAuth(auth)) {
+      return null
+    }
+    return !isApiKeyAuth(auth) && hasExplicitSessionAuth(auth)
+      ? auth.sessionFn
+      : defaultGetSession
+  }, [auth])
   // The session request is only neccessary if we are not using an API key auth
   // configuration. If a custom session fetcher is provided, we use it,
   // otherwise we fallback to the default session fetcher
   const session = useSession({
+    // We want to check it's NOT API key auth, as the default auth scheme is session auth (if the user hasn't provided an explicit API config, we have a session auth config by default)
     enabled: !isApiKeyAuth(auth),
-    getSession: !isApiKeyAuth(auth)
-      ? (auth?.sessionFn ?? defaultGetSession)
-      : null,
+    getSession,
     projectSlug,
   })
 

package/src/lib/auth.ts

@@ -1,10 +1,17 @@
-import { ApiKeyAuthConfig, AuthConfig } from '@/types'
+import { ApiKeyAuthConfig, ApiConfig, SessionAuthConfig } from '@/types'
 
 /**
  * Checks if the auth config is an API key auth config
  */
 export function isApiKeyAuth(
-  auth: AuthConfig | undefined
+  auth: ApiConfig | undefined
 ): auth is ApiKeyAuthConfig {
   return !!auth && 'UNSAFE_apiKey' in auth
 }
+
+export function hasExplicitSessionAuth(
+  auth: ApiConfig | undefined
+): auth is SessionAuthConfig {
+  if (!auth) return false
+  return 'sessionFn' in auth
+}

package/src/types/index.ts

@@ -261,17 +261,36 @@ export interface ElementsConfig {
    */
   tools?: ToolsConfig
 
-  api?: {
-    /**
-     * The Gram API URL to use for the Elements library.
-     *
-     * @example
-     * const config: ElementsConfig = {
-     *   apiURL: 'https://api.getgram.ai',
-     * }
-     */
-    url?: string
-  } & AuthConfig
+  /**
+   * The API configuration to use for the Elements library.
+   *
+   * Use this to override the default API URL, or add explicit auth configuration
+   *
+   * @example
+   * const config: ElementsConfig = {
+   *   api: {
+   *     url: 'https://api.getgram.ai',
+   *   },
+   * }
+   */
+  api?: ApiConfig
+}
+
+/**
+ * Base API configuration with the server URL.
+ */
+export type BaseApiConfig = {
+  /**
+   * The Gram API URL to use for the Elements library.
+   *
+   * @example
+   * const config: ElementsConfig = {
+   *   api: {
+   *     url: 'https://api.getgram.ai',
+   *   },
+   * }
+   */
+  url?: string
 }
 
 export type SessionAuthConfig = {
@@ -320,7 +339,13 @@ export type ApiKeyAuthConfig = {
   UNSAFE_apiKey: string
 }
 
-export type AuthConfig = SessionAuthConfig | ApiKeyAuthConfig | undefined
+/**
+ * API configuration - can be just the URL, or URL with session auth, or URL with API key auth.
+ */
+export type ApiConfig =
+  | BaseApiConfig
+  | (BaseApiConfig & SessionAuthConfig)
+  | (BaseApiConfig & ApiKeyAuthConfig)
 
 /**
  * The LLM model to use for the Elements library.