Your NameandClaude Sonnet 5
a8b81a51e3
1. 企业注册-统一社会信用代码：扫码图标误用 icon+onIconClick（渲染在输入框左侧、蓝色）， 跟设计稿（图标在右侧、深灰色）不符。原因是 Field 组件里 icon 出现在 <input> 之前； 全仓库唯一一处 onIconClick 用法，改用 PasswordField 同款的 action（渲染在右侧）， 复用已有的 .auth-inline-icon 灰色样式，不新增CSS。 2. 意见反馈：图片上传按钮跟设计稿差异较大（当前是通栏虚线框+蓝色图标文字，设计稿是 独立白色方块+灰色图标文字）；字数"0/300"计数器卡在textarea自带边框和外层白卡的接缝 处，看起来像叠在两层盒子中间。改法：拆分原本跟"举报证据上传"共用的CSS规则，给 .feedback-upload>button 单独设置白底/无边框/灰色/7.5rem方块；去掉textarea自身的 border，让计数器所在的外层卡片成为唯一可见的白色容器。"图片"标题跟数量合并回一行 （原来用space-between分居两端），maxFiles真实上限(5，早前已确认是后端真实值)不变。 3. 青少年模式（开启/关闭/验证三个页面互跳）：三处跳转全部误用push（HashNavigation. navigateTo），导致点返回会先回到流程内已经处理完的页面，跟本工程之前排查过的 同类"tab切换污染历史记录"是同一个模式。新增 navigateReplace()（跟 navigate() 同结构， 内部换成 HashNavigation.navigateReplace，抄的是 message-center-view.jsx/ content-library-view.jsx已验证过的写法），三处调用改用它。 4. 修改密码页面：复用了 profile-editor-page 的通用label/input样式，但没有像 BirthDateEditor那样带上专属wrapper class，导致三个label的<span>不加粗不换行、 紧贴在一起零间距，input还留着给别的编辑器计数器/清空按钮预留的3rem右侧空白。 新增 change-password-fields 样式（参照birth-date-editor的label/span/input规则）。 5. 消息长按弹出菜单：全历史检索确认这个功能从来不是真正的长按手势，唯一实现是点击 气泡右上角一个不透明度只有0.3的小箭头按钮——参考图"消息页面—长按弹出.png"命名的 功能需求和实现从未对齐。给 .bubble 补上真实的touchstart/touchmove/touchend长按 识别（500ms计时器，移动超过10px视为滚动取消），复用同一套菜单构建逻辑（从 handleContextClick里抽出openContextMenu(x,y)公用）。验证时发现并修复了一个重构 引入的真bug：openContextMenu里遗留了两行没改完的e.pageX/e.pageY（应为参数x/y）， 会导致点击小按钮和长按两条路径双双抛ReferenceError，已修正并重新验证两条路径都正常。 6. 群公告横幅（群聊导航栏下方常驻提示条）：当前是通栏无圆角、贴边无留白、底部硬分隔线、 文字用的是全局默认灰色(#666)文本token，设计稿是浮在灰底上的白色圆角卡片、四周留白、 无分隔线、文字接近黑色。改法：加margin+border-radius+box-shadow做出浮起的卡片感， 去掉border-bottom，颜色改用--clr-bubble-text（消息正文同款深色token，而不是改全局 的--clr-text-primary，避免影响其它用到这个默认文本色的地方）。 验证：本地dev-proxy逐项验证——企业注册图标位置颜色（截图核对）、意见反馈布局（截图核对， 0/5计数器无缝落在白卡右下角）、青少年模式三处调用grep确认无遗漏+navigateReplace底层 history.replaceState机制单独验证不增加history.length、修改密码页面（截图核对label加粗 间距生效）、长按弹出（真实dispatch TouchEvent触发菜单成功，且验证点击小按钮路径未被 重构破坏）、群公告横幅（getComputedStyle核对margin/borderRadius/boxShadow/color/ borderBottom五个属性全部生效）。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
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
