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

package/dist/ChatContainer/index.d.ts

@@ -6,4 +6,5 @@ export default function ChatContainer<T extends ChatAgent<any>>(props: PropsWith
     createAgent: () => T;
     renderOptions?: RenderOptions;
     className?: string;
+    agentRef?: React.MutableRefObject<T>;
 }>): React.JSX.Element;

package/dist/ChatContainer/index.js

@@ -29,6 +29,9 @@ export default function ChatContainer(props) {
     }
     return agent;
   });
+  if (props.agentRef) {
+    props.agentRef.current = agent;
+  }
   const uiAgent = useMemo(() => {
     const session = {
       get: agent.session.get,
@@ -46,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/context.d.ts

@@ -8,4 +8,4 @@ export declare const useRenderOptions: () => import("..").RenderOptions;
 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("..").TileProps<any, any>;
-export declare const useSendAction: () => (tttAction: TTTAction) => void;
+export declare const useSendAction: () => (action: TTTAction) => void;

package/dist/hooks/context.js

@@ -32,9 +32,14 @@ export const useSendAction = () => {
   const {
     emitTileEvent
   } = useTileProps();
-  return useCallback(tttAction => {
+  const agent = useChatAgent();
+  const tileSendAction = useCallback(tttAction => {
     emitTileEvent({
       tttAction
     });
   }, [emitTileEvent]);
+  const uiSendAction = useCallback(action => {
+    agent.plugins.ui.emitEvent('runTTTAction', action);
+  }, [agent]);
+  return emitTileEvent ? tileSendAction : uiSendAction;
 };

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 { getSystemInfoSync, setClipboardData, showModal, showToast, vibrateShort } from '@ray-js/ray';
 import logger from '../logger';
 import { useRenderOptions } from './context';
 import { useChatAgent } from '.';
@@ -44,7 +43,7 @@ export function useLongPress() {
   });
   useEffect(() => {
     try {
-      const systemInfo = getSystemInfoSync();
+      const systemInfo = ty.getSystemInfoSync();
       setScreenSize({
         width: systemInfo.windowWidth,
         height: systemInfo.windowHeight
@@ -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/BubbleTile/index.js

@@ -10,7 +10,6 @@ import React, { useEffect, useState, useCallback, memo } from 'react';
 import { Image } from '@ray-js/ray';
 import { BubbleTileStatus, ChatMessageStatus, safeParseJSON } from '@ray-js/t-agent';
 import { getCurrentHomeInfo, submitEvaluation } from '@ray-js/t-agent-plugin-assistant';
-import { setStorage, getStorage, showToast } from '@ray-js/api';
 import TileRender from '../../TileRender';
 import noticeSvg from './notice.svg';
 import noticeWarnSvg from './notice-warn.svg';
@@ -43,7 +42,7 @@ const BubbleTile = props => {
   const [feedbackLoaded, setFeedbackLoaded] = useState(false);
   const [feedbackValue, setFeedbackValue] = useState(null);
   useEffect(() => {
-    getStorage({
+    ty.getStorage({
       key: 'latestMessageFeedbackValue',
       success: res => {
         if (res.data) {
@@ -65,7 +64,7 @@ const BubbleTile = props => {
   }, []);
   const showInfo = () => {
     if (data.info) {
-      showToast({
+      ty.showToast({
         title: data.info,
         icon: 'none'
       });

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 {};