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;

PreviousVanillaJS NextNextjs

Last updated 2 months ago

// 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;