@gram-ai/elements 1.18.5 → 1.18.6

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-20 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/contexts/ElementsProvider.tsx

@@ -0,0 +1,256 @@
+import { FrontendTools } from '@/components/FrontendTools'
+import { useMCPTools } from '@/hooks/useMCPTools'
+import { useToolApproval } from '@/hooks/useToolApproval'
+import { MODELS } from '@/lib/models'
+import {
+  clearFrontendToolApprovalConfig,
+  getEnabledTools,
+  setFrontendToolApprovalConfig,
+  toAISDKTools,
+  wrapToolsWithApproval,
+  type ApprovalHelpers,
+} from '@/lib/tools'
+import { recommended } from '@/plugins'
+import { ElementsConfig, Model } from '@/types'
+import { Plugin } from '@/types/plugins'
+import { AssistantRuntimeProvider } from '@assistant-ui/react'
+import {
+  frontendTools as convertFrontendToolsToAISDKTools,
+  useChatRuntime,
+} from '@assistant-ui/react-ai-sdk'
+import { createOpenRouter } from '@openrouter/ai-sdk-provider'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  convertToModelMessages,
+  smoothStream,
+  stepCountIs,
+  streamText,
+  ToolSet,
+  type ChatTransport,
+  type UIMessage,
+} from 'ai'
+import {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useAuth } from '../hooks/useAuth'
+import { ElementsContext } from './contexts'
+import { ToolApprovalProvider } from './ToolApprovalContext'
+import { getApiUrl } from '@/lib/api'
+
+export interface ElementsProviderProps {
+  children: ReactNode
+  config: ElementsConfig
+}
+
+const BASE_SYSTEM_PROMPT = `You are a helpful assistant that can answer questions and help with tasks.`
+
+function mergeInternalSystemPromptWith(
+  userSystemPrompt: string | undefined,
+  plugins: Plugin[]
+) {
+  return `
+  ${BASE_SYSTEM_PROMPT}
+
+  User-provided System Prompt:
+  ${userSystemPrompt ?? 'None provided'}
+
+  Utilities:
+  ${plugins.map((plugin) => `- ${plugin.language}: ${plugin.prompt}`).join('\n')}`
+}
+
+const ElementsProviderWithApproval = ({
+  children,
+  config,
+}: ElementsProviderProps) => {
+  const apiUrl = getApiUrl(config)
+  const auth = useAuth({
+    auth: config.api,
+    projectSlug: config.projectSlug,
+  })
+  const toolApproval = useToolApproval()
+
+  const [model, setModel] = useState<Model>(
+    config.model?.defaultModel ?? MODELS[0]
+  )
+  const [isExpanded, setIsExpanded] = useState(
+    config.modal?.defaultExpanded ?? false
+  )
+  const [isOpen, setIsOpen] = useState(config.modal?.defaultOpen)
+
+  // If there are any user provided plugins, use them, otherwise use the recommended plugins
+  const plugins = config.plugins ?? recommended
+
+  const systemPrompt = mergeInternalSystemPromptWith(
+    config.systemPrompt,
+    plugins
+  )
+
+  const { data: mcpTools, isLoading: mcpToolsLoading } = useMCPTools({
+    auth,
+    mcp: config.mcp,
+    environment: config.environment ?? {},
+  })
+
+  // Store approval helpers in ref so they can be used in async contexts
+  const approvalHelpersRef = useRef<ApprovalHelpers>({
+    requestApproval: toolApproval.requestApproval,
+    isToolApproved: toolApproval.isToolApproved,
+    whitelistTool: toolApproval.whitelistTool,
+  })
+
+  approvalHelpersRef.current = {
+    requestApproval: toolApproval.requestApproval,
+    isToolApproved: toolApproval.isToolApproved,
+    whitelistTool: toolApproval.whitelistTool,
+  }
+
+  const getApprovalHelpers = useCallback((): ApprovalHelpers => {
+    return {
+      requestApproval: (...args) =>
+        approvalHelpersRef.current.requestApproval(...args),
+      isToolApproved: (...args) =>
+        approvalHelpersRef.current.isToolApproved(...args),
+      whitelistTool: (...args) =>
+        approvalHelpersRef.current.whitelistTool(...args),
+    }
+  }, [])
+
+  // Set up frontend tool approval config for runtime checking
+  useEffect(() => {
+    if (config.tools?.toolsRequiringApproval?.length) {
+      setFrontendToolApprovalConfig(
+        getApprovalHelpers(),
+        config.tools.toolsRequiringApproval
+      )
+    }
+    return () => {
+      clearFrontendToolApprovalConfig()
+    }
+  }, [config.tools?.toolsRequiringApproval, getApprovalHelpers])
+
+  // Create custom transport
+  const transport = useMemo<ChatTransport<UIMessage> | undefined>(
+    () => ({
+      sendMessages: async ({ messages, abortSignal }) => {
+        const usingCustomModel = !!config.languageModel
+
+        if (auth.isLoading) {
+          throw new Error('Session is loading')
+        }
+
+        const context = runtime.thread.getModelContext()
+        const frontendTools = toAISDKTools(
+          getEnabledTools(context?.tools ?? {})
+        )
+
+        // Create OpenRouter model (only needed when not using custom model)
+        const openRouterModel = usingCustomModel
+          ? null
+          : createOpenRouter({
+              baseURL: apiUrl,
+              apiKey: 'unused, but must be set',
+              headers: auth.headers,
+            })
+
+        if (config.languageModel) {
+          console.log('Using custom language model', config.languageModel)
+        }
+
+        // Combine tools - MCP tools only available when not using custom model
+        const combinedTools: ToolSet = {
+          ...mcpTools,
+          ...convertFrontendToolsToAISDKTools(frontendTools),
+        } as ToolSet
+
+        // Wrap tools that require approval
+        const tools = wrapToolsWithApproval(
+          combinedTools,
+          config.tools?.toolsRequiringApproval,
+          getApprovalHelpers()
+        )
+
+        // Stream the response
+        const modelToUse = config.languageModel
+          ? config.languageModel
+          : openRouterModel!.chat(model)
+
+        try {
+          const result = streamText({
+            system: systemPrompt,
+            model: modelToUse,
+            messages: convertToModelMessages(messages),
+            tools,
+            stopWhen: stepCountIs(10),
+            experimental_transform: smoothStream({ delayInMs: 15 }),
+            abortSignal,
+            onError: ({ error }) => {
+              console.error('Stream error in onError callback:', error)
+            },
+          })
+
+          return result.toUIMessageStream()
+        } catch (error) {
+          console.error('Error creating stream:', error)
+          throw error
+        }
+      },
+      reconnectToStream: async () => {
+        // Not implemented for client-side streaming
+        throw new Error('Stream reconnection not supported')
+      },
+    }),
+    [
+      config,
+      config.languageModel,
+      model,
+      systemPrompt,
+      mcpTools,
+      mcpToolsLoading,
+      getApprovalHelpers,
+      apiUrl,
+      auth.headers,
+    ]
+  )
+
+  const runtime = useChatRuntime({
+    transport,
+  })
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ElementsContext.Provider
+        value={{
+          config,
+          setModel,
+          model,
+          isExpanded,
+          setIsExpanded,
+          isOpen: isOpen ?? false,
+          setIsOpen,
+          plugins,
+        }}
+      >
+        {children}
+
+        {/* Doesn't render anything, but is used to register frontend tools */}
+        <FrontendTools tools={config.tools?.frontendTools ?? {}} />
+      </ElementsContext.Provider>
+    </AssistantRuntimeProvider>
+  )
+}
+
+export const ElementsProvider = (props: ElementsProviderProps) => {
+  const queryClient = new QueryClient()
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ToolApprovalProvider>
+        <ElementsProviderWithApproval {...props} />
+      </ToolApprovalProvider>
+    </QueryClientProvider>
+  )
+}

package/src/contexts/ToolApprovalContext.tsx

@@ -0,0 +1,120 @@
+import { useState, useCallback, type ReactNode } from 'react'
+import { ToolApprovalContext } from './contexts'
+
+interface PendingApproval {
+  toolCallId: string
+  toolName: string
+  args: unknown
+  resolve: (approved: boolean) => void
+}
+
+interface ToolApprovalContextType {
+  pendingApprovals: Map<string, PendingApproval>
+  approvedTools: Set<string>
+  requestApproval: (
+    toolName: string,
+    toolCallId: string,
+    args: unknown
+  ) => Promise<boolean>
+  /** Whitelist a tool name so all future calls are auto-approved */
+  whitelistTool: (toolName: string) => void
+  /** Confirm a specific pending tool call approval */
+  confirmPendingApproval: (toolCallId: string) => void
+  /** Reject a specific pending tool call approval */
+  rejectPendingApproval: (toolCallId: string) => void
+  isToolApproved: (toolName: string) => boolean
+  getPendingApproval: (toolCallId: string) => PendingApproval | undefined
+}
+
+export function ToolApprovalProvider({ children }: { children: ReactNode }) {
+  const [pendingApprovals, setPendingApprovals] = useState<
+    Map<string, PendingApproval>
+  >(new Map())
+  const [approvedTools, setApprovedTools] = useState<Set<string>>(new Set())
+
+  const requestApproval = useCallback(
+    (toolName: string, toolCallId: string, args: unknown): Promise<boolean> => {
+      return new Promise((resolve) => {
+        const pending: PendingApproval = {
+          toolCallId,
+          toolName,
+          args,
+          resolve,
+        }
+
+        setPendingApprovals((prev) => {
+          const next = new Map(prev)
+          next.set(toolCallId, pending)
+          return next
+        })
+      })
+    },
+    []
+  )
+  const whitelistTool = useCallback((toolName: string) => {
+    setApprovedTools((prev) => {
+      const next = new Set(prev)
+      next.add(toolName)
+      return next
+    })
+  }, [])
+
+  const confirmPendingApproval = useCallback((toolCallId: string) => {
+    setPendingApprovals((prev) => {
+      const pending = prev.get(toolCallId)
+      if (pending) {
+        pending.resolve(true)
+        const next = new Map(prev)
+        next.delete(toolCallId)
+        return next
+      }
+      return prev
+    })
+  }, [])
+
+  const rejectPendingApproval = useCallback((toolCallId: string) => {
+    setPendingApprovals((prev) => {
+      const pending = prev.get(toolCallId)
+      if (pending) {
+        pending.resolve(false)
+        const next = new Map(prev)
+        next.delete(toolCallId)
+        return next
+      }
+      return prev
+    })
+  }, [])
+
+  const isToolApproved = useCallback(
+    (toolName: string) => {
+      return approvedTools.has(toolName)
+    },
+    [approvedTools]
+  )
+
+  const getPendingApproval = useCallback(
+    (toolCallId: string) => {
+      return pendingApprovals.get(toolCallId)
+    },
+    [pendingApprovals]
+  )
+
+  return (
+    <ToolApprovalContext.Provider
+      value={{
+        pendingApprovals,
+        approvedTools,
+        requestApproval,
+        whitelistTool,
+        confirmPendingApproval,
+        rejectPendingApproval,
+        isToolApproved,
+        getPendingApproval,
+      }}
+    >
+      {children}
+    </ToolApprovalContext.Provider>
+  )
+}
+
+export type { ToolApprovalContextType }

package/src/contexts/contexts.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+import type { ElementsContextType } from '@/types'
+import { ToolApprovalContextType } from './ToolApprovalContext'
+
+export const ElementsContext = createContext<ElementsContextType | undefined>(
+  undefined
+)
+
+export const ToolApprovalContext =
+  createContext<ToolApprovalContextType | null>(null)

package/src/global.css

@@ -0,0 +1,136 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "tw-shimmer";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  /* Theme: Radius - set via data-radius attribute */
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Theme: Radius variants via data attribute */
+[data-radius='sharp'] {
+  --radius: 0.25rem;
+}
+[data-radius='soft'] {
+  --radius: 0.625rem;
+}
+[data-radius='round'] {
+  --radius: 1rem;
+}
+[data-radius='pill'] {
+  --radius: 9999px;
+}

package/src/hooks/useAuth.ts

@@ -0,0 +1,71 @@
+import { isApiKeyAuth } from '@/lib/auth'
+import { AuthConfig } from '../types'
+import { useSession } from './useSession'
+
+export type Auth =
+  | {
+      headers: Record<string, string>
+      isLoading: false
+    }
+  | {
+      headers?: Record<string, string>
+      isLoading: true
+    }
+
+async function defaultGetSession(init: {
+  projectSlug: string
+}): Promise<string> {
+  const response = await fetch('/chat/session', {
+    method: 'POST',
+    headers: {
+      'Gram-Project': init.projectSlug,
+    },
+  })
+  const data = await response.json()
+  return data.client_token
+}
+
+/**
+ * Hook to fetch or retrieve the session token for the chat.
+ * @returns The session token string or null
+ */
+export const useAuth = ({
+  projectSlug,
+  auth,
+}: {
+  auth?: AuthConfig
+  projectSlug: string
+}): 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({
+    enabled: !isApiKeyAuth(auth),
+    getSession: !isApiKeyAuth(auth)
+      ? (auth?.sessionFn ?? defaultGetSession)
+      : null,
+    projectSlug,
+  })
+
+  if (isApiKeyAuth(auth)) {
+    return {
+      headers: {
+        'Gram-Project': projectSlug,
+        'Gram-Key': auth.UNSAFE_apiKey,
+      },
+      isLoading: false,
+    }
+  }
+
+  return !session
+    ? {
+        isLoading: true,
+      }
+    : {
+        headers: {
+          'Gram-Project': projectSlug,
+          'Gram-Chat-Session': session,
+        },
+        isLoading: false,
+      }
+}