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:
Anish Sarkar 2026-01-01 22:08:20 +05:30
parent 3ae8fe3a7e
commit 5f76844992
4 changed files with 76 additions and 35 deletions

View file

@ -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: [],
}, },
]; ];

View file

@ -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.

View file

@ -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,
}, },
}); });

View file

@ -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 = {