Add user-owned IM channel connections

frontend/src/core/channels/api.ts

@@ -0,0 +1,78 @@
+import { fetch } from "@/core/api/fetcher";
+import { getBackendBaseURL } from "@/core/config";
+
+import type {
+  ChannelConnectResponse,
+  ChannelConnection,
+  ChannelConnectionsResponse,
+  ChannelProviderId,
+  ChannelProvidersResponse,
+} from "./types";
+
+function channelsUrl(path: string): string {
+  return `${getBackendBaseURL()}/api/channels${path}`;
+}
+
+async function throwChannelApiError(
+  response: Response,
+  fallback: string,
+): Promise<never> {
+  const body = (await response.json().catch(() => ({}))) as {
+    detail?: unknown;
+  };
+  throw new Error(typeof body.detail === "string" ? body.detail : fallback);
+}
+
+export async function listChannelProviders(): Promise<ChannelProvidersResponse> {
+  const response = await fetch(channelsUrl("/providers"));
+  if (!response.ok) {
+    await throwChannelApiError(
+      response,
+      `Failed to load channel providers: ${response.statusText}`,
+    );
+  }
+  return response.json() as Promise<ChannelProvidersResponse>;
+}
+
+export async function listChannelConnections(): Promise<ChannelConnection[]> {
+  const response = await fetch(channelsUrl("/connections"));
+  if (!response.ok) {
+    await throwChannelApiError(
+      response,
+      `Failed to load channel connections: ${response.statusText}`,
+    );
+  }
+  const data = (await response.json()) as ChannelConnectionsResponse;
+  return data.connections;
+}
+
+export async function connectChannelProvider(
+  provider: ChannelProviderId,
+): Promise<ChannelConnectResponse> {
+  const response = await fetch(
+    channelsUrl(`/${encodeURIComponent(provider)}/connect`),
+    { method: "POST" },
+  );
+  if (!response.ok) {
+    await throwChannelApiError(
+      response,
+      `Failed to connect ${provider}: ${response.statusText}`,
+    );
+  }
+  return response.json() as Promise<ChannelConnectResponse>;
+}
+
+export async function disconnectChannelConnection(
+  connectionId: string,
+): Promise<void> {
+  const response = await fetch(
+    channelsUrl(`/connections/${encodeURIComponent(connectionId)}`),
+    { method: "DELETE" },
+  );
+  if (!response.ok) {
+    await throwChannelApiError(
+      response,
+      `Failed to disconnect channel: ${response.statusText}`,
+    );
+  }
+}

frontend/src/core/channels/hooks.ts

@@ -0,0 +1,61 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import {
+  connectChannelProvider,
+  disconnectChannelConnection,
+  listChannelConnections,
+  listChannelProviders,
+} from "./api";
+import type { ChannelProviderId } from "./types";
+
+export const channelProviderQueryKey = ["channelProviders"] as const;
+export const channelConnectionsQueryKey = ["channelConnections"] as const;
+
+export function useChannelProviders() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: channelProviderQueryKey,
+    queryFn: () => listChannelProviders(),
+  });
+  return {
+    enabled: data?.enabled ?? false,
+    providers: data?.providers ?? [],
+    isLoading,
+    error,
+  };
+}
+
+export function useChannelConnections() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: channelConnectionsQueryKey,
+    queryFn: () => listChannelConnections(),
+  });
+  return { connections: data ?? [], isLoading, error };
+}
+
+export function useConnectChannelProvider() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (provider: ChannelProviderId) =>
+      connectChannelProvider(provider),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: channelProviderQueryKey });
+      void queryClient.invalidateQueries({
+        queryKey: channelConnectionsQueryKey,
+      });
+    },
+  });
+}
+
+export function useDisconnectChannelConnection() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (connectionId: string) =>
+      disconnectChannelConnection(connectionId),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: channelProviderQueryKey });
+      void queryClient.invalidateQueries({
+        queryKey: channelConnectionsQueryKey,
+      });
+    },
+  });
+}

frontend/src/core/channels/types.ts

@@ -0,0 +1,38 @@
+export type ChannelProviderId = "telegram" | "slack" | "discord" | string;
+
+export interface ChannelProvider {
+  provider: ChannelProviderId;
+  display_name: string;
+  enabled: boolean;
+  configured: boolean;
+  auth_mode: string;
+  connection_status: string;
+}
+
+export interface ChannelProvidersResponse {
+  enabled: boolean;
+  providers: ChannelProvider[];
+}
+
+export interface ChannelConnection {
+  id: string;
+  provider: ChannelProviderId;
+  status: string;
+  external_account_id?: string | null;
+  external_account_name?: string | null;
+  workspace_id?: string | null;
+  workspace_name?: string | null;
+  scopes: string[];
+  metadata: Record<string, unknown>;
+}
+
+export interface ChannelConnectionsResponse {
+  connections: ChannelConnection[];
+}
+
+export interface ChannelConnectResponse {
+  provider: ChannelProviderId;
+  mode: string;
+  url: string;
+  expires_in: number;
+}