@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.2

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/simple-message-list/message-container.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="simple-message-container">
+    <div class="simple-message-avatar">
+      <Avatar :url="props.avatar" />
+    </div>
+    <div>
+      <div class="simple-message-sender">
+        {{ props.sender }}
+      </div>
+      <div class="simple-message-body">
+        <div
+          :class="{
+            'simple-message-content': true,
+            'no-padding': isNoPadding
+          }"
+        >
+          <slot />
+        </div>
+        <div class="timestamp">
+          {{ calculateTimestamp(props.time*1000) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from '../../../../../adapter-vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import Avatar from '../../../../common/Avatar/index.vue';
+import { calculateTimestamp } from '../../../utils/utils';
+
+interface IProps {
+  sender: string;
+  avatar: string;
+  type: string;
+  time: number;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  sender: '',
+  avatar: '',
+});
+
+const TYPES = TUIChatEngine.TYPES;
+
+const isNoPadding = computed(() => {
+  return [TYPES.MSG_IMAGE, TYPES.MSG_VIDEO, TYPES.MSG_MERGER].includes(props.type);
+});
+</script>
+
+<style scoped lang="scss">
+:not(not){
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.simple-message-container {
+  flex-direction: row;
+
+  .simple-message-avatar {
+    flex: 0 0 auto;
+    margin-right: 8px;
+  }
+
+  .simple-message-sender {
+    display: block;
+    max-width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 11px;
+    color: #999;
+  }
+
+  .simple-message-body {
+    flex-direction: row;
+    align-items: flex-end;
+  }
+
+  .simple-message-content {
+    margin-top: 8px;
+    background-color: #dceafd;
+    border-radius: 0 10px 10px;
+    padding: 10px 12px;
+  }
+
+  .timestamp {
+    flex: 0 0 auto;
+    font-size: 12px;
+    color: #aaa;
+    margin-left: 6px;
+  }
+
+  .no-padding {
+    padding: 0;
+    background-color: transparent;
+  }
+}
+</style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-list/message-group-application/index.vue

@@ -0,0 +1,336 @@
+<template>
+  <div>
+    <div
+      v-if="groupApplicationCount > 0"
+      class="application-tips"
+    >
+      <div>
+        {{ groupApplicationCount }}{{ TUITranslateService.t("TUIChat.条入群申请") }}
+      </div>
+      <div
+        class="application-tips-btn"
+        @click="toggleGroupApplicationDrawerShow"
+      >
+        {{ TUITranslateService.t("TUIChat.点击处理") }}
+      </div>
+    </div>
+    <Drawer
+      ref="drawerDomInstanceRef"
+      :visible="isGroupApplicationDrawerShow"
+      :zIndex="998"
+      :popDirection="isMobile ? 'bottom' : 'right'"
+      :isFullScreen="isMobile"
+      :overlayColor="isMobile ? undefined : 'transparent'"
+      :drawerStyle="{
+        bottom: {
+          minHeight: '60vh',
+          maxHeight: '80vh',
+          borderRadius: '12px 12px 0 0',
+        },
+        right: {
+          width: '360px',
+          borderRadius: '12px 0 0 12px',
+          boxShadow: '0 0 10px 0 #d0d0d0',
+        }
+      }"
+      @onOverlayClick="toggleGroupApplicationDrawerShow"
+    >
+      <div
+        :class="{
+          'application-contaienr': true
+        }"
+      >
+        <header class="application-header">
+          <div
+            @click="toggleGroupApplicationDrawerShow"
+          >
+            <Icon
+              v-if="isPC"
+              :file="closeIcon"
+              :size="'16px'"
+            />
+            <div v-else>
+              {{
+                TUITranslateService.t('关闭')
+              }}
+            </div>
+          </div>
+        </header>
+        <main>
+          <div
+            v-for="(item, index) in customGroupApplicationList"
+            :key="item.nick"
+            :class="{
+              'application-item': true,
+              'removed': item.isRemoved,
+            }"
+          >
+            <Avatar
+              :style="{
+                flex: '0 0 auto',
+              }"
+              :url="item.avatar"
+              :useSkeletonAnimation="true"
+            />
+            <div class="application-item-info">
+              <div class="application-item-nick">
+                {{ item.nick }}
+              </div>
+              <div class="application-item-note">
+                {{ TUITranslateService.t("TUIChat.申请加入") }}
+              </div>
+            </div>
+            <div
+              class="application-item-operation"
+            >
+              <div
+                class="agree"
+                @click="handleApplication(item, 'Agree', index)"
+              >
+                {{ TUITranslateService.t("TUIChat.同意") }}
+              </div>
+              <div
+                class="reject"
+                @click="handleApplication(item, 'Reject', index)"
+              >
+                {{ TUITranslateService.t("TUIChat.拒绝") }}
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </Drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from '../../../../adapter-vue';
+import {
+  TUIStore,
+  StoreName,
+  TUITranslateService,
+  TUIUserService,
+  TUIGroupService,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../common/Icon.vue';
+import Avatar from '../../../common/Avatar/index.vue';
+import Drawer from '../../../common/Drawer/index.vue';
+import closeIcon from '../../../../assets/icon/close-dark.svg';
+import { isPC, isMobile } from '../../../../utils/env';
+import { IGroupApplication, IUserProfile, IChatResponese } from '../../../../interface';
+
+interface IProps {
+  groupID: string;
+}
+interface ICustomGroupApplication {
+  nick: string;
+  avatar: string;
+  isRemoved: boolean;
+  application: IGroupApplication;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  groupID: '',
+});
+
+const drawerDomInstanceRef = ref<InstanceType<typeof Drawer>>();
+const groupApplicationCount = ref(0);
+const isGroupApplicationDrawerShow = ref(false);
+const customGroupApplicationList = ref<ICustomGroupApplication[]>([]);
+
+watch(isGroupApplicationDrawerShow, (newVal) => {
+  if (newVal) {
+    generateCustomGroupApplicationList().then((list) => {
+      customGroupApplicationList.value = list;
+      groupApplicationCount.value = list.length;
+    });
+  }
+});
+
+watch(() => customGroupApplicationList.value.length, (newVal, oldVal) => {
+  if (oldVal > 0 && newVal === 0) {
+    isGroupApplicationDrawerShow.value = false;
+  }
+});
+
+/**
+ * Retrieves the current group application list based on the provided groupID.
+ *
+ * @return {Promise<IGroupApplication[]>} The list of group applications for the current group.
+ */
+async function getCurrentGroupApplicationList(): Promise<IGroupApplication[]> {
+  const result: IChatResponese<{ applicationList: IGroupApplication[] }> = await TUIGroupService.getGroupApplicationList();
+  const currentGroupApplicationList = result.data.applicationList.filter(application => application.groupID === props.groupID);
+  return currentGroupApplicationList;
+}
+
+function toggleGroupApplicationDrawerShow() {
+  isGroupApplicationDrawerShow.value = !isGroupApplicationDrawerShow.value;
+}
+
+async function generateCustomGroupApplicationList(): Promise<ICustomGroupApplication[]> {
+  const applicationList = await getCurrentGroupApplicationList();
+  if (applicationList.length === 0) {
+    return [];
+  }
+  const userIDList = applicationList.map(application => application.applicationType === 0 ? application.applicant : application.userID);
+  const { data: userProfileList } = await TUIUserService.getUserProfile({ userIDList }) as IChatResponese<IUserProfile[]>;
+  const mappingFromUserID2Profile: Record<string, IUserProfile> = {};
+  userProfileList.forEach((profile: IUserProfile) => {
+    mappingFromUserID2Profile[profile.userID] = profile;
+  });
+  const groupApplicationList: ICustomGroupApplication[] = applicationList.map((application) => {
+    const profile = mappingFromUserID2Profile[application.applicationType === 0 ? application.applicant : application.userID];
+    return {
+      nick: profile.nick || profile.userID || 'anonymous',
+      avatar: profile.avatar || '',
+      isRemoved: false,
+      application: application,
+    };
+  });
+
+  return groupApplicationList;
+}
+
+function handleApplication(customApplication: ICustomGroupApplication, action: 'Agree' | 'Reject', index: number) {
+  TUIGroupService.handleGroupApplication({
+    handleAction: action,
+    application: customApplication.application,
+  }).then(() => {
+    customGroupApplicationList.value[index].isRemoved = true;
+    setTimeout(() => {
+      customGroupApplicationList.value.splice(index, 1);
+      groupApplicationCount.value -= 1;
+    }, 150);
+  }).catch(() => {
+    // TODO: handle error
+  });
+}
+
+// --------------- mounted function ---------------
+onMounted(() => {
+  // get current group application number on the first time entering the group
+  getCurrentGroupApplicationList().then((applicationList) => {
+    groupApplicationCount.value = applicationList.length;
+  });
+
+  TUIStore.watch(StoreName.GRP, {
+    groupSystemNoticeList: onGroupSystemNoticeListUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.GRP, {
+    groupSystemNoticeList: onGroupSystemNoticeListUpdated,
+  });
+});
+
+function onGroupSystemNoticeListUpdated() {
+  // Approving or rejecting existing applications will not trigger this callback, but new applications can trigger it.
+  generateCustomGroupApplicationList().then((list) => {
+    customGroupApplicationList.value = list;
+    groupApplicationCount.value = list.length;
+  });
+}
+</script>
+
+<style scoped lang="scss">
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.application-tips {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+  padding: 5px 0;
+  font-size: 14px;
+  background-color:  #fce4d3;
+
+  .application-tips-btn {
+    color: #006eff;
+    cursor: pointer;
+    margin-left: 12px;
+  }
+}
+
+.application-contaienr {
+  padding: 50px 18px 10px;
+  background-color: #fff;
+  height: 100%;
+  overflow: hidden auto;
+  font-size: 14px;
+
+  .application-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 10px 20px;
+    flex-direction: row-reverse;
+    color: #679ce1;
+    font-size: 14px;
+  }
+
+  .application-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px 0;
+    transition: transform 0.15s ease-out;
+
+    & + .application-item {
+      border-top: 0.5px solid #d0d0d0;
+    }
+
+    .application-item-info {
+      margin-left: 8px;
+      margin-right: 8px;
+      font-size: 14px;
+
+      .application-item-nick {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .application-item-note {
+        color: #989191;
+        font-size: 12px;
+      }
+    }
+
+    .application-item-operation {
+      flex-direction: row;
+      margin-left: auto;
+      padding: 8px;
+      flex: 0 0 auto;
+      font-size: 14px;
+
+      .agree{
+        color: #679ce1;
+        cursor: pointer
+      }
+
+      .reject{
+        margin-left: 12px;
+        color: #fb355d;
+        cursor: pointer
+      }
+    }
+  }
+
+  .removed {
+    transform: translateX(-100%);
+  }
+}
+</style>