@ray-js/t-agent-ui-ray 0.0.5-beta-1

package/dist/MessageList/index.js

@@ -0,0 +1,61 @@
+import "core-js/modules/es.array.reverse.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import './index.less';
+import { View } from '@ray-js/components';
+import React, { useMemo, useState } from 'react';
+import { ScrollView } from '@ray-js/ray';
+import MessageRender from '../MessageRender';
+import { useAgentMessage, useOnEvent } from '../hooks';
+export default function MessageList(props) {
+  const {
+    className,
+    roleSide
+  } = props;
+  const {
+    messages
+  } = useAgentMessage();
+  const [scrollAnimation, setScrollAnimation] = useState(false);
+  // 最大整数位数，用于强制滚动到底部，收到连续 scrollToBottom 时，每 10 毫秒更新一次
+  const [scrollTop, setScrollTop] = useState(() => 1000000000000000 + Math.floor(Date.now() / 10));
+
+  // 强制滚动到底部
+  useOnEvent('scrollToBottom', _ref => {
+    let {
+      animation
+    } = _ref;
+    setTimeout(() => {
+      setScrollAnimation(!!animation);
+      const top = 1000000000000000 + Math.floor(Date.now() / 10);
+      if (top !== scrollTop) {
+        setScrollTop(top);
+      }
+    }, 100);
+  });
+
+  // 使用翻转列表，让滚动和新消息出现在第一条，这样可以避免滚动到底部时的闪烁
+  const reversed = useMemo(() => [...messages].reverse(), [messages]);
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-list"
+  }, /*#__PURE__*/React.createElement(ScrollView, {
+    className: "".concat(className || '', " t-agent-message-list-scroll"),
+    scrollWithAnimation: scrollAnimation,
+    scrollTop: scrollTop,
+    refresherTriggered: false,
+    enableFlex: true,
+    scrollY: true
+  }, /*#__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';
+    }
+    return /*#__PURE__*/React.createElement(MessageRender, {
+      key: msg.id,
+      message: msg,
+      isLatestMessage: index === 0,
+      side: side
+    });
+  })));
+}

package/dist/MessageList/index.less

@@ -0,0 +1,19 @@
+.t-agent-message-list {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  background: var(--app-B1);
+  padding: 16rpx 32rpx 0;
+}
+
+.t-agent-message-list-scroll {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column-reverse;
+}
+
+.t-agent-message-list-padding {
+  flex: 1
+}

package/dist/MessageRender/index.d.ts

@@ -0,0 +1,10 @@
+import './index.less';
+import React from 'react';
+import { ChatMessageObject } from '@ray-js/t-agent';
+interface Props {
+    message: ChatMessageObject;
+    isLatestMessage: boolean;
+    side: 'start' | 'end';
+}
+export default function MessageRender({ message, isLatestMessage, side }: Props): React.JSX.Element;
+export {};

package/dist/MessageRender/index.js

@@ -0,0 +1,34 @@
+import "core-js/modules/esnext.iterator.map.js";
+import './index.less';
+import { View } from '@ray-js/components';
+import React from 'react';
+import TileRender from '../TileRender';
+export default function MessageRender(_ref) {
+  let {
+    message,
+    isLatestMessage,
+    side
+  } = _ref;
+  const {
+    id,
+    tiles
+  } = message;
+  if (tiles.length === 0) {
+    return /*#__PURE__*/React.createElement(View, {
+      key: id,
+      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 t-agent-message-list-row-".concat(side)
+  }, tiles.map(tile => {
+    return /*#__PURE__*/React.createElement(TileRender, {
+      tile: tile,
+      message: message,
+      side: side,
+      key: tile.id,
+      isLatestMessage: isLatestMessage
+    });
+  }));
+}

package/dist/MessageRender/index.less

@@ -0,0 +1,14 @@
+.t-agent-message-list-row {
+  margin-bottom: var(--t-agent-y-gap);
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+}
+
+.t-agent-message-list-row-start {
+  align-items: flex-start;
+}
+
+.t-agent-message-list-row-end {
+  align-items: flex-end;
+}

package/dist/PrivateImage/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ImageProps } from '@ray-js/components/lib/Image/props';
+interface PrivateImageRef {
+}
+declare const PrivateImage: React.ForwardRefExoticComponent<ImageProps & {
+    bizType: string;
+} & React.RefAttributes<PrivateImageRef>>;
+export default PrivateImage;

package/dist/PrivateImage/index.js

@@ -0,0 +1,113 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["src", "bizType"];
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useMemo, useRef, useState } from 'react';
+import { Image, View } from '@ray-js/ray';
+import { getUrlByCloudKey, isLinkExpired, parseCloudKey, isFullLink } from '@ray-js/t-agent-plugin-assistant';
+import logger from '../logger';
+const PrivateImage = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      src,
+      bizType
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const [_tick, tick] = useState(Math.random());
+  const {
+    expired,
+    url
+  } = useMemo(() => {
+    if (!src) {
+      return {
+        expired: true,
+        url: src
+      };
+    }
+    // 初始是否过期，如果没过期，直接使用
+    if (!isLinkExpired(src)) {
+      return {
+        expired: false,
+        url: src
+      };
+    }
+
+    // 过期了尝试去缓存里取一下 url
+    const url = getUrlByCloudKey(src);
+    if (url) {
+      // 获取 url，如果获取的 url 还是过期的，那就是真的过期了
+      if (isLinkExpired(url)) {
+        return {
+          expired: true,
+          url: src
+        };
+      }
+      return {
+        expired: false,
+        url
+      };
+    }
+    // 没获取到，就是真的过期了
+    return {
+      expired: true,
+      url: src
+    };
+  }, [src, _tick, bizType]);
+  const [loading, setLoading] = useState(expired);
+  const reloadedRef = useRef(false);
+
+  // useEffect(() => {
+  //   if (expired && url && !reloadedRef.current) {
+  //     reloadedRef.current = true;
+  //     const cloudKey = parseCloudKey(url);
+  //     setLoading(true);
+  //     downloadSign(cloudKey, bizType)
+  //       .then(
+  //         () => {
+  //           tick(Math.random());
+  //         },
+  //         err => logger.debug('PrivateImage 重新签名失败1', err)
+  //       )
+  //       .finally(() => {
+  //         setLoading(false);
+  //       });
+  //   }
+  // }, [expired, url, bizType]);
+
+  if (loading || !url || !isFullLink(url)) {
+    return /*#__PURE__*/React.createElement(View, {
+      key: url,
+      className: rest.className,
+      style: rest.style
+    });
+  }
+  return /*#__PURE__*/React.createElement(Image, _extends({
+    ref: ref,
+    key: url,
+    onError: event => {
+      var _props$onError;
+      if (typeof event.detail.errMsg === 'string' && event.detail.errMsg.includes('Not Found')) {
+        if (!reloadedRef.current) {
+          logger.debug('PrivateImage 加载出错，重新签名', {
+            url,
+            errMsg: event.detail.errMsg
+          });
+          reloadedRef.current = true;
+          parseCloudKey(url); // setLoading(true);
+          // downloadSign(cloudKey, bizType)
+          //   .then(
+          //     signedUrl => {
+          //       tick(Math.random());
+          //     },
+          //     err => logger.debug('PrivateImage 重新签名失败', err)
+          //   )
+          //   .finally(() => {
+          //     setLoading(false);
+          //   });
+        }
+      }
+      (_props$onError = props.onError) === null || _props$onError === void 0 || _props$onError.call(props, event);
+    },
+    src: url
+  }, rest));
+});
+export default PrivateImage;

package/dist/TileRender/index.d.ts

@@ -0,0 +1,11 @@
+import './index.less';
+import React from 'react';
+import { ChatMessageObject, ChatTileObject } from '@ray-js/t-agent';
+interface Props {
+    tile: ChatTileObject;
+    message: ChatMessageObject;
+    side: 'start' | 'end';
+    isLatestMessage?: boolean;
+}
+declare const _default: React.MemoExoticComponent<({ tile, message, isLatestMessage, side }: Props) => React.JSX.Element>;
+export default _default;

package/dist/TileRender/index.js

@@ -0,0 +1,32 @@
+import './index.less';
+import React, { useCallback, useMemo } from 'react';
+import { useChatAgent, useRenderOptions } from '../hooks';
+import { TilePropsContext } from '../contexts';
+const TileRender = _ref => {
+  let {
+    tile,
+    message,
+    isLatestMessage,
+    side
+  } = _ref;
+  const agent = useChatAgent();
+  const emitEvent = useCallback(async payload => agent.emitTileEvent(tile.id, payload), [tile.id]);
+  const {
+    renderTileAs
+  } = useRenderOptions();
+  const props = useMemo(() => {
+    return {
+      agent,
+      tile,
+      message,
+      side,
+      isLatestMessage,
+      emitEvent
+    };
+  }, [agent, tile, message, side, isLatestMessage, emitEvent]);
+  const node = renderTileAs(props);
+  return /*#__PURE__*/React.createElement(TilePropsContext.Provider, {
+    value: props
+  }, node);
+};
+export default /*#__PURE__*/React.memo(TileRender);

package/dist/TileRender/index.less

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

package/dist/cards/WorkflowReplyCard/index.d.ts

@@ -0,0 +1,11 @@
+import './index.less';
+import { ChatCardObject } from '@ray-js/t-agent';
+import { WorkflowReplyResource } from '@ray-js/t-agent-plugin-assistant';
+import React from 'react';
+interface CardData {
+    resources: WorkflowReplyResource[];
+}
+declare const WorkflowReplyCard: (props: {
+    card: ChatCardObject<CardData>;
+}) => React.JSX.Element;
+export default WorkflowReplyCard;

package/dist/cards/WorkflowReplyCard/index.js

@@ -0,0 +1,67 @@
+import "core-js/modules/esnext.iterator.map.js";
+import './index.less';
+import { WorkflowReplyResourceType } from '@ray-js/t-agent-plugin-assistant';
+import { View } from '@ray-js/components';
+import React from 'react';
+import { Image, Video } from '@ray-js/ray';
+import { useSendAction } from '../../hooks';
+const WorkflowReplyCard = props => {
+  const {
+    cardData
+  } = props.card;
+  const sendAction = useSendAction();
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-workflow-reply-card"
+  }, cardData.resources.map(resource => {
+    const key = "".concat(resource.url, "-").concat(resource.title);
+    switch (resource.type) {
+      case WorkflowReplyResourceType.Web:
+        return /*#__PURE__*/React.createElement(View, {
+          key: key,
+          onClick: () => {
+            sendAction({
+              type: 'openH5',
+              url: resource.url
+            });
+          },
+          className: "t-agent-workflow-reply-card-resource t-agent-workflow-reply-card-resource-link"
+        }, resource.title);
+      case WorkflowReplyResourceType.Image:
+        return /*#__PURE__*/React.createElement(View, {
+          key: key,
+          className: "t-agent-workflow-reply-card-image t-agent-workflow-reply-card-resource-image",
+          onClick: () => {
+            ty.previewImage({
+              urls: [resource.url],
+              current: 0
+            });
+          }
+        }, /*#__PURE__*/React.createElement(Image, {
+          mode: "widthFix",
+          src: resource.url
+        }));
+      case WorkflowReplyResourceType.Video:
+        return /*#__PURE__*/React.createElement(View, {
+          key: key,
+          className: "t-agent-workflow-reply-card-video t-agent-workflow-reply-card-resource-video"
+        }, /*#__PURE__*/React.createElement(Video, {
+          src: resource.url
+        }));
+      case WorkflowReplyResourceType.MiniProgram:
+        return /*#__PURE__*/React.createElement(View, {
+          key: key,
+          className: "t-agent-workflow-reply-card-resource t-agent-workflow-reply-card-resource-link",
+          onClick: () => {
+            // 这里传的是小程序 url
+            sendAction({
+              type: 'openRoute',
+              url: resource.url
+            });
+          }
+        }, resource.title);
+      default:
+        return null;
+    }
+  }));
+};
+export default WorkflowReplyCard;

package/dist/cards/WorkflowReplyCard/index.less

@@ -0,0 +1,37 @@
+.t-agent-workflow-reply-card {
+  width: 612rpx;
+  min-height: 88rpx;
+  font-size: 32rpx;
+  line-height: 44rpx;
+  color: var(--app-B3-N1);
+  background-color: var(--app-B3);
+  border-radius: 32rpx;
+  padding: 24rpx;
+  transition: all 0.2s ease-in-out;
+  overflow: hidden;
+}
+
+.t-agent-workflow-reply-card-resource {
+
+}
+
+.t-agent-workflow-reply-card-resource-link {
+  color: #427FF7;
+}
+
+// iOS 14 video圆角 bug，这样写可以正确渲染圆角
+.t-agent-workflow-reply-card-resource-video {
+  border-radius: var(--app-C1_1);
+  overflow: hidden;
+  width: 564rpx;
+  display: flex;
+}
+
+
+.t-agent-workflow-reply-card-resource-image image {
+  width: 564rpx;
+  height: auto;
+  border-radius: var(--app-C1_1);
+  overflow: hidden;
+  margin-top: 24rpx;
+}

package/dist/cards/map.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType } from 'react';
+import { ChatCardObject } from '@ray-js/t-agent';
+export declare const cardMap: Record<string, ComponentType<{
+    card: ChatCardObject;
+}>>;

package/dist/cards/map.js

@@ -0,0 +1,4 @@
+import WorkflowReplyCard from './WorkflowReplyCard';
+export const cardMap = {
+  workflowReply: WorkflowReplyCard
+};

package/dist/contexts.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ChatAgent, ChatMessageObject, UIPlugin } from '@ray-js/t-agent';
+import { AssistantPlugin, SocketStatus } from '@ray-js/t-agent-plugin-assistant';
+import { RenderOptions, TileProps } from './types';
+export declare const MessageContext: import("react").Context<{
+    messages: ChatMessageObject[];
+    socketStatus: SocketStatus;
+}>;
+export declare const RenderContext: import("react").Context<RenderOptions>;
+export declare const ChatAgentContext: import("react").Context<ChatAgent<UIPlugin & AssistantPlugin>>;
+export declare const TilePropsContext: import("react").Context<TileProps<any, any>>;

package/dist/contexts.js

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+import { SocketStatus } from '@ray-js/t-agent-plugin-assistant';
+export const MessageContext = /*#__PURE__*/createContext({
+  messages: [],
+  socketStatus: SocketStatus.WAITING
+});
+export const RenderContext = /*#__PURE__*/createContext({
+  renderTileAs: () => null,
+  renderCustomBlockAs: () => null,
+  renderCardAs: () => null,
+  customBlockTypes: [],
+  customCardMap: {},
+  getStaticResourceBizType: () => ''
+});
+export const ChatAgentContext = /*#__PURE__*/createContext({});
+export const TilePropsContext = /*#__PURE__*/createContext({});

package/dist/global.d.ts

@@ -0,0 +1,19 @@
+declare module '*.module.less' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.png' {
+  const url: string;
+  export default url;
+}
+
+declare module '*.svg' {
+  const url: string;
+  export default url;
+}
+
+declare module '*.jpg' {
+  const url: string;
+  export default url;
+}

package/dist/hooks/context.d.ts

@@ -0,0 +1,11 @@
+import { TTTAction } from '@ray-js/t-agent-plugin-assistant';
+export declare const useChatAgent: () => import("@ray-js/t-agent").ChatAgent<import("@ray-js/t-agent").UIPlugin & import("@ray-js/t-agent-plugin-assistant").AssistantPlugin>;
+export declare const useAgentMessage: () => {
+    messages: import("@ray-js/t-agent").ChatMessageObject[];
+    socketStatus: import("@ray-js/t-agent-plugin-assistant").SocketStatus;
+};
+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;

package/dist/hooks/context.js

@@ -0,0 +1,40 @@
+import { useEffect, useContext, useCallback, useRef } from 'react';
+import { TilePropsContext, ChatAgentContext, MessageContext, RenderContext } from '../contexts';
+export const useChatAgent = () => {
+  return useContext(ChatAgentContext);
+};
+export const useAgentMessage = () => {
+  return useContext(MessageContext);
+};
+export const useRenderOptions = () => {
+  return useContext(RenderContext);
+};
+export const useOnEvent = (eventName, callback) => {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+  const agent = useChatAgent();
+  useEffect(() => {
+    return agent.plugins.ui.onEvent(eventName, detail => {
+      callbackRef.current(detail);
+    });
+  }, [agent, eventName, callback]);
+};
+export const useEmitEvent = () => {
+  const agent = useChatAgent();
+  return agent.plugins.ui.emitEvent;
+};
+export const useTileProps = () => {
+  return useContext(TilePropsContext);
+};
+export const useSendAction = () => {
+  const {
+    emitEvent
+  } = useTileProps();
+  return useCallback(tttAction => {
+    emitEvent({
+      tttAction
+    });
+  }, [emitEvent]);
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './useBlockInput';
+export * from './useAsrInput';

package/dist/hooks/index.js

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './useBlockInput';
+export * from './useAsrInput';

package/dist/hooks/useAsrInput.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+export declare enum AsrErrorCode {
+    SHORT_TIME = 0
+}
+export declare class AsrError extends Error {
+    readonly errorCode: AsrErrorCode;
+    constructor(errorCode: AsrErrorCode, message?: string);
+}
+export interface UseAsrInputOptions {
+    onError: (error: Error) => void;
+}
+/**
+  init 初始状态，有返回按钮
+  recording 按住说话按钮收音，无按钮
+  pending 已有文本，待发送，有清除、发送按钮
+
+      +-------------------------------------------------------+
+      |                      clear/send                       |
+      ↓                                                       |
+  +--------+     press     +------------+     release    +---------+
+  |  init  |  ---------->  | recording  |  ---------->   | pending |
+  +--------+               +------------+                +---------+
+      ^                         |  ^                          |
+      |                         |  |                          |
+      |                         |  |                          |
+      |      empty release      |  |           press          |
+      +-------------------------+  +--------------------------+
+ */
+export declare function useAsrInput(options: UseAsrInputOptions): {
+    text: string;
+    setText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    currentText: string;
+    incomingText: string;
+    state: "pending" | "recording" | "init";
+    clear: () => void;
+    press: () => Promise<void>;
+    release: () => Promise<void>;
+};