@gram-ai/elements 1.35.0 → 1.37.0

package/src/components/ui/tool-ui.tsx

@@ -711,6 +711,8 @@ interface ToolUIGroupProps {
   status?: "running" | "complete";
   /** Whether the group starts expanded */
   defaultExpanded?: boolean;
+  /** Render without the group header, showing children directly. */
+  headerless?: boolean;
   /** Child tool UI components */
   children: React.ReactNode;
   /** Additional class names */
@@ -722,11 +724,23 @@ function ToolUIGroup({
   icon,
   status = "complete",
   defaultExpanded = false,
+  headerless = false,
   children,
   className,
 }: ToolUIGroupProps): React.JSX.Element {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
+  // A headerless group shows its children unconditionally; when it gains a
+  // header mid-stream, start expanded — collapsing would hide content the
+  // user was already looking at.
+  const [prevHeaderless, setPrevHeaderless] = useState(headerless);
+  if (prevHeaderless !== headerless) {
+    setPrevHeaderless(headerless);
+    if (prevHeaderless) setIsExpanded(true);
+  }
+
+  const showChildren = headerless || isExpanded;
+
   return (
     <div
       data-slot="tool-ui-group"
@@ -736,40 +750,45 @@ function ToolUIGroup({
       )}
     >
       {/* Group header */}
-      <button
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-accent/50"
-      >
-        {icon || (
-          <StatusIndicator
-            status={status === "running" ? "running" : "complete"}
-          />
-        )}
-        <span
-          className={cn(
-            "flex-1 text-sm font-medium",
-            status === "running" && "shimmer",
-          )}
+      {!headerless && (
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          aria-expanded={isExpanded}
+          className="flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-accent/50"
         >
-          {title}
-        </span>
-        <ChevronDownIcon
-          className={cn(
-            "size-4 text-muted-foreground transition-transform duration-200",
-            isExpanded && "rotate-180",
+          {icon || (
+            <StatusIndicator
+              status={status === "running" ? "running" : "complete"}
+            />
           )}
-        />
-      </button>
-
-      {/* Expandable children */}
-      {isExpanded && (
-        <div
-          data-slot="tool-ui-group-content"
-          className="border-t border-border"
-        >
-          {children}
-        </div>
+          <span
+            className={cn(
+              "flex-1 text-sm font-medium",
+              status === "running" && "shimmer",
+            )}
+          >
+            {title}
+          </span>
+          <ChevronDownIcon
+            className={cn(
+              "size-4 text-muted-foreground transition-transform duration-200",
+              isExpanded && "rotate-180",
+            )}
+          />
+        </button>
       )}
+
+      {/* Collapsed children are hidden, not unmounted — unmounting would
+          reset their state (expansion, async syntax highlighting). */}
+      <div
+        data-slot="tool-ui-group-content"
+        className={cn(
+          !headerless && "border-t border-border",
+          !showChildren && "hidden",
+        )}
+      >
+        {children}
+      </div>
     </div>
   );
 }

package/src/contexts/ElementsProvider.tsx

@@ -190,6 +190,13 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
   // Ref to access ensureValidHeaders in async transport without stale closures
   const ensureValidHeadersRef = useRef(auth.ensureValidHeaders);
   ensureValidHeadersRef.current = auth.ensureValidHeaders;
+  // Stable async header resolution for the thread-list adapter: awaits the
+  // session fetch when auth hasn't settled yet, so the history runtime can
+  // mount before auth resolves.
+  const getValidHeaders = useCallback(
+    () => ensureValidHeadersRef.current(),
+    [],
+  );
   const toolApproval = useToolApproval();
 
   const [model, setModel] = useState<Model>(
@@ -581,12 +588,20 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
     };
   }, [mcpHeaders, setCurrentChatId]);
   const configTransport = config.transport;
-  const transport = useMemo<ChatTransport<UIMessage>>(() => {
+  // Resolved separately from `defaultTransport` so that churn in the default
+  // transport's dependencies (MCP tool discovery settling, connection status,
+  // auth refresh) cannot change the transport identity while a custom
+  // transport is in use. Transport identity feeds the per-thread runtime hook
+  // (`useChatRuntimeHook` → `setRuntimeHook`), and an identity change there
+  // rebuilds the thread runtimes — wiping in-flight optimistic messages, e.g.
+  // a message sent right after a cold open while MCP tools are still loading.
+  const customTransport = useMemo<ChatTransport<UIMessage> | null>(() => {
     if (typeof configTransport === "function") {
       return configTransport({ getChatId, adoptChatId });
     }
-    return configTransport ?? defaultTransport;
-  }, [configTransport, defaultTransport, getChatId, adoptChatId]);
+    return configTransport ?? null;
+  }, [configTransport, getChatId, adoptChatId]);
+  const transport = customTransport ?? defaultTransport;
 
   const historyEnabled = config.history?.enabled ?? false;
 
@@ -629,12 +644,20 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
 
   // Render the appropriate runtime provider based on history config.
   // We use separate components to avoid conditional hook calls.
-  if (historyEnabled && !auth.isLoading) {
+  //
+  // The history branch must NOT wait for auth: gating it on `!auth.isLoading`
+  // would mount the without-history runtime first and swap it for the history
+  // one when auth settles — replacing the runtime and wiping any message sent
+  // into the first one (e.g. a prompt queued before a cold open). Instead the
+  // history runtime mounts immediately and its adapter awaits auth via
+  // `getHeaders` before issuing requests.
+  if (historyEnabled) {
     return (
       <ElementsProviderWithHistory
         transport={transport}
         apiUrl={apiUrl}
-        headers={auth.headers}
+        headers={auth.headers ?? {}}
+        getHeaders={getValidHeaders}
         contextValue={contextValue}
         runtimeRef={runtimeRef}
         frontendTools={frontendTools}
@@ -676,6 +699,7 @@ interface ElementsProviderWithHistoryProps {
   transport: ChatTransport<UIMessage>;
   apiUrl: string;
   headers: Record<string, string>;
+  getHeaders: () => Promise<Record<string, string>>;
   contextValue: React.ContextType<typeof ElementsContext>;
   runtimeRef: React.RefObject<ReturnType<typeof useChatRuntime> | null>;
   frontendTools: Record<string, AssistantTool>;
@@ -712,6 +736,7 @@ const ElementsProviderWithHistory = ({
   transport,
   apiUrl,
   headers,
+  getHeaders,
   contextValue,
   runtimeRef,
   frontendTools,
@@ -724,6 +749,7 @@ const ElementsProviderWithHistory = ({
   const threadListAdapter = useGramThreadListAdapter({
     apiUrl,
     headers,
+    getHeaders,
     localIdToUuidMap,
     threadListFilters: contextValue?.config.history?.threadListFilters,
     deferThreadIdMinting: contextValue?.config.history?.deferThreadIdMinting,

package/src/global.css

@@ -258,14 +258,36 @@
 
 /* assistant-ui streaming indicator — rainbow gradient ring matches the
    Speakeasy brand palette used elsewhere (see `INSIGHTS_AI_RAINBOW_BORDER_CLASS`
-   and the login page's BrandGradientBar). */
+   and the login page's BrandGradientBar). Shared as a variable so the inline
+   trailing dot and the standalone "thinking" dot stay in sync. */
+.gram-elements {
+  --aui-rainbow: conic-gradient(
+    from 0deg,
+    #320f1e,
+    #c83228,
+    #fb873f,
+    #d2dc91,
+    #5a8250,
+    #002314,
+    #00143c,
+    #2873d7,
+    #9bc3ff,
+    #320f1e
+  );
+  /* Spin shorthand shared by both rainbow dots so a single reduced-motion
+     override (below) stops all of them at once. */
+  --aui-spin: aui-rainbow-spin 1.6s linear infinite;
+}
+
 @keyframes aui-rainbow-spin {
   to {
     transform: rotate(360deg);
   }
 }
 
-.gram-elements :where(.aui-md[data-status="running"]):empty::after,
+/* Trailing dot that follows answer text as it streams. The "before first
+   token" state is handled by <ThinkingIndicator> (cycling verbs), so there is
+   deliberately no `:empty::after` rule here. */
 .gram-elements
   :where(.aui-md[data-status="running"])
   > :where(:not(ol):not(ul):not(pre)):last-child::after,
@@ -301,19 +323,29 @@
   margin-right: 0.15rem;
   padding: 3px;
   border-radius: 50%;
-  background: conic-gradient(
-    from 0deg,
-    #320f1e,
-    #c83228,
-    #fb873f,
-    #d2dc91,
-    #5a8250,
-    #002314,
-    #00143c,
-    #2873d7,
-    #9bc3ff,
-    #320f1e
-  );
+  background: var(--aui-rainbow);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  animation: var(--aui-spin);
+}
+
+/* Standalone rainbow dot for the cycling "thinking" indicator (shown before
+   the assistant streams any answer text). Same ring as the inline dot above. */
+.gram-elements .aui-thinking-dot {
+  display: inline-block;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 0.95em;
+  height: 0.95em;
+  padding: 2.5px;
+  border-radius: 50%;
+  background: var(--aui-rainbow);
   -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
@@ -322,7 +354,14 @@
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
   mask-composite: exclude;
-  animation: aui-rainbow-spin 1.6s linear infinite;
+  animation: var(--aui-spin);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Stops both the trailing streaming dot and the standalone thinking dot. */
+  .gram-elements {
+    --aui-spin: none;
+  }
 }
 
 /* Simple shimmer animation for title text */

package/src/hooks/useGramThreadListAdapter.tsx

@@ -72,6 +72,14 @@ export type ChatMessageTransform = (
 export interface ThreadListAdapterOptions {
   apiUrl: string;
   headers: Record<string, string>;
+  /**
+   * Async header resolution that waits for auth to settle (e.g. the session
+   * token fetch) before returning. When provided, every adapter request uses
+   * this instead of the `headers` snapshot — which lets the runtime mount
+   * before auth resolves: the initial `list()` fires immediately on bind and
+   * would otherwise go out with incomplete headers.
+   */
+  getHeaders?: () => Promise<Record<string, string>>;
   /** Map to translate local thread IDs to UUIDs (shared with transport) */
   localIdToUuidMap?: Map<string, string>;
   /**
@@ -100,6 +108,17 @@ interface ListChatsResponse {
   chats: GramChatOverview[];
 }
 
+/**
+ * Resolves request headers from the live adapter options: the async
+ * `getHeaders` (which waits for auth to settle) when provided, otherwise the
+ * static `headers` snapshot.
+ */
+async function resolveAdapterHeaders(
+  options: ThreadListAdapterOptions,
+): Promise<Record<string, string>> {
+  return options.getHeaders ? options.getHeaders() : options.headers;
+}
+
 /**
  * Thread history adapter that loads messages from Gram API.
  * Note: We use `as ThreadHistoryAdapter` cast because the withFormat generic
@@ -107,7 +126,7 @@ interface ListChatsResponse {
  */
 class GramThreadHistoryAdapter {
   private apiUrl: string;
-  private headers: Record<string, string>;
+  private getHeaders: () => Promise<Record<string, string>>;
   private store: AssistantApi;
   // Read lazily rather than captured: the adapter is constructed once, but the
   // consumer may swap `transformChatMessage` across renders, so resolve it from
@@ -116,12 +135,12 @@ class GramThreadHistoryAdapter {
 
   constructor(
     apiUrl: string,
-    headers: Record<string, string>,
+    getHeaders: () => Promise<Record<string, string>>,
     store: AssistantApi,
     getTransformChatMessage?: () => ChatMessageTransform | undefined,
   ) {
     this.apiUrl = apiUrl;
-    this.headers = headers;
+    this.getHeaders = getHeaders;
     this.store = store;
     this.getTransformChatMessage = getTransformChatMessage;
   }
@@ -155,7 +174,7 @@ class GramThreadHistoryAdapter {
     try {
       const response = await fetch(
         `${this.apiUrl}/rpc/chat.load?id=${encodeURIComponent(remoteId)}`,
-        { headers: this.headers },
+        { headers: await this.getHeaders() },
       );
 
       if (!response.ok) {
@@ -189,7 +208,7 @@ class GramThreadHistoryAdapter {
 
         const response = await fetch(
           `${this.apiUrl}/rpc/chat.load?id=${encodeURIComponent(remoteId)}`,
-          { headers: this.headers },
+          { headers: await this.getHeaders() },
         );
 
         if (!response.ok) {
@@ -253,7 +272,7 @@ function useGramThreadHistoryAdapter(
     () =>
       new GramThreadHistoryAdapter(
         optionsRef.current.apiUrl,
-        optionsRef.current.headers,
+        () => resolveAdapterHeaders(optionsRef.current),
         store,
         () => optionsRef.current.transformChatMessage,
       ),
@@ -294,7 +313,8 @@ export function useGramThreadListAdapter(
 
       async list() {
         try {
-          const { apiUrl, headers, threadListFilters } = optionsRef.current;
+          const { apiUrl, threadListFilters } = optionsRef.current;
+          const headers = await resolveAdapterHeaders(optionsRef.current);
           const qs = threadListFilters
             ? new URLSearchParams(threadListFilters).toString()
             : "";
@@ -416,7 +436,7 @@ export function useGramThreadListAdapter(
             {
               method: "POST",
               headers: {
-                ...optionsRef.current.headers,
+                ...(await resolveAdapterHeaders(optionsRef.current)),
                 "Content-Type": "application/json",
               },
               body: JSON.stringify({ id: remoteId }),
@@ -457,7 +477,7 @@ export function useGramThreadListAdapter(
           const response = await fetch(
             `${optionsRef.current.apiUrl}/rpc/chat.load?id=${encodeURIComponent(threadId)}`,
             {
-              headers: optionsRef.current.headers,
+              headers: await resolveAdapterHeaders(optionsRef.current),
             },
           );
 

package/src/types/index.ts

@@ -603,6 +603,15 @@ export interface ThemeConfig {
    * @default 'soft'
    */
   radius?: Radius;
+
+  /**
+   * Extra CSS injected into the Elements shadow root after the built-in
+   * stylesheet. Elements renders inside a shadow DOM, so host-page styles
+   * cannot reach its internals — this is the supported escape hatch for
+   * embedders that need to restyle specific components (targeting the
+   * stable `aui-*` class hooks).
+   */
+  customCss?: string;
 }
 
 export interface ComponentOverrides {