@ray-js/t-agent-ui-ray 0.2.1-beta.3 → 0.2.2-beta-2

package/dist/ChatContainer/index.d.ts

@@ -1,11 +1,12 @@
 import './index.less';
 import React, { PropsWithChildren } from 'react';
 import { ChatAgent } from '@ray-js/t-agent';
+import { UIChatAgent } from '../contexts';
 import { RenderOptions } from '../types';
 export default function ChatContainer<T extends ChatAgent<any>>(props: PropsWithChildren<{
     createAgent: () => T;
     renderOptions?: RenderOptions;
     className?: string;
     style?: React.CSSProperties;
-    agentRef?: React.MutableRefObject<T>;
+    agentRef?: React.MutableRefObject<UIChatAgent | null>;
 }>): React.JSX.Element;

package/dist/ChatContainer/index.js

@@ -4,10 +4,10 @@ import "core-js/modules/esnext.iterator.filter.js";
 import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import './index.less';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { View } from '@ray-js/components';
 import cx from 'clsx';
-import { ChatAgentContext, MessageContext, RenderContext } from '../contexts';
+import { SharedProvider } from '../contexts';
 import { defaultRenderOptions } from '../renderOption';
 import logger from '../logger';
 import { systemInfo } from '../utils';
@@ -27,6 +27,8 @@ export default function ChatContainer(props) {
     style
   } = props;
   const [messages, setMessages] = useState([]);
+  const [tickValue, setRenderTick] = useState(0);
+  const notifyHeightChanged = useCallback(() => setRenderTick(t => t + 1), []);
   const [agent] = useState(() => {
     const agent = createAgent();
     if (!agent.plugins.ui) {
@@ -41,9 +43,6 @@ export default function ChatContainer(props) {
     });
     return agent;
   });
-  if (props.agentRef) {
-    props.agentRef.current = agent;
-  }
   const uiAgent = useMemo(() => {
     const session = {
       get: agent.session.get,
@@ -58,63 +57,72 @@ export default function ChatContainer(props) {
     });
     return {
       session,
-      plugins: agent.plugins,
+      plugins: {
+        ui: agent.plugins.ui
+      },
       pushInputBlocks: agent.pushInputBlocks,
       emitTileEvent: agent.emitTileEvent,
       removeMessage: agent.removeMessage
     };
   }, [agent]);
+  if (props.agentRef) {
+    props.agentRef.current = uiAgent;
+  }
   useEffect(() => {
     const {
       onEvent,
       emitEvent
     } = agent.plugins.ui;
-    const offMessageListInit = onEvent('messageListInit', _ref => {
+    const offMessageListInit = onEvent('messageListInit', async _ref => {
       let {
         messages
       } = _ref;
       setMessages(messages);
+      notifyHeightChanged();
       emitEvent('scrollToBottom', {
         animation: false
       });
     });
-    const offMessageChange = onEvent('messageChange', _ref2 => {
+    const offMessageChange = onEvent('messageChange', async _ref2 => {
       let {
         type,
         message
       } = _ref2;
       switch (type) {
         case 'show':
-          setMessages(prev => [...prev, message]);
-          emitEvent('scrollToBottom', {
-            animation: false
-          });
-          break;
+          {
+            setMessages(prev => [...prev, message]);
+            notifyHeightChanged();
+            emitEvent('scrollToBottom', {
+              animation: false
+            });
+            break;
+          }
         case 'update':
-          setMessages(prev => {
-            if (systemInfo.platform === 'android') {
-              var _prev;
-              // Android 上有兼容问题，需要手动滚动到底部
-              if (((_prev = prev[prev.length - 1]) === null || _prev === void 0 ? void 0 : _prev.id) === message.id) {
-                // 是最后一条消息，滚动到最底部
-                emitEvent('scrollToBottom', {
-                  animation: false,
-                  follow: true
-                });
-              }
-            }
-            return prev.map(item => {
-              if (item.id === message.id) {
-                return message;
-              }
-              return item;
+          {
+            setMessages(prev => {
+              return prev.map(item => {
+                if (item.id === message.id) {
+                  notifyHeightChanged();
+                  return message;
+                }
+                return item;
+              });
             });
-          });
-          break;
+            break;
+          }
         case 'remove':
-          setMessages(prev => {
-            return prev.filter(item => item.id !== message.id);
-          });
+          {
+            setMessages(prev => {
+              return prev.filter(item => item.id !== message.id);
+            });
+            notifyHeightChanged();
+            emitEvent('scrollToBottom', {
+              animation: false,
+              follow: true
+            });
+            break;
+          }
       }
     });
     return () => {
@@ -122,12 +130,6 @@ export default function ChatContainer(props) {
       offMessageChange();
     };
   }, [agent]);
-  const messageValue = useMemo(() => {
-    return {
-      messages,
-      keyboardHeight
-    };
-  }, [messages, keyboardHeight]);
   useEffect(() => {
     logger.debug('ChatProvider agent.start');
     agent.start().then(() => {
@@ -181,11 +183,14 @@ export default function ChatContainer(props) {
     className: cx('t-agent-chat-container', className, {
       't-agent-chat-container-keyboard-show': keyboardHeight > 0
     })
-  }, /*#__PURE__*/React.createElement(ChatAgentContext.Provider, {
-    value: uiAgent
-  }, /*#__PURE__*/React.createElement(RenderContext.Provider, {
-    value: renderOptions
-  }, /*#__PURE__*/React.createElement(MessageContext.Provider, {
-    value: messageValue
-  }, children))));
+  }, /*#__PURE__*/React.createElement(SharedProvider, {
+    value: {
+      agent: uiAgent,
+      messages,
+      notifyHeightChanged,
+      keyboardHeight,
+      tickValue,
+      renderOptions
+    }
+  }, children));
 }

package/dist/EchartsBlockRender/index.js

@@ -1,6 +1,5 @@
 import Render from './index.rjs';
 import logger from '../logger';
-import { systemInfo } from '../utils';
 
 // eslint-disable-next-line no-undef
 Component({
@@ -47,9 +46,12 @@ Component({
         });
         const data = JSON.parse(content);
         if (data.option) {
-          // eslint-disable-next-line no-undef
-          const pixelRatio = systemInfo.pixelRatio;
-          this.rjs.update(this.data.canvasId, pixelRatio, data.option);
+          if (!this.isInit) {
+            this.rjs.init(this.data.canvasId, data.option);
+            this.isInit = true;
+          } else {
+            this.rjs.update(data.option);
+          }
           this.setData({
             loading: false,
             error: false

package/dist/EchartsBlockRender/index.rjs

@@ -1,15 +1,41 @@
 export default Render({
   myChart: null,
-  async update(canvasId, devicePixelRatio, option) {
-    if (!this.myChart) {
+  option: null,
+  async init(canvasId, option) {
+    const { pixelRatio } = this.instance.getSystemInfo()
+    this.option = option
+    try {
       const canvas = await this.instance.getCanvasById(canvasId)
-      const echarts = await requirePlugin('rjs://echarts')
-
-      this.myChart = echarts.init(canvas, undefined, {
-        devicePixelRatio,
-      })
+      if (canvas) {
+        const echarts = await requirePlugin('rjs://echarts')
+        const myChart = echarts.init(canvas, undefined, {
+          devicePixelRatio: pixelRatio,
+        })
+        myChart.setOption(this.option, true)
+        this.myChart = myChart;
+      }
+    } catch (err) {
+      // ignore
     }
-    // 使用刚指定的配置项和数据显示图表。
-    this.myChart.setOption(option, true)
+  },
+  async update(option) {
+    this.option = option
+    if (this.myChart) {
+      this.myChart.setOption(this.option, true)
+    }
+    // const { pixelRatio } = this.instance.getSystemInfo()
+    // if (!this.myChart) {
+    //   const canvas = await this.instance.getCanvasById(canvasId)
+    //   console.log(`EchartsBlockRender init render, ${canvasId}`, Object.keys(canvas))
+    //   if (canvas) {
+    //     const echarts = await requirePlugin('rjs://echarts')
+    //     this.myChart = echarts.init(canvas, undefined, {
+    //       devicePixelRatio: pixelRatio,
+    //     })
+    //   }
+    // }
+    // console.log(`EchartsBlockRender set option, ${canvasId}`)
+    // // 使用刚指定的配置项和数据显示图表。
+    // this.myChart.setOption(option, true)
   },
 })

package/dist/MessageInput/MessageInputAIStream/WaveformVisualizer.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-export declare const WaveformVisualizer: ({ amplitudeCount }: {
+export declare const WaveformVisualizer: React.MemoExoticComponent<({ amplitudeCount }: {
     amplitudeCount: number;
-}) => React.JSX.Element;
+}) => React.JSX.Element>;

package/dist/MessageInput/MessageInputAIStream/WaveformVisualizer.js

@@ -1,10 +1,9 @@
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View } from '@ray-js/ray';
-import { useOnEvent } from '../../hooks';
-export const WaveformVisualizer = _ref => {
+export const WaveformVisualizer = /*#__PURE__*/React.memo(_ref => {
   let {
     amplitudeCount
   } = _ref;
@@ -21,27 +20,35 @@ export const WaveformVisualizer = _ref => {
       animationDelay: "".concat(index * 10, "ms")
     }
   })));
-  useOnEvent('amplitudes', val => {
-    const waveBase = val.body.amplitudes || [];
-    const bars = waveBase.map((item, index) => {
-      const value = item > 1 ? 1 : item * 100;
-      // 将数值映射到高度范围（0-100 → 2px-20px）
-      // const height = 2 + (value / 100) * 18;
-      return /*#__PURE__*/React.createElement(View
-      // eslint-disable-next-line react/no-array-index-key
-      , {
-        key: "asr_wave_".concat(index),
-        className: "t-agent-message-input-waveform-bar",
-        style: {
-          height: "".concat(value, "%"),
-          // 添加渐变色偏移效果
-          animationDelay: "".concat(index * 10, "ms")
-        }
+  useEffect(() => {
+    const handle = _ref2 => {
+      let {
+        amplitudes
+      } = _ref2;
+      const bars = (amplitudes || []).map((item, index) => {
+        const value = item > 1 ? 1 : item * 100;
+        // 将数值映射到高度范围（0-100 → 2px-20px）
+        // const height = 2 + (value / 100) * 18;
+        return /*#__PURE__*/React.createElement(View
+        // eslint-disable-next-line react/no-array-index-key
+        , {
+          key: "asr_wave_".concat(index),
+          className: "t-agent-message-input-waveform-bar",
+          style: {
+            height: "".concat(value, "%"),
+            // 添加渐变色偏移效果
+            animationDelay: "".concat(index * 10, "ms")
+          }
+        });
       });
-    });
-    setBars(bars);
-  });
+      setBars(bars);
+    };
+    ty.aistream.onRecordAmplitudes(handle);
+    return () => {
+      ty.aistream.offRecordAmplitudes(handle);
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-input-waveform-container"
   }, bars);
-};
+});

package/dist/MessageInput/MessageInputAIStream/index.d.ts

@@ -14,6 +14,14 @@ interface Props {
     attachment?: boolean | AttachmentOptions;
     maxTextLength?: number;
     maxAudioMs?: number;
+    onStateChange?: (state: MessageInputState) => void;
+}
+export declare const enum MessageInputState {
+    PENDING = "pending",
+    RECORDING = "recording",
+    ASR = "asr",
+    RESPONDING = "responding",
+    ABORTING = "aborting"
 }
 export default function MessageInputAIStream(props: Props): React.JSX.Element;
 export {};

package/dist/MessageInput/MessageInputAIStream/index.js

@@ -17,15 +17,17 @@ import { useAttachmentInput, useChatAgent, useEmitEvent, useIsUnmounted, useOnEv
 import AsrInput from './AsrInput';
 import logger from '../../logger';
 import { systemInfo } from '../../utils';
+import { useSleep } from '../../hooks/useSleep';
+import { useStableCallback } from '../../hooks/useStableCallback';
 const AMPLITUDE_COUNT = 60;
-var InputState = /*#__PURE__*/function (InputState) {
-  InputState["PENDING"] = "pending";
-  InputState["RECORDING"] = "recording";
-  InputState["ASR"] = "asr";
-  InputState["RESPONDING"] = "responding";
-  InputState["ABORTING"] = "aborting";
-  return InputState;
-}(InputState || {});
+export let MessageInputState = /*#__PURE__*/function (MessageInputState) {
+  MessageInputState["PENDING"] = "pending";
+  MessageInputState["RECORDING"] = "recording";
+  MessageInputState["ASR"] = "asr";
+  MessageInputState["RESPONDING"] = "responding";
+  MessageInputState["ABORTING"] = "aborting";
+  return MessageInputState;
+}({});
 var InputAction = /*#__PURE__*/function (InputAction) {
   InputAction["SEND"] = "send";
   InputAction["RECORD"] = "record";
@@ -40,30 +42,30 @@ var InputAction = /*#__PURE__*/function (InputAction) {
   return InputAction;
 }(InputAction || {});
 const transitions = {
-  [InputState.PENDING]: {
-    [InputAction.SEND]: InputState.RESPONDING,
-    [InputAction.RECORD]: InputState.RECORDING,
+  [MessageInputState.PENDING]: {
+    [InputAction.SEND]: MessageInputState.RESPONDING,
+    [InputAction.RECORD]: MessageInputState.RECORDING,
     // 这个变更是为了兼容 pushInputBlocks 结束的场景，没有实际意义
-    [InputAction.TEXT_END]: InputState.PENDING
+    [InputAction.TEXT_END]: MessageInputState.PENDING
   },
-  [InputState.RECORDING]: {
-    [InputAction.RECORD_TIMEOUT]: InputState.ASR,
-    [InputAction.RECORD_CANCEL]: InputState.PENDING,
-    [InputAction.RECORD_CONFIRM]: InputState.ASR,
-    [InputAction.ABORT]: InputState.ABORTING,
-    [InputAction.ASR_ERROR]: InputState.PENDING
+  [MessageInputState.RECORDING]: {
+    [InputAction.RECORD_TIMEOUT]: MessageInputState.ASR,
+    [InputAction.RECORD_CANCEL]: MessageInputState.PENDING,
+    [InputAction.RECORD_CONFIRM]: MessageInputState.ASR,
+    [InputAction.ABORT]: MessageInputState.ABORTING,
+    [InputAction.ASR_ERROR]: MessageInputState.PENDING
   },
-  [InputState.ASR]: {
-    [InputAction.ASR_END]: InputState.RESPONDING,
-    [InputAction.ASR_ERROR]: InputState.PENDING,
-    [InputAction.ABORT]: InputState.ABORTING
+  [MessageInputState.ASR]: {
+    [InputAction.ASR_END]: MessageInputState.RESPONDING,
+    [InputAction.ASR_ERROR]: MessageInputState.PENDING,
+    [InputAction.ABORT]: MessageInputState.ABORTING
   },
-  [InputState.RESPONDING]: {
-    [InputAction.ABORT]: InputState.ABORTING,
-    [InputAction.TEXT_END]: InputState.PENDING
+  [MessageInputState.RESPONDING]: {
+    [InputAction.ABORT]: MessageInputState.ABORTING,
+    [InputAction.TEXT_END]: MessageInputState.PENDING
   },
-  [InputState.ABORTING]: {
-    [InputAction.ABORT_DONE]: InputState.PENDING
+  [MessageInputState.ABORTING]: {
+    [InputAction.ABORT_DONE]: MessageInputState.PENDING
   }
 };
 export default function MessageInputAIStream(props) {
@@ -71,12 +73,11 @@ export default function MessageInputAIStream(props) {
   const t = useTranslate();
   const [text, setText] = useState('');
   const [state, setState] = useState({
-    current: InputState.PENDING,
+    current: MessageInputState.PENDING,
     payload: {}
   });
-  const dispatchRef = useRef(null);
   const initAudioRef = useRef(false);
-  dispatchRef.current = (event, payload) => {
+  const dispatch = useStableCallback((event, payload) => {
     var _transitions$state$cu;
     const next = (_transitions$state$cu = transitions[state.current]) === null || _transitions$state$cu === void 0 ? void 0 : _transitions$state$cu[event];
     if (next) {
@@ -85,12 +86,14 @@ export default function MessageInputAIStream(props) {
         current: next,
         payload
       });
+      if (props.onStateChange) {
+        props.onStateChange(next);
+      }
       return true;
     }
     logger.error('MessageInputAIStream', "".concat(state.current, " ==").concat(event, "==> X not allowed"));
     return false;
-  };
-  const dispatch = (event, payload) => dispatchRef.current(event, payload);
+  });
   const attachmentOptions = useMemo(() => {
     const options = {
       image: true,
@@ -166,7 +169,7 @@ export default function MessageInputAIStream(props) {
     let {
       blocks
     } = _ref2;
-    if (uploading || state.current !== InputState.PENDING) {
+    if (uploading || state.current !== MessageInputState.PENDING) {
       return;
     }
     if (mode !== 'text') {
@@ -193,9 +196,10 @@ export default function MessageInputAIStream(props) {
     }
   };
   let container;
-  const canSend = text.trim().length && state.current === InputState.PENDING && !attachmentInput.uploading;
-  const canAbort = state.current === InputState.RESPONDING || state.current === InputState.ASR;
+  const canSend = text.trim().length && state.current === MessageInputState.PENDING && !attachmentInput.uploading;
+  const canAbort = state.current === MessageInputState.RESPONDING || state.current === MessageInputState.ASR;
   const recordingFlagRef = useRef(false);
+  const sleep = useSleep();
   if (mode === 'text') {
     container = /*#__PURE__*/React.createElement(View, {
       className: "t-agent-message-input-text-bar"
@@ -223,6 +227,13 @@ export default function MessageInputAIStream(props) {
         emitEvent('scrollToBottom', {
           animation: true
         });
+      },
+      onBlur: () => {
+        sleep(200).then(() => {
+          emitEvent('scrollToBottom', {
+            follow: true
+          });
+        });
       }
     }), /*#__PURE__*/React.createElement(Button, {
       "data-testid": "t-agent-message-input-button-asr",
@@ -308,9 +319,9 @@ export default function MessageInputAIStream(props) {
   } else {
     container = /*#__PURE__*/React.createElement(AsrInput, {
       responding: canAbort,
-      disabled: state.current === InputState.ABORTING,
+      disabled: state.current === MessageInputState.ABORTING,
       amplitudeCount: AMPLITUDE_COUNT,
-      recording: state.current === InputState.RECORDING,
+      recording: state.current === MessageInputState.RECORDING,
       onRecord: async () => {
         logger.debug('MessageInputAIStream', 'AsrInput onRecord');
         if (attachmentInput.uploading) {
@@ -332,10 +343,10 @@ export default function MessageInputAIStream(props) {
         const emitter = new Emitter();
         emitter.addEventListener('error', async error => {
           logger.error('MessageInputAIStream', 'AsrInput error', error);
-          if (state.current === InputState.RECORDING) {
+          if (state.current === MessageInputState.RECORDING) {
             clearTimeout(state.payload.recordTimeOutId);
           }
-          if (state.current === InputState.RESPONDING) {
+          if (state.current === MessageInputState.RESPONDING) {
             return;
           }
           if (dispatch(InputAction.ASR_ERROR, {})) {
@@ -416,7 +427,7 @@ export default function MessageInputAIStream(props) {
       onConfirm: async () => {
         logger.debug('MessageInputAIStream', 'AsrInput onConfirm');
         recordingFlagRef.current = false;
-        if (state.current === InputState.ABORTING || state.current === InputState.PENDING) {
+        if (state.current === MessageInputState.ABORTING || state.current === MessageInputState.PENDING) {
           return;
         }
         const payload = state.payload;
@@ -430,7 +441,7 @@ export default function MessageInputAIStream(props) {
       onCancel: async () => {
         logger.debug('MessageInputAIStream', 'AsrInput onCancel');
         recordingFlagRef.current = false;
-        if (state.current === InputState.ABORTING) {
+        if (state.current === MessageInputState.ABORTING) {
           return false;
         }
         const payload = state.payload;

package/dist/MessageInput/index.d.ts

@@ -1,2 +1,3 @@
-import MessageInputAIStream from './MessageInputAIStream';
+import MessageInputAIStream, { MessageInputState } from './MessageInputAIStream';
+export { MessageInputState };
 export default MessageInputAIStream;

package/dist/MessageInput/index.js

@@ -1,2 +1,3 @@
-import MessageInputAIStream from './MessageInputAIStream';
+import MessageInputAIStream, { MessageInputState } from './MessageInputAIStream';
+export { MessageInputState };
 export default MessageInputAIStream;

package/dist/MessageList/LazyView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    id: string;
+    className?: string;
+    children?: React.ReactNode;
+    containerId: string;
+}
+export default function LazyView(props: Props): React.JSX.Element;
+export {};

package/dist/MessageList/LazyView.js

@@ -0,0 +1,57 @@
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import { View } from '@ray-js/components';
+import React, { useEffect, useRef, useState } from 'react';
+import { usePageInstance } from '@ray-js/ray';
+const queryHeight = id => {
+  return new Promise(resolve => {
+    // @ts-ignore
+    const query = ty.createSelectorQuery();
+    query.select("#".concat(id)).boundingClientRect(res => {
+      resolve(res.height);
+    }).exec();
+  });
+};
+export default function LazyView(props) {
+  const {
+    id,
+    className,
+    children,
+    containerId
+  } = props;
+  const [visible, setVisible] = useState(true);
+  const heightRef = useRef(0);
+  const valid = heightRef.current > 0;
+  console.log();
+  const page = usePageInstance();
+  useEffect(() => {
+    // @ts-ignore
+    const observer = ty.createIntersectionObserver(page, {
+      thresholds: [0, 1],
+      initialRatio: 0
+    });
+    observer.relativeTo("#".concat(containerId), {
+      top: 50,
+      bottom: 50
+    }).observe("#".concat(id), res => {
+      setVisible(res.intersectionRatio > 0);
+      console.log(id, res);
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [id, containerId]);
+  useEffect(() => {
+    queryHeight(id).then(height => {
+      console.log('queryHeight', id, height);
+      heightRef.current = height;
+    });
+  }, [id]);
+  console.log('rerender', id);
+  return /*#__PURE__*/React.createElement(View, {
+    className: className,
+    "data-hide": !visible && valid,
+    id: id
+    // style={hide ? { visibility: 'hidden' } : null}
+  }, children);
+}

package/dist/MessageList/ScrollBottomView.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+interface ScrollBottomViewParams {
+    onScroll?: (event: any) => void;
+}
+export declare function useScrollBottomView(params: ScrollBottomViewParams): {
+    scrollToBottom: ({ animation, follow }: {
+        animation?: boolean | undefined;
+        follow?: boolean | undefined;
+    }) => void;
+    scrollViewLoading: boolean;
+    scrollIntoViewId: string;
+    contentViewProps: {
+        contentViewId: string;
+    };
+    scrollViewProps: {
+        'data-render-tick': number;
+        id: string;
+        scrollY: boolean;
+        onScroll: (event: {
+            detail: {
+                scrollTop: number;
+                scrollHeight: number;
+                deltaY: number;
+            };
+            currentTarget: any;
+            timeStamp: number;
+        }) => void;
+        scrollWithAnimation: boolean;
+        scrollIntoView: string;
+    };
+};
+interface Props {
+    className?: string;
+    contentClassName?: string;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    onScroll?: (event: any) => void;
+    hideScrollbar?: boolean;
+}
+interface Ref {
+    scrollToBottom: (options?: {
+        animation?: boolean;
+        follow?: boolean;
+    }) => void;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<Ref>>>;
+export default _default;