feat: Add Circleback connector integration

- Implement CirclebackConnectForm for user input and configuration
- Update connector benefits to include Circleback features
- Add CirclebackConfig component for webhook configuration
- Integrate Circleback into connector selection and management UI
- Update connector constants and document mappings for Circleback

surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/circleback-connect-form.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info, Webhook } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+
+const circlebackFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+});
+
+type CirclebackFormValues = z.infer<typeof circlebackFormSchema>;
+
+export const CirclebackConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const form = useForm<CirclebackFormValues>({
+		resolver: zodResolver(circlebackFormSchema),
+		defaultValues: {
+			name: "Circleback Connector",
+		},
+	});
+
+	const handleSubmit = async (values: CirclebackFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.CIRCLEBACK_CONNECTOR,
+				config: {},
+				is_indexable: false,
+				last_indexed_at: null,
+				periodic_indexing_enabled: false,
+				indexing_frequency_minutes: null,
+				next_scheduled_at: null,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	return (
+		<div className="space-y-6 pb-6">
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Webhook className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">Webhook-Based Integration</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						Circleback uses webhooks to automatically send meeting data. After connecting, you'll receive a webhook URL to configure in your Circleback settings.
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
+				<Form {...form}>
+					<form id="circleback-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Circleback Connector" 
+											className="border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.CIRCLEBACK_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Circleback:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.CIRCLEBACK_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+		</div>
+	);
+};
+

surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts

@@ -101,6 +101,13 @@ export function getConnectorBenefits(connectorType: string): string[] | null {
 			"Keep your search results up-to-date with latest Luma content",
 			"Index your Luma events for enhanced search capabilities",
 		],
+		CIRCLEBACK_CONNECTOR: [
+			"Automatically receive meeting notes, transcripts, and action items",
+			"Access meeting details, attendees, and insights",
+			"Search through all your Circleback meeting records",
+			"Real-time updates via webhook integration",
+			"No manual indexing required - meetings are added automatically",
+		],
 	};
 
 	return benefits[connectorType] || null;

surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx

@@ -1,6 +1,7 @@
 import type { FC } from "react";
 import { BaiduSearchApiConnectForm } from "./components/baidu-search-api-connect-form";
 import { BookStackConnectForm } from "./components/bookstack-connect-form";
+import { CirclebackConnectForm } from "./components/circleback-connect-form";
 import { ClickUpConnectForm } from "./components/clickup-connect-form";
 import { ConfluenceConnectForm } from "./components/confluence-connect-form";
 import { DiscordConnectForm } from "./components/discord-connect-form";
@@ -74,6 +75,8 @@ export function getConnectFormComponent(
 			return ClickUpConnectForm;
 		case "LUMA_CONNECTOR":
 			return LumaConnectForm;
+		case "CIRCLEBACK_CONNECTOR":
+			return CirclebackConnectForm;
 		// Add other connector types here as needed
 		default:
 			return null;