TDesign AI Chat - Vue3.x 可用!腾讯出品的 AIGC 交互对话组件,免费开源、包含设计资源

TDesign AI Chat - Vue3.x 可用!腾讯出品的 AIGC 交互对话组件,免费开源、包含设计资源

各位前端开发者有遇到做 AI Chat 项目的聊天交互界面需求了吗?TDesign 出品的这个组件很不错,推荐给大家。

TDesign AI Chat 是 TDesign 为 AIGC 场景开发的 UI 系列组件中的一部分,主要用于开发目前非常流行的 ChatBot 对话交互场景。最近 TDesign AI Chat 发布了 0.2 的版本,增加了思考过程、增强版的可扩展输入框和配套加载动画等相关组件,同时配套内置支持了多语言能力,让我们开发者可以快速构建具有 AI ChatBot 对话交互功能的项目。

组件预览

TDesign AI Chat 适配的是桌面端,目前提供的是 vue3.x 版本,据官方透露,很快就会支持 React

Chat 组件介绍

TDesign AI Chat 的组件由多个组成 Chat 组件的子组件。开发过程中,如果 Chat 组件无法满足需求,可以尝试用子组件自由组合来满足更多的使用场景。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

NPM 安装

基础使用

这种方式会全量注册所有组件,适合在项目大规模使用这个系列组件。当然支持摇树优化的按需引入,还有多语言支持(这个很有必要)、自定义主题等,具体方法参考官方文档。

TDisign AI Chat 官网

重点说说 ChatContent 对话内容组件

ChatContent 是用于渲染对话内容的组件,内置了轻量化 Markdown 渲染效果, 能够满足一定程度的对话内容需求,体现在下面几点:

除了这些,TDesign AI Chat 还内置了对话内容属性的判断,用户侧的文本不做转义,按用户输入的默认格式显示,不会对代码做高亮;Bot 侧的文本消息,则默认开启 Markdown 的相关渲染逻辑。如果这些都要自己去实现,那真的需要费不少心思。

轻松接入流式传输

流式输出,也称为流式传输,是指服务器持续地将数据推送到客户端,而不是一次性发送完毕。这种模式下,连接一旦建立,服务器就能实时、不间断地发送更新给客户端。

因为受当前大模型推理时间、token 数量限制,这也是目前 AIGC 交互的主要数据传输方式。举例来说,前端收到的流式数据是这样的:

根据 TDesign AI Chat 官方提供的代码片段,可以很容易解析和接入:

看到这里,相信各位开发者应该也懂了,TDesign AI Chat 适用于用来搭建类似 ChatGPT 这样的对话式交互应用,无论是在已有项目里内嵌 AIGC,还是搭建全新的 AI 对话,TDesign AI Chat 都可以帮助我们节省大量的时间,建议搭配 TDesign 这套 UI 组件库一起使用。

组件文档

如果你更习惯用阿里的 AntDesign,Ta 家也出了类似的 AI 对话组件 Lobe UI

对了,TDesign AI Chat 最新的 0.2 版本也发布了 Figma 的设计资源,方便产品经理和设计师取用。

TDesign AI Chat 属于 TDesign 开源组件库的一份子,同样是采用 MIT 开源协议,我们可以自由地下载来使用,用在商业项目上也没有问题。

原文链接:https://www.thosefree.com/tdesign-ai-chat

### 同盾 TDSign 使用说明 同盾 TDSign 是一款用于小程序开发中的签名验证组件,主要应用于安全性和数据校验场景中[^1]。 #### 组件功能概述 TDSign 提供了一套完整的接口来处理签名生成和验证工作。通过该工具可以有效防止请求被篡改并保障通信的安全性。 #### 安装与引入 为了使用此插件,在项目根目录下执行 npm install 命令安装依赖包: ```bash npm install @tencent/tdesign-miniprogram --save ``` 接着在 `app.json` 或页面配置文件里声明需要使用的组件列表: ```json { "usingComponents": { "td-button": "@tencent/tdesign-miniprogram/button/index" } } ``` 注意这里是以按钮为例展示如何注册自定义组件;对于 TDSign 的具体路径需参照实际库结构进行调整。 #### 初始化设置 创建实例前先准备好必要的参数选项,比如应用 ID 和密钥等信息。这些通常由服务端提供给客户端调用时传入。 ```javascript import { createSign } from '@tencent/tdesign-miniprogram/signature'; const signInstance = createSign({ appId: 'your_app_id', secretKey: 'your_secret_key' }); ``` #### 调用API 完成初始化之后就可以利用所提供的 API 方法来进行操作了。例如获取当前时间戳对应的签名字符串: ```javascript async function getSignature() { const timestamp = Date.now(); try { let result = await signInstance.getSignature({timestamp}); console.log('Generated signature:', result); } catch (error) { console.error('Failed to generate signature', error.message); } } getSignature(); ``` 以上代码片段展示了怎样异步地获得一个基于特定时间戳计算出来的签名值。 #### 错误处理机制 当遇到异常情况时,SDK 内部会抛出错误对象以便开发者能够及时捕获并作出相应反应。建议总是包裹一层 try-catch 结构以确保程序稳定性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值