feat: implement Artifact component with subcomponents and update installation instructions

Author: zhouLion

apps/www/content/2.components/artifact.md

@@ -1,6 +1,7 @@
 import {
   Actions,
   ActionsHover,
+  Artifact,
   Branch,
   ChainOfThought,
   Checkpoint,
@@ -40,6 +41,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('ComponentLoader', ComponentLoader)
   vueApp.component('ComponentViewer', ComponentViewer)
 
+  vueApp.component('Artifact', Artifact)
   vueApp.component('Actions', Actions)
   vueApp.component('ActionsHover', ActionsHover)
   vueApp.component('Branch', Branch)

apps/www/plugins/ai-elements.ts

@@ -1,22 +1,23 @@
 <script setup lang="ts">
-import type { ArtifactProps } from './props'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 
-const props = defineProps<ArtifactProps>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 
 const classes = computed(() => cn(
   'flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm',
   props.class,
 ))
+const attrs = useAttrs()
 </script>
 
 <template>
   <div
-    v-bind="{
-      ...props,
-      class: classes,
-    }"
+    :class="classes"
+    v-bind="attrs"
   >
     <slot />
   </div>

packages/elements/src/artifact/Artifact.vue

@@ -1,10 +1,20 @@
 <script setup lang="ts">
-import type { ArtifactActionProps } from './props'
+import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
+import type { LucideIcon } from 'lucide-vue-next'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@repo/shadcn-vue/components/ui/tooltip'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { computed } from 'vue'
 
+interface ArtifactActionProps {
+  class?: string
+  tooltip?: string
+  label?: string
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  icon?: LucideIcon
+}
+
 const props = withDefaults(defineProps<ArtifactActionProps>(), {
   variant: 'ghost',
   size: 'sm',

packages/elements/src/artifact/ArtifactAction.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { ArtifactActionsProps } from './props'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { computed } from 'vue'
-
-const props = defineProps<ArtifactActionsProps>()
+import { computed, useAttrs } from 'vue'
 
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+const attrs = useAttrs()
 const classes = computed(() => cn('flex items-center gap-1', props.class))
 </script>
 
 <template>
   <div
-    v-bind="{
-      ...props,
-      class: classes,
-    }"
+    :class="classes"
+    v-bind="attrs"
   >
     <slot />
   </div>

packages/elements/src/artifact/ArtifactActions.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
-import type { ArtifactCloseProps } from './props'
+import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { X } from 'lucide-vue-next'
 import { computed } from 'vue'
 
+interface ArtifactCloseProps {
+  class?: string
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+}
+
 const props = withDefaults(defineProps<ArtifactCloseProps>(), {
   variant: 'ghost',
   size: 'sm',

packages/elements/src/artifact/ArtifactClose.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { computed, useAttrs } from 'vue'
 
-interface Props {
-  class?: string
-}
-
-const props = defineProps<Props>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 const attrs = useAttrs()
 
 const classes = computed(() => cn('flex-1 overflow-auto p-4', props.class))

packages/elements/src/artifact/ArtifactContent.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
-import type { ArtifactDescriptionProps } from './props'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 
-const props = defineProps<ArtifactDescriptionProps>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+const attrs = useAttrs()
 
 const classes = computed(() => cn('text-muted-foreground text-sm', props.class))
 </script>
 
 <template>
   <p
-    v-bind="{
-      ...props,
-      class: classes,
-    }"
+    :class="classes"
+    v-bind="attrs"
   >
     <slot />
   </p>

packages/elements/src/artifact/ArtifactDescription.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import type { ArtifactHeaderProps } from './props'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 
-const props = defineProps<ArtifactHeaderProps>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 
 const classes = computed(() => cn(
   'flex items-center justify-between border-b bg-muted/50 px-4 py-3',
   props.class,
 ))
+const attrs = useAttrs()
 </script>
 
 <template>
   <div
     :class="classes"
-    v-bind="{
-      ...props,
-      class: classes,
-    }"
+    v-bind="attrs"
   >
     <slot />
   </div>

packages/elements/src/artifact/ArtifactHeader.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
-import type { ArtifactTitleProps } from './props'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 
-const props = defineProps<ArtifactTitleProps>()
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
 
 const classes = computed(() => cn('font-medium text-foreground text-sm', props.class))
+const attrs = useAttrs()
 </script>
 
 <template>
   <p
-    v-bind="{
-      ...props,
-      class: classes,
-    }"
+    v-bind="attrs"
+    :class="classes"
   >
     <slot />
   </p>