@tencentcloud/roomkit-electron-vue3 2.3.3

package/src/TUIRoom/extension/RoomMessageCard/handleRoomMessage.ts

@@ -0,0 +1,76 @@
+import { chatExtension, RoomState, MessageData } from '../chatExtension';
+import { Message, Profile } from '@tencentcloud/chat';
+import { getIsRoomCardMessage } from '../utils/judgeRoomMessage';
+
+/**
+ * Rendering cards requires isRoomMessage, isRoomCreateByMe, userList, isEnterRoom
+ * ChatExtension provides basic functions such as editing messages, sending messages, displaying messages on the screen.
+ * HandleRoomMessage implements business functions such as initiating meetings, joining meetings, leaving meetings.
+ */
+
+export class HandleRoomMessage {
+  private message = {} as Message;
+  public messageData: MessageData = {
+    isInnerRoom: false,
+    isRoomMessage: false,
+    isRoomCreateByMe: false,
+    isMessageFromMe: false,
+    roomId: '',
+    roomState: RoomState.CREATED,
+    userList: [],
+    myProfile: {} as Profile,
+    ownerName: '',
+    owner: '',
+  };
+
+  public initialize(message: Message) {
+    this.handleMessage(message);
+  }
+
+  public destroy() {
+    chatExtension.setHistoryMeetingMessageList('delete', { ID: this.message.ID, messageData: this.messageData });
+  }
+
+  // Get card information
+  private handleMessage(message: Message) {
+    this.message = message;
+    const currentUser = chatExtension.chatContext?.userID;
+    const messagePayload = this.parseMessageData(message);
+    if (!getIsRoomCardMessage(message)) return;
+    const {
+      businessID,
+      owner,
+      roomId,
+      roomState,
+      userList,
+      ownerName,
+    } = messagePayload;
+    const isRoomDestroyed = roomState === RoomState.DESTROYED;
+    const isInnerRoom = chatExtension.getOnGoingRoomId() === roomId
+      && userList.some(u => u.userId === currentUser)
+      && !isRoomDestroyed;
+    const isRoomCreateByMe =  owner === currentUser;
+    if (isRoomCreateByMe && isInnerRoom && !isRoomDestroyed) {
+      chatExtension.setActiveMeetingMessage(message, messagePayload);
+    }
+    this.messageData = {
+      isInnerRoom,
+      isRoomMessage: businessID === 'group_room_message',
+      isRoomCreateByMe,
+      isMessageFromMe: message.from === currentUser,
+      roomId,
+      roomState,
+      userList,
+      myProfile: chatExtension.myProfile,
+      ownerName,
+      owner,
+    };
+    chatExtension.setHistoryMeetingMessageList('add', { ID: message.ID, messageData: this.messageData });
+  }
+
+  public parseMessageData(message: Message) {
+    return chatExtension.parseMessageData(message);
+  }
+}
+
+export const handleRoomMessage = new HandleRoomMessage();

package/src/TUIRoom/extension/RoomMessageCard/images/room_default.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.10011 3.56676C1.51101 3.56676 1.03345 4.04432 1.03345 4.63342V12.3668C1.03345 12.9559 1.51101 13.4334 2.10011 13.4334H10.8557C11.4448 13.4334 11.9223 12.9559 11.9223 12.3668V4.63342C11.9223 4.04432 11.4448 3.56676 10.8557 3.56676H2.10011ZM13.0778 10.2381V6.71426L15.564 5.23907C15.7418 5.13359 15.9667 5.2617 15.9667 5.4684V11.5867C15.9667 11.797 15.7347 11.9245 15.5572 11.8118L13.0778 10.2381Z" fill="#888888"/>
+<path d="M8.30081 9.77528L8.36937 9.66093C8.35409 9.65177 8.3347 9.64033 8.31659 9.63068L8.25001 9.5952L8.18532 9.63399C8.14764 9.65658 8.09515 9.69099 8.04473 9.72404C8.03779 9.72858 8.0309 9.7331 8.02408 9.73757L8.02372 9.7378C7.92751 9.80123 7.80223 9.88304 7.63349 9.9856C7.42327 10.1133 7.19272 10.1008 6.98997 10.0394C6.78688 9.97794 6.62849 9.87192 6.58307 9.83944L6.58315 9.83934L6.5782 9.83612C6.51542 9.79529 6.15172 9.55749 5.881 9.28701C5.60992 9.01416 5.36963 8.65012 5.33047 8.58946L5.3306 8.58937L5.32685 8.58414C5.29415 8.53849 5.18739 8.37997 5.12544 8.17688C5.06361 7.97416 5.05097 7.74396 5.17932 7.5342C5.28216 7.36721 5.36323 7.24274 5.42576 7.14753L5.42607 7.14704C5.43387 7.13505 5.44193 7.12274 5.45003 7.11035C5.48048 7.06382 5.51162 7.01622 5.5322 6.98109L5.5709 6.91502L5.53334 6.84829L5.5187 6.82268L5.50538 6.7994L5.50541 6.79938L5.50388 6.79679C5.49229 6.77725 5.48023 6.75561 5.46607 6.73021C5.46211 6.72309 5.45798 6.71568 5.45364 6.70793L5.45353 6.70772C4.85378 5.63982 4.45303 5.53216 4.31781 5.53216H4.30982H4.29136L4.27359 5.53717C4.16844 5.56686 4.07356 5.64673 3.99628 5.74429C3.91683 5.84458 3.84602 5.97586 3.79288 6.12969C3.68638 6.43799 3.64747 6.84646 3.76108 7.30215L3.7611 7.30222C4.0065 8.28413 4.53062 9.21646 5.23669 9.92713L5.23724 9.92767C5.94652 10.6334 6.87957 11.1561 7.86208 11.4003C8.31016 11.513 8.71757 11.4733 9.02661 11.3674C9.18088 11.3145 9.31315 11.2443 9.41453 11.1659C9.51288 11.0899 9.59468 10.9962 9.62577 10.892L9.62604 10.8921L9.62796 10.8837C9.64335 10.8166 9.62316 10.7413 9.59211 10.674C9.55844 10.6009 9.50215 10.5158 9.41677 10.4204C9.24601 10.2295 8.95073 9.9883 8.45697 9.71092L8.45668 9.71075C8.42299 9.69194 8.39422 9.67564 8.36874 9.66056L8.30081 9.77528ZM8.30081 9.77528C8.32777 9.79125 8.35772 9.80821 8.39167 9.82717L6.50551 9.9479C6.60736 10.0207 7.19348 10.4089 7.70271 10.0996C7.87345 9.99579 8.00026 9.91298 8.09711 9.84912C8.10401 9.8446 8.11093 9.84007 8.11782 9.83555C8.16879 9.80214 8.2187 9.76944 8.25388 9.74834C8.26886 9.75633 8.28583 9.7663 8.30081 9.77528Z" fill="white" stroke="white" stroke-width="0.266667"/>
+</svg>

package/src/TUIRoom/extension/RoomMessageCard/images/room_primary.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.60011 3.35596C1.01101 3.35596 0.533447 3.83352 0.533447 4.42262V12.156C0.533447 12.7451 1.01101 13.2226 1.60011 13.2226H10.3557C10.9448 13.2226 11.4223 12.7451 11.4223 12.156V4.42262C11.4223 3.83352 10.9448 3.35596 10.3557 3.35596H1.60011ZM12.5778 10.0273V6.50346L15.064 5.02827C15.2418 4.92279 15.4667 5.0509 15.4667 5.2576V11.3759C15.4667 11.5862 15.2347 11.7137 15.0572 11.601L12.5778 10.0273Z" fill="#147AFF"/>
+<path d="M7.80081 9.56451L7.86937 9.45015C7.85409 9.44099 7.8347 9.42955 7.81659 9.4199L7.75001 9.38442L7.68532 9.42321C7.64764 9.4458 7.59515 9.48021 7.54473 9.51326C7.53779 9.51781 7.5309 9.52233 7.52408 9.52679L7.52372 9.52702C7.42751 9.59046 7.30223 9.67227 7.13349 9.77482C6.92327 9.90251 6.69272 9.89001 6.48997 9.82864C6.28688 9.76717 6.12849 9.66115 6.08307 9.62867L6.08315 9.62856L6.0782 9.62534C6.01542 9.58452 5.65172 9.34671 5.381 9.07624C5.10992 8.80338 4.86963 8.43934 4.83047 8.37868L4.8306 8.3786L4.82685 8.37336C4.79415 8.32771 4.68739 8.1692 4.62544 7.9661C4.56361 7.76339 4.55097 7.53318 4.67932 7.32342C4.78216 7.15643 4.86323 7.03196 4.92576 6.93675L4.92607 6.93626C4.93387 6.92428 4.94193 6.91196 4.95003 6.89957C4.98048 6.85304 5.01162 6.80544 5.0322 6.77031L5.0709 6.70424L5.03334 6.63751L5.0187 6.61191L5.00538 6.58862L5.00541 6.5886L5.00388 6.58601C4.99229 6.56647 4.98023 6.54484 4.96607 6.51943C4.96211 6.51231 4.95798 6.5049 4.95364 6.49715L4.95353 6.49694C4.35378 5.42905 3.95303 5.32138 3.81781 5.32138H3.80982H3.79136L3.77359 5.32639C3.66844 5.35608 3.57356 5.43595 3.49628 5.53351C3.41683 5.6338 3.34602 5.76508 3.29288 5.91891C3.18638 6.22721 3.14747 6.63568 3.26108 7.09137L3.2611 7.09145C3.5065 8.07335 4.03062 9.00568 4.73669 9.71635L4.73724 9.7169C5.44652 10.4226 6.37957 10.9453 7.36208 11.1895C7.81016 11.3022 8.21757 11.2625 8.52661 11.1566C8.68088 11.1038 8.81315 11.0336 8.91453 10.9552C9.01288 10.8791 9.09468 10.7854 9.12577 10.6812L9.12604 10.6813L9.12796 10.6729C9.14335 10.6058 9.12316 10.5305 9.09211 10.4632C9.05844 10.3901 9.00215 10.305 8.91677 10.2096C8.74601 10.0187 8.45073 9.77752 7.95697 9.50014L7.95668 9.49998C7.92299 9.48117 7.89422 9.46486 7.86874 9.44978L7.80081 9.56451ZM7.80081 9.56451C7.82777 9.58047 7.85772 9.59743 7.89167 9.61639L6.00551 9.73712C6.10736 9.80996 6.69348 10.1981 7.20271 9.88878C7.37345 9.78501 7.50026 9.7022 7.59711 9.63834C7.60401 9.63382 7.61093 9.62929 7.61782 9.62478C7.66879 9.59137 7.7187 9.55866 7.75388 9.53757C7.76886 9.54555 7.78583 9.55553 7.80081 9.56451Z" fill="white" stroke="white" stroke-width="0.266667"/>
+</svg>

package/src/TUIRoom/extension/RoomMessageCard/images/room_success.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.60011 3.56665C1.01101 3.56665 0.533447 4.04421 0.533447 4.63332V12.3666C0.533447 12.9558 1.01101 13.4333 1.60011 13.4333H10.3557C10.9448 13.4333 11.4223 12.9558 11.4223 12.3666V4.63332C11.4223 4.04421 10.9448 3.56665 10.3557 3.56665H1.60011ZM12.5778 10.2379V6.71416L15.064 5.23896C15.2418 5.13348 15.4667 5.2616 15.4667 5.46829V11.5866C15.4667 11.7969 15.2347 11.9244 15.0572 11.8117L12.5778 10.2379Z" fill="#15B72D"/>
+<path d="M7.80081 9.7752L7.86937 9.66085C7.85409 9.65168 7.8347 9.64025 7.81659 9.63059L7.75001 9.59512L7.68532 9.63391C7.64764 9.6565 7.59515 9.6909 7.54473 9.72395C7.53779 9.7285 7.5309 9.73302 7.52408 9.73748L7.52372 9.73772C7.42751 9.80115 7.30223 9.88296 7.13349 9.98551C6.92327 10.1132 6.69272 10.1007 6.48997 10.0393C6.28688 9.97786 6.12849 9.87184 6.08307 9.83936L6.08315 9.83925L6.0782 9.83604C6.01542 9.79521 5.65172 9.5574 5.381 9.28693C5.10992 9.01407 4.86963 8.65004 4.83047 8.58937L4.8306 8.58929L4.82685 8.58406C4.79415 8.53841 4.68739 8.37989 4.62544 8.17679C4.56361 7.97408 4.55097 7.74387 4.67932 7.53412C4.78216 7.36712 4.86323 7.24265 4.92576 7.14744L4.92607 7.14695C4.93387 7.13497 4.94193 7.12265 4.95003 7.11026C4.98048 7.06373 5.01162 7.01613 5.0322 6.981L5.0709 6.91493L5.03334 6.8482L5.0187 6.8226L5.00538 6.79931L5.00541 6.7993L5.00388 6.79671C4.99229 6.77717 4.98023 6.75553 4.96607 6.73012C4.96211 6.72301 4.95798 6.71559 4.95364 6.70785L4.95353 6.70763C4.35378 5.63974 3.95303 5.53207 3.81781 5.53207H3.80982H3.79136L3.77359 5.53709C3.66844 5.56678 3.57356 5.64664 3.49628 5.7442C3.41683 5.8445 3.34602 5.97578 3.29288 6.12961C3.18638 6.4379 3.14747 6.84637 3.26108 7.30207L3.2611 7.30214C3.5065 8.28405 4.03062 9.21637 4.73669 9.92705L4.73724 9.92759C5.44652 10.6333 6.37957 11.156 7.36208 11.4002C7.81016 11.5129 8.21757 11.4732 8.52661 11.3673C8.68088 11.3145 8.81315 11.2443 8.91453 11.1658C9.01288 11.0898 9.09468 10.9961 9.12577 10.8919L9.12604 10.892L9.12796 10.8836C9.14335 10.8165 9.12316 10.7412 9.09211 10.6739C9.05844 10.6008 9.00215 10.5157 8.91677 10.4203C8.74601 10.2294 8.45073 9.98821 7.95697 9.71084L7.95668 9.71067C7.92299 9.69186 7.89422 9.67556 7.86874 9.66047L7.80081 9.7752ZM7.80081 9.7752C7.82777 9.79116 7.85772 9.80813 7.89167 9.82708L6.00551 9.94781C6.10736 10.0206 6.69348 10.4088 7.20271 10.0995C7.37345 9.99571 7.50026 9.91289 7.59711 9.84903C7.60401 9.84452 7.61093 9.83999 7.61782 9.83547C7.66879 9.80206 7.7187 9.76935 7.75388 9.74826C7.76886 9.75624 7.78583 9.76622 7.80081 9.7752Z" fill="white" stroke="white" stroke-width="0.266667"/>
+</svg>

package/src/TUIRoom/extension/RoomMessageCard/roomMessageCard.scss

@@ -0,0 +1,141 @@
+
+.room-message-container.isMe {
+    .room-message-card-container {
+        border-top-right-radius: 0;
+    }
+}
+.room-message-container.notMe {
+    .room-message-card-container {
+        border-top-left-radius: 0;
+    }
+}
+
+.room-message-card-container {
+    width: 100%;
+    height: 100%;
+    min-width: 238px;
+    max-width: 436px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    border-radius: 1rem;
+    border: 1px solid #ddd;
+    overflow: hidden;
+    user-select: none;
+
+    .content {
+        background: linear-gradient(90deg, #dceafd -17.36%, rgba(220, 234, 253, 0.4) 103.56%);
+        padding: 1.6rem 1rem 1rem 1rem;
+        border-bottom: 1px solid #ddd;
+
+        .content-title {
+            display: flex;
+            flex-direction: row;
+
+            .icon {
+                background-repeat: no-repeat;
+                background-position: center;
+                width: 16px;
+                margin-right: 6px;
+            }
+        }
+
+        .content-desc {
+            padding-top: .6rem;
+
+            .title {
+                font-size: 16px;
+                font-weight: 500;
+            }
+
+            .users {
+                display: flex;
+                flex-direction: row;
+                margin-top: .6rem;
+
+                .more {
+                    font-weight: bold;
+                    font-size: 16px;
+                }
+
+                li {
+                    width: 27px;
+                    min-width: 27px;
+                    height: 27px;
+                    margin-right: 10px;
+                    border-radius: 3px;
+                    overflow: hidden;
+
+                    img {
+                        width: 100%;
+                    }
+                }
+            }
+        }
+    }
+
+    .footer {
+        padding: 1rem;
+        color: #888;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        box-sizing: border-box;
+
+        .room-info {
+            line-height: 21px;
+        }
+
+        .room-info.center {
+            text-align: center;
+            width: 100%;
+        }
+
+        .room-status {
+            border-radius: 4px;
+            font-weight: 900;
+            padding: .6rem;
+            cursor: pointer;
+            background-color: #147AFF;
+            color: #fff;
+        }
+    }
+
+}
+
+.content-title.default {
+    color: #888;
+
+    .icon {
+        background-image: url("./images/room_default.svg");
+    }
+}
+
+.content-title.success {
+    color: rgba(21, 183, 45, 1);
+
+    .icon {
+        background-image: url("./images/room_success.svg");
+    }
+}
+
+.content-title.primary {
+    color: #147AFF;
+
+    .icon {
+        background-image: url("./images/room_primary.svg");
+    }
+}
+
+
+.room-message-card-container .footer.in-room {
+    .room-status {
+        background-color: #F3F4F4;
+        color: #999;
+    }
+}
+
+.room-message-card-container.destroyed .content {
+    background: rgba(221, 221, 221, .3);
+}

package/src/TUIRoom/extension/VoidTemplate.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>