SuperAPI AI 工具集

chat-messaging

设计与创作

查看项目

更新于 10-16 05:06

技能介绍

用途:为聊天与实时消息类界面提供设计模式参考,覆盖会话布局、消息气泡、输入区、输入状态提示、实时行为和消息类型展示。

主要能力: 一、消息气泡。自己发送的消息右对齐、使用品牌或强调色背景;接收的消息左对齐、使用中性或灰色背景。状态指示分为已发送(单勾)、已送达(双勾)、已读(蓝色或有色勾)。时间戳可逐条显示,也可按时间分组:5 分钟内的消息共用一个时间戳。 二、输入区。多行文本框随内容增高,约 4 行后转为滚动;提供附件按钮(文件、图片、音频)、表情选择器、发送按钮(仅在有内容时可用);Shift+Enter 换行,Enter 发送。 三、输入中提示。显示“某某正在输入…”并配动态圆点,位置在消息列表底部、左对齐;最后一次按键后显示 3 至 5 秒;多用户时显示“某某和某某正在输入…”。 四、实时行为。新消息出现在底部;仅当用户已在底部时自动滚动到底部;若用户已向上滚动,则显示“新消息”提示;采用乐观发送,消息立即显示、随后静默确认。 五、消息类型。文本为渲染 Markdown 的气泡;图片为缩略图,点击打开灯箱;文件显示图标、名称和大小,点击下载;音频为迷你波形播放器;链接显示富预览(OG 图片、标题、描述);系统消息居中、弱化文字、无气泡。

适用场景:即时通讯、客服会话、协作工具内聊天等需要消息流与输入交互的界面设计。

限制:资料仅提供设计模式与交互规范,未说明具体实现框架、组件库、代码示例、平台支持或收费情况。