(props) add singleRoom prop

Author: antoine92190

README.md

@@ -96,8 +96,9 @@ You can import it as a custom component:
 | showReactionEmojis       | Boolean          | -        | true    |
 | textMessages (6)         | Object           | -        | null    |
 | responsiveBreakpoint (7) | Number           | -        | 900     |
-| theme (8)                | Sring            | -        | light   |
-| styles (9)               | Object           | -        | (9)     |
+| singleRoom (8)           | Number           | -        | 900     |
+| theme (9)                | Sring            | -        | light   |
+| styles (10)              | Object           | -        | (10)    |
 
 (1) `currentUserId` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
 
@@ -178,11 +179,13 @@ textMessages="{
 }"
 ```
 
-(7) `responsiveBreakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width
+(7) `responsiveBreakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
 
-(8) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
+(8) `singleRoom` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
 
-(9) `styles` can be used to customize your own theme. Ex:
+(9) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
+
+(10) `styles` can be used to customize your own theme. Ex:
 
 ```javascript
 styles="{

src/ChatWindow/ChatWindow.vue

@@ -2,6 +2,7 @@
 	<div class="card-window" :style="[{ height }, cssVars]">
 		<div class="chat-container">
 			<rooms-list
+				v-if="!singleRoom"
 				:currentUserId="currentUserId"
 				:rooms="rooms"
 				:loadingRooms="loadingRooms"
@@ -26,6 +27,7 @@
 				:showEmojis="showEmojis"
 				:showReactionEmojis="showReactionEmojis"
 				:textMessages="t"
+				:singleRoom="singleRoom"
 				:showRoomsList="showRoomsList"
 				:isMobile="isMobile"
 				:loadingRooms="loadingRooms"
@@ -64,6 +66,7 @@ export default {
 		theme: { type: String, default: 'light' },
 		styles: { type: Object, default: () => ({}) },
 		responsiveBreakpoint: { type: Number, default: 900 },
+		singleRoom: { type: Boolean, default: false },
 		textMessages: { type: Object, default: null },
 		currentUserId: { type: [String, Number], default: '' },
 		rooms: { type: Array, default: () => [] },

src/ChatWindow/Room.vue

@@ -1,11 +1,12 @@
 <template>
 	<div
 		class="col-messages"
-		:class="{ 'col-messages-full': !showRoomsList }"
+		:class="{ 'col-messages-full': !showRoomsList || singleRoom }"
 		v-show="(isMobile && !showRoomsList) || !isMobile"
 	>
 		<div class="room-header app-border-b">
 			<div
+				v-if="!singleRoom"
 				class="svg-button toggle-button"
 				:class="{ 'rotate-icon': !showRoomsList && !isMobile }"
 				@click="$emit('toggleRoomsList')"
@@ -234,6 +235,7 @@ export default {
 	props: {
 		currentUserId: { type: [String, Number], required: true },
 		textMessages: { type: Object, required: true },
+		singleRoom: { type: Boolean, required: true },
 		showRoomsList: { type: Boolean, required: true },
 		isMobile: { type: Boolean, required: true },
 		rooms: { type: Array, required: true },