@gram-ai/elements 1.20.2 → 1.21.2

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

@@ -10,13 +10,6 @@ const meta: Meta<typeof 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
@@ -44,6 +37,30 @@ SingleTool.parameters = {
   },
 }
 
+export const SingleToolWithFunction: Story = () => <Chat />
+SingleToolWithFunction.storyName =
+  'Single Tool Requiring Approval with Function'
+SingleToolWithFunction.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      tools: {
+        toolsRequiringApproval: ({ toolName }: { toolName: string }) =>
+          toolName.endsWith('salutation'),
+      },
+      welcome: {
+        suggestions: [
+          {
+            title: 'Call a tool requiring approval',
+            label: 'Get a salutation',
+            action: 'Get a salutation',
+          },
+        ],
+      },
+    },
+  },
+}
+
 export const MultipleGroupedTools: Story = () => <Chat />
 MultipleGroupedTools.storyName = 'Multiple Grouped Tools'
 MultipleGroupedTools.parameters = {
@@ -108,3 +125,30 @@ FrontendTool.parameters = {
     },
   },
 }
+
+export const FrontendToolWithFunction: Story = () => <Chat />
+FrontendToolWithFunction.storyName =
+  'Frontend Tool Requiring Approval with Function'
+FrontendToolWithFunction.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      tools: {
+        frontendTools: {
+          deleteFile,
+        },
+        toolsRequiringApproval: ({ toolName }: { toolName: string }) =>
+          toolName.startsWith('delete'),
+      },
+      welcome: {
+        suggestions: [
+          {
+            title: 'Delete a file',
+            label: 'Delete a file',
+            action: 'Delete file with ID 123',
+          },
+        ],
+      },
+    },
+  },
+}

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

@@ -9,13 +9,6 @@ const meta: Meta<typeof 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

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

@@ -1,6 +1,7 @@
 import { Chat } from '..'
 import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite'
 import { ThreadList } from '@/components/assistant-ui/thread-list'
+import { ROOT_SELECTOR } from '@/constants/tailwind'
 
 const meta: Meta<typeof Chat> = {
   title: 'Chat/Variants',
@@ -46,8 +47,10 @@ export const StandaloneWithHistory: StoryObj<typeof Chat> = {
 }
 StandaloneWithHistory.decorators = [
   (Story) => (
-    <div className="m-auto flex h-screen w-full items-center justify-center border bg-linear-to-r from-violet-600 to-indigo-800">
-      <Story />
+    <div className={ROOT_SELECTOR}>
+      <div className="m-auto flex h-screen w-full items-center justify-center border bg-linear-to-r from-violet-600 to-indigo-800">
+        <Story />
+      </div>
     </div>
   ),
 ]

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Chat } from '..'
 import type { Meta, StoryFn } from '@storybook/react-vite'
 
@@ -8,13 +7,6 @@ const meta: Meta<typeof 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

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

@@ -37,10 +37,7 @@ export const AssistantSidecar: FC<AssistantSidecarProps> = ({ className }) => {
   return (
     <LazyMotion features={domMax}>
       <m.div
-        initial={{
-          width: dimensions?.default?.width ?? '400px',
-          height: dimensions?.default?.height ?? '100vh',
-        }}
+        initial={false}
         animate={{
           width: isExpanded
             ? (dimensions?.expanded?.width ?? '800px')

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

@@ -87,10 +87,7 @@ const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
 
   return (
     <Dialog>
-      <DialogTrigger
-        className="aui-attachment-preview-trigger hover:bg-accent/50 cursor-pointer transition-colors"
-        asChild
-      >
+      <DialogTrigger className="aui-attachment-preview-trigger" asChild>
         {children}
       </DialogTrigger>
       <DialogContent className="aui-attachment-preview-dialog-content [&_svg]:text-background [&>button]:bg-foreground/60 [&>button]:hover:[&_svg]:text-destructive p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:p-1 [&>button]:opacity-100 [&>button]:!ring-0">

package/src/components/assistant-ui/error-boundary.tsx

@@ -2,6 +2,7 @@
 
 import { AlertCircle } from 'lucide-react'
 import { Component, type ErrorInfo, type ReactNode } from 'react'
+import { trackError } from '@/lib/errorTracking'
 import { cn } from '@/lib/utils'
 import { Button } from '../ui/button'
 
@@ -81,6 +82,11 @@ export class ErrorBoundary extends Component<
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    // Track error to Datadog RUM
+    trackError(error, {
+      source: 'error-boundary',
+      componentStack: errorInfo.componentStack ?? undefined,
+    })
     this.props.onError?.(error, errorInfo)
   }
 

package/src/components/assistant-ui/thread-list.tsx

@@ -11,6 +11,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { useRadius } from '@/hooks/useRadius'
 import { cn } from '@/lib/utils'
 import { useDensity } from '@/hooks/useDensity'
+import { ROOT_SELECTOR } from '@/constants/tailwind'
 
 interface ThreadListProps {
   className?: string
@@ -23,7 +24,8 @@ export const ThreadList: FC<ThreadListProps> = ({ className }) => {
       className={cn(
         'aui-root aui-thread-list-root bg-background flex flex-col items-stretch',
         d('gap-sm'),
-        className
+        className,
+        ROOT_SELECTOR
       )}
     >
       <div

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

@@ -6,7 +6,6 @@ import {
   ChevronRightIcon,
   CopyIcon,
   PencilIcon,
-  RefreshCwIcon,
   Settings2,
   Square,
 } from 'lucide-react'
@@ -52,19 +51,18 @@ import {
 } from '../ui/tooltip'
 import { ToolGroup } from './tool-group'
 
-const ApiKeyWarning = () => (
+const StaticSessionWarning = () => (
   <div className="m-2 rounded-md border border-amber-500 bg-amber-100 px-4 py-3 text-sm text-amber-800 dark:border-amber-600 dark:bg-amber-900/30 dark:text-amber-200">
-    <strong>Warning:</strong> You are using an API key directly in the client.
-    Please{' '}
+    <strong>Warning:</strong> You are using a static session token in the
+    client. It will expire shortly. Please{' '}
     <a
       href="https://github.com/speakeasy-api/gram/tree/main/elements#setting-up-your-backend"
       target="_blank"
       rel="noopener noreferrer"
       className="text-amber-700 underline hover:text-amber-800 dark:text-amber-300 dark:hover:text-amber-200"
     >
-      set up a session endpoint
-    </a>{' '}
-    before deploying to production.
+      set up a session endpoint to avoid this warning.
+    </a>
   </div>
 )
 
@@ -77,7 +75,7 @@ export const Thread: FC<ThreadProps> = ({ className }) => {
   const d = useDensity()
   const { config } = useElements()
   const components = config.components ?? {}
-  const showApiKeyWarning = config.api && 'UNSAFE_apiKey' in config.api
+  const showStaticSessionWarning = config.api && 'sessionToken' in config.api
 
   return (
     <LazyMotion features={domAnimation}>
@@ -103,7 +101,7 @@ export const Thread: FC<ThreadProps> = ({ className }) => {
               )}
             </ThreadPrimitive.If>
 
-            {showApiKeyWarning && <ApiKeyWarning />}
+            {showStaticSessionWarning && <StaticSessionWarning />}
 
             <ThreadPrimitive.Messages
               components={{
@@ -495,7 +493,7 @@ const AssistantMessage: FC = () => {
         </div>
 
         <div className="aui-assistant-message-footer mt-2 ml-2 flex">
-          <BranchPicker />
+          {/* <BranchPicker /> */}
           <AssistantActionBar />
         </div>
       </div>
@@ -525,11 +523,11 @@ const AssistantActionBar: FC = () => {
           </MessagePrimitive.If>
         </TooltipIconButton>
       </ActionBarPrimitive.Copy>
-      <ActionBarPrimitive.Reload asChild>
+      {/* <ActionBarPrimitive.Reload asChild>
         <TooltipIconButton tooltip="Refresh">
           <RefreshCwIcon />
         </TooltipIconButton>
-      </ActionBarPrimitive.Reload>
+      </ActionBarPrimitive.Reload> */}
     </ActionBarPrimitive.Root>
   )
 }

package/src/components/ui/dialog.tsx

@@ -3,6 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { XIcon } from 'lucide-react'
 
 import { cn } from '@/lib/utils'
+import { usePortalContainer } from '@/hooks/usePortalContainer'
 
 function Dialog({
   ...props
@@ -17,9 +18,17 @@ function DialogTrigger({
 }
 
 function DialogPortal({
+  container,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  const portalContainer = usePortalContainer()
+  return (
+    <DialogPrimitive.Portal
+      data-slot="dialog-portal"
+      container={container ?? portalContainer}
+      {...props}
+    />
+  )
 }
 
 function DialogClose({

package/src/components/ui/popover.tsx

@@ -22,18 +22,16 @@ function PopoverContent({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
   return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-20 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      data-slot="popover-content"
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-20 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+        className
+      )}
+      {...props}
+    />
   )
 }
 

package/src/components/ui/tooltip.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 
 import { cn } from '@/lib/utils'
+import { usePortalContainer } from '@/hooks/usePortalContainer'
 
 function TooltipProvider({
   delayDuration = 0,
@@ -38,10 +39,14 @@ function TooltipContent({
   className,
   sideOffset = 0,
   children,
+  container,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+  container?: HTMLElement | null
+}) {
+  const portalContainer = usePortalContainer()
   return (
-    <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal container={container ?? portalContainer}>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}

package/src/constants/tailwind.ts

@@ -0,0 +1,2 @@
+// Used to scope elements styles to the Elements library
+export const ROOT_SELECTOR = 'gram-elements'

package/src/contexts/ElementsProvider.tsx

@@ -2,6 +2,7 @@ import { FrontendTools } from '@/components/FrontendTools'
 import { useMCPTools } from '@/hooks/useMCPTools'
 import { useToolApproval } from '@/hooks/useToolApproval'
 import { getApiUrl } from '@/lib/api'
+import { initErrorTracking, trackError } from '@/lib/errorTracking'
 import { MODELS } from '@/lib/models'
 import {
   clearFrontendToolApprovalConfig,
@@ -125,6 +126,15 @@ const ElementsProviderWithApproval = ({
     plugins
   )
 
+  // Initialize error tracking on mount
+  useEffect(() => {
+    initErrorTracking({
+      enabled: config.errorTracking?.enabled,
+      projectSlug: config.projectSlug,
+      variant: config.variant,
+    })
+  }, [])
+
   const { data: mcpTools } = useMCPTools({
     auth,
     mcp: config.mcp,
@@ -157,7 +167,7 @@ const ElementsProviderWithApproval = ({
 
   // Set up frontend tool approval config for runtime checking
   useEffect(() => {
-    if (config.tools?.toolsRequiringApproval?.length) {
+    if (config.tools?.toolsRequiringApproval) {
       setFrontendToolApprovalConfig(
         getApprovalHelpers(),
         config.tools.toolsRequiringApproval
@@ -249,12 +259,14 @@ const ElementsProviderWithApproval = ({
             abortSignal,
             onError: ({ error }) => {
               console.error('Stream error in onError callback:', error)
+              trackError(error, { source: 'streaming' })
             },
           })
 
           return result.toUIMessageStream()
         } catch (error) {
           console.error('Error creating stream:', error)
+          trackError(error, { source: 'stream-creation' })
           throw error
         }
       },

package/src/contexts/portal-container-context.ts

@@ -0,0 +1,4 @@
+import { createContext, type RefObject } from 'react'
+
+export const PortalContainerContext =
+  createContext<RefObject<HTMLElement | null> | null>(null)

package/src/contexts/portal-container.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { type RefObject } from 'react'
+import { PortalContainerContext } from './portal-container-context'
+
+export { PortalContainerContext }
+
+export function PortalContainerProvider({
+  containerRef,
+  children,
+}: {
+  containerRef: RefObject<HTMLElement | null>
+  children: React.ReactNode
+}) {
+  return (
+    <PortalContainerContext.Provider value={containerRef}>
+      {children}
+    </PortalContainerContext.Provider>
+  )
+}

package/src/global.css

@@ -1,6 +1,7 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "tw-shimmer";
+@import 'tw-animate-css';
+@import 'tw-shimmer';
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
 
 @custom-variant dark (&:is(.dark *));
 
@@ -42,7 +43,20 @@
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
-:root {
+/* Scope ALL variables to .gram-elements instead of :root */
+.gram-elements {
+  /* Scoped preflight/base styles */
+  font-family:
+    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.5;
+  -webkit-tap-highlight-color: transparent;
+  tab-size: 4;
+
   /* Theme: Radius - set via data-radius attribute */
   --radius: 0.625rem;
   --background: oklch(1 0 0);
@@ -78,7 +92,9 @@
   --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
-.dark {
+/* Dark mode scoped to .gram-elements */
+.gram-elements.dark,
+.dark .gram-elements {
   --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.21 0.006 285.885);
@@ -113,24 +129,121 @@
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
+  .gram-elements {
+    @tailwind utilities;
+
+    /* We can't use tailwind's preflight styles here because we need to scope them to .gram-elements so therefore we just include a version of them inline here */
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+      border-width: 0;
+      border-style: solid;
+      @apply border-border outline-ring/50;
+    }
+
+    /* Reset margins and padding for common elements */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    blockquote,
+    pre,
+    ul,
+    ol,
+    figure {
+      margin: 0;
+      padding: 0;
+    }
+
+    /* List style reset */
+    ul,
+    ol {
+      list-style: none;
+    }
+
+    /* Image defaults */
+    img,
+    svg,
+    video,
+    canvas,
+    audio,
+    iframe,
+    embed,
+    object {
+      display: block;
+    }
+
+    img,
+    video {
+      max-width: 100%;
+      height: auto;
+    }
+
+    /* Button/input reset */
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+      font-family: inherit;
+      font-feature-settings: inherit;
+      font-variation-settings: inherit;
+      font-size: 100%;
+      font-weight: inherit;
+      line-height: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+      margin: 0;
+      padding: 0;
+    }
+
+    button,
+    select {
+      text-transform: none;
+    }
+
+    button,
+    input:where([type='button']),
+    input:where([type='reset']),
+    input:where([type='submit']) {
+      appearance: button;
+      -webkit-appearance: button;
+      background-color: transparent;
+      background-image: none;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: inherit;
+    }
+
+    /* Table reset */
+    table {
+      text-indent: 0;
+      border-color: inherit;
+      border-collapse: collapse;
+    }
   }
 }
 
-/* Theme: Radius variants via data attribute */
-[data-radius='sharp'] {
+/* Theme: Radius variants via data attribute - scoped */
+.gram-elements[data-radius='sharp'],
+[data-radius='sharp'] .gram-elements {
   --radius: 0.25rem;
 }
-[data-radius='soft'] {
+.gram-elements[data-radius='soft'],
+[data-radius='soft'] .gram-elements {
   --radius: 0.625rem;
 }
-[data-radius='round'] {
+.gram-elements[data-radius='round'],
+[data-radius='round'] .gram-elements {
   --radius: 1rem;
 }
-[data-radius='pill'] {
+.gram-elements[data-radius='pill'],
+[data-radius='pill'] .gram-elements {
   --radius: 9999px;
-}
+}

package/src/hooks/useAuth.ts

@@ -1,7 +1,7 @@
-import { hasExplicitSessionAuth, isApiKeyAuth } from '@/lib/auth'
+import { hasExplicitSessionAuth, isStaticSessionAuth } from '@/lib/auth'
+import { useMemo } from 'react'
 import { ApiConfig } from '../types'
 import { useSession } from './useSession'
-import { useMemo } from 'react'
 
 export type Auth =
   | {
@@ -38,33 +38,23 @@ export const useAuth = ({
   projectSlug: string
 }): Auth => {
   const getSession = useMemo(() => {
-    if (isApiKeyAuth(auth)) {
-      return null
+    if (isStaticSessionAuth(auth)) {
+      return () => Promise.resolve(auth.sessionToken)
     }
-    return !isApiKeyAuth(auth) && hasExplicitSessionAuth(auth)
+    return !isStaticSessionAuth(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,
     projectSlug,
   })
 
-  if (isApiKeyAuth(auth)) {
-    return {
-      headers: {
-        'Gram-Project': projectSlug,
-        'Gram-Key': auth.UNSAFE_apiKey,
-      },
-      isLoading: false,
-    }
-  }
-
   return !session
     ? {
         isLoading: true,

package/src/hooks/usePortalContainer.ts

@@ -0,0 +1,16 @@
+'use client'
+
+import { useContext } from 'react'
+import { PortalContainerContext } from '@/contexts/portal-container-context'
+
+/**
+ * Because we do not want Tailwind to leak from the Elements library, and
+ * because some UI elements such as Dialogs and Tooltips need to be rendered in
+ * a different container than the root element, we need to use a portal
+ * container, which renders any tooltips, dialogs etc within the .gram-elements
+ * scope so that they still inherit the Elements CSS
+ */
+export function usePortalContainer(): HTMLElement | null {
+  const ref = useContext(PortalContainerContext)
+  return ref?.current ?? null
+}