trying to implement a talks.js library to create chat on react

user_18785884 0
Viewed 80

I'm trying to implement a talks.js library to create chat on react I follow all steps that show up here https://talkjs.com/docs/Getting_Started/Frameworks/React/ but it's not working, I don't know what I'm missing up

I'm exporting this component below and importing in home component

import { useRef } from 'react';
import Talk from 'talkjs';

const UserChat = () => {

const talkjsContainer = useRef('root');
// const currentUser = this.props.currentUser;
    useEffect(() => {
      Talk.ready.then(( ) => {

        var me = new Talk.User({
            id: '123456',
            name: 'Alberto',
            email: 'alice@example.com',
            photoUrl: 'https://demo.talkjs.com/img/alice.jpg',
            welcomeMessage: 'Hey there! How are you? :-)',
        });

        window.talkSession = new Talk.Session({
            appId: 'tUOOCMxO',
            me: me,
          });


          var other = new Talk.User({
            id: '654321',
            name: 'Sebastian',
            email: 'Sebastian@example.com',
            photoUrl: 'https://demo.talkjs.com/img/sebastian.jpg',
            welcomeMessage: 'Hey, how can I help?',
            role: 'default',
          });
        
          var conversation = window.talkSession.getOrCreateConversation(
            Talk.oneOnOneId(me, other)
          );
        
          conversation.setParticipant(me);
          conversation.setParticipant(other);

          var inbox = window.talkSession.createInbox();
          inbox.select(conversation);

       
          inbox.mount(talkjsContainer.current)

      });
    }, []);

    
        return(
            
            <div ref={talkjsContainer}></div>
        ) 
        
    

}

export default UserChat;
reactjs chat javascript
2 Answers

you can use this

   const startChat = (user) => {
    if (!window.talkSession ) {
      return false;
    }
    const other = new Talk.User({
      id: "1222222",
      name: "james",
      email:"james1@yandex.com",
      role: buyer 
    });
    const conversation = 
    window.talkSession.getOrCreateConversation(Talk.oneOnOneId(me, other));
    conversation.setParticipant(me);
    conversation.setParticipant(other);

    const popup = window.talkSession.createPopup(conversation, { keepOpen: false });
    popup.mount({ show: false });

    popup.show();
  };
user_194256590 
for appId you need to add your appId and also you need to add role on your talkjs app .


   const startChat = () => {
    const container = React.createRef();

    Talk.ready.then(() => {
     const me = new Talk.User({
    id: "222",
   name: "jorge",
   email: "jorge23@yandex.com",
    role: "buyer",
     });
    window.talkSession = new Talk.Session({
      appId: "",
      me,
    });

   const other = new Talk.User({
      id: "122333333",
       name: "heelo",
       email: "test122@yopmail.com",
       role: "vendor",
     });

     inbox.show();
    });
  
  const me = new Talk.User({
   
    id: "2222",
    name: "hii",
    email: "test2@yopmail.com",
    welcomeMessage: "Hey there! How are you? :-)",
  });
  const other = new Talk.User({
    id: "122333333",
    name: "heelo",
    email: "test1@yopmail.com",
     role: "vendor",
  });
  useEffect(() => {
    Talk.ready.then(() => {
      if (!window.talkSession) {
        window.talkSession = new Talk.Session({
          appId: "",
          me,
        });
      }
      const conversation = window.talkSession.getOrCreateConversation(Talk.oneOnOneId(me, other));
      conversation.setParticipant(me);
      conversation.setParticipant(other);
      const inbox = window.talkSession.createInbox(conversation.current);
      inbox.mount(container.current);
    });
  });
   window.talkSession = new Talk.Session({
      appId: "",
     me,
    });
   if (!window.talkSession) {
      window.talkSession = new Talk.Session({
       appId: "",
       me,
     });
   }

    const conversation = window.talkSession.getOrCreateConversation(Talk.oneOnOneId(me, other));
    conversation.setParticipant(me);
   conversation.setParticipant(other);
   const inbox = window.talkSession.createInbox({ selected: conversation });
  const talkjsContainer = React.createRef();
const talkjsContainer = React.createRef();
    return <div ref={(e) => (container = e)} >
        loading.....
        </div>
  };
  return (
    <div style={{ height: "" }} ref={container}>
      loading.....
    </div>
  );
};
user_194256590
Related