@gram-ai/elements 1.18.5 → 1.18.7

package/src/components/assistant-ui/markdown-text.tsx

@@ -0,0 +1,240 @@
+'use client'
+
+import '@assistant-ui/react-markdown/styles/dot.css'
+
+import {
+  type CodeHeaderProps,
+  MarkdownTextPrimitive,
+  unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
+  useIsMarkdownCodeBlock,
+} from '@assistant-ui/react-markdown'
+import { CheckIcon, CopyIcon } from 'lucide-react'
+import { type FC, memo, useState } from 'react'
+import remarkGfm from 'remark-gfm'
+
+import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button'
+import { cn } from '@/lib/utils'
+import { useElements } from '@/hooks/useElements'
+import { useComponentsByLanguage } from '@/hooks/usePluginComponents'
+import { useAssistantState } from '@assistant-ui/react'
+
+const MarkdownTextImpl = () => {
+  const { plugins } = useElements()
+  const componentsByLanguage = useComponentsByLanguage(plugins)
+
+  return (
+    <MarkdownTextPrimitive
+      remarkPlugins={[remarkGfm]}
+      className="aui-md"
+      components={defaultComponents}
+      componentsByLanguage={componentsByLanguage}
+    />
+  )
+}
+
+export const MarkdownText = memo(MarkdownTextImpl)
+
+const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
+  const message = useAssistantState(({ message }) => message)
+  const messageIsComplete = message.status?.type === 'complete'
+  const { isCopied, copyToClipboard } = useCopyToClipboard()
+  const onCopy = () => {
+    if (!code || isCopied) return
+    copyToClipboard(code)
+  }
+
+  if (!messageIsComplete) {
+    return null
+  }
+  return (
+    <div className="aui-code-header-root bg-muted-foreground/15 text-foreground dark:bg-muted-foreground/20 mt-4 flex items-center justify-between gap-4 rounded-t-lg px-4 py-2 text-sm font-semibold">
+      <span className="aui-code-header-language lowercase [&>span]:text-xs">
+        {language}
+      </span>
+      <TooltipIconButton tooltip="Copy" onClick={onCopy}>
+        {!isCopied && <CopyIcon />}
+        {isCopied && <CheckIcon />}
+      </TooltipIconButton>
+    </div>
+  )
+}
+
+const useCopyToClipboard = ({
+  copiedDuration = 3000,
+}: {
+  copiedDuration?: number
+} = {}) => {
+  const [isCopied, setIsCopied] = useState<boolean>(false)
+
+  const copyToClipboard = (value: string) => {
+    if (!value) return
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true)
+      setTimeout(() => setIsCopied(false), copiedDuration)
+    })
+  }
+
+  return { isCopied, copyToClipboard }
+}
+
+const defaultComponents = memoizeMarkdownComponents({
+  h1: ({ className, ...props }) => (
+    <h1
+      className={cn(
+        'aui-md-h1 mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0',
+        className
+      )}
+      {...props}
+    />
+  ),
+  h2: ({ className, ...props }) => (
+    <h2
+      className={cn(
+        'aui-md-h2 mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0',
+        className
+      )}
+      {...props}
+    />
+  ),
+  h3: ({ className, ...props }) => (
+    <h3
+      className={cn(
+        'aui-md-h3 mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0',
+        className
+      )}
+      {...props}
+    />
+  ),
+  h4: ({ className, ...props }) => (
+    <h4
+      className={cn(
+        'aui-md-h4 mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0',
+        className
+      )}
+      {...props}
+    />
+  ),
+  h5: ({ className, ...props }) => (
+    <h5
+      className={cn(
+        'aui-md-h5 my-4 text-lg font-semibold first:mt-0 last:mb-0',
+        className
+      )}
+      {...props}
+    />
+  ),
+  h6: ({ className, ...props }) => (
+    <h6
+      className={cn(
+        'aui-md-h6 my-4 font-semibold first:mt-0 last:mb-0',
+        className
+      )}
+      {...props}
+    />
+  ),
+  p: ({ className, ...props }) => (
+    <p
+      className={cn(
+        'aui-md-p mt-5 mb-5 leading-7 first:mt-0 last:mb-0',
+        className
+      )}
+      {...props}
+    />
+  ),
+  a: ({ className, ...props }) => (
+    <a
+      className={cn(
+        'aui-md-a text-primary font-medium underline underline-offset-4',
+        className
+      )}
+      {...props}
+    />
+  ),
+  blockquote: ({ className, ...props }) => (
+    <blockquote
+      className={cn('aui-md-blockquote border-l-2 pl-6 italic', className)}
+      {...props}
+    />
+  ),
+  ul: ({ className, ...props }) => (
+    <ul
+      className={cn('aui-md-ul my-5 ml-6 list-disc [&>li]:mt-2', className)}
+      {...props}
+    />
+  ),
+  ol: ({ className, ...props }) => (
+    <ol
+      className={cn('aui-md-ol my-5 ml-6 list-decimal [&>li]:mt-2', className)}
+      {...props}
+    />
+  ),
+  hr: ({ className, ...props }) => (
+    <hr className={cn('aui-md-hr my-5 border-b', className)} {...props} />
+  ),
+  table: ({ className, ...props }) => (
+    <table
+      className={cn(
+        'aui-md-table my-5 w-full border-separate border-spacing-0 overflow-y-auto',
+        className
+      )}
+      {...props}
+    />
+  ),
+  th: ({ className, ...props }) => (
+    <th
+      className={cn(
+        'aui-md-th bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [[align=center]]:text-center [[align=right]]:text-right',
+        className
+      )}
+      {...props}
+    />
+  ),
+  td: ({ className, ...props }) => (
+    <td
+      className={cn(
+        'aui-md-td border-b border-l px-4 py-2 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right',
+        className
+      )}
+      {...props}
+    />
+  ),
+  tr: ({ className, ...props }) => (
+    <tr
+      className={cn(
+        'aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg',
+        className
+      )}
+      {...props}
+    />
+  ),
+  sup: ({ className, ...props }) => (
+    <sup
+      className={cn('aui-md-sup [&>a]:text-xs [&>a]:no-underline', className)}
+      {...props}
+    />
+  ),
+  pre: ({ className, ...props }) => (
+    <pre
+      className={cn(
+        'aui-md-pre text-foreground bg-muted overflow-x-auto rounded-t-none! rounded-b-lg border border-t-0 p-4',
+        className
+      )}
+      {...props}
+    />
+  ),
+  code: function Code({ className, ...props }) {
+    const isCodeBlock = useIsMarkdownCodeBlock()
+    return (
+      <code
+        className={cn(
+          !isCodeBlock &&
+            'aui-md-inline-code bg-muted rounded border font-semibold',
+          className
+        )}
+        {...props}
+      />
+    )
+  },
+  CodeHeader,
+})

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

@@ -0,0 +1,261 @@
+'use client'
+
+import { BrainIcon, ChevronDownIcon } from 'lucide-react'
+import {
+  memo,
+  useCallback,
+  useRef,
+  useState,
+  type FC,
+  type PropsWithChildren,
+} from 'react'
+
+import {
+  useAssistantState,
+  useScrollLock,
+  type ReasoningGroupComponent,
+  type ReasoningMessagePartComponent,
+} from '@assistant-ui/react'
+
+import { MarkdownText } from '@/components/assistant-ui/markdown-text'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import { cn } from '@/lib/utils'
+
+const ANIMATION_DURATION = 200
+
+/**
+ * Root collapsible container that manages open/closed state and scroll lock.
+ * Provides animation timing via CSS variable and prevents scroll jumps on collapse.
+ */
+const ReasoningRoot: FC<
+  PropsWithChildren<{
+    className?: string
+  }>
+> = ({ className, children }) => {
+  const collapsibleRef = useRef<HTMLDivElement>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION)
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        lockScroll()
+      }
+      setIsOpen(open)
+    },
+    [lockScroll]
+  )
+
+  return (
+    <Collapsible
+      ref={collapsibleRef}
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      className={cn('aui-reasoning-root mb-4 w-full', className)}
+      style={
+        {
+          '--animation-duration': `${ANIMATION_DURATION}ms`,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </Collapsible>
+  )
+}
+
+ReasoningRoot.displayName = 'ReasoningRoot'
+
+/**
+ * Gradient overlay that softens the bottom edge during expand/collapse animations.
+ * Animation: Fades out with delay when opening and fades back in when closing.
+ */
+const GradientFade: FC<{ className?: string }> = ({ className }) => (
+  <div
+    className={cn(
+      'aui-reasoning-fade pointer-events-none absolute inset-x-0 bottom-0 z-10 h-16',
+      'bg-[linear-gradient(to_top,var(--color-background),transparent)]',
+      'fade-in-0 animate-in',
+      'group-data-[state=open]/collapsible-content:animate-out',
+      'group-data-[state=open]/collapsible-content:fade-out-0',
+      'group-data-[state=open]/collapsible-content:delay-[calc(var(--animation-duration)*0.75)]', // calc for timing the delay
+      'group-data-[state=open]/collapsible-content:fill-mode-forwards',
+      'duration-(--animation-duration)',
+      'group-data-[state=open]/collapsible-content:duration-(--animation-duration)',
+      className
+    )}
+  />
+)
+
+/**
+ * Trigger button for the Reasoning collapsible.
+ * Composed of icons, label, and text shimmer animation when reasoning is being streamed.
+ */
+const ReasoningTrigger: FC<{ active: boolean; className?: string }> = ({
+  active,
+  className,
+}) => (
+  <CollapsibleTrigger
+    className={cn(
+      'aui-reasoning-trigger group/trigger text-muted-foreground hover:text-foreground -mb-2 flex max-w-[75%] items-center gap-2 py-2 text-sm transition-colors',
+      className,
+      active && 'shimmer'
+    )}
+  >
+    <BrainIcon className="aui-reasoning-trigger-icon size-4 shrink-0" />
+    <span className="aui-reasoning-trigger-label-wrapper relative inline-block leading-none">
+      <span>Reasoning</span>
+      {active ? (
+        <span
+          aria-hidden
+          className="aui-reasoning-trigger-shimmer shimmer pointer-events-none absolute inset-0 motion-reduce:animate-none"
+        >
+          Reasoning
+        </span>
+      ) : null}
+    </span>
+    <ChevronDownIcon
+      className={cn(
+        'aui-reasoning-trigger-chevron mt-0.5 size-4 shrink-0',
+        'transition-transform duration-(--animation-duration) ease-out',
+        'group-data-[state=closed]/trigger:-rotate-90',
+        'group-data-[state=open]/trigger:rotate-0'
+      )}
+    />
+  </CollapsibleTrigger>
+)
+
+/**
+ * Collapsible content wrapper that handles height expand/collapse animation.
+ * Animation: Height animates up (collapse) and down (expand).
+ * Also provides group context for child animations via data-state attributes.
+ */
+const ReasoningContent: FC<
+  PropsWithChildren<{
+    className?: string
+    'aria-busy'?: boolean
+  }>
+> = ({ className, children, 'aria-busy': ariaBusy }) => (
+  <CollapsibleContent
+    className={cn(
+      'aui-reasoning-content text-muted-foreground relative overflow-hidden text-sm outline-none',
+      'group/collapsible-content ease-out',
+      'data-[state=closed]:animate-collapsible-up',
+      'data-[state=open]:animate-collapsible-down',
+      'data-[state=closed]:fill-mode-forwards',
+      'data-[state=closed]:pointer-events-none',
+      'data-[state=open]:duration-(--animation-duration)',
+      'data-[state=closed]:duration-(--animation-duration)',
+      className
+    )}
+    aria-busy={ariaBusy}
+  >
+    {children}
+    <GradientFade />
+  </CollapsibleContent>
+)
+
+ReasoningContent.displayName = 'ReasoningContent'
+
+/**
+ * Text content wrapper that animates the reasoning text visibility.
+ * Animation: Slides in from top + fades in when opening, reverses when closing.
+ * Reacts to parent ReasoningContent's data-state via Radix group selectors.
+ */
+const ReasoningText: FC<
+  PropsWithChildren<{
+    className?: string
+  }>
+> = ({ className, children }) => (
+  <div
+    className={cn(
+      'aui-reasoning-text relative z-0 space-y-4 pt-4 pl-6 leading-relaxed',
+      'transform-gpu transition-[transform,opacity]',
+      'group-data-[state=open]/collapsible-content:animate-in',
+      'group-data-[state=closed]/collapsible-content:animate-out',
+      'group-data-[state=open]/collapsible-content:fade-in-0',
+      'group-data-[state=closed]/collapsible-content:fade-out-0',
+      'group-data-[state=open]/collapsible-content:slide-in-from-top-4',
+      'group-data-[state=closed]/collapsible-content:slide-out-to-top-4',
+      'group-data-[state=open]/collapsible-content:duration-(--animation-duration)',
+      'group-data-[state=closed]/collapsible-content:duration-(--animation-duration)',
+      '[&_p]:-mb-2',
+      className
+    )}
+  >
+    {children}
+  </div>
+)
+
+ReasoningText.displayName = 'ReasoningText'
+
+/**
+ * Renders a single reasoning part's text with markdown support.
+ * Consecutive reasoning parts are automatically grouped by ReasoningGroup.
+ *
+ * Pass Reasoning to MessagePrimitive.Parts in thread.tsx
+ *
+ * @example:
+ * ```tsx
+ * <MessagePrimitive.Parts
+ *   components={{
+ *     Reasoning: Reasoning,
+ *     ReasoningGroup: ReasoningGroup,
+ *   }}
+ * />
+ * ```
+ */
+const ReasoningImpl: ReasoningMessagePartComponent = () => <MarkdownText />
+
+/**
+ * Collapsible wrapper that groups consecutive reasoning parts together.
+ *  Includes scroll lock to prevent page jumps during collapse animation.
+ *
+ *  Pass ReasoningGroup to MessagePrimitive.Parts in thread.tsx
+ *
+ * @example:
+ * ```tsx
+ * <MessagePrimitive.Parts
+ *   components={{
+ *     Reasoning: Reasoning,
+ *     ReasoningGroup: ReasoningGroup,
+ *   }}
+ * />
+ * ```
+ */
+const ReasoningGroupImpl: ReasoningGroupComponent = ({
+  children,
+  startIndex,
+  endIndex,
+}) => {
+  /**
+   * Detects if reasoning is currently streaming within this group's range.
+   */
+  const isReasoningStreaming = useAssistantState(({ message }) => {
+    if (message.status?.type !== 'running') return false
+    const lastIndex = message.parts.length - 1
+    if (lastIndex < 0) return false
+    const lastType = message.parts[lastIndex]?.type
+    if (lastType !== 'reasoning') return false
+    return lastIndex >= startIndex && lastIndex <= endIndex
+  })
+
+  return (
+    <ReasoningRoot>
+      <ReasoningTrigger active={isReasoningStreaming} />
+
+      <ReasoningContent aria-busy={isReasoningStreaming}>
+        <ReasoningText>{children}</ReasoningText>
+      </ReasoningContent>
+    </ReasoningRoot>
+  )
+}
+
+export const Reasoning = memo(ReasoningImpl)
+Reasoning.displayName = 'Reasoning'
+
+export const ReasoningGroup = memo(ReasoningGroupImpl)
+ReasoningGroup.displayName = 'ReasoningGroup'

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

@@ -0,0 +1,97 @@
+import type { FC } from 'react'
+import {
+  ThreadListItemPrimitive,
+  ThreadListPrimitive,
+  useAssistantState,
+} from '@assistant-ui/react'
+import { ArchiveIcon, PlusIcon } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button'
+import { Skeleton } from '@/components/ui/skeleton'
+
+// NOTE: These components are currently not used but they will be
+// when we add support for thread / chat history
+export const ThreadList: FC = () => {
+  return (
+    <ThreadListPrimitive.Root className="aui-root aui-thread-list-root flex flex-col items-stretch gap-1.5">
+      <ThreadListNew />
+      <ThreadListItems />
+    </ThreadListPrimitive.Root>
+  )
+}
+
+const ThreadListNew: FC = () => {
+  return (
+    <ThreadListPrimitive.New asChild>
+      <Button
+        className="aui-thread-list-new hover:bg-muted data-active:bg-muted flex items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start"
+        variant="ghost"
+      >
+        <PlusIcon />
+        New Thread
+      </Button>
+    </ThreadListPrimitive.New>
+  )
+}
+
+const ThreadListItems: FC = () => {
+  const isLoading = useAssistantState(({ threads }) => threads.isLoading)
+
+  if (isLoading) {
+    return <ThreadListSkeleton />
+  }
+
+  return <ThreadListPrimitive.Items components={{ ThreadListItem }} />
+}
+
+const ThreadListSkeleton: FC = () => {
+  return (
+    <>
+      {Array.from({ length: 5 }, (_, i) => (
+        <div
+          key={i}
+          role="status"
+          aria-label="Loading threads"
+          aria-live="polite"
+          className="aui-thread-list-skeleton-wrapper flex items-center gap-2 rounded-md px-3 py-2"
+        >
+          <Skeleton className="aui-thread-list-skeleton h-[22px] grow" />
+        </div>
+      ))}
+    </>
+  )
+}
+
+const ThreadListItem: FC = () => {
+  return (
+    <ThreadListItemPrimitive.Root className="aui-thread-list-item hover:bg-muted focus-visible:bg-muted focus-visible:ring-ring data-active:bg-muted flex items-center gap-2 rounded-lg transition-all focus-visible:ring-2 focus-visible:outline-none">
+      <ThreadListItemPrimitive.Trigger className="aui-thread-list-item-trigger grow px-3 py-2 text-start">
+        <ThreadListItemTitle />
+      </ThreadListItemPrimitive.Trigger>
+      <ThreadListItemArchive />
+    </ThreadListItemPrimitive.Root>
+  )
+}
+
+const ThreadListItemTitle: FC = () => {
+  return (
+    <span className="aui-thread-list-item-title text-sm">
+      <ThreadListItemPrimitive.Title fallback="New Chat" />
+    </span>
+  )
+}
+
+const ThreadListItemArchive: FC = () => {
+  return (
+    <ThreadListItemPrimitive.Archive asChild>
+      <TooltipIconButton
+        className="aui-thread-list-item-archive text-foreground hover:text-primary mr-3 ml-auto size-4 p-0"
+        variant="ghost"
+        tooltip="Archive thread"
+      >
+        <ArchiveIcon />
+      </TooltipIconButton>
+    </ThreadListItemPrimitive.Archive>
+  )
+}