first mvp shown to louis

mediar-ai · Jan 29, 2025 · 79e94cf · 79e94cf
1 parent 096533b
commit 79e94cf
Show file tree

Hide file tree

Showing 6 changed files with 591 additions and 92 deletions.
diff --git a/pipes/meeting/src/app/layout.tsx b/pipes/meeting/src/app/layout.tsx
@@ -1,62 +1,37 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-import { Toaster } from "@/components/ui/toaster";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { LiveTranscription } from "@/components/live-transcription";
-import { MeetingHistory } from "@/components/meeting-history";
+import type { Metadata } from "next"
+import { Geist, Geist_Mono } from "next/font/google"
+import "./globals.css"
+import { Toaster } from "@/components/ui/toaster"
+import { TabsWrapper } from "@/components/tabs-wrapper"
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
-});
+})
 
 const geistMono = Geist_Mono({
   variable: "--font-geist-mono",
   subsets: ["latin"],
-});
+})
 
 export const metadata: Metadata = {
   title: "Meeting • Screenpipe",
   description: "The AI notepad for people in back-to-back meetings",
-};
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased h-screen`}
-      >
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased h-screen`}>
         <main className="h-full p-4">
-          <Tabs defaultValue="live" className="h-full flex flex-col">
-            <TabsList className="grid w-full grid-cols-2 p-1 bg-gray-100">
-              <TabsTrigger 
-                value="live" 
-                className="data-[state=active]:bg-black data-[state=active]:text-white"
-              >
-                live transcription
-              </TabsTrigger>
-              <TabsTrigger 
-                value="history"
-                className="data-[state=active]:bg-black data-[state=active]:text-white"
-              >
-                meeting history
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent value="live" className="flex-1 mt-4">
-              <LiveTranscription />
-            </TabsContent>
-            <TabsContent value="history" className="flex-1 mt-4">
-              <MeetingHistory />
-            </TabsContent>
-          </Tabs>
+          <TabsWrapper />
         </main>
         <Toaster />
       </body>
     </html>
-  );
+  )
 }
diff --git a/pipes/meeting/src/components/live-transcription/hooks/use-auto-scroll.ts b/pipes/meeting/src/components/live-transcription/hooks/use-auto-scroll.ts
@@ -4,6 +4,7 @@ import { TranscriptionChunk } from '../types'
 export function useAutoScroll(chunks: TranscriptionChunk[]) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const [shouldAutoScroll, setShouldAutoScroll] = useState(true)
+  const lastStateRef = useRef(true)
 
   const scrollToBottom = () => {
     const element = scrollRef.current
@@ -18,11 +19,6 @@ export function useAutoScroll(chunks: TranscriptionChunk[]) {
         top: element.scrollHeight,
         behavior: 'smooth'
       })
-    //   console.log('scrolled to bottom:', {
-    //     scrollHeight: element.scrollHeight,
-    //     clientHeight: element.clientHeight,
-    //     scrollTop: element.scrollTop
-    //   })
     })
   }
 
@@ -34,26 +30,20 @@ export function useAutoScroll(chunks: TranscriptionChunk[]) {
     const isAtBottom = 
       Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 50
 
-    // console.log('scroll event:', {
-    //   isAtBottom,
-    //   scrollHeight: element.scrollHeight,
-    //   clientHeight: element.clientHeight,
-    //   scrollTop: element.scrollTop
-    // })
+    if (isAtBottom !== lastStateRef.current) {
+      console.log('auto-scroll:', isAtBottom ? 'enabled' : 'disabled')
+      lastStateRef.current = isAtBottom
+    }
 
     setShouldAutoScroll(isAtBottom)
   }
 
   // Auto-scroll when new chunks arrive
   useEffect(() => {
-    if (!shouldAutoScroll) {
-      console.log('auto-scroll disabled')
-      return
+    if (shouldAutoScroll) {
+      scrollToBottom()
     }
-
-    // console.log('new chunks arrived, scrolling to bottom')
-    scrollToBottom()
   }, [chunks, shouldAutoScroll])
 
-  return { scrollRef, onScroll }
+  return { scrollRef, onScroll, isScrolledToBottom: shouldAutoScroll }
 }