@ray-js/t-agent-ui-ray 0.1.1 → 0.2.0-beta-1

package/dist/MessageInput/index.js

@@ -1,322 +1,5 @@
-import "core-js/modules/es.string.trim.js";
-import "core-js/modules/esnext.iterator.constructor.js";
-import "core-js/modules/esnext.iterator.filter.js";
-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, { useRef, useState } from 'react';
-import { Image, Input, ScrollView } from '@ray-js/ray';
-import { Asr, AbortController } from '@ray-js/t-agent-plugin-assistant';
-import cx from 'clsx';
-import PrivateImage from '../PrivateImage';
-import imageSvg from './icons/image.svg';
-import videoSvg from './icons/video.svg';
-import loadingSvg from './icons/loading.svg';
-import closeCircleSvg from './icons/close-circle.svg';
-import { useAttachmentInput, useChatAgent, useEmitEvent, useIsUnmounted, useOnEvent, useRenderOptions, useTranslate } from '../hooks';
-import AsrInput from './AsrInput';
+import React from 'react';
+import MessageInputAIStream from './MessageInputAIStream';
 export default function MessageInput(props) {
-  const [moreOpen, setMoreOpen] = useState(false);
-  const t = useTranslate();
-  const [text, setText] = useState('');
-  const [asrText, setAsrText] = useState('');
-  const attachmentInput = useAttachmentInput();
-  const {
-    uploading,
-    uploaded,
-    setUploaded,
-    upload
-  } = attachmentInput;
-  const acRef = useRef(null);
-  const [responding, setResponding] = useState(false);
-  const [mode, setMode] = useState('text');
-  const agent = useChatAgent();
-  const emitEvent = useEmitEvent();
-  const isUnmounted = useIsUnmounted();
-  useOnEvent('networkChange', _ref => {
-    let {
-      online
-    } = _ref;
-    if (!online && responding) {
-      setResponding(false);
-    }
-  });
-  const hasMore = !!agent.plugins.assistant.options.multiModal;
-  const isMore = !text.trim().length && hasMore;
-  const send = async inputBlocks => {
-    if (!(inputBlocks !== null && inputBlocks !== void 0 && inputBlocks.length) || attachmentInput.uploading || responding) {
-      return;
-    }
-    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, ac.signal);
-    } finally {
-      if (!isUnmounted()) {
-        setResponding(false);
-      }
-    }
-  };
-  useOnEvent('sendMessage', async _ref2 => {
-    let {
-      blocks
-    } = _ref2;
-    if (uploading || responding) {
-      return;
-    }
-    setText('');
-    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, ac.signal);
-    } finally {
-      if (!isUnmounted()) {
-        setResponding(false);
-      }
-    }
-  });
-  useOnEvent('setInputBlocks', async _ref3 => {
-    let {
-      blocks
-    } = _ref3;
-    if (uploading || responding) {
-      return;
-    }
-    if (mode !== 'text') {
-      setMode('text');
-    }
-    attachmentInput.loadBlocks(blocks);
-    let t = '';
-    for (const block of blocks) {
-      if (block.type === 'text') {
-        t = block.text;
-      }
-    }
-    if (t) {
-      setText(t);
-    }
-    setMoreOpen(false);
-  });
-  const openMoreClick = () => {
-    setMoreOpen(!moreOpen);
-    if (!moreOpen) {
-      emitEvent('scrollToBottom', {
-        animation: true
-      });
-    }
-  };
-  const {
-    getStaticResourceBizType
-  } = useRenderOptions();
-  let container;
-  if (mode === 'text') {
-    container = /*#__PURE__*/React.createElement(View, {
-      className: "t-agent-message-input-text-bar"
-    }, /*#__PURE__*/React.createElement(View, {
-      className: "t-agent-message-input-text-group"
-    }, /*#__PURE__*/React.createElement(Input, {
-      confirmType: "send",
-      value: text,
-      onInput: event => setText(event.detail.value),
-      placeholder: props.placeholder,
-      "data-testid": "t-agent-message-input-text-inner",
-      className: "t-agent-message-input-text-inner",
-      onConfirm: () => {
-        if (text.trim().length) {
-          send([...attachmentInput.blocks, {
-            type: 'text',
-            text
-          }]);
-        }
-      },
-      maxLength: 200,
-      placeholderStyle: "color: var(--app-B1-N4)",
-      onFocus: () => {
-        setMoreOpen(false);
-        emitEvent('scrollToBottom', {
-          animation: true
-        });
-      }
-    }), /*#__PURE__*/React.createElement(Button, {
-      "data-testid": "t-agent-message-input-button-asr",
-      onClick: async () => {
-        const auth = await Asr.authorize();
-        if (!auth) {
-          ty.showToast({
-            icon: 'none',
-            title: t('t-agent.input.voice.require-permission')
-          });
-          return;
-        }
-        setText('');
-        setMode('voice');
-      },
-      className: "t-agent-message-input-button t-agent-message-input-button-voice"
-    })), /*#__PURE__*/React.createElement(Button, {
-      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 && !responding,
-        't-agent-message-input-button-stop': responding
-      }),
-      "data-testid": "t-agent-message-input-button-main",
-      onClick: async () => {
-        if (responding) {
-          if (acRef.current) {
-            acRef.current.abort('User abort');
-          }
-        } else if (isMore) {
-          openMoreClick();
-        } else if (text.trim().length) {
-          await send([...attachmentInput.blocks, {
-            type: 'text',
-            text
-          }]);
-        }
-      }
-    }));
-  } else {
-    container = /*#__PURE__*/React.createElement(AsrInput, {
-      text: asrText,
-      setText: setAsrText,
-      onBack: () => {
-        setText('');
-        setMode('text');
-      },
-      onAbort: () => {
-        if (acRef.current) {
-          acRef.current.abort('User abort');
-        }
-      },
-      moreOpen: moreOpen,
-      closeMore: () => setMoreOpen(false),
-      onMoreClick: openMoreClick,
-      responding: responding,
-      sendDisabled: uploading,
-      onSend: async () => {
-        if (asrText) {
-          await send([...attachmentInput.blocks, {
-            type: 'text',
-            text: asrText
-          }]);
-        }
-      },
-      hasMore: hasMore,
-      onError: error => {
-        ty.showToast({
-          icon: 'error',
-          title: error.message
-        });
-      }
-    });
-  }
-  return /*#__PURE__*/React.createElement(View, {
-    className: "".concat(props.className || '', " t-agent-message-input"),
-    style: props.style
-  }, /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-input-container"
-  }, props.renderTop, !!uploaded.length && /*#__PURE__*/React.createElement(ScrollView, {
-    scrollX: true,
-    scrollY: false,
-    enableFlex: true,
-    className: "t-agent-message-input-uploaded-files",
-    refresherTriggered: false
-  }, uploaded.map(file => {
-    let content;
-    switch (file.type) {
-      case 'image':
-        content = /*#__PURE__*/React.createElement(PrivateImage, {
-          className: "t-agent-message-input-uploaded-file-image",
-          mode: "aspectFill",
-          bizType: getStaticResourceBizType(file.url, 'image:view'),
-          src: file.url
-        });
-        break;
-      case 'video':
-        content = /*#__PURE__*/React.createElement(PrivateImage, {
-          bizType: getStaticResourceBizType(file.thumbUrl, 'videoThumb:view'),
-          className: "t-agent-message-input-uploaded-file-image",
-          mode: "aspectFill",
-          src: file.thumbUrl
-        });
-        break;
-      case 'loading':
-        content = /*#__PURE__*/React.createElement(View, {
-          className: "t-agent-message-input-uploaded-file-loading",
-          key: file.id
-        }, /*#__PURE__*/React.createElement(Image, {
-          src: loadingSvg,
-          className: "t-agent-message-input-uploaded-file-loading-icon"
-        }));
-        break;
-      default:
-        content = null;
-    }
-    return /*#__PURE__*/React.createElement(View, {
-      key: file.id,
-      className: "t-agent-message-input-uploaded-file"
-    }, /*#__PURE__*/React.createElement(Image, {
-      onClick: () => {
-        setUploaded(prev => prev.filter(f => f.id !== file.id));
-      },
-      className: "t-agent-message-input-uploaded-file-delete",
-      src: closeCircleSvg
-    }), content);
-  })), container), /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-input-panel ".concat(moreOpen ? '' : 't-agent-message-input-panel-close')
-  }, /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-input-panel-content"
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: "t-agent-message-input-panel-button",
-    onClick: async () => {
-      try {
-        await upload('image', 1);
-      } catch (e) {
-        ty.showToast({
-          icon: 'error',
-          title: t('t-agent.input.upload.failed')
-        });
-      }
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-input-panel-button-icon"
-  }, /*#__PURE__*/React.createElement(Image, {
-    src: imageSvg
-  }))), /*#__PURE__*/React.createElement(Button, {
-    className: "t-agent-message-input-panel-button",
-    onClick: async () => {
-      try {
-        await upload('video', 1);
-      } catch (e) {
-        ty.showToast({
-          icon: 'error',
-          title: t('t-agent.input.upload.failed')
-        });
-      }
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    className: "t-agent-message-input-panel-button-icon"
-  }, /*#__PURE__*/React.createElement(Image, {
-    src: videoSvg
-  }))))));
+  return /*#__PURE__*/React.createElement(MessageInputAIStream, props);
 }

package/dist/MessageInput/index.less

@@ -146,8 +146,16 @@
   right: 10rpx;
 }
 
+.t-agent-message-input-button-keyboard {
+  background: transparent url('icons/keyboard.svg') no-repeat center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 10rpx;
+}
+
 .t-agent-message-input-button-stop {
-  background: rgba(0,0,0,0) url('icons/stop.svg') no-repeat center;
+  background: rgba(0, 0, 0, 0) url('icons/stop.svg') no-repeat center;
   border: 2rpx solid var(--t-agent-input-border-color);
 }
 
@@ -155,7 +163,7 @@
   overflow: hidden;
   height: 168rpx;
   box-sizing: border-box;
-  transition: height .2s ease-in-out;
+  transition: height 0.2s ease-in-out;
 }
 
 .t-agent-message-input-panel-close {
@@ -251,7 +259,7 @@
   left: 0;
   right: 0;
   height: 100vh;
-  background: linear-gradient(to top, var(--app-B3), rgba(0, 0, 0, 0));  //z-index: 100;
+  background: linear-gradient(to top, var(--app-B3), rgba(0, 0, 0, 0)); //z-index: 100;
 }
 
 .t-agent-message-input-voice-bubble {
@@ -305,3 +313,70 @@
   border: none;
   min-height: 56rpx;
 }
+
+@transition-duration: 0.3s;
+
+.t-agent-message-input-ptt {
+  background: transparent;
+  padding: 0;
+  border: none;
+  height: 56rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: height @transition-duration ease-in-out; // 定义高度变化的过渡效果
+}
+
+.t-agent-message-input-ptt-handle {
+  height: 224rpx;
+}
+
+.t-agent-message-input-ptt-text {
+  font-size: 32rpx;
+  line-height: 56rpx;
+  color: var(--app-M1-B1);
+  text-align: center;
+}
+
+.t-agent-message-input-oninput-text-top {
+  font-size: 32rpx;
+  line-height: 56rpx;
+  color: var(--app-M1-B1);
+  text-align: center;
+}
+.t-agent-message-input-oninput-text-center {
+  font-size: 20rpx;
+  color: var(--app-M1-B1);
+  text-align: center;
+  margin-top: 32rpx;
+}
+
+.t-agent-message-input-waveform-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  height: 40px;
+  padding: 8px 0;
+}
+
+.t-agent-message-input-waveform-bar {
+  width: 2px;
+  min-height: 2px;
+  background-color: #4a90e2;
+  border-radius: 1px;
+  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
+  animation: colorPulse 2s infinite;
+}
+
+@keyframes colorPulse {
+  0% {
+    background-color: #4a90e2;
+  }
+  50% {
+    background-color: #7cb3ff;
+  }
+  100% {
+    background-color: #4a90e2;
+  }
+}

package/dist/MessageList/index.d.ts

@@ -10,6 +10,11 @@ interface Props {
         assistant?: 'start' | 'end' | string;
         [key: string]: 'start' | 'end' | string;
     };
+    multSelect?: {
+        show: boolean;
+        select: string[];
+        onSelect: (msgs: string[]) => void;
+    };
     historyLimit?: {
         /** 历史消息数量限制 */
         count: number;

package/dist/MessageList/index.js

@@ -8,7 +8,7 @@ import { View } from '@ray-js/components';
 import React, { useMemo, useRef, useState } from 'react';
 import { ScrollView } from '@ray-js/ray';
 import { generateId } from '@ray-js/t-agent';
-import { isVersionMatch } from '@ray-js/t-agent-plugin-assistant';
+import { isVersionMatch } from '@ray-js/t-agent-plugin-aistream';
 import MessageRender from '../MessageRender';
 import { useAgentMessage, useOnEvent } from '../hooks';
 import { useDebouncedFn } from '../hooks/useDebouncedFn';
@@ -20,7 +20,8 @@ export default function MessageList(props) {
     style,
     wrapperClassName,
     wrapperStyle,
-    historyLimit
+    historyLimit,
+    multSelect
   } = props;
   const {
     messages
@@ -103,6 +104,7 @@ export default function MessageList(props) {
       side = msg.role === 'user' ? 'end' : 'start';
     }
     return /*#__PURE__*/React.createElement(MessageRender, {
+      multSelect: multSelect,
       key: msg.id,
       message: msg,
       isLatestMessage: index === 0,

package/dist/MessageRender/index.d.ts

@@ -5,6 +5,11 @@ interface Props {
     message: ChatMessageObject;
     isLatestMessage: boolean;
     side: 'start' | 'end' | string;
+    multSelect?: {
+        show: boolean;
+        select: string[];
+        onSelect: (msgs: string[]) => void;
+    };
 }
-export default function MessageRender({ message, isLatestMessage, side }: Props): React.JSX.Element;
+export default function MessageRender({ message, isLatestMessage, side, multSelect }: Props): React.JSX.Element;
 export {};

package/dist/MessageRender/index.js

@@ -1,5 +1,7 @@
 import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.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 from 'react';
@@ -8,12 +10,18 @@ export default function MessageRender(_ref) {
   let {
     message,
     isLatestMessage,
-    side
+    side,
+    multSelect
   } = _ref;
   const {
     id,
     tiles
   } = message;
+  const {
+    select = [],
+    onSelect = () => {},
+    show: showMultSelect = false
+  } = multSelect || {};
   if (tiles.length === 0) {
     return /*#__PURE__*/React.createElement(View, {
       key: id,
@@ -22,6 +30,15 @@ export default function MessageRender(_ref) {
   }
   return /*#__PURE__*/React.createElement(View, {
     key: id,
+    className: "t-agent-message-list-row-container "
+  }, showMultSelect && /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-message-list-row-check"
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "checkbox-container ".concat(select.includes(id) ? 'selected' : ''),
+    onClick: () => select.includes(id) ? onSelect([...select.filter(v => v !== id)]) : onSelect([...select, id])
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "checkbox-check"
+  }))), /*#__PURE__*/React.createElement(View, {
     className: "t-agent-message-list-row t-agent-message-list-row-".concat(side)
   }, tiles.map(tile => {
     return /*#__PURE__*/React.createElement(TileRender, {
@@ -31,5 +48,5 @@ export default function MessageRender(_ref) {
       key: tile.id,
       isLatestMessage: isLatestMessage
     });
-  }));
+  })));
 }

package/dist/MessageRender/index.less

@@ -1,8 +1,19 @@
+.t-agent-message-list-row-container {
+  display: flex;
+}
+
+.t-agent-message-list-row-check {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: calc(var(--t-agent-y-gap) + 24rpx);
+  margin-right: 28rpx;
+}
+
 .t-agent-message-list-row {
   margin-bottom: var(--t-agent-y-gap);
   display: flex;
   flex-direction: column;
-  flex: 0 0 auto;
+  flex: 1 0 auto;
 }
 
 .t-agent-message-list-row-start {
@@ -12,3 +23,39 @@
 .t-agent-message-list-row-end {
   align-items: flex-end;
 }
+
+@checkbox-size: 40rpx;
+@border-color: rgba(0, 0, 0, 0.3);
+@active-color: #3678E3;
+
+.checkbox-container {
+  position: relative;
+  width: @checkbox-size;
+  height: @checkbox-size;
+  border: 2rpx solid @border-color;
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  &.selected {
+    background: @active-color;
+    border-color: transparent;
+
+    .checkbox-check {
+      opacity: 1;
+    }
+  }
+}
+
+.checkbox-check {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 24rpx;
+  height: 18rpx;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0xIDRsMy43NSA0TDEwLjMgMSIvPjwvc3ZnPg==");
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}

package/dist/PrivateImage/index.js

@@ -4,7 +4,7 @@ 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 { getUrlByCloudKey, isLinkExpired, parseCloudKey, isFullLink } from '../utils/file';
 import logger from '../logger';
 const PrivateImage = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {

package/dist/cards/map.js

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

package/dist/contexts.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { ChatAgent, ChatMessageObject, UIPlugin } from '@ray-js/t-agent';
-import { AssistantPlugin } from '@ray-js/t-agent-plugin-assistant';
 import { RenderOptions, TileProps } from './types';
 import { ChatSession } from '@ray-js/t-agent';
 export declare const MessageContext: import("react").Context<{
@@ -9,7 +8,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'> & {
+export type UIChatAgent = Pick<ChatAgent<UIPlugin>, 'pushInputBlocks' | 'plugins' | 'emitTileEvent' | 'removeMessage'> & {
     session: UIChatSession;
 };
 export declare const ChatAgentContext: import("react").Context<UIChatAgent>;

package/dist/contexts.js

@@ -7,6 +7,7 @@ export const RenderContext = /*#__PURE__*/createContext({
   renderTileAs: () => null,
   renderCustomBlockAs: () => null,
   renderCardAs: () => null,
+  renderLongPressAs: () => null,
   customBlockTypes: [],
   customCardMap: {},
   getStaticResourceBizType: () => '',

package/dist/hooks/index.d.ts

@@ -4,3 +4,4 @@ export * from './useAsrInput';
 export * from './useIsUnmounted';
 export * from './useLongPress';
 export * from './useTranslate';
+export * from './useMultSelect';

package/dist/hooks/index.js

@@ -3,4 +3,5 @@ export * from './useAttachmentInput';
 export * from './useAsrInput';
 export * from './useIsUnmounted';
 export * from './useLongPress';
-export * from './useTranslate';
+export * from './useTranslate';
+export * from './useMultSelect';

package/dist/hooks/useAttachmentInput.d.ts

@@ -6,7 +6,9 @@ export interface UploadFile {
     url?: string;
     thumbUrl?: string;
 }
-export declare function useAttachmentInput(): {
+export declare function useAttachmentInput({ local }?: {
+    local: boolean;
+}): {
     blocks: InputBlock[];
     uploaded: UploadFile[];
     setUploaded: import("react").Dispatch<import("react").SetStateAction<UploadFile[]>>;