AI 助手好写，太好写了，分分钟写出来，不用一周，三分钟！

萌萌哒草头将军

发布于 2025-05-22 10:27:03

3360

文章被收录于专栏：前端框架前端框架

前言

产品最近要求在老系统里加一个AI助手功能，类似下面这样：

AI 助手

正好最近在刷到了 Ant Design X 组件库，那就马上来封装一个通用的AI助手组件吧!

正文

Ant Design X 专为 AI 驱动的用户界面量身定制。它在 AntD 的基础上扩展。

基于 Antd 的组件

该库提供了一系列丰富的组件，这些组件高度可定制且模块化。这些组件内置了数据消费工具，支持与后端服务的无缝集成，并高效管理数据流。

和后端无缝衔接的工具

但是 Ant Design X 最大的问题就是组件过于零散，想马上实现一个完整的聊天助手比较困难，所以我进行了一次封装，方便大家更快完成开发！

我的封装仅涉及到 UI 布局组装，不涉及具体细节样式，高度可自定义！

antdx 给你的是零散的部件，而 antdx-pro 给你的是成型的骨骼！

细节的雕刻，需要自己完成！

仓库：https://github.com/mmdctjj/antdx-pro

文档：https://mmdctjj.github.io/antdx-pro

明确需求

首先，我们需要明确一个AI助手应该有哪些内容

欢迎界面

欢迎界面包含：欢迎区、建议区、输入区！

聊天页面

聊天页面主要包含：输出区和输入区！

开始封装 UI

现在，我们开始封装 UI ，如果你刚上手一定要记得先阅读下文档，这里我尽量保持原有的 API 结构，再次基础上，我们定义组件的 props

interface IAssistantProps {
  /** 欢迎 **/
  welcomeProps?: WelcomeProps
  /** 聊天 **/
  bubbleProps?: BubbleProps,
  /** 建议 **/
  promptsProps?: PromptsProps
  /** 输入 **/
  expressProps?: {
    attachmentsProps?: AttachmentsProps,
    senderProp?s: SenderProps,
    suggestionProps?: SuggestionProps
  }
}

接下来写组件，要保证聊天区始终在底部，所以打算使用 flex 布局！

import { Button, Flex } from"antd";
import {
  Attachments,
  AttachmentsProps,
  Bubble,
  Prompts,
  PromptsProps,
  Sender,
  SenderProps,
  Suggestion,
  SuggestionProps,
  Welcome,
  WelcomeProps,
} from"@ant-design/x";
import { LinkOutlined, UserOutlined } from"@ant-design/icons";
import { BubbleListProps } from"@ant-design/x/es/bubble/BubbleList";

interface IAIAssistantProps {
/** 欢迎 **/
  welcomeProps?: WelcomeProps;
/** 聊天 **/
  bubbleListProps?: BubbleListProps;
/** 建议 **/
  promptsProps?: PromptsProps;
/** 输入 **/
  expressProps?: {
    attachmentsProps?: AttachmentsProps;
    senderProps?: SenderProps;
    suggestionProps?: SuggestionProps;
  };
}

exportconst AIAssistant = (props: IAIAssistantProps) => {
return (
    <Flex
      vertical
      gap="middle"
      style={{ height: `100%` }}
      justify="space-between"
    >
      {!props?.bubbleListProps?.items?.length ? (
        <Flex vertical gap="middle">
          <Welcome {...props?.welcomeProps} />
          <Prompts {...props?.promptsProps} />
        </Flex>
      ) : (
        <Bubble.List {...(props?.bubbleListProps ?? {})} />
      )}
      <Flex vertical gap={0}>
        {!!props?.expressProps?.attachmentsProps?.items?.length && (
          <Attachments {...(props?.expressProps?.attachmentsProps ?? {})} />
        )}
        <Suggestion
          {...(props?.expressProps?.suggestionProps ?? { items: [] })}
        >
          {({ onTrigger, onKeyDown }) => {
            return (
              <Sender
                {...props.expressProps?.senderProps}
                onChange={(nextVal) => {
                  if (nextVal === "/") {
                    onTrigger();
                  } else if (!nextVal) {
                    onTrigger(false);
                  }
                  props?.expressProps?.senderProps?.onChange?.(nextVal);
                }}
                onKeyDown={onKeyDown}
              />
            );
          }}
        </Suggestion>
      </Flex>
    </Flex>
  );
};

代码可以看这里：http://localhost:8000/antdx-pro/components/copilot

首页会显示 欢迎语 和 提示建议，开始聊天后这部分会隐藏！