apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-29 19:06:24 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #316 from MODSetter/dev

Browse source 
refactor: connector icon handling by centralizing icon retrieval in contracts.
This commit is contained in:
Rohan Verma 2025-09-13 15:20:53 -07:00 • committed by GitHub
commit b50001b640
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 318 additions and 310 deletions
Download patch file Download diff file Expand all files Collapse all files

2
surfsense_web/app/dashboard/[search_space_id]/connectors/(manage)/page.tsx
View file

@ -6,7 +6,6 @@ import { Calendar as CalendarIcon, Edit, Plus, RefreshCw, Trash2 } from "lucide-
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { getConnectorIcon } from "@/components/chat";
import {
AlertDialog,
AlertDialogAction,
@ -41,6 +40,7 @@ import {
} from "@/components/ui/table";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
import { cn } from "@/lib/utils";

2
surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/edit/page.tsx
View file

@ -5,7 +5,6 @@ import { ArrowLeft, Check, Loader2 } from "lucide-react";
import { useParams, useRouter } from "next/navigation";
import { useEffect } from "react";
import { toast } from "sonner";
import { getConnectorIcon } from "@/components/chat";
import { EditConnectorLoadingSkeleton } from "@/components/editConnector/EditConnectorLoadingSkeleton";
import { EditConnectorNameForm } from "@/components/editConnector/EditConnectorNameForm";
import { EditGitHubConnectorConfig } from "@/components/editConnector/EditGitHubConnectorConfig";
@ -20,6 +19,7 @@ import {
CardTitle,
} from "@/components/ui/card";
import { Form } from "@/components/ui/form";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useConnectorEditPage } from "@/hooks/useConnectorEditPage";
// Import Utils, Types, Hook, and Components
import { getConnectorTypeDisplay } from "@/lib/connectors/utils";

7
surfsense_web/app/dashboard/[search_space_id]/connectors/add/airtable-connector/page.tsx
View file

@ -1,6 +1,5 @@
"use client";
import { IconBrandAirtable } from "@tabler/icons-react";
import { motion } from "framer-motion";
import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
import Link from "next/link";
@ -17,6 +16,8 @@ import {
CardTitle,
} from "@/components/ui/card";
import { EnumConnectorName } from "@/contracts/enums/connector";
// import { IconBrandAirtable } from "@tabler/icons-react";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import {
type SearchSourceConnector,
useSearchSourceConnectors,
@ -88,8 +89,8 @@ export default function AirtableConnectorPage() {
Back to connectors
</Link>
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900">
<IconBrandAirtable className="h-6 w-6 text-blue-600 dark:text-blue-400" />
<div className="flex h-12 w-12 items-center justify-center rounded-lg">
{getConnectorIcon(EnumConnectorName.AIRTABLE_CONNECTOR, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Airtable</h1>

19
surfsense_web/app/dashboard/[search_space_id]/connectors/add/clickup-connector/page.tsx
View file

@ -20,6 +20,8 @@ import {
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
// Define the form schema with Zod
@ -59,7 +61,7 @@ export default function ClickUpConnectorPage() {
try {
const connectorData = {
name: values.name,
connector_type: "CLICKUP_CONNECTOR",
connector_type: EnumConnectorName.CLICKUP_CONNECTOR,
is_indexable: true,
config: {
CLICKUP_API_TOKEN: values.api_token,
@ -90,6 +92,21 @@ export default function ClickUpConnectorPage() {
Back to Connectors
</Button>
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg">
{getConnectorIcon(EnumConnectorName.CLICKUP_CONNECTOR, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect ClickUp</h1>
<p className="text-muted-foreground">
Connect your ClickUp workspace to search tasks and projects.
</p>
</div>
</div>
</div>
<Card>
<CardHeader>
<CardTitle>ClickUp Configuration</CardTitle>

20
surfsense_web/app/dashboard/[search_space_id]/connectors/add/confluence-connector/page.tsx
View file

@ -22,7 +22,8 @@ import {
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
// Define the form schema with Zod
@ -78,7 +79,7 @@ export default function ConfluenceConnectorPage() {
try {
await createConnector({
name: values.name,
connector_type: "CONFLUENCE_CONNECTOR",
connector_type: EnumConnectorName.CONFLUENCE_CONNECTOR,
config: {
CONFLUENCE_BASE_URL: values.base_url,
CONFLUENCE_EMAIL: values.email,
@ -111,6 +112,21 @@ export default function ConfluenceConnectorPage() {
Back to Connectors
</Button>
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg">
{getConnectorIcon(EnumConnectorName.CONFLUENCE_CONNECTOR, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Confluence</h1>
<p className="text-muted-foreground">
Connect your Confluence instance to search pages and spaces.
</p>
</div>
</div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

19
surfsense_web/app/dashboard/[search_space_id]/connectors/add/discord-connector/page.tsx
View file

@ -35,6 +35,8 @@ import {
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
// Define the form schema with Zod
@ -73,7 +75,7 @@ export default function DiscordConnectorPage() {
try {
await createConnector({
name: values.name,
connector_type: "DISCORD_CONNECTOR",
connector_type: EnumConnectorName.DISCORD_CONNECTOR,
config: {
DISCORD_BOT_TOKEN: values.bot_token,
},
@ -102,6 +104,21 @@ export default function DiscordConnectorPage() {
Back to Connectors
</Button>
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg ">
{getConnectorIcon(EnumConnectorName.DISCORD_CONNECTOR, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Discord</h1>
<p className="text-muted-foreground">
Connect your Discord server to search messages and channels.
</p>
</div>
</div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

6
surfsense_web/app/dashboard/[search_space_id]/connectors/add/github-connector/page.tsx
View file

@ -36,6 +36,8 @@ import {
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
// Assuming useSearchSourceConnectors hook exists and works similarly
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
@ -148,7 +150,7 @@ export default function GithubConnectorPage() {
try {
await createConnector({
name: connectorName, // Use the stored name
connector_type: "GITHUB_CONNECTOR",
connector_type: EnumConnectorName.GITHUB_CONNECTOR,
config: {
GITHUB_PAT: validatedPat, // Use the stored validated PAT
repo_full_names: selectedRepos, // Add the selected repo names
@ -215,7 +217,7 @@ export default function GithubConnectorPage() {
<CardHeader>
<CardTitle className="text-2xl font-bold flex items-center gap-2">
{step === "enter_pat" ? (
<Github className="h-6 w-6" />
getConnectorIcon(EnumConnectorName.GITHUB_CONNECTOR, "h-6 w-6")
) : (
<ListChecks className="h-6 w-6" />
)}

10
surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-calendar-connector/page.tsx
View file

@ -1,7 +1,6 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { IconCalendar } from "@tabler/icons-react";
import { motion } from "framer-motion";
import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
import Link from "next/link";
@ -19,6 +18,8 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import {
type SearchSourceConnector,
useSearchSourceConnectors,
@ -36,7 +37,8 @@ export default function GoogleCalendarConnectorPage() {
useEffect(() => {
fetchConnectors().then((data) => {
const connector = data.find(
(c: SearchSourceConnector) => c.connector_type === "GOOGLE_CALENDAR_CONNECTOR"
(c: SearchSourceConnector) =>
c.connector_type === EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR
);
if (connector) {
setDoesConnectorExist(true);
@ -92,8 +94,8 @@ export default function GoogleCalendarConnectorPage() {
Back to connectors
</Link>
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900">
<IconCalendar className="h-6 w-6 text-blue-600 dark:text-blue-400" />
<div className="flex h-12 w-12 items-center justify-center rounded-lg">
{getConnectorIcon(EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Google Calendar</h1>

9
surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-gmail-connector/page.tsx
View file

@ -1,7 +1,6 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { IconMail } from "@tabler/icons-react";
import { motion } from "framer-motion";
import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
import Link from "next/link";
@ -19,6 +18,8 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import {
type SearchSourceConnector,
useSearchSourceConnectors,
@ -36,7 +37,7 @@ export default function GoogleGmailConnectorPage() {
useEffect(() => {
fetchConnectors().then((data) => {
const connector = data.find(
(c: SearchSourceConnector) => c.connector_type === "GOOGLE_GMAIL_CONNECTOR"
(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.GOOGLE_GMAIL_CONNECTOR
);
if (connector) {
setDoesConnectorExist(true);
@ -92,8 +93,8 @@ export default function GoogleGmailConnectorPage() {
Back to connectors
</Link>
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900">
<IconMail className="h-6 w-6 text-red-600 dark:text-red-400" />
<div className="flex h-12 w-12 items-center justify-center rounded-lg">
{getConnectorIcon(EnumConnectorName.GOOGLE_GMAIL_CONNECTOR, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Google Gmail</h1>

19
surfsense_web/app/dashboard/[search_space_id]/connectors/add/jira-connector/page.tsx
View file

@ -35,6 +35,8 @@ import {
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
// Define the form schema with Zod
@ -90,7 +92,7 @@ export default function JiraConnectorPage() {
try {
await createConnector({
name: values.name,
connector_type: "JIRA_CONNECTOR",
connector_type: EnumConnectorName.JIRA_CONNECTOR,
config: {
JIRA_BASE_URL: values.base_url,
JIRA_EMAIL: values.email,
@ -123,6 +125,21 @@ export default function JiraConnectorPage() {
Back to Connectors
</Button>
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg">
{getConnectorIcon(EnumConnectorName.JIRA_CONNECTOR, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Jira</h1>
<p className="text-muted-foreground">
Connect your Jira instance to search issues and tickets.
</p>
</div>
</div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

19
surfsense_web/app/dashboard/[search_space_id]/connectors/add/linear-connector/page.tsx
View file

@ -35,6 +35,8 @@ import {
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
// Define the form schema with Zod
@ -77,7 +79,7 @@ export default function LinearConnectorPage() {
try {
await createConnector({
name: values.name,
connector_type: "LINEAR_CONNECTOR",
connector_type: EnumConnectorName.LINEAR_CONNECTOR,
config: {
LINEAR_API_KEY: values.api_key,
},
@ -108,6 +110,21 @@ export default function LinearConnectorPage() {
Back to Connectors
</Button>
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg">
{getConnectorIcon(EnumConnectorName.LINEAR_CONNECTOR, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Linear</h1>
<p className="text-muted-foreground">
Connect your Linear workspace to search issues and projects.
</p>
</div>
</div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

19
surfsense_web/app/dashboard/[search_space_id]/connectors/add/linkup-api/page.tsx
View file

@ -28,6 +28,8 @@ import {
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
// Define the form schema with Zod
@ -65,7 +67,7 @@ export default function LinkupApiPage() {
try {
await createConnector({
name: values.name,
connector_type: "LINKUP_API",
connector_type: EnumConnectorName.LINKUP_API,
config: {
LINKUP_API_KEY: values.api_key,
},
@ -96,6 +98,21 @@ export default function LinkupApiPage() {
Back to Connectors
</Button>
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg">
{getConnectorIcon(EnumConnectorName.LINKUP_API, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Linkup API</h1>
<p className="text-muted-foreground">
Connect Linkup API for enhanced search capabilities.
</p>
</div>
</div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

19
surfsense_web/app/dashboard/[search_space_id]/connectors/add/notion-connector/page.tsx
View file

@ -35,6 +35,8 @@ import {
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
// Define the form schema with Zod
@ -72,7 +74,7 @@ export default function NotionConnectorPage() {
try {
await createConnector({
name: values.name,
connector_type: "NOTION_CONNECTOR",
connector_type: EnumConnectorName.NOTION_CONNECTOR,
config: {
NOTION_INTEGRATION_TOKEN: values.integration_token,
},
@ -103,6 +105,21 @@ export default function NotionConnectorPage() {
Back to Connectors
</Button>
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg">
{getConnectorIcon(EnumConnectorName.NOTION_CONNECTOR, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Notion</h1>
<p className="text-muted-foreground">
Connect your Notion workspace to search pages and databases.
</p>
</div>
</div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

41
surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx
View file

@ -1,23 +1,10 @@
"use client";
import {
IconBook,
IconBrandDiscord,
IconBrandGithub,
IconBrandNotion,
IconBrandSlack,
IconBrandWindows,
IconBrandZoom,
IconCalendar,
IconChecklist,
IconChevronDown,
IconChevronRight,
IconLayoutKanban,
IconLinkPlus,
IconMail,
IconTable,
IconTicket,
IconWorldWww,
} from "@tabler/icons-react";
import { AnimatePresence, motion, type Variants } from "framer-motion";
import Link from "next/link";
@ -27,6 +14,8 @@ import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
// Define the Connector type
interface Connector {
@ -53,14 +42,14 @@ const connectorCategories: ConnectorCategory[] = [
id: "tavily-api",
title: "Tavily API",
description: "Search the web using the Tavily API",
icon: <IconWorldWww className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.TAVILY_API, "h-6 w-6"),
status: "available",
},
{
id: "linkup-api",
title: "Linkup API",
description: "Search the web using the Linkup API",
icon: <IconLinkPlus className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.LINKUP_API, "h-6 w-6"),
status: "available",
},
],
@ -73,7 +62,7 @@ const connectorCategories: ConnectorCategory[] = [
id: "slack-connector",
title: "Slack",
description: "Connect to your Slack workspace to access messages and channels.",
icon: <IconBrandSlack className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.SLACK_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
@ -87,7 +76,7 @@ const connectorCategories: ConnectorCategory[] = [
id: "discord-connector",
title: "Discord",
description: "Connect to Discord servers to access messages and channels.",
icon: <IconBrandDiscord className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.DISCORD_CONNECTOR, "h-6 w-6"),
status: "available",
},
],
@ -100,21 +89,21 @@ const connectorCategories: ConnectorCategory[] = [
id: "linear-connector",
title: "Linear",
description: "Connect to Linear to search issues, comments and project data.",
icon: <IconLayoutKanban className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.LINEAR_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "jira-connector",
title: "Jira",
description: "Connect to Jira to search issues, tickets and project data.",
icon: <IconTicket className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.JIRA_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "clickup-connector",
title: "ClickUp",
description: "Connect to ClickUp to search tasks, comments and project data.",
icon: <IconChecklist className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.CLICKUP_CONNECTOR, "h-6 w-6"),
status: "available",
},
],
@ -127,28 +116,28 @@ const connectorCategories: ConnectorCategory[] = [
id: "notion-connector",
title: "Notion",
description: "Connect to your Notion workspace to access pages and databases.",
icon: <IconBrandNotion className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.NOTION_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "github-connector",
title: "GitHub",
description: "Connect a GitHub PAT to index code and docs from accessible repositories.",
icon: <IconBrandGithub className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.GITHUB_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "confluence-connector",
title: "Confluence",
description: "Connect to Confluence to search pages, comments and documentation.",
icon: <IconBook className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.CONFLUENCE_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "airtable-connector",
title: "Airtable",
description: "Connect to Airtable to search records, tables and database content.",
icon: <IconTable className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.AIRTABLE_CONNECTOR, "h-6 w-6"),
status: "available",
},
],
@ -161,14 +150,14 @@ const connectorCategories: ConnectorCategory[] = [
id: "google-calendar-connector",
title: "Google Calendar",
description: "Connect to Google Calendar to search events, meetings and schedules.",
icon: <IconCalendar className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR, "h-6 w-6"),
status: "available",
},
{
id: "google-gmail-connector",
title: "Gmail",
description: "Connect to your Gmail account to search through your emails.",
icon: <IconMail className="h-6 w-6" />,
icon: getConnectorIcon(EnumConnectorName.GOOGLE_GMAIL_CONNECTOR, "h-6 w-6"),
status: "available",
},
{

19
surfsense_web/app/dashboard/[search_space_id]/connectors/add/serper-api/page.tsx
View file

@ -28,6 +28,8 @@ import {
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
// Define the form schema with Zod
@ -65,7 +67,7 @@ export default function SerperApiPage() {
try {
await createConnector({
name: values.name,
connector_type: "SERPER_API",
connector_type: EnumConnectorName.SERPER_API,
config: {
SERPER_API_KEY: values.api_key,
},
@ -96,6 +98,21 @@ export default function SerperApiPage() {
Back to Connectors
</Button>
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg">
{getConnectorIcon(EnumConnectorName.SERPER_API, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Serper API</h1>
<p className="text-muted-foreground">
Connect Serper API for Google search capabilities.
</p>
</div>
</div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

19
surfsense_web/app/dashboard/[search_space_id]/connectors/add/slack-connector/page.tsx
View file

@ -35,6 +35,8 @@ import {
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
// Define the form schema with Zod
@ -72,7 +74,7 @@ export default function SlackConnectorPage() {
try {
await createConnector({
name: values.name,
connector_type: "SLACK_CONNECTOR",
connector_type: EnumConnectorName.SLACK_CONNECTOR,
config: {
SLACK_BOT_TOKEN: values.bot_token,
},
@ -103,6 +105,21 @@ export default function SlackConnectorPage() {
Back to Connectors
</Button>
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg">
{getConnectorIcon(EnumConnectorName.SLACK_CONNECTOR, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Slack</h1>
<p className="text-muted-foreground">
Connect your Slack workspace to search messages and channels.
</p>
</div>
</div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

19
surfsense_web/app/dashboard/[search_space_id]/connectors/add/tavily-api/page.tsx
View file

@ -28,6 +28,8 @@ import {
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
// Define the form schema with Zod
@ -65,7 +67,7 @@ export default function TavilyApiPage() {
try {
await createConnector({
name: values.name,
connector_type: "TAVILY_API",
connector_type: EnumConnectorName.TAVILY_API,
config: {
TAVILY_API_KEY: values.api_key,
},
@ -96,6 +98,21 @@ export default function TavilyApiPage() {
Back to Connectors
</Button>
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-lg">
{getConnectorIcon(EnumConnectorName.TAVILY_API, "h-6 w-6")}
</div>
<div>
<h1 className="text-3xl font-bold tracking-tight">Connect Tavily API</h1>
<p className="text-muted-foreground">
Connect Tavily API for AI-powered search capabilities.
</p>
</div>
</div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

42
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon.tsx
View file

@ -1,44 +1,12 @@
"use client";
import {
IconBook,
IconBrandDiscord,
IconBrandGithub,
IconBrandNotion,
IconBrandSlack,
IconBrandYoutube,
IconCalendar,
IconChecklist,
IconLayoutKanban,
IconMail,
IconTable,
IconTicket,
} from "@tabler/icons-react";
import { File, Globe, Webhook } from "lucide-react";
import type React from "react";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
type IconComponent = React.ComponentType<{ size?: number; className?: string }>;
const documentTypeIcons: Record<string, IconComponent> = {
EXTENSION: Webhook,
CRAWLED_URL: Globe,
SLACK_CONNECTOR: IconBrandSlack,
NOTION_CONNECTOR: IconBrandNotion,
FILE: File,
YOUTUBE_VIDEO: IconBrandYoutube,
GITHUB_CONNECTOR: IconBrandGithub,
LINEAR_CONNECTOR: IconLayoutKanban,
JIRA_CONNECTOR: IconTicket,
DISCORD_CONNECTOR: IconBrandDiscord,
CONFLUENCE_CONNECTOR: IconBook,
CLICKUP_CONNECTOR: IconChecklist,
GOOGLE_CALENDAR_CONNECTOR: IconCalendar,
GOOGLE_GMAIL_CONNECTOR: IconMail,
AIRTABLE_CONNECTOR: IconTable,
};
export function getDocumentTypeIcon(type: string): IconComponent {
return documentTypeIcons[type] ?? File;
export function getDocumentTypeIcon(type: string): React.ReactNode {
return getConnectorIcon(type);
}
export function getDocumentTypeLabel(type: string): string {
@ -49,7 +17,7 @@ export function getDocumentTypeLabel(type: string): string {
}
export function DocumentTypeChip({ type, className }: { type: string; className?: string }) {
const Icon = getDocumentTypeIcon(type);
const icon = getDocumentTypeIcon(type);
return (
<span
className={
@ -57,7 +25,7 @@ export function DocumentTypeChip({ type, className }: { type: string; className?
(className ?? "")
}
>
<Icon size={14} className="text-primary" />
<span className="text-primary">{icon}</span>
{getDocumentTypeLabel(type)}
</span>
);

8
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
View file

@ -197,7 +197,7 @@ export function DocumentsTableShell({
</TableHeader>
<TableBody>
{sorted.map((doc, index) => {
const Icon = getDocumentTypeIcon(doc.document_type);
const icon = getDocumentTypeIcon(doc.document_type);
const title = doc.title;
const truncatedTitle = title.length > 30 ? `${title.slice(0, 30)}...` : title;
return (
@ -235,7 +235,7 @@ export function DocumentsTableShell({
<Tooltip>
<TooltipTrigger asChild>
<span className="flex items-center gap-2">
<Icon size={16} className="text-muted-foreground shrink-0" />
<span className="text-muted-foreground shrink-0">{icon}</span>
<span>{truncatedTitle}</span>
</span>
</TooltipTrigger>
@ -293,7 +293,7 @@ export function DocumentsTableShell({
</div>
<div className="md:hidden divide-y">
{sorted.map((doc) => {
const Icon = getDocumentTypeIcon(doc.document_type);
const icon = getDocumentTypeIcon(doc.document_type);
return (
<div key={doc.id} className="p-3">
<div className="flex items-start gap-3">
@ -305,7 +305,7 @@ export function DocumentsTableShell({
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2 min-w-0">
<Icon size={16} className="text-muted-foreground shrink-0" />
<span className="text-muted-foreground shrink-0">{icon}</span>
<div className="font-medium truncate">{doc.title}</div>
</div>
<RowActions

3
surfsense_web/components/chat/ChatCitation.tsx
View file

@ -15,6 +15,7 @@ import {
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { useDocumentByChunk } from "@/hooks/use-document-by-chunk";
import { cn } from "@/lib/utils";
@ -74,7 +75,7 @@ export const CitationDisplay: React.FC<{ index: number; node: any }> = ({ index,
<SheetContent side="right" className="w-full sm:max-w-5xl lg:max-w-7xl">
<SheetHeader className="px-6 py-4 border-b">
<SheetTitle className="flex items-center gap-3 text-lg">
<FileText className="h-6 w-6" />
{getConnectorIcon(sourceType)}
{document?.title || node?.metadata?.title || node?.metadata?.group_name || "Source"}
</SheetTitle>
<SheetDescription className="text-base mt-2">

6
surfsense_web/components/chat/ChatInputGroup.tsx
View file

@ -5,10 +5,7 @@ import { Brain, Check, FolderOpen, Zap } from "lucide-react";
import { useParams } from "next/navigation";
import React, { Suspense, useCallback, useState } from "react";
import type { ResearchMode } from "@/components/chat";
import {
ConnectorButton as ConnectorButtonComponent,
getConnectorIcon,
} from "@/components/chat/ConnectorComponents";
import { ConnectorButton as ConnectorButtonComponent } from "@/components/chat/ConnectorComponents";
import { DocumentsDataTable } from "@/components/chat/DocumentsDataTable";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
@ -27,6 +24,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { type Document, useDocuments } from "@/hooks/use-documents";
import { useLLMConfigs, useLLMPreferences } from "@/hooks/use-llm-configs";
import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";

106
surfsense_web/components/chat/ChatSources.tsx
View file

@ -1,31 +1,14 @@
"use client";
import { getAnnotationData, type Message } from "@llamaindex/chat-ui";
import {
IconBrandDiscord,
IconBrandGithub,
IconBrandNotion,
IconBrandSlack,
IconBrandYoutube,
} from "@tabler/icons-react";
import {
BookOpen,
Calendar,
CheckSquare,
Database,
ExternalLink,
FileText,
Globe,
Link2,
Mail,
Puzzle,
} from "lucide-react";
import { ExternalLink, FileText } from "lucide-react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
interface Source {
id: string;
@ -56,86 +39,11 @@ interface SourceNode {
}
function getSourceIcon(type: string) {
switch (type) {
// GitHub
case "USER_SELECTED_GITHUB_CONNECTOR":
case "GITHUB_CONNECTOR":
return <IconBrandGithub className="h-4 w-4" />;
// Notion
case "USER_SELECTED_NOTION_CONNECTOR":
case "NOTION_CONNECTOR":
return <IconBrandNotion className="h-4 w-4" />;
// Slack
case "USER_SELECTED_SLACK_CONNECTOR":
case "SLACK_CONNECTOR":
return <IconBrandSlack className="h-4 w-4" />;
// Discord
case "USER_SELECTED_DISCORD_CONNECTOR":
case "DISCORD_CONNECTOR":
return <IconBrandDiscord className="h-4 w-4" />;
// Google Calendar
case "USER_SELECTED_GOOGLE_CALENDAR_CONNECTOR":
case "GOOGLE_CALENDAR_CONNECTOR":
return <Calendar className="h-4 w-4" />;
// Google Gmail
case "USER_SELECTED_GOOGLE_GMAIL_CONNECTOR":
case "GOOGLE_GMAIL_CONNECTOR":
return <Mail className="h-4 w-4" />;
// Airtable
case "USER_SELECTED_AIRTABLE_CONNECTOR":
case "AIRTABLE_CONNECTOR":
return <Database className="h-4 w-4" />;
// YouTube
case "USER_SELECTED_YOUTUBE_VIDEO":
case "YOUTUBE_VIDEO":
return <IconBrandYoutube className="h-4 w-4" />;
// Linear
case "USER_SELECTED_LINEAR_CONNECTOR":
case "LINEAR_CONNECTOR":
return <CheckSquare className="h-4 w-4" />;
// Jira
case "USER_SELECTED_JIRA_CONNECTOR":
case "JIRA_CONNECTOR":
return <CheckSquare className="h-4 w-4" />;
// Confluence
case "USER_SELECTED_CONFLUENCE_CONNECTOR":
case "CONFLUENCE_CONNECTOR":
return <BookOpen className="h-4 w-4" />;
// ClickUp
case "USER_SELECTED_CLICKUP_CONNECTOR":
case "CLICKUP_CONNECTOR":
return <CheckSquare className="h-4 w-4" />;
// Files
case "USER_SELECTED_FILE":
case "FILE":
return <FileText className="h-4 w-4" />;
// Extension
case "USER_SELECTED_EXTENSION":
case "EXTENSION":
return <Puzzle className="h-4 w-4" />;
// Crawled URL
case "USER_SELECTED_CRAWLED_URL":
case "CRAWLED_URL":
return <Link2 className="h-4 w-4" />;
// Default for any other source type
default:
return <Globe className="h-4 w-4" />;
}
// Handle USER_SELECTED_ prefix
const normalizedType = type.startsWith("USER_SELECTED_")
? type.replace("USER_SELECTED_", "")
: type;
return getConnectorIcon(normalizedType, "h-4 w-4");
}
function SourceCard({ source }: { source: Source }) {

76
surfsense_web/components/chat/ConnectorComponents.tsx
View file

@ -1,81 +1,9 @@
import {
IconBrandDiscord,
IconBrandGithub,
IconBrandNotion,
IconBrandSlack,
IconBrandYoutube,
IconCalendar,
IconLayoutKanban,
IconLinkPlus,
IconMail,
IconTable,
IconTicket,
} from "@tabler/icons-react";
import {
ChevronDown,
File,
FileText,
Globe,
Link,
MessageCircle,
Microscope,
Plus,
Search,
Sparkles,
Telescope,
Webhook,
} from "lucide-react";
import { ChevronDown, FileText, MessageCircle, Plus } from "lucide-react";
import type React from "react";
import { Button } from "@/components/ui/button";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import type { Connector, ResearchMode } from "./types";
// Helper function to get connector icon
export const getConnectorIcon = (connectorType: string) => {
const iconProps = { className: "h-4 w-4" };
switch (connectorType) {
case "LINKUP_API":
return <IconLinkPlus {...iconProps} />;
case "LINEAR_CONNECTOR":
return <IconLayoutKanban {...iconProps} />;
case "GITHUB_CONNECTOR":
return <IconBrandGithub {...iconProps} />;
case "YOUTUBE_VIDEO":
return <IconBrandYoutube {...iconProps} />;
case "CRAWLED_URL":
return <Globe {...iconProps} />;
case "FILE":
return <File {...iconProps} />;
case "EXTENSION":
return <Webhook {...iconProps} />;
case "SERPER_API":
case "TAVILY_API":
return <Link {...iconProps} />;
case "SLACK_CONNECTOR":
return <IconBrandSlack {...iconProps} />;
case "NOTION_CONNECTOR":
return <IconBrandNotion {...iconProps} />;
case "DISCORD_CONNECTOR":
return <IconBrandDiscord {...iconProps} />;
case "JIRA_CONNECTOR":
return <IconTicket {...iconProps} />;
case "GOOGLE_CALENDAR_CONNECTOR":
return <IconCalendar {...iconProps} />;
case "GOOGLE_GMAIL_CONNECTOR":
return <IconMail {...iconProps} />;
case "AIRTABLE_CONNECTOR":
return <IconTable {...iconProps} />;
case "DEEP":
return <Sparkles {...iconProps} />;
case "DEEPER":
return <Microscope {...iconProps} />;
case "DEEPEST":
return <Telescope {...iconProps} />;
default:
return <Search {...iconProps} />;
}
};
export const researcherOptions: {
value: ResearchMode;
label: string;

49
surfsense_web/components/chat/DocumentsDataTable.tsx
View file

@ -14,7 +14,6 @@ import {
} from "@tanstack/react-table";
import { ArrowUpDown, Calendar, FileText, Search } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
@ -33,6 +32,8 @@ import {
TableHeader,
TableRow,
} from "@/components/ui/table";
import { EnumConnectorName } from "@/contracts/enums/connector";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import type { Document, DocumentType } from "@/hooks/use-documents";
interface DocumentsDataTableProps {
@ -42,42 +43,16 @@ interface DocumentsDataTableProps {
initialSelectedDocuments?: Document[];
}
const DOCUMENT_TYPES: (DocumentType | "ALL")[] = [
// Combine EnumConnectorName with additional document types
const DOCUMENT_TYPES: (string | "ALL")[] = [
"ALL",
"FILE",
"EXTENSION",
"CRAWLED_URL",
"YOUTUBE_VIDEO",
"SLACK_CONNECTOR",
"NOTION_CONNECTOR",
"GITHUB_CONNECTOR",
"LINEAR_CONNECTOR",
"DISCORD_CONNECTOR",
"JIRA_CONNECTOR",
"CONFLUENCE_CONNECTOR",
"CLICKUP_CONNECTOR",
"GOOGLE_CALENDAR_CONNECTOR",
"GOOGLE_GMAIL_CONNECTOR",
"AIRTABLE_CONNECTOR",
...Object.values(EnumConnectorName),
];
const getDocumentTypeColor = (type: DocumentType) => {
const colors = {
FILE: "bg-blue-50 text-blue-700 border-blue-200",
EXTENSION: "bg-green-50 text-green-700 border-green-200",
CRAWLED_URL: "bg-purple-50 text-purple-700 border-purple-200",
YOUTUBE_VIDEO: "bg-red-50 text-red-700 border-red-200",
SLACK_CONNECTOR: "bg-yellow-50 text-yellow-700 border-yellow-200",
NOTION_CONNECTOR: "bg-indigo-50 text-indigo-700 border-indigo-200",
GITHUB_CONNECTOR: "bg-gray-50 text-gray-700 border-gray-200",
LINEAR_CONNECTOR: "bg-pink-50 text-pink-700 border-pink-200",
DISCORD_CONNECTOR: "bg-violet-50 text-violet-700 border-violet-200",
JIRA_CONNECTOR: "bg-orange-50 text-orange-700 border-orange-200",
CONFLUENCE_CONNECTOR: "bg-teal-50 text-teal-700 border-teal-200",
};
return colors[type] || "bg-gray-50 text-gray-700 border-gray-200";
};
const columns: ColumnDef<Document>[] = [
{
id: "select",
@ -133,13 +108,9 @@ const columns: ColumnDef<Document>[] = [
cell: ({ row }) => {
const type = row.getValue("document_type") as DocumentType;
return (
<Badge
variant="outline"
className={`${getDocumentTypeColor(type)} text-[10px] sm:text-xs px-1 sm:px-2`}
>
<span className="hidden sm:inline">{type.replace(/_/g, " ")}</span>
<span className="sm:hidden">{type.split("_")[0]}</span>
</Badge>
<div className="flex items-center gap-2" title={type}>
<span className="text-primary">{getConnectorIcon(type)}</span>
</div>
);
},
size: 80,
@ -214,7 +185,7 @@ export function DocumentsDataTable({
const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
const [documentTypeFilter, setDocumentTypeFilter] = useState<DocumentType | "ALL">("ALL");
const [documentTypeFilter, setDocumentTypeFilter] = useState<string | "ALL">("ALL");
// Memoize initial row selection to prevent infinite loops
const initialRowSelection = useMemo(() => {
@ -311,7 +282,7 @@ export function DocumentsDataTable({
</div>
<Select
value={documentTypeFilter}
onValueChange={(value) => setDocumentTypeFilter(value as DocumentType | "ALL")}
onValueChange={(value) => setDocumentTypeFilter(value as string | "ALL")}
>
<SelectTrigger className="w-full sm:w-[180px]">
<SelectValue />

70
surfsense_web/contracts/enums/connectorIcons.tsx Normal file
View file

@ -0,0 +1,70 @@
import {
IconBook,
IconBrandDiscord,
IconBrandGithub,
IconBrandNotion,
IconBrandSlack,
IconBrandYoutube,
IconCalendar,
IconChecklist,
IconLayoutKanban,
IconLinkPlus,
IconMail,
IconTable,
IconTicket,
IconWorldWww,
} from "@tabler/icons-react";
import { File, Globe, Link, Microscope, Search, Sparkles, Telescope, Webhook } from "lucide-react";
import { EnumConnectorName } from "./connector";
export const getConnectorIcon = (connectorType: EnumConnectorName | string, className?: string) => {
const iconProps = { className: className || "h-4 w-4" };
switch (connectorType) {
case EnumConnectorName.LINKUP_API:
return <IconLinkPlus {...iconProps} />;
case EnumConnectorName.LINEAR_CONNECTOR:
return <IconLayoutKanban {...iconProps} />;
case EnumConnectorName.GITHUB_CONNECTOR:
return <IconBrandGithub {...iconProps} />;
case EnumConnectorName.SERPER_API:
return <Link {...iconProps} />;
case EnumConnectorName.TAVILY_API:
return <IconWorldWww {...iconProps} />;
case EnumConnectorName.SLACK_CONNECTOR:
return <IconBrandSlack {...iconProps} />;
case EnumConnectorName.NOTION_CONNECTOR:
return <IconBrandNotion {...iconProps} />;
case EnumConnectorName.DISCORD_CONNECTOR:
return <IconBrandDiscord {...iconProps} />;
case EnumConnectorName.JIRA_CONNECTOR:
return <IconTicket {...iconProps} />;
case EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR:
return <IconCalendar {...iconProps} />;
case EnumConnectorName.GOOGLE_GMAIL_CONNECTOR:
return <IconMail {...iconProps} />;
case EnumConnectorName.AIRTABLE_CONNECTOR:
return <IconTable {...iconProps} />;
case EnumConnectorName.CONFLUENCE_CONNECTOR:
return <IconBook {...iconProps} />;
case EnumConnectorName.CLICKUP_CONNECTOR:
return <IconChecklist {...iconProps} />;
// Additional cases for non-enum connector types
case "YOUTUBE_VIDEO":
return <IconBrandYoutube {...iconProps} />;
case "CRAWLED_URL":
return <Globe {...iconProps} />;
case "FILE":
return <File {...iconProps} />;
case "EXTENSION":
return <Webhook {...iconProps} />;
case "DEEP":
return <Sparkles {...iconProps} />;
case "DEEPER":
return <Microscope {...iconProps} />;
case "DEEPEST":
return <Telescope {...iconProps} />;
default:
return <Search {...iconProps} />;
}
};