Nextjs

// layout.tsx
export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script
          defer
          src="https://web.sdk.klleon.io/1.0.0/klleon-chat.umd.js"
        />
      </head>
      <body style={{ margin: 0 }}>{children}</body>
    </html>
  );
}

// page.tsx
"use client";

interface AvatarProps {
  videoStyle?: CSSProperties;
}

interface ChatProps {
  delay?: number;
  type?: "voice" | "text";
  isShowCount?: boolean;
}

const SdkPage = () => {
  const { sdkHandler } = useSdk();
  const avatarRef = useRef<HTMLElement & AvatarProps>(null);
  const chatRef = useRef<HTMLElement & ChatProps>(null);

  useEffect(() => {
    if (avatarRef.current) {
      avatarRef.current.videoStyle = {
        borderRadius: "30px",
        objectFit: "contain",
      };
    }
    if (chatRef.current) {
      chatRef.current.delay = 10;
      chatRef.current.type = "voice";
      chatRef.current.isShowCount = true;
    }

    if (typeof window !== "undefined") {
      const initKlleonChat = async () => {
        const { KlleonChat } = window;
        KlleonChat.onStatusEvent((data) => {
          console.log(data, "status data");
        });
        KlleonChat.onChatEvent((data) => {
          console.log(data.chat_type, "data~~");
        });

        await KlleonChat.init({
          sdk_key: "APP-lmscq5QSyxhaKmB8SWUu",
          avatar_id: "179c4107-4442-11ef-8ee1-0abbf354c5cc",
          mode: "dev",
        });
      };
      initKlleonChat();
    }

    return () => {
      if (window.KlleonChat) {
        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 (
    <div className="flex flex-col gap-y-6">
      <div className="flex h-[800px]">
        <div className="flex-1">
          <avatar-container
            ref={avatarRef}
            style={{
              background: "red",
              borderRadius: "30px",
            }}
          />
        </div>
        <div className="flex-1">
          <chat-container ref={chatRef} class="rounded-3xl" />
        </div>
      </div>
      <div className="flex gap-6">
        <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>
  );
};

export default SdkPage;

PreviousReact Next로그 시스템

Last updated 4 months ago

// layout.tsx export default function Layout({ children }: { children: ReactNode }) { return ( <html lang="en"> <head> <meta charSet="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script defer src="https://web.sdk.klleon.io/1.0.0/klleon-chat.umd.js" /> </head> <body style={{ margin: 0 }}>{children}</body> </html> ); }

// page.tsx "use client"; interface AvatarProps { videoStyle?: CSSProperties; } interface ChatProps { delay?: number; type?: "voice" | "text"; isShowCount?: boolean; } const SdkPage = () => { const { sdkHandler } = useSdk(); const avatarRef = useRef<HTMLElement & AvatarProps>(null); const chatRef = useRef<HTMLElement & ChatProps>(null); useEffect(() => { if (avatarRef.current) { avatarRef.current.videoStyle = { borderRadius: "30px", objectFit: "contain", }; } if (chatRef.current) { chatRef.current.delay = 10; chatRef.current.type = "voice"; chatRef.current.isShowCount = true; } if (typeof window !== "undefined") { const initKlleonChat = async () => { const { KlleonChat } = window; KlleonChat.onStatusEvent((data) => { console.log(data, "status data"); }); KlleonChat.onChatEvent((data) => { console.log(data.chat_type, "data~~"); }); await KlleonChat.init({ sdk_key: "APP-lmscq5QSyxhaKmB8SWUu", avatar_id: "179c4107-4442-11ef-8ee1-0abbf354c5cc", mode: "dev", }); }; initKlleonChat(); } return () => { if (window.KlleonChat) { 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 ( <div className="flex flex-col gap-y-6"> <div className="flex h-[800px]"> <div className="flex-1"> <avatar-container ref={avatarRef} style={{ background: "red", borderRadius: "30px", }} /> </div> <div className="flex-1"> <chat-container ref={chatRef} class="rounded-3xl" /> </div> </div> <div className="flex gap-6"> <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> ); }; export default SdkPage;