import { Image } from "expo-image";
import { Path, Svg } from "react-native-svg";
import { View } from "react-native";
import { providerInstanceInitials } from "@t3tools/client-runtime/state/provider-instance-display";
import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
import { AppText as Text } from "./AppText";
type ProviderIconProps = {
readonly provider: string | null | undefined;
readonly size?: number;
};
export function ProviderIcon(props: ProviderIconProps) {
const { themeAppearance } = useAppearancePreferences();
const isDarkMode = themeAppearance === "dark";
const size = props.size ?? 16;
const mono = isDarkMode ? "#e5e5e5" : "#171717";
if (props.provider?.trim().toLowerCase() === "antigravity") {
return (
);
}
if (props.provider === "claudeAgent") {
return (
);
}
if (props.provider === "grok") {
const fill = isDarkMode ? "#F5F5F5" : "#0F0F0F";
return (
);
}
if (props.provider === "cursor") {
return (
);
}
if (props.provider === "opencode") {
return (
);
}
// codex (and unknown drivers)
return (
);
}
/**
* `ProviderIcon` plus the web sidebar's account badge: an accent-color
* initials bubble in the bottom-right corner, drawn when `showBadge` is set
* (accent color present, or several instances share this driver). The glyph
* dims to 60% opacity while the badge stays fully saturated, matching
* `apps/web/src/components/chat/ProviderInstanceIcon.tsx`.
*/
export function ProviderInstanceIcon(props: {
readonly provider: string | null | undefined;
readonly size?: number;
readonly displayName: string;
readonly accentColor?: string;
readonly showBadge?: boolean;
readonly surfaceColor: string;
}) {
return (
{props.showBadge ? (
{providerInstanceInitials(props.displayName)}
) : null}
);
}