Info

Agently UI，数据即 UI，帮你 0 前端门槛快速构建 AI 应用。定义数据，即可快速构建 Web Demo

Agently UI, Data as UI, helps you quickly build AI applications with zero front-end barriers.

Install

npm install @agently-ui/nodejs

Usage

const useAgentlyUI = require('@agently-ui/nodejs');

// 在连接时做处理
useAgentlyUI().onReady(async (app) => {
  /**
   * 测试表单
   */
  const dataset = app.createDataset('test');
  const fieldName = dataset.createField('姓名');
  const fieldAge = dataset.createField('年龄');
  const submitBtn = dataset.createButton('提交');
  const resetBtn = dataset.createButton('重置');
  const hideBtn = dataset.createButton('隐藏年龄');
  
  fieldName.set('default_name');
  fieldAge.set(18);

  // 1、表单提交数据
  submitBtn.onClick(async () => {
    // 单个获取数据
    const [name, age] = await Promise.all([fieldName.get(), fieldAge.get()]);
    // 一次获取所有数据
    const allData = await dataset.get();
    fieldName.set(`${name}_copy`);
    fieldAge.set(`${age}_copy`);
    await app.user.message('已提交成功，并重置了当前值为 copy')
    console.log(allData, name, age);
  })
  
  // 2、表单重置
  resetBtn.onClick(async () => {
    // 与用户交互是否重置
    const status = await app.user.confirm('是否重置');
    // 如果用户确认了，执行重置操作
    if (status) {
      await dataset.reset();
      app.user.message('已成功重置', 'success');
      return
    }
    app.user.message('不做操作');
  });

  hideBtn.onClick(async () => {
    await fieldAge.hide();
  })
  
  /**
   * 内容展示
   */
  const output = app.createOutput('无名');
  // 0、简单文本
  const plainText = output.createText();
  plainText.append('Hello world~00');
  // plainText.set('Hello world~');
  plainText.append('Hello world~22');

  // 1、列表
  const testList = output.createList();
  // 追加
  testList.append('你好啊1');
  testList.append('你好啊2');
  // 覆盖设置
  testList.set(['你好3', '你好4', '你好5'])
  // 往指定位置覆盖更新（以下更新索引位置 2 的内容）
  testList.updateItem(2, '你好5' + '追加的内容')
  // testList.clear()
  // 获取
  testList.get().then(a => {
    console.log(a);
  })
  
  // 2、markdown
  const testMarkdown = output.createMarkdown();
  testMarkdown.set('## 哈哈哈\n\n> Hello 啊~')
  testMarkdown.append('\n- 列表追加的')
  testMarkdown.append('\n```typescript\nconst test: any = 1\n```')

  // 3、chatList（对话列表）
  const chatList = output.createChatList();
  chatList.set([
    {
      id: 'id11111',
      role: 'user',
      content: '你是谁'
    },
    {
      role: 'sys',
      type: 'tips',
      content: '你是谁'
    },
    {
      role: 'sys',
      // status: 'process',
      content: '我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI我是AI'
    },
    {
      role: 'user',
      content: '哦哦 AI 啊',
      status: 'error'
    },
  ]);
  // 往整个列表里追加
  chatList.append({ role: 'user', content: 'hahah ' })
  // 往指定条目覆盖更新（基于 id 唯一标识）
  chatList.updateItem(
    { id: 'id11111' },
    {
      id: 'id11111',
      role: 'user',
      content: '你是谁' + '哈哈哈，后来追加的'
    }
  )

  // 4、log（日志）
  const log = output.createLog();
  log.append(`[0] Server has started
[0] The WS Server start on port "4030".
[0] New connection: d1zn3T0UoZKEeX-lAAAB
[0] App startup: t-eafa5596-ed15-4bf3-bd6b-df0b9ab4b13f`);

  app.user.notice('Hello 啊~')
});