Vue updates

Author: keerlu

vue/vue-getting-started/src/components/Chat.vue

@@ -2,43 +2,42 @@
 
 <template>
  <div id="talkjs-container" style="width: 100%; height: 500px">
-  <i>Loading chat...</i>
+ <i>Loading chat...</i>
  </div>
 </template>
 
 <script setup>
- import Talk from "talkjs";
- import { onMounted } from 'vue';
+import Talk from "talkjs";
+import { onMounted } from "vue";
 
- onMounted(() => {
- Talk.ready.then(() => {
- const me = new Talk.User({
- id: 'nina',
- name: 'Nina',
- email: 'nina@example.com',
- photoUrl: 'https://talkjs.com/new-web/avatar-7.jpg',
- welcomeMessage: 'Hi!',
- });
- const session = new Talk.Session({
- appId: '<APP_ID>',
- me: me,
- });
+onMounted(() => {
+ Talk.ready.then(() => {
+ const session = new Talk.Session({
+ appId: "<APP_ID>",
+ userId: "nina",
+ });
+ session.currentUser.createIfNotExists({
+ name: "Nina",
+ email: "nina@example.com",
+ photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
+ welcomeMessage: "Hi!",
+ });
 
-  const other = new Talk.User({
-  id: 'frank',
-  name: 'Frank',
-  email: 'frank@example.com',
-  photoUrl: 'https://talkjs.com/new-web/avatar-8.jpg',
-  welcomeMessage: 'Hey, how can I help?',
-  });
+ const otherRef = session.user("frank");
+ otherRef.createIfNotExists({
+ name: "Frank",
+ email: "frank@example.com",
+ photoUrl: "https://talkjs.com/new-web/avatar-8.jpg",
+ welcomeMessage: "Hey, how can I help?",
+ });
 
-  const conversation = session.getOrCreateConversation('new_conversation');
-  conversation.setParticipant(me);
-  conversation.setParticipant(other);
+ const conversationRef = session.conversation("new_conversation");
+ conversationRef.createIfNotExists();
+ conversationRef.participant(otherRef).createIfNotExists();
 
- const chatbox = session.createChatbox();
- chatbox.select(conversation);
- chatbox.mount(document.getElementById('talkjs-container'));
- });
+ const chatbox = session.createChatbox();
+ chatbox.select(conversationRef);
+ chatbox.mount(document.getElementById("talkjs-container"));
  });
+});
 </script>