Add deleting to tool calling demo app + some logic fixes in calendar handling

Author: pweglik

examples/llm-tool-calling/src/components/MessageItem.tsx

@@ -1,15 +1,22 @@
 import React, { memo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  Platform,
+} from 'react-native';
 import MarkdownComponent from './MarkdownComponent';
 import LlamaIcon from '../../assets/icons/llama_icon.svg';
-import { MessageType } from 'react-native-executorch/lib/typescript/types/llm';
 import ColorPalette from '../colors';
+import { MessageType } from 'react-native-executorch/lib/typescript/types/llm';
 
 interface MessageItemProps {
   message: MessageType;
+  deleteMessage: () => void;
 }
 
-const MessageItem = memo(({ message }: MessageItemProps) => {
+const MessageItem = memo(({ message, deleteMessage }: MessageItemProps) => {
   return (
     <View
       style={
@@ -22,28 +29,52 @@ const MessageItem = memo(({ message }: MessageItemProps) => {
         </View>
       )}
       <MarkdownComponent text={message.content} />
+      <CloseButton deleteMessage={deleteMessage} role={message.role} />
     </View>
   );
 });
 
+const CloseButton = ({
+  deleteMessage,
+  role,
+}: {
+  deleteMessage: () => void;
+  role: string;
+}) => {
+  return (
+    <TouchableOpacity
+      style={[
+        styles.closeButton,
+        role === 'assistant' ? styles.closeButtonRight : styles.closeButtonLeft,
+      ]}
+      onPress={deleteMessage}
+    >
+      <Text style={styles.buttonText}>✕</Text>
+    </TouchableOpacity>
+  );
+};
+
 export default MessageItem;
 
 const styles = StyleSheet.create({
   aiMessage: {
     flexDirection: 'row',
-    maxWidth: '80%',
+    maxWidth: '75%',
     alignSelf: 'flex-start',
     marginVertical: 8,
+    alignItems: 'center',
   },
   userMessage: {
+    flexDirection: 'row-reverse',
     paddingHorizontal: 12,
     paddingVertical: 8,
     marginRight: 8,
     marginVertical: 8,
-    maxWidth: 220,
+    maxWidth: '75%',
     borderRadius: 8,
     backgroundColor: ColorPalette.seaBlueLight,
     alignSelf: 'flex-end',
+    alignItems: 'center',
   },
   aiMessageIconContainer: {
     backgroundColor: ColorPalette.seaBlueLight,
@@ -54,10 +85,22 @@ const styles = StyleSheet.create({
     borderRadius: 16,
     marginHorizontal: 7,
   },
-  messageText: {
-    fontSize: 14,
-    lineHeight: 19.6,
-    color: ColorPalette.primary,
-    fontFamily: 'regular',
+  closeButton: {
+    borderRadius: 11,
+    backgroundColor: ColorPalette.blueLight,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 22,
+    height: 22,
+  },
+  closeButtonRight: {
+    marginLeft: 8,
+  },
+  closeButtonLeft: {
+    marginRight: 8,
+  },
+  buttonText: {
+    fontSize: Platform.OS === 'ios' ? 16 : 14,
+    color: '#000',
   },
 });

examples/llm-tool-calling/src/components/Messages.tsx

@@ -2,20 +2,22 @@ import { useRef } from 'react';
 import { ScrollView, StyleSheet, View, Text } from 'react-native';
 import AnimatedChatLoading from './AnimatedChatLoading';
 import LlamaIcon from '../../assets/icons/llama_icon.svg';
-import MessageItem from './MessageItem';
-import { MessageType } from 'react-native-executorch/lib/typescript/types/llm';
 import ColorPalette from '../colors';
+import MessageItem from './MessageItem';
+import { MessageType } from 'react-native-executorch';
 
 interface MessagesComponentProps {
   chatHistory: MessageType[];
   llmResponse: string;
   isGenerating: boolean;
+  deleteMessage: (index: number) => void;
 }
 
 export default function Messages({
   chatHistory,
   llmResponse,
   isGenerating,
+  deleteMessage,
 }: MessagesComponentProps) {
   const scrollViewRef = useRef<ScrollView>(null);
 
@@ -27,7 +29,11 @@ export default function Messages({
       >
         <View onStartShouldSetResponder={() => true}>
           {chatHistory.map((message, index) => (
-            <MessageItem key={index} message={message} />
+            <MessageItem
+              key={index}
+              message={message}
+              deleteMessage={() => deleteMessage(index)}
+            />
           ))}
           {isGenerating && (
             <View style={styles.aiMessage}>

examples/llm-tool-calling/src/screens/ChatScreen.tsx

@@ -108,6 +108,7 @@ export default function ChatScreen() {
                 chatHistory={llm.messageHistory}
                 llmResponse={llm.response}
                 isGenerating={llm.isGenerating}
+                deleteMessage={llm.deleteMessage}
               />
             </View>
           ) : (

examples/llm-tool-calling/src/screens/tools.ts

@@ -149,22 +149,22 @@ const readCalendar = async (call: ToolCall) => {
     ).valueOf();
   } else if (Number.isNaN(startTime) || Number.isNaN(endTime)) {
     if (Number.isNaN(startTime)) {
-      const endDay = new Date(endTime);
+      const today = new Date();
       startTime = new Date(
-        endDay.getFullYear(),
-        endDay.getMonth(),
-        endDay.getDate(),
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate(),
         0,
         0,
         0
       ).valueOf();
     } else if (Number.isNaN(endTime)) {
-      const startDay = new Date(startTime);
+      const today = new Date();
 
       endTime = new Date(
-        startDay.getFullYear(),
-        startDay.getMonth(),
-        startDay.getDate(),
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate(),
         23,
         59,
         59