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

package/dist/ChatContainer/index.d.ts

@@ -1,12 +1,11 @@
 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<UIChatAgent | null>;
+    agentRef?: React.MutableRefObject<T>;
 }>): 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, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { View } from '@ray-js/components';
 import cx from 'clsx';
-import { SharedProvider } from '../contexts';
+import { ChatAgentContext, MessageContext, RenderContext } from '../contexts';
 import { defaultRenderOptions } from '../renderOption';
 import logger from '../logger';
 import { systemInfo } from '../utils';
@@ -27,8 +27,6 @@ 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) {
@@ -43,6 +41,9 @@ export default function ChatContainer(props) {
     });
     return agent;
   });
+  if (props.agentRef) {
+    props.agentRef.current = agent;
+  }
   const uiAgent = useMemo(() => {
     const session = {
       get: agent.session.get,
@@ -57,72 +58,63 @@ export default function ChatContainer(props) {
     });
     return {
       session,
-      plugins: {
-        ui: agent.plugins.ui
-      },
+      plugins: agent.plugins,
       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', async _ref => {
+    const offMessageListInit = onEvent('messageListInit', _ref => {
       let {
         messages
       } = _ref;
       setMessages(messages);
-      notifyHeightChanged();
       emitEvent('scrollToBottom', {
         animation: false
       });
     });
-    const offMessageChange = onEvent('messageChange', async _ref2 => {
+    const offMessageChange = onEvent('messageChange', _ref2 => {
       let {
         type,
         message
       } = _ref2;
       switch (type) {
         case 'show':
-          {
-            setMessages(prev => [...prev, message]);
-            notifyHeightChanged();
-            emitEvent('scrollToBottom', {
-              animation: false
-            });
-            break;
-          }
+          setMessages(prev => [...prev, message]);
+          emitEvent('scrollToBottom', {
+            animation: false
+          });
+          break;
         case 'update':
-          {
-            setMessages(prev => {
-              return prev.map(item => {
-                if (item.id === message.id) {
-                  notifyHeightChanged();
-                  return message;
-                }
-                return item;
-              });
+          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;
             });
-            break;
-          }
+          });
+          break;
         case 'remove':
-          {
-            setMessages(prev => {
-              return prev.filter(item => item.id !== message.id);
-            });
-            notifyHeightChanged();
-            emitEvent('scrollToBottom', {
-              animation: false,
-              follow: true
-            });
-            break;
-          }
+          setMessages(prev => {
+            return prev.filter(item => item.id !== message.id);
+          });
       }
     });
     return () => {
@@ -130,6 +122,12 @@ export default function ChatContainer(props) {
       offMessageChange();
     };
   }, [agent]);
+  const messageValue = useMemo(() => {
+    return {
+      messages,
+      keyboardHeight
+    };
+  }, [messages, keyboardHeight]);
   useEffect(() => {
     logger.debug('ChatProvider agent.start');
     agent.start().then(() => {
@@ -183,14 +181,11 @@ export default function ChatContainer(props) {
     className: cx('t-agent-chat-container', className, {
       't-agent-chat-container-keyboard-show': keyboardHeight > 0
     })
-  }, /*#__PURE__*/React.createElement(SharedProvider, {
-    value: {
-      agent: uiAgent,
-      messages,
-      notifyHeightChanged,
-      keyboardHeight,
-      tickValue,
-      renderOptions
-    }
-  }, children));
+  }, /*#__PURE__*/React.createElement(ChatAgentContext.Provider, {
+    value: uiAgent
+  }, /*#__PURE__*/React.createElement(RenderContext.Provider, {
+    value: renderOptions
+  }, /*#__PURE__*/React.createElement(MessageContext.Provider, {
+    value: messageValue
+  }, children))));
 }

package/dist/EchartsBlockRender/index.js

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

package/dist/EchartsBlockRender/index.rjs

@@ -1,41 +1,15 @@
 export default Render({
   myChart: null,
-  option: null,
-  async init(canvasId, option) {
-    const { pixelRatio } = this.instance.getSystemInfo()
-    this.option = option
-    try {
+  async update(canvasId, devicePixelRatio, option) {
+    if (!this.myChart) {
       const canvas = await this.instance.getCanvasById(canvasId)
-      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
+      const echarts = await requirePlugin('rjs://echarts')
+
+      this.myChart = echarts.init(canvas, undefined, {
+        devicePixelRatio,
+      })
     }
-  },
-  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)
+    // 使用刚指定的配置项和数据显示图表。
+    this.myChart.setOption(option, true)
   },
 })

package/dist/MessageInput/MessageInputAIStream/WaveformVisualizer.js

@@ -1,8 +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, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { View } from '@ray-js/ray';
+import { useOnEvent } from '../../hooks';
 export const WaveformVisualizer = _ref => {
   let {
     amplitudeCount
@@ -20,34 +21,26 @@ export const WaveformVisualizer = _ref => {
       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")
-          }
-        });
+  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")
+        }
       });
-      setBars(bars);
-    };
-    ty.aistream.onRecordAmplitudes(handle);
-    return () => {
-      ty.aistream.offRecordAmplitudes(handle);
-    };
-  }, []);
+    });
+    setBars(bars);
+  });
   return /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-input-waveform-container"
   }, bars);

package/dist/MessageInput/MessageInputAIStream/index.js

@@ -17,7 +17,6 @@ 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";
@@ -197,7 +196,6 @@ 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"
@@ -225,13 +223,6 @@ 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/index.d.ts

@@ -6,8 +6,6 @@ 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;
@@ -20,5 +18,5 @@ interface Props {
         tipText: string;
     };
 }
-declare const MessageList: (props: Props) => React.JSX.Element;
-export default MessageList;
+export default function MessageList(props: Props): React.JSX.Element;
+export {};

package/dist/MessageList/index.js

@@ -1,14 +1,19 @@
+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 from 'react';
+import React, { useMemo, useRef, useState } from 'react';
+import { ScrollView } from '@ray-js/ray';
+import { generateId } from '@ray-js/t-agent';
 import MessageRender from '../MessageRender';
-import { useAgentMessage, useAgentSessionValue } from '../hooks';
-import ScrollBottomView from './ScrollBottomView';
-import { useStableCallback } from '../hooks/useStableCallback';
-const MessageList = props => {
+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) {
   const {
     className,
     roleSide,
@@ -17,38 +22,97 @@ const MessageList = props => {
     wrapperStyle,
     historyLimit
   } = props;
-  const messages = useAgentMessage();
-  const onScroll = useStableCallback(props.onScroll);
+  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 [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,
-    id: "message-list"
-  }, /*#__PURE__*/React.createElement(ScrollBottomView, {
+    style: wrapperStyle
+  }, /*#__PURE__*/React.createElement(ScrollView, _extends({
     className: "".concat(className || '', " t-agent-message-list-scroll"),
-    contentClassName: "t-agent-message-list-scroll-content",
     style: style,
-    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) => {
+    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) => {
     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: isLatestMessage,
+      isLatestMessage: index === 0,
       side: side
     });
-  }), props.renderBottom, /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-list-padding"
+  }), 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"
   })));
-};
-export default MessageList;
+}

package/dist/MessageList/index.less

@@ -4,32 +4,21 @@
   overflow-x: hidden;
   position: relative;
   background: var(--app-B1);
+  padding: 16rpx 32rpx 0;
 }
 
 .t-agent-message-list-scroll {
+  display: flex;
   width: 100%;
   height: 100%;
-}
-
-.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;
+  flex-direction: column-reverse;
 }
 
 .t-agent-message-list-padding {
   flex: 1
 }
 
-.t-agent-message-list-hide {
-  opacity: 0;
-}
+.t-agent-message-list-padding-start {}
 
 .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, useNotifyHeightChanged, useRenderOptions } from '../hooks';
+import { useChatAgent, useRenderOptions } from '../hooks';
 import { TilePropsContext } from '../contexts';
 const TileRender = _ref => {
   let {
@@ -11,7 +11,6 @@ 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();
@@ -23,10 +22,9 @@ const TileRender = _ref => {
       side,
       isLatestMessage,
       emitEvent: emitTileEvent,
-      emitTileEvent,
-      notifyHeightChanged
+      emitTileEvent
     };
-  }, [agent, tile, message, side, isLatestMessage, emitTileEvent, notifyHeightChanged]);
+  }, [agent, tile, message, side, isLatestMessage, emitTileEvent]);
   const node = renderTileAs(props);
   return /*#__PURE__*/React.createElement(TilePropsContext.Provider, {
     value: props

package/dist/contexts.d.ts

@@ -2,26 +2,14 @@
 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,6 +1,18 @@
-import "core-js/modules/web.dom-collections.iterator.js";
 import { createContext } from 'react';
-import { createSharedStore } from './utils/createSharedStore';
-export const TilePropsContext = /*#__PURE__*/createContext({});
-const [SharedProvider, useSharedState] = createSharedStore();
-export { SharedProvider, useSharedState };
+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({});

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 useTick: () => number;
-export declare const useNotifyHeightChanged: () => () => void;
-export declare const useAgentMessage: () => import("@ray-js/t-agent").ChatMessageObject[];
+export declare const useAgentMessage: () => {
+    messages: import("@ray-js/t-agent").ChatMessageObject[];
+    keyboardHeight: number;
+};
 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,23 +1,14 @@
 import "core-js/modules/web.dom-collections.iterator.js";
 import { useEffect, useContext, useCallback, useRef, useState } from 'react';
-import { TilePropsContext, useSharedState } from '../contexts';
+import { TilePropsContext, ChatAgentContext, MessageContext, RenderContext } from '../contexts';
 export const useChatAgent = () => {
-  return useSharedState('agent');
-};
-export const useTick = () => {
-  return useSharedState('tickValue');
-};
-export const useNotifyHeightChanged = () => {
-  return useSharedState('notifyHeightChanged');
+  return useContext(ChatAgentContext);
 };
 export const useAgentMessage = () => {
-  return useSharedState('messages');
+  return useContext(MessageContext);
 };
 export const useRenderOptions = () => {
-  return useSharedState('renderOptions');
-};
-export const useKeyboardHeight = () => {
-  return useSharedState('keyboardHeight');
+  return useContext(RenderContext);
 };
 export const useOnEvent = (eventName, callback) => {
   const callbackRef = useRef(callback);

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 children.map(t => /*#__PURE__*/React.createElement(TileRender, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, 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,6 +126,7 @@ const BubbleTile = props => {
     nodeId: workflowNode
   }));
 };
+export default /*#__PURE__*/React.memo(BubbleTile);
 const ErrorNotice = /*#__PURE__*/memo(_ref => {
   let {
     bubbleStatus,
@@ -171,5 +172,4 @@ 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 { useTileProps, useTranslate } from '../../hooks';
+import { useTranslate } from '../../hooks';
 import Expand from './Expand';
 import { formatMessage } from '../../utils';
 const handleDesc = (detail, t) => {
@@ -197,9 +197,6 @@ 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;
   }
@@ -211,7 +208,6 @@ 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,7 +52,6 @@ export interface TileProps<T = any, P = any> {
     emitTileEvent: (payload: P) => void;
     isLatestMessage?: boolean;
     agent: UIChatAgent;
-    notifyHeightChanged: () => void;
 }
 export interface MarkdownBlock {
     id: string;

package/package.json

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

package/dist/MessageList/LazyView.d.ts

@@ -1,9 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,202 +0,0 @@
-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/hooks/useStableCallback.d.ts

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

package/dist/hooks/useStableCallback.js

@@ -1,13 +0,0 @@
-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/utils/createSharedStore.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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);
-    }];
-  }];
-}