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

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.js

@@ -28,11 +28,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,8 +57,8 @@ 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,

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';
@@ -31,8 +31,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 +56,10 @@ export default function MessageInput(props) {
       }
     }
   };
-  useOnEvent('sendMessage', async _ref => {
+  useOnEvent('sendMessage', async _ref2 => {
     let {
       blocks
-    } = _ref;
+    } = _ref2;
     if (uploading || responding) {
       return;
     }
@@ -72,10 +75,10 @@ export default function MessageInput(props) {
       }
     }
   });
-  useOnEvent('setInputBlocks', async _ref2 => {
+  useOnEvent('setInputBlocks', async _ref3 => {
     let {
       blocks
-    } = _ref2;
+    } = _ref3;
     if (uploading || responding) {
       return;
     }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.0.8-beta-1",
+  "version": "0.0.8-beta-2",
   "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": "0fe6e7c1daafbeffd1394a7ee85ab4ae86d8f93e"
 }