Vue首个AI组件库ant-design-x-vue 组件详解

文
章
目
录

• 一、ant–design-x-vue是什么
• 二、ant-design-x-vue包含哪些实用组件
• （一）对话气泡组件
• （二）管理对话组件
• （三）欢迎组件
• （四）提示集组件
• （五）输入框组件
• （六）附件上传组件
• 三、ant-design-x-vue 组件库亮点
• （1）独特的RICH设计范式
• （2）创新的AGI混合界面（Hybrid-UI）
• 四、ant-design-x-vue 组件库不足之处
• 扩展阅读

最近，在Vue的生态中首个专注于把AI能力融入实际应用的组件库“ant-design-x-vue”正式发布！这对于Vue开发者来说，能让他们在开发AI应用的前端界面时更加轻松，大大降低了开发门槛。下面就带大家详细了解下这个组件库。

一、ant-design-x-vue是什么

简单来说，“ant-design-x-vue”其实就是@ant-design/x的Vue版本。它的出现，主要是为了帮助Vue开发者更便捷地搭建AI应用。以前，开发AI应用的前端部分，对开发者的技术要求比较高，现在有了这个组件库，开发过程就变得容易多了。

官网地址：https://antd-design-x-vue.netlify.app/

二、ant-design-x-vue包含哪些实用组件

（一）对话气泡组件

这个组件在AI聊天对话中起着关键作用，主要负责聊天界面的布局。比如说，我们在和AI聊天时，看到的一条条对话展示效果，就是由它来实现的。而且，它还支持各种界面配置，像加载中、打字效果这些细节，都能通过它来设置，让聊天界面更加生动。

（二）管理对话组件

通常，这个组件会放在AI聊天界面的左侧，用来展示对话列表。借助它提供的各种API操作，我们可以对对话进行分组管理，还能按照自己的需求进行排序，方便查找和管理历史对话。

（三）欢迎组件

当用户第一次打开AI聊天界面时，首先映入眼帘的就是欢迎组件。它一般会展示一些友好的问候语，以及关于组件库或AI应用的介绍信息，给用户留下良好的第一印象。

（四）提示集组件

提示集组件的功能很丰富，支持多种布局样式。它的用途也很多，比如在用户刚打开聊天界面时，可以给出一些开场白提示；当AI回答完问题后，还能给出提问建议，引导用户继续对话。像下面这些示例，就是提示集组件可能展示的内容：

• 灵感激发与奇妙提示：“有什么新项目的灵感火花吗？”
• 效率提升挑战：“怎样才能工作得又快又好？”
• 常见问题解答：“如何解决常见问题？分享些小技巧！”
• 背景信息揭秘：“帮我了解下这个话题的背景。”
• 讲个笑话：“为什么蚂蚁不会生病？因为它们有小小的抗体（ant-bodies）！”

（五）输入框组件

输入框组件为开发者提供了多种布局风格选择。除了基本的文字输入功能，它还支持文件上传、粘贴图片等实用功能，大大丰富了用户与AI交互的方式。

（六）附件上传组件

在和AI交互时，如果需要上传一些文件，就可以用到附件上传组件。它支持多种风格的布局样式，操作起来很方便。不管是点击上传，还是直接把文件拖放到指定区域都可以。而且，它支持多种文件类型，像图片、视频、音频、文档等都能上传。

这个组件库拥有各种各样实用的组件，汇总下来大致可以分为以下几类：

• 通用组件：
  • Bubble组件：在对话场景中，它负责展示会话消息气泡，并且支持多种不同的布局方式，能满足不同的界面设计需求。
  • Conversations组件：用来管理多个会话，方便查看历史聊天记录，让用户随时回顾之前的对话内容。
• 唤醒组件：
  • Welcome组件：当会话加载的时候，它会自动插入欢迎语，给用户一个友好的开场。
  • Prompts组件：可以展示与当前上下文相关的问题或者建议，帮助引导用户进行更有针对性的对话。
• 表达组件：
  • Sender组件：主要用于构建会话输入框，而且支持开发者自定义样式，让输入框更贴合项目整体风格。
  • Attachments组件：负责展示和管理附件信息，比如图片、文件等。
  • Suggestion组件：能为用户提供快捷输入提示，提高输入效率。
• 确认组件：
  • ThoughtChain组件：用于展示AI的思考过程或者给出的结果，让用户更清楚AI是如何得出结论的。
• 工具组件：
  • useXAgent组件：主要作用是对接AI模型推理服务，让项目能够使用AI模型进行运算和推理。
  • useXChat组件：帮助管理AI对话应用的数据流，保证数据的有序传输和处理。
  • XStream组件：处理数据流，还支持流式传输，提升数据处理效率。
  • XRequest组件：负责向AI服务发起请求，获取所需的数据。
  • XProvider组件：实现全局化配置管理，方便开发者对整个项目的相关配置进行统一管理。

三、ant-design-x-vue 组件库亮点

（1）独特的RICH设计范式

Ant Design X Vue采用了RICH设计范式，这能给用户带来丰富、沉浸、连贯并且很人性化的交互体验。无论在什么样的AI场景下，都能很好地适应，让用户操作起来更加舒适、自然。

（2）创新的AGI混合界面（Hybrid-UI）

它融合了图形用户界面（GUI）和自然会话交互两种方式。用户在使用同一个应用的时候，可以根据自己的需求和习惯，自由地在这两种交互方式之间切换，大大提升了使用体验。

四、ant-design-x-vue 组件库不足之处

虽然ant-design-x-vue的发布给Vue开发者带来了很多便利，但从官方文档演示来看，这个组件库在一些场景下，布局兼容方面还存在一些小问题。不过，这毕竟只是第一个版本，相信随着后续作者的不断更新优化，这些问题都会得到解决，它也会变得越来越好用。感兴趣的小伙伴，可以前往ant-design-x-vue的开源仓库，了解更多详细信息。

扩展阅读

如何使用 Ant Design X Vue AI组件库

文章目录 一、Ant Design X Vue究竟是什么 二、如何使用Ant Design X Vue （一） […]