+ {/* Main container with improved styling */}
+
+ {/* Header with better visual separation */}
+
+
+
+
+ Follow-up Questions
+
+
+ {furtherQuestions.length} suggestion
+ {furtherQuestions.length !== 1 ? "s" : ""}
+
+
-
- {/* Questions container with enhanced scrolling */}
-
-
- {/* Left fade gradient */}
-
-
- {/* Right fade gradient */}
-
-
- {/* Scrollable container */}
-
-
- {furtherQuestions.map((question: any, qIndex: number) => (
-
- ))}
+ {/* Questions container with enhanced scrolling */}
+
+
+ {/* Left fade gradient */}
+
+
+ {/* Right fade gradient */}
+
+
+ {/* Scrollable container */}
+
+
+ {furtherQuestions.map(
+ (question: any, qIndex: number) => (
+
+ ),
+ )}
+
-
- );
- })()}
+ );
+ })()}
{/* Scroll to bottom button */}
-
- );
+ {/* Reference for auto-scrolling */}
+
+
+
+ );
};
export default ChatPage;
diff --git a/surfsense_web/components/chat/ConnectorComponents.tsx b/surfsense_web/components/chat/ConnectorComponents.tsx
index 4d0aa11..d7c977b 100644
--- a/surfsense_web/components/chat/ConnectorComponents.tsx
+++ b/surfsense_web/components/chat/ConnectorComponents.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import {
- ChevronDown,
+import React from "react";
+import {
+ ChevronDown,
Plus,
Search,
Globe,
@@ -12,78 +12,99 @@ import {
Webhook,
MessageCircle,
FileText,
-} from 'lucide-react';
-import { IconBrandNotion, IconBrandSlack, IconBrandYoutube, IconBrandGithub, IconLayoutKanban, IconLinkPlus, IconBrandDiscord } from "@tabler/icons-react";
-import { Button } from '@/components/ui/button';
-import { Connector, ResearchMode } from './types';
+} from "lucide-react";
+import {
+ IconBrandNotion,
+ IconBrandSlack,
+ IconBrandYoutube,
+ IconBrandGithub,
+ IconLayoutKanban,
+ IconLinkPlus,
+ IconBrandDiscord,
+ IconTicket,
+} from "@tabler/icons-react";
+import { Button } from "@/components/ui/button";
+import { 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':
+
+ switch (connectorType) {
+ case "LINKUP_API":
return
;
- case 'LINEAR_CONNECTOR':
+ case "LINEAR_CONNECTOR":
return
;
- case 'GITHUB_CONNECTOR':
+ case "GITHUB_CONNECTOR":
return
;
- case 'YOUTUBE_VIDEO':
+ case "YOUTUBE_VIDEO":
return
;
- case 'CRAWLED_URL':
+ case "CRAWLED_URL":
return
;
- case 'FILE':
- return
;
- case 'EXTENSION':
- return
;
- case 'SERPER_API':
- case 'TAVILY_API':
+ case "FILE":
+ return
;
+ case "EXTENSION":
+ return
;
+ case "SERPER_API":
+ case "TAVILY_API":
return
;
- case 'SLACK_CONNECTOR':
+ case "SLACK_CONNECTOR":
return
;
- case 'NOTION_CONNECTOR':
+ case "NOTION_CONNECTOR":
return
;
- case 'DISCORD_CONNECTOR':
+ case "DISCORD_CONNECTOR":
return
;
- case 'DEEP':
+ case "JIRA_CONNECTOR":
+ return
;
+ case "DEEP":
return
;
- case 'DEEPER':
+ case "DEEPER":
return
;
- case 'DEEPEST':
+ case "DEEPEST":
return
;
default:
return
;
}
};
-export const researcherOptions: { value: ResearchMode; label: string; icon: React.ReactNode }[] = [
+export const researcherOptions: {
+ value: ResearchMode;
+ label: string;
+ icon: React.ReactNode;
+}[] = [
{
- value: 'QNA',
- label: 'Q/A',
- icon: getConnectorIcon('GENERAL')
+ value: "QNA",
+ label: "Q/A",
+ icon: getConnectorIcon("GENERAL"),
},
{
- value: 'REPORT_GENERAL',
- label: 'General',
- icon: getConnectorIcon('GENERAL')
+ value: "REPORT_GENERAL",
+ label: "General",
+ icon: getConnectorIcon("GENERAL"),
},
{
- value: 'REPORT_DEEP',
- label: 'Deep',
- icon: getConnectorIcon('DEEP')
+ value: "REPORT_DEEP",
+ label: "Deep",
+ icon: getConnectorIcon("DEEP"),
},
{
- value: 'REPORT_DEEPER',
- label: 'Deeper',
- icon: getConnectorIcon('DEEPER')
+ value: "REPORT_DEEPER",
+ label: "Deeper",
+ icon: getConnectorIcon("DEEPER"),
},
-]
+];
/**
* Displays a small icon for a connector type
*/
-export const ConnectorIcon = ({ type, index = 0 }: { type: string; index?: number }) => (
-
(
+
@@ -109,24 +130,30 @@ type ConnectorButtonProps = {
/**
* Button that displays selected connectors and opens connector selection dialog
*/
-export const ConnectorButton = ({ selectedConnectors, onClick, connectorSources }: ConnectorButtonProps) => {
+export const ConnectorButton = ({
+ selectedConnectors,
+ onClick,
+ connectorSources,
+}: ConnectorButtonProps) => {
const totalConnectors = connectorSources.length;
const selectedCount = selectedConnectors.length;
const progressPercentage = (selectedCount / totalConnectors) * 100;
-
+
// Get the name of a single selected connector
const getSingleConnectorName = () => {
- const connector = connectorSources.find(c => c.type === selectedConnectors[0]);
- return connector?.name || '';
+ const connector = connectorSources.find(
+ (c) => c.type === selectedConnectors[0],
+ );
+ return connector?.name || "";
};
-
+
// Get display text based on selection count
const getDisplayText = () => {
if (selectedCount === totalConnectors) return "All Connectors";
if (selectedCount === 1) return getSingleConnectorName();
return `${selectedCount} Connectors`;
};
-
+
// Render the empty state (no connectors selected)
const renderEmptyState = () => (
<>
@@ -134,7 +161,7 @@ export const ConnectorButton = ({ selectedConnectors, onClick, connectorSources
Select Connectors
);
-
+
// Render the selected connectors preview
const renderSelectedConnectors = () => (
<>
@@ -143,32 +170,36 @@ export const ConnectorButton = ({ selectedConnectors, onClick, connectorSources
{selectedConnectors.slice(0, 3).map((type, index) => (
))}
-
+
{/* Show count indicator if more than 3 connectors are selected */}
{selectedCount > 3 && }
-
+
{/* Display text */}
{getDisplayText()}
);
-
+
return (