From 41677918ec37038b1f333ca7b5e43bcab38ff4e2 Mon Sep 17 00:00:00 2001
From: ghaniiii <aghani0348@gmail.com>
Date: Mon, 22 Jun 2026 22:22:15 +0500
Subject: [PATCH 1/2] Fix: Chat scroll and navigation layout - smart
 auto-scroll, hide footer on chat pages

---
 CLAUDE.md                           | 53 +++++++++++++++++++++++++++++
 app/[locale]/chat/page.tsx          | 32 ++++++++++++++---
 app/chat/page.tsx                   | 32 ++++++++++++++---
 app/layout.tsx                      |  5 ++-
 components/floating-chat-bubble.tsx | 35 ++++++++++++++++---
 components/layout-content.tsx       | 24 +++++++++++++
 6 files changed, 165 insertions(+), 16 deletions(-)
 create mode 100644 components/layout-content.tsx

diff --git a/CLAUDE.md b/CLAUDE.md
index 0c5d472..4fdda1c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -353,6 +353,59 @@ These client components wrap server components to trigger GA events on mount.
 
 **Documentation**: See `docs/google-analytics-integration.md` for comprehensive setup details, metric recommendations, and troubleshooting.
 
+## Bug Fixes & Improvements (June 2026)
+
+### 1. Chat Auto-Scroll Fix
+**Issue**: Chat automatically scrolled to bottom on every message, disrupting users reading previous messages.
+
+**Solution**: Implemented smart scroll detection that only auto-scrolls when user is already at the bottom of the chat.
+
+**Files Modified**:
+- `app/[locale]/chat/page.tsx` - Added scroll position tracking with `messagesContainerRef` and `shouldAutoScrollRef`
+- `app/chat/page.tsx` - Same smart scroll implementation
+- `components/floating-chat-bubble.tsx` - Removed duplicate scroll triggers, added smart scroll logic
+
+**How it works**:
+- Tracks distance from bottom: `scrollHeight - (scrollTop + clientHeight)`
+- Only auto-scrolls if within 100px of bottom
+- Preserves user's scroll position when reading previous messages
+- Smooth scrolling when at bottom
+
+**Benefits**:
+- ✅ Users can read previous messages without interruption
+- ✅ Auto-scroll still works when at bottom
+- ✅ Much better mobile experience
+- ✅ No more jumping/jarring scrolls during message streaming
+
+### 2. Duplicate Navigation Bar Fix
+**Issue**: Chat page showed duplicate elements at top and bottom - main navigation bar at top, and footer appearing at bottom below chat area, cluttering the interface.
+
+**Solution**: Created `LayoutContent` component to conditionally hide footer on chat pages while keeping the main navigation. The footer itself already contains only the attribution text (no duplicate nav items), but it appeared as clutter in the chat interface.
+
+**Files Modified**:
+- `app/layout.tsx` - Uses new `LayoutContent` component instead of directly rendering SiteHeader/Footer
+- `components/layout-content.tsx` - New component that conditionally renders navigation based on route
+- `components/footer.tsx` - Already optimized (shows only attribution: "Built with ❤️ by Code For Pakistan")
+
+**How it works**:
+```typescript
+const isChatPage = pathname.includes('/chat')
+
+return (
+  <>
+    <SiteHeader />  // Always shown
+    <div>{children}</div>
+    {!isChatPage && <Footer />}  // Hidden only on chat pages
+  </>
+)
+```
+
+**Benefits**:
+- ✅ Clean chat interface with only top navigation
+- ✅ No unnecessary footer clutter on chat page
+- ✅ Footer attribution still shows on all other pages
+- ✅ Focused, distraction-free chat experience
+
 ## External Services
 
 - **Pehchan**: Pakistan's national digital identity (OAuth provider)
diff --git a/app/[locale]/chat/page.tsx b/app/[locale]/chat/page.tsx
index c187cb2..5a87028 100644
--- a/app/[locale]/chat/page.tsx
+++ b/app/[locale]/chat/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Suspense, useState, useRef, useEffect } from "react"
+import { Suspense, useState, useRef, useEffect, useCallback } from "react"
 import { useSearchParams } from "next/navigation"
 import { useChat } from "ai/react"
 import {
@@ -41,6 +41,8 @@ function ChatContent() {
   const { toast } = useToast()
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+  const shouldAutoScrollRef = useRef(true)
 
   const {
     messages,
@@ -78,11 +80,29 @@ function ChatContent() {
     }
   }, [initialQuery, hasSubmittedInitial, append])
 
-  // Auto-scroll to latest message
+  // Track if user is at bottom of messages
+  const handleScroll = useCallback(() => {
+    if (!messagesContainerRef.current) return
+    
+    const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current
+    const distanceFromBottom = scrollHeight - (scrollTop + clientHeight)
+    
+    // Consider "at bottom" if within 100px threshold
+    shouldAutoScrollRef.current = distanceFromBottom < 100
+  }, [])
+
+  // Auto-scroll only if user is at bottom
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+    if (shouldAutoScrollRef.current && messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
+    }
   }, [messages])
 
+  // Scroll to bottom on initial render
+  useEffect(() => {
+    shouldAutoScrollRef.current = true
+  }, [])
+
   // Focus input on mount
   useEffect(() => {
     if (!initialQuery) {
@@ -152,7 +172,11 @@ function ChatContent() {
       </div>
 
       {/* Messages Area */}
-      <div className="flex-1 overflow-y-auto">
+      <div 
+        className="flex-1 overflow-y-auto"
+        ref={messagesContainerRef}
+        onScroll={handleScroll}
+      >
         <div className="container max-w-3xl px-4 py-6">
           <div className="flex flex-col gap-6">
             {messages.map((message) => (
diff --git a/app/chat/page.tsx b/app/chat/page.tsx
index 9cb5546..c1da40d 100644
--- a/app/chat/page.tsx
+++ b/app/chat/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Suspense, useState, useRef, useEffect } from "react"
+import { Suspense, useState, useRef, useEffect, useCallback } from "react"
 import { useSearchParams } from "next/navigation"
 import { useChat } from "ai/react"
 import {
@@ -39,6 +39,8 @@ function ChatContent() {
   const { toast } = useToast()
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+  const shouldAutoScrollRef = useRef(true)
 
   const {
     messages,
@@ -76,11 +78,29 @@ function ChatContent() {
     }
   }, [initialQuery, hasSubmittedInitial, append])
 
-  // Auto-scroll to latest message
+  // Track if user is at bottom of messages
+  const handleScroll = useCallback(() => {
+    if (!messagesContainerRef.current) return
+    
+    const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current
+    const distanceFromBottom = scrollHeight - (scrollTop + clientHeight)
+    
+    // Consider "at bottom" if within 100px threshold
+    shouldAutoScrollRef.current = distanceFromBottom < 100
+  }, [])
+
+  // Auto-scroll only if user is at bottom
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+    if (shouldAutoScrollRef.current && messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
+    }
   }, [messages])
 
+  // Scroll to bottom on initial render
+  useEffect(() => {
+    shouldAutoScrollRef.current = true
+  }, [])
+
   // Focus input on mount
   useEffect(() => {
     if (!initialQuery) {
@@ -151,7 +171,11 @@ function ChatContent() {
       </div>
 
       {/* Messages Area */}
-      <div className="flex-1 overflow-y-auto">
+      <div 
+        className="flex-1 overflow-y-auto"
+        ref={messagesContainerRef}
+        onScroll={handleScroll}
+      >
         <div className="container max-w-3xl px-4 py-6">
           <div className="flex flex-col gap-6">
             {messages.map((message) => (
diff --git a/app/layout.tsx b/app/layout.tsx
index 45e9f69..7e6a6a4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -12,6 +12,7 @@ import { Toaster } from "@/components/ui/toaster"
 import { Analytics } from "@vercel/analytics/react"
 import { GoogleAnalytics } from "@/components/google-analytics"
 import { FloatingChatBubble } from "@/components/floating-chat-bubble"
+import { LayoutContent } from "@/components/layout-content"
 
 export const metadata: Metadata = {
   title: {
@@ -49,9 +50,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         >
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
             <div className="relative flex h-screen flex-col">
-              <SiteHeader />
-              <div className="flex min-h-0 flex-1 overflow-y-auto">{children}</div>
-              <Footer />
+              <LayoutContent>{children}</LayoutContent>
               <Toaster />
               <FloatingChatBubble />
             </div>
diff --git a/components/floating-chat-bubble.tsx b/components/floating-chat-bubble.tsx
index daf50ed..ca8e483 100644
--- a/components/floating-chat-bubble.tsx
+++ b/components/floating-chat-bubble.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useRef, useEffect } from "react"
+import { useState, useRef, useEffect, useCallback } from "react"
 import { usePathname } from "next/navigation"
 import { useChat } from "ai/react"
 import {
@@ -32,6 +32,8 @@ export function FloatingChatBubble() {
   const [isGenerating, setIsGenerating] = useState(false)
   const { toast } = useToast()
   const messagesEndRef = useRef<HTMLDivElement>(null)
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+  const shouldAutoScrollRef = useRef(true)
 
   const {
     messages,
@@ -51,7 +53,7 @@ export function FloatingChatBubble() {
       },
     ],
     onResponse: (response) => {
-      if (response) {
+      if// Don't auto-scroll here; let the useEffect handle it
         setIsGenerating(false)
         messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
       }
@@ -59,11 +61,30 @@ export function FloatingChatBubble() {
     onError: (error) => {
       if (error) setIsGenerating(false)
     },
-  })
+  // Track if user is at bottom of messages
+  const handleScroll = useCallback(() => {
+    if (!messagesContainerRef.current) return
+    
+    const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current
+    const distanceFromBottom = scrollHeight - (scrollTop + clientHeight)
+    
+    // Consider "at bottom" if within 100px threshold
+    shouldAutoScrollRef.current = distanceFromBottom < 100
+  }, [])
 
+  // Auto-scroll only if user is at bottom and chat is open
+  useEffect(() => {
+    if (shouldAutoScrollRef.current && isOpen && messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
+    }
+  }, [messages, isOpen])
+
+  // Scroll to bottom when chat opens
   useEffect(() => {
     if (isOpen) {
-      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+      shouldAutoScrollRef.current = true
+    }
+  }, [dRef.current?.scrollIntoView({ behavior: "smooth" })
     }
   }, [messages, isOpen])
 
@@ -145,7 +166,11 @@ export function FloatingChatBubble() {
           </div>
 
           {/* Messages */}
-          <div className="flex min-h-0 flex-1 flex-col overflow-y-auto p-4">
+          <div 
+            className="flex min-h-0 flex-1 flex-col overflow-y-auto p-4"
+            ref={messagesContainerRef}
+            onScroll={handleScroll}
+          >
             <div className="flex flex-col gap-4">
               {messages.map((message: any) => (
                 <ChatBubble
diff --git a/components/layout-content.tsx b/components/layout-content.tsx
new file mode 100644
index 0000000..37cce72
--- /dev/null
+++ b/components/layout-content.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import { usePathname } from "next/navigation"
+import { SiteHeader } from "@/components/site-header"
+import { Footer } from "@/components/footer"
+
+interface LayoutContentProps {
+  children: React.ReactNode
+}
+
+export function LayoutContent({ children }: LayoutContentProps) {
+  const pathname = usePathname()
+  
+  // Hide footer only on chat pages
+  const isChatPage = pathname.includes('/chat')
+  
+  return (
+    <>
+      <SiteHeader />
+      <div className="flex min-h-0 flex-1 overflow-y-auto">{children}</div>
+      {!isChatPage && <Footer />}
+    </>
+  )
+}

From 1954b69355e75de5c81f4a48eaec1ba601b6943a Mon Sep 17 00:00:00 2001
From: ghaniiii <aghani0348@gmail.com>
Date: Tue, 23 Jun 2026 21:14:44 +0500
Subject: [PATCH 2/2] Fixed Chat Scrolling and Dublicate Nav Bar , Build Issues
 are alos resolved

---
 CLAUDE.md                           | 38 ++++++++++++++----------
 app/[locale]/layout.tsx             | 45 ++++++-----------------------
 app/layout.tsx                      |  2 --
 components/floating-chat-bubble.tsx | 15 ++++------
 components/footer.tsx               |  4 +--
 styles/globals.css                  | 10 +++++++
 6 files changed, 49 insertions(+), 65 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 4fdda1c..e5ae549 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,4 +1,4 @@
-# CLAUDE.md
+# CLAUDE.md
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
@@ -140,9 +140,10 @@ Technology stack:
 - `/admin/dashboard`, `/admin/upload` - Admin interfaces
 
 **Layout** (`app/layout.tsx`):
-- Theme provider (dark mode via next-themes)
-- Site header with navigation (site-header.tsx)
-- Footer, toast notifications, Vercel Analytics, Google Analytics
+- Owns the only document/app shell: `<html>`, `<body>`, theme provider, analytics, toast notifications, and floating chat bubble
+- Renders `LayoutContent`, which owns the site header, scrollable page wrapper, and footer visibility
+- Chat routes hide the footer for a full-screen chat experience
+- Locale routes under `app/[locale]/layout.tsx` are nested providers only; they must not render another `<html>`, `<body>`, header, footer, analytics, or theme provider
 
 **Navigation** (`config/site.ts`): Home, Chat, About, Proceedings, Acts, Constitution
 
@@ -372,20 +373,25 @@ These client components wrap server components to trigger GA events on mount.
 - Smooth scrolling when at bottom
 
 **Benefits**:
-- ✅ Users can read previous messages without interruption
-- ✅ Auto-scroll still works when at bottom
-- ✅ Much better mobile experience
-- ✅ No more jumping/jarring scrolls during message streaming
+- ✅ Users can read previous messages without interruption
+- ✅ Auto-scroll still works when at bottom
+- ✅ Much better mobile experience
+- ✅ No more jumping/jarring scrolls during message streaming
 
 ### 2. Duplicate Navigation Bar Fix
-**Issue**: Chat page showed duplicate elements at top and bottom - main navigation bar at top, and footer appearing at bottom below chat area, cluttering the interface.
+**Issue**: Chat pages showed duplicate page chrome: a main navigation bar at the top and another navigation/footer region lower on the page. On locale routes such as `/en/chat`, the app could feel like two pages were rendered inside one page.
 
-**Solution**: Created `LayoutContent` component to conditionally hide footer on chat pages while keeping the main navigation. The footer itself already contains only the attribution text (no duplicate nav items), but it appeared as clutter in the chat interface.
+**Root cause**: `app/[locale]/layout.tsx` was rendering a second full app shell inside the root shell, including `<html>`, `<body>`, `ThemeProvider`, `SiteHeader`, `Footer`, analytics, toast notifications, and floating chat. React also hit a hydration mismatch because Urdu line-height CSS was rendered as inline `<style>` text inside the locale provider.
+
+**Solution**: Keep the document shell in `app/layout.tsx` only. `app/[locale]/layout.tsx` now provides locale context and locale attributes only. `LayoutContent` handles the single header, scroll wrapper, and footer hiding for all chat routes, including locale routes. Urdu typography rules live in `styles/globals.css` instead of an inline style tag.
 
 **Files Modified**:
 - `app/layout.tsx` - Uses new `LayoutContent` component instead of directly rendering SiteHeader/Footer
+- `app/[locale]/layout.tsx` - Nested locale provider only; no duplicate document/app shell
 - `components/layout-content.tsx` - New component that conditionally renders navigation based on route
-- `components/footer.tsx` - Already optimized (shows only attribution: "Built with ❤️ by Code For Pakistan")
+- `components/footer.tsx` - Hides on any pathname containing `/chat`
+- `components/floating-chat-bubble.tsx` - Fixed malformed smart-scroll code and hides on localized chat routes
+- `styles/globals.css` - Contains Urdu line-height rules to avoid hydration mismatch
 
 **How it works**:
 ```typescript
@@ -395,16 +401,16 @@ return (
   <>
     <SiteHeader />  // Always shown
     <div>{children}</div>
-    {!isChatPage && <Footer />}  // Hidden only on chat pages
+    {!isChatPage && <Footer />}  // Hidden on /chat, /en/chat, /ur/chat, etc.
   </>
 )
 ```
 
 **Benefits**:
-- ✅ Clean chat interface with only top navigation
-- ✅ No unnecessary footer clutter on chat page
-- ✅ Footer attribution still shows on all other pages
-- ✅ Focused, distraction-free chat experience
+- Clean chat interface with only one top navigation
+- No duplicate footer/navigation region on localized routes
+- No nested `<html>`/`<body>` or duplicate providers
+- No inline Urdu style hydration mismatch
 
 ## External Services
 
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 14e32e3..e62204a 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -1,20 +1,11 @@
-import "@/styles/globals.css"
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
 import { NextIntlClientProvider } from "next-intl"
 import { getMessages, getTranslations } from "next-intl/server"
 
 import { routing, Locale } from "@/i18n/routing"
-import { fontSans, fontUrdu } from "@/lib/fonts"
+import { fontUrdu } from "@/lib/fonts"
 import { cn } from "@/lib/utils"
-import { SiteHeader } from "@/components/site-header"
-import { TailwindIndicator } from "@/components/tailwind-indicator"
-import { ThemeProvider } from "@/components/theme-provider"
-import { Footer } from "@/components/footer"
-import { Toaster } from "@/components/ui/toaster"
-import { Analytics } from "@vercel/analytics/react"
-import { GoogleAnalytics } from "@/components/google-analytics"
-import { FloatingChatBubble } from "@/components/floating-chat-bubble"
 
 export async function generateMetadata({
   params: { locale },
@@ -67,37 +58,19 @@ export default async function LocaleLayout({ children, params: { locale } }: Loc
   const dir = isUrdu ? "rtl" : "ltr"
 
   return (
-    <html lang={locale} dir={dir} suppressHydrationWarning>
-      <head>
-        <GoogleAnalytics />
-      </head>
-      <body
+    <NextIntlClientProvider locale={locale} messages={messages}>
+      <div
+        lang={locale}
+        dir={dir}
         className={cn(
-          "min-h-screen bg-background antialiased",
+          "flex min-h-0 flex-1 flex-col",
           isUrdu ? "font-urdu" : "font-sans",
-          fontSans.variable,
           fontUrdu.variable,
           isUrdu && "leading-relaxed"
         )}
       >
-        <style>{`
-          [lang="ur"] { line-height: 2; }
-          [lang="ur"] h1, [lang="ur"] h2, [lang="ur"] h3 { line-height: 1.6; }
-        `}</style>
-        <NextIntlClientProvider locale={locale} messages={messages}>
-          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            <div className="relative flex h-screen flex-col">
-              <SiteHeader />
-              <div className="flex min-h-0 flex-1 overflow-y-auto">{children}</div>
-              <Footer />
-              <Toaster />
-              <FloatingChatBubble />
-            </div>
-            <TailwindIndicator />
-          </ThemeProvider>
-        </NextIntlClientProvider>
-        <Analytics />
-      </body>
-    </html>
+        {children}
+      </div>
+    </NextIntlClientProvider>
   )
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 7e6a6a4..83467c0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,10 +4,8 @@ import { Metadata } from "next"
 import { siteConfig } from "@/config/site"
 import { fontSans } from "@/lib/fonts"
 import { cn } from "@/lib/utils"
-import { SiteHeader } from "@/components/site-header"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
 import { ThemeProvider } from "@/components/theme-provider"
-import { Footer } from "@/components/footer"
 import { Toaster } from "@/components/ui/toaster"
 import { Analytics } from "@vercel/analytics/react"
 import { GoogleAnalytics } from "@/components/google-analytics"
diff --git a/components/floating-chat-bubble.tsx b/components/floating-chat-bubble.tsx
index ca8e483..687793f 100644
--- a/components/floating-chat-bubble.tsx
+++ b/components/floating-chat-bubble.tsx
@@ -52,15 +52,14 @@ export function FloatingChatBubble() {
           "Hello! I am Numainda, your guide to Pakistan's constitutional and electoral information. How may I assist you today?",
       },
     ],
-    onResponse: (response) => {
-      if// Don't auto-scroll here; let the useEffect handle it
-        setIsGenerating(false)
-        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
-      }
+    onResponse: () => {
+      setIsGenerating(false)
     },
     onError: (error) => {
       if (error) setIsGenerating(false)
     },
+  })
+
   // Track if user is at bottom of messages
   const handleScroll = useCallback(() => {
     if (!messagesContainerRef.current) return
@@ -84,12 +83,10 @@ export function FloatingChatBubble() {
     if (isOpen) {
       shouldAutoScrollRef.current = true
     }
-  }, [dRef.current?.scrollIntoView({ behavior: "smooth" })
-    }
-  }, [messages, isOpen])
+  }, [isOpen])
 
   // Hide on homepage and chat page (they have their own chat UI)
-  if (pathname === "/" || pathname === "/chat") {
+  if (pathname === "/" || pathname.includes("/chat")) {
     return null
   }
 
diff --git a/components/footer.tsx b/components/footer.tsx
index c952b68..f9988dc 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -8,8 +8,8 @@ import { cn } from "@/lib/utils"
 export function Footer({ className }: { className?: string }) {
   const pathname = usePathname()
 
-  // Hide footer on the chat page (full-screen chat experience)
-  if (pathname === "/chat") {
+  // Hide footer on chat pages (full-screen chat experience)
+  if (pathname.includes("/chat")) {
     return null
   }
 
diff --git a/styles/globals.css b/styles/globals.css
index 428d374..710cf96 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -71,4 +71,14 @@
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
   }
+
+  [lang="ur"] {
+    line-height: 2;
+  }
+
+  [lang="ur"] h1,
+  [lang="ur"] h2,
+  [lang="ur"] h3 {
+    line-height: 1.6;
+  }
 }