@ray-js/t-agent-ui-ray 0.0.8-beta-1 → 0.0.8-beta-3

package/README-zh_CN.md

@@ -1,5 +1,3 @@
-[English](./README.md) | 简体中文
-
 # @ray-js/t-agent-ui-ray
 
 > AI 智能体 SDK

package/README.md

@@ -1,5 +1,3 @@
-English | [简体中文](./README-zh_CN.md)
-
 # @ray-js/t-agent-ui-ray
 
 > AI Agent SDK  

package/dist/ChatContainer/index.js

@@ -5,25 +5,20 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import './index.less';
 import React, { useEffect, useMemo, useState } from 'react';
 import { View } from '@ray-js/components';
-import { getWebSocketStatusSync, SocketStatus } from '@ray-js/t-agent-plugin-assistant';
+import { SocketStatus } from '@ray-js/t-agent-plugin-assistant';
+import cx from 'clsx';
 import { ChatAgentContext, MessageContext, RenderContext } from '../contexts';
 import { defaultRenderOptions } from '../renderOption';
 import logger from '../logger';
 export default function ChatContainer(props) {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
   const {
     createAgent,
     renderOptions = defaultRenderOptions,
     children,
-    className = ''
+    className
   } = props;
   const [messages, setMessages] = useState([]);
-  const [socketStatus, setSocketStatus] = useState(() => {
-    try {
-      return getWebSocketStatusSync().status;
-    } catch (e) {
-      return SocketStatus.WAITING;
-    }
-  });
   const [agent] = useState(() => {
     const agent = createAgent();
     if (!agent.plugins.ui) {
@@ -40,7 +35,9 @@ export default function ChatContainer(props) {
       emitEvent
     } = agent.plugins.ui;
     const offSocketStatusChange = agent.plugins.assistant.onSocketStatusChange(status => {
-      setSocketStatus(status);
+      emitEvent('networkChange', {
+        online: status === SocketStatus.SUCCESS
+      });
     });
     const offMessageListInit = onEvent('messageListInit', _ref => {
       let {
@@ -71,7 +68,8 @@ export default function ChatContainer(props) {
               if (((_prev = prev[prev.length - 1]) === null || _prev === void 0 ? void 0 : _prev.id) === message.id) {
                 // 是最后一条消息，滚动到最底部
                 emitEvent('scrollToBottom', {
-                  animation: false
+                  animation: false,
+                  follow: true
                 });
               }
             }
@@ -98,9 +96,9 @@ export default function ChatContainer(props) {
   const messageValue = useMemo(() => {
     return {
       messages,
-      socketStatus
+      keyboardHeight
     };
-  }, [messages, socketStatus]);
+  }, [messages, keyboardHeight]);
   useEffect(() => {
     logger.debug('ChatProvider agent.start');
     agent.start().then(() => {
@@ -112,8 +110,33 @@ export default function ChatContainer(props) {
       agent.dispose();
     };
   }, []);
+  useEffect(() => {
+    const show = _ref3 => {
+      let {
+        height
+      } = _ref3;
+      setKeyboardHeight(height);
+    };
+    const hide = () => {
+      setKeyboardHeight(0);
+    };
+    ty.onKeyboardWillShow(show);
+    ty.onKeyboardWillHide(hide);
+    ty.onKeyboardHeightChange(show);
+    return () => {
+      ty.offKeyboardWillShow(show);
+      ty.offKeyboardWillHide(hide);
+      ty.offKeyboardHeightChange(show);
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-chat-container ".concat(className || '')
+    style: {
+      // @ts-ignore
+      '--t-agent-chat-container-keyboard-height': "".concat(keyboardHeight, "px")
+    },
+    className: cx('t-agent-chat-container', className, {
+      't-agent-chat-container-keyboard-show': keyboardHeight > 0
+    })
   }, /*#__PURE__*/React.createElement(ChatAgentContext.Provider, {
     value: agent
   }, /*#__PURE__*/React.createElement(RenderContext.Provider, {

package/dist/MessageInput/AsrInput.d.ts

@@ -5,6 +5,7 @@ interface Props {
     setText: (text: string) => void;
     onBack: () => void;
     sendDisabled: boolean;
+    responding: boolean;
     onSend: () => Promise<any>;
     onError: (error: Error) => void;
     onMoreClick: () => void;

package/dist/MessageInput/AsrInput.js

@@ -5,6 +5,7 @@ import cx from 'clsx';
 import { useAsrInput } from '../hooks';
 export default function AsrInput(props) {
   const {
+    responding,
     sendDisabled,
     onMoreClick,
     moreOpen,
@@ -28,11 +29,12 @@ export default function AsrInput(props) {
   }), /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-input-voice-bubble",
     "data-testid": "t-agent-message-input-asr-bubble"
-  }, state === 'recording' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, currentText), /*#__PURE__*/React.createElement(Text, {
+  }, state === 'recording' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, currentText.endsWith(' ') ? /*#__PURE__*/React.createElement(React.Fragment, null, currentText, "\xA0") : currentText), /*#__PURE__*/React.createElement(Text, {
     className: "t-agent-message-input-voice-bubble-predicted"
   }, incomingText)) : /*#__PURE__*/React.createElement(Textarea, {
     "data-testid": "t-agent-message-input-asr-bubble-input",
     autoHeight: true,
+    maxLength: 2048,
     className: "t-agent-message-input-voice-bubble-input",
     value: text,
     onInput: event => setText(event.value)
@@ -56,18 +58,18 @@ export default function AsrInput(props) {
     className: "t-agent-message-input-button t-agent-message-input-button-voice-active",
     disabled: sendDisabled,
     onTouchStart: () => {
-      press();
       closeMore();
+      press();
     },
     onClick: release,
     onTouchCancel: release,
     onTouchEnd: release
   }), /*#__PURE__*/React.createElement(Button, {
-    disabled: sendDisabled,
+    disabled: sendDisabled || responding,
     "data-testid": "t-agent-message-input-asr-button-right",
     className: cx('t-agent-message-input-button', {
       't-agent-message-input-button-voice-send': state === 'pending',
-      't-agent-message-input-button-hide': state === 'recording' || !hasMore,
+      't-agent-message-input-button-hide': state === 'recording' || !hasMore && state !== 'pending',
       't-agent-message-input-button-more': state === 'init' && hasMore,
       't-agent-message-input-button-more-open': state === 'init' && moreOpen
     }),

package/dist/MessageInput/index.js

@@ -6,7 +6,7 @@ import './index.less';
 import { Button, View } from '@ray-js/components';
 import React, { useState } from 'react';
 import { Image, Input, ScrollView } from '@ray-js/ray';
-import { Asr, SocketStatus } from '@ray-js/t-agent-plugin-assistant';
+import { Asr } from '@ray-js/t-agent-plugin-assistant';
 import cx from 'clsx';
 import PrivateImage from '../PrivateImage';
 import imageSvg from './icons/image.svg';
@@ -17,6 +17,9 @@ import { useAttachmentInput, useChatAgent, useEmitEvent, useIsUnmounted, useOnEv
 import AsrInput from './AsrInput';
 export default function MessageInput(props) {
   const [moreOpen, setMoreOpen] = useState(false);
+  const {
+    i18nTranslate: t
+  } = useRenderOptions();
   const [text, setText] = useState('');
   const [asrText, setAsrText] = useState('');
   const attachmentInput = useAttachmentInput();
@@ -31,8 +34,11 @@ export default function MessageInput(props) {
   const agent = useChatAgent();
   const emitEvent = useEmitEvent();
   const isUnmounted = useIsUnmounted();
-  useOnEvent('updateSocketStatus', status => {
-    if ((status === SocketStatus.FAILED || status === SocketStatus.CONNECTING) && responding) {
+  useOnEvent('networkChange', _ref => {
+    let {
+      online
+    } = _ref;
+    if (!online && responding) {
       setResponding(false);
     }
   });
@@ -53,10 +59,10 @@ export default function MessageInput(props) {
       }
     }
   };
-  useOnEvent('sendMessage', async _ref => {
+  useOnEvent('sendMessage', async _ref2 => {
     let {
       blocks
-    } = _ref;
+    } = _ref2;
     if (uploading || responding) {
       return;
     }
@@ -72,10 +78,10 @@ export default function MessageInput(props) {
       }
     }
   });
-  useOnEvent('setInputBlocks', async _ref2 => {
+  useOnEvent('setInputBlocks', async _ref3 => {
     let {
       blocks
-    } = _ref2;
+    } = _ref3;
     if (uploading || responding) {
       return;
     }
@@ -139,7 +145,7 @@ export default function MessageInput(props) {
         if (!auth) {
           ty.showToast({
             icon: 'none',
-            title: I18n.t('chat.input.voice.requirePermission')
+            title: t('t-agent.input.voice.require-permission')
           });
           return;
         }
@@ -177,7 +183,8 @@ export default function MessageInput(props) {
       moreOpen: moreOpen,
       closeMore: () => setMoreOpen(false),
       onMoreClick: openMoreClick,
-      sendDisabled: responding || uploading,
+      responding: responding,
+      sendDisabled: uploading,
       onSend: async () => {
         if (asrText) {
           await send([...attachmentInput.blocks, {
@@ -258,7 +265,7 @@ export default function MessageInput(props) {
       } catch (e) {
         ty.showToast({
           icon: 'error',
-          title: I18n.t('common.upload.failed')
+          title: t('t-agent.input.upload.failed')
         });
       }
     }
@@ -274,7 +281,7 @@ export default function MessageInput(props) {
       } catch (e) {
         ty.showToast({
           icon: 'error',
-          title: I18n.t('common.upload.failed')
+          title: t('t-agent.input.upload.failed')
         });
       }
     }

package/dist/MessageInput/index.less

@@ -12,6 +12,10 @@
   padding-bottom: var(--t-agent-safe-bottom);
 }
 
+.t-agent-chat-container-keyboard-show .t-agent-message-input {
+  padding-bottom: 0;
+}
+
 .t-agent-message-input-container {
   border-top: 2rpx solid var(--t-agent-input-border-color);
   background: var(--app-B1);
@@ -261,7 +265,10 @@
   color: var(--app-M1-N1);
   font-size: 32rpx;
   transition: height 0.2s ease-in-out;
-  white-space: pre-wrap;
+
+  text {
+    white-space: pre-wrap;
+  }
 
   &::after {
     content: '';
@@ -277,6 +284,10 @@
   }
 }
 
+.t-agent-chat-container-keyboard-show .t-agent-message-input-voice-bubble {
+  bottom: 260rpx;
+}
+
 .t-agent-message-input-voice-bubble-predicted {
   color: var(--app-M1-N3);
 }

package/dist/MessageList/index.js

@@ -4,7 +4,7 @@ import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import './index.less';
 import { View } from '@ray-js/components';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { ScrollView } from '@ray-js/ray';
 import MessageRender from '../MessageRender';
 import { useAgentMessage, useOnEvent, useSleep } from '../hooks';
@@ -19,13 +19,19 @@ export default function MessageList(props) {
   const [scrollAnimation, setScrollAnimation] = useState(false);
   // 最大整数位数，用于强制滚动到底部，收到连续 scrollToBottom 时，每 10 毫秒更新一次
   const [scrollTop, setScrollTop] = useState(() => 1000000000000000 + Math.floor(Date.now() / 10));
+  const followNewMessageRef = useRef(true);
   const sleep = useSleep();
 
   // 强制滚动到底部
   useOnEvent('scrollToBottom', _ref => {
     let {
-      animation
+      animation,
+      follow
     } = _ref;
+    // 如果发送的跟随新消息的滚动，判断当前是不是滚动到了底部，如果没有滚动到底部，不执行滚动
+    if (follow && !followNewMessageRef.current) {
+      return;
+    }
     sleep(100).then(() => {
       setScrollAnimation(!!animation);
       const top = 1000000000000000 + Math.floor(Date.now() / 10);
@@ -46,7 +52,11 @@ export default function MessageList(props) {
     scrollTop: scrollTop,
     refresherTriggered: false,
     enableFlex: true,
-    scrollY: true
+    scrollY: true,
+    onScroll: event => {
+      // 使用了 flex-direction: column-reverse，所以滚动到顶部时，scrollTop = 0
+      followNewMessageRef.current = event.detail.scrollTop > -10;
+    }
   }, /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list-padding"
   }), reversed.map((msg, index) => {

package/dist/contexts.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { ChatAgent, ChatMessageObject, UIPlugin } from '@ray-js/t-agent';
-import { AssistantPlugin, SocketStatus } from '@ray-js/t-agent-plugin-assistant';
+import { AssistantPlugin } from '@ray-js/t-agent-plugin-assistant';
 import { RenderOptions, TileProps } from './types';
 export declare const MessageContext: import("react").Context<{
     messages: ChatMessageObject[];
-    socketStatus: SocketStatus;
+    keyboardHeight: number;
 }>;
 export declare const RenderContext: import("react").Context<RenderOptions>;
 export declare const ChatAgentContext: import("react").Context<ChatAgent<UIPlugin & AssistantPlugin>>;

package/dist/contexts.js

@@ -1,8 +1,7 @@
 import { createContext } from 'react';
-import { SocketStatus } from '@ray-js/t-agent-plugin-assistant';
 export const MessageContext = /*#__PURE__*/createContext({
   messages: [],
-  socketStatus: SocketStatus.WAITING
+  keyboardHeight: 0
 });
 export const RenderContext = /*#__PURE__*/createContext({
   renderTileAs: () => null,

package/dist/hooks/context.d.ts

@@ -2,7 +2,7 @@ import { TTTAction } from '@ray-js/t-agent-plugin-assistant';
 export declare const useChatAgent: () => import("@ray-js/t-agent").ChatAgent<import("@ray-js/t-agent").UIPlugin & import("@ray-js/t-agent-plugin-assistant").AssistantPlugin>;
 export declare const useAgentMessage: () => {
     messages: import("@ray-js/t-agent").ChatMessageObject[];
-    socketStatus: import("@ray-js/t-agent-plugin-assistant").SocketStatus;
+    keyboardHeight: number;
 };
 export declare const useRenderOptions: () => import("..").RenderOptions;
 export declare const useOnEvent: (eventName: string, callback: (details: any) => void) => void;

package/dist/hooks/useAsrInput.js

@@ -1,6 +1,7 @@
 import "core-js/modules/web.dom-collections.iterator.js";
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Asr, AsrDetectResultState } from '@ray-js/t-agent-plugin-assistant';
+import { useIsUnmounted } from './useIsUnmounted';
 export let AsrErrorCode = /*#__PURE__*/function (AsrErrorCode) {
   AsrErrorCode[AsrErrorCode["SHORT_TIME"] = 0] = "SHORT_TIME";
   return AsrErrorCode;
@@ -47,8 +48,18 @@ export function useAsrInput(options) {
   const asrRef = useRef(null);
   const [currentText, setCurrentText] = useState('');
   const [incomingText, setIncomingText] = useState('');
+  const isUnmounted = useIsUnmounted();
   const [state, setState] = useState('init');
   const startAt = useRef(0);
+  useEffect(() => {
+    return () => {
+      if (asrRef.current) {
+        asrRef.current.stop();
+        asrRef.current = null;
+        Asr.dispose();
+      }
+    };
+  }, []);
   return {
     currentText,
     incomingText,
@@ -61,21 +72,31 @@ export function useAsrInput(options) {
     },
     press: async () => {
       setState('recording');
-      startAt.current = Date.now();
+
+      // 保存当前文本，用于恢复
       const initial = text;
-      let last = initial;
+
+      // 上次识别的结果
+      let last = '';
       setCurrentText(initial);
       setIncomingText('');
 
       // 开始录音时
-      const asr = Asr.detect(async res => {
-        if (res.state === AsrDetectResultState.STARTING || res.state === AsrDetectResultState.END) {
-          const full = initial + res.text;
-          const incoming = full.slice(last.length);
-          setIncomingText(incoming);
-          setCurrentText(last);
-          setText(full);
-          last = full;
+      const asr = Asr.detect(res => {
+        if (isUnmounted()) {
+          return;
+        }
+        if (res.state === AsrDetectResultState.MID || res.state === AsrDetectResultState.END) {
+          if (res.text.startsWith(last)) {
+            const incoming = res.text.slice(last.length);
+            setIncomingText(incoming);
+            setCurrentText(initial + last);
+            last = res.text;
+          } else {
+            setIncomingText(res.text);
+            setCurrentText(initial);
+          }
+          setText(initial + res.text);
         }
         if (res.state === AsrDetectResultState.ERROR) {
           onError(new AsrError(res.errorCode));
@@ -83,6 +104,7 @@ export function useAsrInput(options) {
       });
       try {
         await asr.start();
+        startAt.current = Date.now();
         asrRef.current = asr;
       } catch (error) {
         onError(error);
@@ -92,15 +114,14 @@ export function useAsrInput(options) {
       if (state !== 'recording') {
         return;
       }
+      if (!text && startAt.current - Date.now() < 400) {
+        onError(new AsrError(AsrErrorCode.SHORT_TIME));
+      }
       if (text) {
         setState('pending');
       } else {
-        onError(new AsrError(AsrErrorCode.SHORT_TIME));
         setState('init');
       }
-      if (Date.now() - startAt.current < 500 && text.length === 0) {
-        onError(new AsrError(AsrErrorCode.SHORT_TIME));
-      }
       if (asrRef.current) {
         await asrRef.current.stop();
         asrRef.current = null;

package/dist/renderOption.js

@@ -72,5 +72,6 @@ export const defaultRenderOptions = {
   customBlockTypes: defaultCustomBlockTypes,
   renderCardAs: defaultRenderCardAs,
   customCardMap: {},
-  getStaticResourceBizType: () => ''
+  getStaticResourceBizType: () => '',
+  i18nTranslate: key => I18n.t(key)
 };

package/dist/tiles/BubbleTile/index.js

@@ -12,7 +12,7 @@ import TileRender from '../../TileRender';
 import Feedback from './Feedback';
 import noticeSvg from './notice.svg';
 import noticeWarnSvg from './notice-warn.svg';
-import { useChatAgent } from '../../hooks';
+import { useChatAgent, useRenderOptions } from '../../hooks';
 const BubbleTile = props => {
   var _message$meta$request;
   const agent = useChatAgent();
@@ -31,6 +31,9 @@ const BubbleTile = props => {
     data
   } = tile;
   const bubbleStatus = data.status || BubbleTileStatus.NORMAL;
+  const {
+    i18nTranslate: t
+  } = useRenderOptions();
   const loading = status === ChatMessageStatus.START || status === ChatMessageStatus.UPDATING;
   const showFeedback = isLatestMessage && status === ChatMessageStatus.FINISH && role === 'assistant' && ((_message$meta$request = message.meta.requestId) === null || _message$meta$request === void 0 ? void 0 : _message$meta$request.startsWith('AIAssistant')) && bubbleStatus === BubbleTileStatus.NORMAL;
   const [feedbackLoaded, setFeedbackLoaded] = useState(false);
@@ -77,7 +80,7 @@ const BubbleTile = props => {
       onClick: showInfo,
       src: noticeWarnSvg,
       className: "t-agent-bubble-tile-error",
-      "data-testid": "t-agent-bubble-tile-error"
+      "data-testid": "t-agent-bubble-tile-warning"
     });
   }
   return /*#__PURE__*/React.createElement(View, {
@@ -120,7 +123,7 @@ const BubbleTile = props => {
         })
       });
       ty.showToast({
-        title: I18n.t('chat.feedback.success'),
+        title: t('t-agent.message.feedback.success'),
         icon: 'none'
       });
     }

package/dist/tiles/ButtonsTile/index.js

@@ -3,17 +3,27 @@ import "core-js/modules/esnext.iterator.map.js";
 import { Button, View } from '@ray-js/components';
 import React from 'react';
 import './index.less';
+import { useRenderOptions } from '../../hooks';
 export default function ButtonsTile(props) {
+  const {
+    i18nTranslate
+  } = useRenderOptions();
   if (props.tile.locked) {
     return null;
   }
   return /*#__PURE__*/React.createElement(View, {
     className: "t-agent-buttons-tile"
-  }, props.tile.data.buttons.map(item => /*#__PURE__*/React.createElement(Button, {
-    key: "".concat(item.text, "-").concat(item.type || ''),
-    className: "t-agent-buttons-tile-button ".concat(item.type ? "t-agent-buttons-tile-button-".concat(item.type) : ''),
-    onClick: () => {
-      item.clickPayload && props.emitEvent(item.clickPayload);
+  }, props.tile.data.buttons.map(item => {
+    let text = item.text;
+    if (item.i18nKey) {
+      text = i18nTranslate(item.i18nKey);
     }
-  }, item.text)));
+    return /*#__PURE__*/React.createElement(Button, {
+      key: "".concat(text, "-").concat(item.type || ''),
+      className: "t-agent-buttons-tile-button ".concat(item.type ? "t-agent-buttons-tile-button-".concat(item.type) : ''),
+      onClick: () => {
+        item.clickPayload && props.emitEvent(item.clickPayload);
+      }
+    }, text);
+  }));
 }

package/dist/types.d.ts

@@ -23,4 +23,5 @@ export interface RenderOptions {
         card: ChatCardObject;
     }>>;
     getStaticResourceBizType: (src: string, scene?: string, data?: any) => string;
+    i18nTranslate: (key: string) => string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.0.8-beta-1",
+  "version": "0.0.8-beta-3",
   "author": "Tuya.inc",
   "license": "MIT",
   "private": false,
@@ -41,5 +41,5 @@
     "@types/echarts": "^4.9.22",
     "@types/markdown-it": "^14.1.1"
   },
-  "gitHead": "16c52814d110e10b2e108915675d90e2b023df5e"
+  "gitHead": "686e9d17bd1a96074d3ac16ac2a3d73e1aa17f8f"
 }