From b29db11903f5a3f04d1423423203779bc7e781ff Mon Sep 17 00:00:00 2001
From: Nathanael Liu <supernathanliu@gmail.com>
Date: Fri, 3 May 2024 20:01:52 +0000
Subject: [PATCH] fix: User View Navigation Regression

---
 apps/masterbots.ai/app/b/[id]/page.tsx        | 20 ++++++----
 apps/masterbots.ai/app/u/[slug]/page.tsx      | 20 ++++++----
 .../components/shared/account-details.tsx     | 19 ++++++---
 .../components/shared/thread-heading.tsx      | 40 +++++++++++--------
 .../shared/thread-list-accordion.tsx          | 20 ++++++++--
 .../components/shared/thread-list.tsx         |  8 +++-
 6 files changed, 84 insertions(+), 43 deletions(-)

diff --git a/apps/masterbots.ai/app/b/[id]/page.tsx b/apps/masterbots.ai/app/b/[id]/page.tsx
index 1c73e7e1..2fc8c4e4 100644
--- a/apps/masterbots.ai/app/b/[id]/page.tsx
+++ b/apps/masterbots.ai/app/b/[id]/page.tsx
@@ -1,9 +1,13 @@
-import { getChatbot, getBrowseThreads, getCategories } from '@/services/hasura'
+import {
+  getChatbot,
+  getBrowseThreads
+  // getCategories
+} from '@/services/hasura'
 import { botNames } from '@/lib/bots-names'
 import { ThreadList } from '@/components/shared/thread-list'
 import AccountDetails from '@/components/shared/account-details'
-import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
-import { SearchInput } from '@/components/shared/search-input'
+// import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
+// import { SearchInput } from '@/components/shared/search-input'
 import { toSlug } from '@/lib/url'
 
 export default async function BotThreadsPage({
@@ -11,7 +15,7 @@ export default async function BotThreadsPage({
 }: {
   params: { id: string }
 }) {
-  const categories = await getCategories()
+  // const categories = await getCategories()
   let chatbot, threads
 
   chatbot = await getChatbot({
@@ -28,9 +32,9 @@ export default async function BotThreadsPage({
 
   console.log(chatbot.categories)
   return (
-    <div className=" container">
-      <CategoryTabs categories={categories} />
-      <SearchInput />
+    <div>
+      {/* <CategoryTabs categories={categories} /> */}
+      {/* <SearchInput /> */}
       <AccountDetails
         alt={chatbot.name}
         avatar={chatbot.avatar}
@@ -41,7 +45,7 @@ export default async function BotThreadsPage({
         category={chatbot.categories[0]?.category.name}
       />
       <div className="container">
-        <ThreadList filter={{ chatbotName }} initialThreads={threads} />
+        <ThreadList isBot filter={{ chatbotName }} initialThreads={threads} />
       </div>
     </div>
   )
diff --git a/apps/masterbots.ai/app/u/[slug]/page.tsx b/apps/masterbots.ai/app/u/[slug]/page.tsx
index 3cd26965..d5e1696e 100644
--- a/apps/masterbots.ai/app/u/[slug]/page.tsx
+++ b/apps/masterbots.ai/app/u/[slug]/page.tsx
@@ -1,19 +1,19 @@
 import {
   getBrowseThreads,
-  getCategories,
+  // getCategories,
   getUserInfoFromBrowse
 } from '@/services/hasura'
 import { ThreadList } from '@/components/shared/thread-list'
 import AccountDetails from '@/components/shared/account-details'
-import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
-import { SearchInput } from '@/components/shared/search-input'
+// import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
+// import { SearchInput } from '@/components/shared/search-input'
 
 export default async function BotThreadsPage({
   params
 }: {
   params: { slug: string }
 }) {
-  const categories = await getCategories()
+  // const categories = await getCategories()
   const user = await getUserInfoFromBrowse(params.slug)
   if (!user) return <div className="m-auto">No user found.</div>
   const threads = await getBrowseThreads({
@@ -21,9 +21,9 @@ export default async function BotThreadsPage({
     limit: 20
   })
   return (
-    <div className="container">
-      <CategoryTabs categories={categories} />
-      <SearchInput />
+    <div>
+      {/* <CategoryTabs categories={categories} />
+      <SearchInput /> */}
       <AccountDetails
         alt={user.username}
         avatar={user.profilePicture || ''}
@@ -32,7 +32,11 @@ export default async function BotThreadsPage({
         username={user.username}
       />
       <div className="container">
-        <ThreadList filter={{ slug: params.slug }} initialThreads={threads} />
+        <ThreadList
+          isUser
+          filter={{ slug: params.slug }}
+          initialThreads={threads}
+        />
       </div>
     </div>
   )
diff --git a/apps/masterbots.ai/components/shared/account-details.tsx b/apps/masterbots.ai/components/shared/account-details.tsx
index f3346a62..4d077572 100644
--- a/apps/masterbots.ai/components/shared/account-details.tsx
+++ b/apps/masterbots.ai/components/shared/account-details.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { Separator } from '../ui/separator'
+import { cn } from '@/lib/utils'
 
 export default function AccountDetails({
   alt,
@@ -17,7 +18,12 @@ export default function AccountDetails({
 
   return (
     <div className="flex bg-cover py-10 bg-gradient-to-l from-mirage via-[#2B5D91] to-[#388DE2]">
-      <div className="dark:bg-[#09090B] bg-white rounded-lg p-6 max-w-[600px] flex flex-column gap-3 relative mx-auto font-mono min-w-[700px] min-h-[300px]">
+      <div
+        className={cn(
+          'dark:bg-[#09090B] bg-white rounded-lg p-6 max-w-[600px] flex flex-column gap-3 relative mx-auto font-mono min-w-[700px]',
+          chatbotName ? 'min-h-[300px]' : ''
+        )}
+      >
         <div className="flex size-24 absolute border-4 border-[#388DE2] right-0 top-0 translate-x-1/4 rounded-full -translate-y-1/4 dark:bg-[#131316] bg-white">
           <Image
             alt={username || chatbotName}
@@ -34,12 +40,13 @@ export default function AccountDetails({
           </div>
           <Separator className="flex dark:bg-mirage bg-gray-300" />
           <div className="flex text-xl font-semibold">{category}</div>
-          <div className="flex text-base grow">
-            <div className="flex font-medium">
-              {description ? <div className="flex">{description}</div> : ''}
+          {description && (
+            <div className="flex text-base grow">
+              <div className="flex font-medium">
+                <div className="flex">{description}</div>
+              </div>
             </div>
-          </div>
-
+          )}
           <div className="flex justify-between">
             <div className="font-light">
               Threads: <span className=" text-[#71717A]">{threadNum ?? 0}</span>
diff --git a/apps/masterbots.ai/components/shared/thread-heading.tsx b/apps/masterbots.ai/components/shared/thread-heading.tsx
index 3fda2a67..780942ac 100644
--- a/apps/masterbots.ai/components/shared/thread-heading.tsx
+++ b/apps/masterbots.ai/components/shared/thread-heading.tsx
@@ -10,7 +10,9 @@ export function ThreadHeading({
   response,
   question,
   copy = false,
-  chat = false
+  chat = false,
+  isUser = false,
+  isBot = false
 }: ThreadHeadingProps) {
   return (
     <div className={cn(`flex flex-col font-medium w-full`)}>
@@ -20,11 +22,13 @@ export function ThreadHeading({
         )}
       >
         <div className="flex grow gap-3">
-          <AccountAvatar
-            alt={thread.chatbot.name}
-            href={`/${chat ? 'c' : 'b'}/${toSlug(thread.chatbot.name)}`}
-            src={thread.chatbot.avatar}
-          />
+          {!isBot && (
+            <AccountAvatar
+              alt={thread.chatbot.name}
+              href={`/${chat ? 'c' : 'b'}/${toSlug(thread.chatbot.name)}`}
+              src={thread.chatbot.avatar}
+            />
+          )}
 
           <div
             className={cn(
@@ -32,16 +36,18 @@ export function ThreadHeading({
             )}
           >
             {question}
-            {chat ? null : (
-              <>
-                <span className="opacity-50 text-[0.875rem]">by</span>
-                <AccountAvatar
-                  alt={thread.user.username}
-                  href={`/u/${thread.user.slug}`}
-                  src={thread.user.profilePicture || ''}
-                />
-              </>
-            )}
+            {chat
+              ? null
+              : !isUser && (
+                  <>
+                    <span className="opacity-50 text-[0.875rem]">by</span>
+                    <AccountAvatar
+                      alt={thread.user.username}
+                      href={`/u/${thread.user.slug}`}
+                      src={thread.user.profilePicture || ''}
+                    />
+                  </>
+                )}
           </div>
         </div>
         {copy ? <Shortlink /> : null}
@@ -62,4 +68,6 @@ interface ThreadHeadingProps {
   question: string
   copy?: boolean
   chat?: boolean
+  isBot?: boolean
+  isUser?: boolean
 }
diff --git a/apps/masterbots.ai/components/shared/thread-list-accordion.tsx b/apps/masterbots.ai/components/shared/thread-list-accordion.tsx
index 575d896f..82d19915 100644
--- a/apps/masterbots.ai/components/shared/thread-list-accordion.tsx
+++ b/apps/masterbots.ai/components/shared/thread-list-accordion.tsx
@@ -16,7 +16,9 @@ import { createMessagePairs } from '@/lib/threads'
 
 export function ThreadListAccordion({
   thread,
-  chat = false
+  chat = false,
+  isUser = false,
+  isBot = false
 }: ThreadListAccordionProps) {
   const [state, setState] = useSetState({
     isOpen: false,
@@ -35,10 +37,16 @@ export function ThreadListAccordion({
       type="multiple"
     >
       {/* Frist level question and excerpt visible  on lists */}
-      <AccordionItem className="border-b-mirage border-solid relative" value="pair-1">
+      <AccordionItem
+        className="border-b-mirage border-solid relative"
+        value="pair-1"
+      >
         <AccordionTrigger
           isSticky
-          className={cn('hover:bg-mirage px-2 border border-[transparent] dark:border-b-mirage border-b-gray-300 rounded-t-lg', state.isOpen && 'bg-mirage')}
+          className={cn(
+            'hover:bg-mirage px-2 border border-[transparent] dark:border-b-mirage border-b-gray-300 rounded-t-lg',
+            state.isOpen && 'bg-mirage'
+          )}
         >
           <ThreadHeading
             chat={chat}
@@ -46,6 +54,8 @@ export function ThreadListAccordion({
             question={state.firstQuestion}
             response={state.isOpen ? '' : state.firstResponse}
             thread={thread}
+            {...(isBot ? { isBot } : {})}
+            {...(isUser ? { isUser } : {})}
           />
         </AccordionTrigger>
 
@@ -60,7 +70,7 @@ export function ThreadListAccordion({
               showHeading={false}
               thread={thread}
               initialMessagePairs={createMessagePairs(thread.messages)}
-              className='border-r-[transparent]'
+              className="border-r-[transparent]"
             />
           </div>
         </AccordionContent>
@@ -72,4 +82,6 @@ export function ThreadListAccordion({
 interface ThreadListAccordionProps extends DialogProps {
   thread: Thread
   chat?: boolean
+  isBot?: boolean
+  isUser?: boolean
 }
diff --git a/apps/masterbots.ai/components/shared/thread-list.tsx b/apps/masterbots.ai/components/shared/thread-list.tsx
index 7c724da3..32baf473 100644
--- a/apps/masterbots.ai/components/shared/thread-list.tsx
+++ b/apps/masterbots.ai/components/shared/thread-list.tsx
@@ -18,7 +18,9 @@ export function ThreadList({
   initialThreads,
   filter,
   chat = false,
-  dialog = false
+  dialog = false,
+  isUser = false,
+  isBot = false
 }: ThreadListProps) {
   const { query } = useGlobalStore()
   const loadMoreRef = useRef<HTMLDivElement>(null)
@@ -120,6 +122,8 @@ export function ThreadList({
             defaultOpen={false} // we can have one open by default
             key={thread.threadId}
             thread={thread}
+            {...(isBot ? { isBot } : {})}
+            {...(isUser ? { isUser } : {})}
           />
         ))}
       <div ref={loadMoreRef}>
@@ -134,4 +138,6 @@ interface ThreadListProps {
   chat?: boolean
   dialog?: boolean
   filter: GetBrowseThreadsParams
+  isUser?: boolean
+  isBot?: boolean
 }