@gram-ai/elements 1.27.4 → 1.27.5

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

@@ -1,62 +1,62 @@
-import type { FC } from 'react'
+import type { FC } from "react";
 import {
   ThreadListItemPrimitive,
   ThreadListPrimitive,
   useAssistantState,
-} from '@assistant-ui/react'
-import { PlusIcon } from 'lucide-react'
+} from "@assistant-ui/react";
+import { PlusIcon } from "lucide-react";
 
-import { Button } from '@/components/ui/button'
-import { Skeleton } from '@/components/ui/skeleton'
-import { useRadius } from '@/hooks/useRadius'
-import { cn } from '@/lib/utils'
-import { useDensity } from '@/hooks/useDensity'
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useRadius } from "@/hooks/useRadius";
+import { cn } from "@/lib/utils";
+import { useDensity } from "@/hooks/useDensity";
 
 interface ThreadListProps {
-  className?: string
+  className?: string;
 }
 
 export const ThreadList: FC<ThreadListProps> = ({ className }) => {
-  const d = useDensity()
+  const d = useDensity();
   return (
     <ThreadListPrimitive.Root
       className={cn(
-        'aui-root aui-thread-list-root bg-background text-foreground flex flex-col items-stretch',
-        d('gap-sm'),
-        className
+        "aui-root aui-thread-list-root flex flex-col items-stretch bg-background text-foreground",
+        d("gap-sm"),
+        className,
       )}
     >
       <div
         className={cn(
-          'aui-thread-list-new-section border-border border-b pb-2',
-          d('py-sm'),
-          d('px-sm')
+          "aui-thread-list-new-section border-b border-border pb-2",
+          d("py-sm"),
+          d("px-sm"),
         )}
       >
         <ThreadListNew />
       </div>
       <div
         className={cn(
-          'aui-thread-list-items-section flex flex-col gap-1',
-          d('py-xs'),
-          d('px-sm')
+          "aui-thread-list-items-section flex flex-col gap-1",
+          d("py-xs"),
+          d("px-sm"),
         )}
       >
         <ThreadListItems />
       </div>
     </ThreadListPrimitive.Root>
-  )
-}
+  );
+};
 
 const ThreadListNew: FC = () => {
-  const d = useDensity()
+  const d = useDensity();
   return (
     <ThreadListPrimitive.New asChild>
       <Button
         className={cn(
-          'aui-thread-list-new text-foreground hover:bg-muted data-[active=true]:bg-muted/80 flex w-full cursor-pointer items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start',
-          d('p-sm'),
-          d('py-xs')
+          "aui-thread-list-new flex w-full cursor-pointer items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start text-foreground hover:bg-muted data-[active=true]:bg-muted/80",
+          d("p-sm"),
+          d("py-xs"),
         )}
         variant="ghost"
       >
@@ -64,18 +64,18 @@ const ThreadListNew: FC = () => {
         New Thread
       </Button>
     </ThreadListPrimitive.New>
-  )
-}
+  );
+};
 
 const ThreadListItems: FC = () => {
-  const isLoading = useAssistantState(({ threads }) => threads.isLoading)
+  const isLoading = useAssistantState(({ threads }) => threads.isLoading);
 
   if (isLoading) {
-    return <ThreadListSkeleton />
+    return <ThreadListSkeleton />;
   }
 
-  return <ThreadListPrimitive.Items components={{ ThreadListItem }} />
-}
+  return <ThreadListPrimitive.Items components={{ ThreadListItem }} />;
+};
 
 const ThreadListSkeleton: FC = () => {
   return (
@@ -92,24 +92,24 @@ const ThreadListSkeleton: FC = () => {
         </div>
       ))}
     </>
-  )
-}
+  );
+};
 
 const ThreadListItem: FC = () => {
-  const r = useRadius()
-  const d = useDensity()
+  const r = useRadius();
+  const d = useDensity();
   return (
     <ThreadListItemPrimitive.Root
       className={cn(
-        'aui-thread-list-item group hover:bg-muted focus-visible:bg-muted focus-visible:ring-ring data-[active=true]:bg-muted flex items-center gap-2 rounded-lg transition-all focus-visible:ring-2 focus-visible:outline-none',
-        r('md')
+        "aui-thread-list-item group flex items-center gap-2 rounded-lg transition-all hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-[active=true]:bg-muted",
+        r("md"),
       )}
     >
       <ThreadListItemPrimitive.Trigger
         className={cn(
-          'aui-thread-list-item-trigger flex min-w-0 grow cursor-pointer items-center text-start',
-          d('px-lg'),
-          d('py-sm')
+          "aui-thread-list-item-trigger flex min-w-0 grow cursor-pointer items-center text-start",
+          d("px-lg"),
+          d("py-sm"),
         )}
       >
         <ThreadListItemTitle />
@@ -117,13 +117,13 @@ const ThreadListItem: FC = () => {
       {/* Archive button hidden until feature is implemented */}
       {/* <ThreadListItemArchive /> */}
     </ThreadListItemPrimitive.Root>
-  )
-}
+  );
+};
 
 const ThreadListItemTitle: FC = () => {
   return (
-    <span className="aui-thread-list-item-title text-foreground text-sm break-words">
+    <span className="aui-thread-list-item-title text-sm break-words text-foreground">
       <ThreadListItemPrimitive.Title fallback="New Chat" />
     </span>
-  )
-}
+  );
+};