File size: 3,111 Bytes
a8aec61 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
import { useQueryState } from 'nuqs'
import { SessionEntry } from '@/types/playground'
import { Button } from '../../../ui/button'
import useSessionLoader from '@/hooks/useSessionLoader'
import { deletePlaygroundSessionAPI } from '@/api/playground'
import { usePlaygroundStore } from '@/store'
import { toast } from 'sonner'
import Icon from '@/components/ui/icon'
import { useState } from 'react'
import DeleteSessionModal from './DeleteSessionModal'
import useChatActions from '@/hooks/useChatActions'
import { truncateText, cn } from '@/lib/utils'
type SessionItemProps = SessionEntry & {
isSelected: boolean
onSessionClick: () => void
}
const SessionItem = ({
title,
session_id,
isSelected,
onSessionClick
}: SessionItemProps) => {
const [agentId] = useQueryState('agent')
const { getSession } = useSessionLoader()
const [, setSessionId] = useQueryState('session')
const { selectedEndpoint, sessionsData, setSessionsData } =
usePlaygroundStore()
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
const { clearChat } = useChatActions()
const handleGetSession = async () => {
if (agentId) {
onSessionClick()
await getSession(session_id, agentId)
setSessionId(session_id)
}
}
const handleDeleteSession = async () => {
if (agentId) {
try {
const response = await deletePlaygroundSessionAPI(
selectedEndpoint,
agentId,
session_id
)
if (response.status === 200 && sessionsData) {
setSessionsData(
sessionsData.filter((session) => session.session_id !== session_id)
)
clearChat()
toast.success('Session deleted')
} else {
toast.error('Failed to delete session')
}
} catch {
toast.error('Failed to delete session')
} finally {
setIsDeleteModalOpen(false)
}
}
}
return (
<>
<div
className={cn(
'group flex h-11 w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 transition-colors duration-200',
isSelected
? 'cursor-default bg-primary/10'
: 'bg-background-secondary hover:bg-background-secondary/80'
)}
onClick={handleGetSession}
>
<div className="flex flex-col gap-1">
<h4
className={cn('text-sm font-medium', isSelected && 'text-primary')}
>
{truncateText(title, 20)}
</h4>
</div>
<Button
variant="ghost"
size="icon"
className="transform opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100"
onClick={(e) => {
e.stopPropagation()
setIsDeleteModalOpen(true)
}}
>
<Icon type="trash" size="xs" />
</Button>
</div>
<DeleteSessionModal
isOpen={isDeleteModalOpen}
onClose={() => setIsDeleteModalOpen(false)}
onDelete={handleDeleteSession}
isDeleting={false}
/>
</>
)
}
export default SessionItem
|