wip(react): fix react wrapper

examples/react-example/moon.yml

@@ -14,5 +14,5 @@ fileGroups:
 
 tasks:
   dev:
-    command: 'vite'
+    command: 'vite --host'
     local: true

examples/react-example/src/App.css

@@ -1,42 +1,6 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
+  width: 100vw;
+  height: 100svh;
+  position: fixed;
+  top: 0;
 }

examples/react-example/src/App.tsx

@@ -1,24 +1,11 @@
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
 
 import {ChatUi} from '@chatkitty/react'
 
 function App() {
   return (
     <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <ChatUi/>
-      </div>
+        <ChatUi apiKey="afaac908-1db3-4b5c-a7ae-c040b9684403" username="2989c53a-d0c5-4222-af8d-fbf7b0c74ec6" widgetId="UWiEkKvdAaUJ1xut"/>
     </>
   )
 }

examples/vue-2/src/App.vue

@@ -109,7 +109,7 @@ export default {
 .container {
   display: flex;
   flex-direction: column;
-  height: 100vh; /* Assuming you want to take the full viewport height */
+  height: 100svh; /* Assuming you want to take the full viewport height */
 }
 
 .header {

libraries/react/src/components/ChatUi.tsx

@@ -1,12 +1,12 @@
 import { useEffect } from "react";
 import { connectApi, loadChatUi } from "chatkitty";
 
-export const ChatUi = () => {
+export const ChatUi = ({apiKey, username, widgetId}: {apiKey: string, username: string, widgetId: string}) => {
     useEffect(() => {
         const initializeChat = async () => {
             const connection = await connectApi({
-                apiKey: "afaac908-1db3-4b5c-a7ae-c040b9684403",
-                username: "2989c53a-d0c5-4222-af8d-fbf7b0c74ec6"
+                apiKey: apiKey,
+                username: username
             });
 
             const { user, unreadChannelsCount, notifications, updateUser } = connection;
@@ -18,7 +18,7 @@ export const ChatUi = () => {
 
             loadChatUi(
                 {
-                    widgetId: "UWiEkKvdAaUJ1xut",
+                    widgetId: widgetId,
                     container: { height: "100%" },
                     audio: { enabled: true },
                     components: {
@@ -46,11 +46,6 @@ export const ChatUi = () => {
     }, []);
 
     return (
-        <div className="flex flex-col h-screen">
-            <div className="flex justify-center h-[125px] sm:hidden">
-                <img src="./assets/logo.png" alt="Example App Logo" width="125" height="125" />
-            </div>
-            <div className="flex-1 min-h-0" id="chat-ui"></div>
-        </div>
+        <div id="chat-ui"></div>
     );
 };