Add markdown and LaTeX math rendering for chat messages

.github/workflows/lint-test.yml

@@ -23,8 +23,7 @@ jobs:
       - name: Install dependencies
         run: |
           cd front
-          npm ci
-          npm install
+          npm ci --legacy-peer-deps
 
       - name: Run lint
         run: |

front/api/account.ts

@@ -14,9 +14,9 @@ export type PartialAccount = Partial<Account> & { pin: number };
 export const getAccount = async (): Promise<Account | null> => {
     try {
         const deviceTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-        const { data, ok, status } = await apiClient<Account>(`/user?timezone=${deviceTimeZone}`);
+        const { data, status } = await apiClient<Account>(`/user?timezone=${deviceTimeZone}`);
 
-        if (!ok) {
+        if (status !== 200) {
             throw new Error(`Failed to fetch account with status ${status}`);
         }
         return data;
@@ -53,7 +53,7 @@ export const updateAccount = async (account: PartialAccount): Promise<void> => {
 
 export const deleteAccount = async (): Promise<void> => {
     try {
-        const { ok, status } = await apiClient<void>('/user/delete', {
+        const { status } = await apiClient<void>('/user/delete', {
             method: 'DELETE',
         });
 

front/api/apiClient.ts

@@ -1,4 +1,4 @@
-import { clearUser, getTokens, setTokens, TokenData } from "./tokens";
+import { getTokens, setTokens, TokenData } from "./tokens";
 
 const BASE_URL = process.env.EXPO_PUBLIC_API_BASE_URL;
 

front/api/bots.ts

@@ -56,7 +56,7 @@ export const fetchBot = async (id: string): Promise<Bot | null> => {
 
 export const upsertBot = async (bot: Bot): Promise<Bot | null> => {
   try {
-    if (bot.id == -1) {
+    if (bot.id === -1) {
       const { data, ok, status } = await apiClient<Bot>("/bots.json", {
         method: "POST",
         body: JSON.stringify(bot),

front/api/chats.ts

@@ -1,6 +1,5 @@
 import * as Sentry from "@sentry/react-native";
-import { apiClient } from './apiClient';
-import { UnauthorizedError } from './apiClient';
+import { apiClient, UnauthorizedError } from './apiClient';
 
 export interface PaginatedResponse<T> {
     results: T[];

front/api/devices.ts

@@ -64,7 +64,7 @@ export const fetchDeviceByToken = async (
 
 export const upsertDevice = async (device: Device): Promise<Device | null> => {
   try {
-    if (device.id == -1) {
+    if (device.id === -1) {
       const { data, ok, status } = await apiClient<Device>("/devices.json", {
         method: "POST",
         body: JSON.stringify(device),

front/api/profiles.ts

@@ -49,7 +49,7 @@ export const fetchProfile = async (id: string): Promise<Profile | null> => {
 
 export const upsertProfile = async (profile: Profile): Promise<Profile | null> => {
     try {
-        if (profile.id == -1) {
+        if (profile.id === -1) {
             const { data, ok, status } = await apiClient<Profile>('/profiles.json', {
                 method: 'POST',
                 body: JSON.stringify(profile),

front/app.json

@@ -7,8 +7,9 @@
     "icon": "./assets/images/syft.png",
     "scheme": "botsforkids",
     "userInterfaceStyle": "automatic",
-    "newArchEnabled": true,
-    "sdkVersion": "53.0.0",
+    "androidStatusBar": {
+      "backgroundColor": "#000000"
+    },
     "ios": {
       "supportsTablet": true,
       "infoPlist": {
@@ -53,7 +54,11 @@
           "photosPermission": "The app accesses your photos to let you send them to your bots.",
           "cameraPermission": "The app accesses your camera to let you send photos to your bots."
         }
-      ]
+      ],
+      "@sentry/react-native",
+      "expo-font",
+      "expo-image",
+      "expo-web-browser"
     ],
     "experiments": {
       "typedRoutes": true

front/app/__tests__/_layout-test.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 import { render, act } from '@testing-library/react-native';
+import RootLayout from '../_layout';
+import * as SplashScreen from 'expo-splash-screen';
+import * as Notifications from 'expo-notifications';
+import { fetchBots } from '@/api/bots';
+import { fetchChat } from '@/api/chats';
+import { UnauthorizedError } from '@/api/apiClient';
 import { useRouter, usePathname } from 'expo-router';
+import { View } from 'react-native';
 
 jest.mock('@sentry/react-native', () => ({
   reactNavigationIntegration: jest.fn(() => ({
@@ -12,13 +19,6 @@ jest.mock('@sentry/react-native', () => ({
 jest.mock('../_layout', () => ({
   default: function MockRootLayout() { return null; },
 }));
-import RootLayout from '../_layout';
-import * as SplashScreen from 'expo-splash-screen';
-import * as Notifications from 'expo-notifications';
-import { fetchBots } from '@/api/bots';
-import { fetchChat } from '@/api/chats';
-import { UnauthorizedError } from '@/api/apiClient';
-import { View } from 'react-native';
 
 // Create a mock Stack component
 interface MockStackProps {
@@ -177,6 +177,10 @@ describe('RootLayout', () => {
 
     unmount();
 
-    expect(Notifications.removeNotificationSubscription).toHaveBeenCalled();
+    const receivedSubscription = (Notifications.addNotificationReceivedListener as jest.Mock).mock.results[0]?.value;
+    const responseSubscription = (Notifications.addNotificationResponseReceivedListener as jest.Mock).mock.results[0]?.value;
+
+    expect(receivedSubscription.remove).toHaveBeenCalled();
+    expect(responseSubscription.remove).toHaveBeenCalled();
   });
 }); 

front/app/_layout.tsx

@@ -7,7 +7,7 @@ import { ErrorBoundary } from "@/components/ErrorBoundary";
 import { useFonts } from "expo-font";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import * as Notifications from "expo-notifications";
 import "react-native-reanimated";
 import { useColorScheme } from "@/hooks/useColorScheme";
@@ -77,7 +77,7 @@ export default function RootLayout() {
   const notificationListener = useRef<Notifications.EventSubscription | null>(null);
   const responseListener = useRef<Notifications.EventSubscription | null>(null);
 
-  const navigateToChat = (chatId: string, title: string) => {
+  const navigateToChat = useCallback((chatId: string, title: string) => {
     if (pathname === "/chat") {
       router.replace({
         pathname: "/chat",
@@ -89,7 +89,7 @@ export default function RootLayout() {
         params: { chatId, title },
       });
     }
-  };
+  }, [pathname, router]);
 
   useEffect(() => {
     if (ref?.current) {
@@ -99,7 +99,7 @@ export default function RootLayout() {
 
   useEffect(() => {
     notificationListener.current =
-      Notifications.addNotificationReceivedListener(async (notification) => {});
+      Notifications.addNotificationReceivedListener(async () => {});
 
     responseListener.current =
       Notifications.addNotificationResponseReceivedListener(
@@ -124,33 +124,12 @@ export default function RootLayout() {
       );
 
     return () => {
-      notificationListener.current &&
-        Notifications.removeNotificationSubscription(
-          notificationListener.current
-        );
-      responseListener.current &&
-        Notifications.removeNotificationSubscription(responseListener.current);
+      notificationListener.current?.remove();
+      responseListener.current?.remove();
     };
-  }, []);
-
-  const getJWTFromLink = async (event?: any) => {
-    const url = event?.url;
-    if (url) {
-      const { queryParams } = Linking.parse(url);
-
-      if (queryParams && queryParams.access && queryParams.refresh) {
-        const access = queryParams.access as string;
-        const refresh = queryParams.refresh as string;
-        await setTokens({ access, refresh });
-        WebBrowser.dismissBrowser();
+  }, [navigateToChat]);
 
-        router.replace("/");
-        await initialNavigationChecks();
-      }
-    }
-  };
-
-  const setProfile = async () => {
+  const setProfile = useCallback(async () => {
     const profileData = await AsyncStorage.getItem("selectedProfile");
     const profiles = await fetchProfiles();
     if (profileData) {
@@ -168,9 +147,9 @@ export default function RootLayout() {
         }
       }
     }
-  }
+  }, []);
 
-  const initialNavigationChecks = async () => {
+  const initialNavigationChecks = useCallback(async () => {
     try {
       await fetchBots();
       await setProfile();
@@ -180,19 +159,41 @@ export default function RootLayout() {
         router.replace("/login");
       }
     }
-  };
+  }, [router, setProfile]);
+
+  const getJWTFromLink = useCallback(async (event?: any) => {
+    const url = event?.url;
+    if (url) {
+      const { queryParams } = Linking.parse(url);
+
+      if (queryParams && queryParams.access && queryParams.refresh) {
+        const access = queryParams.access as string;
+        const refresh = queryParams.refresh as string;
+        await setTokens({ access, refresh });
+        WebBrowser.dismissBrowser();
+
+        router.replace("/");
+        await initialNavigationChecks();
+      }
+    }
+  }, [initialNavigationChecks, router]);
 
   useEffect(() => {
     if (loaded) {
+      const subscription = Linking.addEventListener("url", getJWTFromLink);
+
       const initialize = async () => {
         SplashScreen.hideAsync();
-        Linking.addEventListener("url", getJWTFromLink);
         await initialNavigationChecks();
       };
 
-      initialize();
+      void initialize();
+
+      return () => {
+        subscription.remove();
+      };
     }
-  }, [loaded]);
+  }, [getJWTFromLink, initialNavigationChecks, loaded]);
 
   if (!loaded) {
     return null;

front/app/botChat.tsx

@@ -1,10 +1,8 @@
-import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedTextInput } from "@/components/ThemedTextInput";
-import React, { useEffect, useState, useMemo } from "react";
-import { Platform, KeyboardAvoidingView, FlatList, ActivityIndicator, Dimensions, Keyboard, FlexAlignType, View } from "react-native";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Platform, KeyboardAvoidingView, FlatList, ActivityIndicator, Dimensions, Keyboard, FlexAlignType } from "react-native";
 import { SafeAreaView } from 'react-native-safe-area-context';
-import Constants from 'expo-constants';
 import { ThemedButton } from "@/components/ThemedButton";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useLocalSearchParams } from "expo-router";
@@ -14,19 +12,17 @@ import { fetchChatMessages, sendChat, ChatMessage as ApiChatMessage } from "@/ap
 import { IconSymbol } from "@/components/ui/IconSymbol";
 import ChatMessage from '@/components/ChatMessage';
 
-const ITEM_HEIGHT = 50;
-
 export default function Chat() {
   const local = useLocalSearchParams();
   const [chatId, setChatId] = useState<string>();
   const [input, setInput] = useState<string>("");
   const [messages, setMessages] = useState<ApiChatMessage[]>([]);
-  const [page, setPage] = useState(1);
+  const [, setPage] = useState(1);
   const [loadingMore, setLoadingMore] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [image, setImage] = useState<string | null>(null);
 
-  const refresh = async (nextPage: number) => {
+  const refresh = useCallback(async (nextPage: number) => {
     const chatIdQueryString = local.chatId?.toString();
     if (chatIdQueryString) {
       setChatId(chatIdQueryString);
@@ -39,11 +35,11 @@ export default function Chat() {
         setLoadingMore(false);
       });
     }
-  };
+  }, [local.chatId]);
 
   useEffect(() => {
-    refresh(page);
-  }, []);
+    void refresh(1);
+  }, [refresh]);
 
   const getProfileId = async () => {
     const profileData = await AsyncStorage.getItem("selectedProfile");
@@ -173,11 +169,6 @@ export default function Chat() {
             data={[...messages].reverse()}
             keyExtractor={(item, index) => index.toString()}
             renderItem={({ item }) => <ChatMessage message={item} />}
-                getItemLayout={(data, index) => ({
-                  length: ITEM_HEIGHT,
-                  offset: ITEM_HEIGHT * index,
-                  index,
-                })}
                 onStartReached={handleLoadMore}
                 onStartReachedThreshold={0.5}
                 ListHeaderComponent={loadingMore ? <ActivityIndicator /> : null}