feat(kit): message support media types

Author: hexqi

packages/kit/src/types.ts

@@ -3,12 +3,69 @@
  */
 export type MessageRole = 'system' | 'user' | 'assistant'
 
+interface TextInput {
+  type: 'input_text'
+  text: string
+}
+
+interface ImageInput {
+  type: 'image_url'
+  image_url: {
+    /**
+     * 图片base64数据或图片url
+     * 需要注意，传入Base64，图像格式（即image/{format}）需要与支持的图片列表中的Content Type保持一致。
+     * PNG图像：  data:image/png;base64,${base64Image}
+     * JPEG图像： data:image/jpeg;base64,${base64Image}
+     * WEBP图像： data:image/webp;base64,${base64Image}
+     */
+    url: string // 图片base64数据或图片url
+  }
+  [extra: string]: unknown
+}
+
+interface FileInput {
+  type: 'input_file'
+  filename: string
+  file_data: string // 文件base64数据
+  [extra: string]: unknown
+}
+
+interface AudioInput {
+  type: 'input_audio'
+  input_audio: {
+    /**
+     * 音频base64数据或音频url
+     * 例如：data:;base64,${base64Audio}
+     */
+    data: string
+    format: string // 音频格式,如 'mp3'
+  }
+}
+
+interface VideoInput {
+  type: 'input_video'
+  video_url: {
+    /**
+     * 视频base64数据或视频url
+     * 例如：data:;base64,${base64Video}
+     */
+    url: string
+  }
+}
+
+/**
+ * 多模态消息内容
+ */
+type MediaContent = Array<TextInput | ImageInput | AudioInput | VideoInput | FileInput>
+
+export type MessageContent = string | MediaContent
+
 /**
  * 聊天消息接口
  */
 export interface ChatMessage {
   role: MessageRole
-  content: string
+  content: MessageContent
   name?: string
 }
 

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

@@ -4,7 +4,7 @@
  */
 
 import { reactive, Reactive, ref, toRaw, type Ref } from 'vue'
-import type { ChatMessage } from '../../types'
+import type { ChatMessage, MessageContent } from '../../types'
 import type { AIClient } from '../../client'
 
 export enum STATUS {
@@ -53,7 +53,7 @@ export interface UseMessageReturn {
   /** 是否使用流式响应 */
   useStream: Ref<boolean>
   /** 发送消息 */
-  sendMessage: (content?: string, clearInput?: boolean) => Promise<void>
+  sendMessage: (content?: MessageContent, clearInput?: boolean) => Promise<void>
   /** 清空消息 */
   clearMessages: () => void
   /** 添加消息 */
@@ -167,8 +167,9 @@ export function useMessage(options: UseMessageOptions): UseMessageReturn {
   }
 
   // 发送消息
-  const sendMessage = async (content: string = inputMessage.value, clearInput: boolean = true) => {
-    if (!content?.trim() || GeneratingStatus.includes(messageState.status)) {
+  const sendMessage = async (content: MessageContent = inputMessage.value, clearInput: boolean = true) => {
+    const isEmptyContent = (typeof content === 'string' && !content.trim()) || content.length === 0
+    if (isEmptyContent || GeneratingStatus.includes(messageState.status)) {
       return
     }