twilio / twilio-conversations-demo-react Goto Github PK

What is the username & password to be used to login to twilio conversation demo app.

while installing @twilio/conversations@^2.0.0, I get this error during the postinstall step with yarn 3 on Ubuntu:

➤ YN0009: │ @twilio/conversations@npm:2.0.0 couldn't be built successfully (exit code 127, logs can be found here: /tmp/xfs-a48fafed/build.log)

that file contains the following:

# This file contains the result of Yarn building a package (@twilio/conversations@npm:2.0.0)
# Script name: postinstall

command not found: if
command not found: then
command not found: fi

a comment here seemed to imply that a fix would be coming, but AFAICT there have been no releases of @twilio/conversations since the original 2.0.0 a few months ago.

are there any workarounds I can try in the meantime?

thanks!

Just saying.

I don't think using an over-engineering tool like Redux is a good idea for "demo" apps,
I noticed that I been battling with navigating between Redux reducers and actions just to get to know how basic things work in this SDK

We have a project in React Native, can we use the JS REACT SDK, or do I need to create bridges for Swift and Java?

The textbox clear texts and make an empty field when a participant sends new messages.

But in some cases I am able to see that the textbox clear texts when the app fires is looking for a new messages.

any help?
thanks

Also it will be also nice to make it searchable.

I followed the readme to setup this demo app using the Twilio function. I did not use Firebase.

I am able to login successfully, however when I try to create a conversation, a toast appears saying "Something went wrong. Please try again."

Had a wee look to see if I can find out what's going wrong, and found that we are getting the following error in the addConversation method in api.ts

TypeError: Cannot read properties of undefined (reading 'then')
    at _class._callee8$ (client.ts:1070:1)
    at tryCatch (regeneratorRuntime.js:86:1)
    at Generator._invoke (regeneratorRuntime.js:66:1)
    at Generator.next (regeneratorRuntime.js:117:1)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)

This seems to be thrown by the following call:

const conversation = await client.createConversation({
  friendlyName: name,
});

https://gyazo.com/dff0fb9b4a41a3768ce6d0c0d5b96f5c

Perhaps I'm missing something obvious here?

while open the conversation details with messages, default load the 30 recent messages, while scroll up older messages came, but these older messages append to bottom instead of top. can you please help, thank you.

we still want to use public channels and let others see these public channels and be able to join them. we already have this feature set up with Twilio chat. Now we are trying to migrate into Twilio conversations and we are not sure how to still provide this feature to end-users.

I have more than a hundred conversations and this app is not user-friendly with such a long list.
Below is the list of the issues I noticed:

• It will take to finish loading the last in the list to show the conversations list. So if you have a 500 in the record, it will take several seconds for the list to show up.
• After loading the list, the messages in the conversation will load, and it will take another seconds for us to use the app properly.
• If you click a conversation while loading, it will return an error "Cannot read properties of undefined (reading 'length')"

Message List can handle a long list of messages in a conversation very well. I hope Infinite Scroll can be implemented in Conversations List. In most cases, we will only need the most recent messages not more than 50.

I am using Twilio Conversations Javascript SDK for a React Native App.
And I am using "react-native-firebase/messaging" package for messaging.

However, the library I am using requires the messages coming from Twilio to have 'high' priority.
Currently message priority is default. Is there any way to configure this in twilio?

Hey there!

After cloning when i am installing node modules, it keep saying this to me:

Module not found: Error: Can't resolve '@twilio-paste/icons/esm/ProductSwitcherIcon' in 'D:\csdev\codesymphony\twilio-conversations-demo-react\node_modules\@twilio-paste\product-switcher\dist'

However, somehow I fixed this issue myself but after that I am not able to "create a conversation" as the modal keep saying that
Cannot read properties of undefined (reading 'then')

Image has been attached for reference.

Thank you for you help

When a user leaves a conversation, the CONVERSATIONCLIENT.getSubscribedConversation method still shows that chat.

We get a lot of errors that this._conversationsPromise is undefined when trying to call getSubscribedConversations on a channel. Let's take a look at getSubscribedConversations:

async getSubscribedConversations() {
    await this._ensureReady;
    return this._conversationsPromise.then((conversations) => conversations.getConversations());
}

Let's look how _ensureReady is defined in client.js of @twilio/conversations

this._ensureReady = new Promise((resolve, reject) => {
    this._resolveEnsureReady = resolve;
    this._rejectEnsureReady = reject;
 }).catch(() => void 0); // @todo How to process unhandled rejection here?

Well, it seems that there is a bug here and await this._ensureReady will never throw because you swallowed the error. Since you swallowed the error we get to the next line return this._conversationsPromise.... But we can't be sure that _conversationsPromise was set.

You should remove that catch on _ensureReady in Client constructor. At least users or your library would get the original error.

Is it possible to do audio/video calls using the twilio conversation?

Some Time i get this error and my ui gets frezzzy or slow to load the chats

I'm having trouble displaying unread messages correctly.

For example, if the user is not inside the web demo and a new conversation is created, when said user enters the web demo he does not see the notifications (those that appear on the left), correctly.

Maybe it's related to firebase notifications that I have them turned off?

Thank you

I was trying to test the demo out, after having done the initial steps and setting up the serverless functions. I can log in and build the app successfully. However, I cannot create a new conversation.

Error: Cannot read properties of undefined (reading 'then')

  "react": "17.0.2",
  "@twilio/conversations": "2.4.1",

It's this function

  async createConversation(options) {    
        await this._ensureReady;
        options = options || {};
        return this._conversationsPromise.then((conversationsEntity) => conversationsEntity.addConversation(options));
    }

Note: I am using the serverless functions for the backend.

Node: v18

Use the steps here to set up the service.

I have gone through the other issues, not that helpful. Anyone who's been able to get throught this, I'd appreciate the support.

I'm getting error "something went wrong" during creation of the new conversation.

Hello, i cloned the repo and setup the dependencies and everything on twilio console.
I'm getting an error when I try to add a Chat Participant to a conversation.
I dunno what I m doing wrong.
I've logged the error to the console.

if (chatParticipant && name.length > 0) {
    try {
      const result = await convo.add(name);
      successNotification({
        message: PARTICIPANT_MESSAGES.ADDED,
        addNotifications,
      });
      return result;
    } catch (e) {
      console.log(e);
      return Promise.reject(e);
    }
  }}

Here is the picture:

Hello team,
I am deploying this repo and I am getting:

yarn build

yarn run v1.21.1
$ react-scripts build
/bin/sh: react-scripts: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

How can I fix this?

Thanks!

Hi, I'm implementing a chat application based on the code here and its going great mostly but I have an annoying little bug where it seems conversationAdded will sometimes not get hit (for any conversations) and I have no idea why. Is there any commonly known reason that could be causing this?

I'm initializing the twilio client in a singleton service

async initialize(myCarmmunityUserId: string): Promise<Client> {
    return new Promise(async (resolve, reject) => {
      if (this.client) {
        return resolve(this.client);
      }
      const token = await this.getToken();
      this.client = new Client(token);
      this.client.on('stateChanged', state => {
        if (state === 'initialized') {
          this.listenToEvents(this.client);
          return resolve(this.client);
        } else if (state === 'failed') {
          return reject('Failed to initialize Twilio client');
        }
      });
    });
  }

And then in listenToEvents:

listenToEvents(client: Client) {
    client.on('conversationAdded', async (conversation: Conversation) => {
        // intermittently this will not get hit happens maybe once every 4 times
    }
}

Linking expo/expo-github-action#234 as it pertains to the conversations library.

I'm posting this here as it is applicable to the conversations library and this was the most relevant repo I could find to get visibility from folks on the Twilio team (@berkus) 🤷🏼‍♂️.

How to delete the chats for the participant who has left the conversation. The other participants could still see the message of the left ones.

Thank you for creating this repo and sample app! It's helpful to see a new one built around Conversations 2.0.0.

In an existing application we're trying to get a list of a user's conversations and then display the most recent ones along with each conversation's most recent message. A problem we're running into is scaling this as a user belongs to 100+ conversations. We have to get that entire list, sort by the time it was last updated, then get the last message for each one of those conversations . It looks like you're doing something similar in convoReducer.js with case ActionType.LIST_CONVERSATIONS:.

We could delete a ton of client code, reduce app complexity, and (we believe) dramatically speed things up if we could have an orderBy parameter when fetching a list of a user's conversations. That way we could have them pre-sorted by date, then fetch the most recent message for the first 20 that we need to display.

Does this exist or will it exist? The docs for the Conversations API are a bit vague on what arguments Client.getSubscribedConversations accepts.

getSubscribedConversations(args?: any): Promise<Paginator<Conversation>>
Get the current list of all the subscribed conversations.

Parameters
Optional args: any

When I am sending a message than seeing this error Unable to connect: Connection is not initialized.
although the client is connected.

I have checked this post.
https://stackoverflow.com/questions/72098884/twilio-conversations-get-online-users

after setting the reachability to true

how I will get the online status value from the participants

const participants = await conversation.getParticipants()

participants.forEach(v=>{
console.log(v.getUser().isOnline)
})

in console getting undefined

The project README instructs to create a firebase_config.js file, while the app is is designed to import firebase-config.js.

I downloaded the project and it runs correctly.
But when trying to create a new conversation it gives this error in the api.
I didn't see how to fix it.

This is the error:

I think the error is in this method:

It would be great to show how to modify the UI using the Role or the Permissions assigned to that Role. For example hide the "Manage Participants" button if the Role doesn't have addParticipant or removeParticipant permissions.

I am experiencing some strange behavior:
If I send a message to a new conversation, where there is a person who is not logged in in this demo... when that person enters the page they will not see any of the sent messages.

Only when either of the two people send a new message will it work normally.

I think it may be because there is some kind of listener or behavior that is not initialized correctly.

Have you ever been to a similar situation? How can I solve that?

Thank you

How to destroy the client at logout.
when log in again then it creates a duplicate of the message while adding

this listener runs two times
client.on("messageAdded", (event) => {
console.log("messageAdded")})

I have followed carefully the instructions for setting up firebase push notification but still can't get it work. The image below shows the error in the console.

how to create a conversation to a specific chat service id using client SDK ?

This one is API BASED

client.conversations.v1.services('ISXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX')
.conversations('CHXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX')
.messages
.create()
.then(message => console.log(message.sid));

I want to do this in the client SDK itself . Is it possible or do I have to do that using API?

Unable to build the app due to a Typescript error. It looks like this issue was introduced in the latest merge: https://github.com/twilio/twilio-conversations-demo-react/pull/16/files

Property 'conversationTitle' does not exist on type 'PushNotificationData'. Did you mean 'conversationSid'?ts(2551)
[lib.d.ts(1430, 5): ]()'conversationSid' is declared here.

Digging into lib.d.ts, conversationTitle property seems to be missing from the PushNotificationData type:

/**
 * Additional data for a given push notification.
 */
interface PushNotificationData {
    /**
     * SID of the conversation.
     */
    conversationSid?: string;
    /**
     * Index of the message in the conversation.
     */
    messageIndex?: number;
    /**
     * SID of the message in the conversation.
     */
    messageSid?: string;
}

We're following the example, where on tokenAboutToExpire we fetch a new token and call client.updateToken, but we're seeing a lot of these errors:

TypeError: Cannot read properties of undefined (reading 'updateToken')
  at call(node_modules/@twilio/conversations/builds/browser.js:9351:49)
  at tryCatch(node_modules/@twilio/conversations/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
  at _invoke(node_modules/@twilio/conversations/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
  at key(node_modules/@twilio/conversations/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
  at asyncGeneratorStep(node_modules/@twilio/conversations/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:20)
  at _next(node_modules/@twilio/conversations/node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)

We are thinking of try/catching client.updateToken so it doesn't die, but from reading the conversations js internals, it looks like internally Client._fpaToken won't get set due to the error. Would there be any bad side effects?

We're on @twilio/conversations 2.4.1.