Your Name
ac8f0cf315
第3章要求pending_inbound/pending_outbound/none/blocked几种关系状态都能在真实聊天 窗口里看到（参考图 个人对话框（对方的状态）/（我的状态）.png、开启沟通页面.png）。 messages-view.jsx里对应的横幅逻辑（"以上是打招呼的消息"/"好友申请正在等待处理"等） 本身早就是对的，但排查发现两个问题： 1. 全项目没有任何入口能导航进这个视图——"新朋友"列表(FriendRequests)每一行没有 onClick；好友个人主页(Profile)非好友分支只显示一段cannotAddReason纯文字，没有 任何可点击进聊天的按钮。发起方和接收方在成为好友之前都完全看不到这个视图。 2. 验证留言原文（发好友申请时填的那段话，存在im_friend_requests表的message字段， 不是真实Tinode消息，没有走topic.publish()）没有被当作消息渲染出来，参考图里 明确是作为聊天页第一条消息气泡展示的。 修复： - contact-management-view.jsx: FriendRequests每一行加onClick，用(onCreateTopic|| onTopicSelected)跳进对应聊天（同一套Profile.openChat已经验证过的冷启动安全写法， 接受/拒绝按钮补stopPropagation不受影响）；Profile非好友分支（blocked_by_peer/ blocked_by_me/pending_inbound/pending_outbound）补一个"查看聊天"按钮，跟 cannotAddReason文字并排展示（不复用people-profile-actions的两列grid，那是给 发消息+音视频通话两个平级按钮设计的）。ContactManagementView/sidepanel-view.jsx 早前就已经把onCreateTopic透传到位，这次只是多接一层。 - messages-view.jsx: loadRelationshipContext新增loadPendingRequestMessage， relationship是pending_inbound/pending_outbound时，用relationshipContext自带的 request_id去GET /friend-requests换真实留言文本（没有留言用参考图默认文案"请求 添加你为好友"兜底），渲染成一条合成的消息气泡插在消息列表最前面（不进 messageNodes、不调用发消息接口）——pending_inbound左对齐、pending_outbound右 对齐，气泡样式直接复用chat-message.jsx真实消息已经在用的.bubble/.left/.right 这套CSS（app里"发出的"气泡实际是这套已实现的浅色而非参考图的蓝色，保持跟同一 会话里其它真实消息一致，不単独改这一条的颜色去凑旧版参考图）。 验证：真实两个新账号（vcm909641发起→hankqa14b接收）走了一遍完整流程—— 从"新朋友"列表点击行正确进入聊天页，留言气泡+"以上是打招呼的消息"横幅正确显示； 从Profile页"查看聊天"进入，留言气泡右对齐+"好友申请正在等待处理"横幅正确显示； 点"通过验证"接受申请后正确留在列表页不误触发导航；接受后重新打开同一会话， 合成气泡正确消失，被真实的"你们已成为好友，现在可以开始聊天了。"系统消息取代， 无残留/无重复。
Tinode Web
Briefing
Single-page web chat application for Tinode. The app is built on React. The Tinode javascript SDK has no external dependencies. Overall, it's a lot like open source WhatsApp or Telegram web apps.
Although the app is generally usable, keep in mind that this is work in progress. Some bugs probably exist, some features are missing. The app was tested in the latest Chrome & Firefox only. NPM package is available.
Try possibly newer or older version live at https://sandbox.tinode.co/.
For demo access and other instructions see here.
Installing and running
This is NOT a standalone app, this is just a frontend, a client. It requires a backend. See installation instructions. See instructions for enabling push notifications.
Getting support
- Read client-side and server-side API documentation.
- For support, general questions, discussions post to https://groups.google.com/d/forum/tinode.
- For bugs and feature requests open an issue.
- Use https://tinode.co/contact for commercial inquiries.
Helping out
- If you appreciate our work, please help spread the word! Sharing on Reddit, HN, and other communities helps more than you think.
- Consider buying paid support: https://tinode.co/support.html
- If you are a software developer, send us your pull requests with bug fixes and new features.
- If you use the app and discover bugs or missing features, let us know by filing bug reports and feature requests. Vote for existing feature requests you find most valuable.
- If you speak a language other than English, translate the apps into your language. You may also review and improve existing translations.
- If you are a UI/UX expert, help us polish the app UI.
- Use it: install it for your colleagues or friends at work or at home.
Internationalization
The app is fully internationalized using React-Intl. The UI language is selected automatically from the language specified by the browser. A specific language can be forced by adding #?hl=XX parameter to the URL when starting the app, e.g. https://web.tinode.co/#?hl=fr.
The app is currently available in the following languages:
- English - default
- Arabic
- Chinese simplified
- Chinese traditional
- French
- German
- Italian
- Korean
- Romanian
- Russian
- Spanish
- Thai
- Ukrainian
- Vietnamese
More translations are welcome. See instructions.
Not done yet
- End-to-End encryption.
- Emoji support is weak.
- Mentions, hashtags.
- Previews not generated for links and docs.
- Location and contact sharing.
- Recording video messages.
Other
- Demo avatars and some other graphics are from https://www.pexels.com/ under CC0 license.
- Background patterns from http://subtlepatterns.com/, commercial and non-commercial use allowed with attribution.
- Fonts and icons from Google under license which permits commercial and non-commercial use.
- Push notifications built with https://firebase.google.com/.
Responsive design
Desktop screenshot
Mobile screenshots
