feat: add stream

packages/plugins/robot/package.json

@@ -26,9 +26,9 @@
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
     "@opentiny/tiny-engine-meta-register": "workspace:*",
-    "@opentiny/tiny-robot": "^0.3.0-alpha.0",
-    "@opentiny/tiny-robot-kit": "^0.2.0-alpha.3",
-    "@opentiny/tiny-robot-svgs": "^0.2.0-alpha.3",
+    "@opentiny/tiny-robot": "0.3.0-alpha.0",
+    "@opentiny/tiny-robot-kit": "0.3.0-alpha.0",
+    "@opentiny/tiny-robot-svgs": "0.3.0-alpha.0",
     "@opentiny/tiny-schema-renderer": "1.0.0-beta.5",
     "fast-json-patch": "~3.1.1"
   },

packages/plugins/robot/src/Main.vue

@@ -42,8 +42,8 @@
           <tr-bubble-list v-else :items="activeMessages" :roles="roles"></tr-bubble-list>
           <template #footer>
             <tr-sender
+              class="footer-sender"
               ref="senderRef"
-              mode="multiple"
               v-model="inputContent"
               placeholder="请输入问题或“/”唤起指令，支持粘贴文档"
               :clearable="true"
@@ -82,17 +82,9 @@
 
 <script lang="ts">
 import { ref, onMounted, watchEffect, type CSSProperties, h, resolveComponent } from 'vue'
-import { Notify, Loading, TinyPopover, TinyDialogBox, TinyButton } from '@opentiny/vue'
+import { Notify, Loading, TinyPopover, TinyDialogBox } from '@opentiny/vue'
 import { useCanvas, usePage, useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
-import {
-  TrContainer,
-  TrWelcome,
-  TrPrompts,
-  TrBubbleList,
-  TrSender,
-  TrFeedback,
-  TrAttachments
-} from '@opentiny/tiny-robot'
+import { TrContainer, TrWelcome, TrBubbleList, TrSender, TrFeedback, TrAttachments } from '@opentiny/tiny-robot'
 import { IconNewSession } from '@opentiny/tiny-robot-svgs'
 import SchemaRenderer from '@opentiny/tiny-schema-renderer'
 import RobotSettingPopover from './RobotSettingPopover.vue'
@@ -105,19 +97,17 @@ import {
 } from './js/robotSetting'
 import { PROMPTS } from './js/prompts'
 import * as jsonpatch from 'fast-json-patch'
+import { chatStream } from './js/utils'
 
 export default {
   components: {
-    TinyPopover,
-    TinyDialogBox,
-    TinyButton,
+    TinyPopover: TinyPopover as unknown,
+    TinyDialogBox: TinyDialogBox as unknown,
     RobotSettingPopover,
     TrContainer,
     TrWelcome,
-    TrPrompts,
     TrBubbleList,
     TrSender,
-    TrFeedback,
     TrAttachments,
     IconNewSession,
     SchemaRenderer
@@ -215,7 +205,7 @@ export default {
       showPreview.value = false
     }
 
-    const fixedJson = (op) => {
+    const _fixedJson = (op) => {
       // 修正 path：替换 ; 和 : 为 /
       if (op.path) {
         op.path = op.path.replace(/[;:]/g, '/').replace(/\/+/g, '/')
@@ -235,55 +225,109 @@ export default {
             op.value = { [key.trim()]: val.trim() }
           }
         } catch (e) {
+          // eslint-disable-next-line no-console
           console.warn('Failed to parse style:', op.value)
         }
       }
 
       return op
     }
 
-    const sendRequest = () => {
-      getMetaApi(META_SERVICE.Http)
-        .post('/app-center/api/ai/chat', getSendSeesionProcess(), { timeout: 600000 })
-        .then((res: any) => {
-          const { choices } = res
-          const chatMessage = choices[0]?.message
-          try {
-            const regex = /```json([\s\S]*?)```/
-            const match = chatMessage?.content.match(regex)
-
-            if (match && match[1] && JSON.parse(match[1]) && isValidFastJsonPatch(JSON.parse(match[1]))) {
-              const newValue = JSON.parse(match[1])
-              // 使用 applyPatch 修改 Schema
-              const result = newValue.reduce(jsonpatch.applyReducer, pageState.pageSchema)
-
-              sessionProcess.messages.push(
-                getAiRespMessage(JSON.stringify(pageState.pageSchema, null, 2), chatMessage.role)
-              )
-              sessionProcess.displayMessages.push(getAiDisplayMessage(MESSAGE_TIP, chatMessage.role, result, res.id))
-              messages.value[messages.value.length - 1].content = MESSAGE_TIP
-              messages.value[messages.value.length - 1].schema = result
-              messages.value[messages.value.length - 1].id = res.id
-            } else {
-              sessionProcess.messages.push(getAiRespMessage(chatMessage?.content))
-              sessionProcess.displayMessages.push(getAiRespMessage(chatMessage?.content))
-              messages.value[messages.value.length - 1].content = chatMessage?.content
+    // 处理响应
+    const handleResponse = (res: { id: string; chatMessage: any }) => {
+      try {
+        const regex = /```json([\s\S]*?)```/
+        const match = chatMessage?.content.match(regex)
+
+        if (match && match[1] && JSON.parse(match[1]) && isValidFastJsonPatch(JSON.parse(match[1]))) {
+          const newValue = JSON.parse(match[1])
+          // 使用 applyPatch 修改 Schema
+          const result = newValue.reduce(jsonpatch.applyReducer, pageState.pageSchema)
+
+          sessionProcess.messages.push(
+            getAiRespMessage(JSON.stringify(pageState.pageSchema, null, 2), chatMessage.role)
+          )
+          sessionProcess.displayMessages.push(getAiDisplayMessage(MESSAGE_TIP, chatMessage.role, result, res.id))
+          messages.value[messages.value.length - 1].content = MESSAGE_TIP
+          messages.value[messages.value.length - 1].schema = result
+          messages.value[messages.value.length - 1].id = res.id
+        } else {
+          sessionProcess.messages.push(getAiRespMessage(chatMessage?.content))
+          sessionProcess.displayMessages.push(getAiRespMessage(chatMessage?.content))
+          messages.value[messages.value.length - 1].content = chatMessage?.content
+        }
+        setContextSession()
+        inProcesing.value = false
+        connectedFailed.value = false
+      } catch (e) {
+        messages.value[messages.value.length - 1].content = '处理响应时出错'
+        inProcesing.value = false
+        connectedFailed.value = false
+      }
+    }
+
+    // 发送流式请求
+    const _sendStreamRequest = async () => {
+      const requestData = getSendSeesionProcess()
+      if (requestData.foundationModel) {
+        requestData.foundationModel.stream = true
+      }
+
+      let streamContent = ''
+      const chatId = Date.now().toString()
+      await chatStream(
+        {
+          requestUrl: '/app-center/api/ai/chat',
+          requestData
+        },
+        {
+          onData: (data) => {
+            const choice = data.choices?.[0]
+            if (choice && choice.delta.content) {
+              if (messages.value.length === 0 || messages.value[messages.value.length - 1].role !== 'assistant') {
+                messages.value.push(getAiDisplayMessage('', 'assistant', {}, chatId))
+              }
+              if (streamContent !== messages.value[messages.value.length - 1].content) {
+                messages.value[messages.value.length - 1].content = ''
+              }
+              streamContent += choice.delta.content
+              messages.value[messages.value.length - 1].content += choice.delta.content
             }
-            setContextSession()
-            inProcesing.value = false
-            connectedFailed.value = false
-          } catch (e) {
-            messages.value[messages.value.length - 1].content = '处理响应时出错'
+          },
+          onError: (error) => {
+            messages.value[messages.value.length - 1].content = '连接失败'
+            localStorage.removeItem('aiChat')
             inProcesing.value = false
             connectedFailed.value = false
+            // eslint-disable-next-line no-console
+            console.error('Stream error:', error)
+          },
+          onDone: () => {
+            handleResponse({
+              id: chatId,
+              chatMessage: {
+                role: 'assistant',
+                content: streamContent || '没有返回内容',
+                name: 'AI'
+              }
+            })
           }
+        }
+      )
+    }
+
+    const sendRequest = async () => {
+      try {
+        const res: any = await getMetaApi(META_SERVICE.Http).post('/app-center/api/ai/chat', getSendSeesionProcess(), {
+          timeout: 600000
         })
-        .catch(() => {
-          messages.value[messages.value.length - 1].content = '连接失败'
-          localStorage.removeItem('aiChat')
-          inProcesing.value = false
-          connectedFailed.value = false
-        })
+        handleResponse({ id: res.id, chatMessage: res.choices[0].message })
+      } catch (error) {
+        messages.value[messages.value.length - 1].content = '连接失败'
+        localStorage.removeItem('aiChat')
+        inProcesing.value = false
+        connectedFailed.value = false
+      }
     }
 
     const scrollContent = async () => {
@@ -387,7 +431,7 @@ export default {
         await sleep(1000)
         messages.value.push(getAiDisplayMessage('好的，正在执行相关操作，请稍等片刻...'))
         await scrollContent()
-        sendRequest()
+        await sendRequest()
       }
     }
 
@@ -505,6 +549,10 @@ export default {
         placement: 'start',
         avatar: aiAvatar,
         maxWidth: '80%',
+        type: 'markdown',
+        mdConfig: {
+          breaks: true
+        },
         slots: {
           footer: ({ bubbleProps }) => {
             return h(TrFeedback, {
@@ -528,7 +576,15 @@ export default {
           }
         }
       },
-      user: { placement: 'end', avatar: userAvatar, maxWidth: '80%' }
+      user: {
+        placement: 'end',
+        avatar: userAvatar,
+        maxWidth: '80%',
+        type: 'markdown',
+        mdConfig: {
+          breaks: true
+        }
+      }
     })
 
     // 处理文件选择事件
@@ -588,6 +644,7 @@ export default {
             }
           })
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.error('上传失败', error)
       }
     }
@@ -730,6 +787,10 @@ export default {
       font-size: 20px;
     }
   }
+
+  .footer-sender {
+    padding: 10px 15px;
+  }
 }
 
 .tiny-sender__header-slot .tr-attachments .tr-attachments__file-list .tr-attachments__add-button {

packages/plugins/robot/src/js/utils.ts

@@ -0,0 +1,28 @@
+import { handleSSEStream, type StreamHandler } from '@opentiny/tiny-robot-kit'
+
+export const chatStream = async (requestOpts: any, handler: StreamHandler, headers = {}) => {
+  try {
+    const { requestData, requestUrl } = requestOpts
+
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'text/event-stream',
+        ...headers
+      },
+      body: JSON.stringify(requestData)
+    }
+    const response = await fetch(requestUrl, requestOptions)
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      throw new Error(`HTTP error! status: ${response.status}, details: ${errorText}`)
+    }
+
+    await handleSSEStream(response, handler)
+  } catch (error: unknown) {
+    const logger = console
+    logger.error('Error in chatStream:', error)
+  }
+}