minimax正从ai研发公司转型为平台型ai公司，因ai市场仍处增量阶段，创业公司凭借创新点可在高速变化中找到机会。
怎么用 div + flex 实现基础聊天气泡布局
聊天框最核心的视觉特征是“左右区分+气泡贴边+文字居中”，靠 display: flex 和 margin-left/margin-right 控制方向最直接，比浮动或绝对定位更可控、更易维护。
常见错误是给每条消息加 float: left 或 position: absolute，结果导致时间戳错位、新消息不自动滚动、响应式时气泡重叠。
- 用户消息用
margin-left: auto推到右侧，系统/对方消息用margin-right: auto留在左侧 - 所有气泡统一用
max-width: 80%防止长文本撑爆屏幕 - 用
flex-direction: column套一层容器，把头像、消息、时间戳垂直堆叠，避免用br换行 - 气泡圆角别全设
border-radius: 12px，左右消息要差异化：右消息border-top-left-radius: 0，左消息border-top-right-radius: 0
<div class="message own"> <div class="bubble">收到，谢谢！</div> </div> <div class="message other"> <div class="bubble">不客气～</div> </div>
对应 CSS 中 .own .bubble 加 margin-left: auto 和 border-top-left-radius: 0 即可。
为什么 scrollIntoView 在聊天里经常失效
不是 API 有问题，而是调用时机不对：消息 DOM 还没渲染完就执行 scrollIntoView，或者容器没设 overflow-y: auto 导致滚动目标不可见。
立即学习“前端免费学习笔记（深入）”；
典型现象是新消息来了，页面卡在顶部不动；或者只滚一次，后续消息不再跟随。
- 必须等消息节点真实插入 DOM 后再调用，推荐用
requestAnimationFrame包一层 - 滚动容器必须有明确高度和
overflow-y: auto，不能靠父级撑开 - 别对整个消息列表调用
scrollIntoView，要对最新一条message元素调用 - 加
{ behavior: 'smooth', block: 'end' }参数才真正平滑到底部，缺了block默认是'center'，反而往上滚
newMsgElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
WebSocket 断连后怎么让聊天框不卡死
断连本身不致命，致命的是没处理好「发送队列」和「UI 状态反馈」。用户点发送按钮没反应、输入框变灰却不提示、重连后消息重复发——全是状态没同步造成的。
关键不是“重连逻辑多复杂”，而是“断连期间用户操作是否被缓存并标记”。
- 发送前先检查
socket.readyState === WebSocket.OPEN，否则把消息 push 到pendingQueue数组 - UI 上给发送按钮加 loading 状态，并禁用输入框（但保留已输入内容）
- 重连成功后遍历
pendingQueue逐条重发，每条加retryCount防无限循环 - 服务端需支持幂等，同一
messageId重复提交只存一次
漏掉 pendingQueue 清空逻辑，重连后旧消息会反复刷屏；漏掉 retryCount，网络抖动可能触发雪崩。
移动端键盘弹起时聊天框被顶飞怎么办
iOS Safari 和部分安卓 WebView 下，focus 输入框会强制滚动页面，把消息区域顶出可视区，而且不会自动回滚。
这不是 CSS 能解决的问题，得靠 JS 拦截滚动行为并手动锚定位置。
- 监听
input的focus事件，在触发前记录当前scrollTop - 键盘弹起后，用
setTimeout延迟 100ms 再调用scrollTo(0, savedTop) - 安卓上还要监听
resize事件（键盘弹起会触发 window resize），iOS 则优先用focusin - 别依赖
visualViewport，兼容性差，老版 iOS 不支持
最稳的方案其实是：输入框固定在底部，消息区域设 height: calc(100vh - 输入框高度)，再用 overflow-y: auto，这样键盘只推输入框，不碰消息流。
