|
|
import Workspace from "@/models/workspace"; |
|
|
import paths from "@/utils/paths"; |
|
|
import showToast from "@/utils/toast"; |
|
|
import { |
|
|
ArrowCounterClockwise, |
|
|
DotsThree, |
|
|
PencilSimple, |
|
|
Trash, |
|
|
X, |
|
|
} from "@phosphor-icons/react"; |
|
|
import { useEffect, useRef, useState } from "react"; |
|
|
import { useParams } from "react-router-dom"; |
|
|
|
|
|
const THREAD_CALLOUT_DETAIL_WIDTH = 26; |
|
|
export default function ThreadItem({ |
|
|
idx, |
|
|
activeIdx, |
|
|
isActive, |
|
|
workspace, |
|
|
thread, |
|
|
onRemove, |
|
|
toggleMarkForDeletion, |
|
|
hasNext, |
|
|
ctrlPressed = false, |
|
|
}) { |
|
|
const { slug, threadSlug = null } = useParams(); |
|
|
const optionsContainer = useRef(null); |
|
|
const [showOptions, setShowOptions] = useState(false); |
|
|
const linkTo = !thread.slug |
|
|
? paths.workspace.chat(slug) |
|
|
: paths.workspace.thread(slug, thread.slug); |
|
|
|
|
|
return ( |
|
|
<div |
|
|
className="w-full relative flex h-[38px] items-center border-none rounded-lg" |
|
|
role="listitem" |
|
|
> |
|
|
{/* Curved line Element and leader if required */} |
|
|
<div |
|
|
style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }} |
|
|
className={`${ |
|
|
isActive |
|
|
? "border-l-2 border-b-2 border-white light:border-theme-sidebar-border z-[2]" |
|
|
: "border-l border-b border-[#6F6F71] light:border-theme-sidebar-border z-[1]" |
|
|
} h-[50%] absolute top-0 left-3 rounded-bl-lg`} |
|
|
></div> |
|
|
{/* Downstroke border for next item */} |
|
|
{hasNext && ( |
|
|
<div |
|
|
style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }} |
|
|
className={`${ |
|
|
idx <= activeIdx && !isActive |
|
|
? "border-l-2 border-white light:border-theme-sidebar-border z-[2]" |
|
|
: "border-l border-[#6F6F71] light:border-theme-sidebar-border z-[1]" |
|
|
} h-[100%] absolute top-0 left-3`} |
|
|
></div> |
|
|
)} |
|
|
|
|
|
{/* Curved line inline placeholder for spacing - not visible */} |
|
|
<div |
|
|
style={{ width: THREAD_CALLOUT_DETAIL_WIDTH + 8 }} |
|
|
className="h-full" |
|
|
/> |
|
|
<div |
|
|
className={`flex w-full items-center justify-between pr-2 group relative ${isActive ? "bg-[var(--theme-sidebar-thread-selected)] border border-solid border-transparent light:border-blue-400" : "hover:bg-theme-sidebar-subitem-hover"} rounded-[4px]`} |
|
|
> |
|
|
{thread.deleted ? ( |
|
|
<div className="w-full flex justify-between"> |
|
|
<div className="w-full pl-2 py-1"> |
|
|
<p |
|
|
className={`text-left text-sm text-slate-400/50 light:text-slate-500 italic`} |
|
|
> |
|
|
deleted thread |
|
|
</p> |
|
|
</div> |
|
|
{ctrlPressed && ( |
|
|
<button |
|
|
type="button" |
|
|
className="border-none" |
|
|
onClick={() => toggleMarkForDeletion(thread.id)} |
|
|
> |
|
|
<ArrowCounterClockwise |
|
|
className="text-zinc-300 hover:text-white light:text-theme-text-secondary hover:light:text-theme-text-primary" |
|
|
size={18} |
|
|
/> |
|
|
</button> |
|
|
)} |
|
|
</div> |
|
|
) : ( |
|
|
<a |
|
|
href={ |
|
|
window.location.pathname === linkTo || ctrlPressed ? "#" : linkTo |
|
|
} |
|
|
className="w-full pl-2 py-1 overflow-hidden" |
|
|
aria-current={isActive ? "page" : ""} |
|
|
> |
|
|
<p |
|
|
className={`text-left text-sm truncate max-w-[150px] ${ |
|
|
isActive ? "font-medium text-white" : "text-theme-text-primary" |
|
|
}`} |
|
|
> |
|
|
{thread.name} |
|
|
</p> |
|
|
</a> |
|
|
)} |
|
|
{!!thread.slug && !thread.deleted && ( |
|
|
<div ref={optionsContainer} className="flex items-center"> |
|
|
{" "} |
|
|
{/* Added flex and items-center */} |
|
|
{ctrlPressed ? ( |
|
|
<button |
|
|
type="button" |
|
|
className="border-none" |
|
|
onClick={() => toggleMarkForDeletion(thread.id)} |
|
|
> |
|
|
<X |
|
|
className="text-zinc-300 light:text-theme-text-secondary hover:text-white hover:light:text-theme-text-primary" |
|
|
weight="bold" |
|
|
size={18} |
|
|
/> |
|
|
</button> |
|
|
) : ( |
|
|
<div className="flex items-center w-fit group-hover:visible md:invisible gap-x-1"> |
|
|
<button |
|
|
type="button" |
|
|
className="border-none" |
|
|
onClick={() => setShowOptions(!showOptions)} |
|
|
aria-label="Thread options" |
|
|
> |
|
|
<DotsThree |
|
|
className="text-slate-300 light:text-theme-text-secondary hover:text-white hover:light:text-theme-text-primary" |
|
|
size={25} |
|
|
/> |
|
|
</button> |
|
|
</div> |
|
|
)} |
|
|
{showOptions && ( |
|
|
<OptionsMenu |
|
|
containerRef={optionsContainer} |
|
|
workspace={workspace} |
|
|
thread={thread} |
|
|
onRemove={onRemove} |
|
|
close={() => setShowOptions(false)} |
|
|
currentThreadSlug={threadSlug} |
|
|
/> |
|
|
)} |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
function OptionsMenu({ |
|
|
containerRef, |
|
|
workspace, |
|
|
thread, |
|
|
onRemove, |
|
|
close, |
|
|
currentThreadSlug, |
|
|
}) { |
|
|
const menuRef = useRef(null); |
|
|
|
|
|
|
|
|
const outsideClick = (e) => { |
|
|
if (!menuRef.current) return false; |
|
|
if ( |
|
|
!menuRef.current?.contains(e.target) && |
|
|
!containerRef.current?.contains(e.target) |
|
|
) |
|
|
close(); |
|
|
return false; |
|
|
}; |
|
|
|
|
|
const isEsc = (e) => { |
|
|
if (e.key === "Escape" || e.key === "Esc") close(); |
|
|
}; |
|
|
|
|
|
function cleanupListeners() { |
|
|
window.removeEventListener("click", outsideClick); |
|
|
window.removeEventListener("keyup", isEsc); |
|
|
} |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
function setListeners() { |
|
|
if (!menuRef?.current || !containerRef.current) return false; |
|
|
window.document.addEventListener("click", outsideClick); |
|
|
window.document.addEventListener("keyup", isEsc); |
|
|
} |
|
|
|
|
|
setListeners(); |
|
|
return cleanupListeners; |
|
|
}, [menuRef.current, containerRef.current]); |
|
|
|
|
|
const renameThread = async () => { |
|
|
const name = window |
|
|
.prompt("What would you like to rename this thread to?") |
|
|
?.trim(); |
|
|
if (!name || name.length === 0) { |
|
|
close(); |
|
|
return; |
|
|
} |
|
|
|
|
|
const { message } = await Workspace.threads.update( |
|
|
workspace.slug, |
|
|
thread.slug, |
|
|
{ name } |
|
|
); |
|
|
if (!!message) { |
|
|
showToast(`Thread could not be updated! ${message}`, "error", { |
|
|
clear: true, |
|
|
}); |
|
|
close(); |
|
|
return; |
|
|
} |
|
|
|
|
|
thread.name = name; |
|
|
close(); |
|
|
}; |
|
|
|
|
|
const handleDelete = async () => { |
|
|
if ( |
|
|
!window.confirm( |
|
|
"Are you sure you want to delete this thread? All of its chats will be deleted. You cannot undo this." |
|
|
) |
|
|
) |
|
|
return; |
|
|
const success = await Workspace.threads.delete(workspace.slug, thread.slug); |
|
|
if (!success) { |
|
|
showToast("Thread could not be deleted!", "error", { clear: true }); |
|
|
return; |
|
|
} |
|
|
if (success) { |
|
|
showToast("Thread deleted successfully!", "success", { clear: true }); |
|
|
onRemove(thread.id); |
|
|
|
|
|
if (currentThreadSlug === thread.slug) { |
|
|
window.location.href = paths.workspace.chat(workspace.slug); |
|
|
} |
|
|
return; |
|
|
} |
|
|
}; |
|
|
|
|
|
return ( |
|
|
<div |
|
|
ref={menuRef} |
|
|
className="absolute w-fit z-[20] top-[25px] right-[10px] bg-zinc-900 light:bg-theme-bg-sidebar light:border-[1px] light:border-theme-sidebar-border rounded-lg p-1" |
|
|
> |
|
|
<button |
|
|
onClick={renameThread} |
|
|
type="button" |
|
|
className="w-full rounded-md flex items-center p-2 gap-x-2 hover:bg-slate-500/20 text-slate-300 light:text-theme-text-primary" |
|
|
> |
|
|
<PencilSimple size={18} /> |
|
|
<p className="text-sm">Rename</p> |
|
|
</button> |
|
|
<button |
|
|
onClick={handleDelete} |
|
|
type="button" |
|
|
className="w-full rounded-md flex items-center p-2 gap-x-2 hover:bg-red-500/20 text-slate-300 light:text-theme-text-primary hover:text-red-100" |
|
|
> |
|
|
<Trash size={18} /> |
|
|
<p className="text-sm">Delete Thread</p> |
|
|
</button> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
