前言

本项目 研发面向医学教育的医患沟通模拟与评价系统，基于大模型实现智能交互、个性化病例模拟与评分，为医学生提供沉浸式医患沟通实训场景，旨在解决线下标准化病人资源稀缺的问题，提升医学生的医患沟通实操能力。本人负责UE5前端开发工作，包括语音输入/输出功能的实现，以及主场景、SEGUE评分面板、聊天框等UI面板的搭建。本周重点完成了医患交流面板的消息气泡功能，同时优化了部分UI，实现了整体UI风格的统一。

一、消息气泡功能的实现

为了实现医患交流面板的消息气泡功能，我新建了三个控件蓝图，分别对应实现用户气泡、AI回复气泡和消息间隔：

用户气泡逻辑：

气泡生成的蓝图逻辑如下：点击发送按钮后，首先判断输入内容是否为空字符串。若为空，则不执行任何操作；若非空，则将消息发送出去，并在消息列表中新增一个Message子项（即气泡）。

初始效果如下图所示：虽然对话双方的气泡颜色已做区分，但为更符合当前主流用户的使用习惯，我们将双方气泡分别放置在对话区域的左右两侧。

换边逻辑：

在用户消息发出后，自动插入一段空白间隔，使界面布局更加美观。同时，我们需要将消息内容传送至后端，并自动将消息滚动到列表最底部：

最终效果如下图所示：

AI气泡逻辑：

AI气泡的生成逻辑与用户气泡类似，主要需要完善的是实现与其他蓝图的信息通信，确保AI回复能够正确接入并显示。

二、问题与解决方案

在实现消息气泡功能的过程中，我遇到了以下几个关键问题，并分别给出了相应的解决方案。

问题1：空消息或仅含空白符的内容被发送

问题描述：
用户可能输入纯空格、换行符等不可见字符并尝试发送，导致界面上出现空白气泡，影响观感且无实际意义。

解决方案：
在发送前的校验逻辑中，不仅判断字符串是否为空，还使用 Trim() 去除首尾空白后再判断长度。若处理后为空，则提示用户“无法发送空白消息”，并阻止气泡生成。

问题2：消息气泡无法自动滚动到最新位置

问题描述：
当消息数量超过面板显示范围后，新发送或接收的消息不会自动滚动到可视区域，用户需要手动拖动滚动条才能看到最新对话，严重影响了交互体验。

解决方案：
在每次添加新消息（用户消息或AI回复）后，调用滚动视图的 Scroll to End 方法，将滚动条位置强制设置为底部。具体实现中，我在消息列表的父控件中绑定滚动盒引用，并在添加消息的流程末端执行滚动操作，确保新消息始终可见。

问题3：文本换行异常

问题描述：
在用户消息气泡的实现中，发现一个异常的换行行为：当用户输入2个、3个或4个汉字时，气泡内的文本会自动换行为多行显示（例如3个字可能折成两行）；而输入5个汉字时，文本却能正常显示在一行内。这不符合正常的文本换行逻辑，导致界面显示不一致且不美观。

解决方案：

1. 初步排查尝试（未解决）
首先怀疑是气泡容器的宽度计算问题。尝试在气泡外层包裹Size Box，并设置Min Desired Width为较小值（如50~80），试图打断UE引擎对短文本宽度的错误计算。测试后发现问题依旧存在，说明根因不在此。

2. 定位根本原因
进一步分析发现，气泡控件中错误地使用了多行文本框（Editable Text Multi-Line） 来显示消息内容。该类控件原本设计用于玩家文本输入，内部包含光标预留位、回车逻辑等复杂机制。当它被放入一个尺寸随内容变化的容器（如聊天气泡）时，其内部的“隐藏边距”与自动换行逻辑产生冲突，导致短文本换行计算异常。这是UE引擎处理CJK文字时的一个底层排版问题。

3. 最终解决方案
将气泡中的显示控件由Editable Text Multi-Line替换为普通的Text控件，并按照以下标准层级重构气泡蓝图：

• 最外层：Size Box
  设置Max Desired Width（如500），限制气泡最大宽度，防止文字超出屏幕边界。

• 第二层：Border
  控制气泡背景色（用户/AI区分），并设置Padding（如10），使文字与边框保持适当间距。

• 最内层：普通Text控件
  启用Auto Wrap Text，文本将在此层正常换行。

效果验证：
修改完成后，重新测试不同字符长度的显示效果：

• 1~4个字：正常显示在一行内，不再异常换行

• 超过最大宽度的长文本：自动换行，表现符合预期