Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: create social network navigation alike on browse threads #168

Closed
wants to merge 7 commits into from
Closed

feat: create social network navigation alike on browse threads #168

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4e8e8b6
feat: update url when open the thread
TopETH Apr 12, 2024
85161a7
fix: update default screen
TopETH Apr 12, 2024
79b1cf3
fix: toSlug func
TopETH Apr 12, 2024
f216fe3
Merge branch 'alpha' into topeth/create-social-network-navigation-ali…
TopETH Apr 12, 2024
79fcfb9
fix: rollback
TopETH Apr 13, 2024
00ce23a
fix: use toSlug
TopETH Apr 13, 2024
80b226f
temp: commented unnecessary lines
TopETH Apr 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion apps/masterbots.ai/components/layout/user-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
'use client'

import Image from 'next/image'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
Expand All @@ -16,8 +17,16 @@ import { useGlobalStore } from '@/hooks/use-global-store'
export function UserMenu() {
const supabase = useSupabaseClient()
const { user } = useGlobalStore()
const router = useRouter()

const signout = () => supabase.auth.signOut()
const signout = async () => {
const { error } = await supabase.auth.signOut()
if (error) {
console.error('ERROR:', error)
}
router.push('/')
router.refresh()
}
gaboesquivel marked this conversation as resolved.
Show resolved Hide resolved

return (
<div className="flex items-center justify-between">
Expand Down
29 changes: 15 additions & 14 deletions apps/masterbots.ai/components/shared/thread-accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export function ThreadAccordion({
chat = false,
showHeading = true
}: ThreadAccordionProps) {

// initalMessages is coming from server ssr on load. the rest of messages on demand on mount
const { data: pairs, error } = useQuery({
queryKey: [`messages-${thread.threadId}`],
Expand Down Expand Up @@ -58,28 +59,28 @@ export function ThreadAccordion({

return (
<Accordion
className="w-full"
className="w-full flex flex-col gap-3"
defaultValue={['pair-0', 'pair-1', 'pair-2']}
type="multiple"
>
{pairs.map((p, key) => {
return (
<AccordionItem key={key} value={`pair-${key}`}>
{showHeading ? (
<AccordionItem value={`pair-${key}`} key={key}>
{ key ? (
<AccordionTrigger className={cn('bg-mirage')}>
{key ? (
<div className="pl-12">{p.userMessage.content}</div>
) : (
<ThreadHeading
chat={chat}
copy
question={p.userMessage.content}
thread={thread}
/>
)}
</AccordionTrigger>
) : null}
<AccordionContent aria-expanded>
) : showHeading && key === 0 ?
<AccordionTrigger className={cn('bg-mirage')}>
<ThreadHeading
thread={thread}
question={p.userMessage.content}
copy={true}
chat={chat}
/>
</AccordionTrigger>
: null}
<AccordionContent aria-expanded={true}>
<div className="px-7">
{p.chatGptMessage.map((message, index) => (
<BrowseChatMessage
Expand Down
49 changes: 45 additions & 4 deletions apps/masterbots.ai/components/shared/thread-double-accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,69 @@ import {
AccordionItem,
AccordionTrigger
} from '@/components/ui/accordion'
import { ThreadAccordion } from './thread-accordion'
import { useEffect, useRef } from 'react'
import { useThread } from '@/hooks/use-thread'
import { ThreadHeading } from './thread-heading'
import { ThreadAccordion } from './thread-accordion'
import { toSlug } from '@/lib/url'
let initialUrl = null
Comment on lines +13 to +18
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that the newly added imports (useEffect, useRef, useThread) are utilized effectively in the component. The declaration of initialUrl as null is a good practice for initialization, but consider encapsulating this within a useRef for consistency and to avoid potential bugs in future modifications.

- let initialUrl = null
+ const initialUrl = useRef(null)
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
import { useEffect, useRef } from 'react'
import { useThread } from '@/hooks/use-thread'
import { ThreadHeading } from './thread-heading'
import { ThreadAccordion } from './thread-accordion'
import { toSlug } from '@/lib/url'
let initialUrl = null
import { useEffect, useRef } from 'react'
import { useThread } from '@/hooks/use-thread'
import { ThreadHeading } from './thread-heading'
import { ThreadAccordion } from './thread-accordion'
import { toSlug } from '@/lib/url'
const initialUrl = useRef(null)


export function ThreadDoubleAccordion({
thread,
chat = false
}: ThreadDoubleAccordionProps) {
const { activeThread, setActiveThread } = useThread()
const [state, setState] = useSetState({
isOpen: false,
firstQuestion:
thread.messages.find(m => m.role === 'user').content || 'not found',
firstResponse:
thread.messages.find(m => m.role === 'assistant').content || 'not found'
thread.messages.find(m => m.role === 'assistant')?.content || 'not found',
value: []
})

useEffect(() => {
if (initialUrl) return
initialUrl = location.href
Comment on lines +24 to +36
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The state initialization correctly captures the initial state of the accordion based on the thread data. However, the first useEffect block that sets initialUrl could be optimized by checking for initialUrl.current instead of initialUrl if changed to use useRef.

- if (initialUrl) return
- initialUrl = location.href
+ if (initialUrl.current) return
+ initialUrl.current = location.href
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
const { activeThread, setActiveThread } = useThread()
const [state, setState] = useSetState({
isOpen: false,
firstQuestion:
thread.messages.find(m => m.role === 'user').content || 'not found',
firstResponse:
thread.messages.find(m => m.role === 'assistant').content || 'not found'
thread.messages.find(m => m.role === 'assistant')?.content || 'not found',
value: []
})
useEffect(() => {
if (initialUrl) return
initialUrl = location.href
const { activeThread, setActiveThread } = useThread()
const [state, setState] = useSetState({
isOpen: false,
firstQuestion:
thread.messages.find(m => m.role === 'user').content || 'not found',
firstResponse:
thread.messages.find(m => m.role === 'assistant')?.content || 'not found',
value: []
})
useEffect(() => {
if (initialUrl.current) return
initialUrl.current = location.href

})

useEffect(() => {
if (activeThread === thread || !state.isOpen) return
setState({ isOpen: false, value: [] })
}, [activeThread])

useEffect(() => {
if (activeThread !== thread || state.isOpen) return
setState({ isOpen: true, value: [`pair-${thread.threadId}`] })
}, [])
Comment on lines +44 to +47
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The third useEffect hook is intended to open the accordion when the active thread matches the current thread and it is not already open. However, the dependency array is empty, which means this effect will only run once at component mount. Consider adding activeThread and state.isOpen to the dependencies to ensure it reacts to changes.

- }, [])
+ }, [activeThread, state.isOpen])
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
useEffect(() => {
if (activeThread !== thread || state.isOpen) return
setState({ isOpen: true, value: [`pair-${thread.threadId}`] })
}, [])
useEffect(() => {
if (activeThread !== thread || state.isOpen) return
setState({ isOpen: true, value: [`pair-${thread.threadId}`] })
}, [activeThread, state.isOpen])


const toggleAccordion = (v: string[]) => {
TopETH marked this conversation as resolved.
Show resolved Hide resolved
const isOpen = Boolean(v[0] === `pair-${thread.threadId}`)
setState({ isOpen, value: v })
if (isOpen) {
if (!activeThread) initialUrl = location.href
setActiveThread(thread)
const dir = chat
? `/c/${toSlug(thread.chatbot.name)}`
: toSlug(thread.chatbot.categories[0].category.name)
const threadUrl = `/${dir}/${thread.threadId}`
console.log(`Updating URL to ${threadUrl}, initialUrl was ${initialUrl}`)

window.history.pushState({}, '', threadUrl)
} else {
setActiveThread(null)
window.history.pushState({}, '', initialUrl)
}
}

return (
<Accordion
className="w-full"
onValueChange={v => { setState({ isOpen: v[0] === 'pair-1' }); }}
value={state.value}
onValueChange={v => toggleAccordion(v)}
type="multiple"
>
<AccordionItem value="pair-1">
<AccordionItem value={`pair-${thread.threadId}`}>
<AccordionTrigger
className={cn('hover:bg-mirage px-5', state.isOpen && 'bg-mirage')}
>
Expand Down
Loading