atomicx-core sdk API Documentation

atomicx-core sdk

atomicx-core sdk is the latest generation of reactive APIs from Tencent Cloud, designed for instant messaging, audio/video calls, live streaming, voice chat rooms, and more. You can quickly build your own UI pages based on these APIs. It supports room management, screen sharing, member management, seat control, basic beauty effects, and other rich features, while ensuring 720P and 1080P HD quality. It maintains high-quality audio/video transmission even in weak network environments with 70% packet loss. Additionally, the SDK uses 48kHz high-quality audio sampling, combined with Tencent Ethereal Audio Lab's 3A processing algorithms to eliminate echo and howling, achieving full-link 128kbps high-quality stereo sound, bringing users a clear and immersive interactive experience. This page contains all API interfaces of atomicx-core sdk, categorized by functional modules.

LoginState

import { useLoginState } from 'tuikit-atomicx-vue3';
const { loginUserInfo } = useLoginState();

// Watch for user information changes
watch(loginUserInfo, (newUserInfo) => {
  if (newUserInfo) {
    console.log('User information updated:', newUserInfo);
    console.log('User ID:', newUserInfo.userID);
    console.log('User nickname:', newUserInfo.nickname);
    console.log('userAvatar:', newUserInfo.avatarURL);
  }
});

// Get current user information
const currentUser = loginUserInfo.value;
if (currentUser) {
  console.log('Currently logged-in user:', currentUser.nickname);
}

import { useLoginState } from 'tuikit-atomicx-vue3';

const { login } = useLoginState();

// Login to the system
await login({
  userId: 'user_123456',
  userSig: 'xxx',
  sdkAppId: 1400000001
});

import { useLoginState } from 'tuikit-atomicx-vue3';

const { setSelfInfo } = useLoginState();

// Set user personal information
await setSelfInfo({
  nickName: 'John',
  avatar: 'https://example.com/avatar.png',
  signature: 'this ismyofpersonalSignature'
});

await logout();

DeviceState

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { microphoneStatus } = useDeviceState();

// Watch for data changes
watch(microphoneStatus, (newValue) => {
  console.log('microphoneStatus updated:', newValue);
});

// Access data directly
console.log('Current microphoneStatus:', microphoneStatus.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { microphoneList } = useDeviceState();

// Watch for data changes
watch(microphoneList, (newValue) => {
  console.log('microphoneList updated:', newValue);
});

// Access data directly
console.log('Current microphoneList:', microphoneList.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { currentMicrophone } = useDeviceState();

// Watch for data changes
watch(currentMicrophone, (newValue) => {
  console.log('currentMicrophone updated:', newValue);
});

// Access data directly
console.log('Current currentMicrophone:', currentMicrophone.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { microphoneLastError } = useDeviceState();

// Watch for data changes
watch(microphoneLastError, (newValue) => {
  console.log('microphoneLastError updated:', newValue);
});

// Access data directly
console.log('Current microphoneLastError:', microphoneLastError.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { captureVolume } = useDeviceState();

// Watch for data changes
watch(captureVolume, (newValue) => {
  console.log('captureVolume updated:', newValue);
});

// Access data directly
console.log('Current captureVolume:', captureVolume.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { currentMicVolume } = useDeviceState();

// Watch for data changes
watch(currentMicVolume, (newValue) => {
  console.log('currentMicVolume updated:', newValue);
});

// Access data directly
console.log('Current currentMicVolume:', currentMicVolume.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { isMicrophoneTesting } = useDeviceState();

// Watch for data changes
watch(isMicrophoneTesting, (newValue) => {
  console.log('isMicrophoneTesting updated:', newValue);
});

// Access data directly
console.log('Current isMicrophoneTesting:', isMicrophoneTesting.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { testingMicVolume } = useDeviceState();

// Watch for data changes
watch(testingMicVolume, (newValue) => {
  console.log('testingMicVolume updated:', newValue);
});

// Access data directly
console.log('Current testingMicVolume:', testingMicVolume.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { cameraStatus } = useDeviceState();

// Watch for data changes
watch(cameraStatus, (newValue) => {
  console.log('cameraStatus updated:', newValue);
});

// Access data directly
console.log('Current cameraStatus:', cameraStatus.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { cameraList } = useDeviceState();

// Watch for data changes
watch(cameraList, (newValue) => {
  console.log('cameraList updated:', newValue);
});

// Access data directly
console.log('Current cameraList:', cameraList.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { currentCamera } = useDeviceState();

// Watch for data changes
watch(currentCamera, (newValue) => {
  console.log('currentCamera updated:', newValue);
});

// Access data directly
console.log('Current currentCamera:', currentCamera.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { cameraLastError } = useDeviceState();

// Watch for data changes
watch(cameraLastError, (newValue) => {
  console.log('cameraLastError updated:', newValue);
});

// Access data directly
console.log('Current cameraLastError:', cameraLastError.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { isCameraTesting } = useDeviceState();

// Watch for data changes
watch(isCameraTesting, (newValue) => {
  console.log('isCameraTesting updated:', newValue);
});

// Access data directly
console.log('Current isCameraTesting:', isCameraTesting.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { isCameraTestLoading } = useDeviceState();

// Watch for data changes
watch(isCameraTestLoading, (newValue) => {
  console.log('isCameraTestLoading updated:', newValue);
});

// Access data directly
console.log('Current isCameraTestLoading:', isCameraTestLoading.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { isFrontCamera } = useDeviceState();

// Watch for data changes
watch(isFrontCamera, (newValue) => {
  console.log('isFrontCamera updated:', newValue);
});

// Access data directly
console.log('Current isFrontCamera:', isFrontCamera.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { localMirrorType } = useDeviceState();

// Watch for data changes
watch(localMirrorType, (newValue) => {
  console.log('localMirrorType updated:', newValue);
});

// Access data directly
console.log('Current localMirrorType:', localMirrorType.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { localVideoQuality } = useDeviceState();

// Watch for data changes
watch(localVideoQuality, (newValue) => {
  console.log('localVideoQuality updated:', newValue);
});

// Access data directly
console.log('Current localVideoQuality:', localVideoQuality.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { speakerList } = useDeviceState();

// Watch for data changes
watch(speakerList, (newValue) => {
  console.log('speakerList updated:', newValue);
});

// Access data directly
console.log('Current speakerList:', speakerList.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { currentSpeaker } = useDeviceState();

// Watch for data changes
watch(currentSpeaker, (newValue) => {
  console.log('currentSpeaker updated:', newValue);
});

// Access data directly
console.log('Current currentSpeaker:', currentSpeaker.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { outputVolume } = useDeviceState();

// Watch for data changes
watch(outputVolume, (newValue) => {
  console.log('outputVolume updated:', newValue);
});

// Access data directly
console.log('Current outputVolume:', outputVolume.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { currentAudioRoute } = useDeviceState();

// Watch for data changes
watch(currentAudioRoute, (newValue) => {
  console.log('currentAudioRoute updated:', newValue);
});

// Access data directly
console.log('Current currentAudioRoute:', currentAudioRoute.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { isSpeakerTesting } = useDeviceState();

// Watch for data changes
watch(isSpeakerTesting, (newValue) => {
  console.log('isSpeakerTesting updated:', newValue);
});

// Access data directly
console.log('Current isSpeakerTesting:', isSpeakerTesting.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { screenStatus } = useDeviceState();

// Watch for data changes
watch(screenStatus, (newValue) => {
  console.log('screenStatus updated:', newValue);
});

// Access data directly
console.log('Current screenStatus:', screenStatus.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { networkInfo } = useDeviceState();

// Watch for data changes
watch(networkInfo, (newValue) => {
  console.log('networkInfo updated:', newValue);
});

// Access data directly
console.log('Current networkInfo:', networkInfo.value);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { openLocalMicrophone } = useDeviceState();

// turn onmicrophone
try {
  await openLocalMicrophone();
  console.log('microphoneturn onsuccessful');
} catch (error) {
  console.error('microphoneturn onfailed:', error);
}

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { closeLocalMicrophone } = useDeviceState();

// turn offmicrophone
await closeLocalMicrophone();

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { muteLocalAudio } = useDeviceState();

// Mute local audio
await muteLocalAudio();

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { unmuteLocalAudio } = useDeviceState();

// CancelMute local audio
await unmuteLocalAudio();

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { getMicrophoneList, microphoneList } = useDeviceState();

// Get microphone list
try {
  await getMicrophoneList();
  console.log('microphonelist:', microphoneList.value);
} catch (error) {
  console.error('Get microphone listfailed:', error);
}

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { setCurrentMicrophone } = useDeviceState();

// switchmicrophonedevice
await setCurrentMicrophone({
  deviceId: 'default'
});

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { startMicrophoneTest } = useDeviceState();

// Start microphone test，every200msdetectiononcevolume
await startMicrophoneTest({
  interval: 200
});

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { setCaptureVolume } = useDeviceState();

// SetCapture volumeas80%
await setCaptureVolume(80);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { setOutputVolume } = useDeviceState();

// Setplayvolumeas60%
await setOutputVolume(60);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { stopMicrophoneTest } = useDeviceState();

// Stop microphone testing
await stopMicrophoneTest();

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { getSpeakerList, speakerList } = useDeviceState();

// Get speaker list
try {
  await getSpeakerList();
  console.log('speakerlist:', speakerList.value);
} catch (error) {
  console.error('Get speaker listfailed:', error);
}

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { setCurrentSpeaker } = useDeviceState();

// switchspeakerdevice
await setCurrentSpeaker({
  deviceId: 'default'
});

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { setAudioRoute } = useDeviceState();

// Setasspeakermode
await setAudioRoute(AudioRoute.Speakerphone);

// Setasearpiecemode
await setAudioRoute(AudioRoute.Earpiece);

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { startSpeakerTest } = useDeviceState();

// playtestaudioperformspeakertest
await startSpeakerTest({
  filePath: '/assets/audio/test.mp3'
});

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { stopSpeakerTest } = useDeviceState();

// Stop speaker testing
await stopSpeakerTest();

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { openLocalCamera } = useDeviceState();

// turn oncamera
try {
  await openLocalCamera();
  console.log('cameraturn onsuccessful');
} catch (error) {
  console.error('cameraturn onfailed:', error);
}

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { closeLocalCamera } = useDeviceState();

// turn offcamera
await closeLocalCamera();

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { getCameraList, cameraList } = useDeviceState();

// Get camera list
try {
  await getCameraList();
  console.log('cameralist:', cameraList.value);
} catch (error) {
  console.error('Get camera listfailed:', error);
}

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { setCurrentCamera } = useDeviceState();

// Switch cameradevice
await setCurrentCamera({
  deviceId: 'default'
});

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { switchCamera } = useDeviceState();

// switchtofrontcamera
await switchCamera({
  isFrontCamera: true
});

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { switchMirror } = useDeviceState();

// Setvideomirrormode
await switchMirror({
  mirror: MirrorType.Enable
});

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { updateVideoQuality } = useDeviceState();

// SetvideoqualityasHD720P
await updateVideoQuality({
  quality: VideoQuality.HD720P
});

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { startCameraDeviceTest } = useDeviceState();

// inspecifiedDOMmetaelementinpreviewcamera
await startCameraDeviceTest({
  view: 'camera-preview-container'
});

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { startScreenShare } = useDeviceState();

// Start screen sharing，containssystemaudio
await startScreenShare({
  screenAudio: true,
  view: 'screen-share-container'
});

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { stopScreenShare } = useDeviceState();

// Stop screen sharing
await stopScreenShare();

import { useDeviceState } from 'tuikit-atomicx-vue3';

const { stopCameraDeviceTest } = useDeviceState();

// Stop camera testing
await stopCameraDeviceTest();

// internaluse，whenscreensharingstopwhenautomaticcall
screenCaptureStopped();

LiveListState

const tuiLiveInfo = await roomEngine.getLiveInfo();
const liveInfo = getLiveInfo(tuiLiveInfo);
console.log('convertafterofliveinformation:', liveInfo);

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { liveList } = useLiveListState();

// Watch for data changes
watch(liveList, (newValue) => {
  console.log('liveList updated:', newValue);
});

// Access data directly
console.log('Current liveList:', liveList.value);

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { liveListCursor } = useLiveListState();

// Watch for data changes
watch(liveListCursor, (newValue) => {
  console.log('liveListCursor updated:', newValue);
});

// Access data directly
console.log('Current liveListCursor:', liveListCursor.value);

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { createLive } = useLiveListState();

// Create a live room with custom settings
await createLive({
  name: 'My Live Room',
  coverUrl: 'https://example.com/cover.jpg',
  backgroundUrl: 'https://example.com/bg.jpg',
  seatMode: 'free'
});

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { joinLive } = useLiveListState();

// Join a live room by ID
await joinLive({
  liveId: 'live_room_123456'
});

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { leaveLive } = useLiveListState();

// Leave liveroom
try {
  await leaveLive();
  console.log('successfulLeave liveroom');
} catch (error) {
  console.error('Leave liveroomfailed:', error);
}

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { endLive } = useLiveListState();

// End live（hostaction）
try {
  await endLive();
  console.log('livealreadyend');
} catch (error) {
  console.error('End livefailed:', error);
}

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { updateLiveInfo } = useLiveListState();

// Update live room info
await updateLiveInfo({
  coverUrl: 'https://example.com/new-cover.jpg',
  category: 'entertainment'
});

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { queryMetaData } = useLiveListState();

// Query metadata by keys
await queryMetaData({
  keys: ['roomTitle', 'announcement', 'customData']
});

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { updateLiveMetaData } = useLiveListState();

// Update live room metadata
await updateLiveMetaData({
  metaData: {
    roomTitle: 'New Room Title',
    announcement: 'Welcome to my live room!'
  }
});

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { fetchLiveList } = useLiveListState();

// Fetch live list with pagination
await fetchLiveList({
  cursor: '',
  count: 20
});

LiveSeatState

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { seatList } = useLiveSeatState();

// Watch for data changes
watch(seatList, (newValue) => {
  console.log('seatList updated:', newValue);
});

// Access data directly
console.log('Current seatList:', seatList.value);

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { canvas } = useLiveSeatState();

// Watch for data changes
watch(canvas, (newValue) => {
  console.log('canvas updated:', newValue);
});

// Access data directly
console.log('Current canvas:', canvas.value);

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { speakingUsers } = useLiveSeatState();

// Watch for data changes
watch(speakingUsers, (newValue) => {
  console.log('speakingUsers updated:', newValue);
});

// Access data directly
console.log('Current speakingUsers:', speakingUsers.value);

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { networkQualities } = useLiveSeatState();

// Watch for data changes
watch(networkQualities, (newValue) => {
  console.log('networkQualities updated:', newValue);
});

// Access data directly
console.log('Current networkQualities:', networkQualities.value);

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { takeSeat } = useLiveSeatState();

// Take seat at index 1
await takeSeat({
  seatIndex: 1
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { leaveSeat } = useLiveSeatState();

// Leave seat at index 1
await leaveSeat({
  seatIndex: 1
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { lockSeat } = useLiveSeatState();

// Lock seat at index 2
await lockSeat({
  seatIndex: 2
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { unLockSeat } = useLiveSeatState();

// Unlock seat at index 2
await unLockSeat({
  seatIndex: 2
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { kickUserOutOfSeat } = useLiveSeatState();

// Kick user out of seat
await kickUserOutOfSeat({
  seatIndex: 1,
  userId: 'user_123'
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { moveUserToSeat } = useLiveSeatState();

// Move user to target seat
await moveUserToSeat({
  userId: 'user_123',
  targetSeatIndex: 3
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { openRemoteCamera } = useLiveSeatState();

// Open remote user's camera
await openRemoteCamera({
  userId: 'user_123'
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { closeRemoteCamera } = useLiveSeatState();

// Close remote user's camera
await closeRemoteCamera({
  userId: 'user_123'
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { openRemoteMicrophone } = useLiveSeatState();

// Open remote user's microphone
await openRemoteMicrophone({
  userId: 'user_123'
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { closeRemoteMicrophone } = useLiveSeatState();

// Close remote user's microphone
await closeRemoteMicrophone({
  userId: 'user_123'
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { muteMicrophone } = useLiveSeatState();

// Mute user's microphone
await muteMicrophone({
  userId: 'user_123'
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { unmuteMicrophone } = useLiveSeatState();

// Unmute user's microphone
await unmuteMicrophone({
  userId: 'user_123'
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { startPlayStream } = useLiveSeatState();

// Start playing user's stream
await startPlayStream({
  userId: 'user_123',
  streamType: 0
});

import { useLiveSeatState } from 'tuikit-atomicx-vue3';

const { stopPlayStream } = useLiveSeatState();

// Stop playing user's stream
await stopPlayStream({
  userId: 'user_123',
  streamType: 0
});

LiveAudienceState

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { audienceList } = useLiveAudienceState();

// Watch for data changes
watch(audienceList, (newValue) => {
  console.log('audienceList updated:', newValue);
});

// Access data directly
console.log('Current audienceList:', audienceList.value);

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { audienceCount } = useLiveAudienceState();

// Watch for data changes
watch(audienceCount, (newValue) => {
  console.log('audienceCount updated:', newValue);
});

// Access data directly
console.log('Current audienceCount:', audienceCount.value);

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { fetchAudienceList } = useLiveAudienceState();

// Fetch audience list with pagination
await fetchAudienceList({
  cursor: '',
  count: 50
});

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { setAdministrator } = useLiveAudienceState();

// Set user as administrator
await setAdministrator({
  userId: 'user_123'
});

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { revokeAdministrator } = useLiveAudienceState();

// Revoke administrator privileges
await revokeAdministrator({
  userId: 'user_123'
});

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { kickUserOutOfRoom } = useLiveAudienceState();

// Kick user out of room
await kickUserOutOfRoom({
  userId: 'user_123'
});

import { useLiveAudienceState } from 'tuikit-atomicx-vue3';

const { disableSendMessage } = useLiveAudienceState();

// Disable user from sending messages for 10 minutes
await disableSendMessage({
  userId: 'user_123',
  duration: 600
});

LiveMonitorState

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { monitorLiveInfoList } = useLiveMonitorState();

// Watch for data changes
watch(monitorLiveInfoList, (newValue) => {
  console.log('monitorLiveInfoList updated:', newValue);
});

// Access data directly
console.log('Current monitorLiveInfoList:', monitorLiveInfoList.value);

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { init } = useLiveMonitorState();

// Initialize live monitor service
await init({
  sdkAppId: 1400000001,
  userId: 'admin_user',
  userSig: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS...'
});

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { getLiveList } = useLiveMonitorState();

// Get live list with pagination
await getLiveList({
  cursor: '',
  count: 20
});

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { closeRoom } = useLiveMonitorState();

// Close a live room
await closeRoom({
  roomId: 'room_123456'
});

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { sendMessage } = useLiveMonitorState();

// Send a text message
await sendMessage({
  content: 'Hello everyone!',
  type: 'text'
});

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { startPlay } = useLiveMonitorState();

// Start playing a live stream
await startPlay({
  roomId: 'room_123456',
  userId: 'host_user'
});

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { stopPlay } = useLiveMonitorState();

// Stop playing a live stream
await stopPlay({
  roomId: 'room_123456',
  userId: 'host_user'
});

import { useLiveMonitorState } from 'tuikit-atomicx-vue3';

const { muteLiveAudio } = useLiveMonitorState();

// Mute live audio
await muteLiveAudio({
  roomId: 'room_123456',
  userId: 'host_user',
  isMuted: true
});

CoGuestState

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { candidates } = useCoGuestState();

// Watch for data changes
watch(candidates, (newValue) => {
  console.log('candidates updated:', newValue);
});

// Access data directly
console.log('Current candidates:', candidates.value);

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { connected } = useCoGuestState();

// Watch for data changes
watch(connected, (newValue) => {
  console.log('connected updated:', newValue);
});

// Access data directly
console.log('Current connected:', connected.value);

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { invitees } = useCoGuestState();

// Watch for data changes
watch(invitees, (newValue) => {
  console.log('invitees updated:', newValue);
});

// Access data directly
console.log('Current invitees:', invitees.value);

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { applicants } = useCoGuestState();

// Watch for data changes
watch(applicants, (newValue) => {
  console.log('applicants updated:', newValue);
});

// Access data directly
console.log('Current applicants:', applicants.value);

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { cancelApplication } = useCoGuestState();

// Cancel co-guest application
await cancelApplication({
  requestId: 'req_123456'
});

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { acceptApplication } = useCoGuestState();

// Accept co-guest application
await acceptApplication({
  requestId: 'req_123456'
});

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { rejectApplication } = useCoGuestState();

// Reject co-guest application
await rejectApplication({
  requestId: 'req_123456'
});

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { cancelInvitation } = useCoGuestState();

// Cancel co-guest invitation
await cancelInvitation({
  requestId: 'req_123456'
});

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { acceptInvitation } = useCoGuestState();

// Accept co-guest invitation
await acceptInvitation({
  requestId: 'req_123456'
});

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { rejectInvitation } = useCoGuestState();

// Reject co-guest invitation
await rejectInvitation({
  requestId: 'req_123456'
});

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { disConnect } = useCoGuestState();

// Disconnect co-guest connection
await disConnect({
  userId: 'user_123'
});

import { useCoGuestState } from 'tuikit-atomicx-vue3';

const { applyForSeat } = useCoGuestState();

// Apply for a seat with 60 seconds timeout
await applyForSeat({
  seatIndex: 1,
  timeout: 60
});

CoHostState

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { coHostStatus } = useCoHostState();

// Watch for data changes
watch(coHostStatus, (newValue) => {
  console.log('coHostStatus updated:', newValue);
});

// Access data directly
console.log('Current coHostStatus:', coHostStatus.value);

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { connected } = useCoHostState();

// Watch for data changes
watch(connected, (newValue) => {
  console.log('connected updated:', newValue);
});

// Access data directly
console.log('Current connected:', connected.value);

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { applicant } = useCoHostState();

// Watch for data changes
watch(applicant, (newValue) => {
  console.log('applicant updated:', newValue);
});

// Access data directly
console.log('Current applicant:', applicant.value);

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { invitees } = useCoHostState();

// Watch for data changes
watch(invitees, (newValue) => {
  console.log('invitees updated:', newValue);
});

// Access data directly
console.log('Current invitees:', invitees.value);

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { candidates } = useCoHostState();

// Watch for data changes
watch(candidates, (newValue) => {
  console.log('candidates updated:', newValue);
});

// Access data directly
console.log('Current candidates:', candidates.value);

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { requestHostConnection } = useCoHostState();

// Request host connection with 60 seconds timeout
await requestHostConnection({
  targetUserId: 'host_123',
  timeout: 60
});

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { cancelHostConnection } = useCoHostState();

// Cancel host connection request
await cancelHostConnection({
  targetUserId: 'host_123'
});

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { acceptHostConnection } = useCoHostState();

// Accept host connection request
await acceptHostConnection({
  targetUserId: 'host_123'
});

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { rejectHostConnection } = useCoHostState();

// Reject host connection request
await rejectHostConnection({
  targetUserId: 'host_123'
});

import { useCoHostState } from 'tuikit-atomicx-vue3';

const { exitHostConnection } = useCoHostState();

// Exit host connection
await exitHostConnection({
  targetUserId: 'host_123'
});

BattleState

import { useBattleState } from 'tuikit-atomicx-vue3';

const { currentBattleInfo } = useBattleState();

// Watch for data changes
watch(currentBattleInfo, (newValue) => {
  console.log('currentBattleInfo updated:', newValue);
});

// Access data directly
console.log('Current currentBattleInfo:', currentBattleInfo.value);

import { useBattleState } from 'tuikit-atomicx-vue3';

const { battleUsers } = useBattleState();

// Watch for data changes
watch(battleUsers, (newValue) => {
  console.log('battleUsers updated:', newValue);
});

// Access data directly
console.log('Current battleUsers:', battleUsers.value);

import { useBattleState } from 'tuikit-atomicx-vue3';

const { battleScore } = useBattleState();

// Watch for data changes
watch(battleScore, (newValue) => {
  console.log('battleScore updated:', newValue);
});

// Access data directly
console.log('Current battleScore:', battleScore.value);

import { useBattleState } from 'tuikit-atomicx-vue3';

const { requestBattle } = useBattleState();

// Request battle with 5 minutes duration
await requestBattle({
  targetUserId: 'host_123',
  duration: 300
});

import { useBattleState } from 'tuikit-atomicx-vue3';

const { cancelBattleRequest } = useBattleState();

// Cancel battle request
await cancelBattleRequest({
  targetUserId: 'host_123'
});

import { useBattleState } from 'tuikit-atomicx-vue3';

const { acceptBattle } = useBattleState();

// Accept battle request
await acceptBattle({
  targetUserId: 'host_123'
});

import { useBattleState } from 'tuikit-atomicx-vue3';

const { rejectBattle } = useBattleState();

// Reject battle request
await rejectBattle({
  targetUserId: 'host_123'
});

import { useBattleState } from 'tuikit-atomicx-vue3';

const { exitBattle } = useBattleState();

// Exit battle
await exitBattle({
  targetUserId: 'host_123'
});

BarrageState

import { useBarrageState } from 'tuikit-atomicx-vue3';

const { messageList } = useBarrageState();

// Watch for data changes
watch(messageList, (newValue) => {
  console.log('messageList updated:', newValue);
});

// Access data directly
console.log('Current messageList:', messageList.value);

import { useBarrageState } from 'tuikit-atomicx-vue3';

const { sendTextMessage } = useBarrageState();

// Send text barrage message
await sendTextMessage({
  text: 'Great live stream!',
  receiverList: []
});

import { useBarrageState } from 'tuikit-atomicx-vue3';

const { sendCustomMessage } = useBarrageState();

// Send custom barrage message (e.g., gift)
await sendCustomMessage({
  data: JSON.stringify({ type: 'gift', giftId: 'rocket', count: 1 }),
  receiverList: []
});

import { useBarrageState } from 'tuikit-atomicx-vue3';

const { appendLocalTip } = useBarrageState();

// Append local tip message
await appendLocalTip({
  message: 'Welcome to the live room!',
  type: 'info'
});

MessageListState

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { activeConversationID } = useMessageListState();

// Watch for data changes
watch(activeConversationID, (newValue) => {
  console.log('activeConversationID updated:', newValue);
});

// Access data directly
console.log('Current activeConversationID:', activeConversationID.value);

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { messageList } = useMessageListState();

// Watch for data changes
watch(messageList, (newValue) => {
  console.log('messageList updated:', newValue);
});

// Access data directly
console.log('Current messageList:', messageList.value);

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { hasMoreOlderMessage } = useMessageListState();

// Watch for data changes
watch(hasMoreOlderMessage, (newValue) => {
  console.log('hasMoreOlderMessage updated:', newValue);
});

// Access data directly
console.log('Current hasMoreOlderMessage:', hasMoreOlderMessage.value);

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { hasMoreNewerMessage } = useMessageListState();

// Watch for data changes
watch(hasMoreNewerMessage, (newValue) => {
  console.log('hasMoreNewerMessage updated:', newValue);
});

// Access data directly
console.log('Current hasMoreNewerMessage:', hasMoreNewerMessage.value);

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { enableReadReceipt } = useMessageListState();

// Watch for data changes
watch(enableReadReceipt, (newValue) => {
  console.log('enableReadReceipt updated:', newValue);
});

// Access data directly
console.log('Current enableReadReceipt:', enableReadReceipt.value);

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { isDisableScroll } = useMessageListState();

// Watch for data changes
watch(isDisableScroll, (newValue) => {
  console.log('isDisableScroll updated:', newValue);
});

// Access data directly
console.log('Current isDisableScroll:', isDisableScroll.value);

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { recalledMessageIDSet } = useMessageListState();

// Watch for data changes
watch(recalledMessageIDSet, (newValue) => {
  console.log('recalledMessageIDSet updated:', newValue);
});

// Access data directly
console.log('Current recalledMessageIDSet:', recalledMessageIDSet.value);

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { highlightMessageIDSet } = useMessageListState();

// Watch for data changes
watch(highlightMessageIDSet, (newValue) => {
  console.log('highlightMessageIDSet updated:', newValue);
});

// Access data directly
console.log('Current highlightMessageIDSet:', highlightMessageIDSet.value);

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { setEnableReadReceipt } = useMessageListState();

// Enable read receipt
await setEnableReadReceipt({
  enabled: true
});

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { setIsDisableScroll } = useMessageListState();

// Disable auto scroll
await setIsDisableScroll({
  disabled: true
});

import { useMessageListState } from 'tuikit-atomicx-vue3';

const { highlightMessage } = useMessageListState();

// Highlight a specific message for 3 seconds
await highlightMessage({
  messageId: 'msg_123456',
  duration: 3000
});

MessageInputState

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { inputRawValue } = useMessageInputState();

// Watch for data changes
watch(inputRawValue, (newValue) => {
  console.log('inputRawValue updated:', newValue);
});

// Access data directly
console.log('Current inputRawValue:', inputRawValue.value);

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { isPeerTyping } = useMessageInputState();

// Watch for data changes
watch(isPeerTyping, (newValue) => {
  console.log('isPeerTyping updated:', newValue);
});

// Access data directly
console.log('Current isPeerTyping:', isPeerTyping.value);

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { updateRawValue } = useMessageInputState();

// Update input raw value
await updateRawValue({
  value: 'Hello, world!'
});

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { setEditorInstance } = useMessageInputState();

// Set editor instance
await setEditorInstance({
  editor: editorRef
});

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { setContent } = useMessageInputState();

// Set editor content
await setContent({
  content: 'New message content'
});

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { insertContent } = useMessageInputState();

// Insert content at cursor position
await insertContent({
  content: '@user ',
  position: 0
});

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { focusEditor } = useMessageInputState();

// Focus editor
focusEditor();

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { blurEditor } = useMessageInputState();

// Blur editor
blurEditor();

import { useMessageInputState } from 'tuikit-atomicx-vue3';

const { sendMessage } = useMessageInputState();

// Send a text message
await sendMessage({
  content: 'Hello everyone!',
  type: 'text'
});

MessageActionState

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { forwardMessageIDList } = useMessageActionState();

// Watch for data changes
watch(forwardMessageIDList, (newValue) => {
  console.log('forwardMessageIDList updated:', newValue);
});

// Access data directly
console.log('Current forwardMessageIDList:', forwardMessageIDList.value);

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { isForwardMessageSelectionDone } = useMessageActionState();

// Watch for data changes
watch(isForwardMessageSelectionDone, (newValue) => {
  console.log('isForwardMessageSelectionDone updated:', newValue);
});

// Access data directly
console.log('Current isForwardMessageSelectionDone:', isForwardMessageSelectionDone.value);

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { forwardConversationIDList } = useMessageActionState();

// Watch for data changes
watch(forwardConversationIDList, (newValue) => {
  console.log('forwardConversationIDList updated:', newValue);
});

// Access data directly
console.log('Current forwardConversationIDList:', forwardConversationIDList.value);

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { quotedMessage } = useMessageActionState();

// Watch for data changes
watch(quotedMessage, (newValue) => {
  console.log('quotedMessage updated:', newValue);
});

// Access data directly
console.log('Current quotedMessage:', quotedMessage.value);

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { forwardMessage } = useMessageActionState();

// Forward messages to conversations
await forwardMessage({
  messageIds: ['msg_001', 'msg_002'],
  conversationIds: ['C2C_user123', 'GROUP_group456']
});

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { setForwardMessageIDList } = useMessageActionState();

// Set forward message ID list
await setForwardMessageIDList({
  messageIds: ['msg_001', 'msg_002', 'msg_003']
});

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { setIsForwardMessageSelectionDone } = useMessageActionState();

// Mark forward message selection as done
await setIsForwardMessageSelectionDone({
  done: true
});

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { setForwardConversationIDList } = useMessageActionState();

// Set forward conversation ID list
await setForwardConversationIDList({
  conversationIds: ['C2C_user123', 'GROUP_group456']
});

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { quoteMessage } = useMessageActionState();

// Quote a message for reply
await quoteMessage({
  messageId: 'msg_123456'
});

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { clearQuotedMessage } = useMessageActionState();

// clearQuote message
clearQuotedMessage();

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { copyTextMessage } = useMessageActionState();

// Copy text message content
await copyTextMessage({
  messageId: 'msg_123456'
});

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { deleteMessage } = useMessageActionState();

// Delete a message
await deleteMessage({
  messageId: 'msg_123456'
});

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { recallMessage } = useMessageActionState();

// Recall a message
await recallMessage({
  messageId: 'msg_123456'
});

import { useMessageActionState } from 'tuikit-atomicx-vue3';

const { resetMessageActionState } = useMessageActionState();

// resetallmessageactionstatus
resetMessageActionState();

ConversationListState

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { conversationList } = useConversationListState();

// Watch for data changes
watch(conversationList, (newValue) => {
  console.log('conversationList updated:', newValue);
});

// Access data directly
console.log('Current conversationList:', conversationList.value);

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { activeConversation } = useConversationListState();

// Watch for data changes
watch(activeConversation, (newValue) => {
  console.log('activeConversation updated:', newValue);
});

// Access data directly
console.log('Current activeConversation:', activeConversation.value);

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { totalUnRead } = useConversationListState();

// Watch for data changes
watch(totalUnRead, (newValue) => {
  console.log('totalUnRead updated:', newValue);
});

// Access data directly
console.log('Current totalUnRead:', totalUnRead.value);

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { netStatus } = useConversationListState();

// Watch for data changes
watch(netStatus, (newValue) => {
  console.log('netStatus updated:', newValue);
});

// Access data directly
console.log('Current netStatus:', netStatus.value);

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { markConversationUnread } = useConversationListState();

// Mark conversation as unread
await markConversationUnread({
  conversationId: 'C2C_user123',
  unreadCount: 1
});

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { setActiveConversation } = useConversationListState();

// Set active conversation
await setActiveConversation({
  conversationId: 'C2C_user123'
});

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { pinConversation } = useConversationListState();

// Pin conversation to top
await pinConversation({
  conversationId: 'C2C_user123',
  isPinned: true
});

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { deleteConversation } = useConversationListState();

// Delete a conversation
await deleteConversation({
  conversationId: 'C2C_user123'
});

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { muteConversation } = useConversationListState();

// Mute conversation notifications
await muteConversation({
  conversationId: 'C2C_user123',
  isMuted: true
});

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { setConversationDraft } = useConversationListState();

// Set conversation draft
await setConversationDraft({
  conversationId: 'C2C_user123',
  draft: 'Draft message content...'
});

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { createC2CConversation } = useConversationListState();

// Create C2C (one-to-one) conversation
await createC2CConversation({
  userId: 'user_123'
});

import { useConversationListState } from 'tuikit-atomicx-vue3';

const { createGroupConversation } = useConversationListState();

// Create group conversation
await createGroupConversation({
  groupId: 'group_456'
});

ContactListState

import { useContactListState } from 'tuikit-atomicx-vue3';

const { friendList } = useContactListState();

// Watch for data changes
watch(friendList, (newValue) => {
  console.log('friendList updated:', newValue);
});

// Access data directly
console.log('Current friendList:', friendList.value);

import { useContactListState } from 'tuikit-atomicx-vue3';

const { groupList } = useContactListState();

// Watch for data changes
watch(groupList, (newValue) => {
  console.log('groupList updated:', newValue);
});

// Access data directly
console.log('Current groupList:', groupList.value);

import { useContactListState } from 'tuikit-atomicx-vue3';

const { blackList } = useContactListState();

// Watch for data changes
watch(blackList, (newValue) => {
  console.log('blackList updated:', newValue);
});

// Access data directly
console.log('Current blackList:', blackList.value);

import { useContactListState } from 'tuikit-atomicx-vue3';

const { friendApplicationUnreadCount } = useContactListState();

// Watch for data changes
watch(friendApplicationUnreadCount, (newValue) => {
  console.log('friendApplicationUnreadCount updated:', newValue);
});

// Access data directly
console.log('Current friendApplicationUnreadCount:', friendApplicationUnreadCount.value);

import { useContactListState } from 'tuikit-atomicx-vue3';

const { friendGroupList } = useContactListState();

// Watch for data changes
watch(friendGroupList, (newValue) => {
  console.log('friendGroupList updated:', newValue);
});

// Access data directly
console.log('Current friendGroupList:', friendGroupList.value);

import { useContactListState } from 'tuikit-atomicx-vue3';

const { friendApplicationList } = useContactListState();

// Watch for data changes
watch(friendApplicationList, (newValue) => {
  console.log('friendApplicationList updated:', newValue);
});

// Access data directly
console.log('Current friendApplicationList:', friendApplicationList.value);

import { useContactListState } from 'tuikit-atomicx-vue3';

const { groupApplicationList } = useContactListState();

// Watch for data changes
watch(groupApplicationList, (newValue) => {
  console.log('groupApplicationList updated:', newValue);
});

// Access data directly
console.log('Current groupApplicationList:', groupApplicationList.value);

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setGroupApplicationList } = useContactListState();

// Set group application list
await setGroupApplicationList({
  applicationList: []
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setFriendList } = useContactListState();

// Set friend list
await setFriendList({
  friendList: []
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setGroupList } = useContactListState();

// Set group list
await setGroupList({
  groupList: []
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setBlackList } = useContactListState();

// Set black list
await setBlackList({
  blackList: []
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setFriendApplicationUnreadCount } = useContactListState();

// Set friend application unread count
await setFriendApplicationUnreadCount({
  count: 5
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setFriendGroupList } = useContactListState();

// Set friend group list
await setFriendGroupList({
  groupList: []
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setFriendApplicationList } = useContactListState();

// Set friend application list
await setFriendApplicationList({
  applicationList: []
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { initContactListWatcher } = useContactListState();

// Initialize contact list watcher
await initContactListWatcher({
  autoUpdate: true
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { addFriend } = useContactListState();

// Add friend with remark
await addFriend({
  userId: 'user_123',
  remark: 'My Friend',
  addSource: 'search'
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { markFriendApplicationAsRead } = useContactListState();

// Mark friend applications as read
await markFriendApplicationAsRead({
  applicationList: ['app_001', 'app_002']
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { acceptFriendApplication } = useContactListState();

// Accept friend application
await acceptFriendApplication({
  userId: 'user_123',
  remark: 'New Friend'
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { refuseFriendApplication } = useContactListState();

// Refuse friend application
await refuseFriendApplication({
  userId: 'user_123'
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { addToBlacklist } = useContactListState();

// Add user to blacklist
await addToBlacklist({
  userId: 'user_123'
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { removeFromBlacklist } = useContactListState();

// Remove user from blacklist
await removeFromBlacklist({
  userId: 'user_123'
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { deleteFriend } = useContactListState();

// Delete friend
await deleteFriend({
  userId: 'user_123'
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { setFriendRemark } = useContactListState();

// Set friend remark
await setFriendRemark({
  userId: 'user_123',
  remark: 'Best Friend'
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { createFriendGroup } = useContactListState();

// Create friend group
await createFriendGroup({
  groupName: 'Close Friends',
  userList: ['user_001', 'user_002']
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { deleteFriendGroup } = useContactListState();

// Delete friend group
await deleteFriendGroup({
  groupName: 'Old Group'
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { addToFriendGroup } = useContactListState();

// Add friends to group
await addToFriendGroup({
  groupName: 'Close Friends',
  userList: ['user_003', 'user_004']
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { removeFromFriendGroup } = useContactListState();

// Remove friends from group
await removeFromFriendGroup({
  groupName: 'Close Friends',
  userList: ['user_003']
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { renameFriendGroup } = useContactListState();

// Rename friend group
await renameFriendGroup({
  oldGroupName: 'Close Friends',
  newGroupName: 'Best Friends'
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { joinGroup } = useContactListState();

// Join a group
await joinGroup({
  groupId: 'group_123',
  message: 'I want to join this group'
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { acceptGroupApplication } = useContactListState();

// Accept group application
await acceptGroupApplication({
  groupId: 'group_123',
  userId: 'user_456'
});

import { useContactListState } from 'tuikit-atomicx-vue3';

const { refuseGroupApplication } = useContactListState();

// Refuse group application
await refuseGroupApplication({
  groupId: 'group_123',
  userId: 'user_456',
  reason: 'Group is full'
});

C2CSettingState

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { currentConversationRef } = useC2CSettingState();

// Watch for data changes
watch(currentConversationRef, (newValue) => {
  console.log('currentConversationRef updated:', newValue);
});

// Access data directly
console.log('Current currentConversationRef:', currentConversationRef.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { userIDRef } = useC2CSettingState();

// Watch for data changes
watch(userIDRef, (newValue) => {
  console.log('userIDRef updated:', newValue);
});

// Access data directly
console.log('Current userIDRef:', userIDRef.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { nickRef } = useC2CSettingState();

// Watch for data changes
watch(nickRef, (newValue) => {
  console.log('nickRef updated:', newValue);
});

// Access data directly
console.log('Current nickRef:', nickRef.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { avatarRef } = useC2CSettingState();

// Watch for data changes
watch(avatarRef, (newValue) => {
  console.log('avatarRef updated:', newValue);
});

// Access data directly
console.log('Current avatarRef:', avatarRef.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { signatureRef } = useC2CSettingState();

// Watch for data changes
watch(signatureRef, (newValue) => {
  console.log('signatureRef updated:', newValue);
});

// Access data directly
console.log('Current signatureRef:', signatureRef.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { remarkRef } = useC2CSettingState();

// Watch for data changes
watch(remarkRef, (newValue) => {
  console.log('remarkRef updated:', newValue);
});

// Access data directly
console.log('Current remarkRef:', remarkRef.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { isMutedRef } = useC2CSettingState();

// Watch for data changes
watch(isMutedRef, (newValue) => {
  console.log('isMutedRef updated:', newValue);
});

// Access data directly
console.log('Current isMutedRef:', isMutedRef.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { isPinnedRef } = useC2CSettingState();

// Watch for data changes
watch(isPinnedRef, (newValue) => {
  console.log('isPinnedRef updated:', newValue);
});

// Access data directly
console.log('Current isPinnedRef:', isPinnedRef.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { isContactRef } = useC2CSettingState();

// Watch for data changes
watch(isContactRef, (newValue) => {
  console.log('isContactRef updated:', newValue);
});

// Access data directly
console.log('Current isContactRef:', isContactRef.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { userID } = useC2CSettingState();

// Watch for data changes
watch(userID, (newValue) => {
  console.log('userID updated:', newValue);
});

// Access data directly
console.log('Current userID:', userID.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { avatar } = useC2CSettingState();

// Watch for data changes
watch(avatar, (newValue) => {
  console.log('avatar updated:', newValue);
});

// Access data directly
console.log('Current avatar:', avatar.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { signature } = useC2CSettingState();

// Watch for data changes
watch(signature, (newValue) => {
  console.log('signature updated:', newValue);
});

// Access data directly
console.log('Current signature:', signature.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { remark } = useC2CSettingState();

// Watch for data changes
watch(remark, (newValue) => {
  console.log('remark updated:', newValue);
});

// Access data directly
console.log('Current remark:', remark.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { isMuted } = useC2CSettingState();

// Watch for data changes
watch(isMuted, (newValue) => {
  console.log('isMuted updated:', newValue);
});

// Access data directly
console.log('Current isMuted:', isMuted.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { isPinned } = useC2CSettingState();

// Watch for data changes
watch(isPinned, (newValue) => {
  console.log('isPinned updated:', newValue);
});

// Access data directly
console.log('Current isPinned:', isPinned.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { isContact } = useC2CSettingState();

// Watch for data changes
watch(isContact, (newValue) => {
  console.log('isContact updated:', newValue);
});

// Access data directly
console.log('Current isContact:', isContact.value);

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { setChatPinned } = useC2CSettingState();

// Pin chat to top
await setChatPinned({
  conversationId: 'C2C_user123',
  isPinned: true
});

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { setChatMuted } = useC2CSettingState();

// Mute chat notifications
await setChatMuted({
  conversationId: 'C2C_user123',
  isMuted: true
});

import { useC2CSettingState } from 'tuikit-atomicx-vue3';

const { setUserRemark } = useC2CSettingState();

// Set user remark
await setUserRemark({
  userId: 'user_123',
  remark: 'My Best Friend'
});

GroupSettingState

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { groupID } = useGroupSettingState();

// Watch for data changes
watch(groupID, (newValue) => {
  console.log('groupID updated:', newValue);
});

// Access data directly
console.log('Current groupID:', groupID.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { groupType } = useGroupSettingState();

// Watch for data changes
watch(groupType, (newValue) => {
  console.log('groupType updated:', newValue);
});

// Access data directly
console.log('Current groupType:', groupType.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { groupName } = useGroupSettingState();

// Watch for data changes
watch(groupName, (newValue) => {
  console.log('groupName updated:', newValue);
});

// Access data directly
console.log('Current groupName:', groupName.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { avatar } = useGroupSettingState();

// Watch for data changes
watch(avatar, (newValue) => {
  console.log('avatar updated:', newValue);
});

// Access data directly
console.log('Current avatar:', avatar.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { introduction } = useGroupSettingState();

// Watch for data changes
watch(introduction, (newValue) => {
  console.log('introduction updated:', newValue);
});

// Access data directly
console.log('Current introduction:', introduction.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { notification } = useGroupSettingState();

// Watch for data changes
watch(notification, (newValue) => {
  console.log('notification updated:', newValue);
});

// Access data directly
console.log('Current notification:', notification.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { isMuted } = useGroupSettingState();

// Watch for data changes
watch(isMuted, (newValue) => {
  console.log('isMuted updated:', newValue);
});

// Access data directly
console.log('Current isMuted:', isMuted.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { isPinned } = useGroupSettingState();

// Watch for data changes
watch(isPinned, (newValue) => {
  console.log('isPinned updated:', newValue);
});

// Access data directly
console.log('Current isPinned:', isPinned.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { groupOwner } = useGroupSettingState();

// Watch for data changes
watch(groupOwner, (newValue) => {
  console.log('groupOwner updated:', newValue);
});

// Access data directly
console.log('Current groupOwner:', groupOwner.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { adminMembers } = useGroupSettingState();

// Watch for data changes
watch(adminMembers, (newValue) => {
  console.log('adminMembers updated:', newValue);
});

// Access data directly
console.log('Current adminMembers:', adminMembers.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { allMembers } = useGroupSettingState();

// Watch for data changes
watch(allMembers, (newValue) => {
  console.log('allMembers updated:', newValue);
});

// Access data directly
console.log('Current allMembers:', allMembers.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { memberCount } = useGroupSettingState();

// Watch for data changes
watch(memberCount, (newValue) => {
  console.log('memberCount updated:', newValue);
});

// Access data directly
console.log('Current memberCount:', memberCount.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { maxMemberCount } = useGroupSettingState();

// Watch for data changes
watch(maxMemberCount, (newValue) => {
  console.log('maxMemberCount updated:', newValue);
});

// Access data directly
console.log('Current maxMemberCount:', maxMemberCount.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { currentUserID } = useGroupSettingState();

// Watch for data changes
watch(currentUserID, (newValue) => {
  console.log('currentUserID updated:', newValue);
});

// Access data directly
console.log('Current currentUserID:', currentUserID.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { currentUserRole } = useGroupSettingState();

// Watch for data changes
watch(currentUserRole, (newValue) => {
  console.log('currentUserRole updated:', newValue);
});

// Access data directly
console.log('Current currentUserRole:', currentUserRole.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { nameCard } = useGroupSettingState();

// Watch for data changes
watch(nameCard, (newValue) => {
  console.log('nameCard updated:', newValue);
});

// Access data directly
console.log('Current nameCard:', nameCard.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { isMuteAllMembers } = useGroupSettingState();

// Watch for data changes
watch(isMuteAllMembers, (newValue) => {
  console.log('isMuteAllMembers updated:', newValue);
});

// Access data directly
console.log('Current isMuteAllMembers:', isMuteAllMembers.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { isInGroup } = useGroupSettingState();

// Watch for data changes
watch(isInGroup, (newValue) => {
  console.log('isInGroup updated:', newValue);
});

// Access data directly
console.log('Current isInGroup:', isInGroup.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { inviteOption } = useGroupSettingState();

// Watch for data changes
watch(inviteOption, (newValue) => {
  console.log('inviteOption updated:', newValue);
});

// Access data directly
console.log('Current inviteOption:', inviteOption.value);

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { getGroupMemberList } = useGroupSettingState();

// Get group member list
await getGroupMemberList({
  groupId: 'group_123',
  filter: 0,
  nextSeq: 0
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { updateGroupProfile } = useGroupSettingState();

// Update group profile
await updateGroupProfile({
  groupId: 'group_123',
  groupName: 'New Group Name',
  avatar: 'https://example.com/avatar.png',
  introduction: 'Welcome to our group!',
  notification: 'Please follow the rules'
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { addGroupMember } = useGroupSettingState();

// Add group members
await addGroupMember({
  groupId: 'group_123',
  userList: ['user_001', 'user_002']
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { deleteGroupMember } = useGroupSettingState();

// Delete group members
await deleteGroupMember({
  groupId: 'group_123',
  userList: ['user_001'],
  reason: 'Violated group rules'
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { changeGroupOwner } = useGroupSettingState();

// Transfer group ownership
await changeGroupOwner({
  groupId: 'group_123',
  newOwnerUserId: 'user_456'
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { setGroupMemberRole } = useGroupSettingState();

// Set group member role (1: admin, 0: member)
await setGroupMemberRole({
  groupId: 'group_123',
  userId: 'user_456',
  role: 1
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { setGroupMemberNameCard } = useGroupSettingState();

// Set group member name card
await setGroupMemberNameCard({
  groupId: 'group_123',
  userId: 'user_456',
  nameCard: 'Team Leader'
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { setChatPinned } = useGroupSettingState();

// Pin chat to top
await setChatPinned({
  conversationId: 'C2C_user123',
  isPinned: true
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { setChatMuted } = useGroupSettingState();

// Mute chat notifications
await setChatMuted({
  conversationId: 'C2C_user123',
  isMuted: true
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { setGroupMemberMuteTime } = useGroupSettingState();

// Mute group member for 10 minutes
await setGroupMemberMuteTime({
  groupId: 'group_123',
  userId: 'user_456',
  muteTime: 600
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { setMuteAllMember } = useGroupSettingState();

// Mute all group members
await setMuteAllMember({
  groupId: 'group_123',
  isMuted: true
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { dismissGroup } = useGroupSettingState();

// Dismiss group
await dismissGroup({
  groupId: 'group_123'
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { quitGroup } = useGroupSettingState();

// Quit group
await quitGroup({
  groupId: 'group_123'
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { hasPermission } = useGroupSettingState();

// Check if user has permission
await hasPermission({
  permission: 'kick_member'
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { canOperateOnMember } = useGroupSettingState();

// Check if can operate on member
await canOperateOnMember({
  targetUserId: 'user_456',
  operation: 'mute'
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { getAvailablePermissions } = useGroupSettingState();

// Get available permissions for a user
await getAvailablePermissions({
  userId: 'user_123'
});

import { useGroupSettingState } from 'tuikit-atomicx-vue3';

const { initWatcher } = useGroupSettingState();

// Initialize group setting watcher
await initWatcher({
  autoUpdate: true
});

VideoMixerState

const size = getSizeByResolution(TRTCVideoResolution.TRTCVideoResolution_1280_720);
console.log(size.width, size.height); // output: 1280, 720

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { isVideoMixerEnabled } = useVideoMixerState();

// Watch for data changes
watch(isVideoMixerEnabled, (newValue) => {
  console.log('isVideoMixerEnabled updated:', newValue);
});

// Access data directly
console.log('Current isVideoMixerEnabled:', isVideoMixerEnabled.value);

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { mediaSourceList } = useVideoMixerState();

// Watch for data changes
watch(mediaSourceList, (newValue) => {
  console.log('mediaSourceList updated:', newValue);
});

// Access data directly
console.log('Current mediaSourceList:', mediaSourceList.value);

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { activeMediaSource } = useVideoMixerState();

// Watch for data changes
watch(activeMediaSource, (newValue) => {
  console.log('activeMediaSource updated:', newValue);
});

// Access data directly
console.log('Current activeMediaSource:', activeMediaSource.value);

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { getVideoDataByQuality } = useVideoMixerState();

// Get video encoding parameters by quality
await getVideoDataByQuality({
  quality: VideoQuality.HD720P
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { getSizeByQuality } = useVideoMixerState();

// Get video size by quality
await getSizeByQuality({
  quality: VideoQuality.HD720P
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { getSizeByResolution } = useVideoMixerState();

// Get video size by resolution
await getSizeByResolution({
  resolution: VideoResolution.Resolution_1280_720
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { transformTUIVideoQualityToTRTCVideoResolution } = useVideoMixerState();

// Transform TUI video quality to TRTC resolution
await transformTUIVideoQualityToTRTCVideoResolution({
  quality: VideoQuality.HD720P
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { transformTRTCVideoResolutionToTUIVideoQuality } = useVideoMixerState();

// Transform TRTC resolution to TUI video quality
await transformTRTCVideoResolutionToTUIVideoQuality({
  resolution: TRTCVideoResolution.TRTCVideoResolution_1280_720
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { transformTRTCVideoResModeToTUIVideoResMode } = useVideoMixerState();

// Transform TRTC resolution mode to TUI mode
await transformTRTCVideoResModeToTUIVideoResMode({
  mode: TRTCVideoResMode.TRTCVideoResModeLandscape
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { changeActiveMediaSource } = useVideoMixerState();

// Change active media source
await changeActiveMediaSource({
  sourceId: 'camera_source_1'
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { updateVideoQuality } = useVideoMixerState();

// Update video mixer quality
await updateVideoQuality({
  quality: VideoQuality.HD1080P
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { getDefaultLayoutByMediaSource } = useVideoMixerState();

// Get default layout by media source type
await getDefaultLayoutByMediaSource({
  sourceType: MediaSourceType.Camera
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { addMediaSource } = useVideoMixerState();

// Add a camera media source
await addMediaSource({
  sourceId: 'camera_source_1',
  sourceType: 0,
  sourceInfo: { deviceId: 'default' }
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { updateMediaSource } = useVideoMixerState();

// Update media source configuration
await updateMediaSource({
  sourceId: 'camera_source_1',
  sourceInfo: { x: 0, y: 0, width: 640, height: 480 }
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { removeMediaSource } = useVideoMixerState();

// Remove media source from mixer
await removeMediaSource({
  sourceId: 'camera_source_1'
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { enableLocalVideoMixer } = useVideoMixerState();

// Enable local video mixer
await enableLocalVideoMixer({
  enable: true
});

// clearallmedia source
clearMediaSource();

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { initMediaSourceManager } = useVideoMixerState();

// Initialize media source manager
await initMediaSourceManager({
  config: { maxSources: 4 }
});

import { useVideoMixerState } from 'tuikit-atomicx-vue3';

const { initVideoMixerState } = useVideoMixerState();

// Initialize video mixer state
await initVideoMixerState({
  config: { defaultQuality: VideoQuality.HD720P }
});

VirtualBackgroundState

import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3';

const { virtualBackgroundConfig } = useVirtualBackgroundState();

// Watch for data changes
watch(virtualBackgroundConfig, (newValue) => {
  console.log('virtualBackgroundConfig updated:', newValue);
});

// Access data directly
console.log('Current virtualBackgroundConfig:', virtualBackgroundConfig.value);

import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3';

const { initVirtualBackground } = useVirtualBackgroundState();

// Initialize virtual background
await initVirtualBackground({
  config: { enabled: true, type: 'blur' }
});

import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3';

const { saveVirtualBackground } = useVirtualBackgroundState();

// Save virtual background configuration
await saveVirtualBackground({
  config: { enabled: true, type: 'image', imageUrl: 'https://example.com/bg.jpg' }
});

import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3';

const { isSupported } = useVirtualBackgroundState();

// Check if virtual background is supported
await isSupported({
  feature: 'blur'
});

import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3';

const { setVirtualBackground } = useVirtualBackgroundState();

// Set virtual background (0: none, 1: blur, 2: image)
await setVirtualBackground({
  backgroundType: 1,
  backgroundValue: ''
});

ASRState

import { useASRState } from 'tuikit-atomicx-vue3';

const { recentTranscripts } = useASRState();

// Watch for data changes
watch(recentTranscripts, (newValue) => {
  console.log('recentTranscripts updated:', newValue);
});

// Access data directly
console.log('Current recentTranscripts:', recentTranscripts.value);

import { useASRState } from 'tuikit-atomicx-vue3';

const { transcriptHistory } = useASRState();

// Watch for data changes
watch(transcriptHistory, (newValue) => {
  console.log('transcriptHistory updated:', newValue);
});

// Access data directly
console.log('Current transcriptHistory:', transcriptHistory.value);

import { useASRState } from 'tuikit-atomicx-vue3';

const { setRecentTranscriptsDuration } = useASRState();

// Set recent transcripts duration (in seconds)
await setRecentTranscriptsDuration({
  duration: 300
});

import { useASRState } from 'tuikit-atomicx-vue3';

const { clearHistory, transcriptHistory } = useASRState();

// clearalltranscriptionrecord
clearHistory();
console.log('transcriptionrecordalreadyclear:', transcriptHistory.value.length === 0);

import { useASRState } from 'tuikit-atomicx-vue3';

const { exportTranscripts } = useASRState();

// Export transcripts in txt format
await exportTranscripts({
  format: 'txt',
  timeRange: { start: 1700000000000, end: 1700003600000 }
});

SearchState

import { useSearchState } from 'tuikit-atomicx-vue3';

const { keyword } = useSearchState();

// Watch for data changes
watch(keyword, (newValue) => {
  console.log('keyword updated:', newValue);
});

// Access data directly
console.log('Current keyword:', keyword.value);

import { useSearchState } from 'tuikit-atomicx-vue3';

const { results } = useSearchState();

// Watch for data changes
watch(results, (newValue) => {
  console.log('results updated:', newValue);
});

// Access data directly
console.log('Current results:', results.value);

import { useSearchState } from 'tuikit-atomicx-vue3';

const { isLoading } = useSearchState();

// Watch for data changes
watch(isLoading, (newValue) => {
  console.log('isLoading updated:', newValue);
});

// Access data directly
console.log('Current isLoading:', isLoading.value);

import { useSearchState } from 'tuikit-atomicx-vue3';

const { error } = useSearchState();

// Watch for data changes
watch(error, (newValue) => {
  console.log('error updated:', newValue);
});

// Access data directly
console.log('Current error:', error.value);

import { useSearchState } from 'tuikit-atomicx-vue3';

const { searchAdvancedParams } = useSearchState();

// Watch for data changes
watch(searchAdvancedParams, (newValue) => {
  console.log('searchAdvancedParams updated:', newValue);
});

// Access data directly
console.log('Current searchAdvancedParams:', searchAdvancedParams.value);

import { useSearchState } from 'tuikit-atomicx-vue3';

const { selectedSearchType } = useSearchState();

// Watch for data changes
watch(selectedSearchType, (newValue) => {
  console.log('selectedSearchType updated:', newValue);
});

// Access data directly
console.log('Current selectedSearchType:', selectedSearchType.value);

import { useSearchState } from 'tuikit-atomicx-vue3';

const { search } = useSearchState();

// Search for messages
await search({
  keyword: 'meeting',
  type: SearchType.Message
});

import { useSearchState } from 'tuikit-atomicx-vue3';

const { setKeyword } = useSearchState();

// Set search keyword
await setKeyword({
  keyword: 'hello'
});

import { useSearchState } from 'tuikit-atomicx-vue3';

const { setSelectedType } = useSearchState();

// Set selected search type
await setSelectedType({
  searchType: 'message'
});

import { useSearchState } from 'tuikit-atomicx-vue3';

const { setSearchMessageAdvancedParams } = useSearchState();

// Set message search advanced params
await setSearchMessageAdvancedParams({
  conversationId: 'C2C_user123',
  timeRange: { start: 1700000000000, end: 1700003600000 },
  senderList: ['user_001', 'user_002']
});

import { useSearchState } from 'tuikit-atomicx-vue3';

const { setSearchUserAdvancedParams } = useSearchState();

// Set user search advanced params
await setSearchUserAdvancedParams({
  userType: 'friend',
  isOnline: true
});

import { useSearchState } from 'tuikit-atomicx-vue3';

const { setSearchGroupAdvancedParams } = useSearchState();

// Set group search advanced params
await setSearchGroupAdvancedParams({
  groupType: 'Public',
  memberCountRange: { min: 10, max: 100 }
});

import { useSearchState } from 'tuikit-atomicx-vue3';

const { loadMore } = useSearchState();

// Load more search results
await loadMore({
  cursor: 'next_page_cursor',
  count: 20
});

SeatStore

import { useSeatStore } from 'tuikit-atomicx-vue3';

const { liveOwnerUserId } = useSeatStore();

// Watch for data changes
watch(liveOwnerUserId, (newValue) => {
  console.log('liveOwnerUserId updated:', newValue);
});

// Access data directly
console.log('Current liveOwnerUserId:', liveOwnerUserId.value);

import { useSeatStore } from 'tuikit-atomicx-vue3';

const { localUserId } = useSeatStore();

// Watch for data changes
watch(localUserId, (newValue) => {
  console.log('localUserId updated:', newValue);
});

// Access data directly
console.log('Current localUserId:', localUserId.value);

import { useSeatStore } from 'tuikit-atomicx-vue3';

const { seatList } = useSeatStore();

// Watch for data changes
watch(seatList, (newValue) => {
  console.log('seatList updated:', newValue);
});

// Access data directly
console.log('Current seatList:', seatList.value);

import { useSeatStore } from 'tuikit-atomicx-vue3';

const { coHostUserList } = useSeatStore();

// Watch for data changes
watch(coHostUserList, (newValue) => {
  console.log('coHostUserList updated:', newValue);
});

// Access data directly
console.log('Current coHostUserList:', coHostUserList.value);

import { useSeatStore } from 'tuikit-atomicx-vue3';

const { sentDeviceRequestMap } = useSeatStore();

// Watch for data changes
watch(sentDeviceRequestMap, (newValue) => {
  console.log('sentDeviceRequestMap updated:', newValue);
});

// Access data directly
console.log('Current sentDeviceRequestMap:', sentDeviceRequestMap.value);

import { useSeatStore } from 'tuikit-atomicx-vue3';

const { receivedDeviceRequestMap } = useSeatStore();

// Watch for data changes
watch(receivedDeviceRequestMap, (newValue) => {
  console.log('receivedDeviceRequestMap updated:', newValue);
});

// Access data directly
console.log('Current receivedDeviceRequestMap:', receivedDeviceRequestMap.value);

import { useSeatStore } from 'tuikit-atomicx-vue3';

const { userInfoMap } = useSeatStore();

// Watch for data changes
watch(userInfoMap, (newValue) => {
  console.log('userInfoMap updated:', newValue);
});

// Access data directly
console.log('Current userInfoMap:', userInfoMap.value);

import { useSeatStore } from 'tuikit-atomicx-vue3';

const { getUserInfo } = useSeatStore();

// Get user info by userId
await getUserInfo({
  userId: 'user_123'
});

import { useSeatStore } from 'tuikit-atomicx-vue3';

const { convertUserInfoToAudienceInfo } = useSeatStore();

// Convert user info to audience info format
await convertUserInfoToAudienceInfo({
  userInfo: { userId: 'user_123', nickName: 'John', avatar: 'https://example.com/avatar.png' }
});