在Deep-Chat项目中实现消息推荐按钮的技术方案

背景介绍

Deep-Chat是一个功能强大的聊天组件库，开发者可以通过配置实现各种定制化的聊天界面效果。本文将详细介绍如何在Deep-Chat中实现位于输入框上方的推荐按钮功能，这种设计常见于智能客服系统或AI助手应用中，用于引导用户快速发起常见问题咨询。

核心实现原理

实现这一功能的关键在于巧妙利用Deep-Chat的消息样式配置和角色定义系统。通过为特定类型的消息定义自定义样式，我们可以控制其显示位置和外观，使其固定在输入框上方而非传统的消息流中。

具体实现步骤

1. 定义消息样式

首先需要配置messageStyles属性，为推荐消息创建特殊的样式规则：

chatElementRef.messageStyles = {
  html: {
    recommendation: {  // 自定义角色名称
      outerContainer: {
        position: 'absolute',  // 绝对定位
        bottom: '60px',       // 距离底部60px
      },
      bubble: {
        backgroundColor: 'unset',  // 透明背景
        padding: '0px',            // 无内边距
      },
    },
  },
};

这段代码定义了一个名为"recommendation"的自定义消息角色，将其定位方式设为绝对定位，并放置在距离底部60px的位置，同时移除了默认的消息气泡样式。

2. 创建推荐按钮消息

接下来，通过initialMessages属性初始化包含推荐按钮的HTML内容：

chatElementRef.initialMessages = [
  {
    html: `
      <div class="deep-chat-temporary-message">
        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 5px">虾吃什么？</button>
        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 6px">虾会炒饭吗？</button>
        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 6px">什么是特殊虾种？</button>
      </div>`,
    role: 'recommendation',  // 使用自定义角色
  },
];

这里使用了Deep-Chat内置的按钮样式类(deep-chat-button和deep-chat-suggestion-button)来保持界面风格一致，同时为每个按钮添加了上边距以形成垂直排列。

技术要点解析

1. 自定义消息角色：通过定义非标准角色(如这里的"recommendation")，我们可以为特定类型的消息创建独特的显示规则。

2. 绝对定位技巧：将消息容器设为绝对定位是关键，这使得消息可以脱离常规的消息流，固定在指定位置。

3. 样式覆盖：通过设置backgroundColor为unset和padding为0px，我们移除了默认的消息气泡样式，使推荐按钮能够以更自然的方式呈现。

4. HTML内容注入：使用html属性可以直接注入自定义HTML结构，提供了极大的灵活性。

进阶应用建议

1. 动态更新推荐：可以通过API动态获取推荐问题列表，然后更新initialMessages实现内容动态变化。

2. 交互响应：为按钮添加点击事件处理，当用户点击推荐问题时自动填充到输入框或直接发送。

3. 条件显示：可以结合业务逻辑，只在特定场景(如用户长时间未输入)显示推荐按钮。

4. 样式定制：进一步自定义按钮样式以匹配应用主题，如修改颜色、圆角、悬停效果等。

兼容性说明

需要注意的是，此功能需要较新版本的Deep-Chat组件(9.0.155或更高)，开发者可能需要使用开发版包(deep-chat-dev或deep-chat-dev-react)来获取完整的样式配置支持。

总结

通过Deep-Chat强大的样式配置和消息系统，开发者可以灵活实现各种定制化的聊天界面效果。本文介绍的推荐按钮实现方案不仅适用于问题推荐场景，其原理也可应用于其他需要固定位置显示辅助内容的场景，如快捷操作栏、上下文提示等。这种实现方式既保持了Deep-Chat的核心功能，又扩展了其应用可能性。