@gram-ai/elements 1.27.3 → 1.27.5

package/src/hooks/useGramThreadListAdapter.tsx

@@ -5,14 +5,14 @@ import {
   ThreadHistoryAdapter,
   useAssistantApi,
   type AssistantApi,
-} from '@assistant-ui/react'
-import { createAssistantStream, type AssistantStream } from 'assistant-stream'
+} from "@assistant-ui/react";
+import { createAssistantStream, type AssistantStream } from "assistant-stream";
 import {
   GramChatOverview,
   GramChat,
   convertGramMessagesToExported,
   convertGramMessagesToUIMessages,
-} from '@/lib/messageConverter'
+} from "@/lib/messageConverter";
 import {
   useCallback,
   useEffect,
@@ -20,32 +20,32 @@ import {
   useRef,
   useState,
   type PropsWithChildren,
-} from 'react'
+} from "react";
 
 /**
  * Prefix used by assistant-ui for local thread IDs that haven't been persisted yet.
  * This is an internal implementation detail of assistant-ui's RemoteThreadListThreadListRuntimeCore.
  * If the library changes this prefix, we only need to update it here.
  */
-const LOCAL_THREAD_ID_PREFIX = '__LOCALID_'
+const LOCAL_THREAD_ID_PREFIX = "__LOCALID_";
 
 /**
  * Checks if a thread ID is a local (unpersisted) thread ID.
  * Local IDs are generated by assistant-ui before the thread is initialized with a remote ID.
  */
 export function isLocalThreadId(threadId: string | null | undefined): boolean {
-  return !!threadId?.startsWith(LOCAL_THREAD_ID_PREFIX)
+  return !!threadId?.startsWith(LOCAL_THREAD_ID_PREFIX);
 }
 
 export interface ThreadListAdapterOptions {
-  apiUrl: string
-  headers: Record<string, string>
+  apiUrl: string;
+  headers: Record<string, string>;
   /** Map to translate local thread IDs to UUIDs (shared with transport) */
-  localIdToUuidMap?: Map<string, string>
+  localIdToUuidMap?: Map<string, string>;
 }
 
 interface ListChatsResponse {
-  chats: GramChatOverview[]
+  chats: GramChatOverview[];
 }
 
 /**
@@ -54,42 +54,42 @@ interface ListChatsResponse {
  * signature doesn't match our concrete implementation, but it works at runtime.
  */
 class GramThreadHistoryAdapter {
-  private apiUrl: string
-  private headers: Record<string, string>
-  private store: AssistantApi
+  private apiUrl: string;
+  private headers: Record<string, string>;
+  private store: AssistantApi;
 
   constructor(
     apiUrl: string,
     headers: Record<string, string>,
-    store: AssistantApi
+    store: AssistantApi,
   ) {
-    this.apiUrl = apiUrl
-    this.headers = headers
-    this.store = store
+    this.apiUrl = apiUrl;
+    this.headers = headers;
+    this.store = store;
   }
 
   async load() {
-    const remoteId = this.store.threadListItem().getState().remoteId
+    const remoteId = this.store.threadListItem().getState().remoteId;
     if (!remoteId) {
-      return { messages: [], headId: null }
+      return { messages: [], headId: null };
     }
 
     try {
       const response = await fetch(
         `${this.apiUrl}/rpc/chat.load?id=${encodeURIComponent(remoteId)}`,
-        { headers: this.headers }
-      )
+        { headers: this.headers },
+      );
 
       if (!response.ok) {
-        console.error('Failed to load chat:', response.status)
-        return { messages: [], headId: null }
+        console.error("Failed to load chat:", response.status);
+        return { messages: [], headId: null };
       }
 
-      const chat = (await response.json()) as GramChat
-      return convertGramMessagesToExported(chat.messages)
+      const chat = (await response.json()) as GramChat;
+      return convertGramMessagesToExported(chat.messages);
     } catch (error) {
-      console.error('Error loading chat:', error)
-      return { messages: [], headId: null }
+      console.error("Error loading chat:", error);
+      return { messages: [], headId: null };
     }
   }
 
@@ -104,23 +104,23 @@ class GramThreadHistoryAdapter {
   withFormat(_formatAdapter: unknown) {
     return {
       load: async () => {
-        const remoteId = this.store.threadListItem().getState().remoteId
+        const remoteId = this.store.threadListItem().getState().remoteId;
         if (!remoteId) {
-          return { messages: [], headId: null }
+          return { messages: [], headId: null };
         }
 
         const response = await fetch(
           `${this.apiUrl}/rpc/chat.load?id=${encodeURIComponent(remoteId)}`,
-          { headers: this.headers }
-        )
+          { headers: this.headers },
+        );
 
         if (!response.ok) {
-          console.error('Failed to load chat (withFormat):', response.status)
-          return { messages: [], headId: null }
+          console.error("Failed to load chat (withFormat):", response.status);
+          return { messages: [], headId: null };
         }
 
-        const chat = (await response.json()) as GramChat
-        return convertGramMessagesToUIMessages(chat.messages)
+        const chat = (await response.json()) as GramChat;
+        return convertGramMessagesToUIMessages(chat.messages);
 
         // // Filter out system messages (assistant-ui doesn't support them in the import path)
         // const filteredMessages = chat.messages.filter(
@@ -158,7 +158,7 @@ class GramThreadHistoryAdapter {
       append: async () => {
         // No-op
       },
-    }
+    };
   }
 }
 
@@ -166,19 +166,19 @@ class GramThreadHistoryAdapter {
  * Hook to create a Gram thread history adapter.
  */
 function useGramThreadHistoryAdapter(
-  optionsRef: React.RefObject<ThreadListAdapterOptions>
+  optionsRef: React.RefObject<ThreadListAdapterOptions>,
 ): ThreadHistoryAdapter {
-  const store = useAssistantApi()
+  const store = useAssistantApi();
   const [adapter] = useState(
     () =>
       new GramThreadHistoryAdapter(
         optionsRef.current.apiUrl,
         optionsRef.current.headers,
-        store
-      )
-  )
+        store,
+      ),
+  );
   // Cast to ThreadHistoryAdapter - the withFormat generic doesn't match but works at runtime
-  return adapter as unknown as ThreadHistoryAdapter
+  return adapter as unknown as ThreadHistoryAdapter;
 }
 
 /**
@@ -186,25 +186,25 @@ function useGramThreadHistoryAdapter(
  * This properly handles React component identity for the Provider.
  */
 export function useGramThreadListAdapter(
-  options: ThreadListAdapterOptions
+  options: ThreadListAdapterOptions,
 ): RemoteThreadListAdapter {
-  const optionsRef = useRef(options)
+  const optionsRef = useRef(options);
   useEffect(() => {
-    optionsRef.current = options
-  }, [options])
+    optionsRef.current = options;
+  }, [options]);
 
   // Create stable Provider component using useCallback
   const unstable_Provider = useCallback(function GramHistoryProvider({
     children,
   }: PropsWithChildren) {
-    const history = useGramThreadHistoryAdapter(optionsRef)
-    const adapters = useMemo(() => ({ history }), [history])
+    const history = useGramThreadHistoryAdapter(optionsRef);
+    const adapters = useMemo(() => ({ history }), [history]);
     return (
       <RuntimeAdapterProvider adapters={adapters}>
         {children}
       </RuntimeAdapterProvider>
-    )
-  }, [])
+    );
+  }, []);
 
   // Return adapter with stable methods
   return useMemo(
@@ -217,26 +217,26 @@ export function useGramThreadListAdapter(
             `${optionsRef.current.apiUrl}/rpc/chat.list`,
             {
               headers: optionsRef.current.headers,
-            }
-          )
+            },
+          );
 
           if (!response.ok) {
-            console.error('Failed to list chats:', response.status)
-            return { threads: [] }
+            console.error("Failed to list chats:", response.status);
+            return { threads: [] };
           }
 
-          const data = (await response.json()) as ListChatsResponse
+          const data = (await response.json()) as ListChatsResponse;
           return {
             threads: data.chats.map((chat) => ({
               remoteId: chat.id,
               externalId: chat.id,
-              status: 'regular' as const,
-              title: chat.title || 'New Chat',
+              status: "regular" as const,
+              title: chat.title || "New Chat",
             })),
-          }
+          };
         } catch (error) {
-          console.error('Error listing chats:', error)
-          return { threads: [] }
+          console.error("Error listing chats:", error);
+          return { threads: [] };
         }
       },
 
@@ -245,26 +245,26 @@ export function useGramThreadListAdapter(
         if (isLocalThreadId(threadId)) {
           // Check if transport already generated a UUID for this local ID
           const existingUuid =
-            optionsRef.current.localIdToUuidMap?.get(threadId)
+            optionsRef.current.localIdToUuidMap?.get(threadId);
           if (existingUuid) {
             return {
               remoteId: existingUuid,
               externalId: existingUuid,
-            }
+            };
           }
           // Otherwise generate a new one and store it
-          const uuid = crypto.randomUUID()
-          optionsRef.current.localIdToUuidMap?.set(threadId, uuid)
+          const uuid = crypto.randomUUID();
+          optionsRef.current.localIdToUuidMap?.set(threadId, uuid);
           return {
             remoteId: uuid,
             externalId: uuid,
-          }
+          };
         }
         // For existing threads, use the ID as-is
         return {
           remoteId: threadId,
           externalId: threadId,
-        }
+        };
       },
 
       async rename() {
@@ -286,53 +286,53 @@ export function useGramThreadListAdapter(
       async generateTitle(
         remoteId: string,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _messages: readonly ThreadMessage[]
+        _messages: readonly ThreadMessage[],
       ): Promise<AssistantStream> {
         // Skip if this is a local ID that hasn't been persisted yet
         if (!remoteId || isLocalThreadId(remoteId)) {
           return createAssistantStream((controller) => {
-            controller.close()
-          })
+            controller.close();
+          });
         }
 
         // Title generation happens async server-side via Temporal after first completion.
         // This delay allows the OpenRouter LLM call to complete before we fetch the title.
-        const TITLE_GENERATION_DELAY_MS = 2000
-        await new Promise((r) => setTimeout(r, TITLE_GENERATION_DELAY_MS))
+        const TITLE_GENERATION_DELAY_MS = 2000;
+        await new Promise((r) => setTimeout(r, TITLE_GENERATION_DELAY_MS));
 
         try {
           // TODO: rename generateTitle endpoint to getTitle
           const response = await fetch(
             `${optionsRef.current.apiUrl}/rpc/chat.generateTitle`,
             {
-              method: 'POST',
+              method: "POST",
               headers: {
                 ...optionsRef.current.headers,
-                'Content-Type': 'application/json',
+                "Content-Type": "application/json",
               },
               body: JSON.stringify({ id: remoteId }),
-            }
-          )
+            },
+          );
 
           if (response.ok) {
-            const result = (await response.json()) as { title: string }
-            const title = result.title
+            const result = (await response.json()) as { title: string };
+            const title = result.title;
 
             if (title) {
               return createAssistantStream((controller) => {
-                controller.appendText(title)
-                controller.close()
-              })
+                controller.appendText(title);
+                controller.close();
+              });
             }
           }
         } catch (error) {
-          console.error('Error fetching title:', error)
+          console.error("Error fetching title:", error);
         }
 
         // If title fetch failed or got placeholder, return empty stream (keeps existing title)
         return createAssistantStream((controller) => {
-          controller.close()
-        })
+          controller.close();
+        });
       },
 
       async fetch(threadId: string) {
@@ -340,8 +340,8 @@ export function useGramThreadListAdapter(
         if (!threadId || isLocalThreadId(threadId)) {
           return {
             remoteId: threadId,
-            status: 'regular' as const,
-          }
+            status: "regular" as const,
+          };
         }
 
         try {
@@ -349,33 +349,33 @@ export function useGramThreadListAdapter(
             `${optionsRef.current.apiUrl}/rpc/chat.load?id=${encodeURIComponent(threadId)}`,
             {
               headers: optionsRef.current.headers,
-            }
-          )
+            },
+          );
 
           if (!response.ok) {
-            console.error('Failed to fetch thread:', response.status)
+            console.error("Failed to fetch thread:", response.status);
             return {
               remoteId: threadId,
-              status: 'regular' as const,
-            }
+              status: "regular" as const,
+            };
           }
 
-          const chat = await response.json()
+          const chat = await response.json();
           return {
             remoteId: chat.id,
             externalId: chat.id,
-            status: 'regular' as const,
-            title: chat.title || 'New Chat',
-          }
+            status: "regular" as const,
+            title: chat.title || "New Chat",
+          };
         } catch (error) {
-          console.error('Error fetching thread:', error)
+          console.error("Error fetching thread:", error);
           return {
             remoteId: threadId,
-            status: 'regular' as const,
-          }
+            status: "regular" as const,
+          };
         }
       },
     }),
-    [unstable_Provider]
-  )
+    [unstable_Provider],
+  );
 }

package/src/hooks/useMCPTools.ts

@@ -1,13 +1,13 @@
-import { assert } from '@/lib/utils'
-import { ToolsFilter } from '@/types'
-import { experimental_createMCPClient as createMCPClient } from '@ai-sdk/mcp'
-import { useQuery, type UseQueryResult } from '@tanstack/react-query'
-import { useMemo, useRef } from 'react'
-import { Auth } from './useAuth'
+import { assert } from "@/lib/utils";
+import { ToolsFilter } from "@/types";
+import { experimental_createMCPClient as createMCPClient } from "@ai-sdk/mcp";
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { useMemo, useRef } from "react";
+import { Auth } from "./useAuth";
 
 type MCPToolsResult = Awaited<
-  ReturnType<Awaited<ReturnType<typeof createMCPClient>>['tools']>
->
+  ReturnType<Awaited<ReturnType<typeof createMCPClient>>["tools"]>
+>;
 
 export function useMCPTools({
   auth,
@@ -16,108 +16,108 @@ export function useMCPTools({
   toolsToInclude,
   gramEnvironment,
 }: {
-  auth: Auth
-  mcp: string | undefined
-  environment: Record<string, unknown>
-  toolsToInclude?: ToolsFilter
-  gramEnvironment?: string
+  auth: Auth;
+  mcp: string | undefined;
+  environment: Record<string, unknown>;
+  toolsToInclude?: ToolsFilter;
+  gramEnvironment?: string;
 }): UseQueryResult<MCPToolsResult, Error> & {
-  mcpHeaders: Record<string, string>
+  mcpHeaders: Record<string, string>;
 } {
   const envQueryKey = Object.entries(environment ?? {}).map(
-    ([k, v]) => `${k}:${v}`
-  )
+    ([k, v]) => `${k}:${v}`,
+  );
   const authQueryKey = Object.entries(auth.headers ?? {}).map(
-    ([k, v]) => `${k}:${v}`
-  )
+    ([k, v]) => `${k}:${v}`,
+  );
 
   // Mutable headers object shared with the MCP transport. The transport stores
   // a direct reference (`this.headers = headers`) and spreads it on every
   // send() call, so mutating properties on this object (e.g. setting
   // Gram-Chat-ID later) will be picked up by subsequent tool call requests.
-  const mcpHeaders = useRef<Record<string, string>>({}).current
+  const mcpHeaders = useRef<Record<string, string>>({}).current;
 
   const queryResult = useQuery({
     queryKey: [
-      'mcpTools',
+      "mcpTools",
       mcp,
       gramEnvironment,
       ...envQueryKey,
       ...authQueryKey,
     ],
     queryFn: async () => {
-      assert(!auth.isLoading, 'No auth found')
-      assert(mcp, 'No MCP URL found')
+      assert(!auth.isLoading, "No auth found");
+      assert(mcp, "No MCP URL found");
 
       // Populate the shared headers object (mutate in place so the same
       // reference is used by the transport).
-      Object.keys(mcpHeaders).forEach((k) => delete mcpHeaders[k])
+      Object.keys(mcpHeaders).forEach((k) => delete mcpHeaders[k]);
       Object.assign(mcpHeaders, {
         ...transformEnvironmentToHeaders(environment ?? {}),
         ...auth.headers,
-        ...(gramEnvironment && { 'Gram-Environment': gramEnvironment }),
-      })
+        ...(gramEnvironment && { "Gram-Environment": gramEnvironment }),
+      });
 
       const mcpClient = await createMCPClient({
-        name: 'gram-elements-mcp-client',
+        name: "gram-elements-mcp-client",
         transport: {
-          type: 'http',
+          type: "http",
           url: mcp,
           headers: mcpHeaders,
         },
-      })
+      });
 
-      return mcpClient.tools()
+      return mcpClient.tools();
     },
     enabled: !auth.isLoading && !!mcp,
     staleTime: Infinity,
     gcTime: Infinity,
-  })
+  });
 
   // Filter tools outside of the query to ensure filtering is applied whenever
   // toolsToInclude changes, even when the cached query result is reused.
   const tools = useMemo(() => {
     if (!queryResult.data || !toolsToInclude) {
-      return queryResult.data
+      return queryResult.data;
     }
 
     return Object.fromEntries(
       Object.entries(queryResult.data).filter(([name]) =>
-        typeof toolsToInclude === 'function'
+        typeof toolsToInclude === "function"
           ? toolsToInclude({ toolName: name })
-          : toolsToInclude.includes(name)
-      )
-    )
-  }, [queryResult.data, toolsToInclude])
+          : toolsToInclude.includes(name),
+      ),
+    );
+  }, [queryResult.data, toolsToInclude]);
 
   return {
     ...queryResult,
     data: tools,
     mcpHeaders,
   } as UseQueryResult<MCPToolsResult, Error> & {
-    mcpHeaders: Record<string, string>
-  }
+    mcpHeaders: Record<string, string>;
+  };
 }
 
-const HEADER_PREFIX = 'MCP-'
+const HEADER_PREFIX = "MCP-";
 
 function transformEnvironmentToHeaders(environment: Record<string, unknown>) {
-  if (typeof environment !== 'object' || environment === null) {
-    return {}
+  if (typeof environment !== "object" || environment === null) {
+    return {};
   }
   return Object.entries(environment).reduce(
     (acc, [key, value]) => {
       // Normalize key: replace underscores with dashes
-      const normalizedKey = key.replace(/_/g, '-')
+      const normalizedKey = key.replace(/_/g, "-");
 
       // Add MCP- prefix if it doesn't already have it
       const headerKey = normalizedKey.startsWith(HEADER_PREFIX)
         ? normalizedKey
-        : `${HEADER_PREFIX}${normalizedKey}`
+        : `${HEADER_PREFIX}${normalizedKey}`;
 
-      acc[headerKey] = value as string
-      return acc
+      acc[headerKey] = value as string;
+      return acc;
     },
-    {} as Record<string, string>
-  )
+    {} as Record<string, string>,
+  );
 }

package/src/hooks/useModel.ts

@@ -1,30 +1,30 @@
-import { getApiUrl } from '@/lib/api'
-import { createOpenRouter } from '@openrouter/ai-sdk-provider'
-import { LanguageModel } from 'ai'
-import { useAuth } from './useAuth'
-import { useElements } from './useElements'
+import { getApiUrl } from "@/lib/api";
+import { createOpenRouter } from "@openrouter/ai-sdk-provider";
+import { LanguageModel } from "ai";
+import { useAuth } from "./useAuth";
+import { useElements } from "./useElements";
 
 // Creates an OpenRouter client to be used for "internal Gram" usage, such as follow-on suggestions
 export const useModel = (
-  model: string = 'openai/gpt-4o-mini'
+  model: string = "openai/gpt-4o-mini",
 ): LanguageModel => {
-  const { config } = useElements()
+  const { config } = useElements();
 
   const auth = useAuth({
     auth: config.api,
     projectSlug: config.projectSlug,
-  })
+  });
 
-  const apiUrl = getApiUrl(config)
+  const apiUrl = getApiUrl(config);
 
   const openRouter = createOpenRouter({
     baseURL: apiUrl,
-    apiKey: 'unused, but must be set',
+    apiKey: "unused, but must be set",
     headers: {
       ...auth.headers,
-      'X-Gram-Source': 'gram',
+      "X-Gram-Source": "gram",
     },
-  })
+  });
 
-  return openRouter.chat(model)
-}
+  return openRouter.chat(model) as LanguageModel;
+};

package/src/hooks/usePluginComponents.ts

@@ -1,25 +1,25 @@
 import {
   CodeHeaderProps,
   SyntaxHighlighterProps,
-} from '@assistant-ui/react-markdown'
-import { ComponentType, useMemo } from 'react'
-import { Plugin } from '@/types/plugins'
+} from "@assistant-ui/react-markdown";
+import { ComponentType, useMemo } from "react";
+import { Plugin } from "@/types/plugins";
 
 type ComponentsByLanguage =
   | Record<
       string,
       {
-        CodeHeader?: ComponentType<CodeHeaderProps> | undefined
-        SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps> | undefined
+        CodeHeader?: ComponentType<CodeHeaderProps> | undefined;
+        SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps> | undefined;
       }
     >
-  | undefined
+  | undefined;
 
 export function useComponentsByLanguage(plugins: Plugin[]) {
   return useMemo(() => {
     return plugins.reduce((acc, plugin) => {
       if (acc?.[plugin.language] && !plugin.overrideExisting) {
-        return acc
+        return acc;
       }
       acc = {
         ...acc,
@@ -27,8 +27,8 @@ export function useComponentsByLanguage(plugins: Plugin[]) {
           CodeHeader: plugin.Header ?? (() => null),
           SyntaxHighlighter: plugin.Component ?? undefined,
         },
-      }
-      return acc
-    }, {} as ComponentsByLanguage)
-  }, [plugins])
+      };
+      return acc;
+    }, {} as ComponentsByLanguage);
+  }, [plugins]);
 }