AI companion chat app like Character.ai, Replika and Talkie

37export default function DiscoverScreen() {
38  const { user } = useAuth();
39  const { width } = useWindowDimensions();
40  const { data: profile } = useMyProfile();
41  const { data: featured } = useFeaturedCharacters();
42  const { data: recent } = useRecentConversations(6);
43  const [category, setCategory] = useState<string>('all');
44  const { data: characters, isLoading, error, refetch, isFetching } = useCharacters(category);
45
46  const muted = useThemeColor('--muted-foreground');
47  const cardBg = useThemeColor('--card');
48  const border = useThemeColor('--border');
49  const fg = useThemeColor('--foreground');
50  const chipBg = useThemeColor('--background');
51
52  const name = profile?.display_name ?? 'there';
53  const greetingText = `${greeting()}, ${firstName(name)}`;
54
55  const hasRecent = (recent?.length ?? 0) > 0;
56  const now = Date.now();
57
58  const hasNew = (lastMessageAt: string) => {
59    return now - new Date(lastMessageAt).getTime() < 3600_000;
60  };
61
62  const renderCharacterCard = (c: { id: string; name: string; tagline: string; avatar_url: string | null; chat_count: number; creator_id: string | null; creator?: { username?: string | null } | null }) => (
63    <Pressable
64      key={c.id}
65      onPress={() => router.push(`/character/${c.id}`)}
66      className="mb-4 w-[48%]"
67    >
68      <View className="overflow-hidden rounded-3xl" style={{ borderWidth: 1, borderColor: border, backgroundColor: cardBg }}>
69        <Image source={{ uri: c.avatar_url ?? undefined }} style={{ width: '100%', aspectRatio: 3 / 4 }} />
70        <View className="p-3">

8export function useThemeColor(token: `--${string}`, { alpha = 1, shade = 0 } = {}): string {
9  const { colorScheme } = nativewind.useColorScheme();
10  const native = useNativeVariable(token);
11  const vars = (colorScheme === 'dark' ? theme.darkTheme : theme.lightTheme) as Record<string, any>;
12  const raw = String((Platform.OS === 'web' ? (vars.__cssVars ?? vars)[token] : native) ?? '');
13  const rgb = raw.trim().split(/\s+/).map(Number);
14  if (rgb.length !== 3 || rgb.some(Number.isNaN)) return `rgba(127,127,127,${alpha})`;
15  const to = shade < 0 ? 0 : 255;
16  const [r, g, b] = rgb.map((c) => Math.round(c + (to - c) * Math.abs(shade)));
17  return `rgba(${r},${g},${b},${alpha})`;
18}

2create or replace function public.ensure_my_profile(p_name text)
3returns public.profiles
4language plpgsql
5security definer
6set search_path = public
7as $$
8declare
9  v_email text;
10  v_local text;
11  v_username text;
12  v_color text;
13  v_row public.profiles;
14begin
15  select email into v_email from auth.users where id = auth.uid();
16  v_local := coalesce(nullif(p_name, ''), split_part(v_email, '@', 1), 'friend');
17
18  -- unique username from the email local part + a short suffix if taken
19  v_username := regexp_replace(lower(v_local), '[^a-z0-9_]', '', 'g');
20  if v_username = '' then
21    v_username := 'friend';
22  end if;
23
24  loop
25    begin
26      insert into public.profiles (id, display_name, username, avatar_color)
27      values (auth.uid(), coalesce(nullif(p_name, ''), v_local), v_username,
28              (array['#DB553A','#6C5CE7','#26A69A','#F0A63C','#3D8BFF','#E5689A'])[1 + mod(hashtext(auth.uid()::text), 6)])
29      on conflict (id) do nothing;
30      exit;
31    exception when unique_violation then
32      -- username taken: append a short numeric suffix and retry
33      v_username := left(v_username, 18) || substr(md5(auth.uid()::text), 1, 4);
34    end;
35  end loop;

25export const lightTheme = vars({
26  "--radius": "18",
27  "--background": "251 248 244",
28  "--foreground": "30 27 24",
29  "--card": "255 255 255",
30  "--card-foreground": "30 27 24",
31  "--popover": "255 255 255",
32  "--popover-foreground": "30 27 24",
33  "--primary": "219 85 58",
34  "--primary-foreground": "255 255 255",
35  "--secondary": "243 237 230",
36  "--secondary-foreground": "30 27 24",
37  "--muted": "240 235 228",
38  "--muted-foreground": "128 118 108",
39  "--accent": "108 92 231",
40  "--accent-foreground": "255 255 255",
41  "--destructive": "214 48 49",
42  "--destructive-foreground": "255 255 255",
43  "--border": "233 226 218",
44  "--input": "228 220 211",
45  "--ring": "219 85 58",
46  "--chart-1": "219 85 58",
47  "--chart-2": "108 92 231",
48  "--chart-3": "38 166 154",
49  "--chart-4": "240 166 60",
50  "--chart-5": "30 27 24",
51});
52
53export const darkTheme = vars({
54  "--radius": "18",
55  "--background": "20 17 16",
56  "--foreground": "245 240 234",
57  "--card": "31 27 25",
58  "--card-foreground": "245 240 234",