From 603c2af3509db9893f8592fa38b56016d3b052f8 Mon Sep 17 00:00:00 2001
From: yinjiajun <316390862@qq.com>
Date: Thu, 11 Dec 2025 10:44:16 +0800
Subject: [PATCH] fix: add ExtendedToolState type for approval-related states

- 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
---
 .../elements/src/confirmation/Confirmation.vue    |  4 ++--
 packages/elements/src/confirmation/context.ts     |  4 ++--
 .../src/conversation/ConversationScrollButton.vue |  1 +
 packages/elements/src/index.ts                    |  1 +
 packages/elements/src/loader/Loader.vue           |  3 +++
 .../src/prompt-input/PromptInputSpeechButton.vue  |  4 ++--
 packages/elements/src/tool/ToolStatusBadge.vue    |  8 ++++----
 packages/elements/src/tool/index.ts               |  1 +
 packages/elements/src/types.ts                    | 15 +++++++++++++++
 packages/examples/src/confirmation-accepted.vue   |  3 ++-
 packages/examples/src/confirmation-rejected.vue   |  3 ++-
 packages/examples/src/confirmation.vue            |  3 ++-
 12 files changed, 37 insertions(+), 13 deletions(-)
 create mode 100644 packages/elements/src/types.ts

diff --git a/packages/elements/src/confirmation/Confirmation.vue b/packages/elements/src/confirmation/Confirmation.vue
index 812ceeb..580c004 100644
--- a/packages/elements/src/confirmation/Confirmation.vue
+++ b/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']
 }>()
 
diff --git a/packages/elements/src/confirmation/context.ts b/packages/elements/src/confirmation/context.ts
index 0bb55d5..38aacfc 100644
--- a/packages/elements/src/confirmation/context.ts
+++ b/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>
diff --git a/packages/elements/src/conversation/ConversationScrollButton.vue b/packages/elements/src/conversation/ConversationScrollButton.vue
index f2dff93..d561a33 100644
--- a/packages/elements/src/conversation/ConversationScrollButton.vue
+++ b/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"
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index 1c6b8b7..e9fe203 100644
--- a/packages/elements/src/index.ts
+++ b/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'
diff --git a/packages/elements/src/loader/Loader.vue b/packages/elements/src/loader/Loader.vue
index 157aafa..33f4bbd 100644
--- a/packages/elements/src/loader/Loader.vue
+++ b/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" />
diff --git a/packages/elements/src/prompt-input/PromptInputSpeechButton.vue b/packages/elements/src/prompt-input/PromptInputSpeechButton.vue
index bbd4140..a58e0f1 100644
--- a/packages/elements/src/prompt-input/PromptInputSpeechButton.vue
+++ b/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
     }
diff --git a/packages/elements/src/tool/ToolStatusBadge.vue b/packages/elements/src/tool/ToolStatusBadge.vue
index 023dc29..20fb808 100644
--- a/packages/elements/src/tool/ToolStatusBadge.vue
+++ b/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,
diff --git a/packages/elements/src/tool/index.ts b/packages/elements/src/tool/index.ts
index a3894f2..1e56e93 100644
--- a/packages/elements/src/tool/index.ts
+++ b/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'
diff --git a/packages/elements/src/types.ts b/packages/elements/src/types.ts
new file mode 100644
index 0000000..3128602
--- /dev/null
+++ b/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'
diff --git a/packages/examples/src/confirmation-accepted.vue b/packages/examples/src/confirmation-accepted.vue
index af2b137..e97c803 100644
--- a/packages/examples/src/confirmation-accepted.vue
+++ b/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>
diff --git a/packages/examples/src/confirmation-rejected.vue b/packages/examples/src/confirmation-rejected.vue
index 29c98ff..0a400c0 100644
--- a/packages/examples/src/confirmation-rejected.vue
+++ b/packages/examples/src/confirmation-rejected.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ExtendedToolState } from '@repo/elements/tool'
 import {
   Confirmation,
   ConfirmationAccepted,
@@ -16,7 +17,7 @@ const approval = ref({
   approved: false,
 })
 
-const state = ref('output-denied')
+const state = ref<ExtendedToolState>('output-denied')
 </script>
 
 <template>
diff --git a/packages/examples/src/confirmation.vue b/packages/examples/src/confirmation.vue
index 647d8ff..26dc1bf 100644
--- a/packages/examples/src/confirmation.vue
+++ b/packages/examples/src/confirmation.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ExtendedToolState } from '@repo/elements/tool'
 import {
   Confirmation,
   ConfirmationAccepted,
@@ -14,7 +15,7 @@ import { nanoid } from 'nanoid'
 import { ref } from 'vue'
 
 const approval = ref({ id: nanoid() })
-const state = ref<'approval-requested' | 'approval-responded'>('approval-requested')
+const state = ref<ExtendedToolState>('approval-requested')
 
 function handleReject() {
   // In production, call respondToConfirmationRequest with approved: false