@gram-ai/elements 1.22.4 → 1.23.0

package/src/lib/messageConverter.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 /**
  * Message format converter for Gram API <-> assistant-ui.
  *
@@ -17,19 +19,22 @@ import type {
   ThreadAssistantMessagePart,
   TextMessagePart,
 } from '@assistant-ui/react'
+import type {
+  Message,
+  UserMessage,
+  AssistantMessage,
+  ToolResponseMessage,
+} from '@openrouter/sdk/models'
+import { UIMessage } from 'ai'
 
 /**
  * Represents a chat message from the Gram API.
  * This mirrors the ChatMessage type from @gram/sdk without requiring the SDK dependency.
  */
-export interface GramChatMessage {
+export type GramChatMessage = Message & {
   id: string
-  role: string
-  content?: string
   model: string
-  toolCallId?: string
-  toolCalls?: string
-  createdAt: Date | string
+  created_at: Date | string
 }
 
 /**
@@ -57,17 +62,6 @@ export interface GramChatOverview {
   updatedAt: Date | string
 }
 
-/**
- * Normalizes a role string to valid ThreadMessage roles.
- */
-function normalizeRole(role: string): 'user' | 'assistant' | 'system' {
-  if (role === 'user') return 'user'
-  if (role === 'assistant') return 'assistant'
-  if (role === 'system') return 'system'
-  // Tool role messages should be handled differently, but for now treat as assistant
-  return 'assistant'
-}
-
 /**
  * Parses a date that might be a string or Date object.
  */
@@ -79,21 +73,64 @@ function parseDate(date: Date | string): Date {
  * Builds content parts for a user message.
  */
 function buildUserContentParts(msg: GramChatMessage): ThreadUserMessagePart[] {
-  const parts: ThreadUserMessagePart[] = []
+  if (msg.role !== 'user') {
+    return []
+  }
 
-  if (msg.content) {
-    parts.push({
-      type: 'text',
-      text: msg.content,
-    } as TextMessagePart)
+  if (typeof msg.content === 'string' || !msg.content) {
+    return [
+      {
+        type: 'text',
+        text: msg.content ?? '',
+      },
+    ]
   }
 
-  // Return at least an empty text part if no content
-  if (parts.length === 0) {
-    parts.push({
-      type: 'text',
-      text: '',
-    } as TextMessagePart)
+  const parts: ThreadUserMessagePart[] = []
+
+  for (const item of msg.content) {
+    switch (item.type) {
+      case 'text':
+        parts.push({
+          type: 'text',
+          text: item.text,
+        })
+        break
+      case 'image_url':
+        parts.push({
+          type: 'image',
+          image: (item as any).image_url?.url as FIXME<
+            string,
+            'Fixed by switching to Gram TS SDK.'
+          >,
+        })
+        break
+      case 'input_audio': {
+        const format = (item as any).input_audio?.format as FIXME<
+          string,
+          'Fixed by switching to Gram TS SDK.'
+        >
+        if (format === 'mp3' || format === 'wav') {
+          parts.push({
+            type: 'audio',
+            audio: {
+              data: (item as any).input_audio.data as FIXME<
+                string,
+                'Fixed by switching to Gram TS SDK.'
+              >,
+              format: format,
+            },
+          })
+        }
+        break
+      }
+      default:
+        parts.push({
+          type: 'text',
+          text: '',
+        })
+        break
+    }
   }
 
   return parts
@@ -105,33 +142,43 @@ function buildUserContentParts(msg: GramChatMessage): ThreadUserMessagePart[] {
 function buildAssistantContentParts(
   msg: GramChatMessage
 ): ThreadAssistantMessagePart[] {
+  if (msg.role !== 'assistant') {
+    return []
+  }
+
+  if (typeof msg.content === 'string' || !msg.content) {
+    return [
+      {
+        type: 'text',
+        text: msg.content ?? '',
+      },
+    ]
+  }
+
   const parts: ThreadAssistantMessagePart[] = []
 
-  if (msg.content) {
-    parts.push({
-      type: 'text',
-      text: msg.content,
-    } as TextMessagePart)
+  const toolCallsJSON = (msg as any).tool_calls as FIXME<
+    string | undefined,
+    'Fixed by switching to Gram TS SDK.'
+  >
+
+  let toolCalls = tryParseJSON(toolCallsJSON || '[]')
+  if (!Array.isArray(toolCalls)) {
+    console.warn('Invalid tool_calls format, expected an array.')
+    toolCalls = []
   }
 
-  if (msg.toolCalls) {
-    try {
-      const toolCalls = JSON.parse(msg.toolCalls)
-      for (const tc of toolCalls) {
-        const args = tc.function?.arguments ?? tc.args ?? {}
-        const argsText = typeof args === 'string' ? args : JSON.stringify(args)
-        parts.push({
-          type: 'tool-call',
-          toolCallId: tc.id ?? tc.toolCallId ?? '',
-          toolName: tc.function?.name ?? tc.toolName ?? '',
-          args: typeof args === 'string' ? JSON.parse(args) : args,
-          argsText,
-          result: undefined,
-        } as ThreadAssistantMessagePart)
-      }
-    } catch {
-      // Ignore JSON parse errors for tool calls
-    }
+  for (const tc of toolCalls) {
+    const args = tc.function?.arguments ?? tc.args ?? {}
+    const argsText = typeof args === 'string' ? args : JSON.stringify(args)
+    parts.push({
+      type: 'tool-call',
+      toolCallId: tc.id ?? tc.toolCallId ?? '',
+      toolName: tc.function?.name ?? tc.toolName ?? '',
+      args: typeof args === 'string' ? JSON.parse(args) : args,
+      argsText,
+      result: undefined,
+    } as ThreadAssistantMessagePart)
   }
 
   // Return at least an empty text part if no content
@@ -145,14 +192,34 @@ function buildAssistantContentParts(
   return parts
 }
 
+function buildSystemContentParts(msg: GramChatMessage): [TextMessagePart] {
+  if (msg.role !== 'system') {
+    return [{ type: 'text', text: '' }]
+  }
+
+  if (typeof msg.content === 'string' || !msg.content) {
+    return [{ type: 'text', text: msg.content ?? '' }]
+  }
+
+  const text: string[] = []
+
+  for (const item of msg.content) {
+    if (item.type !== 'text') {
+      continue
+    }
+    text.push(item.text)
+  }
+
+  return [{ type: 'text', text: text.join('\n') }]
+}
+
 /**
  * Converts a single Gram ChatMessage to a ThreadMessage.
  */
 function convertGramMessageToThreadMessage(
   msg: GramChatMessage
 ): ThreadMessage {
-  const role = normalizeRole(msg.role)
-  const createdAt = parseDate(msg.createdAt)
+  const createdAt = parseDate(msg.created_at)
 
   const baseMetadata = {
     unstable_state: undefined,
@@ -163,7 +230,7 @@ function convertGramMessageToThreadMessage(
     custom: {},
   }
 
-  if (role === 'user') {
+  if (msg.role === 'user') {
     return {
       id: msg.id,
       role: 'user',
@@ -174,12 +241,12 @@ function convertGramMessageToThreadMessage(
     }
   }
 
-  if (role === 'system') {
+  if (msg.role === 'system') {
     return {
       id: msg.id,
       role: 'system',
       createdAt,
-      content: [{ type: 'text', text: msg.content ?? '' }],
+      content: buildSystemContentParts(msg),
       metadata: baseMetadata,
     }
   }
@@ -239,3 +306,209 @@ export function convertGramMessagesToExported(
     headId: prevId,
   }
 }
+
+export function convertGramMessagesToUIMessages(messages: GramChatMessage[]): {
+  headId: string | null
+  messages: { parentId: string | null; message: UIMessage }[]
+} {
+  if (messages.length === 0) {
+    return { messages: [], headId: null }
+  }
+
+  const toolCallResults = new Map<string, ToolResponseMessage>()
+  for (const msg of messages) {
+    if (msg.role !== 'tool') {
+      continue
+    }
+    const id = (msg as any).tool_call_id
+    if (typeof id !== 'string') {
+      continue
+    }
+
+    toolCallResults.set(id, msg as ToolResponseMessage)
+  }
+
+  const uiMessages: { parentId: string | null; message: UIMessage }[] = []
+  let prevId: string | null = null
+
+  for (const msg of messages) {
+    switch (msg.role) {
+      case 'developer':
+      case 'tool':
+        continue
+      case 'system': {
+        uiMessages.push({
+          parentId: prevId,
+          message: {
+            id: msg.id,
+            role: 'system',
+            parts: [
+              {
+                type: 'text',
+                text:
+                  typeof msg.content === 'string'
+                    ? msg.content
+                    : Array.isArray(msg.content)
+                      ? msg.content
+                          .filter((item) => item.type === 'text')
+                          .map((item) => item.text)
+                          .join('\n')
+                      : '',
+              },
+            ],
+          },
+        })
+        break
+      }
+      case 'user': {
+        uiMessages.push({
+          parentId: prevId,
+          message: {
+            id: msg.id,
+            role: 'user',
+            parts: convertGramMessagePartsToUIMessageParts(
+              msg,
+              toolCallResults
+            ),
+          },
+        })
+        break
+      }
+      case 'assistant': {
+        const uiMessage = {
+          parentId: prevId,
+          message: {
+            id: msg.id,
+            role: 'assistant',
+            parts: convertGramMessagePartsToUIMessageParts(
+              msg,
+              toolCallResults
+            ),
+          } satisfies UIMessage,
+        }
+        uiMessages.push(uiMessage)
+
+        break
+      }
+    }
+
+    prevId = msg.id
+  }
+
+  return {
+    messages: uiMessages,
+    headId: prevId,
+  }
+}
+
+export function convertGramMessagePartsToUIMessageParts(
+  msg: UserMessage | AssistantMessage,
+  toolResults: Map<string, ToolResponseMessage>
+): UIMessage['parts'] {
+  const uiparts: UIMessage['parts'] = []
+
+  if (typeof msg.content === 'string' && msg.content) {
+    uiparts.push({
+      type: 'text',
+      text: msg.content,
+    })
+  }
+
+  const content = Array.isArray(msg.content) ? msg.content : []
+  for (const p of content) {
+    switch (p.type) {
+      case 'text': {
+        uiparts.push({
+          type: 'text',
+          text: p.text,
+        })
+        break
+      }
+      case 'image_url': {
+        const url = (p as any).image_url?.url as FIXME<
+          string | undefined,
+          'Fixed by switching to Gram TS SDK.'
+        >
+        if (!url) {
+          break
+        }
+
+        uiparts.push({
+          type: 'file',
+          url,
+          mediaType: mediaTypeFromURL(url),
+        })
+        break
+      }
+      case 'input_audio': {
+        const url = (p as any).input_audio?.data as FIXME<
+          string | undefined,
+          'Fixed by switching to Gram TS SDK.'
+        >
+        if (!url) {
+          break
+        }
+
+        uiparts.push({
+          type: 'file',
+          url,
+          mediaType: mediaTypeFromURL(url),
+        })
+        break
+      }
+    }
+  }
+
+  if (msg.role === 'assistant' && msg.reasoning) {
+    uiparts.push({
+      type: 'reasoning',
+      text: msg.reasoning,
+    })
+  }
+
+  if (msg.role === 'assistant' && (msg as any).tool_calls) {
+    const toolCallsJSON = (msg as any).tool_calls as FIXME<
+      string,
+      'Fixed by switching to Gram TS SDK.'
+    >
+    let toolCalls = tryParseJSON<AssistantMessage['toolCalls']>(
+      toolCallsJSON || '[]'
+    )
+    if (!Array.isArray(toolCalls)) {
+      console.warn('Invalid tool_calls format, expected an array.')
+      toolCalls = []
+    }
+
+    for (const tc of toolCalls) {
+      const content = toolResults.get(tc.id)?.content
+      uiparts.push({
+        type: 'dynamic-tool',
+        toolCallId: tc.id,
+        toolName: tc.function?.name ?? '',
+        state: 'output-available',
+        input: tc.function?.arguments ?? {},
+        output: typeof content === 'string' ? tryParseJSON(content) : '',
+      })
+    }
+  }
+
+  return uiparts
+}
+
+function mediaTypeFromURL(url: string): string {
+  const unspecified = 'unknown/unknown'
+  if (!url.startsWith('data:')) {
+    return unspecified
+  }
+
+  const match = url.match(/^data:([^;]+);/)
+  return match?.[1] || unspecified
+}
+
+function tryParseJSON<T = any>(str: string): T | null {
+  try {
+    return JSON.parse(str) as T
+  } catch {
+    return null
+  }
+}

package/src/lib.d.ts

@@ -0,0 +1 @@
+type FIXME<T, S extends string> = (T & S) | T

package/src/plugins/chart/component.tsx

@@ -8,6 +8,7 @@ import { AlertCircleIcon } from 'lucide-react'
 import { FC, useEffect, useMemo, useRef, useState } from 'react'
 import { parse, View, Warn } from 'vega'
 import { expressionInterpreter } from 'vega-interpreter'
+import { PluginLoadingState } from '../components/PluginLoadingState'
 
 export const ChartRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
   const containerRef = useRef<HTMLDivElement>(null)
@@ -84,21 +85,20 @@ export const ChartRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
     }
   }, [shouldRender, parsedSpec])
 
+  // Show loading state while JSON is incomplete/streaming
+  if (!shouldRender && !error) {
+    return <PluginLoadingState text="Rendering chart..." />
+  }
+
   return (
     <div
       className={cn(
         // the after:hidden is to prevent assistant-ui from showing its default code block loading indicator
-        'relative min-h-[400px] w-fit max-w-full min-w-[400px] overflow-auto border p-6 after:hidden',
+        'border-border relative min-h-[400px] w-fit max-w-full min-w-[400px] overflow-auto border after:hidden',
         r('lg'),
         d('p-lg')
       )}
     >
-      {!shouldRender && !error && (
-        <div className="shimmer text-muted-foreground bg-background/80 absolute inset-0 z-10 flex items-center justify-center">
-          Rendering chart...
-        </div>
-      )}
-
       {error && (
         <div className="bg-background absolute inset-0 z-10 flex items-center justify-center gap-2 text-rose-500">
           <AlertCircleIcon name="alert-circle" className="h-4 w-4" />
@@ -106,7 +106,7 @@ export const ChartRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
         </div>
       )}
 
-      <div ref={containerRef} className={!shouldRender ? 'hidden' : 'block'} />
+      <div ref={containerRef} className={error ? 'hidden' : 'block'} />
     </div>
   )
 }

package/src/plugins/components/PluginLoadingState.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { useRadius } from '@/hooks/useRadius'
+import { cn } from '@/lib/utils'
+import { FC } from 'react'
+
+interface PluginLoadingStateProps {
+  text: string
+  className?: string
+}
+
+/**
+ * Shared loading state component for plugins.
+ * Displays a shimmer effect with loading text.
+ */
+export const PluginLoadingState: FC<PluginLoadingStateProps> = ({
+  text,
+  className,
+}) => {
+  const r = useRadius()
+
+  return (
+    <div
+      className={cn(
+        'border-border bg-card relative min-h-[400px] w-fit max-w-full min-w-[400px] overflow-hidden border after:hidden',
+        r('lg'),
+        className
+      )}
+    >
+      <div className="shimmer text-muted-foreground absolute inset-0 flex items-center justify-center">
+        {text}
+      </div>
+    </div>
+  )
+}

package/src/plugins/components/index.ts

@@ -0,0 +1 @@
+export { PluginLoadingState } from './PluginLoadingState'

package/src/plugins/generative-ui/component.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { GenerativeUI } from '@/components/ui/generative-ui'
+import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown'
+import { FC, useMemo } from 'react'
+import { PluginLoadingState } from '../components/PluginLoadingState'
+
+const loadingMessages = [
+  'Preparing your data...',
+  'Building your view...',
+  'Generating results...',
+  'Loading content...',
+  'Fetching information...',
+  'Processing your request...',
+  'Almost ready...',
+  'Setting things up...',
+]
+
+function getRandomLoadingMessage() {
+  return loadingMessages[Math.floor(Math.random() * loadingMessages.length)]
+}
+
+export const GenerativeUIRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
+  // Parse JSON - returns null if invalid (still streaming)
+  const content = useMemo(() => {
+    const trimmedCode = code.trim()
+    if (!trimmedCode) return null
+
+    try {
+      const parsed = JSON.parse(trimmedCode)
+      // Validate it has a type field (basic json-render structure)
+      if (!parsed || typeof parsed !== 'object' || !('type' in parsed)) {
+        return null
+      }
+      return parsed
+    } catch {
+      // JSON is incomplete (still streaming) - return null to show loading state
+      return null
+    }
+  }, [code])
+
+  // Memoize the loading message so it doesn't change on every render
+  const loadingMessage = useMemo(() => getRandomLoadingMessage(), [])
+
+  // Show loading shimmer while JSON is incomplete/streaming
+  if (!content) {
+    return <PluginLoadingState text={loadingMessage} />
+  }
+
+  // Render without outer border - the Card component inside provides the border
+  return (
+    <div className="overflow-hidden after:hidden">
+      <GenerativeUI content={content} />
+    </div>
+  )
+}