refactor(components): render Chat inside App

index.html

@@ -21,7 +21,7 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <main
       class="mx-auto h-fit h-screen w-full max-w-screen-xl place-content-center sm:w-96"
-      id="root"
+      id="app"
     ></main>
     <script type="module" src="/src/main.tsx"></script>
   </body>

src/components/App.tsx

@@ -0,0 +1,9 @@
+import Chat from './Chat';
+
+export default function App() {
+  return (
+    <section class="flex h-screen flex-col rounded-xl bg-white sm:h-[70vh] sm:border sm:shadow">
+      <Chat />
+    </section>
+  );
+}

src/components/Chat.tsx

@@ -38,7 +38,7 @@ export default function Chat() {
   });
 
   return (
-    <section class="flex h-screen flex-col rounded-xl bg-white sm:h-[70vh] sm:border sm:shadow">
+    <>
       <Header />
       <ChatError error={error} reload={reload} />
       <Messages messages={messages} />
@@ -48,6 +48,6 @@ export default function Chat() {
         onSubmit={handleSubmit}
         value={input}
       />
-    </section>
+    </>
   );
 }

src/main.tsx

@@ -2,6 +2,6 @@ import './index.css';
 
 import { render } from 'preact';
 
-import Chat from './components/Chat';
+import App from './components/App';
 
-render(<Chat />, document.getElementById('root')!);
+render(<App />, document.getElementById('app')!);