kexsh/agent-chat-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile support

Browse Source
This commit is contained in:
bracesproul
2025-03-04 11:01:19 -08:00
parent 4ad6addbc9
commit c1a492cb7f
2 changed files with 98 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/thread/history/index.tsx
View File

@@ -3,11 +3,65 @@ 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";
import { useQueryParam, StringParam, BooleanParam } from "use-query-params";
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet";
function ThreadList({
threads,
onThreadClick,
}: {
threads: Thread[];
onThreadClick?: (threadId: string) => void;
}) {
const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
return (
<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();
onThreadClick?.(t.thread_id);
if (t.thread_id === threadId) return;
setThreadId(t.thread_id);
}}
>
{itemText}
</Button>
</div>
);
})}
</div>
);
}
export default function ThreadHistory() {
const [threads, setThreads] = useState<Thread[]>([]);
const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
const [chatHistoryOpen, setChatHistoryOpen] = useQueryParam(
"chatHistoryOpen",
BooleanParam,
);
const { getThreads } = useThreads();
useEffect(() => {
@@ -16,39 +70,21 @@ export default function ThreadHistory() {
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">
<div className="hidden lg: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>
<ThreadList threads={threads} />
</div>
<Sheet open={!!chatHistoryOpen} onOpenChange={setChatHistoryOpen}>
<SheetContent side="left" className="lg:hidden flex">
<SheetHeader>
<SheetTitle>Thread History</SheetTitle>
</SheetHeader>
<ThreadList
threads={threads}
onThreadClick={() => setChatHistoryOpen((o) => !o)}
/>
</SheetContent>
</Sheet>
</>
);
}

40
src/components/thread/index.tsx
View File

@@ -14,8 +14,13 @@ import {
} from "@/lib/ensure-tool-responses";
import { LangGraphLogoSVG } from "../icons/langgraph";
import { TooltipIconButton } from "./tooltip-icon-button";
import { ArrowDown, LoaderCircle, SquarePen } from "lucide-react";
import { StringParam, useQueryParam } from "use-query-params";
import {
ArrowDown,
LoaderCircle,
PanelRightOpen,
SquarePen,
} from "lucide-react";
import { BooleanParam, StringParam, useQueryParam } from "use-query-params";
import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
import ThreadHistory from "./history";
@@ -59,6 +64,10 @@ function ScrollToBottom(props: { className?: string }) {
export function Thread() {
const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
const [_, setChatHistoryOpen] = useQueryParam(
"chatHistoryOpen",
BooleanParam,
);
const [input, setInput] = useState("");
const [firstTokenReceived, setFirstTokenReceived] = useState(false);
@@ -133,15 +142,24 @@ export function Thread() {
>
{threadId && (
<div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
<button
className="flex gap-2 items-center cursor-pointer"
onClick={() => setThreadId(null)}
>
<LangGraphLogoSVG width={32} height={32} />
<span className="text-xl font-semibold tracking-tight">
LangGraph Chat
</span>
</button>
<div className="flex gap-2 items-center justify-start">
<button
className="flex gap-2 items-center cursor-pointer"
onClick={() => setThreadId(null)}
>
<LangGraphLogoSVG width={32} height={32} />
<span className="text-xl font-semibold tracking-tight">
LangGraph Chat
</span>
</button>
<Button
className="flex lg:hidden"
variant="ghost"
onClick={() => setChatHistoryOpen((p) => !p)}
>
<PanelRightOpen />
</Button>
</div>
<TooltipIconButton
size="lg"