fix: codereview

Author: hexqi

packages/plugins/robot/src/Main.vue

@@ -2,8 +2,8 @@
   <div class="robot">
     <toolbar-base
       content="AI对话框"
-      :icon="options.icon?.default || options?.icon"
-      :options="options"
+      :icon="props.options.icon?.default || props.options?.icon"
+      :options="props.options"
       @click-api="openAIRobot"
     >
     </toolbar-base>
@@ -79,8 +79,7 @@
 <script setup lang="ts">
 import { computed, h, onMounted, ref, watch } from 'vue'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
-import { TinyNotify } from '@opentiny/vue'
-import { META_APP, useLayout } from '@opentiny/tiny-engine-meta-register'
+import { META_APP, useLayout, useNotify } from '@opentiny/tiny-engine-meta-register'
 import { type PopupConfig, type PromptProps, TrIconButton } from '@opentiny/tiny-robot'
 import { IconThink, IconNewSession } from '@opentiny/tiny-robot-svgs'
 import RobotChat from './components/chat/RobotChat.vue'
@@ -94,7 +93,7 @@ import useModelConfig from './composables/core/useConfig'
 import { ChatMode } from './types/mode.types'
 import apiService from './services/api'
 
-const { options } = defineProps({
+const props = defineProps({
   options: {
     type: Object,
     default: () => ({})
@@ -172,7 +171,9 @@ const handleDeleteConversation = (action: any, item: any) => {
 
 const handleAbortRequest = () => {
   abortRequest()
-  messages.value.at(-1)!.aborted = true
+  if (messages.value.at(-1)) {
+    messages.value.at(-1)!.aborted = true
+  }
 }
 
 const isVisualModel = computed(() => {
@@ -193,20 +194,16 @@ const isToolsModel = computed(() => {
 
 const handleChatModeChange = (type: string) => {
   changeChatMode(type)
-  // singleAttachmentItems.value = []
-  // imageUrl.value = ''
 }
 
 const checkApiKey = () => {
   const provider = getSelectedModelInfo().service
 
   if (!provider?.baseUrl || (!provider?.apiKey && !provider?.allowEmptyApiKey)) {
-    TinyNotify({
+    useNotify({
       type: 'warning',
       title: '未设置API Key，请检查设置',
-      message: '请先设置大模型API Key后重试。',
-      position: 'top-right',
-      duration: 5000
+      message: '请先设置大模型API Key后重试。'
     })
     setTimeout(() => {
       showSetting.value = true
@@ -249,18 +246,21 @@ const openAIRobot = () => {
 // 当前Robot的bubbleRenderers无法做到响应式更新，因此Agent模式的type要与Chat模式不同
 const bubbleRenderers = { 'agent-content': AgentRenderer, 'agent-loading': AgentRenderer }
 
-const handleFileSelected = (formData: FormData, updateAttachment: (resourceUrl: string) => void) => {
+const handleFileSelected = async (formData: FormData, updateAttachment: (resourceUrl: string) => void) => {
   try {
-    apiService.uploadFile(formData).then((res: any) => {
-      updateAttachment(res?.resourceUrl)
-      if (!inputMessage.value) {
-        inputMessage.value = '生成图片中UI效果'
-      }
-    })
+    const { resourceUrl } = await apiService.uploadFile(formData)
+    updateAttachment(resourceUrl)
+    if (!inputMessage.value) {
+      inputMessage.value = '生成图片中UI效果'
+    }
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('上传失败', error)
     updateAttachment('')
+    useNotify({
+      message: '文件上传失败，请重试',
+      type: 'error'
+    })
   }
 }
 

packages/plugins/robot/src/components/chat/FooterButton.vue

@@ -1,6 +1,6 @@
 <template>
-  <tiny-tooltip :content="tooltipContent" placement="top" effect="light" :open-delay="500">
-    <div :class="['footer-button-wrapper', active ? 'active' : '']" @click="handleVisibleToggle">
+  <tiny-tooltip :content="props.tooltipContent" placement="top" effect="light" :open-delay="500">
+    <div :class="['footer-button-wrapper', props.active ? 'active' : '']" @click="handleVisibleToggle">
       <div class="button">
         <slot name="icon"></slot>
         <span class="text">
@@ -14,7 +14,7 @@
 <script lang="ts" setup>
 import { TinyTooltip } from '@opentiny/vue'
 
-const { active, tooltipContent } = defineProps({
+const props = defineProps({
   active: {
     type: Boolean,
     default: false
@@ -28,7 +28,7 @@ const { active, tooltipContent } = defineProps({
 const emit = defineEmits(['update:active'])
 
 const handleVisibleToggle = () => {
-  emit('update:active', !active)
+  emit('update:active', !props.active)
 }
 </script>
 
@@ -44,7 +44,7 @@ const handleVisibleToggle = () => {
   border: 1px solid rgb(194, 194, 194);
   cursor: pointer;
   box-sizing: border-box;
-  background-color: var(--te-common-bg-container);
+  background-color: var(--te-base-gray-10);
 
   &:hover {
     background-color: rgba(0, 0, 0, 0.08);

packages/plugins/robot/src/components/chat/RobotChat.vue

@@ -15,7 +15,7 @@
         <tr-welcome title="AI助手" description="您好，我是您的开发小助手" :icon="welcomeIcon" class="robot-welcome">
         </tr-welcome>
         <tr-prompts
-          :items="promptItems"
+          :items="props.promptItems"
           :wrap="true"
           item-class="prompt-item"
           class="tiny-prompts"
@@ -33,26 +33,25 @@
           ref="senderRef"
           mode="multiple"
           v-model="inputMessage"
-          :placeholder="GeneratingStatus.includes(status) ? '正在思考中...' : '请输入您的问题'"
+          :placeholder="GeneratingStatus.includes(props.status) ? '正在思考中...' : '请输入您的问题'"
           :clearable="true"
-          :loading="GeneratingStatus.includes(status)"
+          :loading="GeneratingStatus.includes(props.status)"
           :showWordLimit="true"
           :maxLength="4000"
           @submit="handleSendMessage"
           @cancel="handleAbortRequest"
-          :allowFiles="singleAttachmentItems.length < 1 && allowFiles"
+          :allowFiles="selectedAttachments.length < 1 && props.allowFiles"
           uploadTooltip="支持上传1张图片"
           @files-selected="handleSingleFilesSelected"
         >
-          <template #header v-if="singleAttachmentItems.length > 0">
+          <template #header v-if="selectedAttachments.length > 0">
             <div>
               <tr-attachments
                 ref="singleAttachmentRef"
-                v-model:items="singleAttachmentItems"
+                v-model:items="selectedAttachments"
                 variant="card"
                 wrap
-                @file-remove="handleSingleFileRemove"
-                @file-retry="handleSingleFileRetry"
+                @retry="handleSingleFileRetry"
               >
               </tr-attachments>
             </div>
@@ -67,8 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, h, resolveComponent, type Component, type CSSProperties, type PropType } from 'vue'
-import { Notify } from '@opentiny/vue'
+import { ref, computed, h, resolveComponent, type Component, type CSSProperties, type PropType, watch } from 'vue'
 import {
   TrBubbleList,
   TrBubbleProvider,
@@ -78,12 +76,14 @@ import {
   TrWelcome,
   TrAttachments,
   type BubbleRoleConfig,
-  type PromptProps
+  type PromptProps,
+  type RawFileAttachment
 } from '@opentiny/tiny-robot'
 import { type ChatMessage, GeneratingStatus } from '@opentiny/tiny-robot-kit'
 import { LoadingRenderer, MarkdownRenderer, ImgRenderer } from '../renderers'
+import { useNotify } from '@opentiny/tiny-engine-meta-register'
 
-const { promptItems, status, promptClickHandler, allowFiles, bubbleRenderers, beforeSubmit } = defineProps({
+const props = defineProps({
   promptItems: {
     type: Array as PropType<PromptProps[]>,
     default: () => []
@@ -108,71 +108,69 @@ const { promptItems, status, promptClickHandler, allowFiles, bubbleRenderers, be
 
 const emit = defineEmits(['fileSelected', 'sendMessage', 'abort'])
 
-const singleAttachmentItems = ref([])
+const selectedAttachments = ref([])
 
 const robotVisible = defineModel<boolean>('show', { required: true })
 const fullscreen = defineModel<boolean>('fullscreen')
 const inputMessage = defineModel<string>('input', { required: true })
 const messages = defineModel<ChatMessage[]>('messages', { required: true })
 
-const imageUrl = ref('')
+watch(
+  () => props.allowFiles,
+  (value) => {
+    if (!value) {
+      selectedAttachments.value = []
+    }
+  }
+)
 
 // 处理文件选择事件
-const handleSingleFilesSelected = (files: FileList | null, retry = false) => {
+const handleSingleFilesSelected = (files: File[] | null, retry = false) => {
+  if (!files?.length) return
   if (retry) {
-    singleAttachmentItems.value[0].status = 'uploading'
-    singleAttachmentItems.value[0].isUploading = true
-    singleAttachmentItems.value[0].messageType = 'uploading'
+    Object.assign(selectedAttachments.value[0], {
+      status: 'uploading'
+    })
   } else {
-    if (!files.length) return
-
-    if (files && files.length > 1) {
-      Notify({
+    if (files.length > 1) {
+      useNotify({
         type: 'error',
-        message: '当前仅支持上传一张图片',
-        position: 'top-right',
-        duration: 5000
+        message: '当前仅支持上传一张图片'
       })
       return
     }
 
-    if (files && files.length > 0) {
-      // 将选中的文件转换为 Attachment 格式并添加到附件列表
-      const newAttachments = Array.from(files).map((file) => ({
-        size: file.size,
-        rawFile: file
-      }))
-      singleAttachmentItems.value.push(...newAttachments)
-    }
+    // 将选中的文件转换为 Attachment 格式并添加到附件列表
+    const newAttachments = Array.from(files).map((file) => ({
+      size: file.size,
+      rawFile: file
+    }))
+    selectedAttachments.value.push(...newAttachments)
   }
 
   // 开始上传
   const formData = new FormData()
-  const fileData = retry ? files : files[0]
+  const fileData = files[0]
   formData.append('file', fileData)
 
   const updateAttachment = (resourceUrl: string) => {
     if (resourceUrl) {
-      singleAttachmentItems.value[0].status = 'done'
-      singleAttachmentItems.value[0].isUploading = false
-      singleAttachmentItems.value[0].messageType = 'success'
-      singleAttachmentItems.value[0].url = resourceUrl
+      Object.assign(selectedAttachments.value[0], {
+        status: 'success',
+        url: resourceUrl
+      })
     } else {
-      singleAttachmentItems.value[0].status = 'error'
-      singleAttachmentItems.value[0].isUploading = false
-      singleAttachmentItems.value[0].messageType = 'error'
+      Object.assign(selectedAttachments.value[0], {
+        status: 'error'
+      })
     }
   }
 
   emit('fileSelected', formData, updateAttachment)
 }
 
-const handleSingleFileRemove = () => {
-  imageUrl.value = ''
-}
-
-const handleSingleFileRetry = (file: any) => {
-  handleSingleFilesSelected(file.file, true)
+const handleSingleFileRetry = (file: RawFileAttachment) => {
+  handleSingleFilesSelected([file.rawFile], true)
 }
 
 const getSvgIcon = (name: string, style?: CSSProperties) => {
@@ -185,7 +183,7 @@ const contentRenderers = computed(() => ({
   markdown: MarkdownRenderer,
   loading: LoadingRenderer,
   img: ImgRenderer,
-  ...bubbleRenderers
+  ...props.bubbleRenderers
 }))
 
 const roles: Record<string, BubbleRoleConfig> = {
@@ -214,7 +212,7 @@ const handleSendMessage = async (content: string) => {
     return
   }
 
-  let result = beforeSubmit?.(content)
+  let result = props.beforeSubmit?.(content)
   if (result && typeof result.then === 'function') {
     result = await result
   }
@@ -226,7 +224,7 @@ const handleSendMessage = async (content: string) => {
     role: 'user',
     content: messageContent
   }
-  const files = singleAttachmentItems.value.filter((item) => item.status === 'done')
+  const files = selectedAttachments.value.filter((item) => item.status === 'done')
   if (files.length > 0) {
     const fileMessages: ChatMessage[] = files.map((file) => ({
       role: 'user',
@@ -259,7 +257,7 @@ const handleSendMessage = async (content: string) => {
   }
   messages.value.push(userMessage)
   inputMessage.value = ''
-  singleAttachmentItems.value = []
+  selectedAttachments.value = []
   emit('sendMessage')
 }
 
@@ -268,8 +266,8 @@ const handleAbortRequest = () => {
 }
 
 const handlePromptItemClick = (ev: unknown, item: { description?: string }) => {
-  if (promptClickHandler && typeof promptClickHandler === 'function') {
-    promptClickHandler(item)
+  if (props.promptClickHandler && typeof props.promptClickHandler === 'function') {
+    props.promptClickHandler(item)
   } else {
     handleSendMessage(item.description)
   }