feat: add confirmation component

Author: peoray

apps/www/content/3.components/1.chatbot/confirmation.md

@@ -7,6 +7,10 @@ import {
   Checkpoint,
   CodeBlock,
   CodeBlockDark,
+  Confirmation,
+  ConfirmationAccepted,
+  ConfirmationRejected,
+  ConfirmationRequest,
   Conversation,
   Image,
   InlineCitation,
@@ -74,4 +78,8 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('CodeBlockDark', CodeBlockDark)
   vueApp.component('Checkpoint', Checkpoint)
   vueApp.component('Workflow', Workflow)
+  vueApp.component('Confirmation', Confirmation)
+  vueApp.component('ConfirmationAccepted', ConfirmationAccepted)
+  vueApp.component('ConfirmationRejected', ConfirmationRejected)
+  vueApp.component('ConfirmationRequest', ConfirmationRequest)
 })

apps/www/plugins/ai-elements.ts

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ToolUIPart } from 'ai'
+import type { HTMLAttributes } from 'vue'
+import type { ToolUIPartApproval } from './context'
+import { Alert } from '@repo/shadcn-vue/components/ui/alert'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { provide, toRef } from 'vue'
+import { ConfirmationKey } from './context'
+
+const props = defineProps<{
+  approval?: ToolUIPartApproval
+  state: ToolUIPart['state']
+  class?: HTMLAttributes['class']
+}>()
+
+provide(ConfirmationKey, {
+  approval: toRef(props, 'approval'),
+  state: toRef(props, 'state'),
+})
+</script>
+
+<template>
+  <Alert
+    v-if="approval && state !== 'input-streaming' && state !== 'input-available'"
+    :class="cn('flex flex-col gap-2', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Alert>
+</template>

packages/elements/src/confirmation/Confirmation.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useConfirmationContext } from './context'
+
+const { approval, state } = useConfirmationContext()
+</script>
+
+<template>
+  <template
+    v-if="
+      approval?.approved
+        && (state === 'approval-responded'
+          || state === 'output-denied'
+          || state === 'output-available')
+    "
+  >
+    <slot />
+  </template>
+</template>

packages/elements/src/confirmation/ConfirmationAccepted.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+</script>
+
+<template>
+  <Button class="h-8 px-3 text-sm" type="button" v-bind="$attrs">
+    <slot />
+  </Button>
+</template>

packages/elements/src/confirmation/ConfirmationAction.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { useConfirmationContext } from './context'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { state } = useConfirmationContext()
+</script>
+
+<template>
+  <div
+    v-if="state === 'approval-requested'"
+    :class="
+      cn('flex items-center justify-end gap-2 self-end', props.class)
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

packages/elements/src/confirmation/ConfirmationActions.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useConfirmationContext } from './context'
+
+const { approval, state } = useConfirmationContext()
+</script>
+
+<template>
+  <template
+    v-if="
+      approval?.approved === false
+        && (state === 'approval-responded'
+          || state === 'output-denied'
+          || state === 'output-available')
+    "
+  >
+    <slot />
+  </template>
+</template>

packages/elements/src/confirmation/ConfirmationRejected.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useConfirmationContext } from './context'
+
+const { state } = useConfirmationContext()
+</script>
+
+<template>
+  <template v-if="state === 'approval-requested'">
+    <slot />
+  </template>
+</template>

packages/elements/src/confirmation/ConfirmationRequest.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { AlertDescription } from '@repo/shadcn-vue/components/ui/alert'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <AlertDescription
+    :class="cn('inline', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </AlertDescription>
+</template>

packages/elements/src/confirmation/ConfirmationTitle.vue

@@ -0,0 +1,46 @@
+import type { ToolUIPart } from 'ai'
+import type { InjectionKey, Ref } from 'vue'
+import { inject } from 'vue'
+
+export type ToolUIPartApproval
+  = | {
+    id: string
+    approved?: never
+    reason?: never
+  }
+  | {
+    id: string
+    approved: boolean
+    reason?: string
+  }
+  | {
+    id: string
+    approved: true
+    reason?: string
+  }
+  | {
+    id: string
+    approved: true
+    reason?: string
+  }
+  | {
+    id: string
+    approved: false
+    reason?: string
+  }
+  | undefined
+
+export interface ConfirmationContextValue {
+  approval: Ref<ToolUIPartApproval>
+  state: Ref<ToolUIPart['state']>
+}
+
+export const ConfirmationKey: InjectionKey<ConfirmationContextValue>
+  = Symbol('ConfirmationContext')
+
+export function useConfirmationContext() {
+  const context = inject<ConfirmationContextValue | null>(ConfirmationKey, null)
+  if (!context)
+    throw new Error('Confirmation components must be used within <Confirmation>')
+  return context
+}