490 lines
18 KiB
TypeScript
490 lines
18 KiB
TypeScript
import type { CapabilityInstall, Connection, ConnectionCatalogItem } from "@rakazo/contracts";
|
||
import {
|
||
abortableDelay,
|
||
buildFeaturedConnectorTiles,
|
||
EMPTY_PLUGIN_CATALOG_MESSAGE,
|
||
matchFeaturedConnectorId,
|
||
} from "@rakazo/core";
|
||
import { useEffect, useMemo, useRef, useState } from "react";
|
||
import {
|
||
ActivityIndicator,
|
||
Alert,
|
||
Linking,
|
||
Pressable,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
TextInput,
|
||
useWindowDimensions,
|
||
View,
|
||
} from "react-native";
|
||
import { SafeAreaView } from "react-native-safe-area-context";
|
||
import { rpc } from "../lib/api";
|
||
import { loadLastBotId } from "../lib/last-bot";
|
||
import { native } from "../lib/native";
|
||
|
||
type SourceKind = "treg" | "mcp" | "api";
|
||
|
||
export default function Integrations() {
|
||
const { width } = useWindowDimensions();
|
||
const catalogColumns = width >= 480 ? 2 : 1;
|
||
const [catalog, setCatalog] = useState<ConnectionCatalogItem[]>([]);
|
||
const [sources, setSources] = useState<CapabilityInstall[]>([]);
|
||
const [sourceKind, setSourceKind] = useState<SourceKind | null>(null);
|
||
const [advancedOpen, setAdvancedOpen] = useState(false);
|
||
const [name, setName] = useState("");
|
||
const [url, setUrl] = useState("");
|
||
const [credential, setCredential] = useState("");
|
||
const [requiresAuth, setRequiresAuth] = useState(true);
|
||
const [pending, setPending] = useState<string | null>(null);
|
||
const [catalogError, setCatalogError] = useState<string | null>(null);
|
||
const [sourceError, setSourceError] = useState<string | null>(null);
|
||
const [lastBotId, setLastBotId] = useState("");
|
||
const [catalogReady, setCatalogReady] = useState(false);
|
||
const connectionAttempt = useRef<AbortController | null>(null);
|
||
|
||
const featuredTiles = useMemo(() => buildFeaturedConnectorTiles(catalog), [catalog]);
|
||
const catalogApps = useMemo(
|
||
() =>
|
||
catalog.filter(
|
||
(item) =>
|
||
matchFeaturedConnectorId(item.slug) === null &&
|
||
matchFeaturedConnectorId(item.name) === null,
|
||
),
|
||
[catalog],
|
||
);
|
||
|
||
async function refresh() {
|
||
const catalogResult = await rpc<ConnectionCatalogItem[]>("connections/catalog");
|
||
setCatalog(catalogResult);
|
||
setCatalogReady(true);
|
||
try {
|
||
const installs = await rpc<CapabilityInstall[]>("capabilities/list");
|
||
setSources(installs.filter((item) => item.kind === "mcp" || item.kind === "api"));
|
||
} catch {
|
||
// Tool sources are optional; keep featured/catalog usable if this fails.
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
void refresh().catch((reason) => {
|
||
setCatalogReady(false);
|
||
setCatalogError(reason instanceof Error ? reason.message : "Could not load integrations");
|
||
});
|
||
void loadLastBotId().then(setLastBotId);
|
||
return () => connectionAttempt.current?.abort();
|
||
}, []);
|
||
|
||
function closeAdvanced() {
|
||
setAdvancedOpen(false);
|
||
setSourceKind(null);
|
||
setSourceError(null);
|
||
setName("");
|
||
setUrl("");
|
||
setCredential("");
|
||
setRequiresAuth(true);
|
||
}
|
||
|
||
async function notifyAppConnected(item: ConnectionCatalogItem) {
|
||
const botId = lastBotId || (await loadLastBotId());
|
||
if (!botId) return;
|
||
if (botId !== lastBotId) setLastBotId(botId);
|
||
void rpc("onboarding/appConnected", { botId, provider: item.slug }).catch(() => undefined);
|
||
}
|
||
|
||
async function connect(item: ConnectionCatalogItem) {
|
||
connectionAttempt.current?.abort();
|
||
const controller = new AbortController();
|
||
connectionAttempt.current = controller;
|
||
const key = `${item.connectorId}:${item.slug}`;
|
||
setPending(key);
|
||
setCatalogError(null);
|
||
try {
|
||
const started = await rpc<{ connectionId: string; authorizationUrl: string | null }>(
|
||
"connections/begin",
|
||
{
|
||
connectorId: item.connectorId,
|
||
provider: item.slug,
|
||
displayName: item.name,
|
||
},
|
||
);
|
||
if (started.authorizationUrl) await Linking.openURL(started.authorizationUrl);
|
||
for (let attempt = 0; attempt < 45; attempt += 1) {
|
||
if (controller.signal.aborted) return;
|
||
const row = await rpc<Connection>("connections/complete", {
|
||
connectionId: started.connectionId,
|
||
}).catch(() => undefined);
|
||
if (row?.status === "connected") {
|
||
if (controller.signal.aborted) return;
|
||
void notifyAppConnected(item);
|
||
await refresh();
|
||
return;
|
||
}
|
||
await abortableDelay(2_000, controller.signal);
|
||
}
|
||
if (controller.signal.aborted) return;
|
||
Alert.alert(
|
||
"Connection pending",
|
||
"Finish connecting in the browser, then refresh this page.",
|
||
);
|
||
} catch (reason) {
|
||
if (controller.signal.aborted) return;
|
||
setCatalogError(reason instanceof Error ? reason.message : "Could not connect");
|
||
} finally {
|
||
if (connectionAttempt.current === controller) {
|
||
connectionAttempt.current = null;
|
||
setPending(null);
|
||
}
|
||
}
|
||
}
|
||
|
||
async function revoke(item: ConnectionCatalogItem) {
|
||
const key = `${item.connectorId}:${item.slug}`;
|
||
setPending(key);
|
||
setCatalogError(null);
|
||
const connections = await rpc<Connection[]>("connections/list").catch(() => []);
|
||
const matches = connections.filter(
|
||
(connection) =>
|
||
connection.connectorId === item.connectorId && connection.provider === item.slug,
|
||
);
|
||
try {
|
||
const row =
|
||
matches.find((connection) => connection.status === "connected") ??
|
||
matches.find((connection) => connection.status === "pending") ??
|
||
matches.find((connection) => connection.status === "error");
|
||
if (!row) throw new Error(`No connection record found for ${item.name}.`);
|
||
await rpc("connections/revoke", { connectionId: row.id });
|
||
await refresh();
|
||
} catch (reason) {
|
||
setCatalogError(reason instanceof Error ? reason.message : "Could not revoke connection");
|
||
} finally {
|
||
setPending(null);
|
||
}
|
||
}
|
||
|
||
function beginSource(kind: SourceKind) {
|
||
setSourceKind(kind);
|
||
setSourceError(null);
|
||
setName(kind === "treg" ? "Treg" : "");
|
||
setUrl(kind === "treg" ? "https://treg.to/mcp/" : "");
|
||
setCredential("");
|
||
setRequiresAuth(kind === "treg");
|
||
}
|
||
|
||
async function addSource() {
|
||
if (!sourceKind) return;
|
||
setPending("source");
|
||
setSourceError(null);
|
||
try {
|
||
await rpc("capabilities/install", {
|
||
kind: sourceKind === "api" ? "api" : "mcp",
|
||
name: name.trim() || (sourceKind === "treg" ? "Treg" : "Custom connector"),
|
||
source: url.trim(),
|
||
credential: credential.trim() || undefined,
|
||
config:
|
||
sourceKind === "treg"
|
||
? { preset: "treg", auth: { type: "bearer" } }
|
||
: sourceKind === "api"
|
||
? { openApi: true, auth: { type: requiresAuth ? "bearer" : "none" } }
|
||
: { preset: "custom", auth: { type: requiresAuth ? "bearer" : "none" } },
|
||
});
|
||
setCredential("");
|
||
setSourceKind(null);
|
||
await refresh();
|
||
} catch (reason) {
|
||
setSourceError(reason instanceof Error ? reason.message : "Could not add source");
|
||
} finally {
|
||
setPending(null);
|
||
}
|
||
}
|
||
|
||
async function removeSource(source: CapabilityInstall) {
|
||
setPending(source.id);
|
||
setSourceError(null);
|
||
try {
|
||
await rpc("capabilities/remove", { id: source.id });
|
||
setSources((current) => current.filter((item) => item.id !== source.id));
|
||
} catch (reason) {
|
||
setSourceError(reason instanceof Error ? reason.message : "Could not remove source");
|
||
} finally {
|
||
setPending(null);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<SafeAreaView edges={["bottom"]} style={styles.screen}>
|
||
<ScrollView contentContainerStyle={styles.content}>
|
||
<Text style={styles.explanation}>Connect apps.</Text>
|
||
|
||
{catalogError ? <Text style={styles.error}>{catalogError}</Text> : null}
|
||
|
||
{!catalogReady ? <ActivityIndicator color={native.fillPressed} /> : null}
|
||
|
||
{catalogReady && catalog.length === 0 ? (
|
||
<Text style={styles.secondary}>{EMPTY_PLUGIN_CATALOG_MESSAGE}</Text>
|
||
) : null}
|
||
|
||
{catalogReady && catalog.length > 0 ? (
|
||
<View style={catalogColumns === 2 ? styles.catalogGrid : styles.catalogStack}>
|
||
{featuredTiles.map((tile) => {
|
||
const item = tile.item;
|
||
const key = item ? `${item.connectorId}:${item.slug}` : tile.id;
|
||
const disabled = tile.missing || !item;
|
||
const connected = item?.connected ?? false;
|
||
return (
|
||
<View
|
||
key={key}
|
||
style={[
|
||
styles.row,
|
||
catalogColumns === 2 ? styles.catalogCell : null,
|
||
disabled ? { opacity: 0.7 } : null,
|
||
]}
|
||
>
|
||
<View style={styles.grow}>
|
||
<Text numberOfLines={1} style={styles.title}>
|
||
{tile.label}
|
||
</Text>
|
||
{disabled ? (
|
||
<Text style={styles.secondary}>Not in the plugin catalog</Text>
|
||
) : null}
|
||
</View>
|
||
{disabled || !item ? null : (
|
||
<Pressable
|
||
accessibilityRole="button"
|
||
accessibilityLabel={connected ? `Remove ${tile.label}` : `Add ${tile.label}`}
|
||
disabled={pending === key}
|
||
onPress={() => void (connected ? revoke(item) : connect(item))}
|
||
>
|
||
<Text style={styles.link}>
|
||
{pending === key ? "Working…" : connected ? "Remove" : "Add"}
|
||
</Text>
|
||
</Pressable>
|
||
)}
|
||
</View>
|
||
);
|
||
})}
|
||
{catalogApps.map((item) => {
|
||
const key = `${item.connectorId}:${item.slug}`;
|
||
return (
|
||
<View
|
||
key={key}
|
||
style={[styles.row, catalogColumns === 2 ? styles.catalogCell : null]}
|
||
>
|
||
<View style={styles.grow}>
|
||
<Text numberOfLines={1} style={styles.title}>
|
||
{item.name}
|
||
</Text>
|
||
</View>
|
||
<Pressable
|
||
accessibilityRole="button"
|
||
accessibilityLabel={item.connected ? `Remove ${item.name}` : `Add ${item.name}`}
|
||
disabled={pending === key}
|
||
onPress={() => void (item.connected ? revoke(item) : connect(item))}
|
||
>
|
||
<Text style={styles.link}>
|
||
{pending === key ? "Working…" : item.connected ? "Remove" : "Add"}
|
||
</Text>
|
||
</Pressable>
|
||
</View>
|
||
);
|
||
})}
|
||
</View>
|
||
) : null}
|
||
|
||
<Pressable
|
||
accessibilityRole="button"
|
||
accessibilityState={{ expanded: advancedOpen }}
|
||
testID="integrations-advanced"
|
||
onPress={() => {
|
||
if (advancedOpen) closeAdvanced();
|
||
else setAdvancedOpen(true);
|
||
}}
|
||
style={styles.advancedToggle}
|
||
>
|
||
<Text style={styles.advancedLabel}>Advanced</Text>
|
||
<Text style={styles.chevron}>›</Text>
|
||
</Pressable>
|
||
|
||
{advancedOpen ? (
|
||
<View style={styles.advancedBody}>
|
||
<View style={styles.actions}>
|
||
{(["mcp", "api", "treg"] as const).map((kind) => (
|
||
<Pressable
|
||
key={kind}
|
||
accessibilityRole="button"
|
||
onPress={() => beginSource(kind)}
|
||
style={styles.smallButton}
|
||
>
|
||
<Text style={styles.buttonLabel}>
|
||
{kind === "treg"
|
||
? "Add Treg"
|
||
: kind === "mcp"
|
||
? "Add MCP server"
|
||
: "Add OpenAPI"}
|
||
</Text>
|
||
</Pressable>
|
||
))}
|
||
</View>
|
||
|
||
{sourceError ? <Text style={styles.error}>{sourceError}</Text> : null}
|
||
|
||
{sourceKind ? (
|
||
<View style={styles.card}>
|
||
<Text style={styles.title}>
|
||
{sourceKind === "treg"
|
||
? "Connect Treg"
|
||
: sourceKind === "mcp"
|
||
? "Remote MCP server"
|
||
: "OpenAPI JSON"}
|
||
</Text>
|
||
<TextInput
|
||
value={name}
|
||
onChangeText={setName}
|
||
placeholder="Display name"
|
||
placeholderTextColor={native.tertiaryLabel}
|
||
style={styles.input}
|
||
/>
|
||
{sourceKind !== "treg" ? (
|
||
<TextInput
|
||
value={url}
|
||
onChangeText={setUrl}
|
||
autoCapitalize="none"
|
||
autoCorrect={false}
|
||
placeholder={
|
||
sourceKind === "mcp"
|
||
? "https://example.com/mcp"
|
||
: "https://example.com/openapi.json"
|
||
}
|
||
placeholderTextColor={native.tertiaryLabel}
|
||
style={styles.input}
|
||
/>
|
||
) : null}
|
||
{sourceKind !== "treg" ? (
|
||
<Pressable
|
||
accessibilityRole="button"
|
||
onPress={() => setRequiresAuth((value) => !value)}
|
||
style={styles.authToggle}
|
||
>
|
||
<Text style={styles.secondary}>
|
||
{requiresAuth ? "Bearer authentication" : "No authentication"}
|
||
</Text>
|
||
</Pressable>
|
||
) : null}
|
||
{sourceKind === "treg" || requiresAuth ? (
|
||
<TextInput
|
||
value={credential}
|
||
onChangeText={setCredential}
|
||
secureTextEntry
|
||
autoCapitalize="none"
|
||
autoCorrect={false}
|
||
placeholder={sourceKind === "treg" ? "Treg token" : "Bearer token"}
|
||
placeholderTextColor={native.tertiaryLabel}
|
||
style={styles.input}
|
||
/>
|
||
) : null}
|
||
<View style={styles.actions}>
|
||
<Pressable
|
||
accessibilityRole="button"
|
||
disabled={pending === "source"}
|
||
onPress={() => void addSource()}
|
||
style={styles.smallButton}
|
||
>
|
||
{pending === "source" ? (
|
||
<ActivityIndicator color={native.label} />
|
||
) : (
|
||
<Text style={styles.buttonLabel}>Verify and add</Text>
|
||
)}
|
||
</Pressable>
|
||
<Pressable
|
||
accessibilityRole="button"
|
||
onPress={() => setSourceKind(null)}
|
||
style={styles.smallButton}
|
||
>
|
||
<Text style={styles.buttonLabel}>Cancel</Text>
|
||
</Pressable>
|
||
</View>
|
||
</View>
|
||
) : null}
|
||
|
||
<Text style={styles.section}>Tool sources</Text>
|
||
{sources.length === 0 ? (
|
||
<Text style={styles.secondary}>No custom sources installed.</Text>
|
||
) : null}
|
||
{sources.map((source) => (
|
||
<View key={source.id} style={styles.row}>
|
||
<View style={styles.grow}>
|
||
<Text style={styles.title}>{source.name}</Text>
|
||
<Text numberOfLines={1} style={styles.secondary}>
|
||
{source.kind.toUpperCase()} · {source.source}
|
||
</Text>
|
||
</View>
|
||
<Pressable accessibilityRole="button" onPress={() => void removeSource(source)}>
|
||
<Text style={styles.remove}>
|
||
{pending === source.id ? "Removing…" : "Remove"}
|
||
</Text>
|
||
</Pressable>
|
||
</View>
|
||
))}
|
||
</View>
|
||
) : null}
|
||
</ScrollView>
|
||
</SafeAreaView>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
screen: { flex: 1, backgroundColor: native.page },
|
||
content: { padding: 20, gap: 14 },
|
||
explanation: { color: native.secondaryLabel, fontSize: 14, lineHeight: 20 },
|
||
section: { color: native.secondaryLabel, fontSize: 14, fontWeight: "600", marginTop: 10 },
|
||
actions: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
|
||
smallButton: {
|
||
minHeight: 42,
|
||
paddingHorizontal: 14,
|
||
borderRadius: 12,
|
||
backgroundColor: native.fill,
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
},
|
||
buttonLabel: { color: native.label, fontSize: 14, fontWeight: "600" },
|
||
card: { padding: 16, borderRadius: 16, backgroundColor: native.fill, gap: 12 },
|
||
input: {
|
||
minHeight: 48,
|
||
borderRadius: 12,
|
||
backgroundColor: native.fillPressed,
|
||
color: native.label,
|
||
paddingHorizontal: 14,
|
||
fontSize: 15,
|
||
},
|
||
authToggle: { minHeight: 42, justifyContent: "center" },
|
||
catalogGrid: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
|
||
catalogStack: { gap: 8 },
|
||
catalogCell: { flexGrow: 1, flexBasis: "47%", maxWidth: "49%" },
|
||
row: {
|
||
minHeight: 56,
|
||
paddingHorizontal: 12,
|
||
paddingVertical: 12,
|
||
borderRadius: 14,
|
||
backgroundColor: native.fill,
|
||
flexDirection: "row",
|
||
alignItems: "center",
|
||
gap: 10,
|
||
},
|
||
grow: { flex: 1, gap: 3, minWidth: 0 },
|
||
title: { color: native.label, fontSize: 15, fontWeight: "600" },
|
||
secondary: { color: native.secondaryLabel, fontSize: 13 },
|
||
link: { color: native.label, fontSize: 14, fontWeight: "600" },
|
||
remove: { color: "#E96B6B", fontSize: 14, fontWeight: "600" },
|
||
error: { color: "#E96B6B", fontSize: 14 },
|
||
advancedToggle: {
|
||
marginTop: 8,
|
||
minHeight: 44,
|
||
flexDirection: "row",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
},
|
||
advancedLabel: { color: native.secondaryLabel, fontSize: 14 },
|
||
advancedBody: { gap: 14 },
|
||
chevron: { color: native.secondaryLabel, fontSize: 18 },
|
||
});
|