DOCSEARCHbyAlgolia
Submit Docs

Ant Design X Vue

repository·main·Indexed 23 days ago

https://github.com/wzc520pyfm/ant-design-x-vue

A Vue implementation of Ant Design X, providing a set of components for building advanced AI-driven user interfaces (LUI). It includes specialized components for AI chat scenarios, such as Bubble, Bubble.List, Actions, and Attachments, with support for data stream management and OpenAI-standard model services. Compatible with Vue 3, TypeScript, and Vite.

Tokens
19.5K
Snippets
42
Records
159
Agent score
81%

What's inside ant-design-x-vue

  1. Overview of ant-design-x-vue

    main

    ant-design-x-vue is a Vue implementation of @ant-design/x. It is an advanced AI component library designed for the Vue ecosystem to simplify the process of integrating artificial intelligence into applications.

    Key features include:

    • Highly customizable AI components: Designed to help developers easily integrate conversational AI into their apps.
    • API solutions: Supports direct connection to existing AI services via token authentication, enabling seamless AI dialogue and interaction.
    • Use cases: Building intelligent chat applications, enhancing user interaction experiences, and accelerating AI capability integration.

  2. Use the Attachments component

    main
    The Attachments component is used to display a collection of attachment information. It is suitable for scenarios where you need to show a list of files, such as in a chat interface or a file upload area. It supports drag-and-drop via the getDropContainer prop and can be customized with placeholders and overflow styles.

  9. Use auto-imported components with AX prefix

    main

    When using the auto-import configuration, components starting with the AX prefix are automatically resolved to ant-design-x-vue components. For example, AXBubble is equivalent to import { Bubble as AXBubble } from 'ant-design-x-vue'.

    <script setup>
// auto import equals to
// import { Bubble as AXBubble } from 'ant-design-x-vue';
</script>

<template>
  <AXBubble content="Hello AI" />
</template>

  10. Use useXAgent for model scheduling

    main

    The useXAgent hook is used for model scheduling, providing an abstraction for data flows when interacting with backend models. It allows you to manage requests, handle streaming data, and interface with various AI services.

    Use useXAgent when you need to:

    • Interact with backend models.
    • Provide an abstracted data stream for AI interactions.
    • Implement custom request protocols or use preset configurations.

  11. Configure Conversations grouping and sorting

    main

    You can enable grouping in the Conversations component using the groupable prop.

    • Basic Grouping: Set groupable to true. By default, items will be grouped based on the group field within each Conversation object.
    • Custom Sorting: Use the groupable.sort function to define the order of groups.
    • Custom Group Titles: Use the groupable.title function to provide a custom render function for the group headers. The function receives the group name and an object containing a GroupTitle component.