@ray-js/t-agent-ui-ray 0.1.0-beta-3 → 0.1.0-beta-4

package/dist/ChatContainer/index.js

@@ -49,8 +49,7 @@ export default function ChatContainer(props) {
       plugins: agent.plugins,
       pushInputBlocks: agent.pushInputBlocks,
       emitTileEvent: agent.emitTileEvent,
-      removeMessage: agent.removeMessage,
-      removeMessageByChannel: agent.removeMessageByChannel
+      removeMessage: agent.removeMessage
     };
   }, [agent]);
   useEffect(() => {

package/dist/contexts.d.ts

@@ -9,7 +9,7 @@ export declare const MessageContext: import("react").Context<{
 }>;
 export declare const RenderContext: import("react").Context<RenderOptions>;
 export type UIChatSession = Pick<ChatSession, 'get' | 'getData' | 'set' | 'sessionId'>;
-export type UIChatAgent = Pick<ChatAgent<UIPlugin & AssistantPlugin>, 'pushInputBlocks' | 'plugins' | 'emitTileEvent' | 'removeMessage' | 'removeMessageByChannel'> & {
+export type UIChatAgent = Pick<ChatAgent<UIPlugin & AssistantPlugin>, 'pushInputBlocks' | 'plugins' | 'emitTileEvent' | 'removeMessage'> & {
     session: UIChatSession;
 };
 export declare const ChatAgentContext: import("react").Context<UIChatAgent>;

package/dist/hooks/useLongPress.js

@@ -4,7 +4,6 @@ import "core-js/modules/esnext.iterator.for-each.js";
 import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import { useState, useEffect, useCallback } from 'react';
-import { setClipboardData, showModal, showToast, vibrateShort } from '@ray-js/ray';
 import logger from '../logger';
 import { useRenderOptions } from './context';
 import { useChatAgent } from '.';
@@ -67,10 +66,10 @@ export function useLongPress() {
               action: () => {
                 const content = getMessageContent();
                 if (content) {
-                  setClipboardData({
+                  ty.setClipboardData({
                     data: content,
                     success: () => {
-                      showToast({
+                      ty.showToast({
                         title: t('t-agent.message.copy.success'),
                         icon: 'none'
                       });
@@ -88,13 +87,13 @@ export function useLongPress() {
               label: t('t-agent.message.action.delete'),
               action: () => {
                 if (typeof agent.removeMessage === 'function') {
-                  showModal({
+                  ty.showModal({
                     title: t('t-agent.message.delete.title'),
                     content: t('t-agent.message.delete.content'),
                     success: res => {
                       if (res.confirm) {
                         agent.removeMessage(message.id);
-                        showToast({
+                        ty.showToast({
                           title: t('t-agent.message.delete.success'),
                           icon: 'none'
                         });
@@ -112,8 +111,11 @@ export function useLongPress() {
             label: t('t-agent.message.action.deleteByChannel'),
             action: () => {
               const channel = agent.session.get('AIAssistant.channel');
-              if (typeof agent.removeMessageByChannel === 'function') {
-                agent.removeMessageByChannel(channel);
+              const {
+                removeMessageByChannel
+              } = agent.plugins.assistant;
+              if (typeof removeMessageByChannel === 'function') {
+                removeMessageByChannel(channel);
               }
             }
           });
@@ -123,7 +125,7 @@ export function useLongPress() {
             key: 'like',
             label: t('t-agent.message.action.like'),
             action: () => {
-              showToast({
+              ty.showToast({
                 title: t('t-agent.message.like.success'),
                 icon: 'none'
               });
@@ -135,7 +137,7 @@ export function useLongPress() {
             key: 'unlike',
             label: t('t-agent.message.action.unlike'),
             action: () => {
-              showToast({
+              ty.showToast({
                 title: t('t-agent.message.unlike.success'),
                 icon: 'none'
               });
@@ -195,7 +197,7 @@ export function useLongPress() {
       isClosing: false,
       menuPosition: adjustedPosition
     });
-    vibrateShort({
+    ty.vibrateShort({
       type: 'light'
     });
     if (e.origin && e.origin.stopPropagation) {

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ChangeInfoItem, DeviceInfoItem, SceneInfoItem } from '@ray-js/t-agent-plugin-assistant';
+import './index.less';
+import { TileProps } from '../../types';
+export interface ExecuteCardTileData {
+    deviceInfo: DeviceInfoItem[];
+    sceneInfo: SceneInfoItem[];
+    deviceShareInfo: ChangeInfoItem[];
+}
+export default function ExecuteCardTile(props: TileProps<ExecuteCardTileData>): React.JSX.Element | null;

package/dist/tiles/ExecuteCardTile/index.js

@@ -0,0 +1,233 @@
+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/esnext.iterator.map.js";
+import { Image, Switch, Text, View } from '@ray-js/components';
+import React, { useMemo } from 'react';
+import { 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 { useRenderOptions } from '../../hooks';
+export default function ExecuteCardTile(props) {
+  const {
+    tile
+  } = props;
+  const {
+    deviceInfo,
+    sceneInfo,
+    deviceShareInfo
+  } = tile.data || {};
+  const {
+    i18nTranslate: t
+  } = useRenderOptions();
+  const {
+    cards
+  } = useMemo(() => {
+    const cards = [];
+    if (deviceInfo !== null && deviceInfo !== void 0 && deviceInfo.length) {
+      deviceInfo.forEach(i => {
+        const {
+          intent
+        } = i;
+        switch (intent) {
+          case 'controlDevice':
+            break;
+          default:
+            cards.push(_objectSpread(_objectSpread({}, i), {}, {
+              displayType: 'device'
+            }));
+            break;
+        }
+      });
+    }
+    if (sceneInfo !== null && sceneInfo !== void 0 && sceneInfo.length) {
+      sceneInfo.forEach(i => {
+        if (i.valid == null) {
+          i.valid = true;
+        }
+        const {
+          intent,
+          type
+        } = i;
+        const displayType = type === SceneType.EXECUTE ? 'execute' : 'scene';
+        switch (intent) {
+          case 'queryScene':
+          case 'updateScene':
+            cards.push(_objectSpread(_objectSpread({}, i), {}, {
+              displayType
+            }));
+            break;
+          case 'deleteScene':
+            if (!i.success) {
+              cards.push(_objectSpread(_objectSpread({}, i), {}, {
+                displayType
+              }));
+            }
+            break;
+          default:
+            break;
+        }
+      });
+    }
+    if (deviceShareInfo !== null && deviceShareInfo !== void 0 && deviceShareInfo.length) {
+      deviceShareInfo.forEach(i => {
+        cards.push(_objectSpread(_objectSpread({}, i), {}, {
+          displayType: 'device'
+        }));
+      });
+    }
+    return {
+      cards
+    };
+  }, [deviceInfo, sceneInfo]);
+  if (!cards.length) {
+    return null;
+  }
+  const handleTap = card => {
+    const {
+      deviceId,
+      intent
+    } = card;
+    if (intent === 'shareDevice') {
+      ty.router({
+        url: "tuyaSmart://thing_single_device_share?devId=".concat(deviceId),
+        fail(err) {
+          console.error('router thing_single_device_share fail', err);
+        }
+      });
+      return;
+    }
+    ty.openPanel({
+      deviceId,
+      fail() {
+        ty.showToast({
+          title: t('t-agent.execute-card-tile.execution.failed'),
+          icon: 'error'
+        });
+      }
+    });
+  };
+  const changeScene = (e, card) => {
+    const {
+      sceneId
+    } = card;
+  };
+  const deleteScene = (e, card) => {
+    var _e$origin;
+    e === null || e === void 0 || (_e$origin = e.origin) === null || _e$origin === void 0 || _e$origin.stopPropagation();
+    const {
+      sceneId
+    } = card;
+    ty.router({
+      url: "tuyaSmart://editScene?sceneId=".concat(sceneId, "&biz_type=ai_smart&action=delete"),
+      fail: console.error
+    });
+  };
+  const enterScene = card => {
+    const {
+      sceneId,
+      valid
+    } = card;
+    if (!valid) {
+      ty.showToast({
+        title: t('t-agent.execute-card-tile.scene.invalid'),
+        image: '/assets/images/notice.png'
+      });
+      return;
+    }
+    routeScene(sceneId);
+  };
+  const execute = (e, card) => {
+    var _e$origin2;
+    e === null || e === void 0 || (_e$origin2 = e.origin) === null || _e$origin2 === void 0 || _e$origin2.stopPropagation();
+    const {
+      sceneId
+    } = card;
+    triggerRule({
+      ruleId: sceneId
+    }).then(() => {
+      ty.showToast({
+        title: t('t-agent.execute-card-tile.execution.success'),
+        icon: 'success'
+      });
+    }).catch(() => {
+      ty.showToast({
+        title: t('t-agent.execute-card-tile.execution.failed'),
+        icon: 'error'
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-execute-card-tile"
+  }, cards.map(card => {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-card"
+    }, card.displayType === 'device' && /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-device",
+      onClick: () => handleTap(card)
+    }, /*#__PURE__*/React.createElement(Image, {
+      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, {
+      className: "t-agent-execute-card-tile-energy",
+      onClick: () => handleTap(card)
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: card.icon,
+      mode: "widthFix",
+      className: "t-agent-execute-card-tile-energy-icon"
+    }), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-energy-content"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-energy-content-title"
+    }, card.name), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-energy-content-desc"
+    }, card.desc))), card.displayType === 'scene' && /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-scene",
+      onClick: () => enterScene(card)
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-scene-icon-wrapper",
+      style: {
+        backgroundColor: "#".concat(card.displayColor)
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: card.icon || bookmark,
+      mode: "widthFix",
+      className: "t-agent-execute-card-tile-scene-icon"
+    })), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-scene-name"
+    }, card.name, card.room && /*#__PURE__*/React.createElement(Text, null, "-", card.room)), card.valid && card.intent !== 'deleteScene' ? /*#__PURE__*/React.createElement(View, {
+      onClick: e => {
+        var _e$origin3;
+        return e === null || e === void 0 || (_e$origin3 = e.origin) === null || _e$origin3 === void 0 ? void 0 : _e$origin3.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement(Switch, {
+      checked: card.enabled,
+      onChange: e => changeScene(e, card)
+    })) : /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-scene-delete",
+      onClick: e => deleteScene(e, card)
+    }, t('t-agent.execute-card-tile.delete'))), card.displayType === 'execute' && /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-execute ".concat(!card.valid ? 't-agent-execute-card-tile-execute-disabled' : ''),
+      style: {
+        backgroundColor: "#".concat(card.displayColor)
+      },
+      onClick: () => enterScene(card)
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: card.icon || lockPng,
+      mode: "widthFix",
+      className: "t-agent-execute-card-tile-execute-icon"
+    }), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-execute-name"
+    }, card.name, card.room && /*#__PURE__*/React.createElement(Text, null, "-", card.room)), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-execute-button",
+      onClick: e => execute(e, card),
+      style: {
+        color: "#".concat(card.displayColor)
+      }
+    }, t('t-agent.execute-card-tile.execute'))));
+  }));
+}

package/dist/tiles/ExecuteCardTile/index.less

@@ -0,0 +1,154 @@
+.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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DeviceInfoItem, SceneInfoItem, ChangeInfoItem } from '@ray-js/t-agent-plugin-assistant';
+import './Expand.less';
+export interface IOperations {
+    device: DeviceInfoItem[];
+    scene: SceneInfoItem[];
+    moreDevice: ChangeInfoItem[];
+    moreScene: ChangeInfoItem[];
+    more: ChangeInfoItem[];
+}
+interface ExpandProps {
+    operations?: IOperations;
+    tapDevice?: (e: any) => void;
+    tapScene?: (e: any) => void;
+}
+export default function Expand({ operations, tapDevice, tapScene, }: ExpandProps): React.JSX.Element;
+export {};

package/dist/tiles/OperateCardTile/Expand.js

@@ -0,0 +1,169 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { View, Text, Image } from '@ray-js/components';
+import React from 'react';
+import { SceneType } from '@ray-js/t-agent-plugin-assistant';
+import Tabs from './Tabs';
+import './Expand.less';
+import bookmark from '../ExecuteCardTile/bookmark.png';
+import lockPng from './lock.png';
+import { useRenderOptions } from '../../hooks';
+import { formatMessage } from '../../utils';
+export default function Expand(_ref) {
+  var _operations$device, _operations$moreDevic, _operations$scene, _operations$moreScene, _operations$more;
+  let {
+    operations = {
+      device: [],
+      scene: [],
+      moreDevice: [],
+      moreScene: [],
+      more: []
+    },
+    tapDevice,
+    tapScene
+  } = _ref;
+  const {
+    i18nTranslate: t
+  } = useRenderOptions();
+  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);
+  const sceneCount = (((_operations$scene = operations.scene) === null || _operations$scene === void 0 ? void 0 : _operations$scene.length) || 0) + (((_operations$moreScene = operations.moreScene) === null || _operations$moreScene === void 0 ? void 0 : _operations$moreScene.length) || 0);
+  const moreCount = ((_operations$more = operations.more) === null || _operations$more === void 0 ? void 0 : _operations$more.length) || 0;
+  const tabs = [];
+  if (deviceCount > 0) {
+    var _operations$device2, _operations$moreDevic2;
+    tabs.push({
+      key: 'device',
+      title: t('t-agent.expand.tab.device'),
+      badge: deviceCount,
+      content: /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-device-list"
+      }, (_operations$device2 = operations.device) === null || _operations$device2 === void 0 ? void 0 : _operations$device2.map(device => {
+        return /*#__PURE__*/React.createElement(View, {
+          key: device.deviceId,
+          className: "t-agent-expand-device-item",
+          onClick: () => tapDevice === null || tapDevice === void 0 ? void 0 : tapDevice({
+            currentTarget: {
+              dataset: {
+                id: device.deviceId
+              }
+            }
+          })
+        }, /*#__PURE__*/React.createElement(Image, {
+          src: device.icon,
+          className: "t-agent-expand-device-icon"
+        }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+          className: "t-agent-expand-device-info"
+        }, /*#__PURE__*/React.createElement(View, {
+          className: "t-agent-expand-device-name"
+        }, device.name), device.room && /*#__PURE__*/React.createElement(Text, {
+          className: "t-agent-expand-device-room"
+        }, "-", device.room)), /*#__PURE__*/React.createElement(Text, {
+          className: "t-agent-expand-device-status"
+        }, device.success ? t('t-agent.expand.execution.success') : t('t-agent.expand.execution.failed'))));
+      }), (_operations$moreDevic2 = operations.moreDevice) === null || _operations$moreDevic2 === void 0 ? void 0 : _operations$moreDevic2.map(device => /*#__PURE__*/React.createElement(View, {
+        key: device.id,
+        className: "t-agent-expand-device-item",
+        onClick: () => tapDevice === null || tapDevice === void 0 ? void 0 : tapDevice({
+          currentTarget: {
+            dataset: {
+              id: device.id
+            }
+          }
+        })
+      }, /*#__PURE__*/React.createElement(Image, {
+        src: bookmark,
+        className: "t-agent-expand-device-icon"
+      }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-device-info"
+      }, /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-device-name"
+      }, formatMessage(t, 't-agent.expand.device.rename', {
+        oldName: device.fromData,
+        newName: device.toData
+      }))), /*#__PURE__*/React.createElement(Text, {
+        className: "t-agent-expand-device-status"
+      }, device.success ? t('t-agent.expand.execution.success') : t('t-agent.expand.execution.failed'))))))
+    });
+  }
+  if (sceneCount > 0) {
+    var _operations$scene2, _operations$moreScene2;
+    tabs.push({
+      key: 'scene',
+      title: t('t-agent.expand.tab.scene'),
+      badge: sceneCount,
+      content: /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-scene-list"
+      }, (_operations$scene2 = operations.scene) === null || _operations$scene2 === void 0 ? void 0 : _operations$scene2.map(scene => {
+        const isExecuteScene = scene.type === SceneType.EXECUTE;
+        const icon = isExecuteScene ? lockPng : bookmark;
+        return /*#__PURE__*/React.createElement(View, {
+          key: scene.sceneId,
+          className: "t-agent-expand-scene-item",
+          onClick: () => tapScene === null || tapScene === void 0 ? void 0 : tapScene({
+            currentTarget: {
+              dataset: {
+                id: scene.sceneId
+              }
+            }
+          })
+        }, /*#__PURE__*/React.createElement(Image, {
+          src: scene.icon || icon,
+          className: "t-agent-expand-scene-icon"
+        }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+          className: "t-agent-expand-scene-name"
+        }, isExecuteScene ? t('t-agent.expand.scene.one-click') : t('t-agent.expand.scene.auto'), ' ', scene.name), /*#__PURE__*/React.createElement(Text, {
+          className: "t-agent-expand-scene-status"
+        }, scene.success ? t('t-agent.expand.execution.success') : t('t-agent.expand.execution.failed'))));
+      }), (_operations$moreScene2 = operations.moreScene) === null || _operations$moreScene2 === void 0 ? void 0 : _operations$moreScene2.map(scene => /*#__PURE__*/React.createElement(View, {
+        key: scene.id,
+        className: "t-agent-expand-scene-item",
+        onClick: () => tapScene === null || tapScene === void 0 ? void 0 : tapScene({
+          currentTarget: {
+            dataset: {
+              id: scene.id
+            }
+          }
+        })
+      }, /*#__PURE__*/React.createElement(Image, {
+        src: bookmark,
+        className: "t-agent-expand-scene-icon"
+      }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-scene-name"
+      }, formatMessage(t, 't-agent.expand.scene.rename', {
+        oldName: scene.fromData,
+        newName: scene.toData
+      })), /*#__PURE__*/React.createElement(Text, {
+        className: "t-agent-expand-scene-status"
+      }, scene.success ? t('t-agent.expand.execution.success') : t('t-agent.expand.execution.failed'))))))
+    });
+  }
+  if (moreCount > 0) {
+    var _operations$more2;
+    tabs.push({
+      key: 'more',
+      title: t('t-agent.expand.tab.more'),
+      badge: moreCount,
+      content: /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-more-list"
+      }, (_operations$more2 = operations.more) === null || _operations$more2 === void 0 ? void 0 : _operations$more2.map(item => /*#__PURE__*/React.createElement(View, {
+        key: item.id,
+        className: "t-agent-expand-more-item"
+      }, /*#__PURE__*/React.createElement(Image, {
+        src: bookmark,
+        className: "t-agent-expand-more-icon"
+      }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-more-name"
+      }, item.desc), /*#__PURE__*/React.createElement(Text, {
+        className: "t-agent-expand-more-status"
+      }, item.success ? t('t-agent.expand.execution.success') : t('t-agent.expand.execution.failed'))))))
+    });
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-expand-container"
+  }, tabs.length > 0 ? /*#__PURE__*/React.createElement(Tabs, {
+    tabs: tabs,
+    defaultActiveKey: tabs[0].key
+  }) : /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-expand-empty"
+  }, /*#__PURE__*/React.createElement(Text, null, t('t-agent.expand.no.details'))));
+}

package/dist/tiles/OperateCardTile/Expand.less

@@ -0,0 +1,135 @@
+.t-agent-expand {
+  &-container {
+    padding: 16px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    margin-top: 12px;
+  }
+
+  &-empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100px;
+    color: #999;
+  }
+
+  &-device {
+    &-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      background-color: #f5f5f5;
+      border-radius: 6px;
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    &-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      margin-right: 5px;
+    }
+
+    &-info {
+      display: flex;
+      align-items: center;
+    }
+
+    &-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-room {
+      font-size: 12px;
+      color: #666;
+      margin-left: 4px;
+    }
+
+    &-status {
+      font-size: 12px;
+      color: #0089ff;
+    }
+  }
+
+  &-scene {
+    &-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      background-color: #f5f5f5;
+      border-radius: 6px;
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    &-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      margin-right: 5px;
+    }
+
+    &-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-status {
+      font-size: 12px;
+      color: #0089ff;
+    }
+  }
+
+  &-more {
+    &-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      background-color: #f5f5f5;
+      border-radius: 6px;
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    &-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-status {
+      font-size: 12px;
+      color: #0089ff;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import './Tabs.less';
+export interface TabItem {
+    key: string;
+    title: string;
+    content: ReactNode;
+    badge?: number;
+}
+export interface TabsProps {
+    tabs: TabItem[];
+    defaultActiveKey?: string;
+    onChange?: (key: string) => void;
+    className?: string;
+}
+declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/dist/tiles/OperateCardTile/Tabs.js

@@ -0,0 +1,39 @@
+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 { View, Text } from '@ray-js/components';
+import React, { useState, useCallback } from 'react';
+import './Tabs.less';
+const Tabs = _ref => {
+  var _tabs$;
+  let {
+    tabs,
+    defaultActiveKey,
+    onChange,
+    className = ''
+  } = _ref;
+  const [activeKey, setActiveKey] = useState(defaultActiveKey || ((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key) || '');
+  const handleTabClick = useCallback(key => {
+    setActiveKey(key);
+    onChange === null || onChange === void 0 || onChange(key);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-tabs ".concat(className)
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-tabs-header"
+  }, tabs.map(tab => /*#__PURE__*/React.createElement(View, {
+    key: tab.key,
+    className: "t-agent-tabs-tab ".concat(activeKey === tab.key ? 't-agent-tabs-tab--active' : ''),
+    onClick: () => handleTabClick(tab.key)
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "t-agent-tabs-tab-title"
+  }, tab.title), tab.badge !== undefined && tab.badge > 0 && /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-tabs-tab-badge"
+  }, tab.badge)))), /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-tabs-content"
+  }, tabs.map(tab => /*#__PURE__*/React.createElement(View, {
+    key: tab.key,
+    className: "t-agent-tabs-pane ".concat(activeKey === tab.key ? 't-agent-tabs-pane--active' : 't-agent-tabs-pane--inactive')
+  }, tab.content))));
+};
+export default Tabs;

package/dist/tiles/OperateCardTile/Tabs.less

@@ -0,0 +1,72 @@
+.t-agent-tabs {
+  width: 100%;
+
+  &-header {
+    display: flex;
+    border-bottom: 1px solid #e6e6e6;
+    margin-bottom: 16px;
+  }
+
+  &-tab {
+    position: relative;
+    padding: 12px 16px;
+    margin-right: 8px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &--active {
+      color: #0089ff;
+      font-weight: 500;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #0089ff;
+      }
+    }
+
+    &-title {
+      font-size: 14px;
+    }
+
+    &-badge {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      min-width: 16px;
+      height: 16px;
+      padding: 0 4px;
+      background-color: #ff4d4f;
+      border-radius: 8px;
+      color: #fff;
+      font-size: 12px;
+      line-height: 16px;
+      text-align: center;
+    }
+  }
+
+  &-content {
+    position: relative;
+    width: 100%;
+  }
+
+  &-pane {
+    width: 100%;
+
+    &--active {
+      display: block;
+    }
+
+    &--inactive {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.less';
+import { ChangeInfoItem, DeviceInfoItem, SceneInfoItem } from '@ray-js/t-agent-plugin-assistant';
+import { TileProps } from '../../types';
+import { IOperations } from './Expand';
+export interface OperateCardTileData {
+    deviceInfo: DeviceInfoItem[];
+    sceneInfo: SceneInfoItem[];
+    changeInfo: ChangeInfoItem[];
+}
+export interface OperateCardTileProps extends TileProps {
+    data: OperateCardTileData;
+    /** 自定义详情内容渲染函数 */
+    renderDetail?: (props: {
+        operations: IOperations;
+        tapDevice: (e: any) => void;
+        tapScene: (e: any) => void;
+        show: boolean;
+    }) => React.ReactNode;
+}
+export default function OperateCardTile({ data, renderDetail }: OperateCardTileProps): React.JSX.Element | null;

package/dist/tiles/OperateCardTile/index.js

@@ -0,0 +1,228 @@
+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 { Text, View } from '@ray-js/components';
+import React, { useMemo, useState } from 'react';
+import './index.less';
+import { useRenderOptions } from '../../hooks';
+import Expand from './Expand';
+import { formatMessage } from '../../utils';
+const handleDesc = (detail, t) => {
+  const {
+    device,
+    moreDevice,
+    scene,
+    moreScene,
+    more
+  } = detail;
+  const desc = [];
+  let deviceNum = device.length + moreDevice.length;
+  const sceneNum = scene.length + moreScene.length;
+  let homeNum = 0;
+  let roomNum = 0;
+  let groupNum = 0;
+  if (more.length) {
+    more.forEach(i => {
+      switch (i.type) {
+        case 'home':
+          homeNum += 1;
+          break;
+        case 'room':
+          roomNum += 1;
+          break;
+        case 'group':
+          groupNum += 1;
+          break;
+        case 'deviceRoom':
+          deviceNum += 1;
+          break;
+        default:
+          break;
+      }
+    });
+  }
+  if (deviceNum) {
+    desc.push(formatMessage(t, 't-agent.operate-card-tile.device.count', {
+      count: deviceNum
+    }));
+  }
+  if (sceneNum) {
+    desc.push(formatMessage(t, 't-agent.operate-card-tile.scene.count', {
+      count: sceneNum
+    }));
+  }
+  if (homeNum) {
+    desc.push(formatMessage(t, 't-agent.operate-card-tile.home.count', {
+      count: homeNum
+    }));
+  }
+  if (roomNum) {
+    desc.push(formatMessage(t, 't-agent.operate-card-tile.room.count', {
+      count: roomNum
+    }));
+  }
+  if (groupNum) {
+    desc.push(formatMessage(t, 't-agent.operate-card-tile.group.count', {
+      count: groupNum
+    }));
+  }
+  return formatMessage(t, 't-agent.operate-card-tile.description.format', {
+    items: desc.join(t('t-agent.operate-card-tile.description.separator'))
+  });
+};
+export default function OperateCardTile(_ref) {
+  let {
+    data,
+    renderDetail
+  } = _ref;
+  const {
+    deviceInfo = [],
+    sceneInfo = [],
+    changeInfo = []
+  } = data || {};
+  const {
+    i18nTranslate: t
+  } = useRenderOptions();
+  const [show, setShow] = useState(false);
+  const [showDetail, setShowDetail] = useState(false);
+  const tapDevice = e => {
+    const deviceId = e.currentTarget.dataset.id;
+    ty.openPanel({
+      deviceId,
+      fail: () => {
+        ty.showToast({
+          title: t('t-agent.operate-card-tile.open.device.failed'),
+          icon: 'error'
+        });
+      }
+    });
+  };
+  const tapScene = e => {
+    const sceneId = e.currentTarget.dataset.id;
+    ty.router({
+      url: "tuyaSmart://editScene?sceneId=".concat(sceneId, "&biz_type=ai_smart&action=edit"),
+      fail: () => {
+        ty.showToast({
+          title: t('t-agent.operate-card-tile.open.scene.failed'),
+          icon: 'error'
+        });
+      }
+    });
+  };
+  const {
+    operations
+  } = useMemo(() => {
+    let isShow = show;
+    const operations = {
+      device: [],
+      scene: [],
+      moreDevice: [],
+      moreScene: [],
+      more: []
+    };
+    if (deviceInfo !== null && deviceInfo !== void 0 && deviceInfo.length) {
+      deviceInfo.forEach(i => {
+        const {
+          intent
+        } = i;
+        switch (intent) {
+          case 'controlDevice':
+            isShow = true;
+            operations.device.push(i);
+            break;
+          default:
+            break;
+        }
+      });
+    }
+    if (sceneInfo !== null && sceneInfo !== void 0 && sceneInfo.length) {
+      sceneInfo.forEach(i => {
+        if (i.valid == null) {
+          i.valid = true;
+        }
+        const {
+          intent
+        } = i;
+        switch (intent) {
+          case 'queryScene':
+          case 'updateScene':
+            break;
+          case 'deleteScene':
+            if (i.success) {
+              isShow = true;
+              operations.scene.push(i);
+            }
+            break;
+          default:
+            isShow = true;
+            operations.scene.push(_objectSpread(_objectSpread({}, i), {}, {
+              displayType: 'execute'
+            }));
+            break;
+        }
+      });
+    }
+    if (changeInfo !== null && changeInfo !== void 0 && changeInfo.length) {
+      isShow = true;
+      changeInfo.forEach(i => {
+        switch (i.type) {
+          case 'scene':
+            operations.moreScene.push(i);
+            break;
+          case 'device':
+            operations.moreDevice.push(i);
+            break;
+          default:
+            {
+              let desc = '';
+              if (i.type === 'deviceRoom') {
+                desc = formatMessage(t, 't-agent.operate-card-tile.device.move.desc', {
+                  device: i.fromData,
+                  room: i.toData
+                });
+              } else {
+                desc = formatMessage(t, 't-agent.operate-card-tile.device.rename.desc', {
+                  oldName: i.fromData,
+                  newName: i.toData
+                });
+              }
+              i.desc = desc;
+              operations.more.push(i);
+            }
+            break;
+        }
+      });
+    }
+    if (isShow && !show) {
+      setShow(true);
+    }
+    return {
+      operations
+    };
+  }, [deviceInfo, sceneInfo, changeInfo, show, t]);
+  const desc = useMemo(() => handleDesc(operations, t), [operations, t]);
+  const toggleDetail = () => {
+    setShowDetail(!showDetail);
+  };
+  if (show) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-scene-control-tile"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-scene-control-tile-summary"
+    }, t('t-agent.operate-card-tile.operation.impact'), desc, /*#__PURE__*/React.createElement(Text, {
+      className: "t-agent-scene-control-tile-summary-detail",
+      onClick: toggleDetail
+    }, showDetail ? t('t-agent.operate-card-tile.hide.details') : t('t-agent.operate-card-tile.view.details'))), renderDetail && renderDetail({
+      operations,
+      tapDevice,
+      tapScene,
+      show: showDetail
+    }), showDetail && !renderDetail && /*#__PURE__*/React.createElement(Expand, {
+      operations: operations,
+      tapDevice: tapDevice,
+      tapScene: tapScene
+    }));
+  }
+  return null;
+}

package/dist/tiles/OperateCardTile/index.less

@@ -0,0 +1,18 @@
+.t-agent-scene-control-tile {
+  transition: all 0.3s ease;
+  &-summary {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding-top: 8px;
+    margin-top: 8px;
+    border-top: 1px solid var(--app-B3-N7);
+    font-size: 12px;
+    color: var(--app-B3-N3);
+    line-height: 18px;
+
+    &-detail {
+      color: var(--app-M4);
+    }
+  }
+}

package/dist/tiles/map.js

@@ -9,6 +9,8 @@ import RecommendationsTile from './RecommendationsTile';
 import CardTile from './CardTile';
 import WorkflowTile from './WorkflowTile';
 import DocumentsTile from './DocumentsTile';
+import OperateCardTile from './OperateCardTile';
+import ExecuteCardTile from './ExecuteCardTile';
 export const tileMap = {
   bubble: BubbleTile,
   image: ImageTile,
@@ -20,5 +22,7 @@ export const tileMap = {
   recommendations: RecommendationsTile,
   card: CardTile,
   workflow: WorkflowTile,
-  documents: DocumentsTile
+  documents: DocumentsTile,
+  operateCard: OperateCardTile,
+  executeCard: ExecuteCardTile
 };

package/dist/utils/formatMessage.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 用于处理多语言文本中的变量替换
+ * @param t i18n翻译函数
+ * @param key 多语言键名
+ * @param params 需要替换的变量对象，如 {name: '小明', age: 18}
+ * @returns 替换变量后的文本
+ *
+ * 使用示例：
+ * formatMessage(t, 'greet', {name: '小明'}) // 假设 'greet' 对应的文本是 "你好，{name}"，将返回 "你好，小明"
+ */
+export declare const formatMessage: (t: (key: string) => string, key: string, params?: Record<string, string | number>) => string;

package/dist/utils/formatMessage.js

@@ -0,0 +1,28 @@
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+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";
+/**
+ * 用于处理多语言文本中的变量替换
+ * @param t i18n翻译函数
+ * @param key 多语言键名
+ * @param params 需要替换的变量对象，如 {name: '小明', age: 18}
+ * @returns 替换变量后的文本
+ *
+ * 使用示例：
+ * formatMessage(t, 'greet', {name: '小明'}) // 假设 'greet' 对应的文本是 "你好，{name}"，将返回 "你好，小明"
+ */
+export const formatMessage = (t, key, params) => {
+  if (!params) {
+    return t(key);
+  }
+  let message = t(key);
+
+  // 替换所有的变量
+  Object.entries(params).forEach(_ref => {
+    let [paramKey, paramValue] = _ref;
+    message = message.replace("{".concat(paramKey, "}"), String(paramValue));
+  });
+  return message;
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export declare function routeScene(sceneId: string): void;
+export * from './formatMessage';

package/dist/utils/index.js

@@ -0,0 +1,13 @@
+export function routeScene(sceneId) {
+  ty.router({
+    url: "tuyaSmart://editScene?sceneId=".concat(sceneId, "&biz_type=ai_smart&action=edit"),
+    fail: err => {
+      console.error('router fail', sceneId, err);
+      ty.showToast({
+        title: err.errorMsg || I18n.t('execute_fail'),
+        icon: 'error'
+      });
+    }
+  });
+}
+export * from './formatMessage';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.1.0-beta-3",
+  "version": "0.1.0-beta-4",
   "author": "Tuya.inc",
   "license": "MIT",
   "private": false,
@@ -41,5 +41,5 @@
     "@types/echarts": "^4.9.22",
     "@types/markdown-it": "^14.1.1"
   },
-  "gitHead": "afafdb05637f3c9cb46ef3ef518319baa748199e"
+  "gitHead": "c637b234c10a43611ed395ce06b8d85f3f83bbce"
 }