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

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Tuya Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README-zh_CN.md

@@ -0,0 +1,14 @@
+[English](./README.md) | 简体中文
+
+# @ray-js/t-agent-ui-ray
+
+> AI 智能体 SDK
+> 详细文档参见 @ray-js/t-agent
+
+## 安装
+
+```sh
+$ npm install @ray-js/t-agent-ui-ray
+// 或者
+$ yarn add @ray-js/t-agent-ui-ray
+```

package/README.md

@@ -0,0 +1,14 @@
+English | [简体中文](./README-zh_CN.md)
+
+# @ray-js/t-agent-ui-ray
+
+> AI Agent SDK  
+> For detailed documentation, see @ray-js/t-agent
+
+## Installation
+
+```sh
+$ npm install @ray-js/t-agent-ui-ray
+// or
+$ yarn add @ray-js/t-agent-ui-ray
+```

package/dist/ChatContainer/index.d.ts

@@ -0,0 +1,9 @@
+import './index.less';
+import React, { PropsWithChildren } from 'react';
+import { ChatAgent } from '@ray-js/t-agent';
+import { RenderOptions } from '../types';
+export default function ChatContainer<T extends ChatAgent<any>>(props: PropsWithChildren<{
+    createAgent: () => T;
+    renderOptions?: RenderOptions;
+    className?: string;
+}>): React.JSX.Element;

package/dist/ChatContainer/index.js

@@ -0,0 +1,124 @@
+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 React, { useEffect, useMemo, useState } from 'react';
+import { View } from '@ray-js/components';
+import { getWebSocketStatusSync, SocketStatus } from '@ray-js/t-agent-plugin-assistant';
+import { getSystemInfoSync } from '@ray-js/ray';
+import { ChatAgentContext, MessageContext, RenderContext } from '../contexts';
+import { defaultRenderOptions } from '../renderOption';
+import logger from '../logger';
+export default function ChatContainer(props) {
+  const {
+    createAgent,
+    renderOptions = defaultRenderOptions,
+    children,
+    className = ''
+  } = props;
+  const [messages, setMessages] = useState([]);
+  const [socketStatus, setSocketStatus] = useState(() => {
+    try {
+      return getWebSocketStatusSync().status;
+    } catch (e) {
+      return SocketStatus.WAITING;
+    }
+  });
+  const [agent] = useState(() => {
+    const agent = createAgent();
+    if (!agent.plugins.ui) {
+      throw new Error('UI plugin not found');
+    }
+    if (!agent.plugins.assistant) {
+      throw new Error('Assistant plugin not found');
+    }
+    return agent;
+  });
+  useEffect(() => {
+    const {
+      onEvent,
+      emitEvent
+    } = agent.plugins.ui;
+    const offSocketStatusChange = agent.plugins.assistant.onSocketStatusChange(status => {
+      setSocketStatus(status);
+    });
+    const offMessageListInit = onEvent('messageListInit', _ref => {
+      let {
+        messages
+      } = _ref;
+      setMessages(messages);
+      emitEvent('scrollToBottom', {
+        animation: false
+      });
+    });
+    const offMessageChange = onEvent('messageChange', _ref2 => {
+      let {
+        type,
+        message
+      } = _ref2;
+      switch (type) {
+        case 'show':
+          setMessages(prev => [...prev, message]);
+          emitEvent('scrollToBottom', {
+            animation: false
+          });
+          break;
+        case 'update':
+          setMessages(prev => {
+            if (getSystemInfoSync().platform === 'android') {
+              var _prev;
+              // Android 上有兼容问题，需要手动滚动到底部
+              if (((_prev = prev[prev.length - 1]) === null || _prev === void 0 ? void 0 : _prev.id) === message.id) {
+                // 是最后一条消息，滚动到最底部
+                emitEvent('scrollToBottom', {
+                  animation: false
+                });
+              }
+            }
+            return prev.map(item => {
+              if (item.id === message.id) {
+                return message;
+              }
+              return item;
+            });
+          });
+          break;
+        case 'remove':
+          setMessages(prev => {
+            return prev.filter(item => item.id !== message.id);
+          });
+      }
+    });
+    return () => {
+      offSocketStatusChange();
+      offMessageListInit();
+      offMessageChange();
+    };
+  }, [agent]);
+  const messageValue = useMemo(() => {
+    return {
+      messages,
+      socketStatus
+    };
+  }, [messages, socketStatus]);
+  useEffect(() => {
+    (async function () {
+      logger.debug('[ChatProvider] agent.start');
+      try {
+        await agent.start();
+      } catch (error) {
+        logger.error('[ChatProvider] agent.start error', error);
+      }
+    })();
+  }, []);
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-chat-container ".concat(className || '')
+  }, /*#__PURE__*/React.createElement(ChatAgentContext.Provider, {
+    value: agent
+  }, /*#__PURE__*/React.createElement(RenderContext.Provider, {
+    value: renderOptions
+  }, /*#__PURE__*/React.createElement(MessageContext.Provider, {
+    value: messageValue
+  }, children))));
+}

package/dist/ChatContainer/index.less

@@ -0,0 +1,10 @@
+.t-agent-chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  --t-agent-safe-bottom: 0;
+  --t-agent-safe-bottom: constant(safe-area-inset-bottom);
+  --t-agent-safe-bottom: env(safe-area-inset-bottom);
+
+  --t-agent-y-gap: 32rpx;
+}

package/dist/CustomCardRender/index.d.ts

@@ -0,0 +1,8 @@
+import './index.less';
+import React from 'react';
+import { ChatCardObject } from '@ray-js/t-agent';
+interface Props {
+    card: ChatCardObject;
+}
+export default function CustomCardRender({ card }: Props): React.JSX.Element | null;
+export {};

package/dist/CustomCardRender/index.js

@@ -0,0 +1,21 @@
+import './index.less';
+import { View } from '@ray-js/components';
+import React from 'react';
+import { useRenderOptions } from '../hooks';
+export default function CustomCardRender(_ref) {
+  let {
+    card
+  } = _ref;
+  const {
+    customCardMap
+  } = useRenderOptions();
+  const Card = customCardMap[card.cardCode];
+  if (!Card) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-custom-card-render"
+  }, /*#__PURE__*/React.createElement(Card, {
+    card: card
+  }));
+}

package/dist/CustomCardRender/index.less

@@ -0,0 +1,2 @@
+.t-agent-custom-card-render {
+}

package/dist/EchartsBlockRender/index.js

@@ -0,0 +1,73 @@
+import Render from './index.rjs';
+import logger from '../logger';
+import { getSystemInfoSync } from '@ray-js/ray';
+
+// eslint-disable-next-line no-undef
+Component({
+  properties: {
+    canvasId: {
+      type: String,
+      value: 'chart'
+    },
+    width: {
+      type: Number,
+      value: 564
+    },
+    height: {
+      type: Number,
+      value: 564
+    },
+    content: {
+      type: String,
+      value: '{}'
+    }
+  },
+  data: {
+    loading: true,
+    error: false
+  },
+  lifetimes: {
+    attached() {
+      this.rjs = new Render(this);
+    },
+    ready: function () {
+      logger.debug('EchartsBlockRender ready', {
+        canvasId: this.data.canvasId,
+        content: this.data.content
+      });
+      this.updateContent(this.data.content);
+    }
+  },
+  methods: {
+    updateContent: function (content) {
+      try {
+        logger.debug('EchartsBlockRender update', {
+          canvasId: this.data.canvasId,
+          content
+        });
+        const data = JSON.parse(content);
+        if (data.option) {
+          const pixelRatio = getSystemInfoSync().pixelRatio;
+          this.rjs.update(this.data.canvasId, pixelRatio, data.option);
+          this.setData({
+            loading: false,
+            error: false
+          });
+        } else {
+          this.setData({
+            error: true
+          });
+        }
+      } catch (e) {
+        this.setData({
+          loading: true
+        });
+      }
+    }
+  },
+  observers: {
+    content: function (content) {
+      this.updateContent(content);
+    }
+  }
+});

package/dist/EchartsBlockRender/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/dist/EchartsBlockRender/index.less

@@ -0,0 +1,26 @@
+.t-agent-echarts-block-render {
+  position: relative;
+}
+
+.t-agent-echarts-block-render-loading {
+  --t-agent-echarts-block-render-loading-size: 80rpx;
+  position: absolute;
+  top: calc(50% - var(--t-agent-echarts-block-render-loading-size) / 2);
+  left: calc(50% - var(--t-agent-echarts-block-render-loading-size) / 2);
+  width: var(--t-agent-echarts-block-render-loading-size);
+  height: var(--t-agent-echarts-block-render-loading-size);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("./loading.svg");
+  animation: t-agent-message-input-rotating 2s infinite;
+}
+
+@keyframes t-agent-echarts-block-render-loading-rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/EchartsBlockRender/index.rjs

@@ -0,0 +1,15 @@
+export default Render({
+  myChart: null,
+  async update(canvasId, devicePixelRatio, option) {
+    if (!this.myChart) {
+      const canvas = await this.instance.getCanvasById(canvasId)
+      const echarts = await requirePlugin('rjs://echarts')
+
+      this.myChart = echarts.init(canvas, undefined, {
+        devicePixelRatio,
+      })
+    }
+    // 使用刚指定的配置项和数据显示图表。
+    this.myChart.setOption(option, true)
+  },
+})

package/dist/EchartsBlockRender/index.tyml

@@ -0,0 +1,12 @@
+<view
+  class="t-agent-echarts-block-render"
+  style="width: {{width}}rpx;height: {{height}}rpx;"
+>
+  <canvas
+    canvas-id="{{canvasId}}"
+    style="width: {{width}}rpx;height: {{height}}rpx"
+    id="{{canvasId}}"
+    type="2d"
+  />
+  <view ty:if="{{loading}}" class="t-agent-echarts-block-render-loading"></view>
+</view>

package/dist/EchartsBlockRender/loading.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735889067185" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1851" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 170.666667v85.333333a256 256 0 1 1-223.573333 131.2L213.930667 345.6A341.333333 341.333333 0 1 0 512 170.666667z" fill="#000000" opacity=".3" p-id="1852"></path></svg>

package/dist/LowCodeCardRender/index.d.ts

@@ -0,0 +1,8 @@
+import './index.less';
+import React from 'react';
+import { ChatCardObject } from '@ray-js/t-agent';
+interface Props {
+    card: ChatCardObject;
+}
+export default function LowCodeCardRender({ card }: Props): React.JSX.Element;
+export {};

package/dist/LowCodeCardRender/index.js

@@ -0,0 +1,14 @@
+import './index.less';
+import { View } from '@ray-js/components';
+import React from 'react';
+import { useTileProps } from '../hooks';
+export default function LowCodeCardRender(_ref) {
+  let {
+    card
+  } = _ref;
+  // const { data, type } = card;
+  useTileProps();
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-low-code-card-render"
+  });
+}

package/dist/LowCodeCardRender/index.less

@@ -0,0 +1,2 @@
+.t-agent-low-code-card-render {
+}

package/dist/MarkdownRender/BlockParser.d.ts

@@ -0,0 +1,18 @@
+import MarkdownIt from 'markdown-it';
+import { MarkdownBlock } from '../types';
+export declare class BlockParser {
+    readonly prefix: string;
+    readonly types: string[];
+    readonly richTextClassName: string;
+    private list;
+    private pendingBlocks;
+    private currentInput;
+    constructor(prefix: string, types: string[], richTextClassName: string);
+    static plugin(MD: MarkdownIt): void;
+    isSupportedType(type: string): boolean;
+    addBlock(block: Omit<MarkdownBlock, 'id'>): string;
+    parse(input: string): MarkdownBlock[];
+    private split;
+    private parseBlock;
+    private lineToPosition;
+}

package/dist/MarkdownRender/BlockParser.js

@@ -0,0 +1,261 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "core-js/modules/es.regexp.constructor.js";
+import "core-js/modules/es.regexp.dot-all.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.string.trim.js";
+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 "core-js/modules/web.dom-collections.iterator.js";
+import MarkdownIt from 'markdown-it';
+import { full as emoji } from 'markdown-it-emoji';
+import footnote from 'markdown-it-footnote';
+import { generateId } from '@ray-js/t-agent';
+const md = new MarkdownIt();
+function addClassToTag(MD) {
+  // 拦截所有的 token
+  MD.core.ruler.push('_add_class_to_tags', state => {
+    const addClass = token => {
+      if (token.tag === 'img') {
+        token.attrPush(['class', "h2w__img"]);
+        token.attrPush(['style', 'width:100%;height:auto;']);
+        token.attrPush(['width', '100%']);
+        token.attrPush(['height', 'auto']);
+        return;
+      }
+      if (token.children && token.children.length) {
+        token.children.forEach(addClass);
+        return;
+      }
+      if (token.type.endsWith('_open')) {
+        const classIndex = token.attrIndex('class');
+        if (classIndex < 0) {
+          token.attrPush(['class', "h2w__".concat(token.tag)]);
+        }
+      }
+    };
+    state.tokens.forEach(addClass);
+  });
+}
+
+// 为 table 添加 wrapper，使其可以滚动
+function tableWrapper(MD) {
+  // 保存默认的 table_open 和 table_close 渲染规则
+  const defaultTableOpenRender = MD.renderer.rules.table_open || function (tokens, idx, options, env, self) {
+    return self.renderToken(tokens, idx, options);
+  };
+  const defaultTableCloseRender = MD.renderer.rules.table_close || function (tokens, idx, options, env, self) {
+    return self.renderToken(tokens, idx, options);
+  };
+
+  // 重写 table_open 渲染规则，添加 wrapper 的开始标签
+  MD.renderer.rules.table_open = function (tokens, idx, options, env, self) {
+    return '<div class="h2w__tableParent">\n' + defaultTableOpenRender(tokens, idx, options, env, self);
+  };
+
+  // 重写 table_close 渲染规则，添加 wrapper 的结束标签
+  MD.renderer.rules.table_close = function (tokens, idx, options, env, self) {
+    return defaultTableCloseRender(tokens, idx, options, env, self) + '</div>\n';
+  };
+}
+function fenceWrapper(MD) {
+  const defaultFenceRender = MD.renderer.rules.fence || function (tokens, idx, options, env, self) {
+    return self.renderToken(tokens, idx, options);
+  };
+  MD.renderer.rules.fence = function (tokens, idx, options, env, self) {
+    const token = tokens[idx];
+
+    // 在 token 的 attrs 中添加 class 属性
+    token.attrSet('class', 'h2w__code');
+
+    // 使用默认的渲染方法生成代码块的 HTML
+    let html = defaultFenceRender(tokens, idx, options, env, self);
+    if (html) {
+      html = html.replace(/^<pre>/, '<pre class="h2w__pre h2w__fence">');
+    }
+    return html;
+  };
+}
+export class BlockParser {
+  constructor(prefix, types, richTextClassName) {
+    _defineProperty(this, "list", []);
+    _defineProperty(this, "pendingBlocks", []);
+    _defineProperty(this, "currentInput", '');
+    this.prefix = prefix;
+    this.types = types;
+    this.richTextClassName = richTextClassName;
+  }
+  static plugin(MD) {
+    MD.core.ruler.push('parse_block', function (state) {
+      const tokens = state.tokens;
+      const blockParser = state.env.blockParser;
+      for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+
+        // 查找代码块
+        if (token.type === 'fence') {
+          const blockType = token.info.trim();
+          if (blockType && blockParser.isSupportedType(blockType)) {
+            const blockId = blockParser.addBlock({
+              map: token.map,
+              type: blockType,
+              children: token.content.trim()
+            });
+
+            // 替换成 <custom-block- /> 标签
+            tokens[i].type = 'html_inline';
+            tokens[i].content = "<".concat(blockId, " />");
+            tokens[i].tag = '';
+          }
+        }
+      }
+    });
+  }
+  isSupportedType(type) {
+    return this.types.includes(type);
+  }
+  addBlock(block) {
+    const id = "custom-block-".concat(this.prefix, "-").concat(generateId(8));
+    this.pendingBlocks.push(_objectSpread({
+      id
+    }, block));
+    return id;
+  }
+  parse(input) {
+    this.list = this.parseBlock(input);
+    // if (!this.currentInput) {
+    //   // 第一次解析
+    //   this.list = this.parseBlock(input)
+    // } else if (input.length < this.currentInput.length) {
+    //   // 长度有减少，重新开始
+    //   this.list = this.parseBlock(input)
+    // } else if (input === this.currentInput) {
+    //   // 完全相等不需要处理
+    //   return this.list
+    // } else if (input.startsWith(this.currentInput)) {
+    //   // 继续解析
+    //   const last = this.list.pop() // 丢弃掉最后一个 block
+    //   const position = this.lineToPosition(last.map[0], input)
+    //   const delta = input.slice(position)
+    //   const blocks = this.parseBlock(delta)
+    //   this.list = this.list.concat(blocks)
+    // } else {
+    //   // 完全不匹配，重新开始
+    //   this.list = this.parseBlock(input)
+    // }
+
+    this.currentInput = input;
+    return this.list;
+  }
+  split(html, tags) {
+    // 创建匹配自闭合标签的正则表达式
+    const tagPattern = new RegExp("<(".concat(tags.join('|'), ") />"), 'gi');
+    const result = [];
+    let lastIndex = 0;
+
+    // 遍历匹配所有自闭合标签
+    let match;
+    while ((match = tagPattern.exec(html)) !== null) {
+      // 提取自闭合标签前的部分
+      if (match.index > lastIndex) {
+        result.push(html.slice(lastIndex, match.index));
+      }
+      // 提取自闭合标签本身
+      result.push(match[0]);
+      // 更新最后的索引
+      lastIndex = tagPattern.lastIndex;
+    }
+
+    // 添加最后一个标签后的部分
+    if (lastIndex < html.length) {
+      result.push(html.slice(lastIndex));
+    }
+    return result;
+  }
+  parseBlock(input) {
+    const _input = input.replace(/\\n/g, '<br>').replace(/\\<br>/g, '<br>').replace(/\\"/g, '"');
+    this.pendingBlocks = [];
+    const html = md.render(_input, {
+      blockParser: this
+    });
+    if (!this.pendingBlocks.length) {
+      const last = this.list[this.list.length - 1];
+      const id = "".concat(this.prefix, "-block-").concat(this.list.length);
+      const blocks = [{
+        id,
+        type: 'rich-text',
+        map: [last ? last.map[1] + 1 : 1, Infinity],
+        children: "<div class=\"".concat(this.richTextClassName, "\">").concat(html, "</div>")
+      }];
+      return blocks;
+    }
+    const map = new Map();
+    const ids = [];
+    for (const item of this.pendingBlocks) {
+      map.set("<".concat(item.id, " />"), item);
+      ids.push(item.id);
+    }
+    const parts = this.split(html, ids);
+    const blocks = [];
+    let nextBlockLine = 1;
+    let prevTextBlock = null;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const id = "".concat(this.prefix, "-block-").concat(i);
+      if (map.has(part)) {
+        const block = map.get(part);
+        blocks.push({
+          id,
+          map: block.map,
+          type: block.type,
+          children: block.children
+        });
+        nextBlockLine = block.map[1] + 1;
+        if (prevTextBlock) {
+          prevTextBlock.map[1] = block.map[0] - 1;
+        }
+        prevTextBlock = null;
+      } else {
+        const block = {
+          id,
+          map: [nextBlockLine, Infinity],
+          type: 'rich-text',
+          children: "<div class=\"".concat(this.richTextClassName, "\">").concat(part, "</div>")
+        };
+        prevTextBlock = block;
+        blocks.push(block);
+      }
+    }
+    return blocks;
+  }
+  lineToPosition(lineNumber, input) {
+    let position = 0;
+    if (lineNumber === 1) {
+      return position;
+    }
+    if (lineNumber === Infinity) {
+      const lastNewlineIndex = input.lastIndexOf('\n');
+      return lastNewlineIndex === -1 ? 0 : lastNewlineIndex + 1;
+    }
+    let currentLine = 1; // 当前行号
+
+    // 从文本开始搜索每个换行符
+    while (currentLine < lineNumber) {
+      // 查找下一个换行符的位置
+      position = input.indexOf('\n', position);
+
+      // 如果没有找到换行符，说明行号超出范围
+      if (position === -1) {
+        return input.lastIndexOf('\n') + 1 || 0;
+      }
+
+      // 换行符的位置 + 1 为下一行的起始位置
+      position += 1;
+      currentLine++;
+    }
+    return position;
+  }
+}
+md.use(addClassToTag).use(tableWrapper).use(fenceWrapper).use(emoji).use(footnote).use(BlockParser.plugin);