mirror of
https://github.com/HKUDS/nanobot.git
synced 2026-08-18 18:16:38 +03:00
refactor(webui): split settings frontend by domain
This commit is contained in:
chengyongru
chengyongru
@@ -0,0 +1,257 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { ChevronLeft, Loader2, Search } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import {
|
||||
channelIsRunning,
|
||||
channelMatchesFilter,
|
||||
channelSearchText,
|
||||
localizedChannelDisplayName,
|
||||
type ChannelFilter,
|
||||
} from "@/components/settings/channels/ChannelIdentity";
|
||||
import { ChannelCatalogRow, ChannelSetupPanel } from "@/components/settings/channels/ChannelSetupPanel";
|
||||
import {
|
||||
DismissibleStatusMessage,
|
||||
RestartRequiredNotice,
|
||||
SETTINGS_SEARCH_INPUT_CLASS,
|
||||
} from "@/components/settings/shared/SettingsControls";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { useMediaQuery } from "@/hooks/useMediaQuery";
|
||||
import type { NanobotFeaturesPayload } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function ChannelsSettings({
|
||||
token,
|
||||
nanobotFeatures,
|
||||
loading,
|
||||
query,
|
||||
actionKey,
|
||||
chatAppsDocsUrl,
|
||||
showBrandLogos,
|
||||
error,
|
||||
requiresRestartPending,
|
||||
onQueryChange,
|
||||
onAction,
|
||||
onFeaturesUpdate,
|
||||
onDismissStatus,
|
||||
onRestart,
|
||||
isRestarting,
|
||||
}: {
|
||||
token: string;
|
||||
nanobotFeatures: NanobotFeaturesPayload | null;
|
||||
loading: boolean;
|
||||
query: string;
|
||||
actionKey: string | null;
|
||||
chatAppsDocsUrl?: string;
|
||||
showBrandLogos: boolean;
|
||||
error: string | null;
|
||||
requiresRestartPending: boolean;
|
||||
onQueryChange: (value: string) => void;
|
||||
onAction: (action: "enable" | "disable", name: string) => void;
|
||||
onFeaturesUpdate: (payload: NanobotFeaturesPayload) => void;
|
||||
onDismissStatus: () => void;
|
||||
onRestart?: () => void;
|
||||
isRestarting?: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const tx = (key: string, fallback: string) => t(key, { defaultValue: fallback });
|
||||
const normalizedQuery = query.trim().toLowerCase();
|
||||
const [filter, setFilter] = useState<ChannelFilter>("all");
|
||||
const splitLayout = useMediaQuery("(min-width: 1280px)");
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const compactDetailTopRef = useRef<HTMLButtonElement>(null);
|
||||
const [compactDetailOpen, setCompactDetailOpen] = useState(false);
|
||||
const allChannels = (nanobotFeatures?.features ?? [])
|
||||
.filter((feature) => feature.type === "channel")
|
||||
.filter((feature) => feature.settings_visible !== false)
|
||||
.filter((feature) => !normalizedQuery || channelSearchText(feature, t).includes(normalizedQuery))
|
||||
.sort((left, right) => {
|
||||
const rank = Number(!left.ready) - Number(!right.ready);
|
||||
return rank || localizedChannelDisplayName(left, t).localeCompare(
|
||||
localizedChannelDisplayName(right, t),
|
||||
);
|
||||
});
|
||||
const channels = allChannels.filter((feature) => channelMatchesFilter(feature, filter));
|
||||
const [selectedChannelName, setSelectedChannelName] = useState<string | null>(null);
|
||||
const selectedChannel =
|
||||
channels.find((feature) => feature.name === selectedChannelName) ?? channels[0] ?? null;
|
||||
const enabledCount = allChannels.filter(channelIsRunning).length;
|
||||
const offCount = Math.max(0, allChannels.length - enabledCount);
|
||||
const filterOptions: Array<{ value: ChannelFilter; label: string; count: number }> = [
|
||||
{ value: "all", label: tx("settings.channels.filterAll", "All"), count: allChannels.length },
|
||||
{ value: "on", label: tx("settings.channels.filterOn", "On"), count: enabledCount },
|
||||
{ value: "off", label: tx("settings.channels.filterOff", "Off"), count: offCount },
|
||||
];
|
||||
const statusMessage = error;
|
||||
const statusIsError = true;
|
||||
|
||||
useEffect(() => {
|
||||
if (!channels.length) {
|
||||
if (selectedChannelName !== null) setSelectedChannelName(null);
|
||||
setCompactDetailOpen(false);
|
||||
return;
|
||||
}
|
||||
if (!selectedChannelName || !channels.some((feature) => feature.name === selectedChannelName)) {
|
||||
setSelectedChannelName(channels[0].name);
|
||||
setCompactDetailOpen(false);
|
||||
}
|
||||
}, [channels, selectedChannelName]);
|
||||
|
||||
useEffect(() => {
|
||||
if (splitLayout) return;
|
||||
const resetScroll = () => {
|
||||
let node = containerRef.current?.parentElement ?? null;
|
||||
while (node) {
|
||||
node.scrollTop = 0;
|
||||
node = node.parentElement;
|
||||
}
|
||||
if (compactDetailOpen) {
|
||||
compactDetailTopRef.current?.scrollIntoView?.({ block: "start" });
|
||||
}
|
||||
};
|
||||
resetScroll();
|
||||
const frame = window.requestAnimationFrame(resetScroll);
|
||||
return () => window.cancelAnimationFrame(frame);
|
||||
}, [compactDetailOpen, selectedChannelName, splitLayout]);
|
||||
|
||||
const openChannel = (name: string) => {
|
||||
setSelectedChannelName(name);
|
||||
if (!splitLayout) setCompactDetailOpen(true);
|
||||
};
|
||||
|
||||
const setupPanel = selectedChannel ? (
|
||||
<ChannelSetupPanel
|
||||
token={token}
|
||||
feature={selectedChannel}
|
||||
actionKey={actionKey}
|
||||
chatAppsDocsUrl={chatAppsDocsUrl}
|
||||
showBrandLogos={showBrandLogos}
|
||||
onAction={onAction}
|
||||
onFeaturesUpdate={onFeaturesUpdate}
|
||||
/>
|
||||
) : null;
|
||||
const showingCompactDetail = !splitLayout && compactDetailOpen && selectedChannel !== null;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="flex min-h-full flex-1 flex-col xl:min-h-0 xl:overflow-hidden"
|
||||
>
|
||||
{!showingCompactDetail ? (
|
||||
<section className="shrink-0 space-y-4">
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-center">
|
||||
<div className="relative min-w-0 flex-1">
|
||||
<Search className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" aria-hidden />
|
||||
<Input
|
||||
value={query}
|
||||
onChange={(event) => onQueryChange(event.target.value)}
|
||||
placeholder={tx("settings.channels.searchPlaceholder", "Search channels")}
|
||||
className={cn(
|
||||
"h-12 rounded-[14px] pl-11 text-[15px]",
|
||||
SETTINGS_SEARCH_INPUT_CLASS,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-wrap gap-1.5 rounded-[14px] bg-muted/55 p-1">
|
||||
{filterOptions.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => setFilter(option.value)}
|
||||
className={cn(
|
||||
"rounded-[11px] px-3 py-1.5 text-[12px] font-medium transition-colors",
|
||||
filter === option.value
|
||||
? "bg-background text-foreground"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
<span className="ml-1 text-[11px] text-muted-foreground">{option.count}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{statusMessage ? (
|
||||
<div className="mt-3 shrink-0">
|
||||
<DismissibleStatusMessage
|
||||
message={statusMessage}
|
||||
isError={statusIsError}
|
||||
onDismiss={onDismissStatus}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{requiresRestartPending ? (
|
||||
<div className="mt-3 shrink-0">
|
||||
<RestartRequiredNotice
|
||||
message={tx("settings.channels.restartRequired", "Restart nanobot to apply updated channel support.")}
|
||||
onRestart={onRestart}
|
||||
isRestarting={isRestarting}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<section
|
||||
className={cn(
|
||||
"flex flex-1 flex-col",
|
||||
showingCompactDetail ? "mt-1" : "mt-5",
|
||||
splitLayout && "min-h-0 overflow-hidden",
|
||||
)}
|
||||
>
|
||||
{loading && !nanobotFeatures ? (
|
||||
<div className="flex h-36 items-center justify-center text-sm text-muted-foreground">
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden />
|
||||
{tx("settings.channels.loading", "Loading Channels...")}
|
||||
</div>
|
||||
) : channels.length ? splitLayout ? (
|
||||
<div className="grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_minmax(400px,460px)] gap-6 overflow-hidden">
|
||||
<div className="min-h-0 space-y-1 overflow-y-auto overscroll-contain pr-1">
|
||||
{channels.map((feature) => (
|
||||
<ChannelCatalogRow
|
||||
key={feature.name}
|
||||
feature={feature}
|
||||
selected={selectedChannel?.name === feature.name}
|
||||
showBrandLogos={showBrandLogos}
|
||||
onSelect={() => openChannel(feature.name)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="min-h-0 overflow-y-auto overscroll-contain pr-1">{setupPanel}</div>
|
||||
</div>
|
||||
) : showingCompactDetail ? (
|
||||
<div className="pb-6">
|
||||
<button
|
||||
ref={compactDetailTopRef}
|
||||
type="button"
|
||||
onClick={() => setCompactDetailOpen(false)}
|
||||
className="mb-4 inline-flex h-9 items-center gap-1.5 rounded-full px-2.5 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" aria-hidden />
|
||||
{tx("settings.channels.backToChannels", "All channels")}
|
||||
</button>
|
||||
{setupPanel}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1 pb-6">
|
||||
{channels.map((feature) => (
|
||||
<ChannelCatalogRow
|
||||
key={feature.name}
|
||||
feature={feature}
|
||||
selected={false}
|
||||
showBrandLogos={showBrandLogos}
|
||||
onSelect={() => openChannel(feature.name)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="min-h-0 flex-1 px-3 py-12 text-center text-sm text-muted-foreground">
|
||||
{tx("settings.channels.empty", "No channels match this filter.")}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user