@ray-js/t-agent-ui-ray 0.2.2-beta-1 → 0.2.3-beta-1

package/dist/MessageRender/index.js

@@ -5,14 +5,23 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import './index.less';
 import { View } from '@ray-js/components';
 import React, { useState } from 'react';
+import { ChatMessageStatus } from '@ray-js/t-agent';
 import TileRender from '../TileRender';
 import { useChatAgent, useOnEvent } from '../hooks';
+import LazyItem from '../LazyScrollView/LazyItem/index.js';
+import { objectsId } from '../utils/object';
+import { useStableCallback } from '../hooks/useStableCallback';
 export default function MessageRender(_ref) {
   let {
     message,
     isLatestMessage,
     side,
-    showSelect
+    showSelect,
+    notifyHeightChanged,
+    scrollViewId = '',
+    index,
+    onShowChange,
+    show = true
   } = _ref;
   const {
     id,
@@ -32,36 +41,59 @@ export default function MessageRender(_ref) {
       setIsSelected(!!(value !== null && value !== void 0 && value.includes(id)));
     }
   });
+  const [_tick, setTick] = useState(() => "".concat(Math.random()));
+  const _notifyHeightChanged = useStableCallback(() => {
+    notifyHeightChanged();
+    setTick("".concat(Math.random()));
+  });
+  const tick = objectsId(message, _tick);
   if (tiles.length === 0) {
-    return /*#__PURE__*/React.createElement(View, {
+    return /*#__PURE__*/React.createElement(LazyItem, {
+      scrollViewId: scrollViewId,
+      itemId: id,
       key: id,
+      update: tick,
+      index: index,
+      ready: message.status === ChatMessageStatus.FINISH,
       className: "t-agent-message-list-row-empty t-agent-message-list-row-".concat(side)
     });
   }
-  return /*#__PURE__*/React.createElement(View, {
-    key: id,
-    className: "t-agent-message-list-row-container",
-    onClick: () => {
-      if (showSelect) {
-        const prev = agent.session.get("UIRay.multiSelect.selected") || [];
-        isSelected ? agent.session.set("UIRay.multiSelect.selected", prev.filter(i => i !== id)) : agent.session.set("UIRay.multiSelect.selected", [...prev, id]);
-      }
-    }
-  }, showSelect && /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-list-row-check"
+  const children = [showSelect ? /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-list-row-check",
+    key: "checkbox"
   }, /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list-checkbox-container ".concat(isSelected ? 't-agent-message-list-checkbox-selected' : '')
   }, /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list-checkbox-check"
-  }))), /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-list-row t-agent-message-list-row-".concat(side)
+  }))) : null, /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-list-row t-agent-message-list-row-".concat(side),
+    key: "tiles"
   }, tiles.map(tile => {
     return /*#__PURE__*/React.createElement(TileRender, {
       tile: tile,
       message: message,
       side: side,
       key: tile.id,
-      isLatestMessage: isLatestMessage
+      isLatestMessage: isLatestMessage,
+      notifyHeightChanged: _notifyHeightChanged
     });
-  })));
+  }))];
+  return /*#__PURE__*/React.createElement(LazyItem, {
+    key: id,
+    itemId: id,
+    index: index,
+    className: "t-agent-message-list-row-container",
+    update: tick,
+    scrollViewId: scrollViewId,
+    bindshow: event => {
+      onShowChange === null || onShowChange === void 0 || onShowChange(event.detail.show);
+    },
+    ready: message.status === ChatMessageStatus.FINISH,
+    bindclick: () => {
+      if (showSelect) {
+        const prev = agent.session.get("UIRay.multiSelect.selected") || [];
+        isSelected ? agent.session.set("UIRay.multiSelect.selected", prev.filter(i => i !== id)) : agent.session.set("UIRay.multiSelect.selected", [...prev, id]);
+      }
+    }
+  }, show && children);
 }

package/dist/MessageRender/index.less

@@ -5,15 +5,17 @@
 .t-agent-message-list-row-check {
   display: flex;
   align-items: flex-end;
-  margin-bottom: calc(var(--t-agent-y-gap) + 24rpx);
+  padding-bottom: calc(var(--t-agent-y-gap) + 24rpx);
   margin-right: 28rpx;
 }
 
 .t-agent-message-list-row {
-  margin-bottom: var(--t-agent-y-gap);
+  padding-bottom: var(--t-agent-y-gap);
   display: flex;
   flex-direction: column;
-  flex: 1 0 auto;
+  flex: 1;
+  width: 100%;
+  min-width: 0;
 }
 
 .t-agent-message-list-row-start {

package/dist/TileRender/index.d.ts

@@ -6,6 +6,7 @@ interface Props {
     message: ChatMessageObject;
     side: 'start' | 'end' | string;
     isLatestMessage?: boolean;
+    notifyHeightChanged: () => void;
 }
-declare const _default: React.MemoExoticComponent<({ tile, message, isLatestMessage, side }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ tile, message, isLatestMessage, side, notifyHeightChanged }: Props) => React.JSX.Element>;
 export default _default;

package/dist/TileRender/index.js

@@ -1,17 +1,17 @@
 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 {
     tile,
     message,
     isLatestMessage,
-    side
+    side,
+    notifyHeightChanged
   } = _ref;
   const agent = useChatAgent();
   const emitTileEvent = useCallback(async payload => agent.emitTileEvent(tile.id, payload), [agent, tile.id]);
-  const notifyHeightChanged = useNotifyHeightChanged();
   const {
     renderTileAs
   } = useRenderOptions();

package/dist/contexts.d.ts

@@ -13,15 +13,11 @@ declare const SharedProvider: ({ value, children }: import("react").PropsWithChi
         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) => {
+}>) => import("react").JSX.Element, useSharedState: <K extends "agent" | "messages" | "keyboardHeight" | "renderOptions">(key: K) => {
     agent: UIChatAgent;
     messages: ChatMessageObject[];
     keyboardHeight: number;
     renderOptions: RenderOptions;
-    notifyHeightChanged: () => void;
-    tickValue: number;
 }[K];
 export { SharedProvider, useSharedState };

package/dist/hooks/context.d.ts

@@ -1,8 +1,6 @@
 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 useRenderOptions: () => import("../types").RenderOptions;
 export declare const useKeyboardHeight: () => number;

package/dist/hooks/context.js

@@ -4,12 +4,6 @@ import { TilePropsContext, useSharedState } from '../contexts';
 export const useChatAgent = () => {
   return useSharedState('agent');
 };
-export const useTick = () => {
-  return useSharedState('tickValue');
-};
-export const useNotifyHeightChanged = () => {
-  return useSharedState('notifyHeightChanged');
-};
 export const useAgentMessage = () => {
   return useSharedState('messages');
 };

package/dist/tiles/BubbleTile/index.js

@@ -113,7 +113,8 @@ const BubbleTile = props => {
       tile: t,
       message: message,
       key: t.id,
-      isLatestMessage: isLatestMessage
+      isLatestMessage: isLatestMessage,
+      notifyHeightChanged: props.notifyHeightChanged
     }));
   })(), /*#__PURE__*/React.createElement(LoadingIndicator, {
     status: status

package/dist/tiles/CardTile/index.less

@@ -1,3 +1,3 @@
 .t-agent-card-tile {
-
+  width: 100%;
 }

package/dist/tiles/ExecuteCardTile/index.d.ts

@@ -1,17 +1,10 @@
 import React from 'react';
 import './index.less';
 import { TileProps } from '../../types';
-export declare enum SceneType {
-    EXECUTE = 1,
-    AUTO = 2
-}
-type DeviceInfoItem = any;
-type SceneInfoItem = any;
-type ChangeInfoItem = any;
+import { ChangeInfoItem, DeviceInfoItem, SceneInfoItem } from '../types';
 export interface ExecuteCardTileData {
     deviceInfo: DeviceInfoItem[];
     sceneInfo: SceneInfoItem[];
     deviceShareInfo: ChangeInfoItem[];
 }
 export default function ExecuteCardTile(props: TileProps<ExecuteCardTileData>): React.JSX.Element | null;
-export {};

package/dist/tiles/ExecuteCardTile/index.js

@@ -4,23 +4,13 @@ import "core-js/modules/esnext.iterator.for-each.js";
 import "core-js/modules/esnext.iterator.map.js";
 import { Image, Switch, Text, View } from '@ray-js/components';
 import React, { useMemo } from 'react';
-// import {
-//   ChangeInfoItem,
-//   DeviceInfoItem,
-//   SceneInfoItem,
-//   SceneType,
-// } from '@ray-js/t-agent-plugin-assistant';
 import './index.less';
 import { triggerRule } from '@ray-js/ray';
 import { routeScene } from '../../utils';
 import lockPng from '../OperateCardTile/lock.png';
 import bookmark from './bookmark.png';
 import { useTranslate } from '../../hooks';
-export let SceneType = /*#__PURE__*/function (SceneType) {
-  SceneType[SceneType["EXECUTE"] = 1] = "EXECUTE";
-  SceneType[SceneType["AUTO"] = 2] = "AUTO";
-  return SceneType;
-}({});
+import { SceneType } from '../types';
 export default function ExecuteCardTile(props) {
   const {
     tile
@@ -101,7 +91,7 @@ export default function ExecuteCardTile(props) {
     } = card;
     if (intent === 'shareDevice') {
       ty.router({
-        url: "tuyaSmart://thing_single_device_share?devId=".concat(deviceId),
+        url: "thingSmart://thing_single_device_share?devId=".concat(deviceId),
         fail(err) {
           console.error('router thing_single_device_share fail', err);
         }
@@ -130,7 +120,7 @@ export default function ExecuteCardTile(props) {
       sceneId
     } = card;
     ty.router({
-      url: "tuyaSmart://editScene?sceneId=".concat(sceneId, "&biz_type=ai_smart&action=delete"),
+      url: "thingSmart://editScene?sceneId=".concat(sceneId, "&biz_type=ai_smart&action=delete"),
       fail: console.error
     });
   };
@@ -171,9 +161,10 @@ export default function ExecuteCardTile(props) {
   return /*#__PURE__*/React.createElement(View, {
     className: "t-agent-execute-card-tile"
   }, cards.map(card => {
+    const key = "".concat(card.displayType, "-").concat(card.deviceId || card.sceneId);
     return /*#__PURE__*/React.createElement(View, {
       className: "t-agent-execute-card-tile-card",
-      key: card.id
+      key: key
     }, card.displayType === 'device' && /*#__PURE__*/React.createElement(View, {
       className: "t-agent-execute-card-tile-device",
       onClick: () => handleTap(card)
@@ -181,7 +172,9 @@ export default function ExecuteCardTile(props) {
       src: card.icon,
       mode: "widthFix",
       className: "t-agent-execute-card-tile-device-icon"
-    }), /*#__PURE__*/React.createElement(View, null, card.name)), card.displayType === 'energy' && /*#__PURE__*/React.createElement(View, {
+    }), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-device-title"
+    }, card.name)), card.displayType === 'energy' && /*#__PURE__*/React.createElement(View, {
       className: "t-agent-execute-card-tile-energy",
       onClick: () => handleTap(card)
     }, /*#__PURE__*/React.createElement(Image, {

package/dist/tiles/ExecuteCardTile/index.less

@@ -1,154 +1,180 @@
 .t-agent-execute-card-tile {
-  .t-agent-execute-card-tile-card {
-    .t-agent-execute-card-tile-device {
-      display: flex;
-      align-items: center;
-      min-height: 44px;
-      background-color: var(--app-B1);
-      padding: 12px;
-      border-radius: var(--app-C1_1);
-      margin-top: 8px;
-
-      .t-agent-execute-card-tile-device-icon {
-        width: 40px;
-        height: 40px;
-        margin-right: 10px;
-      }
-    }
-
-    .t-agent-execute-card-tile-energy {
-      display: flex;
-      align-items: center;
-      min-height: 44px;
-      background-color: var(--app-B1);
-      padding: 12px;
-      border-radius: var(--app-C1_1);
-      margin-top: 8px;
-
-      .t-agent-execute-card-tile-energy-icon {
-        width: 32px;
-        height: 32px;
-        border-radius: 4px;
-      }
-
-      .t-agent-execute-card-tile-energy-content {
-        margin-left: 8px;
-        flex: 1;
-        .t-agent-execute-card-tile-energy-content-title {
-          font-size: 16px;
-          color: var(--app-C1);
-          line-height: 22px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-        }
-
-        .t-agent-execute-card-tile-energy-content-desc {
-          font-size: 13px;
-          color: var(--app-B1-N3);
-          line-height: 18px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-        }
-      }
-    }
-
-    .t-agent-execute-card-tile-scene {
-      min-height: 44px;
-      background-color: var(--app-B1);
-      display: flex;
-      align-items: center;
-      padding: 12px;
-      border-radius: var(--app-C1_1);
-      margin-top: 8px;
-
-      .t-agent-execute-card-tile-scene-icon-wrapper {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 32px;
-        height: 32px;
-        border-radius: 10px;
-        margin-right: 8px;
-        .t-agent-execute-card-tile-scene-icon {
-          width: 20px;
-          height: 20px;
-          filter: brightness(100);
-        }
-      }
-
-      .t-agent-execute-card-tile-scene-name {
-        flex: 1;
-        font-size: 16px;
-        line-height: 22px;
-        color: var(--app-C1);
-      }
-
-      .t-agent-execute-card-tile-scene-switch {
-        margin-left: auto;
-      }
-
-      .t-agent-execute-card-tile-scene-delete {
-        display: flex;
-        align-items: center;
-        height: 24px;
-        padding-right: 12px;
-        padding-left: 12px;
-        color: var(--app-M2);
-        background: #fff;
-        border-radius: var(--app-C1_1);
-        font-size: 12px;
-      }
-    }
-
-    .t-agent-execute-card-tile-execute {
-      display: flex;
-      align-items: center;
-      min-height: 44px;
-      background-color: #e36468;
-      padding: 12px;
-      border-radius: var(--app-C1_1);
-      margin-top: 8px;
-
-      &.t-agent-execute-card-tile-execute-disabled {
-        opacity: 0.3;
-      }
-
-      .t-agent-execute-card-tile-execute-icon {
-        width: 40px;
-        height: 40px;
-        margin-right: 10px;
-      }
-
-      .t-agent-execute-card-tile-execute-name {
-        font-size: 16px;
-        line-height: 22px;
-        color: #ffffff;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
-
-      .t-agent-execute-card-tile-execute-button {
-        margin-left: auto;
-        line-height: 18px;
-        padding: 3px 12px;
-        font-size: 12px;
-        font-weight: 600;
-        color: #e36468;
-        background-color: #ffffff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 18px;
-      }
-    }
+
+}
+
+.t-agent-execute-card-tile-card {
+
+}
+
+.t-agent-execute-card-tile-device {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  background-color: var(--app-B1);
+  padding: 12px;
+  border-radius: var(--app-C1_1);
+  margin-top: 8px;
+}
+
+.t-agent-execute-card-tile-device-icon {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.t-agent-execute-card-tile-device-title {
+  font-size: 16px;
+  line-height: 22px;
+  color: var(--app-C1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: normal;
+  min-width: 200rpx;
+  overflow-wrap: break-word;
+}
+
+.t-agent-execute-card-tile-energy {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  background-color: var(--app-B1);
+  padding: 12px;
+  border-radius: var(--app-C1_1);
+  margin-top: 8px;
+}
+
+.t-agent-execute-card-tile-energy-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+}
+
+.t-agent-execute-card-tile-energy-content {
+  margin-left: 8px;
+  flex: 1;
+}
+
+.t-agent-execute-card-tile-energy-content-title {
+  font-size: 16px;
+  color: var(--app-C1);
+  line-height: 22px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.t-agent-execute-card-tile-energy-content-desc {
+  font-size: 13px;
+  color: var(--app-B1-N3);
+  line-height: 18px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.t-agent-execute-card-tile-scene {
+  min-height: 44px;
+  background-color: var(--app-B1);
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-radius: var(--app-C1_1);
+  margin-top: 8px;
+}
+
+.t-agent-execute-card-tile-scene-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  margin-right: 8px;
+}
+
+.t-agent-execute-card-tile-scene-icon {
+  width: 20px;
+  height: 20px;
+  filter: brightness(100);
+}
+
+.t-agent-execute-card-tile-scene-name {
+  flex: 1;
+  font-size: 16px;
+  line-height: 22px;
+  color: var(--app-C1);
+}
+
+.t-agent-execute-card-tile-scene-switch {
+  margin-left: auto;
+}
+
+.t-agent-execute-card-tile-scene-delete {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  padding-right: 12px;
+  padding-left: 12px;
+  color: var(--app-M2);
+  background: #fff;
+  border-radius: var(--app-C1_1);
+  font-size: 12px;
+}
+
+.t-agent-execute-card-tile-execute {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  background-color: #e36468;
+  padding: 12px;
+  border-radius: var(--app-C1_1);
+  margin-top: 8px;
+
+  &.t-agent-execute-card-tile-execute-disabled {
+    opacity: 0.3;
   }
 }
+
+.t-agent-execute-card-tile-execute-icon {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.t-agent-execute-card-tile-execute-name {
+  font-size: 16px;
+  line-height: 22px;
+  color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  min-width: 200rpx;
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+
+.t-agent-execute-card-tile-execute-button {
+  margin-left: auto;
+  line-height: 18px;
+  padding: 3px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #e36468;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 18px;
+  flex-shrink: 0;
+}

package/dist/tiles/OperateCardTile/Expand.d.ts

@@ -18,6 +18,7 @@ interface ExpandProps {
     operations?: IOperations;
     tapDevice?: (e: any) => void;
     tapScene?: (e: any) => void;
+    onChangeTab?: (key: string) => void;
 }
-export default function Expand({ operations, tapDevice, tapScene, }: ExpandProps): React.JSX.Element;
+export default function Expand({ operations, tapDevice, tapScene, onChangeTab, }: ExpandProps): React.JSX.Element;
 export {};

package/dist/tiles/OperateCardTile/Expand.js

@@ -30,7 +30,8 @@ export default function Expand(_ref) {
       more: []
     },
     tapDevice,
-    tapScene
+    tapScene,
+    onChangeTab
   } = _ref;
   const t = useTranslate();
   const deviceCount = (((_operations$device = operations.device) === null || _operations$device === void 0 ? void 0 : _operations$device.length) || 0) + (((_operations$moreDevic = operations.moreDevice) === null || _operations$moreDevic === void 0 ? void 0 : _operations$moreDevic.length) || 0);
@@ -170,7 +171,8 @@ export default function Expand(_ref) {
     className: "t-agent-expand-container"
   }, tabs.length > 0 ? /*#__PURE__*/React.createElement(Tabs, {
     tabs: tabs,
-    defaultActiveKey: tabs[0].key
+    defaultActiveKey: tabs[0].key,
+    onChange: onChangeTab
   }) : /*#__PURE__*/React.createElement(View, {
     className: "t-agent-expand-empty"
   }, /*#__PURE__*/React.createElement(Text, null, t('t-agent.expand.no.details'))));