feat: minor imporements

Author: bluntbrain

mobile/app/_layout.tsx

@@ -1,9 +1,13 @@
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
+import { LogBox } from 'react-native';
 import Toast from 'react-native-toast-message';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { ThemeProvider } from '../src/contexts/ThemeContext';
 
+// Ignore all LogBox warnings and logs in development
+LogBox.ignoreAllLogs(true);
+
 export default function RootLayout() {
   return (
     <SafeAreaProvider>

mobile/src/components/chat/MessageBubble.tsx

@@ -1,43 +1,33 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-} from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import Markdown from 'react-native-markdown-display';
-import { Message } from '../../types/api';
-import { spacing, fontSize, borderRadius } from '../../constants/theme';
-import { useTheme } from '../../contexts/ThemeContext';
+import React from "react";
+import { View, Text, StyleSheet, Linking } from "react-native";
+import Markdown from "react-native-markdown-display";
+import { ThinkingAnimation } from "./ThinkingAnimation";
+import { Message } from "../../types/api";
+import { spacing, fontSize, borderRadius } from "../../constants/theme";
+import { useTheme } from "../../contexts/ThemeContext";
 
 interface MessageBubbleProps {
   message: Message;
-  onCopy?: () => void;
 }
 
-export const MessageBubble: React.FC<MessageBubbleProps> = ({
-  message,
-  onCopy,
-}) => {
+export const MessageBubble: React.FC<MessageBubbleProps> = ({ message }) => {
   const { colors } = useTheme();
-  const isUser = message.role === 'user';
+  const isUser = message.role === "user";
   const styles = createStyles(colors, isUser);
 
   return (
-    <View style={[
-      styles.container,
-      isUser ? styles.userContainer : styles.agentContainer,
-    ]}>
+    <View
+      style={[
+        styles.container,
+        isUser ? styles.userContainer : styles.agentContainer,
+      ]}
+    >
       <View style={styles.bubble}>
         {isUser ? (
-          <Text style={[
-            styles.messageText,
-            styles.userText,
-          ]}>
+          <Text style={[styles.messageText, styles.userText]}>
             {message.content}
           </Text>
-        ) : (
+        ) : message.content ? (
           <Markdown
             style={{
               body: {
@@ -62,14 +52,15 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
               },
               strong: {
                 color: colors.foreground,
-                fontWeight: '700',
+                fontWeight: "700",
               },
               em: {
                 color: colors.foreground,
-                fontStyle: 'italic',
+                fontStyle: "italic",
               },
               link: {
                 color: colors.primary,
+                textDecorationLine: "underline",
               },
               blockquote: {
                 backgroundColor: colors.muted,
@@ -81,19 +72,19 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
               },
               heading1: {
                 fontSize: fontSize.xl,
-                fontWeight: 'bold',
+                fontWeight: "bold",
                 color: colors.foreground,
                 marginVertical: spacing.xs,
               },
               heading2: {
                 fontSize: fontSize.lg,
-                fontWeight: 'bold',
+                fontWeight: "bold",
                 color: colors.foreground,
                 marginVertical: spacing.xs,
               },
               heading3: {
                 fontSize: fontSize.base,
-                fontWeight: 'bold',
+                fontWeight: "bold",
                 color: colors.foreground,
                 marginVertical: spacing.xs,
               },
@@ -102,78 +93,62 @@ export const MessageBubble: React.FC<MessageBubbleProps> = ({
                 fontSize: fontSize.base,
               },
             }}
+            onLinkPress={(url) => {
+              Linking.openURL(url).catch(() => {
+                // Failed to open link
+              });
+              return false;
+            }}
           >
             {message.content}
           </Markdown>
-        )}
-        
-        {!isUser && onCopy && (
-          <TouchableOpacity
-            style={styles.copyButton}
-            onPress={onCopy}
-            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-          >
-            <Ionicons 
-              name="copy-outline" 
-              size={16} 
-              color={colors.mutedForeground} 
-            />
-          </TouchableOpacity>
+        ) : (
+          <ThinkingAnimation />
         )}
       </View>
-      
-      <Text style={[
-        styles.timestamp,
-        { color: colors.mutedForeground }
-      ]}>
-        {new Date(message.createdAt).toLocaleTimeString([], { 
-          hour: '2-digit', 
-          minute: '2-digit' 
+
+      <Text style={[styles.timestamp, { color: colors.mutedForeground }]}>
+        {new Date(message.createdAt).toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
         })}
       </Text>
     </View>
   );
 };
 
-const createStyles = (colors: any, isUser: boolean) => StyleSheet.create({
-  container: {
-    marginVertical: spacing.xs,
-    paddingHorizontal: spacing.md,
-  },
-  userContainer: {
-    alignItems: 'flex-end',
-  },
-  agentContainer: {
-    alignItems: 'flex-start',
-  },
-  bubble: {
-    maxWidth: '85%',
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    borderRadius: borderRadius.lg,
-    position: 'relative',
-    backgroundColor: isUser ? colors.primary : colors.secondary,
-    borderBottomRightRadius: isUser ? 6 : borderRadius.lg,
-    borderBottomLeftRadius: isUser ? borderRadius.lg : 6,
-  },
-  messageText: {
-    fontSize: fontSize.base,
-    lineHeight: 22,
-  },
-  userText: {
-    color: colors.primaryForeground,
-  },
-  copyButton: {
-    position: 'absolute',
-    top: spacing.xs,
-    right: spacing.xs,
-    padding: spacing.xs,
-    backgroundColor: colors.background,
-    borderRadius: 12,
-  },
-  timestamp: {
-    fontSize: fontSize.xs,
-    marginTop: spacing.xs,
-    marginHorizontal: spacing.xs,
-  },
-});
+const createStyles = (colors: any, isUser: boolean) =>
+  StyleSheet.create({
+    container: {
+      marginVertical: spacing.xs,
+      paddingHorizontal: spacing.md,
+    },
+    userContainer: {
+      alignItems: "flex-end",
+    },
+    agentContainer: {
+      alignItems: "flex-start",
+    },
+    bubble: {
+      maxWidth: "85%",
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm,
+      borderRadius: borderRadius.lg,
+      position: "relative",
+      backgroundColor: isUser ? colors.primary : colors.secondary,
+      borderBottomRightRadius: isUser ? 6 : borderRadius.lg,
+      borderBottomLeftRadius: isUser ? borderRadius.lg : 6,
+    },
+    messageText: {
+      fontSize: fontSize.base,
+      lineHeight: 22,
+    },
+    userText: {
+      color: colors.primaryForeground,
+    },
+    timestamp: {
+      fontSize: fontSize.xs,
+      marginTop: spacing.xs,
+      marginHorizontal: spacing.xs,
+    },
+  });