feat(web): add Slack messaging channel setup

This commit is contained in:
Anish Sarkar 2026-06-01 12:37:35 +05:30
parent b5cc19843c
commit ad24c3a369
2 changed files with 58 additions and 1 deletions

View file

@ -6,7 +6,12 @@ FASTAPI_BACKEND_INTERNAL_URL=https://your-internal-backend.example.com
NEXT_PUBLIC_FASTAPI_BACKEND_AUTH_TYPE=LOCAL or GOOGLE
NEXT_PUBLIC_ETL_SERVICE=UNSTRUCTURED or LLAMACLOUD or DOCLING
NEXT_PUBLIC_ZERO_CACHE_URL=http://localhost:4848
# Messaging gateway options
# WhatsApp UI toggle: disabled, cloud, or baileys
NEXT_PUBLIC_GATEWAY_WHATSAPP_INTAKE_MODE=disabled
# Slack gateway UI toggle: true or false
NEXT_PUBLIC_GATEWAY_SLACK_ENABLED=false
# Contact Form Vars (optional)
DATABASE_URL=postgresql://postgres:[YOUR-PASSWORD]@db.sdsf.supabase.co:5432/postgres

View file

@ -18,6 +18,7 @@ type Binding = {
external_display_name?: string | null;
external_username?: string | null;
suspended_reason?: string | null;
external_metadata?: Record<string, unknown> | null;
};
type Platform = {
@ -50,6 +51,7 @@ export function MessagingChannelsContent() {
const params = useParams<{ search_space_id: string }>();
const searchSpaceId = Number(params.search_space_id);
const whatsappMode = process.env.NEXT_PUBLIC_GATEWAY_WHATSAPP_INTAKE_MODE ?? "disabled";
const slackGatewayEnabled = process.env.NEXT_PUBLIC_GATEWAY_SLACK_ENABLED === "true";
const [bindings, setBindings] = useState<Binding[]>([]);
const [platforms, setPlatforms] = useState<Platform[]>([]);
const [pairing, setPairing] = useState<Pairing | null>(null);
@ -96,6 +98,17 @@ export function MessagingChannelsContent() {
await refresh();
}
async function installSlackGateway() {
const res = await authenticatedFetch(
`${BACKEND_URL}/api/v1/gateway/slack/install?search_space_id=${searchSpaceId}`
);
if (!res.ok) return;
const data = (await res.json()) as { auth_url?: string };
if (data.auth_url) {
window.location.href = data.auth_url;
}
}
function refreshBaileys() {
startTransition(async () => {
await refreshBaileysHealth();
@ -119,8 +132,13 @@ export function MessagingChannelsContent() {
const telegram = platforms.find((p) => p.platform === "telegram");
const whatsapp = platforms.find((p) => p.platform === "whatsapp");
const slack = platforms.find((p) => p.platform === "slack");
const baileysQr = baileysHealth?.qr || null;
const activeBindings = bindings.filter((binding) => binding.search_space_id === searchSpaceId);
const activeBindings = bindings.filter(
(binding) =>
binding.search_space_id === searchSpaceId &&
binding.external_metadata?.kind !== "slack_thread"
);
const renderPairingPanel = (platform: PairingPlatform) => {
if (!pairing || pairingPlatform !== platform) return null;
@ -170,6 +188,40 @@ export function MessagingChannelsContent() {
</CardContent>
</Card>
{slackGatewayEnabled ? (
<Card>
<CardHeader className="space-y-2">
<div className="flex items-center justify-between gap-3">
<CardTitle className="flex items-center gap-2 text-base">
<MessageCircle className="h-4 w-4" />
Slack Bot
</CardTitle>
<Badge variant={slack?.health_status === "ok" ? "default" : "secondary"}>
{slack ? "enabled" : "not enabled"}
</Badge>
</div>
<p className="text-sm text-muted-foreground">
Enable the SurfSense Slack bot so teammates can mention it in Slack. This is separate
from the Slack search connector.
</p>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex flex-wrap gap-2">
<Button onClick={installSlackGateway}>
{slack ? "Reconnect Slack Bot" : "Enable Slack Bot"}
</Button>
<Button variant="outline" onClick={refresh} disabled={loading}>
<RefreshCw className="mr-2 h-4 w-4" />
Refresh
</Button>
</div>
<p className="text-xs text-muted-foreground">
Slack search remains controlled by the Slack connector in the connector popup.
</p>
</CardContent>
</Card>
) : null}
{whatsappMode !== "disabled" ? (
<Card>
<CardHeader className="space-y-2">