fix: add shared ExtendedToolState for approval states (#104)

- Create shared types.ts for ExtendedToolState definition
- Fix TypeScript errors in ToolStatusBadge and Confirmation components
- Add type safety for 'approval-requested', 'approval-responded', 'output-denied' states
- Improve accessibility with aria-label and ARIA attributes
- Replace 'any' types with proper SpeechRecognition types

Author: yinjiajun223

packages/elements/src/confirmation/Confirmation.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ToolUIPart } from 'ai'
 import type { HTMLAttributes } from 'vue'
+import type { ExtendedToolState } from '../types'
 import type { ToolUIPartApproval } from './context'
 import { Alert } from '@repo/shadcn-vue/components/ui/alert'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -9,7 +9,7 @@ import { ConfirmationKey } from './context'
 
 const props = defineProps<{
   approval?: ToolUIPartApproval
-  state: ToolUIPart['state']
+  state: ExtendedToolState
   class?: HTMLAttributes['class']
 }>()
 

packages/elements/src/confirmation/context.ts

@@ -1,5 +1,5 @@
-import type { ToolUIPart } from 'ai'
 import type { InjectionKey, Ref } from 'vue'
+import type { ExtendedToolState } from '../types'
 import { inject } from 'vue'
 
 export type ToolUIPartApproval
@@ -32,7 +32,7 @@ export type ToolUIPartApproval
 
 export interface ConfirmationContextValue {
   approval: Ref<ToolUIPartApproval>
-  state: Ref<ToolUIPart['state']>
+  state: Ref<ExtendedToolState>
 }
 
 export const ConfirmationKey: InjectionKey<ConfirmationContextValue>

packages/elements/src/conversation/ConversationScrollButton.vue

@@ -23,6 +23,7 @@ function handleClick() {
   <Button
     v-if="showScrollButton"
     :class="cn('absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full', props.class)"
+    aria-label="Scroll to bottom"
     size="icon"
     type="button"
     variant="outline"

packages/elements/src/index.ts

@@ -20,4 +20,5 @@ export * from './sources'
 export * from './suggestion'
 export * from './task'
 export * from './tool'
+export type { ExtendedToolState } from './types'
 export * from './web-preview'

packages/elements/src/loader/Loader.vue

@@ -16,6 +16,9 @@ const props = withDefaults(defineProps<Props>(), {
 <template>
   <div
     :class="cn('inline-flex animate-spin items-center justify-center', props.class)"
+    aria-label="Loading"
+    aria-live="polite"
+    role="status"
     v-bind="$attrs"
   >
     <LoaderIcon :size="props.size" />

packages/elements/src/prompt-input/PromptInputSpeechButton.vue

@@ -81,7 +81,7 @@ onMounted(() => {
     sr.onstart = () => isListening.value = true
     sr.onend = () => isListening.value = false
 
-    sr.onresult = (event: any) => {
+    sr.onresult = (event: SpeechRecognitionEvent) => {
       let finalTranscript = ''
       for (let i = event.resultIndex; i < event.results.length; i++) {
         const result = event.results[i]
@@ -96,7 +96,7 @@ onMounted(() => {
       }
     }
 
-    sr.onerror = (event: any) => {
+    sr.onerror = (event: SpeechRecognitionErrorEvent) => {
       console.error('Speech recognition error:', event.error)
       isListening.value = false
     }

packages/elements/src/tool/ToolStatusBadge.vue

@@ -1,7 +1,7 @@
 <!-- StatusBadge.vue -->
 <script setup lang="ts">
-import type { ToolUIPart } from 'ai'
 import type { Component } from 'vue'
+import type { ExtendedToolState } from '../types'
 import { Badge } from '@repo/shadcn-vue/components/ui/badge'
 import {
   CheckCircleIcon,
@@ -12,11 +12,11 @@ import {
 import { computed } from 'vue'
 
 const props = defineProps<{
-  state: ToolUIPart['state']
+  state: ExtendedToolState
 }>()
 
 const label = computed(() => {
-  const labels: Record<ToolUIPart['state'], string> = {
+  const labels: Record<ExtendedToolState, string> = {
     'input-streaming': 'Pending',
     'input-available': 'Running',
     'approval-requested': 'Awaiting Approval',
@@ -29,7 +29,7 @@ const label = computed(() => {
 })
 
 const icon = computed<Component>(() => {
-  const icons: Record<ToolUIPart['state'], Component> = {
+  const icons: Record<ExtendedToolState, Component> = {
     'input-streaming': CircleIcon,
     'input-available': ClockIcon,
     'approval-requested': ClockIcon,

packages/elements/src/tool/index.ts

@@ -1,3 +1,4 @@
+export type { ExtendedToolState } from '../types'
 export { default as Tool } from './Tool.vue'
 export { default as ToolContent } from './ToolContent.vue'
 export { default as ToolHeader } from './ToolHeader.vue'

packages/elements/src/types.ts

@@ -0,0 +1,15 @@
+import type { ToolUIPart } from 'ai'
+
+/**
+ * Extended tool state type that includes approval-related states
+ * beyond what the base AI SDK provides.
+ *
+ * This type is used across multiple components including:
+ * - Tool components (ToolStatusBadge)
+ * - Confirmation components
+ */
+export type ExtendedToolState
+  = | ToolUIPart['state']
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-denied'

packages/examples/src/confirmation-accepted.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ExtendedToolState } from '@repo/elements/tool'
 import {
   Confirmation,
   ConfirmationAccepted,
@@ -15,7 +16,7 @@ const approval = {
   approved: true,
 }
 
-const state = 'approval-responded'
+const state: ExtendedToolState = 'approval-responded'
 </script>
 
 <template>