React
// index.html
<!doctype html>
<html lang="en">
<head>
<script src="https://web.sdk.klleon.io/1.0.0/klleon-chat.umd.js"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
// App.tsx
interface AvatarProps {
videoStyle?: CSSProperties;
}
interface ChatProps {
delay?: number;
type?: "voice" | "text";
isShowCount?: boolean;
}
function App() {
const avatarRef = useRef<HTMLElement & AvatarProps>(null);
const chatRef = useRef<HTMLElement & ChatProps>(null);
useEffect(() => {
// <avatar-container /> props
if (avatarRef.current) {
avatarRef.current.videoStyle = {
borderRadius: "30px",
objectFit: "contain",
};
}
// <chat-container /> props
if (chatRef.current) {
chatRef.current.delay = 10;
chatRef.current.type = "voice";
chatRef.current.isShowCount = false;
}
const initKlleonChat = async () => {
const { KlleonChat } = window;
KlleonChat.onStatusEvent((data) => {
console.log(data, "status data");
});
KlleonChat.onChatEvent((data) => {
console.log(data, "chat data");
});
await KlleonChat.init({
sdk_key: "your sdk_key",
avatar_id: "your avatar_id",
});
};
initKlleonChat();
return () => {
//
const { KlleonChat } = window;
KlleonChat.destroy();
};
}, []);
const sdkHandler = {
handleEcho: () => {
const { KlleonChat } = window;
KlleonChat.echo("hello world");
},
handleAvatarChange: (avatar_id:string) => {
const { KlleonChat } = window;
KlleonChat.changeAvatar({
avatar_id,
});
},
handleClear: () => {
const { KlleonChat } = window;
KlleonChat.clearMessageList();
},
};
return (
<main>
<div
style={{
width: "100vw",
height: "100vh",
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "24px",
width: "100%",
height: "100%",
}}
>
<div
style={{
display: "flex",
height: "800px",
}}
>
<div
style={{
flex: 1,
}}
>
<avatar-container
ref={avatarRef}
style={{
borderRadius: "24px",
}}
class="your class"
/>
</div>
<div
style={{
flex: 1,
}}
>
<chat-container ref={chatRef} class="your class" />
</div>
</div>
<div
style={{
display: "flex",
gap: "24px",
}}
>
<button onClick={sdkHandler.handleEcho}>echo</button>
<button onClick={() => sdkHandler.handleAvatarChange('change-avatar-id')}>
change avatar
</button>
<button onClick={sdkHandler.handleClear}>clear message</button>
</div>
</div>
</div>
</main>
);
}
export default App;Last updated