jeremyckahn / chitchatter

Secure peer-to-peer chat that is serverless, decentralized, and ephemeral

📄 Check out my resume! 👈️

My guiding principles

• Open is good.
• Dependencies are bad.
• Help others help themselves! 🙂

Please help support my work!

If you've enjoyed or gotten use out of my work, please sponsor me so I can continue to make great open source software! Any contributions are greatly appreciated. Thank you in advance!

chitchatter's Issues

File sharing is broken on Android

file sharing doesn't seem to work from/to my android device. I tested it on 4 different browsers (Chrome, Brave, Duckduckgo, Firefox).

Originally posted by @butera-simone in #72 (comment)

Embeddable Chitchatter

Chitchatter should be embeddable within another app.

Message recalling

Users should have the ability to request sent messages to be deleted on all peers devices (provided that there is still an active peer connection).

Voice calling

Users should be able to make voice calls to peers.

Active typing indicators

It should be indicated to peers when any other peer is actively typing.

Message editing

Users should be able to edit their messages after they've been sent.

Show notifications for new messages

When a user receives a message and the Chitchatter room is not in focus, present an operating system-level notification to inform the user that there is a new message. This functionality should be off by default, but able to be enabled via a persisted user setting.

Easier sharing of private rooms

Should be able to send a private room URL which includes the password, such that one doesn't need to type in the room password. This is already an established pattern with zoom calls.

This can be contained purely in the local javascript layer by putting the password in the part of the URL after the hash #, since anything after hash is not sent to the server in the HTTP request.

If there's a concern about the URL being too readable, potentially a hash of the password is in the URL, rather than the password itself, and manually entered passwords are internally hashed to the same value before being passed to Trystero api call.

Support ad-hoc networks

Per u/Bassfaceapollo on Reddit:

I hope you consider adding support for messaging over ad-hoc networks at some point.

This might give you some direction -

• https://berty.tech/blog/bluetooth-low-energy
• https://en.m.wikipedia.org/wiki/Multicast_DNS
• https://en.m.wikipedia.org/wiki/Bluetooth_Low_Energy

Ability to adjust volume of other users

Please!!!

Design logo

Currently Chitchatter uses the default Create React App logo: https://github.com/jeremyckahn/chitchatter/blob/develop/public/logo512.png

The project needs something more distinctive and unique.

OTP feature for room links

Chitchatter needs an integrated OTP feature for securely sharing room links with peers. Something like https://burnernote.com/, but entirely client-side and built directly into Chitchatter.

Acceptance Criteria

Sharer experience

• There is a new menu item called "Secure Invite"
• When the user (Sharer) clicks "Secure Invite," they are redirected to a new route called /otp
• The /otp route presents the user with a form that accepts a room name
• When Sharer submits the form, the form is replaced with:
  • A Chitchatter Secure Link that can be shared with someone (a Sharee)
    • The Secure Link should direct users to a new /otp/:otpId route (example: https://chitchatter.im/otp/3b5ac1ff-e1c0-4797-9988-21a3e70302f2)
  • A message informing Sharer that they must keep their tab open until Sharee has accessed the Secure Link
  • When Sharee successfully accepts the invite and accesses the chat room, Sharer is automatically redirected to the chat room as well

Sharee experience

• When a user (Sharee) navigates to the /otp/:otpId Secure Link as provided by Sharer (see above), they are presented with a button to accept the invite
• When Sharee accepts the invite, they are redirected to the room that the Sharer specified

Notes

This is just the first iteration of this feature. In the future, we should add the following enhancements:

• Password-protected OTP links
• Capability to share Secure Links with more than one person

Limit transcript size

To ensure stability and performance, message transcript size should be limited.

Limit the size of messages

Chat messages should be limited to 10,000 characters.

Indicate Markdown support

It should be clearly indicated to the user that they can use Markdown in their messages.

Indicate when relay is being used

Indicate when peer communication is being done over a TURN server relay.

Technical notes

• This StackOverflow post suggests how relayed communication might be detected: https://stackoverflow.com/questions/53133745/how-to-check-if-webrtc-peers-communicated-in-p2p-mode-or-relay-mode/53138581#53138581

Inform users when an update is available

As an installed Progressive Web Application, available updates get automatically installed in the background after the page is loaded. When an updated version of the app is available, notify the user.

Video calling

Users should able to make video calls to peers.

Nextjs implementation

Great work so far!

I'm trying to migrate this from CRA to nextjs, any clue if this is possible at all? Currently it's showing "Error: Trystero: already joined room".

[Community Room Request]:

Room URL

https://chitchatter.im/public/chitchatter-dev

Room Subject

Meta community room for chitchatter users to discuss chitchatter development.

Private Rooms not working on Firefox on Android (but work on Brave mobile browser)

I have tried multiple times with the same result. I cannot see the other user when I join a private room from Firefox on Android. When trying the Brave mobile browser on the same Android phone (Samsung S21), it works.

Public rooms do work on Firefox mobile.

Message sound effects don't work on Android or iOS

Message sounds effects (#7) don't appear to be working on Android or iOS.

Message grouping

A series of messages from one peer should appear grouped under the author's user name header, rather than one user name header per each message.

Linux and Windows native apps

Linux and Windows native apps should be produced when Chitchatter is deployed.

This can be achieved with electron-builder. Here's an example of how this can be achieved:

• https://github.com/jeremyckahn/farmhand/blob/fefa45a03c22c6dac04c3ff85f72cb1f18fbed4f/.github/workflows/run-release.yml#L114-L133
• https://github.com/jeremyckahn/farmhand/blob/fefa45a03c22c6dac04c3ff85f72cb1f18fbed4f/package.json#L135-L177

Note: MacOS builds are out of scope and not likely to be supported. This is because it will cost money to enable app auto-updating for that platform:

Code signing is required on macOS

macOS application must be signed in order for auto updating to work.

Encrypted file transfers

Chitchatter should end-to-end encrypt file transfers for greater security.

Android native app

Adding Android .apk support is a distinct effort from Windows/Linux, so I'll break that out into a new issue.

Originally posted by @jeremyckahn in #44 (comment)

Generate and provide installable Android .apk files as part of the build process.

Empty room id in URL displays empty page

If you remove the room ID, such as https://chitchatter.im/private/, or https://chitchatter.im/public/, the page displays nothing

[Community Room Request]:

Room URL

https://chitchatter.im/public/chitchatter

Room Subject

Meta community room for chitchatter users.

Image sharing

Users should be able to upload image files to each other.

Height of room window too high

When in safari on an iPhone 11, the content when I'm in a room does not fit the screen. I can either scroll down to the input field it up to the first message. I cant see both at the same time

Transcript backfilling

Peers who join a room after there has already been text chatting should be shown the transcript of conversation that has already taken place (based on what's stored in memory on other peers' devices).

Set up preview deployment environments

Use something like Vercel to set up preview deployment URLs for testing.

Add disclaimer

Implement a "disclaimer" page with content adapted from what @MohammadTaseenKhan provided in #39.

[Request]: Allow YouTube links to preview in chat

I believe this would make a cool addition to the software! So you know what the video is before you click!

Having problem on firefox browser

Discussed in #35

^{Originally posted by MohammadTaseenKhan October 9, 2022}

Recently I am facing a new problems like when i use Firefox browser i cant send any message, even cant receive any message even no notification coming to me

Sending Message:

Receiving message:

It doesn't even showing how many numbers of peers are connected

same as well this also

https://chitchatter.im/public/85ccdfc7-b992-411d-9d98-0a5c2781138e

Request: Some sort of file upload progress

This would be especially good for larger files being sent over a chat room. Possibly a percentage and/or data progress counter when you hover over the icon.

Screen sharing

Users should be able to share their screen with a room.

Disable WebRTC relays

Allow the user to disable TURN server relays.

Notes

• It should be communicated to the user that this may prevent peers from being connected.

[Community Room Request]: Template test

Room URL

https://chitchatter.im/public/template-test

Room Subject

Just testing

Combine audio/video streams

Currently, audio and video streams are handled separately. This comes at a possible performance cost and blocks #77. The streams should be combined so that audio is outputted via <video /> elements that provide audio UI controls.

Play a sound for new messages

When a user receives a message and the Chitchatter room is not in focus, play a sound to inform the user that there is a new message. This functionality should be off by default, but able to be enabled via a persisted user setting.

Request: Emoji reactions to chat messages

Display peer list

The usernames for all of the currently-connected peers should be displayed as a list.

QR code support

Users should be able to request a QR code to be presented that links to the current room.

Is there a way to set my username?

Settings UI

Users should have a Settings UI from which they can set their application preferences and delete their persisted Settings data.

Display messge timestamps

Each message should present its timestamp to the user.

File sharing

Users should be able to send files to peers.

Request: Include commit hash on main page so you know what version you are using

I think this would be really cool!

Private rooms

Users should be able to create private rooms that require a password to access.

Acceptance Criteria

Room Creator flow

• There is a new toggle on the home page to select between "Public" and "Private" (see mock below). "Public" is selected by default.
• When the user (Room Creator) flips the toggle to "Private", a "Password" entry field appears below the "Room name" field.
• When the Room Creator flips the toggle back to "Public," the "Password entry field disappears.
• The "Password" field is shown in plain text and is prefilled with a random UUID.
• If the "Password" field is emptied out, the "Go to chat room" button is disabled until some content is entered again.
• When there is both a room name and password provided and the Room Creator clicks the "Go to chat room" button, they are redirected to a chat room via a new /private/:roomId route (example: https://chitchatter.im/private/666e3a53-cdf9-4add-b8be-cd9853ba8885)

Room Participant flow

• When a user who is not the Room Creator (Room Participant) navigates to a /private/:roomId route, they are presented with a Form Dialog that prompts the Room Participant to enter the room password.
• When the Room Participant submits a password, the Form Dialog is dismissed.
• If the password matches what the Room Creator specified, the Room Participant is connected to the room.
• If the password does not match what the Room Creator specified, the Room Participant is not connected to room participants.
  • It is acceptable for Room Participants who provided an incorrect password to be connected to a room, they just cannot be connected to other peers who entered the correct password.

Technical notes

Trystero's encryption functionality should be used to password-protect peer rooms.