@ray-js/t-agent-ui-ray 0.2.0-beta.19 → 0.2.0-beta.20

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

@@ -1,9 +1,8 @@
 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 => {
   let {
     amplitudeCount
@@ -21,26 +20,34 @@ 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.js

@@ -17,6 +17,7 @@ import { useAttachmentInput, useChatAgent, useEmitEvent, useIsUnmounted, useOnEv
 import AsrInput from './AsrInput';
 import logger from '../../logger';
 import { systemInfo } from '../../utils';
+import { useSleep } from '../../hooks/useSleep';
 const AMPLITUDE_COUNT = 60;
 var InputState = /*#__PURE__*/function (InputState) {
   InputState["PENDING"] = "pending";
@@ -196,6 +197,7 @@ export default function MessageInputAIStream(props) {
   const canSend = text.trim().length && state.current === InputState.PENDING && !attachmentInput.uploading;
   const canAbort = state.current === InputState.RESPONDING || state.current === InputState.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 +225,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",

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,46 @@
+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;
+}
+interface Ref {
+    scrollToBottom: (options?: {
+        animation?: boolean;
+        follow?: boolean;
+    }) => void;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<Ref>>>;
+export default _default;

package/dist/MessageList/ScrollBottomView.js

@@ -0,0 +1,202 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import { useSleep } from '../hooks/useSleep';
+import { generateId } from '@ray-js/t-agent';
+import { useOnEvent, useTick } from '../hooks';
+import { ScrollView } from '@ray-js/ray';
+import { View } from '@ray-js/components';
+export function useScrollBottomView(params) {
+  const [scrollViewId] = useState(() => "ScrollView-".concat(generateId()));
+  const contentViewId = "".concat(scrollViewId, "-content");
+  const tickValue = useTick();
+  const [ready, setReady] = useState(false);
+  const [scrollIntoViewFlag, setScrollIntoViewIdFlag] = useState(() => "".concat(Date.now()));
+  const [scrollWithAnimation, setScrollWithAnimation] = useState(false);
+  const ref = useRef({
+    clientHeight: 0,
+    needFollow: true,
+    following: false,
+    lastScrollEvent: null,
+    startTimestamp: 0
+  });
+  const sleep = useSleep();
+  const makeScrollBottomEvent = useCallback(() => {
+    if (ref.current.lastScrollEvent) {
+      const {
+        detail,
+        currentTarget,
+        target
+      } = ref.current.lastScrollEvent;
+      const {
+        scrollTop,
+        scrollHeight
+      } = detail;
+      const newDetail = {
+        deltaX: 0,
+        scrollLeft: 0,
+        scrollTop: scrollHeight - ref.current.clientHeight,
+        scrollWidth: detail.scrollWidth,
+        scrollHeight,
+        deltaY: scrollTop - (scrollHeight - ref.current.clientHeight)
+      };
+      if (scrollTop === newDetail.scrollTop) {
+        // 如果滚动位置没有变化，则不触发事件
+        return null;
+      }
+      return {
+        type: 'scroll',
+        timeStamp: Date.now() - ref.current.startTimestamp,
+        currentTarget,
+        target,
+        stopPropagation: () => {},
+        detail: newDetail
+      };
+    }
+    return null;
+  }, []);
+  const scrollToBottom = useCallback(_ref => {
+    let {
+      animation,
+      follow
+    } = _ref;
+    if (follow) {
+      if (ref.current.needFollow) {
+        setScrollIntoViewIdFlag("".concat(Date.now()));
+        ref.current.needFollow = true;
+        const event = makeScrollBottomEvent();
+        if (event) {
+          sleep(10).then(() => {
+            var _params$onScroll;
+            params === null || params === void 0 || (_params$onScroll = params.onScroll) === null || _params$onScroll === void 0 || _params$onScroll.call(params, event);
+          });
+        }
+      }
+    } else {
+      if (animation) {
+        setScrollWithAnimation(true);
+      }
+      ref.current.needFollow = true;
+      setScrollIntoViewIdFlag("".concat(Date.now()));
+      const event = makeScrollBottomEvent();
+      if (event) {
+        sleep(100).then(() => {
+          var _params$onScroll2;
+          params === null || params === void 0 || (_params$onScroll2 = params.onScroll) === null || _params$onScroll2 === void 0 || _params$onScroll2.call(params, event);
+        });
+      }
+      if (animation) {
+        sleep(10).then(() => {
+          setScrollWithAnimation(false);
+        });
+      }
+    }
+  }, []);
+  useEffect(() => {
+    const getDomTick = () => {
+      return new Promise(resolve => {
+        // @ts-ignore
+        const query = ty.createSelectorQuery();
+        query.select("#".concat(scrollViewId)).fields({
+          dataset: true
+        }, res => {
+          resolve(res.dataset.renderTick);
+        }).exec();
+      });
+    };
+    const getClientHeight = () => {
+      return new Promise(resolve => {
+        // @ts-ignore
+        const query = ty.createSelectorQuery();
+        query.select("#".concat(scrollViewId)).fields({
+          size: true
+        }, res => {
+          resolve(res.height);
+        }).exec();
+      });
+    };
+    const scrollViewInterval = setInterval(() => {
+      // 外部容器高度变化不频繁，1 秒查一次
+      getClientHeight().then(height => {
+        ref.current.clientHeight = height;
+      });
+    }, 1000);
+
+    // 初始化好 clientHeight
+    (async () => {
+      let tick = await getDomTick();
+      while (tick <= 0) {
+        await sleep(1);
+        tick = await getDomTick();
+      }
+      return tick;
+    })().then(() => getClientHeight()).then(height => {
+      console.log('scrollView clientHeight', height);
+      ref.current.clientHeight = height;
+    })
+    // 渲染完毕后，开始滚动到最底部
+    .then(() => scrollToBottom({}))
+    // 展示列表
+    .then(() => setReady(true));
+    return () => {
+      clearInterval(scrollViewInterval);
+    };
+  }, [scrollViewId]);
+  let scrollIntoViewId = "".concat(scrollViewId, "-toView-").concat(tickValue, "-").concat(scrollIntoViewFlag);
+  if (!ref.current.needFollow) {
+    scrollIntoViewId = null;
+  }
+  return {
+    scrollToBottom,
+    scrollViewLoading: !ready,
+    scrollIntoViewId,
+    contentViewProps: {
+      contentViewId
+    },
+    scrollViewProps: {
+      'data-render-tick': tickValue,
+      id: scrollViewId,
+      scrollY: true,
+      onScroll: event => {
+        var _params$onScroll3;
+        ref.current.lastScrollEvent = event;
+        const {
+          scrollTop,
+          scrollHeight
+        } = event.detail;
+        ref.current.needFollow = scrollHeight - scrollTop <= ref.current.clientHeight + 25;
+        params === null || params === void 0 || (_params$onScroll3 = params.onScroll) === null || _params$onScroll3 === void 0 || _params$onScroll3.call(params, event);
+        if (!ref.current.startTimestamp) {
+          ref.current.startTimestamp = Date.now() - event.timeStamp;
+        }
+      },
+      scrollWithAnimation,
+      scrollIntoView: scrollIntoViewId
+    }
+  };
+}
+const ScrollBottomView = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    scrollToBottom,
+    scrollViewProps,
+    scrollIntoViewId,
+    contentViewProps,
+    scrollViewLoading
+  } = useScrollBottomView({
+    onScroll: props.onScroll
+  });
+  useOnEvent('scrollToBottom', scrollToBottom);
+  useImperativeHandle(ref, () => ({
+    scrollToBottom
+  }), [scrollToBottom]);
+  return /*#__PURE__*/React.createElement(ScrollView, _extends({
+    className: "".concat(props.className || '', " ").concat(scrollViewLoading ? 't-agent-message-list-hide' : ''),
+    style: props.style
+  }, scrollViewProps), /*#__PURE__*/React.createElement(View, _extends({}, contentViewProps, {
+    className: "".concat(props.contentClassName || '')
+  }), props.children, /*#__PURE__*/React.createElement(View, {
+    id: scrollIntoViewId
+  })));
+});
+export default /*#__PURE__*/React.memo(ScrollBottomView);

package/dist/MessageList/index.d.ts

@@ -6,6 +6,8 @@ interface Props {
     wrapperClassName?: string;
     wrapperStyle?: React.CSSProperties;
     renderTop?: React.ReactNode;
+    renderBottom?: React.ReactNode;
+    onScroll?: (event: any) => void;
     roleSide?: {
         user?: 'start' | 'end' | string;
         assistant?: 'start' | 'end' | string;
@@ -18,5 +20,5 @@ interface Props {
         tipText: string;
     };
 }
-export default function MessageList(props: Props): React.JSX.Element;
-export {};
+declare const MessageList: (props: Props) => React.JSX.Element;
+export default MessageList;

package/dist/MessageList/index.js

@@ -1,19 +1,14 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import "core-js/modules/es.array.reverse.js";
 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 './index.less';
 import { View } from '@ray-js/components';
-import React, { useMemo, useRef, useState } from 'react';
-import { ScrollView } from '@ray-js/ray';
-import { generateId } from '@ray-js/t-agent';
+import React from 'react';
 import MessageRender from '../MessageRender';
-import { useAgentMessage, useAgentSessionValue, useOnEvent } from '../hooks';
-import { useDebouncedFn } from '../hooks/useDebouncedFn';
-import { useSleep } from '../hooks/useSleep';
-import { systemInfo } from '../utils';
-export default function MessageList(props) {
+import { useAgentMessage, useAgentSessionValue } from '../hooks';
+import ScrollBottomView from './ScrollBottomView';
+import { useStableCallback } from '../hooks/useStableCallback';
+const MessageList = props => {
   const {
     className,
     roleSide,
@@ -22,97 +17,38 @@ export default function MessageList(props) {
     wrapperStyle,
     historyLimit
   } = props;
-  const {
-    messages
-  } = useAgentMessage();
-  const [id] = useState(() => "ScrollView-".concat(generateId()));
-  const [scrollAnimation, setScrollAnimation] = useState(false);
-  // 最大整数位数，用于强制滚动到底部，收到连续 scrollToBottom 时，每 10 毫秒更新一次
-  const [scrollTop, setScrollTop] = useState(() => 1000000000000000 + Math.floor(Date.now() / 10));
-  const followNewMessageRef = useRef(true);
-  const sleep = useSleep();
+  const messages = useAgentMessage();
+  const onScroll = useStableCallback(props.onScroll);
   const [showSelect] = useAgentSessionValue('UIRay.multiSelect.show');
-  const canIUse = useMemo(() => {
-    // @ts-ignore
-    const {
-      containerVersion
-    } = systemInfo;
-    return {
-      // 在 2.27.2 版本之前，pageScrollTo 在某些场景不生效
-      scroll: false
-    };
-  }, []);
-  const scroll = useDebouncedFn(animation => {
-    // @ts-ignore
-    ty.pageScrollTo({
-      scrollTop: 0,
-      duration: animation ? 100 : 1,
-      selector: "#".concat(id)
-    });
-  }, 100);
-
-  // 强制滚动到底部
-  useOnEvent('scrollToBottom', _ref => {
-    let {
-      animation,
-      follow
-    } = _ref;
-    // 如果发送的跟随新消息的滚动，判断当前是不是滚动到了底部，如果没有滚动到底部，不执行滚动
-    if (follow && !followNewMessageRef.current) {
-      return;
-    }
-    if (canIUse.scroll) {
-      scroll(animation);
-    } else {
-      sleep(100).then(() => {
-        setScrollAnimation(!!animation);
-        const top = 1000000000000000 + Math.floor(Date.now() / 10);
-        if (top !== scrollTop) {
-          setScrollTop(top);
-        }
-      });
-    }
-  });
-
-  // 使用翻转列表，让滚动和新消息出现在第一条，这样可以避免滚动到底部时的闪烁
-  const reversed = useMemo(() => [...messages].reverse(), [messages]);
-  const scrollProps = canIUse.scroll ? {} : {
-    scrollWithAnimation: scrollAnimation,
-    scrollTop
-  };
   return /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list ".concat(wrapperClassName || ''),
     "data-testid": "t-agent-message-list",
-    style: wrapperStyle
-  }, /*#__PURE__*/React.createElement(ScrollView, _extends({
+    style: wrapperStyle,
+    id: "message-list"
+  }, /*#__PURE__*/React.createElement(ScrollBottomView, {
     className: "".concat(className || '', " t-agent-message-list-scroll"),
+    contentClassName: "t-agent-message-list-scroll-content",
     style: style,
-    id: id
-  }, scrollProps, {
-    refresherTriggered: false,
-    enableFlex: 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) => {
+    onScroll: onScroll
+  }, historyLimit && historyLimit.count < messages.length && /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-list-history-tip"
+  }, historyLimit.tipText), /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-list-padding-start"
+  }), props.renderTop, messages.map((msg, index) => {
     let side = roleSide === null || roleSide === void 0 ? void 0 : roleSide[msg.role];
     if (!side) {
       side = msg.role === 'user' ? 'end' : 'start';
     }
+    const isLatestMessage = index === messages.length - 1;
     return /*#__PURE__*/React.createElement(MessageRender, {
       showSelect: showSelect,
       key: msg.id,
       message: msg,
-      isLatestMessage: index === 0,
+      isLatestMessage: isLatestMessage,
       side: side
     });
-  }), historyLimit && historyLimit.count < reversed.length && /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-list-history-tip"
-  }, historyLimit.tipText), props.renderTop, /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-list-padding-start"
+  }), props.renderBottom, /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-list-padding"
   })));
-}
+};
+export default MessageList;

package/dist/MessageList/index.less

@@ -4,21 +4,32 @@
   overflow-x: hidden;
   position: relative;
   background: var(--app-B1);
-  padding: 16rpx 32rpx 0;
 }
 
 .t-agent-message-list-scroll {
-  display: flex;
   width: 100%;
   height: 100%;
-  flex-direction: column-reverse;
+}
+
+.t-agent-message-list-scroll-content {
+  padding: 0 32rpx;
+}
+
+.t-agent-message-list-block {
+  border: 2rpx solid green;
+}
+
+.t-agent-message-list-padding-start {
+  height: 16rpx;
 }
 
 .t-agent-message-list-padding {
   flex: 1
 }
 
-.t-agent-message-list-padding-start {}
+.t-agent-message-list-hide {
+  opacity: 0;
+}
 
 .t-agent-message-list-history-tip {
   width: 100%;

package/dist/TileRender/index.js

@@ -1,6 +1,6 @@
 import './index.less';
 import React, { useCallback, useMemo } from 'react';
-import { useChatAgent, useRenderOptions } from '../hooks';
+import { useChatAgent, useNotifyHeightChanged, useRenderOptions } from '../hooks';
 import { TilePropsContext } from '../contexts';
 const TileRender = _ref => {
   let {
@@ -11,6 +11,7 @@ const TileRender = _ref => {
   } = _ref;
   const agent = useChatAgent();
   const emitTileEvent = useCallback(async payload => agent.emitTileEvent(tile.id, payload), [agent, tile.id]);
+  const notifyHeightChanged = useNotifyHeightChanged();
   const {
     renderTileAs
   } = useRenderOptions();
@@ -22,9 +23,10 @@ const TileRender = _ref => {
       side,
       isLatestMessage,
       emitEvent: emitTileEvent,
-      emitTileEvent
+      emitTileEvent,
+      notifyHeightChanged
     };
-  }, [agent, tile, message, side, isLatestMessage, emitTileEvent]);
+  }, [agent, tile, message, side, isLatestMessage, emitTileEvent, notifyHeightChanged]);
   const node = renderTileAs(props);
   return /*#__PURE__*/React.createElement(TilePropsContext.Provider, {
     value: props

package/dist/contexts.d.ts

@@ -2,14 +2,26 @@
 import { ChatAgent, ChatMessageObject, UIPlugin } from '@ray-js/t-agent';
 import { RenderOptions, TileProps } from './types';
 import { ChatSession } from '@ray-js/t-agent';
-export declare const MessageContext: import("react").Context<{
-    messages: ChatMessageObject[];
-    keyboardHeight: number;
-}>;
-export declare const RenderContext: import("react").Context<RenderOptions>;
 export type UIChatSession = Pick<ChatSession, 'get' | 'getData' | 'set' | 'sessionId'>;
 export type UIChatAgent = Pick<ChatAgent<UIPlugin>, 'pushInputBlocks' | 'plugins' | 'emitTileEvent' | 'removeMessage'> & {
     session: UIChatSession;
 };
-export declare const ChatAgentContext: import("react").Context<UIChatAgent>;
 export declare const TilePropsContext: import("react").Context<TileProps<any, any>>;
+declare const SharedProvider: ({ value, children }: import("react").PropsWithChildren<{
+    value: {
+        agent: UIChatAgent;
+        messages: ChatMessageObject[];
+        keyboardHeight: number;
+        renderOptions: RenderOptions;
+        notifyHeightChanged: () => void;
+        tickValue: number;
+    };
+}>) => import("react").JSX.Element, useSharedState: <K extends "agent" | "messages" | "keyboardHeight" | "renderOptions" | "notifyHeightChanged" | "tickValue">(key: K) => {
+    agent: UIChatAgent;
+    messages: ChatMessageObject[];
+    keyboardHeight: number;
+    renderOptions: RenderOptions;
+    notifyHeightChanged: () => void;
+    tickValue: number;
+}[K];
+export { SharedProvider, useSharedState };

package/dist/contexts.js

@@ -1,18 +1,6 @@
+import "core-js/modules/web.dom-collections.iterator.js";
 import { createContext } from 'react';
-export const MessageContext = /*#__PURE__*/createContext({
-  messages: [],
-  keyboardHeight: 0
-});
-export const RenderContext = /*#__PURE__*/createContext({
-  formatErrorMessageAs: message => message,
-  renderTileAs: () => null,
-  renderCustomBlockAs: () => null,
-  renderCardAs: () => null,
-  renderLongPressAs: () => null,
-  customBlockTypes: [],
-  customCardMap: {},
-  getStaticResourceBizType: () => '',
-  i18nTranslate: key => key
-});
-export const ChatAgentContext = /*#__PURE__*/createContext({});
-export const TilePropsContext = /*#__PURE__*/createContext({});
+import { createSharedStore } from './utils/createSharedStore';
+export const TilePropsContext = /*#__PURE__*/createContext({});
+const [SharedProvider, useSharedState] = createSharedStore();
+export { SharedProvider, useSharedState };

package/dist/hooks/context.d.ts

@@ -1,11 +1,11 @@
 import { Dispatch, SetStateAction } from 'react';
 import { TTTAction } from '../types';
 export declare const useChatAgent: () => import("../contexts").UIChatAgent;
-export declare const useAgentMessage: () => {
-    messages: import("@ray-js/t-agent").ChatMessageObject[];
-    keyboardHeight: number;
-};
+export declare const useTick: () => number;
+export declare const useNotifyHeightChanged: () => () => void;
+export declare const useAgentMessage: () => import("@ray-js/t-agent").ChatMessageObject[];
 export declare const useRenderOptions: () => import("../types").RenderOptions;
+export declare const useKeyboardHeight: () => number;
 export declare const useOnEvent: (eventName: string, callback: (details: any) => void) => void;
 export declare const useEmitEvent: () => <T extends keyof import("@ray-js/t-agent").UIEventMap>(eventName: T, detail: import("@ray-js/t-agent").UIEventMap[T]) => void;
 export declare const useTileProps: () => import("../types").TileProps<any, any>;

package/dist/hooks/context.js

@@ -1,14 +1,23 @@
 import "core-js/modules/web.dom-collections.iterator.js";
 import { useEffect, useContext, useCallback, useRef, useState } from 'react';
-import { TilePropsContext, ChatAgentContext, MessageContext, RenderContext } from '../contexts';
+import { TilePropsContext, useSharedState } from '../contexts';
 export const useChatAgent = () => {
-  return useContext(ChatAgentContext);
+  return useSharedState('agent');
+};
+export const useTick = () => {
+  return useSharedState('tickValue');
+};
+export const useNotifyHeightChanged = () => {
+  return useSharedState('notifyHeightChanged');
 };
 export const useAgentMessage = () => {
-  return useContext(MessageContext);
+  return useSharedState('messages');
 };
 export const useRenderOptions = () => {
-  return useContext(RenderContext);
+  return useSharedState('renderOptions');
+};
+export const useKeyboardHeight = () => {
+  return useSharedState('keyboardHeight');
 };
 export const useOnEvent = (eventName, callback) => {
   const callbackRef = useRef(callback);

package/dist/hooks/useStableCallback.d.ts

@@ -0,0 +1 @@
+export declare const useStableCallback: <T extends (...args: any[]) => any>(fn: T) => T;

package/dist/hooks/useStableCallback.js

@@ -0,0 +1,13 @@
+import "core-js/modules/web.dom-collections.iterator.js";
+import { useCallback, useRef } from 'react';
+export const useStableCallback = fn => {
+  const ref = useRef(fn);
+  ref.current = fn;
+  const cb = useCallback(function () {
+    return ref.current(...arguments);
+  }, []);
+  if (!fn) {
+    return fn;
+  }
+  return cb;
+};

package/dist/tiles/BubbleTile/index.js

@@ -108,13 +108,13 @@ const BubbleTile = props => {
   }), /*#__PURE__*/React.createElement(View, {
     className: "t-agent-bubble-tile-bubble ".concat(loading ? 't-agent-bubble-tile-bubble-loading' : '')
   }, (() => {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children.map(t => /*#__PURE__*/React.createElement(TileRender, {
+    return children.map(t => /*#__PURE__*/React.createElement(TileRender, {
       side: side,
       tile: t,
       message: message,
       key: t.id,
       isLatestMessage: isLatestMessage
-    })));
+    }));
   })(), /*#__PURE__*/React.createElement(LoadingIndicator, {
     status: status
   }), showAbortedMessage && /*#__PURE__*/React.createElement(View, {
@@ -126,7 +126,6 @@ const BubbleTile = props => {
     nodeId: workflowNode
   }));
 };
-export default /*#__PURE__*/React.memo(BubbleTile);
 const ErrorNotice = /*#__PURE__*/memo(_ref => {
   let {
     bubbleStatus,
@@ -172,4 +171,5 @@ const LoadingIndicator = /*#__PURE__*/memo(_ref2 => {
     }));
   }
   return null;
-});
+});
+export default /*#__PURE__*/React.memo(BubbleTile);

package/dist/tiles/OperateCardTile/index.js

@@ -7,7 +7,7 @@ import React, { useMemo, useState } from 'react';
 import './index.less';
 // import { ChangeInfoItem, DeviceInfoItem, SceneInfoItem } from '@ray-js/t-agent-plugin-assistant';
 
-import { useTranslate } from '../../hooks';
+import { useTileProps, useTranslate } from '../../hooks';
 import Expand from './Expand';
 import { formatMessage } from '../../utils';
 const handleDesc = (detail, t) => {
@@ -197,6 +197,9 @@ export default function OperateCardTile(props) {
     };
   }, [deviceInfo, sceneInfo, changeInfo, t]);
   const desc = useMemo(() => handleDesc(operations, t), [operations, t]);
+  const {
+    notifyHeightChanged
+  } = useTileProps();
   if (!operations.device.length && !operations.scene.length && !operations.moreDevice.length && !operations.moreScene.length) {
     return null;
   }
@@ -208,6 +211,7 @@ export default function OperateCardTile(props) {
     className: "t-agent-scene-control-tile-summary-detail",
     onClick: () => {
       setShowDetail(!showDetail);
+      notifyHeightChanged();
     }
   }, showDetail ? t('t-agent.operate-card-tile.hide.details') : t('t-agent.operate-card-tile.view.details'))), renderDetail && renderDetail({
     operations,

package/dist/types.d.ts

@@ -52,6 +52,7 @@ export interface TileProps<T = any, P = any> {
     emitTileEvent: (payload: P) => void;
     isLatestMessage?: boolean;
     agent: UIChatAgent;
+    notifyHeightChanged: () => void;
 }
 export interface MarkdownBlock {
     id: string;

package/dist/utils/createSharedStore.d.ts

@@ -0,0 +1,4 @@
+import React, { PropsWithChildren } from 'react';
+export declare function createSharedStore<T>(): readonly [({ value, children }: React.PropsWithChildren<{
+    value: T;
+}>) => React.JSX.Element, <K extends keyof T>(key: K) => T[K], <K_1 extends keyof T>(key: K_1) => [T[K_1], (v: T[K_1]) => void]];

package/dist/utils/createSharedStore.js

@@ -0,0 +1,64 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { createContext, useContext, useRef, useState, useEffect, useLayoutEffect } from 'react';
+export function createSharedStore() {
+  const Context = /*#__PURE__*/createContext(null);
+  return [function (_ref) {
+    let {
+      value,
+      children
+    } = _ref;
+    const storeRef = useRef({
+      value,
+      listeners: new Map(),
+      setValue(newValue) {
+        const oldValue = storeRef.current.value;
+        storeRef.current.value = newValue;
+        for (const key of Object.keys(newValue)) {
+          if (oldValue[key] !== newValue[key]) {
+            var _storeRef$current$lis;
+            (_storeRef$current$lis = storeRef.current.listeners.get(key)) === null || _storeRef$current$lis === void 0 || _storeRef$current$lis.forEach(fn => fn());
+          }
+        }
+      },
+      updateKey(key, val) {
+        const newValue = _objectSpread(_objectSpread({}, storeRef.current.value), {}, {
+          [key]: val
+        });
+        storeRef.current.setValue(newValue);
+      },
+      subscribe(key, fn) {
+        if (!storeRef.current.listeners.has(key)) {
+          storeRef.current.listeners.set(key, new Set());
+        }
+        storeRef.current.listeners.get(key).add(fn);
+        return () => {
+          storeRef.current.listeners.get(key).delete(fn);
+        };
+      }
+    });
+    useLayoutEffect(() => {
+      // ✅ 在 render 阶段同步设置最新 value
+      storeRef.current.setValue(value);
+    }, [value]);
+    return /*#__PURE__*/React.createElement(Context.Provider, {
+      value: storeRef.current
+    }, children);
+  }, function (key) {
+    const store = useContext(Context);
+    if (!store) throw new Error('useSharedValue must be used within Provider');
+    const [, forceUpdate] = useState(0);
+    useEffect(() => store.subscribe(key, () => forceUpdate(n => n + 1)), [key, store]);
+    return store.value[key];
+  }, function (key) {
+    const store = useContext(Context);
+    if (!store) throw new Error('useSharedState must be used within Provider');
+    const [, forceUpdate] = useState(0);
+    useEffect(() => store.subscribe(key, () => forceUpdate(n => n + 1)), [key, store]);
+    return [store.value[key], val => {
+      store.updateKey(key, val);
+    }];
+  }];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.2.0-beta.19",
+  "version": "0.2.0-beta.20",
   "author": "Tuya.inc",
   "license": "MIT",
   "private": false,
@@ -40,5 +40,5 @@
     "@types/echarts": "^4.9.22",
     "@types/markdown-it": "^14.1.1"
   },
-  "gitHead": "0db50eef90b217b739bab1d824e4c6b2d495a169"
+  "gitHead": "517ce9d6aec8ac6a1ade692df773750d0c7738cf"
 }