Tracking: Potential rollback from popup-based thread display to blog article components

[coderabbitai]

Context

This issue tracks the potential rollback from the popup-based thread display implementation to the previous thread blog article components and logic.

Background

PR #500 introduced significant changes to thread display:

• Replaced BrowseThreadBlog with UserThreadList in popup style
• Changed from inline thread display to popup-based thread list
• Updated thread fetching logic with conditional authentication
• Wrapped thread list component in React Suspense

Current Decision

Product design decisions favor going full with pop-ups in the web app for thread display.

Rationale for Tracking

While the current popup approach is the chosen direction, this issue serves as a reference point in case we decide to revert to a different user experience closer to the thread blog article components and logic in the future.

Components/Files Affected

• apps/masterbots.ai/app/u/[userSlug]/t/[category]/[domain]/[chatbot]/[threadSlug]/page.tsx
• apps/masterbots.ai/app/b/[botSlug]/[threadSlug]/page.tsx
• Related thread display and fetching logic

References

• Original PR: Use pop-up on profile & bot page for thread display(both on page reload) #500
• Request comment: Use pop-up on profile & bot page for thread display(both on page reload) #500 (comment)

Action Items

• Monitor user feedback on popup-based thread display
• Evaluate user experience metrics
• Document rollback strategy if needed
• Preserve knowledge of previous blog article implementation

[AndlerRL]

@coderabbitai now thinking and reading about this... we should have also the following pages to track, since they share same logic as the thread pop-up but on these ones it would scroll to the question in the pathname (verify other pages with similar logic in "c" or "(browse)" directories:

• apps/masterbots.ai/app/u/[userSlug]/t/[category]/[domain]/[chatbot]/[threadSlug]/[threadQuestionSlug]/page.tsx
• apps/masterbots.ai/app/b/[botSlug]/[threadSlug]/[threadQuestionSlug]/page.tsx

Aren't they currently with the new changes applied with PR #500 ?

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

@AndlerRL I'll help you verify if these pages have the same logic and PR #500 changes applied. Let me examine the files and search for similar patterns.

---

🏁 Script executed:

#!/bin/bash
# First, let's check the mentioned page files
echo "=== Checking the mentioned page files ==="
find . -path "*/u/[userSlug]/t/[category]/[domain]/[chatbot]/[threadSlug]/[threadQuestionSlug]/page.tsx" -type f 2>/dev/null || echo "First file not found with exact path, searching more broadly..."

find . -name "page.tsx" | grep -E "(u|b)/.*threadSlug.*threadQuestionSlug" | head -10

echo -e "\n=== Searching for pages in 'c' or '(browse)' directories ==="
find . -name "page.tsx" | grep -E "(^./[^/]*c/|/c/|\(browse\))" | head -10

echo -e "\n=== Looking for all page.tsx files with threadSlug pattern ==="
find . -name "page.tsx" | grep threadSlug | head -10

Length of output: 2347

---

🏁 Script executed:

#!/bin/bash
# Let's check recent commits and PR #500 to understand what changes were made
echo "=== Checking recent git history for PR #500 related changes ==="
git log --oneline --grep="500" -10

echo -e "\n=== Checking for commits mentioning thread or popup ==="
git log --oneline --grep="thread\|popup" -10

echo -e "\n=== Checking recent changes to page.tsx files ==="
git log --oneline --since="1 month ago" -- "*/page.tsx" | head -15

Length of output: 378

---

Perfect! I found the files you mentioned and also discovered additional similar pages in the "c" and "(browse)" directories. Let me examine their contents to compare the logic and check for consistency.

---

🏁 Script executed:

#!/bin/bash
# Let's examine the content of the main files mentioned by the user
echo "=== Content of u/[userSlug]/t/.../[threadQuestionSlug]/page.tsx ==="
cat "./apps/masterbots.ai/app/u/[userSlug]/t/[category]/[domain]/[chatbot]/[threadSlug]/[threadQuestionSlug]/page.tsx"

echo -e "\n=== Content of b/[botSlug]/[threadSlug]/[threadQuestionSlug]/page.tsx ==="
cat "./apps/masterbots.ai/app/b/[botSlug]/[threadSlug]/[threadQuestionSlug]/page.tsx"

Length of output: 4060

---

🏁 Script executed:

#!/bin/bash
# Now let's check the similar files in c and (browse) directories
echo "=== Content of c/[category]/.../[threadQuestionSlug]/page.tsx ==="
cat "./apps/masterbots.ai/app/c/[category]/[domain]/[chatbot]/[threadSlug]/[threadQuestionSlug]/page.tsx"

echo -e "\n=== Content of (browse)/[category]/.../[threadQuestionSlug]/page.tsx ==="
cat "./apps/masterbots.ai/app/(browse)/[category]/[domain]/[chatbot]/[threadSlug]/[threadQuestionSlug]/page.tsx"

Length of output: 3736

---

Now let me check what the actual thread components do to understand if they handle the scrolling logic that was mentioned in the issue:

Based on my analysis, here's what I found:

Current Status of the Pages

✅ Files confirmed to exist:

• apps/masterbots.ai/app/u/[userSlug]/t/[category]/[domain]/[chatbot]/[threadSlug]/[threadQuestionSlug]/page.tsx
• apps/masterbots.ai/app/b/[botSlug]/[threadSlug]/[threadQuestionSlug]/page.tsx

✅ Additional similar pages in "c" and "(browse)" directories:

• apps/masterbots.ai/app/c/[category]/[domain]/[chatbot]/[threadSlug]/[threadQuestionSlug]/page.tsx
• apps/masterbots.ai/app/(browse)/[category]/[domain]/[chatbot]/[threadSlug]/[threadQuestionSlug]/page.tsx

Logic Analysis

Pages that share similar thread display logic:

1. u/ page: Uses BrowseThreadBlog component
2. b/ page: Uses BrowseThread component

Both of these pages:

• Fetch thread data using getThread()
• Handle error cases with ErrorComponent
• Pass thread data to browse components

Pages with different logic:

1. c/ page: Uses ChatChatbot + ThreadPanel (chat interface logic)
2. (browse)/ page: Uses BrowseList (thread listing logic, not individual thread display)

Key Finding

Looking at the code, I don't see any scroll-to-question logic implemented in any of these pages currently. They all just render their respective components without handling the threadQuestionSlug parameter for scrolling purposes.

The u/ and b/ pages should indeed have the same scrolling logic applied since they share the same purpose of displaying individual threads, just like the thread pop-up mentioned in issue #503.

The c/ and (browse)/ pages serve different purposes (chat interface and thread listing respectively), so they may not need the same scrolling logic.

To fully verify if PR #500 changes are applied, I'd need to see what specific changes were made in that PR. Would you like me to help implement the missing scroll-to-question logic for the u/ and b/ pages?

---

🏁 Script executed:

#!/bin/bash
# Let's examine the components used in these pages to understand the logic
echo "=== Checking BrowseThreadBlog component ==="
find . -name "*.tsx" -exec grep -l "BrowseThreadBlog" {} \; | head -3 | xargs cat

echo -e "\n=== Checking BrowseThread component ==="
find . -name "*.tsx" -exec grep -l "BrowseThread" {} \; | head -3 | xargs cat

Length of output: 15784

---

🏁 Script executed:

#!/bin/bash
# Let's also check if there are any scrolling-related functions or logic
echo "=== Searching for scroll-related logic in the codebase ==="
rg -i "scroll.*question|question.*scroll" --type tsx --type ts -A 3 -B 3

echo -e "\n=== Searching for threadQuestionSlug usage ==="
rg "threadQuestionSlug" --type tsx --type ts -A 2 -B 2

Length of output: 421

---

Let me fix the search and look for the actual components and scroll logic:

Based on my comprehensive analysis, here's what I found:

Summary of Findings

@AndlerRL You're absolutely right! I found the exact pages you mentioned, and here's the current status:

✅ Pages Found with [threadQuestionSlug] Routes:

Main pages you mentioned:

• u/[userSlug]/t/[category]/[domain]/[chatbot]/[threadSlug]/[threadQuestionSlug]/page.tsx ✅
• b/[botSlug]/[threadSlug]/[threadQuestionSlug]/page.tsx ✅

Additional similar pages in "c" and "(browse)" directories:

• c/[category]/[domain]/[chatbot]/[threadSlug]/[threadQuestionSlug]/page.tsx ✅
• (browse)/[category]/[domain]/[chatbot]/[threadSlug]/[threadQuestionSlug]/page.tsx ✅

❌ Missing Scroll Logic

Critical Issue: None of these pages currently implement the scroll-to-question functionality, even though they all have the threadQuestionSlug parameter available in their routes.

Pages that SHOULD have scroll logic (same as thread pop-up):

• ✅ u/.../[threadQuestionSlug]/page.tsx - Uses BrowseThreadBlog
• ✅ b/.../[threadQuestionSlug]/page.tsx - Uses BrowseThread

Pages with different purposes:

• c/.../[threadQuestionSlug]/page.tsx - Chat interface (ThreadPanel + ChatChatbot)
• (browse)/.../[threadQuestionSlug]/page.tsx - Thread listing (BrowseList)

🔧 Recommendation

The u/ and b/ pages should definitely have the same scroll-to-question logic applied since they share the same purpose as the thread pop-up from issue #503. Currently, they're just ignoring the threadQuestionSlug parameter.

Would you like me to help implement the missing scroll-to-question logic for these pages to make them consistent with the thread pop-up functionality?

---

🏁 Script executed:

#!/bin/bash
# Let's search with correct file extensions
echo "=== Searching for scroll-related logic ==="
rg -i "scroll.*question|question.*scroll" -g "*.ts" -g "*.tsx" -A 3 -B 3

echo -e "\n=== Searching for threadQuestionSlug usage ==="
rg "threadQuestionSlug" -g "*.ts" -g "*.tsx" -A 2 -B 2

echo -e "\n=== Looking for the actual BrowseThread component file ==="
find . -name "browse-thread.tsx" -o -name "browse-thread-blog.tsx" | xargs cat

Length of output: 26053

---

🏁 Script executed:

#!/bin/bash
# Let's check what PR #500 might have changed by looking at recent commits
echo "=== Looking for recent commits that might be PR #500 ==="
git log --oneline --since="2 weeks ago" | head -20

echo -e "\n=== Checking for any scrolling-related changes ==="
git log --oneline --since="1 month ago" --grep="scroll\|question\|popup\|thread" | head -10

echo -e "\n=== Looking for any tracking or scroll functionality ==="
rg -i "track|scroll.*to|scrollto|scroll.*position" -g "*.tsx" -g "*.ts" -A 2 -B 2 | head -20

Length of output: 1589

---

Perfect! Now I have the complete picture. The search results reveal some very important findings:

🎯 MAJOR DISCOVERY: Scroll Logic Already Exists!

Looking at the search results, I found that scroll-to-question logic is already implemented in these components:

1. browse-chat-message-list.tsx - Has scroll logic ✅
2. message-pair-accordion.tsx - Has scroll logic ✅

Both use this pattern:

useEffect(() => {
    if (!params.threadQuestionSlug) return
    
    const $questionElement = document.getElementById(
        params.threadQuestionSlug as string,
    )
    
    $questionElement.scrollIntoView({
        behavior: 'smooth',
        block: scrollBehavior,
        inline: 'center',
    })
}, [params.threadQuestionSlug])

✅ Current Status Analysis:

b/[botSlug]/[threadSlug]/[threadQuestionSlug]/page.tsx:

• Uses BrowseThread → BrowseChatMessages → BrowseChatMessageList
• ✅ SHOULD HAVE scroll logic working (via BrowseChatMessageList)

u/[userSlug]/t/.../[threadQuestionSlug]/page.tsx:

• Uses BrowseThreadBlog directly
• ❌ MISSING scroll logic (BrowseThreadBlog doesn't have scroll functionality)

🔧 The Real Issue:

The u/ page is using BrowseThreadBlog instead of the full message list component that contains the scroll logic. The BrowseThreadBlog component just renders messages as a blog format without any scroll-to-question functionality.

Recommendation: The u/ page should either:

1. Use the same components as b/ page (BrowseThread → BrowseChatMessages), OR
2. Add scroll logic directly to BrowseThreadBlog

So to answer your original question: The b/ page should already have PR #500 logic applied, but the u/ page is missing it!

Would you like me to help implement the missing scroll logic for the u/ page to make it consistent?

[AndlerRL]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain
Perfect! Now I have the complete picture. The search results reveal some very important findings:

🎯 MAJOR DISCOVERY: Scroll Logic Already Exists!

Looking at the search results, I found that scroll-to-question logic is already implemented in these components:

1. browse-chat-message-list.tsx - Has scroll logic ✅
2. message-pair-accordion.tsx - Has scroll logic ✅

Both use this pattern:

useEffect(() => {
if (!params.threadQuestionSlug) return

const $questionElement = document.getElementById(
    params.threadQuestionSlug as string,
)

$questionElement.scrollIntoView({
    behavior: 'smooth',
    block: scrollBehavior,
    inline: 'center',
})

}, [params.threadQuestionSlug])

✅ Current Status Analysis:

b/[botSlug]/[threadSlug]/[threadQuestionSlug]/page.tsx:

• Uses BrowseThread → BrowseChatMessages → BrowseChatMessageList
• ✅ SHOULD HAVE scroll logic working (via BrowseChatMessageList)

u/[userSlug]/t/.../[threadQuestionSlug]/page.tsx:

• Uses BrowseThreadBlog directly
• ❌ MISSING scroll logic (BrowseThreadBlog doesn't have scroll functionality)

🔧 The Real Issue:

The u/ page is using BrowseThreadBlog instead of the full message list component that contains the scroll logic. The BrowseThreadBlog component just renders messages as a blog format without any scroll-to-question functionality.

Recommendation: The u/ page should either:

1. Use the same components as b/ page (BrowseThread → BrowseChatMessages), OR
2. Add scroll logic directly to BrowseThreadBlog

So to answer your original question: The b/ page should already have PR #500 logic applied, but the u/ page is missing it!

Would you like me to help implement the missing scroll logic for the u/ page to make it consistent?

@sheriffjimoh I think we missed the [threadQuestionSlug] pages 🙃 can you please make a new PR with the same changes? The components within the ThreadList components would do the same as you did on the [threadSlug] pages.