Barrage Component（Web Desktop Browser）

<template>
  <UIKitProvider theme="dark" language="en-US">
    <div class="app">
      <div class="chat-container">
        <div class="chat-content">
          <BarrageList class="barrage-list" />
        </div>
        <div class="chat-input">
          <BarrageInput class="barrage-input" />
        </div>
      </div>
    </div>
  </UIKitProvider>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { BarrageList, BarrageInput, useLoginState, useLiveState } from 'tuikit-atomicx-vue3';

const { login, loginUserInfo } = useLoginState();
const { joinLive } = useLiveState();

async function initLogin() {
  try {
    await login({
      sdkAppId: 0,        // SDKAppID, see Step 1 to get
      userId: '',         // UserID, see Step 1 to get
      userSig: '',        // userSig, see Step 1 to get
    });
  } catch (error) {
    console.error('login error:', error);
  }
}

onMounted(async () => {
  await initLogin();
  await joinLive({
    liveId: 'input corresponding live streaming room LiveId',     // enter live room by inputting corresponding liveId
  });
});
</script>

<style scoped>.app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.chat-container{width:100%;max-width:500px;height:600px;border-radius:16px;display:flex;flex-direction:column;overflow:hidden}.chat-content{flex:1;overflow:hidden}.barrage-list{width:100%;height:100%}.chat-input{background-color:var(--bg-color-dialog);padding:16px}.barrage-input{width:100%}</style>

<BarrageList :filter="(message) => message.type === 'TIMTextElem'" />

<BarrageList :messageAggregationTime="300" />

<BarrageList :containerStyle="{ padding: '0px' }" />

<BarrageList :itemStyle="{ borderRadius: '10px', background: '#1C66e5', padding: '10px', boxSizing: 'border-box'}" />

// MyCustomMessage.vue
<template>
  <div class="custom-message">
    <div class="message-header">
      <span class="user-name">{{ getUserName(message) }}</span>
      <span class="message-time">{{ formatTime(message.time) }}</span>
    </div>
    <div class="message-content">
      {{ getMessageText(message) }}
    </div>
  </div>
</template>

<script setup lang="ts">
interface SimpleMessage {
  id: string;
  from: string;
  nick?: string;
  nameCard?: string;
  time: number;
  type: string;
  content: string;
  avatar?: string;
}

interface Props {
  message: SimpleMessage;
  isLastInChunk?: boolean;
}

const props = defineProps<Props>();

const formatTime = (timestamp: number) => {
  return new Date(timestamp * 1000).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  });
};

const getUserName = (message: SimpleMessage) => {
  return message.nameCard || message.nick || message.from || 'anonymous user';
};

const getMessageText = (message: SimpleMessage) => {
  if (message.type === 'text') {
    return message.content || '';
  } else if (message.type === 'image') {
    return '[image message]';
  } else if (message.type === 'emoji') {
    return '[emoji message]';
  }
  return '[other types of messages]';
};
</script>

<style scoped>.custom-message{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:12px;border-radius:12px;margin:4px 0;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform 0.2s ease}.custom-message:hover{transform:translateY(-2px)}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;opacity:0.9}.user-name{font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-time{font-size:11px;opacity:0.7}.message-content{font-size:14px;line-height:1.4;word-break:break-word}</style>

// Use the barrage message component for use in
<template>
   <BarrageList :Message="MyCustomMessage" />
</template>

<script setup lang="ts">
import MyCustomMessage from "./MyCustomMessage.vue";
</script>

<BarrageInput width="400px" height="60px" minHeight="40px" maxHeight="120px" />

<BarrageInput :maxLength="100" />

<BarrageInput :containerStyle="{ backgroundColor: '#a8abb2', borderRadius: '0 0', boxShadow: '0 2px 8px rgba(0,0,0,0.1)'}" />

<template>
  <BarrageInput containerClass="my-custom-input-container" />
</template>

<style>.my-custom-input-container {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border: none;border-radius: 20px;padding: 8px 20px;}.my-custom-input-container:focus-within {box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);}</style>