@gram-ai/elements 1.20.0 → 1.20.1

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

@@ -1,5 +1,6 @@
 import { Chat } from '..'
-import type { Meta, StoryFn } from '@storybook/react-vite'
+import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite'
+import { ThreadList } from '@/components/assistant-ui/thread-list'
 
 const meta: Meta<typeof Chat> = {
   title: 'Chat/Variants',
@@ -33,6 +34,32 @@ Standalone.decorators = [
   ),
 ]
 
+export const StandaloneWithHistory: StoryObj<typeof Chat> = {
+  name: 'Standalone with History',
+  args: {},
+  render: () => (
+    <div className="bg-background flex h-10/12 max-h-[800px] w-1/2 flex-row gap-4 overflow-hidden rounded-lg border shadow-xl sm:w-3/4">
+      <ThreadList className="w-56 flex-none shrink-0 border-r" />
+      <Chat className="flex-3 grow" />
+    </div>
+  ),
+}
+StandaloneWithHistory.decorators = [
+  (Story) => (
+    <div className="m-auto flex h-screen w-full items-center justify-center border bg-linear-to-r from-violet-600 to-indigo-800">
+      <Story />
+    </div>
+  ),
+]
+StandaloneWithHistory.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      history: { enabled: true, showThreadList: true },
+    },
+  },
+}
+
 export const Sidecar: Story = () => (
   <div className="mr-[400px] p-10">
     <h1 className="text-2xl font-bold">Sidecar Variant</h1>

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

@@ -35,7 +35,11 @@ type Dimensions = {
   maxHeight?: string | number | `${number}%`
 }
 
-export const AssistantModal: FC = () => {
+interface AssistantModalProps {
+  className?: string
+}
+
+export const AssistantModal: FC<AssistantModalProps> = ({ className }) => {
   const { config } = useElements()
   const themeProps = useThemeProps()
   const r = useRadius()
@@ -93,7 +97,8 @@ export const AssistantModal: FC = () => {
             anchorPositionClass,
             themeProps.className,
             r('lg'),
-            isOpen && 'shadow-xl'
+            isOpen && 'shadow-xl',
+            className
           )}
         >
           <AnimatePresence mode="wait">

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

@@ -14,7 +14,11 @@ import * as m from 'motion/react-m'
 import { EASE_OUT_QUINT } from '@/lib/easing'
 import { useAssistantState } from '@assistant-ui/react'
 
-export const AssistantSidecar: FC = () => {
+interface AssistantSidecarProps {
+  className?: string
+}
+
+export const AssistantSidecar: FC<AssistantSidecarProps> = ({ className }) => {
   const { config } = useElements()
   const themeProps = useThemeProps()
   const sidecarConfig = config.sidecar ?? {}
@@ -47,7 +51,8 @@ export const AssistantSidecar: FC = () => {
         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
+          themeProps.className,
+          className
         )}
       >
         {/* Header */}

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

@@ -12,13 +12,18 @@ import { useRadius } from '@/hooks/useRadius'
 import { cn } from '@/lib/utils'
 import { useDensity } from '@/hooks/useDensity'
 
-export const ThreadList: FC = () => {
+interface ThreadListProps {
+  className?: string
+}
+
+export const ThreadList: FC<ThreadListProps> = ({ className }) => {
   const d = useDensity()
   return (
     <ThreadListPrimitive.Root
       className={cn(
-        'aui-root aui-thread-list-root flex flex-col items-stretch',
-        d('gap-sm')
+        'aui-root aui-thread-list-root bg-background flex flex-col items-stretch',
+        d('gap-sm'),
+        className
       )}
     >
       <div

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

@@ -68,7 +68,11 @@ const ApiKeyWarning = () => (
   </div>
 )
 
-export const Thread: FC = () => {
+interface ThreadProps {
+  className?: string
+}
+
+export const Thread: FC<ThreadProps> = ({ className }) => {
   const themeProps = useThemeProps()
   const d = useDensity()
   const { config } = useElements()
@@ -81,7 +85,8 @@ export const Thread: FC = () => {
         <ThreadPrimitive.Root
           className={cn(
             'aui-root aui-thread-root bg-background @container flex h-full flex-col',
-            themeProps.className
+            themeProps.className,
+            className
           )}
         >
           <ThreadPrimitive.Viewport