howtos/how-to-lock-a-conversation-to-read-only/index.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>TalkJS tutorial</title>
  </head>

  <!-- minified snippet to load TalkJS without delaying your page -->
  <script>
    (function (t, a, l, k, j, s) {
      s = a.createElement("script");
      s.async = 1;
      s.src = "https://cdn.talkjs.com/talk.js";
      a.head.appendChild(s);
      k = t.Promise;
      t.Talk = {
        v: 3,
        ready: {
          then: function (f) {
            if (k)
              return new k(function (r, e) {
                l.push([f, r, e]);
              });
            l.push([f]);
          },
          catch: function () {
            return k && new k();
          },
          c: l,
        },
      };
    })(window, document, []);
  </script>

  <script>
    Talk.ready.then(function () {
    var me = new Talk.User({
      id: '123456',
      name: 'Alice',
      email: 'alice@example.com',
      photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
      welcomeMessage: 'Hey there! How are you? :-)',
      role: "admin",
    });
    window.talkSession = new Talk.Session({
      appId: 'YOUR_APP_ID',
      me: me,
    });
    var other = new Talk.User({
      id: '654321',
      name: 'Sebastian',
      email: 'Sebastian@example.com',
      photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
      welcomeMessage: 'Hey, how can I help?',
    });

    var conversation = talkSession.getOrCreateConversation(
      Talk.oneOnOneId(me, other)
    );
    conversation.setParticipant(me);
    conversation.setParticipant(other);

    var inbox = talkSession.createInbox({ selected: conversation });
    inbox.mount(document.getElementById('talkjs-container'));

    inbox.onCustomConversationAction('setReadOnly', (event) => {
      console.log('Locked conversation with id:', event.conversation.id);
      conversation = talkSession.getOrCreateConversation(event.conversation.id);
      conversation.setParticipant(me, { access: 'Read' });
      conversation.setParticipant(other, { access: 'Read' });
      inbox.select(conversation);
    });
  });
   
  </script>

  <body>
    <!-- container element in which TalkJS will display a chat UI -->
    <div id="talkjs-container" style="width: 90%; margin: 30px; height: 500px">
      <i>Loading chat...</i>
    </div>
  </body>
</html>