基于 SpacetimeDB 的实时聊天应用消息转发（Message Forwarding）功能规格与实现指南

基于 SpacetimeDB 的实时聊天应用消息转发Message Forwarding功能规格与实现指南【免费下载链接】SpacetimeDBDevelopment at the speed of light项目地址: https://gitcode.com/GitHub_Trending/sp/SpacetimeDB本文围绕 SpacetimeDB 仓库中tools/llm-oneshot/apps/chat-app/prompts/composed/17_forwarding.md这一 LLM 基准测试提示词规格展开系统解读实时聊天应用 消息转发的完整功能需求、UI 契约、UI/样式规范并结合仓库内的提示词模块化体系、TypeScript SDK 数据同步模型与自动化评测机制为开发者提供一份可直接指导实现与验收的实战指南。一、文档定位LLM 基准测试中的组合式提示词在 SpacetimeDB 仓库的 tools/llm-oneshot 目录下维护着一套用于对比 SpacetimeDB 与 PostgreSQL 在不同功能集下 LLM 生成代码能力的基准测试工程。其聊天应用chat-app的提示词按模块化 组合式composed设计prompts/features/ 存放单一功能积木每个文件只描述一个功能如 17_forwarding.md 单独描述消息转发prompts/composed/ 存放累积式组合提示词编号越大功能越全例如17_forwarding.md表示基础聊天 前述全部功能 消息转发prompts/language/ 存放语言/后端特定约束如typescript-spacetime.md、rust-spacetime.md、csharp-spacetime.md。根据 prompts/README.md 的说明这套结构的核心动机是 DRYDont Repeat Yourself功能描述只维护一份再与语言文件拼接即可生成面向不同技术栈的完整提示词。组合方式为语言文件在前、组合提示词在后例如language/typescript-spacetime.md composed/17_forwarding.md execute值得注意的是composed/ 目录实际已扩展到19_polls.md慢速模式、投票说明该提示词系统在 README 中标注的 12 级基础上仍在持续演进。二、UI 与样式规范完整继承的界面基线关联文档在开头约三分之一篇幅定义了与功能无关的通用 UI 基线这是所有组合提示词共享的部分任何实现都必须遵守。2.1 布局Layout侧边栏左侧固定约 220px应用标题/品牌、带状态的用户信息、房间列表、在线用户主区域右侧flex房间头部栏、可滚动消息列表、固定在底部的输入栏面板右侧滑入或浮层话题threads、置顶消息pinned messages、用户资料profiles、设置settings。2.2 视觉设计Visual Design采用深色主题并使用语言文件中的品牌色见第七节。核心规则维度要求背景最深的色阶用于主背景侧边栏与卡片用略亮色阶文字深底浅字时间戳与次要信息使用弱化色边框1px 细边框与背景低对比间距统一使用 8/12/16/24px 刻度字体系统字体栈层级清晰标题加粗、正文常规、元数据弱化小字圆角输入框、按钮、卡片、消息容器均圆角2.3 组件规范Components消息发送者姓名彩色 时间戳弱化 文本同一发送者的连续消息分组显示操作按钮仅悬停时出现具体按钮取决于启用的功能输入框全宽、圆角、细边框、占位文本、聚焦环使用主色按钮主操作填充主色次级操作用描边/幽灵样式需有清晰的 hover 与 active 状态徽章小药丸形、带计数、对比色如房间未读数模态/面板右侧滑入 柔和背景遮罩或下拉浮层状态指示小圆点绿在线、黄离开、红请勿打扰、灰离线房间列表房间名带可选图标前缀#当前房间高亮未读徽章。2.4 交互与体验Interaction UX后端连接期间显示加载/连接中状态spinner 或骨架屏不得出现白屏空状态需给出有帮助的文案如 Create a room to get started错误反馈行内错误或 toast 通知绝不静默失败平滑过渡面板、模态、状态变化使用淡入淡出/滑动悬停揭示消息操作按钮、表情回应 tooltip、用户资料卡片键盘支持Enter 发送消息Escape 关闭模态/面板自动滚动到最新消息向上滚动时出现回到底部按钮。三、功能规格总览20 项能力的累积式集合关联文档的核心是Important声明每个功能都附带一个 UI contract 小节规定自动化测试所依赖的元素属性——它们定义了用户可见的接口。而架构、状态管理、后端设计则完全交给实现者自主决定。这意味着该文档刻意做到接口契约与实现解耦方便用统一脚本对不同实现做黑盒验收。整个组合提示词01–16 Forwarding包含以下功能族编号功能核心要点1基础聊天设置昵称、创建/加入/离开房间、向已加入房间发消息、在线用户展示、合理校验防刷屏、长度限制2打字指示同一房间内广播正在输入数秒无活动自动过期支持单/多人文案3已读回执追踪谁看过哪些消息展示Seen by X, Y, Z实时更新不包含发送者本人4未读计数房间列表未读徽章按用户×房间记录最后读取位置实时增减5定时消息定时发送、作者可取消的待发列表、到点出现在房间6阅后即焚设定时长后从数据库永久删除UI 显示倒计时/消失提示7消息表情回应emoji 回应、计数实时更新、可切换自身回应、悬停显示回应者8编辑与历史编辑自己的消息、(edited) 标记、他人可查看编辑历史、实时同步9实时权限房间创建者为管理员可踢/封禁可晋升管理员变更即时生效无需重连10丰富在线状态online/away/DND/invisible 四态、离线显示Last active X minutes ago、自动置为 away11消息话题线程回复特定消息形成线程、父消息显示回复数与预览、线程视图、实时同步12私密房间与私聊邀请制私密房不进公开列表、按用户名邀请、双人 DM、仅成员可见13房间活跃度5 分钟内有 1 消息标 Active绿2 分钟内有 5 消息标 Hot橙实时变化14草稿同步自动保存草稿、跨设备实时同步、每房间独立草稿、发送后清除15匿名到注册迁移无账号可聊天、匿名身份跨会话保留、注册后身份与消息历史完整保留、房间成员关系转移16置顶消息管理员与作者可置顶/取消、消息列表与置顶面板双入口、实时同步17用户资料昵称/bio/头像可编辑、点击用户名弹出资料卡、修改后全局实时生效18提及与通知username 高亮、生成通知、铃铛未读计数、通知面板可标记已读、点击跳转到源消息19收藏/已存消息悬停收藏、侧边栏Saved面板、展示消息内容/发送者/频道/时间、个人私有、实时反映编辑20消息转发Forwarding悬停出现 Forward 按钮 → 频道选择器 → 目标频道出现带来源归属的副本原消息不变目标频道成员实时可见四、逐功能 UI 契约详解自动化验收接口由于组合提示词具有累积性每个级别包含其前所有功能下面按原文逐项保留各功能的 UI contract 关键元素。实现时必须确保这些可被自动化测试识别的属性存在。4.1 基础聊天姓名输入框placeholder包含 name不区分大小写姓名提交文本为 Join、Register、Set Name 的button或typesubmit创建房间文本含 Create、New 或 的button房间名输入placeholder含 room 或 name消息输入placeholder含 message发送在消息输入框按 Enter 发送房间列表侧边栏/列表中房间名可见且可点击加入房间点击房间名进入或文本为 Join 的button离开房间文本为 Leave 的button在线用户可见用户列表/成员面板中以文本形式展示用户名。4.2 打字指示打字文本他人输入时可见文本包含 typing自动过期无活动 6 秒内指示文本消失。4.3 已读回执回执文本他人查看后消息附近出现含 seen 或 read 的文本读者姓名回执文本包含查看者的显示名。4.4 未读计数徽章侧边栏房间名旁出现数字徽章如 3清空打开/进入房间后徽章消失。4.5 定时消息定时按钮文本为 Schedule、aria-label含 schedule或title含 schedule 的图标按钮时间选择器input[typedatetime-local]、input[typetime]或input[typenumber]待发列表查看定时消息时可见 Scheduled 或 Pending 文本取消待发消息旁有文本为 Cancel 的button。4.6 阅后即焚开关文本/标签含 ephemeral、disappear 或 expire 的select/button/input时长选项可选项如 30s、1m、5m指示消息上可见倒计时、expires 或 disappearing 文本删除时长到期后消息文本从 DOM 中移除。4.7 表情回应触发悬停时出现 emoji 文本按钮 ❤️ 或文本 React /aria-label含 react 的按钮展示消息下方或旁边显示 emoji 计数如 2切换再次点击同一 emoji 移除自己的回应悬停信息回应元素的title属性包含回应者姓名。4.8 编辑与历史编辑按钮悬停在自己消息上出现文本为 Edit 的button编辑表单编辑期间用行内input/textarea替换消息内容并有 Savebutton编辑标记已编辑消息可见 (edited)历史点击 (edited) 打开查看历史版本的视图。4.9 实时权限管理员指示成员列表中管理员显示 Admin/ADMIN成员面板房间头部有文本为 Members 或 Manage 的button踢出非管理员成员旁有文本为 Kick 的button晋升非管理员成员旁有文本为 Promote 的button被踢反馈被踢用户看到含 kicked 的文本或被重定向离开房间。4.10 丰富在线状态状态选择器文本为 Online、Away、Do Not Disturb/DND、Invisible 的select或按钮组状态指示用户名旁彩色圆点绿online、黄away、红DND、灰invisible最后活跃离线/离开用户显示含 Last active 或 ago 的文本。4.11 话题线程回复按钮悬停时出现文本 Reply 或 的button回复数有回复的消息显示 N replies 或 N线程面板点击回复按钮/计数打开包含父消息与全部回复的面板线程输入面板内placeholder含 reply 的input/textarea。4.12 私密房间与私聊私密开关创建房间时input[typecheckbox]或文本/标签含 Private 的button私密指示侧边栏私密房间显示 private 文本或锁图标 邀请按钮房间头部或成员面板中文本为 Invite 的button邀请 UI被邀请用户看到含房间名的 Accept 与 DeclinebuttonDM 按钮用户列表中用户名旁文本为 DM 或 的button。4.13 活跃度指示Active 徽章最近 5 分钟内有 1 消息的房间显示绿色 Active/ACTIVEHot 徽章最近 2 分钟内有 5 消息的房间显示橙色 Hot/出现位置侧边栏房间名旁。4.14 草稿同步自动保存输入即自动保存无需保存按钮持久化切换房间再切回输入框恢复草稿文本跨会话刷新页面后草稿仍恢复发送即清空发送消息后清空该房间草稿。4.15 匿名迁移游客入口文本为 Guest/Anonymous/Join as Guest 的button或自动分配 Guest-XXXXX/Anon-XXXXX 式名称游客指示匿名用户名旁显示 guest/anon 徽章/标签注册按钮游客可见文本为 Register 或 Sign Up 的button注册表单placeholder含 name 或 username 的input迁移注册后此前所有消息显示新显示名。4.16 置顶消息置顶按钮悬停时文本 Pin 或aria-label含 pin 的button置顶指示置顶消息显示 pinned 文本或 图标置顶面板频道头部有 Pinned/Pinsbutton打开后列出全部置顶消息取消置顶置顶消息上有 Unpinbutton面板内或悬停时。4.17 用户资料资料编辑侧边栏可访问文本 Edit Profile/Profile 或齿轮图标按钮Bio 输入placeholder含 bio 或 status 的input/textarea资料卡点击用户名弹出显示姓名、bio、头像的 popover/模态姓名传播修改显示名后所有消息归属实时更新。4.18 提及与通知提及高亮消息中的username视觉区分加粗、着色或包裹进带样式的span通知铃铛侧边栏/头部有文本 或aria-label含 notification 的button未读数铃铛旁数字徽章通知面板点击铃铛显示含消息文本与频道名的通知列表标记已读Mark Read/Mark All Readbutton。4.19 收藏/已存消息收藏按钮悬停时文本 Bookmark/Save 或aria-label含 bookmark/save 的button已存面板侧边栏 Saved/Bookmarksbutton打开面板条目每条已存消息显示消息文本与来源频道/发送者移除面板内 Remove/Unsavebutton。五、消息转发Forwarding深度剖析这是本关联文档的编号主题与新增核心功能对应独立积木文件 features/17_forwarding.md。5.1 功能需求原文完整继承用户可以将一条消息转发到其作为成员的其他频道消息悬停时出现Forward 按钮点击打开频道选择器channel picker转发后消息出现在目标频道并带有Forwarded from #原频道 by 用户的归属标注原消息不被修改——转发创建的是副本copy而非移动或引用转发消息对目标频道全体成员实时可见。5.2 UI 契约原文完整继承契约项自动化测试要求转发按钮消息悬停时出现文本为 Forward 或aria-label含 forward 的button频道选择器列出用户可转发目标频道的列表或下拉框归属标注转发消息显示含 Forwarded 或 forwarded from 的文本原消息不变源消息上没有任何 forwarded 指示5.3 基于 SpacetimeDB 数据模型的实现思路结合仓库中 SpacetimeDB 的架构可以推断出一套与副本 实时同步语义天然契合的实现方案后端reducer 层面消息表增加forwarded_from源频道名或 ID与forwarded_by转发者身份两个字段。新增一个转发 reducer例如forward_message(msg_id, target_room)校验调用者是源房间与目标房间的成员读取源消息内容在目标房间的消息表中插入一条新行副本并写入来源归属字段源房间中的消息行不做任何修改——这正符合原消息不变、转发创建副本的契约。实时同步subscription 层面SpacetimeDB 的客户端通过订阅subscription与后端建立实时同步目标频道成员订阅了该房间消息表后新插入的转发副本会自动推送到所有订阅者无需任何额外广播代码。这一机制在仓库的 TypeScript SDK 中有直接支撑订阅通过ConnectionManager的subscribe与查询构建器完成参见 sdks/typescript/src/react/SpacetimeDBProvider.ts 与 sdks/typescript/src/lib/query.ts其中tables.user.where(...)这类带过滤条件的订阅示例也出现在 Angular 注入器中。客户端React 组件层面消息项组件悬停时渲染 Forward 按钮点击后弹出频道选择器仅列出当前用户已加入且非当前房间的频道提交后调用转发 reducer渲染时根据forwarded_from字段决定是否显示 Forwarded from #xx by xx 归属行。从数据流看该功能在 SpacetimeDB 上只需要一张表 一个 reducer 一条订阅即可闭环这也是 prompts/README.md 中转发/同步类功能对 SpacetimeDB 而言是 trivial 级别结论的体现。六、技术栈约束与品牌规范关联文档的落地必须与语言文件组合使用。以 TypeScript 技术栈为例language/typescript-spacetime.md 规定了如下硬约束架构后端为 SpacetimeDB TypeScript 模块客户端为 React Vite TypeScript模块名chat-app目录约束所有代码只能写在.../backend/spacetimedb/服务端与.../client/src/客户端下且必须位于带时间戳的文件夹chat-app-YYYYMMDD-HHMMSS/内保持最小化与可读性输出约束只返回带文件头的代码块见 output_instructions.md。同时 base_spacetime.md 规定应用使用 SpacetimeDB 品牌深色主题官方品牌色取自语言文件用途色值Primary主色/成功色#4cf490SpacetimeDB 绿Primary hover#4cf490bf绿 75% 透明度Secondary#a880ffSpacetimeDB 紫Backgroundshade2#0d0d0e近黑Surfaceshade1#141416略亮Bordern6#202126Textn1#e6e9f0浅灰Text mutedn4#6f7987Accent#02befaSpacetimeDB 蓝Warning#fbdc8e黄Danger#ff4c4c红可选头部渐变linear-gradient(266deg, #4cf490 0%, #8a38f5 100%)绿到紫应用标题统一为SpacetimeDB Chat。七、自动化评测如何验证转发是否达标提示词系统配套了完整的评分机制grading_rubric.md 与 grading_checklist.md其核心方法论对转发功能同样适用7.1 评分规则每个功能按0–3 分打分0 未实现或完全损坏1 部分实现且缺失核心功能2 大体可用但有次要缺陷3 完全符合规格N/A 未包含在提示词中Prompt Level 到评分范围的映射每个组合提示词级别只对包含的功能计分如01_basic对应功能 1–4、满分 12级别越高覆盖越多UI 契约是评分的硬依据评分强调实际测试胜于代码分析代码存在 ≠ 功能可用。7.2 针对转发的可执行验收清单依据 UI 契约推导结合 grading_rubric.md 中每功能独立测试的方法学转发功能可按以下步骤验证用户 A 在 #general 发送一条消息悬停该消息确认出现文本 Forward或aria-label含 forward的按钮点击后出现频道选择器且只列出 A 已加入的频道选择 #design确认 #design 中实时出现该消息副本并带 Forwarded from #general by A 归属文本回到 #general确认源消息没有任何转发指示原消息未被修改打开另一浏览器以用户 B#design 成员登录确认 B 能实时收到转发副本若 B 不是 #general 成员则其看不到源消息验证转发者非目标频道成员时操作被拒绝合理校验。这些用例恰好可以直接映射到评分标准 3 分的要求转发入口可达、目标频道实时可见、归属标注正确、原消息不变。7.3 真实评测样例仓库中保留了真实生成的评测记录例如 chat-app-20260102-162918/GRADING_RESULTS.md该实例针对09_spacetime_private_rooms.md级别功能 1–12评分后端 1008 行、前端约 1500 行、共 26 个文件外部依赖仅spacetimedb、react、react-dom、vite、typescript总分 34/3694.4%0 次重提示reprompt。这份记录同时印证了生成项目的典型结构chat-app-时间戳/ ├── backend/spacetimedb/ │ └── src/ │ ├── schema.ts # 表结构定义 │ └── index.ts # reducer 逻辑 └── client/ ├── src/ │ ├── App.tsx / main.tsx / styles.css │ ├── module_bindings/ # 生成绑定 │ └── components/ # 14 个组件 └── index.html它也为转发功能的实际落地提供了范本schema 定义消息表结构index.ts 定义 reducer客户端组件负责悬停按钮、频道选择器与归属渲染。八、结语17_forwarding.md不仅是一份功能规格更是一套**契约先行、实现自决**的工程化验收范式通过把用户可见的 UI 契约从实现细节中剥离出来它让同一个功能定义可以跨技术栈SpacetimeDB 的 TypeScript/Rust/C#、PostgreSQL 的多种组合统一评测。对于开发者而言本文所梳理的完整功能族、转发功能的数据模型映射以及可执行的验收清单可以直接复用于基于 SpacetimeDB 构建包含转发能力的实时聊天应用参考 sdks/typescript 的订阅/查询模型理解 LLM 生成代码的基准测试方法参考 tools/llm-oneshot 整套提示词与评分体系以UI 契约 黑盒测试方式为自己开发的实时应用建立可自动化的验收标准。转发这一看似简单的功能在 SpacetimeDB 的表 reducer 订阅模型下恰好是理解副本语义 实时数据同步的最佳最小示例一次插入、一次订阅其余全部交给数据库内置的实时同步机制完成。【免费下载链接】SpacetimeDBDevelopment at the speed of light项目地址: https://gitcode.com/GitHub_Trending/sp/SpacetimeDB创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考