@tencentcloud/roomkit-web-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
88 lines (87 loc) • 2.69 kB
JavaScript
import { ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { TUIToast, TOAST_TYPE } from "@tencentcloud/uikit-base-component-vue3";
import { TencentCloudChat } from "@tencentcloud/tuiroom-engine-js";
import useRoomEngine from "../../../hooks/useRoomEngine.mjs";
import { useChatStore } from "../../../stores/chat.mjs";
import { useRoomStore } from "../../../stores/room.mjs";
import { useI18n } from "../../../locales/index.mjs";
import { useBasicStore } from "../../../stores/basic.mjs";
import { decodeSendTextMsg } from "../util.mjs";
function useChatEditor() {
const roomEngine = useRoomEngine();
const { t } = useI18n();
const basicStore = useBasicStore();
const chatStore = useChatStore();
const roomStore = useRoomStore();
const { roomId, isCheckMessageLimitLink } = storeToRefs(basicStore);
const { isMessageDisabled } = storeToRefs(chatStore);
const editorInputEle = ref();
const sendMsg = ref("");
const isEmojiToolbarVisible = ref(false);
watch(isMessageDisabled, (value) => {
if (value) {
sendMsg.value = "";
}
});
const sendMessage = async () => {
var _a;
const result = decodeSendTextMsg(sendMsg.value);
if (result === "") {
return;
}
sendMsg.value = "";
isEmojiToolbarVisible.value = false;
try {
const tim = (_a = roomEngine.instance) == null ? void 0 : _a.getTIM();
if (!tim) {
throw new Error("tim is null");
}
const message = tim.createTextMessage({
to: roomId.value,
conversationType: TencentCloudChat.TYPES.CONV_GROUP,
payload: {
text: result
},
cloudCustomData: isCheckMessageLimitLink ? `${window.location.href}` : ""
});
await tim.sendMessage(message);
chatStore.updateMessageList({
ID: Math.random().toString(),
type: "TIMTextElem",
payload: {
text: result
},
nick: roomStore.localUser.nameCard || roomStore.localUser.userName || roomStore.localUser.userId,
from: roomStore.localUser.userId,
flow: "out",
sequence: Math.random()
});
} catch (e) {
TUIToast({
type: TOAST_TYPE.ERROR,
message: t("Failed to send the message")
});
}
};
const handleChooseEmoji = (emojiName) => {
sendMsg.value += emojiName;
editorInputEle.value.focus();
};
const togglePopover = () => {
isEmojiToolbarVisible.value = !isEmojiToolbarVisible.value;
};
return {
t,
editorInputEle,
sendMsg,
isMessageDisabled,
sendMessage,
handleChooseEmoji,
isEmojiToolbarVisible,
togglePopover
};
}
export {
useChatEditor as default
};