Add Conversation Join method (#1097)

* Add Conversation Join method

* remove unnecessary changes

* include unit test

* include changeset

* include join for chat

.changeset/weak-pigs-deliver.md

@@ -0,0 +1,5 @@
+---
+'@signalwire/js': minor
+---
+
+CF SDK: Add Conversations Join API

internal/playground-js/src/fabric-http/index.html

@@ -228,7 +228,11 @@ <h2 class="title mt-2"></h2>
                 </div>
               </div>
               <!-- Messages will be loaded here -->
-              <ul id="messageList" class="list-group list-group-flush mt-4">
+              <ul
+                id="messageList"
+                class="overflow-auto list-group list-group-flush mt-4"
+                style="max-height: calc(100vh - 50vh)"
+              >
                 <li class="list-group-item">
                   <span class="placeholder placeholder-lg col-6"></span>
                   <span class="placeholder placeholder-lg col-12"></span>
@@ -237,8 +241,17 @@ <h2 class="title mt-2"></h2>
                 </li>
               </ul>
               <div class="input-group mt-4 container-fluid">
-                <input type="text" id="new-conversation-message" class="form-control" placeholder="Message..." aria-label="Chat Message" aria-describedby="button-addon2">
-                <button class="btn btn-primary" type="button" id="send-message"><i class="bi-send"></i></button>
+                <input
+                  type="text"
+                  id="new-conversation-message"
+                  class="form-control"
+                  placeholder="Message..."
+                  aria-label="Chat Message"
+                  aria-describedby="button-addon2"
+                />
+                <button class="btn btn-primary" type="button" id="send-message">
+                  <i class="bi-send"></i>
+                </button>
               </div>
             </div>
           </div>

internal/playground-js/src/fabric-http/index.js

@@ -2,7 +2,9 @@ import { SignalWire } from '@signalwire/js'
 
 const searchInput = document.getElementById('searchInput')
 const searchType = document.getElementById('searchType')
-const conversationMessageInput = document.getElementById('new-conversation-message')
+const conversationMessageInput = document.getElementById(
+  'new-conversation-message'
+)
 const sendMessageBtn = document.getElementById('send-message')
 
 let client = null
@@ -159,10 +161,9 @@ const createAddressListItem = (address) => {
     button.className = 'btn btn-sm btn-success'
 
     const icon = document.createElement('i')
-    if (channelName != 'messaging') {
+    if (channelName !== 'messaging') {
       button.addEventListener('click', () => dialAddress(channelValue))
     } else {
-
       button.addEventListener('click', () => {
         subscribeToNewMessages()
         openMessageModal(address)
@@ -198,7 +199,7 @@ function updateAddressUI() {
   addresses
     .map(createAddressListItem)
     .forEach((item) => addressUl.appendChild(item))
-  subscribeToNewMessages();
+  subscribeToNewMessages()
 }
 
 async function fetchAddresses() {
@@ -525,6 +526,9 @@ async function fetchMessages(id) {
       addressId: id,
     })
     window.__messageData = messages
+    await client.conversation.join({
+      addressId: id,
+    })
     updateMessageUI()
   } catch (error) {
     console.error('Unable to fetch messages', error)

internal/playground-js/src/fabric/index.js

@@ -338,7 +338,7 @@ window.connect = async () => {
   await call.start()
   console.debug('Call Obj', call)
 
-  // Render video element using custom function
+  /* --------- Render video element using custom function ---------- */
   // setTimeout(async () => {
   //   const { unsubscribe } = await buildVideoElement({
   //     room: call,

packages/js/src/fabric/Conversation.test.ts

@@ -223,6 +223,48 @@ describe('Conversation', () => {
     })
   })
 
+  describe('joinConversation', () => {
+    it('should join a conversation', async () => {
+      const addressId = uuid()
+      const expectedResponse = {
+        table: {
+          conversation_id: addressId,
+        },
+      }
+      ;(httpClient.fetch as jest.Mock).mockResolvedValue({
+        body: expectedResponse,
+      })
+
+      const result = await conversation.joinConversation({
+        addressId,
+      })
+
+      expect(result).toEqual(expectedResponse)
+      expect(httpClient.fetch).toHaveBeenCalledWith('/api/fabric/conversations/join', {
+        method: 'POST',
+        body: {
+          conversation_id: addressId,
+        },
+      })
+    })
+
+    it('should handles errors with joinConversation', async () => {
+      ;(httpClient.fetch as jest.Mock).mockRejectedValue(
+        new Error('Network error')
+      )
+
+      try {
+        await conversation.joinConversation({
+          addressId: uuid(),
+        })
+        fail('Expected joinConversation to throw error.')
+      } catch (error) {
+        expect(error).toBeInstanceOf(Error)
+        expect(error.message).toBe('Error joining a conversation!')
+      }
+    })
+  })
+
   describe('subscribe', () => {
     let callback
 

packages/js/src/fabric/Conversation.ts

@@ -20,6 +20,9 @@ import type {
   ConversationChatMessagesSubsribeParams,
   ConversationChatMessagesSubsribeResult,
   GetConversationChatMessageResult,
+  JoinConversationParams,
+  JoinConversationResponse,
+  JoinConversationResult,
 } from './types'
 import { conversationWorker } from './workers'
 import { buildPaginatedResult } from '../utils/paginatedResult'
@@ -59,11 +62,20 @@ export class Conversation {
     })
   }
 
+  /** @internal */
+  public handleEvent(event: ConversationEventParams) {
+    if (this.callbacks.length) {
+      this.callbacks.forEach((callback) => {
+        callback(event)
+      })
+    }
+  }
+
   public async sendMessage(
-    options: SendConversationMessageParams
+    params: SendConversationMessageParams
   ): Promise<SendConversationMessageResult> {
     try {
-      const { addressId, text } = options
+      const { addressId, text } = params
       const path = '/api/fabric/messages'
       const { body } =
         await this.httpClient.fetch<SendConversationMessageResponse>(path, {
@@ -80,10 +92,10 @@ export class Conversation {
   }
 
   public async getConversations(
-    options?: GetConversationsParams
+    params?: GetConversationsParams
   ): Promise<GetConversationsResult> {
     try {
-      const { pageSize } = options || {}
+      const { pageSize } = params || {}
 
       const path = '/api/fabric/conversations'
       const queryParams = new URLSearchParams()
@@ -105,10 +117,10 @@ export class Conversation {
   }
 
   public async getMessages(
-    options?: GetMessagesParams
+    params?: GetMessagesParams
   ): Promise<GetMessagesResult> {
     try {
-      const { pageSize } = options || {}
+      const { pageSize } = params || {}
 
       const path = '/api/fabric/messages'
       const queryParams = new URLSearchParams()
@@ -131,10 +143,10 @@ export class Conversation {
   }
 
   public async getConversationMessages(
-    options: GetConversationMessagesParams
+    params: GetConversationMessagesParams
   ): Promise<GetConversationMessagesResult> {
     try {
-      const { addressId, pageSize } = options || {}
+      const { addressId, pageSize } = params || {}
 
       const path = `/api/fabric/conversations/${addressId}/messages`
       const queryParams = new URLSearchParams()
@@ -210,12 +222,24 @@ export class Conversation {
     }
   }
 
-  /** @internal */
-  public handleEvent(event: ConversationEventParams) {
-    if (this.callbacks.length) {
-      this.callbacks.forEach((callback) => {
-        callback(event)
-      })
+  public async joinConversation(
+    params: JoinConversationParams
+  ): Promise<JoinConversationResult> {
+    try {
+      const { addressId } = params
+      const path = '/api/fabric/conversations/join'
+      const { body } = await this.httpClient.fetch<JoinConversationResponse>(
+        path,
+        {
+          method: 'POST',
+          body: {
+            conversation_id: addressId,
+          },
+        }
+      )
+      return body
+    } catch (error) {
+      throw new Error('Error joining a conversation!', error)
     }
   }
 }

packages/js/src/fabric/ConversationAPI.ts

@@ -7,15 +7,20 @@ import {
 } from './types'
 
 export class ConversationAPI implements ConversationContract {
+  constructor(
+    private conversation: Conversation,
+    private data: ConversationResponse
+  ) {}
+
   get id() {
     return this.data.id
   }
 
-  get created_at() {
+  get createdAt() {
     return this.data.created_at
   }
 
-  get last_message_at() {
+  get lastMessageAt() {
     return this.data.last_message_at
   }
 
@@ -27,11 +32,6 @@ export class ConversationAPI implements ConversationContract {
     return this.data.name
   }
 
-  constructor(
-    private conversation: Conversation,
-    private data: ConversationResponse
-  ) {}
-
   sendMessage(params: ConversationAPISendMessageParams) {
     return this.conversation.sendMessage({
       addressId: this.id,

packages/js/src/fabric/SignalWire.ts

@@ -36,12 +36,13 @@ export const SignalWire = (
             conversation.getConversationMessages.bind(conversation),
           subscribe: conversation.subscribe.bind(conversation),
           sendMessage: conversation.sendMessage.bind(conversation),
+          join: conversation.joinConversation.bind(conversation),
         },
         chat: {
-          getMessages:
-            conversation.getChatMessages.bind(conversation),
+          getMessages: conversation.getChatMessages.bind(conversation),
           subscribe: conversation.subscribeChatMessages.bind(conversation),
           sendMessage: conversation.sendMessage.bind(conversation),
+          join: conversation.joinConversation.bind(conversation),
         },
         // @ts-expect-error
         __httpClient: httpClient,

packages/js/src/fabric/types.ts

@@ -28,11 +28,13 @@ export interface SignalWireContract {
     getConversationMessages: Conversation['getConversationMessages']
     subscribe: Conversation['subscribe']
     sendMessage: Conversation['sendMessage']
+    join: Conversation['joinConversation']
   }
   chat: {
     getMessages: Conversation['getChatMessages']
     subscribe: Conversation['subscribeChatMessages']
     sendMessage: Conversation['sendMessage']
+    join: Conversation['joinConversation']
   }
 }
 
@@ -189,8 +191,8 @@ export type GetAddressesResult = PaginatedResult<GetAddressResponse>
  */
 export interface ConversationContract {
   readonly id: string
-  readonly created_at: number
-  readonly last_message_at: number
+  readonly createdAt: number
+  readonly lastMessageAt: number
   readonly metadata: Record<string, any>
   readonly name: string
   sendMessage(
@@ -208,6 +210,15 @@ export interface SendConversationMessageParams {
   details?: Record<string, any>
 }
 
+export interface SendConversationMessageResponse {
+  table: {
+    conversation_id: string
+    text: string
+  }
+}
+
+export type SendConversationMessageResult = SendConversationMessageResponse
+
 export interface GetConversationsParams {
   pageSize?: number
 }
@@ -220,15 +231,6 @@ export interface ConversationResponse {
   name: string
 }
 
-export interface SendConversationMessageResponse {
-  table: {
-    conversation_id: string
-    text: string
-  }
-}
-
-export type SendConversationMessageResult = SendConversationMessageResponse
-
 export type GetConversationsResponse = PaginatedResponse<ConversationResponse>
 
 export type GetConversationsResult = PaginatedResult<ConversationContract>
@@ -246,6 +248,19 @@ export interface ConversationChatMessagesSubsribeResult {
   cancel: () => CoversationSubscribeCallback[]
 }
 
+export interface JoinConversationParams {
+  addressId: string
+}
+
+export interface JoinConversationResponse {
+  table: {
+    conversation_id: string
+    text: string
+  }
+}
+
+export type JoinConversationResult = JoinConversationResponse
+
 /**
  * Conversation Messages
  */