如何为RASA的actions.py文件中创建的按钮添加点击动画？

首先明确核心逻辑：RASA后端actions.py中定义的按钮仅负责传递按钮的基础配置（文本、触发payload、自定义参数等），点击动画属于前端渲染层的交互效果，需要前后端配合完成，具体操作步骤如下： #

步骤1：在actions.py中给目标按钮添加自定义标记 #

你可以在按钮的配置字典中新增自定义字段，用来标识哪些按钮需要加载动画、加载什么类型的动画，RASA会自动将自定义字段透传给前端，无需额外修改后端接口配置。
示例代码如下：

# actions.py 按钮定义示例
from rasa_sdk import Action, Tracker
from rasa_sdk.executor import CollectingDispatcher

class ActionShowOptions(Action):
    def name(self) -> str:
        return "action_show_options"

    def run(self, dispatcher: CollectingDispatcher, tracker: Tracker, domain: dict) -> list:
        dispatcher.utter_message(
            text="请选择你需要的操作：",
            buttons=[
                {
                    "title": "确认提交",
                    "payload": "/confirm_submit",
                    "custom_anim": "bounce" # 给需要动画的按钮加标记，值对应动画类型
                },
                {
                    "title": "重新填写",
                    "payload": "/refill_form",
                    "custom_anim": "shake" # 不同按钮可以指定不同动画
                },
                {
                    "title": "取消操作",
                    "payload": "/cancel" # 不需要动画的按钮无需加字段
                }
            ]
        )
        return []

步骤2：在前端侧适配动画逻辑 #

前端拿到RASA返回的按钮列表后，遍历判断每个按钮是否有自定义动画标记，给对应按钮绑定对应的CSS动画即可。
以网页端前端实现为例：

• 首先定义动画对应的CSS样式：

/* 点击弹跳动画 */
.anim-bounce:active {
    animation: bounce 0.3s ease-in-out;
}
@keyframes bounce {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* 点击震动动画 */
.anim-shake:active {
    animation: shake 0.2s ease-in-out;
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

• 渲染按钮时匹配动画标记，伪代码如下：

// 接收RASA返回的消息内容，遍历按钮列表
const buttonList = rasaMessage.buttons || []
buttonList.forEach(btnConfig => {
    const btn = document.createElement("button")
    btn.innerText = btnConfig.title
    // 匹配自定义动画标记，添加对应类名
    if (btnConfig.custom_anim) {
        btn.classList.add(`anim-${btnConfig.custom_anim}`)
    }
    // 原有按钮点击发送payload的逻辑保持不变
    btn.addEventListener("click", () => sendRasaPayload(btnConfig.payload))
    // 将按钮插入到聊天窗口中
    chatWindow.appendChild(btn)
})

注意事项 #

• 自定义字段的命名不要和RASA官方保留的按钮字段（title、payload、type等）冲突，避免出现解析异常
• 如果你使用的是第三方RASA前端组件，可以直接参考组件的自定义按钮渲染文档，通用组件基本都支持识别按钮自定义参数、注入自定义类名的能力

内容的提问来源于stack exchange，提问作者Shakir Sadiq