@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/CustomerServiceChat/message-list/link/index.ts

@@ -0,0 +1,23 @@
+const Link = {
+  product: {
+    label: '产品文档',
+    url: 'https://cloud.tencent.com/document/product/269/1499#.E7.BE.A4.E7.BB.84.E5.8A.9F.E8.83.BD',
+  },
+  customMessage: {
+    label: '自定义消息',
+    url: 'https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#createCustomMessage',
+  },
+  complaint: {
+    label: '点此投诉',
+    url: 'https://cloud.tencent.com/apply/p/xc3oaubi98g',
+  },
+  implement: {
+    label: '集成TUICallKit',
+    url: 'https://cloud.tencent.com/document/product/269/79861',
+  },
+  purchase: {
+    label: '开通腾讯实时音视频服务',
+    url: 'https://cloud.tencent.com/document/product/1640/79968',
+  },
+};
+export default Link;

package/components/CustomerServiceChat/message-list/message-elements/message-audio-web.vue

@@ -0,0 +1,223 @@
+<template>
+  <div
+    class="message-audio"
+    :class="[
+      isMobile && 'message-audio-h5',
+      message.flow === 'out' && 'reserve',
+      message.hasRiskContent && 'disable',
+    ]"
+    @click.stop="play"
+  >
+    <div class="audio-icon-container">
+      <!-- <div :class="{ mask: true, play: isAudioPlaying }" /> -->
+      <Icon
+        :class="{icon:true,play: isAudioPlaying}"
+        width="16px"
+        height="20px"
+        :file="audioIcon"
+        
+      />
+    </div>
+    <span
+      class="time"
+      :style="{ width: `${data.second * 10 + 20}px` }"
+    >
+      {{ data.second || 1 }} "
+    </span>
+    <audio
+      ref="audioRef"
+      :src="data.url"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../../adapter-vue';
+import Icon from '../../../common/Icon.vue';
+import audioIcon from '../../../../assets/msg-audio.svg';
+import { isMobile } from '../../../../utils/env';
+const { watchEffect, ref, onMounted, onUnmounted } = vue;
+
+interface IEmits {
+  (e: 'setAudioPlayed', messageID: string): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = defineProps({
+  content: {
+    type: Object,
+    default: () => ({}),
+  },
+  messageItem: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const data = ref();
+const message = ref();
+const isAudioPlaying = ref();
+const audioRef = ref<HTMLAudioElement>();
+
+onMounted(() => {
+  if (audioRef.value) {
+    audioRef.value.addEventListener('ended', onAudioEnded);
+    audioRef.value.addEventListener('pause', onAudioPaused);
+  }
+});
+
+onUnmounted(() => {
+  if (audioRef.value) {
+    audioRef.value.removeEventListener('ended', onAudioEnded);
+    audioRef.value.removeEventListener('pause', onAudioPaused);
+  }
+});
+
+watchEffect(() => {
+  message.value = props.messageItem;
+  data.value = props.content;
+});
+
+function play() {
+  if (message.value.hasRiskContent || !audioRef.value) {
+    return;
+  }
+  if (!audioRef.value.paused) {
+    audioRef.value.pause();
+    audioRef.value.currentTime = 0;
+    isAudioPlaying.value = false;
+    return;
+  }
+  const audios = document.getElementsByTagName('audio');
+  Array.from(audios).forEach((audio) => {
+    if (!audio.paused) {
+      audio.pause();
+      audio.currentTime = 0;
+    }
+  });
+  audioRef.value.play();
+  isAudioPlaying.value = true;
+  if (message.value.flow === 'in') {
+    emits('setAudioPlayed', message.value.ID);
+  }
+}
+
+function onAudioEnded() {
+  isAudioPlaying.value = false;
+}
+
+function onAudioPaused() {
+  isAudioPlaying.value = false;
+}
+</script>
+<style lang="scss" scoped>
+@import "../../style/common";
+
+$flow-in-bg-color: #fbfbfb;
+$flow-out-bg-color: #dceafd;
+
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.message-audio {
+  flex-direction: row;
+  display: flex;
+  flex: 0 0 auto;
+  cursor: pointer;
+  overflow: hidden;
+
+  .time {
+    flex: 1 1 auto;
+    max-width: 300px;
+    text-align: start;
+  }
+
+  audio {
+    width: 0;
+    height: 0;
+  }
+}
+
+.disable {
+  cursor: not-allowed;
+}
+
+.audio-icon-container {
+  flex: 0 0 auto;
+  position: relative;
+  margin: 0 7px 0 0;
+  overflow: hidden;
+
+  .mask {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    transform-origin: right;
+    transform: scaleX(0);
+    background-color: $flow-in-bg-color;
+    
+    &.play {
+      animation: audio-play 2s steps(1, end) infinite;
+    }
+  }
+  .icon{
+    &.play{
+      animation: blink 1s infinite;
+    }
+  }
+}
+
+@keyframes audio-play {
+  0% {
+    transform: scaleX(0.7056);
+  }
+
+  50% {
+    transform: scaleX(0.3953);
+  }
+
+  75% {
+    transform: scaleX(0);
+    visibility: hidden;
+  }
+
+  100% {
+    transform: scaleX(0);
+    visibility: hidden;
+  }
+}
+
+.message-audio.reserve {
+  flex-direction: row-reverse;
+
+  .time {
+    text-align: end;
+  }
+
+  .icon {
+    transform: rotate(180deg);
+  }
+
+  .audio-icon-container {
+    margin: 0 0 0 7px;
+
+    .mask {
+      transform-origin: left;
+      background-color: $flow-out-bg-color;
+      // mask: linear-gradient(0deg, transparent 50%);
+    }
+  }
+}
+</style>