Initial commit from agent-native create
This commit is contained in:
agent-native
@@ -0,0 +1,505 @@
|
||||
import {
|
||||
navigateWithAgentChatViewTransition,
|
||||
useChatThreads,
|
||||
type ChatThreadSummary,
|
||||
} from "@agent-native/core/client/agent-chat";
|
||||
import { appPath } from "@agent-native/core/client/api-path";
|
||||
import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
|
||||
import { openCommandMenu } from "@agent-native/core/client/navigation";
|
||||
import { OrgSwitcher } from "@agent-native/core/client/org";
|
||||
import { FeedbackButton } from "@agent-native/core/client/ui";
|
||||
import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
|
||||
import {
|
||||
ChatHistoryRail,
|
||||
type ChatHistoryItem,
|
||||
} from "@agent-native/toolkit/chat-history";
|
||||
import {
|
||||
IconLayoutSidebarLeftCollapse,
|
||||
IconLayoutSidebarLeftExpand,
|
||||
IconMessageCircle,
|
||||
IconSearch,
|
||||
IconSettings,
|
||||
} from "@tabler/icons-react";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { Link, useLocation, useNavigate } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { APP_TITLE } from "@/lib/app-config";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
icon: IconMessageCircle,
|
||||
labelKey: "navigation.chat",
|
||||
href: "/",
|
||||
view: "chat",
|
||||
},
|
||||
];
|
||||
|
||||
const bottomNavItems = [
|
||||
{
|
||||
icon: IconSettings,
|
||||
labelKey: "navigation.settings",
|
||||
href: "/settings",
|
||||
view: "settings",
|
||||
},
|
||||
];
|
||||
|
||||
const CHAT_STORAGE_KEY = "chat";
|
||||
const CHAT_ACTIVE_THREAD_KEY = `agent-chat-active-thread:${CHAT_STORAGE_KEY}`;
|
||||
|
||||
interface SidebarProps {
|
||||
collapsed?: boolean;
|
||||
collapsible?: boolean;
|
||||
onCollapsedChange?: (collapsed: boolean) => void;
|
||||
}
|
||||
|
||||
function formatThreadAge(updatedAt: number) {
|
||||
const diffMs = Math.max(0, Date.now() - updatedAt);
|
||||
const minutes = Math.floor(diffMs / 60_000);
|
||||
if (minutes < 1) return "now";
|
||||
if (minutes < 60) return `${minutes}m`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h`;
|
||||
const days = Math.floor(hours / 24);
|
||||
if (days < 7) return `${days}d`;
|
||||
return new Date(updatedAt).toLocaleDateString([], {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
function threadTitle(thread: ChatThreadSummary) {
|
||||
return thread.title || thread.preview || "Untitled chat";
|
||||
}
|
||||
|
||||
function threadUpdatedAt(thread: ChatThreadSummary) {
|
||||
return Number.isFinite(thread.updatedAt)
|
||||
? thread.updatedAt
|
||||
: Number.isFinite(thread.createdAt)
|
||||
? thread.createdAt
|
||||
: 0;
|
||||
}
|
||||
|
||||
function compareThreads(a: ChatThreadSummary, b: ChatThreadSummary) {
|
||||
const aPinned = a.pinnedAt ?? 0;
|
||||
const bPinned = b.pinnedAt ?? 0;
|
||||
if (aPinned || bPinned) return bPinned - aPinned;
|
||||
return threadUpdatedAt(b) - threadUpdatedAt(a);
|
||||
}
|
||||
|
||||
function persistedActiveThreadId() {
|
||||
try {
|
||||
return localStorage.getItem(CHAT_ACTIVE_THREAD_KEY);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function persistActiveThreadId(threadId: string) {
|
||||
try {
|
||||
localStorage.setItem(CHAT_ACTIVE_THREAD_KEY, threadId);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function threadIdFromPath(pathname: string) {
|
||||
const match = pathname.match(/^\/chat\/([^/]+)/);
|
||||
if (!match) return null;
|
||||
try {
|
||||
const value = decodeURIComponent(match[1]).trim();
|
||||
return value || null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function chatThreadPath(threadId: string) {
|
||||
return `/chat/${encodeURIComponent(threadId)}`;
|
||||
}
|
||||
|
||||
function ChatThreadsSection({ open }: { open: boolean }) {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const t = useT();
|
||||
const {
|
||||
threads,
|
||||
activeThreadId,
|
||||
createThread,
|
||||
switchThread,
|
||||
pinThread,
|
||||
archiveThread,
|
||||
renameThread,
|
||||
refreshThreads,
|
||||
} = useChatThreads(undefined, CHAT_STORAGE_KEY, undefined, {
|
||||
autoCreate: false,
|
||||
restoreActiveThread: false,
|
||||
});
|
||||
|
||||
const visibleThreads = useMemo(
|
||||
() =>
|
||||
threads
|
||||
.filter((thread) => thread.messageCount > 0 && !thread.archivedAt)
|
||||
.sort(compareThreads)
|
||||
.slice(0, 15),
|
||||
[threads],
|
||||
);
|
||||
const displayedActiveThreadId =
|
||||
threadIdFromPath(location.pathname) ??
|
||||
(location.pathname === "/" ? null : activeThreadId);
|
||||
const chatItems = useMemo<ChatHistoryItem[]>(
|
||||
() =>
|
||||
visibleThreads.map((thread) => ({
|
||||
id: thread.id,
|
||||
title: threadTitle(thread),
|
||||
titleText: threadTitle(thread),
|
||||
timestamp:
|
||||
thread.id === displayedActiveThreadId
|
||||
? undefined
|
||||
: formatThreadAge(threadUpdatedAt(thread)),
|
||||
pinned: Boolean(thread.pinnedAt),
|
||||
})),
|
||||
[displayedActiveThreadId, visibleThreads],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const refresh = () => refreshThreads();
|
||||
const handleRunning = (event: Event) => {
|
||||
const detail = (event as CustomEvent).detail as
|
||||
| { isRunning?: unknown }
|
||||
| undefined;
|
||||
if (typeof detail?.isRunning === "boolean") refreshThreads();
|
||||
};
|
||||
|
||||
window.addEventListener("agent-chat:threads-updated", refresh);
|
||||
window.addEventListener("agentNative.chatRunning", handleRunning);
|
||||
window.addEventListener("focus", refresh);
|
||||
return () => {
|
||||
window.removeEventListener("agent-chat:threads-updated", refresh);
|
||||
window.removeEventListener("agentNative.chatRunning", handleRunning);
|
||||
window.removeEventListener("focus", refresh);
|
||||
};
|
||||
}, [refreshThreads]);
|
||||
|
||||
function openThread(threadId: string, options?: { isNew?: boolean }) {
|
||||
switchThread(threadId);
|
||||
persistActiveThreadId(threadId);
|
||||
navigateWithAgentChatViewTransition(
|
||||
navigate,
|
||||
options?.isNew ? "/" : chatThreadPath(threadId),
|
||||
);
|
||||
window.requestAnimationFrame(() => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("agent-chat:open-thread", {
|
||||
detail: { threadId, newThread: options?.isNew === true },
|
||||
}),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
async function handleNewChat() {
|
||||
const threadId = await createThread();
|
||||
if (threadId) openThread(threadId, { isNew: true });
|
||||
}
|
||||
|
||||
async function handleArchiveThread(threadId: string) {
|
||||
const wasActive =
|
||||
threadId === activeThreadId || threadId === persistedActiveThreadId();
|
||||
const archived = await archiveThread(threadId);
|
||||
if (!archived) {
|
||||
toast.error(t("chat.archiveFailed"));
|
||||
return;
|
||||
}
|
||||
if (wasActive) {
|
||||
await handleNewChat();
|
||||
}
|
||||
}
|
||||
|
||||
function handleRenameThread(threadId: string, title: string) {
|
||||
void renameThread(threadId, title).then((renamed) => {
|
||||
if (!renamed) toast.error(t("chat.renameFailed"));
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="an-chat-history-rail__collapse"
|
||||
data-state={open ? "open" : "closed"}
|
||||
aria-hidden={!open}
|
||||
>
|
||||
<div className="ms-4">
|
||||
<ChatHistoryRail
|
||||
items={chatItems}
|
||||
activeId={displayedActiveThreadId}
|
||||
onSelect={(threadId) => openThread(threadId)}
|
||||
onNewChat={() => void handleNewChat()}
|
||||
railLabels={{
|
||||
newChat: t("chat.newChat"),
|
||||
showMore: t("chat.chats"),
|
||||
showLess: t("chat.chats"),
|
||||
}}
|
||||
renameMaxLength={160}
|
||||
onTogglePin={(threadId) => {
|
||||
const thread = visibleThreads.find((item) => item.id === threadId);
|
||||
if (thread) void pinThread(threadId, !thread.pinnedAt);
|
||||
}}
|
||||
onRename={handleRenameThread}
|
||||
onDelete={(threadId) => void handleArchiveThread(threadId)}
|
||||
labels={{
|
||||
options: (item) =>
|
||||
t("chat.optionsFor", { title: item.titleText ?? "" }),
|
||||
renameInput: (item) =>
|
||||
t("chat.renameThread", { title: item.titleText ?? "" }),
|
||||
rename: t("chat.renameChat"),
|
||||
pin: t("chat.pinChat"),
|
||||
unpin: t("chat.unpinChat"),
|
||||
delete: t("chat.archiveChat"),
|
||||
}}
|
||||
className="min-w-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Sidebar({
|
||||
collapsed = false,
|
||||
collapsible = true,
|
||||
onCollapsedChange,
|
||||
}: SidebarProps) {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const t = useT();
|
||||
const isChatRoute =
|
||||
location.pathname === "/" || location.pathname.startsWith("/chat/");
|
||||
const ToggleIcon = collapsed
|
||||
? IconLayoutSidebarLeftExpand
|
||||
: IconLayoutSidebarLeftCollapse;
|
||||
const navClass = ({ isActive }: { isActive: boolean }) =>
|
||||
cn(
|
||||
"flex items-center text-sm transition-colors",
|
||||
collapsed
|
||||
? "relative h-10 w-full justify-center rounded-none px-0"
|
||||
: "h-9 rounded-md gap-3 px-3",
|
||||
isActive
|
||||
? collapsed
|
||||
? "bg-sidebar-accent text-sidebar-accent-foreground"
|
||||
: "bg-sidebar-accent text-sidebar-accent-foreground"
|
||||
: collapsed
|
||||
? "text-sidebar-foreground/70 hover:bg-sidebar-accent/55 hover:text-sidebar-accent-foreground"
|
||||
: "text-sidebar-foreground hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground",
|
||||
);
|
||||
const collapseButton = collapsible ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onCollapsedChange?.(!collapsed)}
|
||||
className={cn(
|
||||
"flex shrink-0 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
collapsed ? "size-8" : "size-7",
|
||||
)}
|
||||
aria-label={
|
||||
collapsed
|
||||
? t("navigation.expandSidebar")
|
||||
: t("navigation.collapseSidebar")
|
||||
}
|
||||
>
|
||||
<ToggleIcon className="size-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
{collapsed
|
||||
? t("navigation.expandSidebar")
|
||||
: t("navigation.collapseSidebar")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : null;
|
||||
const searchButton = (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openCommandMenu}
|
||||
aria-label={t("root.commandSearch")}
|
||||
className="flex size-8 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<IconSearch className="size-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">{t("root.commandSearch")}</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
const translateButton = (
|
||||
<LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
|
||||
);
|
||||
const feedbackButton = (
|
||||
<FeedbackButton
|
||||
variant={collapsed ? "icon" : "sidebar"}
|
||||
side="right"
|
||||
className={collapsed ? "h-8 w-8" : "min-w-0"}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<aside
|
||||
data-collapsed={collapsed ? "true" : "false"}
|
||||
className={cn(
|
||||
"flex h-full min-w-0 shrink-0 flex-col overflow-hidden border-e border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out",
|
||||
collapsed ? "w-12" : "w-60",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex shrink-0 items-center border-b border-sidebar-border",
|
||||
collapsed ? "h-12 justify-center px-0" : "h-14 px-3",
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
to="/"
|
||||
className={cn(
|
||||
"flex min-w-0 items-center rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
collapsed ? "size-7 justify-center" : "flex-1 gap-3",
|
||||
)}
|
||||
aria-label={collapsed ? APP_TITLE : undefined}
|
||||
>
|
||||
<img
|
||||
src={appPath("/agent-native-icon-light.svg")}
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="block h-4 w-auto shrink-0 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src={appPath("/agent-native-icon-dark.svg")}
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="hidden h-4 w-auto shrink-0 dark:block"
|
||||
/>
|
||||
<div className={cn("min-w-0", collapsed && "sr-only")}>
|
||||
<p className="truncate text-sm font-semibold text-sidebar-accent-foreground">
|
||||
{APP_TITLE}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
className={cn(
|
||||
"flex-1 overflow-y-auto",
|
||||
collapsed ? "px-0 py-2" : "px-2 py-3",
|
||||
)}
|
||||
>
|
||||
<div className={cn("grid", collapsed ? "gap-0" : "gap-1")}>
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive =
|
||||
item.href === "/"
|
||||
? isChatRoute
|
||||
: location.pathname.startsWith(item.href);
|
||||
const link = (
|
||||
<Link
|
||||
to={item.href}
|
||||
onClick={(event) => {
|
||||
if (
|
||||
item.href === "/" &&
|
||||
!isChatRoute &&
|
||||
!event.metaKey &&
|
||||
!event.ctrlKey &&
|
||||
!event.shiftKey &&
|
||||
!event.altKey
|
||||
) {
|
||||
event.preventDefault();
|
||||
navigateWithAgentChatViewTransition(navigate, "/");
|
||||
}
|
||||
}}
|
||||
className={navClass({ isActive })}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
aria-label={collapsed ? t(item.labelKey) : undefined}
|
||||
>
|
||||
<Icon className="size-4 shrink-0" />
|
||||
<span className={collapsed ? "sr-only" : "truncate"}>
|
||||
{t(item.labelKey)}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
return (
|
||||
<div key={item.href}>
|
||||
{collapsed ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{link}</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
{t(item.labelKey)}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
link
|
||||
)}
|
||||
{!collapsed && item.view === "chat" ? (
|
||||
<ChatThreadsSection open={isChatRoute} />
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className={cn("mt-auto shrink-0", collapsed && "py-2")}>
|
||||
<nav
|
||||
className={cn(
|
||||
"grid",
|
||||
collapsed ? "gap-0 px-1 py-1" : "gap-1 px-2 py-1",
|
||||
)}
|
||||
>
|
||||
{bottomNavItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = location.pathname.startsWith(item.href);
|
||||
const link = (
|
||||
<Link
|
||||
to={item.href}
|
||||
className={navClass({ isActive })}
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
aria-label={collapsed ? t(item.labelKey) : undefined}
|
||||
>
|
||||
<Icon className="size-4 shrink-0" />
|
||||
<span className={collapsed ? "sr-only" : "truncate"}>
|
||||
{t(item.labelKey)}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
return collapsed ? (
|
||||
<Tooltip key={item.href}>
|
||||
<TooltipTrigger asChild>{link}</TooltipTrigger>
|
||||
<TooltipContent side="right">{t(item.labelKey)}</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<div key={item.href}>{link}</div>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className={cn(collapsed ? "px-1 py-1" : "px-3 py-2")}>
|
||||
<OrgSwitcher
|
||||
reserveSpace
|
||||
className={
|
||||
collapsed
|
||||
? "h-8 justify-center px-0 [&>span]:sr-only [&>svg:last-child]:hidden"
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SidebarFooterActions
|
||||
collapsed={collapsed}
|
||||
feedback={feedbackButton}
|
||||
translate={translateButton}
|
||||
search={searchButton}
|
||||
collapse={collapseButton}
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user