[Feature] Add artifact component and its sub components

apps/www/plugins/ai-elements.ts

@@ -1,6 +1,7 @@
 import {
   Actions,
   ActionsHover,
+  Artifact,
   Branch,
   ChainOfThought,
   CodeBlock,
@@ -39,6 +40,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)

packages/elements/src/artifact/Artifact.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+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
+    :class="classes"
+    v-bind="attrs"
+  >
+    <slot />
+  </div>
+</template>

packages/elements/src/artifact/ArtifactAction.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+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',
+})
+
+const classes = computed(() => cn(
+  'size-8 p-0 text-muted-foreground hover:text-foreground',
+  props.class,
+))
+</script>
+
+<template>
+  <TooltipProvider v-if="props.tooltip">
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          type="button"
+          v-bind="{
+            ...props,
+            class: classes,
+          }"
+        >
+          <component
+            :is="props.icon"
+            v-if="props.icon"
+            class="size-4"
+          />
+          <slot v-else />
+          <span class="sr-only">{{ props.label || props.tooltip }}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{{ props.tooltip }}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+
+  <Button
+    v-else
+    type="button"
+    v-bind="{
+      ...props,
+      class: classes,
+    }"
+  >
+    <component
+      :is="props.icon"
+      v-if="props.icon"
+      class="size-4"
+    />
+    <slot v-else />
+    <span class="sr-only">{{ props.label || props.tooltip }}</span>
+  </Button>
+</template>

packages/elements/src/artifact/ArtifactActions.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+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
+    :class="classes"
+    v-bind="attrs"
+  >
+    <slot />
+  </div>
+</template>

packages/elements/src/artifact/ArtifactClose.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+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',
+})
+
+const classes = computed(() => cn(
+  'size-8 p-0 text-muted-foreground hover:text-foreground',
+  props.class,
+))
+</script>
+
+<template>
+  <Button
+    type="button"
+    v-bind="{
+      ...props,
+      class: classes,
+    }"
+  >
+    <slot>
+      <X class="size-4" />
+    </slot>
+    <span class="sr-only">Close</span>
+  </Button>
+</template>

packages/elements/src/artifact/ArtifactContent.vue

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

packages/elements/src/artifact/ArtifactDescription.vue

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

packages/elements/src/artifact/ArtifactHeader.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+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="attrs"
+  >
+    <slot />
+  </div>
+</template>

packages/elements/src/artifact/ArtifactTitle.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+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="attrs"
+    :class="classes"
+  >
+    <slot />
+  </p>
+</template>

packages/elements/src/artifact/index.ts

@@ -0,0 +1,8 @@
+export { default as Artifact } from './Artifact.vue'
+export { default as ArtifactAction } from './ArtifactAction.vue'
+export { default as ArtifactActions } from './ArtifactActions.vue'
+export { default as ArtifactClose } from './ArtifactClose.vue'
+export { default as ArtifactContent } from './ArtifactContent.vue'
+export { default as ArtifactDescription } from './ArtifactDescription.vue'
+export { default as ArtifactHeader } from './ArtifactHeader.vue'
+export { default as ArtifactTitle } from './ArtifactTitle.vue'

packages/elements/src/index.ts

@@ -1,4 +1,5 @@
 export * from './actions'
+export * from './artifact'
 export * from './branch'
 export * from './chain-of-thought'
 export * from './code-block'