auto scroll to bottom

Author: lukasIO

app/page.tsx

@@ -52,7 +52,7 @@ export default function Page() {
   return (
     <main data-lk-theme="default" className="h-full grid content-center bg-[var(--lk-bg)]">
       <RoomContext.Provider value={room}>
-        <div className="lk-room-container">
+        <div className="lk-room-container max-h-[90vh]">
           <SimpleVoiceAssistant onConnectButtonClicked={onConnectButtonClicked} />
         </div>
       </RoomContext.Provider>
@@ -77,7 +77,7 @@ function SimpleVoiceAssistant(props: { onConnectButtonClicked: () => void }) {
             Start a conversation
           </motion.button>
         )}
-        <div className="w-3/4 lg:w-1/2 mx-auto">
+        <div className="w-3/4 lg:w-1/2 mx-auto h-full">
           <TranscriptionView />
         </div>
       </AnimatePresence>

components/TranscriptionView.tsx

@@ -1,12 +1,25 @@
 import useCombinedTranscriptions from "@/hooks/useCombinedTranscriptions";
+import * as React from "react";
 
 export default function TranscriptionView() {
   const combinedTranscriptions = useCombinedTranscriptions();
 
+  // scroll to bottom when new transcription is added
+  React.useEffect(() => {
+    const transcription = combinedTranscriptions[combinedTranscriptions.length - 1];
+    if (transcription) {
+      const transcriptionElement = document.getElementById(transcription.id);
+      if (transcriptionElement) {
+        transcriptionElement.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  }, [combinedTranscriptions]);
+
   return (
-    <div className="flex flex-col gap-2 overflow-y-auto">
+    <div className="h-full flex flex-col gap-2 overflow-y-auto">
       {combinedTranscriptions.map((segment) => (
         <div
+          id={segment.id}
           key={segment.id}
           className={
             segment.role === "assistant"