@ray-js/t-agent-ui-ray 0.0.8 → 0.0.9-beta-2

package/dist/CustomCardRender/index.js

@@ -1,7 +1,7 @@
 import './index.less';
 import { View } from '@ray-js/components';
-import React from 'react';
-import { useRenderOptions } from '../hooks';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useRenderOptions, useTileProps } from '../hooks';
 export default function CustomCardRender(_ref) {
   let {
     card
@@ -9,6 +9,23 @@ export default function CustomCardRender(_ref) {
   const {
     customCardMap
   } = useRenderOptions();
+  const {
+    emitEvent
+  } = useTileProps();
+  const ref = useRef(card);
+  useEffect(() => {
+    ref.current = card;
+  });
+  const setCardState = useCallback((state, options) => {
+    if (typeof state === 'function') {
+      state = state(ref.current.cardState);
+    }
+    emitEvent({
+      type: '@buildIn/setCardState',
+      state,
+      options: options || {}
+    });
+  }, [emitEvent]);
   const Card = customCardMap[card.cardCode];
   if (!Card) {
     return null;
@@ -16,6 +33,7 @@ export default function CustomCardRender(_ref) {
   return /*#__PURE__*/React.createElement(View, {
     className: "t-agent-custom-card-render"
   }, /*#__PURE__*/React.createElement(Card, {
-    card: card
+    card: card,
+    setCardState: setCardState
   }));
 }

package/dist/MarkdownRender/index.less

@@ -110,10 +110,6 @@
   white-space: nowrap;
 }
 
-.h2w__table .h2w__tr:nth-child(2n) {
-  background-color: red;
-}
-
 .h2w__colgroup {
   display: table-column-group;
 }

package/dist/MarkdownRender/theme/light.less

@@ -27,7 +27,8 @@
 
 
 /**代码块**/
-.h2w__light .h2w__pre {
+.h2w__light .h2w__pre,
+.h2w__light .h2w__pre .h2w__code {
     background-color: #f6f8fa;
     border-color: #eaedf0;
 }

package/dist/MessageInput/AsrInput.d.ts

@@ -12,6 +12,7 @@ interface Props {
     closeMore: () => void;
     moreOpen: boolean;
     hasMore: boolean;
+    onAbort: () => void;
 }
 export default function AsrInput(props: Props): React.JSX.Element;
 export {};

package/dist/MessageInput/AsrInput.js

@@ -12,7 +12,8 @@ export default function AsrInput(props) {
     closeMore,
     hasMore,
     text,
-    setText
+    setText,
+    onAbort
   } = props;
   const {
     state,
@@ -65,16 +66,19 @@ export default function AsrInput(props) {
     onTouchCancel: release,
     onTouchEnd: release
   }), /*#__PURE__*/React.createElement(Button, {
-    disabled: sendDisabled || responding,
+    disabled: sendDisabled,
     "data-testid": "t-agent-message-input-asr-button-right",
     className: cx('t-agent-message-input-button', {
       't-agent-message-input-button-voice-send': state === 'pending',
-      't-agent-message-input-button-hide': state === 'recording' || !hasMore && state !== 'pending',
+      't-agent-message-input-button-hide': (state === 'recording' || !hasMore && state !== 'pending') && !responding,
       't-agent-message-input-button-more': state === 'init' && hasMore,
-      't-agent-message-input-button-more-open': state === 'init' && moreOpen
+      't-agent-message-input-button-more-open': state === 'init' && moreOpen,
+      't-agent-message-input-button-stop': state === 'init' && responding
     }),
     onClick: () => {
-      if (state === 'init' && hasMore) {
+      if (responding) {
+        onAbort();
+      } else if (state === 'init' && hasMore) {
         onMoreClick();
       } else {
         props.onSend();

package/dist/MessageInput/icons/stop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7b7c7e" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>

package/dist/MessageInput/index.js

@@ -4,9 +4,9 @@ import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import './index.less';
 import { Button, View } from '@ray-js/components';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Image, Input, ScrollView } from '@ray-js/ray';
-import { Asr } from '@ray-js/t-agent-plugin-assistant';
+import { Asr, AbortController } from '@ray-js/t-agent-plugin-assistant';
 import cx from 'clsx';
 import PrivateImage from '../PrivateImage';
 import imageSvg from './icons/image.svg';
@@ -29,6 +29,7 @@ export default function MessageInput(props) {
     setUploaded,
     upload
   } = attachmentInput;
+  const acRef = useRef(null);
   const [responding, setResponding] = useState(false);
   const [mode, setMode] = useState('text');
   const agent = useChatAgent();
@@ -51,8 +52,16 @@ export default function MessageInput(props) {
     setUploaded([]);
     setText('');
     setResponding(true);
+    const ac = new AbortController();
+    acRef.current = ac;
+    ac.signal.addEventListener('abort', () => {
+      if (acRef.current === ac) {
+        acRef.current = null;
+      }
+      setResponding(false);
+    });
     try {
-      await agent.pushInputBlocks(inputBlocks);
+      await agent.pushInputBlocks(inputBlocks, ac.signal);
     } finally {
       if (!isUnmounted()) {
         setResponding(false);
@@ -70,8 +79,16 @@ export default function MessageInput(props) {
     setMoreOpen(false);
     setUploaded([]);
     setResponding(true);
+    const ac = new AbortController();
+    acRef.current = ac;
+    ac.signal.addEventListener('abort', () => {
+      if (acRef.current === ac) {
+        acRef.current = null;
+      }
+      setResponding(false);
+    });
     try {
-      await agent.pushInputBlocks(blocks);
+      await agent.pushInputBlocks(blocks, ac.signal);
     } finally {
       if (!isUnmounted()) {
         setResponding(false);
@@ -154,15 +171,20 @@ export default function MessageInput(props) {
       },
       className: "t-agent-message-input-button t-agent-message-input-button-voice"
     })), /*#__PURE__*/React.createElement(Button, {
-      disabled: !isMore && (responding || uploading),
+      disabled: !isMore && uploading,
       className: cx('t-agent-message-input-button', {
         't-agent-message-input-button-more': isMore,
         't-agent-message-input-button-more-open': moreOpen && isMore,
-        't-agent-message-input-button-send': !isMore
+        't-agent-message-input-button-send': !isMore && !responding,
+        't-agent-message-input-button-stop': responding
       }),
       "data-testid": "t-agent-message-input-button-main",
       onClick: async () => {
-        if (isMore) {
+        if (responding) {
+          if (acRef.current) {
+            acRef.current.abort('User abort');
+          }
+        } else if (isMore) {
           openMoreClick();
         } else if (text) {
           await send([...attachmentInput.blocks, {
@@ -180,6 +202,11 @@ export default function MessageInput(props) {
         setText('');
         setMode('text');
       },
+      onAbort: () => {
+        if (acRef.current) {
+          acRef.current.abort('User abort');
+        }
+      },
       moreOpen: moreOpen,
       closeMore: () => setMoreOpen(false),
       onMoreClick: openMoreClick,

package/dist/MessageInput/index.less

@@ -98,6 +98,7 @@
 .t-agent-message-input-button {
   --button-size: 68rpx;
   background: transparent;
+  transition: all ease-in-out 0.2s;
 
   border-radius: 50%;
   width: var(--button-size);
@@ -123,7 +124,6 @@
 .t-agent-message-input-button-more {
   background: transparent url('icons/plus.svg') no-repeat center;
   border: 2rpx solid var(--t-agent-input-border-color);
-  transition: all ease-in-out 0.2s;
 }
 
 .t-agent-message-input-button-more-open {
@@ -132,7 +132,6 @@
 
 .t-agent-message-input-button-send {
   background: var(--app-M1) url('icons/send.svg') no-repeat center;
-  transition: all ease-in-out 0.2s;
 }
 
 .t-agent-message-input-button-voice-send {
@@ -147,6 +146,11 @@
   right: 10rpx;
 }
 
+.t-agent-message-input-button-stop {
+  background: rgba(0,0,0,0) url('icons/stop.svg') no-repeat center;
+  border: 2rpx solid var(--t-agent-input-border-color);
+}
+
 .t-agent-message-input-panel {
   overflow: hidden;
   height: 168rpx;

package/dist/TileRender/index.js

@@ -10,7 +10,7 @@ const TileRender = _ref => {
     side
   } = _ref;
   const agent = useChatAgent();
-  const emitEvent = useCallback(async payload => agent.emitTileEvent(tile.id, payload), [tile.id]);
+  const emitEvent = useCallback(async payload => agent.emitTileEvent(tile.id, payload), [agent, tile.id]);
   const {
     renderTileAs
   } = useRenderOptions();

package/dist/contexts.js

@@ -9,7 +9,8 @@ export const RenderContext = /*#__PURE__*/createContext({
   renderCardAs: () => null,
   customBlockTypes: [],
   customCardMap: {},
-  getStaticResourceBizType: () => ''
+  getStaticResourceBizType: () => '',
+  i18nTranslate: key => key
 });
 export const ChatAgentContext = /*#__PURE__*/createContext({});
 export const TilePropsContext = /*#__PURE__*/createContext({});

package/dist/tiles/BubbleTile/index.js

@@ -85,6 +85,7 @@ const BubbleTile = props => {
   }
   return /*#__PURE__*/React.createElement(View, {
     className: "t-agent-bubble-tile t-agent-bubble-tile-".concat(side),
+    "data-testid": "t-agent-bubble-tile",
     onLongPress: () => {}
   }, side === 'end' && errorNode, /*#__PURE__*/React.createElement(View, {
     className: "t-agent-bubble-tile-bubble  ".concat(loading ? 't-agent-bubble-tile-bubble-loading' : '')
@@ -127,6 +128,8 @@ const BubbleTile = props => {
         icon: 'none'
       });
     }
-  })), side === 'start' && errorNode);
+  }), bubbleStatus === BubbleTileStatus.ABORTED && /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-bubble-tile-aborted"
+  }, t('t-agent.message.bubble.aborted'))), side === 'start' && errorNode);
 };
 export default /*#__PURE__*/React.memo(BubbleTile);

package/dist/tiles/BubbleTile/index.less

@@ -54,3 +54,11 @@
 
 .t-agent-bubble-tile-bubble-loader {
 }
+
+.t-agent-bubble-tile-aborted {
+  color: var(--app-B3-N3);
+  opacity: 0.75;
+  font-size: 28rpx;
+  padding-top: 8rpx;
+  text-align: center;
+}

package/dist/tiles/CardTile/index.js

@@ -14,7 +14,8 @@ const CardTile = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-card-tile"
+    className: "t-agent-card-tile",
+    "data-testid": "t-agent-bubble-tile"
   }, node);
 };
 export default /*#__PURE__*/React.memo(CardTile);

package/dist/types.d.ts

@@ -14,14 +14,20 @@ export interface MarkdownBlock {
     children: string;
     map: [number, number];
 }
+export type ChatCardComponent<T = any, S = any> = React.ComponentType<{
+    card: ChatCardObject<T, S>;
+    setCardState: ChatCardComponentSetCardState<S>;
+}>;
+export interface ChatCardComponentSetCardStateOptions {
+    persist?: boolean;
+}
+export type ChatCardComponentSetCardState<S = any> = (state: S | ((prev: S | undefined) => S), options?: ChatCardComponentSetCardStateOptions) => void;
 export interface RenderOptions {
     renderTileAs: (props: TileProps) => React.ReactNode;
     renderCustomBlockAs: (block: MarkdownBlock) => React.ReactNode;
     renderCardAs: (card: ChatCardObject) => React.ReactNode;
     customBlockTypes: string[];
-    customCardMap: Record<string, React.ComponentType<{
-        card: ChatCardObject;
-    }>>;
+    customCardMap: Record<string, ChatCardComponent>;
     getStaticResourceBizType: (src: string, scene?: string, data?: any) => string;
     i18nTranslate: (key: string) => string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.0.8",
+  "version": "0.0.9-beta-2",
   "author": "Tuya.inc",
   "license": "MIT",
   "private": false,
@@ -41,5 +41,5 @@
     "@types/echarts": "^4.9.22",
     "@types/markdown-it": "^14.1.1"
   },
-  "gitHead": "686e9d17bd1a96074d3ac16ac2a3d73e1aa17f8f"
+  "gitHead": "45f4f153fe2ce1e218a74f9bd3df726cf4e06d63"
 }