@gram-ai/elements 1.18.5 → 1.18.6

package/src/components/Chat/stories/Variants.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Chat } from '..'
+import type { Meta, StoryFn } from '@storybook/react-vite'
+
+const meta: Meta<typeof Chat> = {
+  title: 'Chat/Variants',
+  component: Chat,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Chat>
+
+export default meta
+
+type Story = StoryFn<typeof Chat>
+
+export const Default: Story = () => (
+  <div className="flex h-full w-full flex-col gap-4 p-10">
+    <h1 className="text-2xl font-bold">Modal example</h1>
+    <p>Click the button in the bottom right corner to open the chat.</p>
+    <Chat />
+  </div>
+)
+
+export const Standalone: Story = () => <Chat />
+Standalone.parameters = {
+  elements: { config: { variant: 'standalone' } },
+}
+Standalone.decorators = [
+  (Story) => (
+    <div className="m-auto flex h-screen w-full max-w-3xl flex-col">
+      <Story />
+    </div>
+  ),
+]
+
+export const Sidecar: Story = () => (
+  <div className="mr-[400px] p-10">
+    <h1 className="text-2xl font-bold">Sidecar Variant</h1>
+    <p>The sidebar is always visible on the right.</p>
+    <Chat />
+  </div>
+)
+Sidecar.parameters = {
+  elements: { config: { variant: 'sidecar' } },
+}

package/src/components/Chat/stories/Welcome.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Chat } from '..'
+import type { Meta, StoryFn } from '@storybook/react-vite'
+
+const meta: Meta<typeof Chat> = {
+  title: 'Chat/Welcome',
+  component: Chat,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div className="m-auto flex h-screen w-full max-w-3xl flex-col">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Chat>
+
+export default meta
+
+type Story = StoryFn<typeof Chat>
+
+export const CustomMessage: Story = () => <Chat />
+CustomMessage.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: 'Hello there!',
+        subtitle: "How can I serve your organization's needs today?",
+        suggestions: [
+          {
+            title: 'Write a SQL query',
+            label: 'to find top customers',
+            action: 'Write a SQL query to find top customers',
+          },
+        ],
+      },
+    },
+  },
+}

package/src/components/FrontendTools/index.tsx

@@ -0,0 +1,9 @@
+import { AssistantTool } from '@assistant-ui/react'
+
+export function FrontendTools({
+  tools: frontendTools,
+}: {
+  tools: Record<string, AssistantTool>
+}) {
+  return <>{Object.entries(frontendTools).map(([, tool]) => tool({}))}</>
+}

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

@@ -0,0 +1,255 @@
+'use client'
+
+import { useMemo, useState, type FC } from 'react'
+import {
+  Loader,
+  Maximize,
+  MessageCircleIcon,
+  Minimize,
+  XIcon,
+} from 'lucide-react'
+import { LazyMotion, domMax, AnimatePresence, MotionConfig } from 'motion/react'
+import * as m from 'motion/react-m'
+
+import { Thread } from '@/components/assistant-ui/thread'
+import { useThemeProps } from '@/hooks/useThemeProps'
+import { useRadius } from '@/hooks/useRadius'
+import { useDensity } from '@/hooks/useDensity'
+import { assertNever, cn } from '@/lib/utils'
+import { useElements } from '@/hooks/useElements'
+import { useExpanded } from '@/hooks/useExpanded'
+import { EASE_OUT_QUINT } from '@/lib/easing'
+import { useAssistantState } from '@assistant-ui/react'
+
+const LAYOUT_TRANSITION = {
+  layout: {
+    duration: 0.25,
+    ease: EASE_OUT_QUINT,
+  },
+} as const
+
+type Dimensions = {
+  width?: string | number | `${number}%`
+  height?: string | number | `${number}%`
+  maxHeight?: string | number | `${number}%`
+}
+
+export const AssistantModal: FC = () => {
+  const { config } = useElements()
+  const themeProps = useThemeProps()
+  const r = useRadius()
+  const d = useDensity()
+  const [isOpen, setIsOpen] = useState(config.modal?.defaultOpen ?? false)
+  const { expandable, isExpanded, setIsExpanded } = useExpanded()
+  const title = config.modal?.title
+  const customIcon = config.modal?.icon
+
+  const position = config.modal?.position ?? 'bottom-right'
+  const anchorPositionClass = positionClassname(position)
+
+  const defaultDimensions: Dimensions = useMemo(
+    () =>
+      config.modal?.dimensions?.default ?? {
+        width: '500px',
+        height: '600px',
+        maxHeight: '95vh',
+      },
+    [config.modal?.dimensions?.default]
+  )
+
+  const expandedDimensions: Dimensions = useMemo(
+    () =>
+      config.modal?.dimensions?.expanded ?? {
+        width: '70vw',
+        height: '90vh',
+      },
+    [config.modal?.dimensions?.expanded]
+  )
+  const thread = useAssistantState(({ thread }) => thread)
+  const isGenerating = thread.messages.some(
+    (message) => message.status?.type === 'running'
+  )
+
+  const effectiveWidth = isExpanded
+    ? expandedDimensions.width
+    : defaultDimensions.width
+  const effectiveHeight = isExpanded
+    ? expandedDimensions.height
+    : defaultDimensions.height
+  const effectiveMaxHeight = defaultDimensions.maxHeight
+
+  return (
+    <LazyMotion features={domMax}>
+      {/* reducedMotion="user" respects prefers-reduced-motion */}
+      <MotionConfig reducedMotion="user" transition={LAYOUT_TRANSITION}>
+        <div
+          className={cn(
+            'aui-root aui-modal-anchor fixed z-10',
+            anchorPositionClass,
+            themeProps.className,
+            r('lg'),
+            isOpen && 'shadow-xl'
+          )}
+        >
+          <AnimatePresence mode="wait">
+            {!isOpen ? (
+              <m.button
+                key="button"
+                layout
+                layoutId="chat-container"
+                onClick={() => setIsOpen(true)}
+                className={cn(
+                  'aui-modal-button bg-primary text-primary-foreground flex size-12 cursor-pointer items-center justify-center border shadow-lg transition-shadow hover:shadow-xl',
+                  r('full')
+                )}
+                initial={false}
+                aria-label={`Open ${title}`}
+                style={{ originX: 1, originY: 1 }}
+              >
+                <m.div
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.8 }}
+                  transition={{ duration: 0.2, ease: EASE_OUT_QUINT }}
+                  className="flex size-full items-center justify-center"
+                >
+                  {customIcon ? (
+                    customIcon('closed')
+                  ) : (
+                    <MessageCircleIcon className="size-6" />
+                  )}
+                </m.div>
+              </m.button>
+            ) : (
+              <m.div
+                key="chat"
+                layout
+                layoutId="chat-container"
+                className={cn(
+                  'aui-modal-content bg-popover text-popover-foreground flex flex-col overflow-hidden border [&>.aui-thread-root]:bg-inherit',
+                  r('lg')
+                )}
+                initial={false}
+                style={{
+                  originX: position.includes('left') ? 0 : 1,
+                  originY: position.includes('top') ? 0 : 1,
+                  width: effectiveWidth,
+                  height: effectiveHeight,
+                  maxHeight: effectiveMaxHeight,
+                }}
+              >
+                <m.div
+                  className={cn(
+                    'aui-modal-header flex shrink-0 items-center justify-between border-b',
+                    d('h-header'),
+                    d('px-lg')
+                  )}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{
+                    duration: 0.2,
+                    delay: 0.1,
+                    ease: EASE_OUT_QUINT,
+                  }}
+                >
+                  <div className={cn('flex min-w-0 items-center')}>
+                    <span
+                      className={cn(
+                        'text-md flex items-center gap-2 truncate font-medium',
+                        isGenerating && 'shimmer'
+                      )}
+                    >
+                      <span className="truncate">{title}</span>
+
+                      {isGenerating && (
+                        <Loader
+                          className="text-muted-foreground size-4.5 animate-spin"
+                          strokeWidth={1.25}
+                        />
+                      )}
+                    </span>
+                  </div>
+
+                  <div className="flex flex-row items-center justify-end gap-1">
+                    {expandable ? (
+                      <button
+                        type="button"
+                        onClick={() => setIsExpanded((v) => !v)}
+                        className={cn(
+                          'text-muted-foreground hover:text-foreground hover:bg-accent flex h-8 cursor-pointer items-center rounded-md px-2 text-xs transition-colors'
+                        )}
+                        aria-pressed={isExpanded}
+                        aria-label={
+                          isExpanded ? 'Collapse assistant' : 'Expand assistant'
+                        }
+                      >
+                        {isExpanded ? (
+                          <Minimize
+                            strokeWidth={2}
+                            className="size-3.5 rotate-90"
+                          />
+                        ) : (
+                          <Maximize
+                            strokeWidth={2}
+                            className="size-3.5 rotate-90"
+                          />
+                        )}
+                      </button>
+                    ) : null}
+                    <button
+                      onClick={() => {
+                        setIsOpen(false)
+                        // Optional: reset expansion when closing
+                        setIsExpanded(false)
+                      }}
+                      className="text-muted-foreground hover:text-foreground hover:bg-accent -mr-1 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
+                      aria-label={`Close ${title}`}
+                    >
+                      <XIcon className="size-4.5" />
+                    </button>
+                  </div>
+                </m.div>
+
+                {/* Thread content */}
+                <m.div
+                  className="aui-modal-thread w-full flex-1 overflow-hidden"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{
+                    duration: 0.2,
+                    delay: 0.05,
+                    ease: EASE_OUT_QUINT,
+                  }}
+                >
+                  <Thread />
+                </m.div>
+              </m.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </MotionConfig>
+    </LazyMotion>
+  )
+}
+
+function positionClassname(
+  position:
+    | 'bottom-right'
+    | 'bottom-left'
+    | 'top-right'
+    | 'top-left'
+    | undefined
+): string {
+  switch (position) {
+    case 'bottom-left':
+      return 'left-4 bottom-4'
+    case 'top-right':
+      return 'right-4 top-4'
+    case 'top-left':
+      return 'left-4 top-4'
+    case 'bottom-right':
+      return 'right-4 bottom-4'
+    default:
+      assertNever(position)
+  }
+}

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

@@ -0,0 +1,88 @@
+'use client'
+
+import { type FC } from 'react'
+import { Loader, PanelRightClose, PanelRightOpen } from 'lucide-react'
+import { Thread } from '@/components/assistant-ui/thread'
+import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button'
+import { useThemeProps } from '@/hooks/useThemeProps'
+import { useElements } from '@/hooks/useElements'
+import { cn } from '@/lib/utils'
+import { useExpanded } from '@/hooks/useExpanded'
+import { LazyMotion, domMax } from 'motion/react'
+import * as m from 'motion/react-m'
+import { EASE_OUT_QUINT } from '@/lib/easing'
+import { useAssistantState } from '@assistant-ui/react'
+
+export const AssistantSidecar: FC = () => {
+  const { config } = useElements()
+  const themeProps = useThemeProps()
+  const sidecarConfig = config.sidecar ?? {}
+  const { title, dimensions } = sidecarConfig
+  const { isExpanded, setIsExpanded } = useExpanded()
+  const thread = useAssistantState(({ thread }) => thread)
+  const isGenerating = thread.messages.some(
+    (message) => message.status?.type === 'running'
+  )
+
+  return (
+    <LazyMotion features={domMax}>
+      <m.div
+        initial={{
+          width: dimensions?.default?.width ?? '400px',
+          height: dimensions?.default?.height ?? '100vh',
+        }}
+        animate={{
+          width: isExpanded
+            ? (dimensions?.expanded?.width ?? '800px')
+            : (dimensions?.default?.width ?? '400px'),
+          height: isExpanded
+            ? (dimensions?.expanded?.height ?? '100%')
+            : (dimensions?.default?.height ?? '100vh'),
+        }}
+        transition={{ duration: 0.3, ease: EASE_OUT_QUINT }}
+        className={cn(
+          'aui-root aui-sidecar bg-popover text-popover-foreground fixed top-0 right-0 border-l',
+          themeProps.className
+        )}
+      >
+        {/* Header */}
+        <div className="aui-sidecar-header flex h-14 items-center justify-between border-b px-4">
+          <span
+            className={cn(
+              'text-md flex items-center gap-2 font-medium',
+              isGenerating && 'shimmer'
+            )}
+          >
+            {title}
+
+            {isGenerating && (
+              <Loader
+                className="text-muted-foreground size-4.5 animate-spin"
+                strokeWidth={1.25}
+              />
+            )}
+          </span>
+          <div className="aui-sidecar-header-actions flex items-center gap-1">
+            <TooltipIconButton
+              tooltip={isExpanded ? 'Collapse' : 'Pop out'}
+              variant="ghost"
+              className="aui-sidecar-popout size-8"
+              onClick={() => setIsExpanded((v) => !v)}
+            >
+              {!isExpanded ? (
+                <PanelRightOpen className="size-4.5" />
+              ) : (
+                <PanelRightClose className="size-4.5" />
+              )}
+            </TooltipIconButton>
+          </div>
+        </div>
+
+        {/* Thread content */}
+        <div className="aui-sidecar-content h-[calc(100%-3.5rem)] overflow-hidden">
+          <Thread />
+        </div>
+      </m.div>
+    </LazyMotion>
+  )
+}

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

@@ -0,0 +1,233 @@
+'use client'
+
+import { PropsWithChildren, useEffect, useState, type FC } from 'react'
+import { XIcon, PlusIcon, FileText } from 'lucide-react'
+import {
+  AttachmentPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  useAssistantState,
+  useAssistantApi,
+} from '@assistant-ui/react'
+import { useShallow } from 'zustand/shallow'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
+import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button'
+import { cn } from '@/lib/utils'
+
+const useFileSrc = (file: File | undefined) => {
+  const [src, setSrc] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    if (!file) {
+      setSrc(undefined)
+      return
+    }
+
+    const objectUrl = URL.createObjectURL(file)
+    setSrc(objectUrl)
+
+    return () => {
+      URL.revokeObjectURL(objectUrl)
+    }
+  }, [file])
+
+  return src
+}
+
+const useAttachmentSrc = () => {
+  const { file, src } = useAssistantState(
+    useShallow(({ attachment }): { file?: File; src?: string } => {
+      if (attachment.type !== 'image') return {}
+      if (attachment.file) return { file: attachment.file }
+      const src = attachment.content?.filter((c) => c.type === 'image')[0]
+        ?.image
+      if (!src) return {}
+      return { src }
+    })
+  )
+
+  return useFileSrc(file) ?? src
+}
+
+type AttachmentPreviewProps = {
+  src: string
+}
+
+const AttachmentPreview: FC<AttachmentPreviewProps> = ({ src }) => {
+  const [isLoaded, setIsLoaded] = useState(false)
+  return (
+    <img
+      src={src}
+      alt="Image Preview"
+      className={
+        isLoaded
+          ? 'aui-attachment-preview-image-loaded block h-auto max-h-[80vh] w-auto max-w-full object-contain'
+          : 'aui-attachment-preview-image-loading hidden'
+      }
+      onLoad={() => setIsLoaded(true)}
+    />
+  )
+}
+
+const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
+  const src = useAttachmentSrc()
+
+  if (!src) return children
+
+  return (
+    <Dialog>
+      <DialogTrigger
+        className="aui-attachment-preview-trigger hover:bg-accent/50 cursor-pointer transition-colors"
+        asChild
+      >
+        {children}
+      </DialogTrigger>
+      <DialogContent className="aui-attachment-preview-dialog-content [&_svg]:text-background [&>button]:bg-foreground/60 [&>button]:hover:[&_svg]:text-destructive p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:p-1 [&>button]:opacity-100 [&>button]:!ring-0">
+        <DialogTitle className="aui-sr-only sr-only">
+          Image Attachment Preview
+        </DialogTitle>
+        <div className="aui-attachment-preview bg-background relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden">
+          <AttachmentPreview src={src} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const AttachmentThumb: FC = () => {
+  const isImage = useAssistantState(
+    ({ attachment }) => attachment.type === 'image'
+  )
+  const src = useAttachmentSrc()
+
+  return (
+    <Avatar className="aui-attachment-tile-avatar h-full w-full rounded-none">
+      <AvatarImage
+        src={src}
+        alt="Attachment preview"
+        className="aui-attachment-tile-image object-cover"
+      />
+      <AvatarFallback delayMs={isImage ? 200 : 0}>
+        <FileText className="aui-attachment-tile-fallback-icon text-muted-foreground size-8" />
+      </AvatarFallback>
+    </Avatar>
+  )
+}
+
+const AttachmentUI: FC = () => {
+  const api = useAssistantApi()
+  const isComposer = api.attachment.source === 'composer'
+
+  const isImage = useAssistantState(
+    ({ attachment }) => attachment.type === 'image'
+  )
+  const typeLabel = useAssistantState(({ attachment }) => {
+    const type = attachment.type
+    switch (type) {
+      case 'image':
+        return 'Image'
+      case 'document':
+        return 'Document'
+      case 'file':
+        return 'File'
+      default: {
+        const _exhaustiveCheck: never = type
+        throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`)
+      }
+    }
+  })
+
+  return (
+    <Tooltip>
+      <AttachmentPrimitive.Root
+        className={cn(
+          'aui-attachment-root relative',
+          isImage &&
+            'aui-attachment-root-composer only:[&>#attachment-tile]:size-24'
+        )}
+      >
+        <AttachmentPreviewDialog>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                'aui-attachment-tile bg-muted size-14 cursor-pointer overflow-hidden rounded-[14px] border transition-opacity hover:opacity-75',
+                isComposer &&
+                  'aui-attachment-tile-composer border-foreground/20'
+              )}
+              role="button"
+              id="attachment-tile"
+              aria-label={`${typeLabel} attachment`}
+            >
+              <AttachmentThumb />
+            </div>
+          </TooltipTrigger>
+        </AttachmentPreviewDialog>
+        {isComposer && <AttachmentRemove />}
+      </AttachmentPrimitive.Root>
+      <TooltipContent side="top">
+        <AttachmentPrimitive.Name />
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+const AttachmentRemove: FC = () => {
+  return (
+    <AttachmentPrimitive.Remove asChild>
+      <TooltipIconButton
+        tooltip="Remove file"
+        className="aui-attachment-tile-remove text-muted-foreground hover:[&_svg]:text-destructive absolute top-1.5 right-1.5 size-3.5 rounded-full bg-white opacity-100 shadow-sm hover:!bg-white [&_svg]:text-black"
+        side="top"
+      >
+        <XIcon className="aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" />
+      </TooltipIconButton>
+    </AttachmentPrimitive.Remove>
+  )
+}
+
+export const UserMessageAttachments: FC = () => {
+  return (
+    <div className="aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2">
+      <MessagePrimitive.Attachments components={{ Attachment: AttachmentUI }} />
+    </div>
+  )
+}
+
+export const ComposerAttachments: FC = () => {
+  return (
+    <div className="aui-composer-attachments mb-2 flex w-full flex-row items-center gap-2 overflow-x-auto px-1.5 pt-0.5 pb-1 empty:hidden">
+      <ComposerPrimitive.Attachments
+        components={{ Attachment: AttachmentUI }}
+      />
+    </div>
+  )
+}
+
+export const ComposerAddAttachment: FC = () => {
+  return (
+    <ComposerPrimitive.AddAttachment asChild>
+      <TooltipIconButton
+        tooltip="Add Attachment"
+        side="top"
+        variant="ghost"
+        size="icon"
+        align="start"
+        className="aui-composer-add-attachment hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30 size-[34px] rounded-full p-1 text-xs font-semibold"
+        aria-label="Add Attachment"
+      >
+        <PlusIcon className="aui-attachment-add-icon size-5 stroke-[1.5px]" />
+      </TooltipIconButton>
+    </ComposerPrimitive.AddAttachment>
+  )
+}