feat(tool): persistent message

Author: xuanlid

packages/components/src/bubble/composables/useToolCall.ts

@@ -3,7 +3,7 @@ import { BubbleContentRendererProps, ChatMessageContent } from '../index.type'
 import { getJsonrepair } from '../utils'
 import { useBubbleStore } from './useBubbleStore'
 
-const toolCallStatus = ['running', 'success', 'failed', 'cancelled'] as const
+const toolCallStatus = ['running', 'success', 'failed', 'cancelled', 'awaiting-approval', 'denied'] as const
 export type ToolCallStatus = (typeof toolCallStatus)[number]
 
 export const useToolCall = (

packages/components/src/bubble/renderers/Tool.vue

@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { IconArrowDown, IconCancelled, IconError, IconLoading, IconPlugin } from '@opentiny/tiny-robot-svgs'
+import {
+  IconArrowDown,
+  IconCancelled,
+  IconClose,
+  IconError,
+  IconLoading,
+  IconPlugin,
+  IconWarning,
+} from '@opentiny/tiny-robot-svgs'
 import { type Component, computed, nextTick, ref, useCssModule, watch, watchEffect } from 'vue'
 import { ToolCallStatus, useBubbleEventFn, useToolCall } from '../composables'
 import { BubbleContentRendererProps, ChatMessageContent } from '../index.type'
@@ -22,8 +30,14 @@ const textAndIconMap = new Map<string, { text: string; icon: Component }>([
   ['cancelled', { text: '已取消', icon: IconCancelled }],
 ])
 
+const approvalTextAndIconMap = new Map<string, { text: string; icon: Component }>([
+  ['awaiting-approval', { text: '等待确认', icon: IconWarning }],
+  ['denied', { text: '已拒绝', icon: IconClose }],
+])
+
 const textAndIcon = computed(() => {
-  return textAndIconMap.get(state.value?.status || '') || { text: '', icon: IconPlugin }
+  const status = state.value?.status || ''
+  return textAndIconMap.get(status) || approvalTextAndIconMap.get(status) || { text: '', icon: IconPlugin }
 })
 
 const prettyJSON = (json: unknown, space = 2) => {
@@ -193,6 +207,7 @@ const handleClick = () => {
     flex-shrink: 0;
     display: flex;
     align-items: center;
+    gap: 8px;
   }
 
   .header-icon {
@@ -209,9 +224,14 @@ const handleClick = () => {
     }
 
     &.icon-failed,
-    &.icon-cancelled {
+    &.icon-cancelled,
+    &.icon-denied {
       color: var(--tr-color-error);
     }
+
+    &.icon-awaiting-approval {
+      color: var(--tr-color-warning, #e6a23c);
+    }
   }
 
   .expand-icon {

packages/kit/src/message/adapters/native.ts

@@ -27,7 +27,7 @@ export const createNativeMessageAdapter = (): MessageStateAdapter => {
       requestState: state.requestState,
       processingState: state.processingState,
       messages: [...state.messages],
-      isProcessing: state.requestState === 'processing',
+      isProcessing: state.requestState === 'processing' || state.requestState === 'paused',
       isPaused: state.requestState === 'paused',
     } satisfies PublicMessageState
   }

packages/kit/src/message/adapters/vue.ts

@@ -46,7 +46,7 @@ export const createVueMessageAdapter = (): VueMessageStateAdapter => {
   const requestState = ref<RequestState>('idle')
   const processingState = ref<RequestProcessingState | undefined>(undefined)
   const messages = ref<ChatMessage[]>([])
-  const isProcessing = computed(() => requestState.value === 'processing')
+  const isProcessing = computed(() => requestState.value === 'processing' || requestState.value === 'paused')
   const isPaused = computed(() => requestState.value === 'paused')
 
   const initialize = (initialState: InternalMessageState) => {