mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-10 16:22:38 +02:00
1036 lines
38 KiB
TypeScript
1036 lines
38 KiB
TypeScript
"use client";
|
|
|
|
import { format, subDays, subYears } from "date-fns";
|
|
import { useAtomValue } from "jotai";
|
|
import {
|
|
ArrowLeft,
|
|
Cable,
|
|
Calendar as CalendarIcon,
|
|
Check,
|
|
ChevronRight,
|
|
Loader2,
|
|
Search,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { type FC, useCallback, useEffect, useMemo, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
|
|
import { indexConnectorMutationAtom, updateConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
|
|
import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
|
|
import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
|
|
import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Calendar } from "@/components/ui/calendar";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { EnumConnectorName } from "@/contracts/enums/connector";
|
|
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
|
|
import type { SearchSourceConnector } from "@/contracts/types/connector.types";
|
|
import { useLogsSummary } from "@/hooks/use-logs";
|
|
import { useSearchSourceConnectors } from "@/hooks/use-search-source-connectors";
|
|
import { authenticatedFetch } from "@/lib/auth-utils";
|
|
import { queryClient } from "@/lib/query-client/client";
|
|
import { cacheKeys } from "@/lib/query-client/cache-keys";
|
|
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
// Type for the indexing configuration state
|
|
interface IndexingConfigState {
|
|
connectorType: string;
|
|
connectorId: number;
|
|
connectorTitle: string;
|
|
}
|
|
|
|
// OAuth Connectors (Quick Connect)
|
|
const OAUTH_CONNECTORS = [
|
|
{
|
|
id: "google-gmail-connector",
|
|
title: "Gmail",
|
|
description: "Search through your emails",
|
|
connectorType: EnumConnectorName.GOOGLE_GMAIL_CONNECTOR,
|
|
authEndpoint: "/api/v1/auth/google/gmail/connector/add/",
|
|
},
|
|
{
|
|
id: "google-calendar-connector",
|
|
title: "Google Calendar",
|
|
description: "Search through your events",
|
|
connectorType: EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR,
|
|
authEndpoint: "/api/v1/auth/google/calendar/connector/add/",
|
|
},
|
|
{
|
|
id: "airtable-connector",
|
|
title: "Airtable",
|
|
description: "Search your Airtable bases",
|
|
connectorType: EnumConnectorName.AIRTABLE_CONNECTOR,
|
|
authEndpoint: "/api/v1/auth/airtable/connector/add/",
|
|
},
|
|
];
|
|
|
|
// Non-OAuth Connectors
|
|
const OTHER_CONNECTORS = [
|
|
{
|
|
id: "slack-connector",
|
|
title: "Slack",
|
|
description: "Search Slack messages",
|
|
connectorType: EnumConnectorName.SLACK_CONNECTOR,
|
|
},
|
|
{
|
|
id: "discord-connector",
|
|
title: "Discord",
|
|
description: "Search Discord messages",
|
|
connectorType: EnumConnectorName.DISCORD_CONNECTOR,
|
|
},
|
|
{
|
|
id: "notion-connector",
|
|
title: "Notion",
|
|
description: "Search Notion pages",
|
|
connectorType: EnumConnectorName.NOTION_CONNECTOR,
|
|
},
|
|
{
|
|
id: "confluence-connector",
|
|
title: "Confluence",
|
|
description: "Search documentation",
|
|
connectorType: EnumConnectorName.CONFLUENCE_CONNECTOR,
|
|
},
|
|
{
|
|
id: "bookstack-connector",
|
|
title: "BookStack",
|
|
description: "Search BookStack docs",
|
|
connectorType: EnumConnectorName.BOOKSTACK_CONNECTOR,
|
|
},
|
|
{
|
|
id: "github-connector",
|
|
title: "GitHub",
|
|
description: "Search repositories",
|
|
connectorType: EnumConnectorName.GITHUB_CONNECTOR,
|
|
},
|
|
{
|
|
id: "linear-connector",
|
|
title: "Linear",
|
|
description: "Search issues & projects",
|
|
connectorType: EnumConnectorName.LINEAR_CONNECTOR,
|
|
},
|
|
{
|
|
id: "jira-connector",
|
|
title: "Jira",
|
|
description: "Search Jira issues",
|
|
connectorType: EnumConnectorName.JIRA_CONNECTOR,
|
|
},
|
|
{
|
|
id: "clickup-connector",
|
|
title: "ClickUp",
|
|
description: "Search ClickUp tasks",
|
|
connectorType: EnumConnectorName.CLICKUP_CONNECTOR,
|
|
},
|
|
{
|
|
id: "luma-connector",
|
|
title: "Luma",
|
|
description: "Search Luma events",
|
|
connectorType: EnumConnectorName.LUMA_CONNECTOR,
|
|
},
|
|
{
|
|
id: "elasticsearch-connector",
|
|
title: "Elasticsearch",
|
|
description: "Search ES indexes",
|
|
connectorType: EnumConnectorName.ELASTICSEARCH_CONNECTOR,
|
|
},
|
|
{
|
|
id: "webcrawler-connector",
|
|
title: "Web Pages",
|
|
description: "Crawl web content",
|
|
connectorType: EnumConnectorName.WEBCRAWLER_CONNECTOR,
|
|
},
|
|
{
|
|
id: "tavily-api",
|
|
title: "Tavily AI",
|
|
description: "Search with Tavily",
|
|
connectorType: EnumConnectorName.TAVILY_API,
|
|
},
|
|
{
|
|
id: "searxng",
|
|
title: "SearxNG",
|
|
description: "Search with SearxNG",
|
|
connectorType: EnumConnectorName.SEARXNG_API,
|
|
},
|
|
{
|
|
id: "linkup-api",
|
|
title: "Linkup API",
|
|
description: "Search with Linkup",
|
|
connectorType: EnumConnectorName.LINKUP_API,
|
|
},
|
|
{
|
|
id: "baidu-search-api",
|
|
title: "Baidu Search",
|
|
description: "Search with Baidu",
|
|
connectorType: EnumConnectorName.BAIDU_SEARCH_API,
|
|
},
|
|
];
|
|
|
|
import {
|
|
Tabs,
|
|
TabsContent,
|
|
TabsList,
|
|
TabsTrigger,
|
|
} from "@/components/ui/tabs";
|
|
|
|
export const ConnectorIndicator: FC = () => {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
|
|
const { connectors, isLoading: connectorsLoading, refreshConnectors } = useSearchSourceConnectors(
|
|
false,
|
|
searchSpaceId ? Number(searchSpaceId) : undefined
|
|
);
|
|
const { data: documentTypeCounts, isLoading: documentTypesLoading } =
|
|
useAtomValue(documentTypeCountsAtom);
|
|
const { data: allConnectors, refetch: refetchAllConnectors } = useAtomValue(connectorsAtom);
|
|
const { mutateAsync: indexConnector } = useAtomValue(indexConnectorMutationAtom);
|
|
const { mutateAsync: updateConnector } = useAtomValue(updateConnectorMutationAtom);
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [activeTab, setActiveTab] = useState("all");
|
|
const [connectingId, setConnectingId] = useState<string | null>(null);
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
// Indexing configuration state (shown after OAuth success)
|
|
const [indexingConfig, setIndexingConfig] = useState<IndexingConfigState | null>(null);
|
|
const [startDate, setStartDate] = useState<Date | undefined>(undefined);
|
|
const [endDate, setEndDate] = useState<Date | undefined>(undefined);
|
|
const [isStartingIndexing, setIsStartingIndexing] = useState(false);
|
|
|
|
// Periodic indexing state
|
|
const [periodicEnabled, setPeriodicEnabled] = useState(false);
|
|
const [frequencyMinutes, setFrequencyMinutes] = useState("1440"); // Default: daily
|
|
|
|
// Helper function to get frequency label
|
|
const getFrequencyLabel = useCallback((minutes: string): string => {
|
|
switch (minutes) {
|
|
case "15": return "15 minutes";
|
|
case "60": return "hour";
|
|
case "360": return "6 hours";
|
|
case "720": return "12 hours";
|
|
case "1440": return "day";
|
|
case "10080": return "week";
|
|
default: return `${minutes} minutes`;
|
|
}
|
|
}, []);
|
|
|
|
// Track active indexing tasks
|
|
const { summary: logsSummary } = useLogsSummary(
|
|
searchSpaceId ? Number(searchSpaceId) : 0,
|
|
24,
|
|
{
|
|
enablePolling: true,
|
|
refetchInterval: 5000,
|
|
}
|
|
);
|
|
|
|
// Get connector IDs that are currently being indexed
|
|
const indexingConnectorIds = useMemo(() => {
|
|
if (!logsSummary?.active_tasks) return new Set<number>();
|
|
return new Set(
|
|
logsSummary.active_tasks
|
|
.filter((task) => task.source?.includes("connector_indexing"))
|
|
.map((task) => {
|
|
// Extract connector ID from task metadata or source
|
|
const match = task.source?.match(/connector[_-]?(\d+)/i);
|
|
return match ? parseInt(match[1], 10) : null;
|
|
})
|
|
.filter((id): id is number => id !== null)
|
|
);
|
|
}, [logsSummary?.active_tasks]);
|
|
|
|
const isLoading = connectorsLoading || documentTypesLoading;
|
|
|
|
// Synchronize state with URL query params
|
|
useEffect(() => {
|
|
const modalParam = searchParams.get("modal");
|
|
const tabParam = searchParams.get("tab");
|
|
const viewParam = searchParams.get("view");
|
|
const connectorParam = searchParams.get("connector");
|
|
|
|
if (modalParam === "connectors") {
|
|
if (!isOpen) setIsOpen(true);
|
|
|
|
// Detect tab from URL query param
|
|
if (tabParam === "active" || tabParam === "all") {
|
|
if (activeTab !== tabParam) setActiveTab(tabParam);
|
|
}
|
|
|
|
// Restore indexing config view from URL if present (e.g., on page refresh)
|
|
if (viewParam === "configure" && connectorParam && !indexingConfig) {
|
|
const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === connectorParam);
|
|
if (oauthConnector && allConnectors) {
|
|
const existingConnector = allConnectors.find(
|
|
(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
|
|
);
|
|
if (existingConnector) {
|
|
setIndexingConfig({
|
|
connectorType: oauthConnector.connectorType,
|
|
connectorId: existingConnector.id,
|
|
connectorTitle: oauthConnector.title,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
if (isOpen) setIsOpen(false);
|
|
}
|
|
}, [searchParams, isOpen, activeTab, indexingConfig, allConnectors]);
|
|
|
|
// Detect OAuth success and transition to config view
|
|
useEffect(() => {
|
|
const success = searchParams.get("success");
|
|
const connectorParam = searchParams.get("connector");
|
|
const modalParam = searchParams.get("modal");
|
|
|
|
if (success === "true" && connectorParam && searchSpaceId && modalParam === "connectors") {
|
|
// Find the OAuth connector info
|
|
const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === connectorParam);
|
|
if (oauthConnector) {
|
|
// Refetch connectors to get the newly created connector
|
|
refetchAllConnectors().then((result) => {
|
|
const newConnector = result.data?.find(
|
|
(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
|
|
);
|
|
if (newConnector) {
|
|
setIndexingConfig({
|
|
connectorType: oauthConnector.connectorType,
|
|
connectorId: newConnector.id,
|
|
connectorTitle: oauthConnector.title,
|
|
});
|
|
setIsOpen(true);
|
|
// Update URL to reflect config view (replace success with view=configure)
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.delete("success");
|
|
url.searchParams.set("view", "configure");
|
|
// Keep connector param for URL restoration
|
|
window.history.replaceState({}, "", url.toString());
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, [searchParams, searchSpaceId, refetchAllConnectors]);
|
|
|
|
// Handle starting indexing
|
|
const handleStartIndexing = useCallback(async () => {
|
|
if (!indexingConfig || !searchSpaceId) return;
|
|
|
|
setIsStartingIndexing(true);
|
|
try {
|
|
const startDateStr = startDate ? format(startDate, "yyyy-MM-dd") : undefined;
|
|
const endDateStr = endDate ? format(endDate, "yyyy-MM-dd") : undefined;
|
|
|
|
// Update periodic indexing settings if enabled
|
|
if (periodicEnabled) {
|
|
const frequency = parseInt(frequencyMinutes, 10);
|
|
await updateConnector({
|
|
id: indexingConfig.connectorId,
|
|
data: {
|
|
periodic_indexing_enabled: true,
|
|
indexing_frequency_minutes: frequency,
|
|
},
|
|
});
|
|
}
|
|
|
|
await indexConnector({
|
|
connector_id: indexingConfig.connectorId,
|
|
queryParams: {
|
|
search_space_id: searchSpaceId,
|
|
start_date: startDateStr,
|
|
end_date: endDateStr,
|
|
},
|
|
});
|
|
|
|
toast.success(`${indexingConfig.connectorTitle} indexing started`, {
|
|
description: periodicEnabled
|
|
? `Periodic sync enabled every ${getFrequencyLabel(frequencyMinutes)}.`
|
|
: "You can continue working while we sync your data.",
|
|
});
|
|
|
|
// Close the config view and reset state
|
|
setIndexingConfig(null);
|
|
setStartDate(undefined);
|
|
setEndDate(undefined);
|
|
setPeriodicEnabled(false);
|
|
setFrequencyMinutes("1440");
|
|
|
|
// Clear config-related URL params and switch to active tab
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.delete("view");
|
|
url.searchParams.delete("connector");
|
|
url.searchParams.set("tab", "active");
|
|
window.history.replaceState({}, "", url.toString());
|
|
setActiveTab("active");
|
|
|
|
// Refresh connectors list
|
|
refreshConnectors();
|
|
queryClient.invalidateQueries({
|
|
queryKey: cacheKeys.logs.summary(Number(searchSpaceId)),
|
|
});
|
|
} catch (error) {
|
|
console.error("Error starting indexing:", error);
|
|
toast.error("Failed to start indexing");
|
|
} finally {
|
|
setIsStartingIndexing(false);
|
|
}
|
|
}, [indexingConfig, searchSpaceId, startDate, endDate, indexConnector, updateConnector, periodicEnabled, frequencyMinutes, refreshConnectors, getFrequencyLabel]);
|
|
|
|
// Handle skipping indexing for now
|
|
const handleSkipIndexing = useCallback(() => {
|
|
setIndexingConfig(null);
|
|
setStartDate(undefined);
|
|
setEndDate(undefined);
|
|
setPeriodicEnabled(false);
|
|
setFrequencyMinutes("1440");
|
|
|
|
// Clear config-related URL params
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.delete("view");
|
|
url.searchParams.delete("connector");
|
|
window.history.replaceState({}, "", url.toString());
|
|
}, []);
|
|
|
|
// Quick date range handlers
|
|
const handleLast30Days = useCallback(() => {
|
|
const today = new Date();
|
|
setStartDate(subDays(today, 30));
|
|
setEndDate(today);
|
|
}, []);
|
|
|
|
const handleLastYear = useCallback(() => {
|
|
const today = new Date();
|
|
setStartDate(subYears(today, 1));
|
|
setEndDate(today);
|
|
}, []);
|
|
|
|
const handleClearDates = useCallback(() => {
|
|
setStartDate(undefined);
|
|
setEndDate(undefined);
|
|
}, []);
|
|
|
|
// Get document types that have documents in the search space
|
|
const activeDocumentTypes = documentTypeCounts
|
|
? Object.entries(documentTypeCounts).filter(([, count]) => count > 0)
|
|
: [];
|
|
|
|
const hasConnectors = connectors.length > 0;
|
|
const hasSources = hasConnectors || activeDocumentTypes.length > 0;
|
|
const totalSourceCount = connectors.length + activeDocumentTypes.length;
|
|
|
|
// Check which connectors are already connected
|
|
const connectedTypes = new Set(
|
|
(allConnectors || []).map((c: SearchSourceConnector) => c.connector_type)
|
|
);
|
|
|
|
// Filter connectors based on search
|
|
const filteredOAuth = OAUTH_CONNECTORS.filter(c =>
|
|
c.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
c.description.toLowerCase().includes(searchQuery.toLowerCase())
|
|
);
|
|
|
|
const filteredOther = OTHER_CONNECTORS.filter(c =>
|
|
c.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
c.description.toLowerCase().includes(searchQuery.toLowerCase())
|
|
);
|
|
|
|
// Handle OAuth connection
|
|
const handleConnectOAuth = useCallback(
|
|
async (connector: (typeof OAUTH_CONNECTORS)[0]) => {
|
|
if (!searchSpaceId || !connector.authEndpoint) return;
|
|
|
|
try {
|
|
setConnectingId(connector.id);
|
|
const response = await authenticatedFetch(
|
|
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}${connector.authEndpoint}?space_id=${searchSpaceId}`,
|
|
{ method: "GET" }
|
|
);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to initiate ${connector.title} OAuth`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
window.location.href = data.auth_url;
|
|
} catch (error) {
|
|
console.error(`Error connecting to ${connector.title}:`, error);
|
|
toast.error(`Failed to connect to ${connector.title}`);
|
|
} finally {
|
|
setConnectingId(null);
|
|
}
|
|
},
|
|
[searchSpaceId]
|
|
);
|
|
|
|
const handleOpenChange = useCallback(
|
|
(open: boolean) => {
|
|
setIsOpen(open);
|
|
|
|
if (open) {
|
|
// Add modal query params to current URL
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set("modal", "connectors");
|
|
url.searchParams.set("tab", activeTab);
|
|
window.history.pushState({ modal: true }, "", url.toString());
|
|
} else {
|
|
// Remove modal query params from URL
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.delete("modal");
|
|
url.searchParams.delete("tab");
|
|
url.searchParams.delete("success");
|
|
url.searchParams.delete("connector");
|
|
url.searchParams.delete("view");
|
|
window.history.pushState({ modal: false }, "", url.toString());
|
|
setIsScrolled(false);
|
|
setSearchQuery("");
|
|
// Reset indexing config when closing
|
|
if (!isStartingIndexing) {
|
|
setIndexingConfig(null);
|
|
setStartDate(undefined);
|
|
setEndDate(undefined);
|
|
setPeriodicEnabled(false);
|
|
setFrequencyMinutes("1440");
|
|
}
|
|
}
|
|
},
|
|
[activeTab, isStartingIndexing]
|
|
);
|
|
|
|
const handleTabChange = useCallback(
|
|
(value: string) => {
|
|
setActiveTab(value);
|
|
// Update tab query param
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set("tab", value);
|
|
window.history.replaceState({ modal: true }, "", url.toString());
|
|
},
|
|
[]
|
|
);
|
|
|
|
const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
|
|
setIsScrolled(e.currentTarget.scrollTop > 0);
|
|
}, []);
|
|
|
|
if (!searchSpaceId) return null;
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={handleOpenChange}>
|
|
<TooltipIconButton
|
|
tooltip={hasSources ? `Manage ${totalSourceCount} sources` : "Connect your data"}
|
|
side="bottom"
|
|
className={cn(
|
|
"size-[34px] rounded-full p-1 flex items-center justify-center transition-colors relative",
|
|
"hover:bg-muted-foreground/15 dark:hover:bg-muted-foreground/30",
|
|
"outline-none focus:outline-none focus-visible:outline-none font-semibold text-xs",
|
|
"border-0 ring-0 focus:ring-0 shadow-none focus:shadow-none"
|
|
)}
|
|
aria-label={
|
|
hasSources ? `View ${totalSourceCount} connected sources` : "Add your first connector"
|
|
}
|
|
onClick={() => handleOpenChange(true)}
|
|
>
|
|
{isLoading ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<>
|
|
<Cable className="size-4 stroke-[1.5px]" />
|
|
{totalSourceCount > 0 && (
|
|
<span className="absolute -top-0.5 right-0 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-medium rounded-full bg-primary text-primary-foreground shadow-sm">
|
|
{totalSourceCount > 99 ? "99+" : totalSourceCount}
|
|
</span>
|
|
)}
|
|
</>
|
|
)}
|
|
</TooltipIconButton>
|
|
|
|
<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[90vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-6 sm:[&>button]:right-12 [&>button]:top-8 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
|
|
{/* Indexing Configuration View - shown after OAuth success */}
|
|
{indexingConfig ? (
|
|
<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
|
|
{/* Fixed Header */}
|
|
<div className="flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10">
|
|
{/* Back button */}
|
|
<button
|
|
type="button"
|
|
onClick={handleSkipIndexing}
|
|
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-6 w-fit"
|
|
>
|
|
<ArrowLeft className="size-4" />
|
|
Back to connectors
|
|
</button>
|
|
|
|
{/* Success header */}
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-green-500/10 border border-green-500/20">
|
|
<Check className="size-7 text-green-500" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-semibold tracking-tight">
|
|
{indexingConfig.connectorTitle} Connected!
|
|
</h2>
|
|
<p className="text-muted-foreground mt-1">
|
|
Configure when to start syncing your data
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scrollable Content */}
|
|
<div className="flex-1 min-h-0 overflow-y-auto px-6 sm:px-12">
|
|
<div className="space-y-6 pb-6">
|
|
<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
|
|
<h3 className="font-medium mb-4">Select Date Range</h3>
|
|
<p className="text-sm text-muted-foreground mb-6">
|
|
Choose how far back you want to sync your data. You can always re-index later with different dates.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{/* Start Date */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="start-date">Start Date</Label>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
id="start-date"
|
|
variant="outline"
|
|
className={cn(
|
|
"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
|
|
!startDate && "text-muted-foreground"
|
|
)}
|
|
>
|
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
|
{startDate ? format(startDate, "PPP") : "Default (1 year ago)"}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0 z-[100]" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
selected={startDate}
|
|
onSelect={setStartDate}
|
|
disabled={(date) => date > new Date()}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
|
|
{/* End Date */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="end-date">End Date</Label>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
id="end-date"
|
|
variant="outline"
|
|
className={cn(
|
|
"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
|
|
!endDate && "text-muted-foreground"
|
|
)}
|
|
>
|
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
|
{endDate ? format(endDate, "PPP") : "Default (Today)"}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0 z-[100]" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
selected={endDate}
|
|
onSelect={setEndDate}
|
|
disabled={(date) => date > new Date() || (startDate ? date < startDate : false)}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick date range buttons */}
|
|
<div className="flex flex-wrap gap-2 mt-4">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleClearDates}
|
|
className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
|
|
>
|
|
Clear Dates
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleLast30Days}
|
|
className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
|
|
>
|
|
Last 30 Days
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleLastYear}
|
|
className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
|
|
>
|
|
Last Year
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Periodic Indexing Configuration */}
|
|
<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<h3 className="font-medium">Enable Periodic Sync</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Automatically re-index at regular intervals
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={periodicEnabled}
|
|
onCheckedChange={setPeriodicEnabled}
|
|
/>
|
|
</div>
|
|
|
|
{periodicEnabled && (
|
|
<div className="mt-4 pt-4 border-t border-border/100 space-y-3">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="frequency">Sync Frequency</Label>
|
|
<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes}>
|
|
<SelectTrigger id="frequency" className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20">
|
|
<SelectValue placeholder="Select frequency" />
|
|
</SelectTrigger>
|
|
<SelectContent className="z-[100]">
|
|
<SelectItem value="15">Every 15 minutes</SelectItem>
|
|
<SelectItem value="60">Every hour</SelectItem>
|
|
<SelectItem value="360">Every 6 hours</SelectItem>
|
|
<SelectItem value="720">Every 12 hours</SelectItem>
|
|
<SelectItem value="1440">Daily</SelectItem>
|
|
<SelectItem value="10080">Weekly</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Info box */}
|
|
<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
|
|
{getConnectorIcon(indexingConfig.connectorType, "size-4")}
|
|
</div>
|
|
<div className="text-sm">
|
|
<p className="font-medium">Indexing runs in the background</p>
|
|
<p className="text-muted-foreground mt-1">
|
|
You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Fixed Footer - Action buttons */}
|
|
<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 border-t border-border bg-muted">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={handleSkipIndexing}
|
|
disabled={isStartingIndexing}
|
|
>
|
|
Skip for now
|
|
</Button>
|
|
<Button
|
|
onClick={handleStartIndexing}
|
|
disabled={isStartingIndexing}
|
|
>
|
|
{isStartingIndexing ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
Starting...
|
|
</>
|
|
) : (
|
|
"Start Indexing"
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<Tabs value={activeTab} onValueChange={handleTabChange} className="flex-1 flex flex-col min-h-0">
|
|
{/* Header */}
|
|
<div
|
|
className={cn(
|
|
"flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10 transition-shadow duration-200 relative z-10",
|
|
isScrolled && "shadow-xl bg-muted/50 backdrop-blur-md"
|
|
)}
|
|
>
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl sm:text-3xl font-semibold tracking-tight">Connectors</DialogTitle>
|
|
<DialogDescription className="text-sm sm:text-base text-muted-foreground/80 mt-1 sm:mt-1.5">
|
|
Search across all your apps and data in one place.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-slate-400/5 dark:border-white/5">
|
|
<TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start">
|
|
<TabsTrigger
|
|
value="all"
|
|
className="px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white transition-all text-base font-medium text-muted-foreground data-[state=active]:text-foreground"
|
|
>
|
|
All Connectors
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="active"
|
|
className="group px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent transition-all text-base font-medium flex items-center gap-2 text-muted-foreground data-[state=active]:text-foreground relative"
|
|
>
|
|
<span className="relative">
|
|
Active
|
|
<span className="absolute bottom-[-13.5px] left-1/2 -translate-x-1/2 w-12 h-[1.5px] bg-foreground dark:bg-white opacity-0 group-data-[state=active]:opacity-100 transition-all duration-200" />
|
|
</span>
|
|
{totalSourceCount > 0 && (
|
|
<span className="px-1.5 py-0.5 rounded-full bg-muted-foreground/15 text-[10px] font-bold">
|
|
{totalSourceCount}
|
|
</span>
|
|
)}
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<div className="w-full sm:w-72 sm:pb-1">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/60" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search"
|
|
className="w-full bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 focus:bg-slate-400/10 dark:focus:bg-white/10 border border-border rounded-xl pl-9 pr-4 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 min-h-0 relative overflow-hidden">
|
|
<div className="h-full overflow-y-auto" onScroll={handleScroll}>
|
|
<div className="px-6 sm:px-12 py-6 sm:py-8 pb-16 sm:pb-16">
|
|
<TabsContent value="all" className="m-0 space-y-8">
|
|
{/* Quick Connect */}
|
|
{filteredOAuth.length > 0 && (
|
|
<section>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<h3 className="text-sm font-semibold text-muted-foreground">Quick Connect</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{filteredOAuth.map((connector) => {
|
|
const isConnected = connectedTypes.has(connector.connectorType);
|
|
const isConnecting = connectingId === connector.id;
|
|
|
|
return (
|
|
<div
|
|
key={connector.id}
|
|
className="group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
|
|
>
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors flex-shrink-0 bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
|
|
{getConnectorIcon(connector.connectorType, "size-6")}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[14px] font-semibold leading-tight">{connector.title}</span>
|
|
{isConnected && (
|
|
<span className="size-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" title="Connected" />
|
|
)}
|
|
</div>
|
|
<p className="text-[11px] text-muted-foreground truncate mt-1">
|
|
{isConnected ? "Connected" : connector.description}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant={isConnected ? "outline" : "default"}
|
|
className="h-8 text-[11px] px-3 rounded-lg flex-shrink-0 font-medium"
|
|
onClick={() =>
|
|
isConnected
|
|
? router.push(
|
|
`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
|
|
)
|
|
: handleConnectOAuth(connector)
|
|
}
|
|
disabled={isConnecting}
|
|
>
|
|
{isConnecting ? (
|
|
<Loader2 className="size-3 animate-spin" />
|
|
) : isConnected ? (
|
|
"Manage"
|
|
) : (
|
|
"Connect"
|
|
)}
|
|
</Button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* More Integrations */}
|
|
{filteredOther.length > 0 && (
|
|
<section>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<h3 className="text-sm font-semibold text-muted-foreground">More Integrations</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{filteredOther.map((connector) => {
|
|
const isConnected = connectedTypes.has(connector.connectorType);
|
|
|
|
return (
|
|
<Link
|
|
key={connector.id}
|
|
href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
|
|
className="group flex items-center gap-4 p-4 rounded-xl transition-all duration-150 border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
|
|
>
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
|
|
{getConnectorIcon(connector.connectorType, "size-6")}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[14px] font-semibold leading-tight">{connector.title}</span>
|
|
{isConnected && (
|
|
<span className="size-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" title="Connected" />
|
|
)}
|
|
</div>
|
|
<p className="text-[11px] text-muted-foreground truncate mt-1">
|
|
{connector.description}
|
|
</p>
|
|
</div>
|
|
<ChevronRight className="size-4 text-muted-foreground/50 group-hover:text-foreground transition-colors flex-shrink-0" />
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="active" className="m-0">
|
|
{hasSources ? (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<h3 className="text-sm font-semibold text-muted-foreground">Currently Active</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{activeDocumentTypes.map(([docType, count]) => (
|
|
<div
|
|
key={docType}
|
|
className="flex items-center gap-4 p-4 rounded-xl bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 border border-border transition-all"
|
|
>
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
|
|
{getConnectorIcon(docType, "size-6")}
|
|
</div>
|
|
<div>
|
|
<p className="text-[14px] font-semibold leading-tight">
|
|
{getDocumentTypeLabel(docType)}
|
|
</p>
|
|
<p className="text-[11px] text-muted-foreground mt-1">
|
|
{count as number} documents indexed
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{connectors.map((connector) => {
|
|
const isIndexing = indexingConnectorIds.has(connector.id);
|
|
const activeTask = logsSummary?.active_tasks?.find(
|
|
(task) => task.source?.includes(`connector_${connector.id}`) || task.source?.includes(`connector-${connector.id}`)
|
|
);
|
|
|
|
return (
|
|
<div
|
|
key={`connector-${connector.id}`}
|
|
className={cn(
|
|
"flex items-center gap-4 p-4 rounded-xl border border-border transition-all",
|
|
isIndexing
|
|
? "bg-primary/5 border-primary/20"
|
|
: "bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
|
|
)}
|
|
>
|
|
<div className={cn(
|
|
"flex h-12 w-12 items-center justify-center rounded-lg border",
|
|
isIndexing
|
|
? "bg-primary/10 border-primary/20"
|
|
: "bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
|
|
)}>
|
|
{getConnectorIcon(connector.connector_type, "size-6")}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-[14px] font-semibold leading-tight truncate">
|
|
{connector.name}
|
|
</p>
|
|
{isIndexing ? (
|
|
<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
|
|
<Loader2 className="size-3 animate-spin" />
|
|
Indexing...
|
|
{activeTask?.message && (
|
|
<span className="text-muted-foreground truncate max-w-[150px]">
|
|
• {activeTask.message}
|
|
</span>
|
|
)}
|
|
</p>
|
|
) : (
|
|
<p className="text-[11px] text-muted-foreground mt-1">
|
|
{connector.last_indexed_at
|
|
? `Last indexed: ${format(new Date(connector.last_indexed_at), "MMM d, yyyy")}`
|
|
: "Never indexed"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 text-[11px]"
|
|
onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`)}
|
|
disabled={isIndexing}
|
|
>
|
|
{isIndexing ? "Syncing..." : "Manage"}
|
|
</Button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center py-20 text-center">
|
|
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
|
|
<Cable className="size-8 text-muted-foreground/50" />
|
|
</div>
|
|
<h4 className="text-lg font-semibold">No active sources</h4>
|
|
<p className="text-sm text-muted-foreground mt-1 max-w-[280px]">
|
|
Connect your first service to start searching across all your data.
|
|
</p>
|
|
<TabsTrigger value="all" className="mt-6 text-primary hover:underline">
|
|
Browse available connectors
|
|
</TabsTrigger>
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
</div>
|
|
</div>
|
|
{/* Bottom fade shadow */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-7 bg-gradient-to-t from-muted via-muted/80 to-transparent pointer-events-none z-10" />
|
|
</div>
|
|
</Tabs>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|