From 158976e8028ecb2207becdf8f1df092d60c9ba45 Mon Sep 17 00:00:00 2001 From: Muhamad Aji Wibisono Date: Mon, 2 Jun 2025 18:31:08 +0700 Subject: [PATCH] feat: enabled discord connector on frontend --- .../connectors/add/discord-connector/page.tsx | 315 ++++++++++++++++++ .../[search_space_id]/connectors/add/page.tsx | 6 +- 2 files changed, 318 insertions(+), 3 deletions(-) create mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/discord-connector/page.tsx diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/discord-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/discord-connector/page.tsx new file mode 100644 index 000000000..a26f103a9 --- /dev/null +++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/discord-connector/page.tsx @@ -0,0 +1,315 @@ +"use client"; + +import { useState } from "react"; +import { useRouter, useParams } from "next/navigation"; +import { motion } from "framer-motion"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useForm } from "react-hook-form"; +import * as z from "zod"; +import { toast } from "sonner"; +import { ArrowLeft, Check, Info, Loader2 } from "lucide-react"; + +import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { + Alert, + AlertDescription, + AlertTitle, +} from "@/components/ui/alert"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; + +// Define the form schema with Zod +const discordConnectorFormSchema = z.object({ + name: z.string().min(3, { + message: "Connector name must be at least 3 characters.", + }), + bot_token: z.string().min(10, { + message: "Discord Bot Token is required and must be valid.", + }), +}); + +// Define the type for the form values +type DiscordConnectorFormValues = z.infer; + +export default function DiscordConnectorPage() { + const router = useRouter(); + const params = useParams(); + const searchSpaceId = params.search_space_id as string; + const [isSubmitting, setIsSubmitting] = useState(false); + const { createConnector } = useSearchSourceConnectors(); + + // Initialize the form + const form = useForm({ + resolver: zodResolver(discordConnectorFormSchema), + defaultValues: { + name: "Discord Connector", + bot_token: "", + }, + }); + + // Handle form submission + const onSubmit = async (values: DiscordConnectorFormValues) => { + setIsSubmitting(true); + try { + await createConnector({ + name: values.name, + connector_type: "DISCORD_CONNECTOR", + config: { + DISCORD_BOT_TOKEN: values.bot_token, + }, + is_indexable: true, + last_indexed_at: null, + }); + + toast.success("Discord connector created successfully!"); + router.push(`/dashboard/${searchSpaceId}/connectors`); + } catch (error) { + console.error("Error creating connector:", error); + toast.error(error instanceof Error ? error.message : "Failed to create connector"); + } finally { + setIsSubmitting(false); + } + }; + + return ( +
+ + + + + + Connect + Documentation + + + + + + Connect Discord Server + + Integrate with Discord to search and retrieve information from your servers and channels. This connector can index your Discord messages for search. + + + + + + Bot Token Required + + You'll need a Discord Bot Token to use this connector. You can create a Discord bot and get the token from the{" "} + + Discord Developer Portal + . + + + +
+ + ( + + Connector Name + + + + + A friendly name to identify this connector. + + + + )} + /> + + ( + + Discord Bot Token + + + + + Your Discord Bot Token will be encrypted and stored securely. You can find it in the Bot section of your application in the Discord Developer Portal. + + + + )} + /> + +
+ +
+ + +
+ +

What you get with Discord integration:

+
    +
  • Search through your Discord servers and channels
    • +
  • Access historical messages and shared files
    • +
  • Connect your team's knowledge directly to your search space
    • +
  • Keep your search results up-to-date with latest communications
    • +
  • Index your Discord messages for enhanced search capabilities
    • +
+ + + + + + + + Discord Connector Documentation + + Learn how to set up and use the Discord connector to index your server data. + + + +
+

How it works

+

+ The Discord connector indexes all accessible channels for a given bot in your servers. +

+
    +
  • Upcoming: Support for private channels by granting the bot access.
    • +
+
+ + + + Authorization + + + + Bot Setup Required + + You must create a Discord bot and add it to your server with the correct permissions. + + + +
    +
  1. Go to https://discord.com/developers/applications.
    2. +
  2. Create a new application and add a bot to it.
    3. +
  3. Copy the Bot Token from the Bot section.
    4. +
  4. Invite the bot to your server with the following OAuth2 scopes and permissions: +
      +
    • Scopes: bot
      • +
    • Bot Permissions: Read Messages/View Channels, Read Message History, Send Messages
      • +
    +
    5. +
  5. Paste the Bot Token above to connect.
    6. +
+ + + + + Indexing + +
    +
  1. Navigate to the Connector Dashboard and select the Discord Connector.
    2. +
  2. Place the Bot Token under Step 1 Provide Credentials.
    3. +
  3. Click Connect to establish the connection.
    4. +
+ + + + Important: Bot Channel Access + + After connecting, ensure the bot has access to all channels you want to index. You may need to adjust channel permissions in Discord. + + + + + + First Indexing + + The first indexing pulls all accessible channels and may take longer than future updates. Only channels where the bot has access will be indexed. + + + +
+

Troubleshooting:

+
    +
  • + Missing messages: If you don't see messages from a channel, check the bot's permissions for that channel. +
    • +
  • + Bot not responding: Make sure the bot is online and the token is correct. +
    • +
  • + Private channels: The bot must be explicitly granted access to private channels. +
    • +
+
+ + + + + + + + +
+ ); +} diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx index c04dae645..afcc0af00 100644 --- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx +++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx @@ -79,11 +79,11 @@ const connectorCategories: ConnectorCategory[] = [ status: "coming-soon", }, { - id: "discord", + id: "discord-connector", title: "Discord", description: "Connect to Discord servers to access messages and channels.", icon: , - status: "coming-soon", + status: "available" }, ], }, @@ -190,7 +190,7 @@ const cardVariants = { export default function ConnectorsPage() { const params = useParams(); const searchSpaceId = params.search_space_id as string; - const [expandedCategories, setExpandedCategories] = useState(["search-engines", "knowledge-bases", "project-management"]); + const [expandedCategories, setExpandedCategories] = useState(["search-engines", "knowledge-bases", "project-management", "team-chats"]); const toggleCategory = (categoryId: string) => { setExpandedCategories(prev =>