Your Name
425b06aa71
用户报告：头像上传后，联系人页面已经能正确显示，但消息列表（会话列表）和
聊天对话框（顶部头像+消息气泡头像+详情栏）仍然只显示字母色块。
根因：联系人页面（ContactsListColumn/FriendProfileView等）走的是REST
/friends、/users/{id}/profile这些接口，响应里天然带avatar_file_id字段，
接的是同一个Avatar组件。但消息列表/聊天窗口这条线读的是Tinode SDK本地维护的
话题缓存（me.contacts()/topic.public），这个对象里根本没有avatar_file_id
这个字段（那是REST专属字段，SDK的public.fn/public.photo走的是完全不同的同步
机制）——所以即使Avatar组件本身没问题，这几个位置也从来没被塞过真实的
avatar_file_id，只能落到字母兜底分支。
修复：在这几处渲染点旁路补一份轻量的id->avatar_file_id映射，全部复用已经在
发的请求（不新增网络开销）：
- ChatListColumn.tsx（会话列表）：群聊复用自己已有的groups查询（本来就为了
显示"N人"徽标在发），单聊新增一个与ContactsListColumn同key的/friends查询
（对方是好友时才有数据，走查询缓存去重）。
- ConversationView.tsx（聊天窗口顶部+消息气泡）：群聊复用自己已有的group
profile查询；P2P peer新增一个与DetailColumn同key的/users/{id}/profile
查询；"我"发的消息复用（不再限定isSelf才拉）已有的/me查询。
- DetailColumn.tsx（P2P详情栏大头像）：本来就在查/friends和/user-profile，
只是从来没把里面的avatar_file_id接到头像上。
- GroupDetailColumn.tsx（群详情栏大头像+成员格子头像，随上一条commit一起
提交）：同样是本来就在查的group/members数据里现成的字段。
Avatar.tsx新增可选的fallbackBgClass prop——"我"发的消息气泡头像，字母兜底
色块设计上固定是强调色而不是按id哈希取色，原来内联写死bg-accent，现在通过
这个prop走统一组件不用另外复制一份渲染逻辑。
已知未覆盖（跟此前记录的已知缺口一致，本次未处理）：群成员选择器/邀请弹层/
群管理弹层等曝光度更低的头像位置仍是字母色块。
重要：本次修复只是把avatar_file_id正确传给了Avatar组件——实机测试时发现
GET /v0/file/s/{id}这个下载接口目前会302重定向到一个跨域地址，
useAuthedBlobUrl用fetch+鉴权头去请求时，浏览器跟着重定向到那个跨域地址后
被CORS拦截（Failed to fetch，redirect:'manual'下确认type是opaqueredirect）。
用三个不同账号/不同file_id复测结果一致，不是个例。也就是说这条修复目前
"接线是对的"，但只要这个后端问题不解决，任何地方（含联系人页、头像上传页
本身）新上传的头像实际都不会真的显示成图片，只会退回字母色块——这是后端
问题，按惯例记录不在这个仓库里修。
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
