自定义BotFramework消息对齐：实现阿拉伯语右对齐、英语左对齐

核心思路 #

通过为每个消息Activity标记语言标识（Locale或自定义ChannelData），在WebChat端根据标识动态设置CSS样式，实现阿拉伯语消息右对齐、英语消息左对齐的效果。

步骤1：在后端（C#）标记消息语言 #

在发送消息时，为Activity设置Locale属性或自定义ChannelData，传递语言信息：

// 示例：发送阿拉伯语消息并标记语言
var arabicReply = MessageFactory.Text("مرحباً بك في الدردشة");
arabicReply.Locale = "ar"; // 标准语言代码，阿拉伯语为"ar"
// 可选：也可通过ChannelData传递自定义语言标识
arabicReply.ChannelData = new { language = "ar" };
await turnContext.SendActivityAsync(arabicReply, cancellationToken);

// 英语消息标记
var englishReply = MessageFactory.Text("Welcome to the chat");
englishReply.Locale = "en";
await turnContext.SendActivityAsync(englishReply, cancellationToken);

步骤2：WebChat端动态设置样式 #

有两种简便实现方式，按需选择：

方式一：自定义Activity渲染器（React）

通过自定义渲染组件为消息容器添加语言类名，再用CSS控制对齐：

import React from 'react';
import { createDirectLine } from 'botframework-directlinejs';
import { WebChat } from 'botframework-webchat';

// 自定义Activity渲染组件
const CustomActivityRenderer = ({ activity, children }) => {
  // 从Locale或ChannelData获取语言标识
  const language = activity.locale || (activity.channelData?.language);
  const messageClass = language === 'ar' ? 'rtl-message' : 'ltr-message';

  return (
    <div className={`webchat__activity ${messageClass}`}>
      {children}
    </div>
  );
};

// 初始化WebChat
const App = () => {
  const directLine = createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });

  return (
    <WebChat
      directLine={directLine}
      renderActivity={CustomActivityRenderer}
    />
  );
};

export default App;

对应的CSS样式：

.rtl-message {
  text-align: right;
  direction: rtl; /* 确保阿拉伯语文字正确排版 */
}

.ltr-message {
  text-align: left;
  direction: ltr;
}

方式二：纯CSS+Locale属性匹配

如果WebChat已自动将activity.Locale注入消息元素的data-locale属性，可直接用CSS选择器控制：

/* 阿拉伯语消息右对齐 */
.webchat__activity[data-locale="ar"] {
  text-align: right;
  direction: rtl;
}

/* 英语消息保持左对齐 */
.webchat__activity[data-locale="en"] {
  text-align: left;
  direction: ltr;
}

步骤3：处理用户输入的消息语言 #

对用户发送的消息，添加语言检测逻辑，自动标记Locale：

// 语言检测工具函数（简单实现，可替换为专业库）
const detectMessageLanguage = (text) => {
  // 匹配阿拉伯语字符范围
  const arabicCharRegex = /[\u0600-\u06FF]/;
  return arabicCharRegex.test(text) ? 'ar' : 'en';
};

// 发送消息中间件，为用户输入添加Locale
const sendMessageMiddleware = () => next => action => {
  if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
    const userMessage = action.payload.activity;
    userMessage.locale = detectMessageLanguage(userMessage.text);
  }
  return next(action);
};

// 在WebChat中使用中间件
<WebChat
  directLine={directLine}
  middleware={[sendMessageMiddleware()]}
/>

内容的提问来源于stack exchange，提问作者Андрей Череватов