privoce/vocechat-web

VoceChat Web App

Web Client of VoceChat

• 🎉 Powered by React & Redux Toolkit
• ✅ Typescript
• 📦 PWA
• 📢 Notification by firebase

Host your server! Or use our test server

• Host your own Voce server (docker image): Run on x86_64 platform:

docker run -d --restart=always \
  -p 3000:3000 \
  --name vocechat-server \
  privoce/vocechat-server:latest

For more server hosting instructions, see our documentation: https://doc.voce.chat/

Preview

• official site: https://voce.chat

• live demo: https://privoce.voce.chat/

• demo API Docs (Swagger): https://dev.voce.chat/api/swagger

• design: https://www.figma.com/file/EHnNr53kNmDWgUT86It6CH/UI

• text editor: https://plate.udecode.io/docs/installation

• markdown editor: https://nhn.github.io/tui.editor/latest/

• redux: @reduxjs/toolkit

• indexDB wrapper: https://github.com/localForage/localForage

Local Development

• git clone https://github.com/Privoce/vocechat-web vocechat-web

• cd vocechat-web & yarn install

• yarn start

• Open localhost:3009

Tools Recommended

• VS Code Editor Recommended
• VS Code plugins:
  • dbaeumer.vscode-eslint: ESLint
  • esbenp.prettier-vscode: Prettier
  • dsznajder.es7-react-js-snippets: Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax

License

GPL v3

Thanks all the contributors

Discuss collaboration: [email protected] or https://bridger.chat/han

Telegram group: https://t.me/opencfdchannel VoceChat: https://voce.chat

Telegram channel: https://t.me/vocechat_group VoceChat Channel: https://privoce.voce.chat

vocechat-web's Issues

docker方式在oracle cloud的arm服务器上安装报错

mkdir -p ~/.vocechat-server/data docker run -d --restart=always \ -p 443:443 \ --name vocechat-server \ -v ~/.vocechat-server/data:/home/vocechat-server/data \ privoce/vocechat-server:latest \ --network.bind "0.0.0.0:443" \ --network.domain "url" \ --network.tls.type "acme_tls_alpn_01" \ --network.tls.acme.cache_path "/home/vocechat-server/data/cert"
privoce/vocechat-server:latest改成privoce/vocechat-server:latest-arm64都会显示WARNING: The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested，后面添加--platform linux/amd64 \参数后没有上面报错，但是运行不起来，查看日志是这样的
exec /docker-entrypoint.sh: exec format error exec /docker-entrypoint.sh: exec format error exec /docker-entrypoint.sh: exec format error exec /docker-entrypoint.sh: exec format error exec /docker-entrypoint.sh: exec format error exec /docker-entrypoint.sh: exec format error exec /docker-entrypoint.sh: exec format error exec /docker-entrypoint.sh: exec format error exec /docker-entrypoint.sh: exec format error exec /docker-entrypoint.sh: exec format error

网页挂件是否可以增加匿名登录直接建立聊天的功能

简述
目前网页挂件好像只有添加第三方登录的方式才能发起对话，我想能不能增加一个不通过第三方登录的方式来建立对话。
就是相当于一个客服系统

你预期要达到什么效果
可以用在商业项目上，做网页接待

目前有没有替代
类似于Crisp，国内的飞鱼客服，美恰客服

[FEAT]关于存储计划

简述
如果注册用户多的话，分享一些图片，视频等文件，服务器空间不够用，此时就需要添加存储计划

你预期要达到什么效果
添加关于Google Drive,Onedrive,oos等存储的支持

目前有没有替代
Alist
rclone

附加信息
也可以说一下docker或者用脚本安装的存储路径，用rclone来挂载空间

vocechat-server的Docker无法在arm64服务器上运行

服务器的CPU是Ampere Altra，架构为aarch64，系统为Ubuntu 22.04.1
报错如下：

Will the server be open source?

登录页的 logo 不应该圆形裁剪

logo 显示异常：

能否增加类似微信的好友添加功能

当前的用户列表都是公开的，任何已经注册的成员都可以向其他人发信息。这对于公司内部通讯是没问题的。
但是对于个人通讯来说并不妥当，没有了好友机制和公开化的成员信息使得软件难以成为个人信息通讯的替代品

希望开发者尽快解决。

设想：所有成员列表不可见，新注册的成员可以通过其他方式获得想聊天对象的ID或者用户名，通过查找，申请，通过好友的方式建立通讯连接。

以上！

后期会支持音视频通话功能吗

后期会支持音视频通话功能吗

[FEAT] 通过邀请链接注册时候，无法使用第三方或 Metamask登录

[BUG]修改账号邮箱失败

描述问题
管理员登录后，在设置中-我的账号-修改邮箱地址，修改后，提交，提示Bad Request

如何复现
复现步骤举例：

1. 在设置页面
2. 点击我的账号-，修改管理员邮箱 ，提交
3. 报Bad Request

预期结果
修改成功，或者提示邮箱验证后改地址

截图
如果可以，请附上截图（注意保护隐私信息）

环境信息

• 操作系统: win10
• 浏览器 edge 107.0.1418.62
• 版本 [e.g. 客户端v0.3.26,服务端v0.3.1]

客户端版本: 0.3.29
服务器端版本: 0.3.1
构建时间戳: 1670810549

附加信息
联系方式，备注，等等，可不填

消息管理的建议[FEAT]

已部署到树莓派，十分轻量，点赞。
目前的问题有：

1.sqlite是否有切片与体积管理设置。
2.聊天记录可否针对服务器全局/频道分开设置 消息（图片/文字/视频/文档）有效期，比如超过7天附件自动销毁，15天聊天记录自动销毁。
3.20个人license不是很够用，免费license人数限制太狠了，建议参考免费QQ群人数，当前的人数限制下如果将微信群和QQ群好友介绍来的话将会十分棘手。
4.关于大文件传输，是否可以让浏览器充当P2P打洞工具，甚至可以设置好本地工作文件夹，如果双方都在线的话，可以利用浏览器互相传输文件。
5.提供OSS onedrive挂载功能。
6.提供URL网页预览功能是否可以更进一步，提供网页截图预览（可关闭）。

[BUG]更新最新WEB版本后，生成邀请链接URL错误

描述问题
请用简洁清晰的语言描述您遇到的问题

如何复现
复现步骤举例：

1. 在设置页面
2. 点击成员
3. 显示 的URL链接为默认的[HTTPS://1.2.3.4:4000](http://1.2.3.4:4000/?magic_token=XXXXXXX

预期结果
应该为https://myurl.com/magic_token=xxxxx

截图
如果可以，请附上截图（注意保护隐私信息）

环境信息

• 操作系统: [e.g. iOS]
• 浏览器 [e.g. chrome, safari]
• 版本 [e.g. 客户端v0.3.26,服务端v0.3.1]

附加信息
联系方式，备注，等等，可不填

[FEAT]增加对markdown扩展语法的支持和取消成员是否在线的显示

简述

1. 希望网页端和手机端增加对markdown扩展语法的支持（LaTex公式以及流程图、序列图、mermaid），增加对html内容的支持
2. 希望取消成员是否在线的显示，或者设置是否显示在线

你预期要达到什么效果

1. 增加对markdown扩展语法和html内容的支持，有利于增加文本消息样式的丰富性，便于直接通过vocechat分享markdown的文本
2. 取消在线显示可以减少社交尴尬的情景

[FEAT]一个安全功能建议

一个安全功能建议，增加端到端加密E2EE的功能，可以在设置中开启关闭，预安装后默认为开启，最理想化完整功能能够类似keybase.io的这个工具，还能自定义加密。

还有一个功能建议，就是在聊天框中能够在[更多]->[删除]这个下拉菜单栏再增加一个清屏功能。

上传大文件Nginx返回错误413未提示及处理[BUG]

在网页端上传大文件（40+Mb）时，由于上传大小超过限制。Nginx会返回错误413 Request Entity Too Large。
这个时候预期的情况应该是提示错误并停止传输。
但是实际情况是上传还在继续，并且上传完成后在聊天页面上会显示相应文件。造成上传成功的假象。

[FEAT] 建议新增对黑暗模式的支持

简述
建议在 Web 端与 App 端新增对于黑暗模式的支持

你预期要达到什么效果
黑暗模式可参考 Discord，但我想必开发人员应该知道 Discord 的 UI 界面（？

目前有没有替代
你的想法在某个产品中，是否已经有了，请列出

• Discord
• KOOK (开黑啦)

附加信息
你的想法的截图，或者您的联系方式，等等

feat: 新增手动更新License功能

通过使用shell安装的，使用过程中出现Request Not Found

我是通过shell安装的。安装的时候域名为空，然后通过宝塔建了个网站反代访问的。
使用都没有问题，注册什么都正常。但是呢，在聊天窗口中只要切换频道就会出现Request Not Found。
出现这个，页面显示是正常的。只是会以一个提醒的方示出来。像手机新来消息一样。
每切换个频道必出现。

last seen 功能

知道用户最后一次是什么时候在线，方便服主删除无效用户

网页版没有中文选项

[BUG] docker私有部署，管理员账号注册后进入首页一直loading，网络正常

描述问题
docker 部署后，打开设置管理员账号没问题，登录后进入聊天首页一直loading进不去，停止容器就可以进入聊天首页，然后再打开容器可以使用，重新刷新页面还是一直loading。（网络是没问题的）

如何复现
复现步骤举例：

1. 部署docker
2. 打开然后注册管理员账号
3. 进入首页，一直loading

4. 停止docker容器，会进入首页

5.再刷新页面后 还是回到第3步的情况（一直loading）。

预期结果
可以正常快速进入聊天首页

环境信息
-docker 部署在 极空间 nas
-内网穿透使用的 ddnsto

• 使用环境-操作系统:mac pro
• 浏览器： chrome
• 版本 服务端 latest

切换管理员之后需要重新登录才可以变成管理员

网页端能做一个移动版界面吗？

简述
现在手机上用浏览器访问页面不正常

你预期要达到什么效果
直接网页访问可以降低用户使用门槛，而且这应该也不是很难

目前有没有替代
虽然有app，但是50M的大小还是让人望而却步，显得有些多余

附加信息
你的想法的截图，或者您的联系方式，等等

**的服务器centos，centos已经有梯子，但是还不能有消息推送。

**的服务器centos，centos已经有梯子，但是还不能有消息推送。
现在来了消息根本就收不到，一个聊天工具，没有消息提醒就像老虎没有牙齿。

[FEAT]token的有效时间能设置吗

token的有效时间能设置吗, 300秒太短了, 想要写一个bot, 用于自动发消息. 看到有刷新方式, 但是那bot每次发消息基本就是两条接口连着调用了, 先刷新token再发送消息.

Is vocechat server not opensource ? [FEAT]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[BUG]

Describe the bug
Chat widget input area. Enter key will send an unfinished message out when typing in Chinese.

Request Not Allowed ，无法初始化

Login failed: null
Failed to sign up: null
Request Not Allowed

注册失败

配置Firebase后，无法收到通知服务

根据https://doc.voce.chat/zh-cn/setting/setting-firebase-notification
配置Firebase，无论是web端还是app端（android翻墙）都搜不到消息推送

[FEAT]Genarate QR code for invitation link

It would be more user-friendly to join the server on mobile by scanning the QR code of the invitation link.

[FEAT] Multiple tabs show “More than one tab is open”--see telegram

No need for the doge images lol...add some formatted text like this:

Only one active tab is allowed for VoceChat.

Please reload this page to continue using this tab or close it.

RELOAD

[FEAT]Basic Mobile Friendly Responsive Design

Seeing channel list as a guest.
Click to see a channel's content.

用户备注功能

可以备注用户

link 卡片内图片不清晰

应该优先使用 og 协议的 image 再使用 favorite.ico

上面的图片应该使用

html:

<meta property="og:type" content="website">
<meta property="og:url" content="https://zoom.us/">
<meta property="og:title" content="Video Conferencing, Cloud Phone, Webinars, Chat, Virtual Events | Zoom">
<meta property="og:description" content="Zoom's secure, reliable video platform powers all of your communication needs, including meetings, chat, phone, webinars, and online events.">
<meta property="og:image" content="https://st3.zoom.us/static/6.1.7105/image/thumb.png">
<meta property="og:site_name" content="Zoom Video Communications">

收藏的消息，在收藏页面hover，做到也可以删除

现在pin的消息，hover后是可以删除的
收藏的消息，对话页面hover可以删除，但会出现一个很大的叉，需要调成和pin的叉一样大。
需要加一下收藏的消息，在收藏页面（也就是单独的收藏page）hover，做到也可以删除，交互保持一致。

[BUG] 一些 Text 错字及翻译问题

描述问题
Web 端存在一些文本错字

1. 邀请 "连接" 应改为 "链接"

2. Github 应改为 GitHub (大小写错误)

3. App 端即使把语言改为简体中文，编辑后的文字提示依旧会显示为 (edited)

4. 建议新增对繁体中文的支持

Invite link always shows generating

In my case,the invite link always shows generating.But the generating request is 200 and returns the correct invite link.
This seems to be a frontend issue

feat: 新增API文档介绍

Video play bar cannot drag[BUG]

Video play bar cannot drag, only pause the video.

[FEAT]希望增加手机网页端的适配

简述
希望增加适配移动设备的网页端。

你预期要达到什么效果
手机需要下载app让大多数人望而却步，使用网页端有利于方便推广软件。手机网页端只需要简单接受消息和发送文字即可，其他功能可以在app端使用。

fix: 多语言文件会请求加载不存在的URL

wrong URL:/locales/en-US/common.json
right URL: /locales/en/common.json

Could Vocechat docker image has Arm64 support?

It may be a good idea to run it on Raspberry Pi..armbian....etc.......

[FEAT]Api是否可以订阅新消息，Server主动推送新消息到指定URL，可以实现Bot相关的功能

我希望实现聊天Bot的一些功能。
找了一圈Api文档，貌似没有发现可以订阅新消息的接口。
是否是我看漏了。
如果真的没有，是否可以增加一个这样的功能？

[FEAT]一些功能性建议

最近尝试了一些第三方的自建 IM 如 rocketchat, elements, 我觉得 vocechat 更吸引我, 但是我个人认为有些比较必要的功能不完善或者有缺失, 列出来作者看看是否合理.
(1) 通讯录可见性.
问题描述: 目前新加入的成员, 在 contacts 上能看到服务器上所有已注册的成员, 我觉得不太好. 目前的设计更像是一个传统的群聊 group, 或者企业通讯录. 事实上, 我更希望每个用户有自己的通讯录, 像传统的日常 IM 如微信, telegram 等的设计. 如果被邀请入群聊后, 可以再从群聊中选择成员加入好友或者通讯录, 更有隐私性.
建议改进: 模拟上述日常 IM 软件, 各个用户自主添加好友; 或者管理员加一个设置, 该服务器上的成员是否允许互相全部可见, 相当于多了一个功能切换选项.
(2) 消息推送问题.
问题描述: iOS 端推送仅有横幅推送, 无图标小红点提示, 当系统消息推送过多时, 不下拉通知不知道有未读消息, 有小红点就方便很多, 事实上这也是其他 IM 标配; web 版不支持横幅推送, 不然很难知道有新消息抵达. rocketchat 在 macOS 上收到未读消息时有右上角横幅提醒, 同时 tab 上显示有未读消息.
建议改进: 移动端添加未读消息小红点; web 端支持横幅消息推送, 同时 tab 显示未读消息(数量或者仅提示有未读消息).
(3) 消息管理与显示问题.
主要是对齐基本的 IM 功能, 不主张花里胡哨的功能, 这里直接陈列我认为需要改进的点:

• 消息搜索: group 级别和 server 级别的消息搜索, 并对中文支持友好(rocketchat, telegram 中文搜索长期维持基本不可用状态). 我认为消息搜索是必备功能. 既然已经用了数据库, 我认为添加搜索应该不难?
• 消息清理: 其实是空间清理功能, 自建 server 一般容量有限(考虑到大家使用小容量 VPS), 建议添加 group 级别的消息自动清理功能. 如 rocketchat 支持群聊最大保持消息的时长, 我可以设定超过 7 天的消息自动清理. 对于聊天吹水群能有效保护服务器不被漫天消息撑爆存储空间.
• 回复/引用消息跳转: 当回复一条消息时, 点击引用无法跳转到原上下文, 希望添加支持.
• 上次已读功能: 进入群聊后, 能提示有多少条消息未读, 并显示一个分割线, 分隔上次已读和新未读消息.
• 移动端链接 OpenGraph 丢失: 目前发现 web 版是支持链接自动解析 OpenGraph 的, 但是 iOS 端目前还没看到.

(4) 其他锦上添花建议:

• 收藏夹: 收藏一些消息, 链接, 与图片, 加入到自己的收藏夹中.
• 表情包管理支持: 表情包能给聊天带来很多乐趣. 我认为实现其实不复杂, 本质就是 gif 的收藏管理.
• 语音/视频通话: 不知实现是否困难, 我看到 rocketchat 是用的 Jitsi.

暂时想到这些, 希望有帮助

两个关于移动设备访问邀请链接的问题

反馈两个问题。

1. Android设备访问Play商店下载页面时，没有自动跳转至本地的Play商店app。
2. iOS设备访问邀请注册链接时，会直接跳转至下载页面，导致无法在iOS上注册。

iOS客户端推送失效了？[BUG]

之前的iOS版本推送是正常的，貌似更新之后就没有推送了，不知道是我服务器设置问题还是iOS客户端的问题？

关于导入自有证书

找不到config/config.toml
是需要自己创建吗？放在哪个路径？
考虑做网页填写证书路径或者网页上传证书的功能吗

以后会支持语音聊天功能吗

简述
以后会支持语音聊天功能吗

你预期要达到什么效果
不依赖第三方软件的，即时网页语音聊天功能

目前有没有替代
KOOK、开黑啦、DC

自动切换语言

当ip为国外或者浏览器语言为英文的访问者可以看到英文的页面

When the ip is outside of China or the browser language is English visitors can see the page in English

[BUG]

Describe the error
Succinctly describe what the error is.

Reproduce
Steps to reproduce the behavior.

1. Go to "..." .
2. Click on '....' .
3. Scroll down to '....'
4. See the error

Expected behavior
Succinctly describe what you expect to happen.

Installation completes and then loads infinitely without access

Screenshot
If applicable, add screenshots to help explain your problem.

Desktop (please fill in the following information):

• Operating System. [e.g. iOS] windows
• Browser [e.g. chrome, safari] chrome
• Server version [e.g. v0.3.1] v0.3.18
• Client version [e.g. v0.3.26

Additional background
Add any additional context about the issue here.

Startup parameters

docker run -d --restart=always \
  -p 3000:3000 \
  --name vocechat-server \
  -v /opt/vocechat-server/data:/home/vocechat-server/data \
  privoce/vocechat-server:v0.3.18-arm64 \
  --network.frontend_url "https://*" 

have been requesting.
https://*/api/user/events?api-key=eyJhbGciOiJIUzI1NiJ9. eyJkIjp7InVpZCI6MSwiZGV2aWNlIjoid2ViOjFTTlZyTUhFN2JwampyM3VqVkU4SSIsImlzX2FkbWluIjp0cnVlLCJpc19ndWVzdCI6ZmFsc2V9LCJlIjoiMjAyMy0wMS0wNVQwOTo1OTo1MC45NDA4MzIzNTZaIiwibiI6IjNQWVRPR3FldG1NQUFBQUEiLCJ0IjoiQWNjZXNzVG9rZW4ifQ .DxNJNd7yvThkmOWY8NBAN793U9sXOOeS9mVHp7rCd0Y&users_version=1