55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { useThreads } from "@/hooks/useThreads";
|
||
|
|
import { Thread } from "@langchain/langgraph-sdk";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { getContentString } from "../utils";
|
||
|
|
import { useQueryParam, StringParam } from "use-query-params";
|
||
|
|
|
||
|
|
export default function ThreadHistory() {
|
||
|
|
const [threads, setThreads] = useState<Thread[]>([]);
|
||
|
|
const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
|
||
|
|
const { getThreads } = useThreads();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
getThreads().then(setThreads).catch(console.error);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="flex flex-col border-r-[1px] border-slate-300 items-start justify-start gap-6 h-screen w-[300px] shrink-0 px-2 py-4 shadow-inner-right">
|
||
|
|
<h1 className="text-2xl font-medium pl-4">Thread History</h1>
|
||
|
|
<div className="h-full overflow-y-scroll flex flex-col gap-2 items-start justify-start [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
|
||
|
|
{threads.map((t) => {
|
||
|
|
let itemText = t.thread_id;
|
||
|
|
if (
|
||
|
|
typeof t.values === "object" &&
|
||
|
|
t.values &&
|
||
|
|
"messages" in t.values &&
|
||
|
|
Array.isArray(t.values.messages) &&
|
||
|
|
t.values.messages?.length > 0
|
||
|
|
) {
|
||
|
|
const firstMessage = t.values.messages[0];
|
||
|
|
itemText = getContentString(firstMessage.content);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div key={t.thread_id} className="w-full">
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
className="truncate text-left items-start justify-start w-[264px]"
|
||
|
|
onClick={(e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (t.thread_id === threadId) return;
|
||
|
|
setThreadId(t.thread_id);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{itemText}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|