fix: Use theme color for artifacts (#167)

.changeset/new-chefs-drive.md

@@ -0,0 +1,5 @@
+---
+'@llamaindex/chat-ui': patch
+---
+
+Use theme color for artifacts

packages/chat-ui/src/chat/canvas/actions.tsx

@@ -78,11 +78,11 @@ function ArtifactVersionHistory() {
                   setIsOpen(false)
                 }}
               >
-                <span className={cn(isCurrent && 'text-blue-500')}>
+                <span className={cn(isCurrent && 'text-primary')}>
                   Version {versionNumber}
                 </span>
                 {isLatest ? (
-                  <Badge className="h-6 w-[70px] justify-center bg-blue-500 text-center hover:bg-blue-600">
+                  <Badge className="bg-primary text-primary-foreground hover:bg-primary/90 h-6 w-[70px] justify-center text-center">
                     Latest
                   </Badge>
                 ) : (

packages/chat-ui/src/chat/canvas/artifact-card.tsx

@@ -40,20 +40,22 @@ export function ArtifactCard({
   return (
     <div
       className={cn(
-        'border-border flex w-full max-w-72 cursor-pointer items-center justify-between gap-2 rounded-lg border-2 p-2 hover:border-blue-500',
-        isDisplayed && 'border-blue-500'
+        'border-border hover:border-primary flex w-full max-w-72 cursor-pointer items-center justify-between gap-2 rounded-lg border-2 p-2',
+        isDisplayed && 'border-primary'
       )}
       onClick={() => openArtifactInCanvas(data)}
     >
       <div className="flex flex-1 items-center gap-2">
-        <Icon className="size-7 shrink-0 text-blue-500" />
+        <Icon className="text-primary size-7 shrink-0" />
         <div className="flex flex-col">
           <div className="text-sm font-semibold">Version {versionNumber}</div>
           <div className="text-xs text-gray-600">{title}</div>
         </div>
       </div>
       {isLatest ? (
-        <Badge className="ml-2 bg-blue-500 hover:bg-blue-600">Latest</Badge>
+        <Badge className="bg-primary text-primary-foreground hover:bg-primary/90 ml-2">
+          Latest
+        </Badge>
       ) : (
         <Button
           variant="ghost"

packages/chat-ui/src/chat/canvas/artifacts/code.tsx

@@ -68,7 +68,7 @@ export function CodeArtifactViewer({
             <div className="bg-background absolute right-0 top-0 flex gap-2 pr-2 text-sm">
               <Button
                 size="sm"
-                className="h-7 bg-blue-500 hover:bg-blue-600"
+                className="bg-primary text-primary-foreground hover:bg-primary/90 h-7"
                 onClick={handleSaveChanges}
               >
                 Save

packages/chat-ui/src/chat/canvas/artifacts/document.tsx

@@ -67,7 +67,7 @@ export function DocumentArtifactViewer({
     <div className={cn('flex min-h-0 flex-1 flex-col', className)}>
       <div className="flex items-center justify-between border-b p-4">
         <h3 className="flex items-center gap-3 text-gray-600">
-          <FileText className="size-8 text-blue-500" />
+          <FileText className="text-primary size-8" />
           <div className="flex flex-col">
             <div className="text font-semibold">{title}</div>
             <div className="text-xs text-gray-500">{type}</div>
@@ -80,7 +80,7 @@ export function DocumentArtifactViewer({
           <div className="absolute right-[30px] top-[14px] z-20 flex gap-2 text-sm">
             <Button
               size="sm"
-              className="h-7 bg-blue-500 hover:bg-blue-600"
+              className="bg-primary text-primary-foreground hover:bg-primary/90 h-7"
               onClick={handleSaveChanges}
             >
               Save

packages/chat-ui/src/widgets/pdf-dialog.tsx

@@ -34,7 +34,7 @@ export function PdfDialog(props: PdfDialogProps) {
             <DrawerDescription className="break-all">
               File URL:{' '}
               <a
-                className="hover:text-blue-900"
+                className="hover:text-primary"
                 href={props.url}
                 target="_blank"
                 rel="noopener"