mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-07-04 22:02:16 +02:00
refactor: update dashboard layout and enhance Circleback connector configuration
- Modified the DashboardLayout to replace the "Sources" section with a "Documents" entry, improving navigation clarity. - Updated the CirclebackConfig component to include an Info icon for configuration instructions and adjusted the webhook URL input to be disabled for better user experience. - Enhanced the useConnectorDialog hook to handle non-indexable connectors more effectively, ensuring proper state management and user feedback. - Improved icon mapping in the app sidebar for consistency across components.
This commit is contained in:
parent
3ae8fe3a7e
commit
5f76844992
4 changed files with 76 additions and 35 deletions
|
|
@ -30,24 +30,19 @@ export default function DashboardLayout({
|
||||||
{
|
{
|
||||||
title: "Chat",
|
title: "Chat",
|
||||||
url: `/dashboard/${search_space_id}/new-chat`,
|
url: `/dashboard/${search_space_id}/new-chat`,
|
||||||
icon: "SquareTerminal",
|
icon: "MessageCircle",
|
||||||
items: [],
|
items: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Sources",
|
title: "Documents",
|
||||||
url: "#",
|
url: `/dashboard/${search_space_id}/documents`,
|
||||||
icon: "Database",
|
icon: "SquareLibrary",
|
||||||
items: [
|
items: [],
|
||||||
{
|
},
|
||||||
title: "Manage Documents",
|
|
||||||
url: `/dashboard/${search_space_id}/documents`,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "Logs",
|
title: "Logs",
|
||||||
url: `/dashboard/${search_space_id}/logs`,
|
url: `/dashboard/${search_space_id}/logs`,
|
||||||
icon: "FileText",
|
icon: "Logs",
|
||||||
items: [],
|
items: [],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Copy, Webhook, Check } from "lucide-react";
|
import { Copy, Webhook, Check, Info } from "lucide-react";
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import type { FC } from "react";
|
import type { FC } from "react";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
|
|
@ -107,11 +107,12 @@ export const CirclebackConfig: FC<CirclebackConfigProps> = ({
|
||||||
<Input
|
<Input
|
||||||
value={webhookUrl}
|
value={webhookUrl}
|
||||||
readOnly
|
readOnly
|
||||||
className="border-slate-400/20 focus-visible:border-slate-400/40 font-mono text-xs"
|
disabled
|
||||||
|
className="border-slate-400/20 focus-visible:border-slate-400/40 font-mono text-xs bg-muted/50 cursor-default select-all"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="secondary"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={handleCopyWebhookUrl}
|
onClick={handleCopyWebhookUrl}
|
||||||
className="shrink-0"
|
className="shrink-0"
|
||||||
|
|
@ -141,7 +142,7 @@ export const CirclebackConfig: FC<CirclebackConfigProps> = ({
|
||||||
|
|
||||||
{webhookInfo && (
|
{webhookInfo && (
|
||||||
<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
|
<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
|
||||||
<Webhook className="h-3 w-3 sm:h-4 sm:w-4" />
|
<Info className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||||
<AlertTitle className="text-xs sm:text-sm">Configuration Instructions</AlertTitle>
|
<AlertTitle className="text-xs sm:text-sm">Configuration Instructions</AlertTitle>
|
||||||
<AlertDescription className="text-[10px] sm:text-xs !pl-0 mt-1">
|
<AlertDescription className="text-[10px] sm:text-xs !pl-0 mt-1">
|
||||||
Configure this URL in Circleback Settings → Automations → Create automation → Send webhook request.
|
Configure this URL in Circleback Settings → Automations → Create automation → Send webhook request.
|
||||||
|
|
|
||||||
|
|
@ -141,8 +141,9 @@ export const useConnectorDialog = () => {
|
||||||
if (connectorValidation.success) {
|
if (connectorValidation.success) {
|
||||||
setEditingConnector(connector);
|
setEditingConnector(connector);
|
||||||
setConnectorConfig(connector.config);
|
setConnectorConfig(connector.config);
|
||||||
// Load existing periodic sync settings (disabled for Google Drive)
|
setConnectorName(connector.name);
|
||||||
setPeriodicEnabled(connector.connector_type === "GOOGLE_DRIVE_CONNECTOR" ? false : connector.periodic_indexing_enabled);
|
// Load existing periodic sync settings (disabled for Google Drive and non-indexable connectors)
|
||||||
|
setPeriodicEnabled(connector.connector_type === "GOOGLE_DRIVE_CONNECTOR" || !connector.is_indexable ? false : connector.periodic_indexing_enabled);
|
||||||
setFrequencyMinutes(
|
setFrequencyMinutes(
|
||||||
connector.indexing_frequency_minutes?.toString() || "1440"
|
connector.indexing_frequency_minutes?.toString() || "1440"
|
||||||
);
|
);
|
||||||
|
|
@ -508,16 +509,56 @@ export const useConnectorDialog = () => {
|
||||||
// Refresh connectors list
|
// Refresh connectors list
|
||||||
await refetchAllConnectors();
|
await refetchAllConnectors();
|
||||||
} else {
|
} else {
|
||||||
// Non-indexable connector - just show success message
|
// Non-indexable connector
|
||||||
toast.success(`${connectorTitle} connected successfully!`);
|
// For Circleback, transition to edit view to show webhook URL
|
||||||
|
// For other non-indexable connectors, just close the modal
|
||||||
// Close modal and return to main view
|
if (currentConnectorType === "CIRCLEBACK_CONNECTOR") {
|
||||||
const url = new URL(window.location.href);
|
// Clear connecting state and indexing config state
|
||||||
url.searchParams.delete("modal");
|
setConnectingConnectorType(null);
|
||||||
url.searchParams.delete("tab");
|
setIndexingConfig(null);
|
||||||
url.searchParams.delete("view");
|
setIndexingConnector(null);
|
||||||
url.searchParams.delete("connectorType");
|
setIndexingConnectorConfig(null);
|
||||||
router.replace(url.pathname + url.search, { scroll: false });
|
|
||||||
|
// Set up edit view state
|
||||||
|
setEditingConnector(connector);
|
||||||
|
setConnectorName(connector.name);
|
||||||
|
setConnectorConfig(connector.config || {});
|
||||||
|
setPeriodicEnabled(false);
|
||||||
|
setFrequencyMinutes("1440");
|
||||||
|
setStartDate(undefined);
|
||||||
|
setEndDate(undefined);
|
||||||
|
|
||||||
|
toast.success(`${connectorTitle} connected successfully!`, {
|
||||||
|
description: "Configure the webhook URL in your Circleback settings.",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Transition to edit view
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.set("modal", "connectors");
|
||||||
|
url.searchParams.set("view", "edit");
|
||||||
|
url.searchParams.set("connectorId", connector.id.toString());
|
||||||
|
url.searchParams.delete("connectorType");
|
||||||
|
router.replace(url.pathname + url.search, { scroll: false });
|
||||||
|
|
||||||
|
// Refresh connectors list
|
||||||
|
await refetchAllConnectors();
|
||||||
|
} else {
|
||||||
|
// Other non-indexable connectors - just show success message and close
|
||||||
|
toast.success(`${connectorTitle} connected successfully!`);
|
||||||
|
|
||||||
|
// Close modal and return to main view
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.delete("modal");
|
||||||
|
url.searchParams.delete("tab");
|
||||||
|
url.searchParams.delete("view");
|
||||||
|
url.searchParams.delete("connectorType");
|
||||||
|
router.replace(url.pathname + url.search, { scroll: false });
|
||||||
|
|
||||||
|
// Clear indexing config state
|
||||||
|
setIndexingConfig(null);
|
||||||
|
setIndexingConnector(null);
|
||||||
|
setIndexingConnectorConfig(null);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -698,8 +739,8 @@ export const useConnectorDialog = () => {
|
||||||
|
|
||||||
setEditingConnector(connector);
|
setEditingConnector(connector);
|
||||||
setConnectorName(connector.name);
|
setConnectorName(connector.name);
|
||||||
// Load existing periodic sync settings (disabled for Google Drive)
|
// Load existing periodic sync settings (disabled for Google Drive and non-indexable connectors)
|
||||||
setPeriodicEnabled(connector.connector_type === "GOOGLE_DRIVE_CONNECTOR" ? false : connector.periodic_indexing_enabled);
|
setPeriodicEnabled(connector.connector_type === "GOOGLE_DRIVE_CONNECTOR" || !connector.is_indexable ? false : connector.periodic_indexing_enabled);
|
||||||
setFrequencyMinutes(connector.indexing_frequency_minutes?.toString() || "1440");
|
setFrequencyMinutes(connector.indexing_frequency_minutes?.toString() || "1440");
|
||||||
// Reset dates - user can set new ones for re-indexing
|
// Reset dates - user can set new ones for re-indexing
|
||||||
setStartDate(undefined);
|
setStartDate(undefined);
|
||||||
|
|
@ -747,14 +788,14 @@ export const useConnectorDialog = () => {
|
||||||
const endDateStr = endDate ? format(endDate, "yyyy-MM-dd") : undefined;
|
const endDateStr = endDate ? format(endDate, "yyyy-MM-dd") : undefined;
|
||||||
|
|
||||||
// Update connector with periodic sync settings, config changes, and name
|
// Update connector with periodic sync settings, config changes, and name
|
||||||
// Note: Periodic sync is disabled for Google Drive connectors
|
// Note: Periodic sync is disabled for Google Drive connectors and non-indexable connectors
|
||||||
const frequency = periodicEnabled ? parseInt(frequencyMinutes, 10) : null;
|
const frequency = periodicEnabled && editingConnector.is_indexable ? parseInt(frequencyMinutes, 10) : null;
|
||||||
await updateConnector({
|
await updateConnector({
|
||||||
id: editingConnector.id,
|
id: editingConnector.id,
|
||||||
data: {
|
data: {
|
||||||
name: connectorName || editingConnector.name,
|
name: connectorName || editingConnector.name,
|
||||||
periodic_indexing_enabled: editingConnector.connector_type === "GOOGLE_DRIVE_CONNECTOR" ? false : periodicEnabled,
|
periodic_indexing_enabled: editingConnector.connector_type === "GOOGLE_DRIVE_CONNECTOR" || !editingConnector.is_indexable ? false : periodicEnabled,
|
||||||
indexing_frequency_minutes: editingConnector.connector_type === "GOOGLE_DRIVE_CONNECTOR" ? null : frequency,
|
indexing_frequency_minutes: editingConnector.connector_type === "GOOGLE_DRIVE_CONNECTOR" || !editingConnector.is_indexable ? null : frequency,
|
||||||
config: connectorConfig || editingConnector.config,
|
config: connectorConfig || editingConnector.config,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,9 @@ import {
|
||||||
FileText,
|
FileText,
|
||||||
Info,
|
Info,
|
||||||
LogOut,
|
LogOut,
|
||||||
|
Logs,
|
||||||
type LucideIcon,
|
type LucideIcon,
|
||||||
|
MessageCircle,
|
||||||
MessageCircleMore,
|
MessageCircleMore,
|
||||||
MoonIcon,
|
MoonIcon,
|
||||||
Podcast,
|
Podcast,
|
||||||
|
|
@ -148,6 +150,8 @@ export const iconMap: Record<string, LucideIcon> = {
|
||||||
Podcast,
|
Podcast,
|
||||||
Users,
|
Users,
|
||||||
RefreshCw,
|
RefreshCw,
|
||||||
|
MessageCircle,
|
||||||
|
Logs,
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultData = {
|
const defaultData = {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue