Add demo AI chat screen

app/components/AIChannelItem.tsx

@@ -0,0 +1,111 @@
+import React from "react"
+import { AutoImage } from "app/components"
+import { StyleSheet, Pressable, View, Text } from "react-native"
+import { spacing } from "app/theme"
+import { useNavigation } from "@react-navigation/native"
+import { Channel } from "app/models"
+import { observer } from "mobx-react-lite"
+import { formatCreatedAt } from "app/utils/formatCreatedAt"
+
+const colors = {
+  borderBottomColor: "#232324",
+  borderColor: "#232324",
+  messageContentAbout: "#7B7C7F",
+  messageContentName: "white",
+  messageContentTime: "#7B7C7F",
+  messageUsername: "white",
+  unreadMessagesBadge: "#666",
+  unreadMessagesText: "#000",
+}
+
+export const AIChannelItem = observer(function ChannelItem({ channel }: { channel: Channel }) {
+  const { navigate } = useNavigation<any>()
+  const createdAt = formatCreatedAt(channel.lastMessageAt)
+
+  return (
+    <Pressable onPress={() => navigate("AIChat")} style={styles.$messageItem}>
+      <AutoImage
+        source={{ uri: channel.picture || "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp" }}
+        style={styles.$messageAvatar}
+      />
+      <View style={styles.$messageContent}>
+        <View style={styles.$messageContentHeading}>
+          <Text style={styles.$messageContentName}>{channel.name || "No name"}</Text>
+          <Text style={styles.$messageContentTime}>{createdAt}</Text>
+        </View>
+        {/* <Text style={styles.$messageUsername} numberOfLines={1}>
+          {channel.lastMessagePubkey ? shortenKey(channel.lastMessagePubkey) : channel.id}
+        </Text> */}
+        <Text style={styles.$messageContentAbout} numberOfLines={1}>
+          {channel.lastMessage || channel.about || "No about"}
+        </Text>
+        <View style={styles.$divider} />
+      </View>
+    </Pressable>
+  )
+})
+
+const styles = StyleSheet.create({
+  $divider: {
+    borderBottomColor: colors.borderBottomColor,
+    borderBottomWidth: 1,
+    marginVertical: 8,
+  },
+  $messageAvatar: {
+    borderColor: colors.borderColor,
+    borderRadius: 100,
+    borderWidth: 0.6,
+    height: 50,
+    marginRight: spacing.small,
+    marginTop: 2,
+    width: 50,
+  },
+  $messageContent: {
+    flex: 1,
+  },
+  $messageContentAbout: {
+    color: colors.messageContentAbout,
+    marginBottom: 6,
+    marginTop: 8,
+    maxWidth: 250,
+  },
+  $messageContentHeading: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  $messageContentName: {
+    color: colors.messageContentName,
+    fontWeight: "bold",
+    paddingTop: 2,
+  },
+  $messageContentRight: {
+    position: "absolute",
+    right: 0,
+    top: 25,
+  },
+  $messageContentTime: {
+    color: colors.messageContentTime,
+  },
+  $messageItem: {
+    flex: 1,
+    flexDirection: "row",
+  },
+  $messageUsername: {
+    color: colors.messageUsername,
+    marginTop: 2,
+    maxWidth: 250,
+  },
+  $unreadMessagesBadge: {
+    alignItems: "center",
+    backgroundColor: colors.unreadMessagesBadge,
+    borderRadius: 100,
+    justifyContent: "center",
+    minWidth: 20,
+    padding: 3,
+  },
+  $unreadMessagesText: {
+    color: colors.unreadMessagesText,
+    fontSize: 12,
+  },
+})

app/components/ChannelItem.tsx

@@ -59,7 +59,7 @@ export const ChannelItem = observer(function ChannelItem({
           {channel.lastMessagePubkey ? shortenKey(channel.lastMessagePubkey) : channel.id}
         </Text>
         <Text style={styles.$messageContentAbout} numberOfLines={1}>
-          {channel.lastMessage || channel.about || "No about"}
+          {channel.lastMessage || channel.about || ""}
         </Text>
         <View style={styles.$divider} />
       </View>

app/components/index.ts

@@ -21,6 +21,7 @@ export * from "./OfferForm"
 export * from "./RelayProvider"
 export * from "./Spotlight"
 export * from "./ChannelItem"
+export * from "./AIChannelItem"
 export * from "./ScreenWithSidebar"
 export * from "./ContactItem"
 export * from "./ActivityIndicator"

app/navigators/AppNavigator.tsx

@@ -59,6 +59,7 @@ const AppStack = observer(function AppStack() {
           <Stack.Screen name="Tabs" component={TabNavigator} />
           <Stack.Screen name="Discover" component={Screens.DiscoverScreen} />
           <Stack.Screen name="Chat" component={Screens.ChatScreen} />
+          <Stack.Screen name="AIChat" component={Screens.AIChatScreen} />
           <Stack.Screen name="Listing" component={Screens.ListingScreen} />
           <Stack.Screen name="ListingDetail" component={Screens.ListingDetailScreen} />
           <Stack.Screen name="Channels" component={Screens.ChannelsScreen} />

app/navigators/TabNavigator.tsx

@@ -41,6 +41,7 @@ export function TabNavigator() {
         tabBarHideOnKeyboard: true,
       }}
       tabBar={(props) => <TabBar {...props} />}
+      initialRouteName="Home"
     >
       <Tab.Screen
         name="Contacts"

app/screens/AIChatScreen.tsx

@@ -0,0 +1,168 @@
+import React, { FC, useCallback, useEffect, useLayoutEffect } from "react"
+import { observer } from "mobx-react-lite"
+import { TextStyle, View, ViewStyle } from "react-native"
+import { NativeStackScreenProps } from "@react-navigation/native-stack"
+import { AppStackScreenProps } from "app/navigators"
+import { Header, Screen, User, ChannelMessageForm, ActivityIndicator } from "app/components"
+import { useFocusEffect, useNavigation } from "@react-navigation/native"
+import { colors, spacing } from "app/theme"
+import { FlashList } from "@shopify/flash-list"
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet"
+import TextWithImage from "app/components/TextWithImage"
+import { UserPlusIcon } from "lucide-react-native"
+import { Message } from "app/models"
+
+interface ChatScreenProps extends NativeStackScreenProps<AppStackScreenProps<"Chat">> {}
+
+export const AIChatScreen: FC<ChatScreenProps> = observer(function ChatScreen() {
+  const navigation = useNavigation<any>()
+
+  const back = () => {
+    navigation.goBack()
+  }
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: true,
+      header: () => (
+        <Header
+          title="Spirit of Satoshi"
+          titleStyle={{ color: colors.palette.cyan400 }}
+          leftIcon="back"
+          leftIconColor={colors.palette.cyan400}
+          onLeftPress={() => back()}
+          RightActionComponent={
+            <View style={$headerRightActions}>
+              <UserPlusIcon size={20} color={colors.palette.cyan400} />
+
+              {/* <Pressable onPress={() => console.log("nah")}>
+                <LogOutIcon size={20} color={colors.palette.cyan400} />
+              </Pressable> */}
+            </View>
+          }
+        />
+      ),
+    })
+  }, [])
+
+  useFocusEffect(
+    useCallback(() => {
+      async function subscribe() {
+        // console.log("subscribe")
+        // return await channelManager.sub({
+        //   channel_id: channel.id,
+        //   callback: handleNewMessage,
+        //   filter: {
+        //     since: Math.floor(Date.now() / 1000),
+        //   },
+        //   privkey: channel.privkey,
+        // })
+      }
+
+      // subscribe for new messages
+      subscribe().catch(console.error)
+
+      return () => {
+        console.log("unsubscribe")
+        // pool.unsub(handleNewMessage)
+      }
+    }, []),
+  )
+
+  useEffect(() => {
+    // fetch messages
+    // channel.fetchMessages(channelManager)
+  }, [])
+
+  const renderItem = useCallback(({ item }: { item: Message }) => {
+    return (
+      <View style={$messageItem}>
+        <User pubkey={item.pubkey} createdAt={item.created_at} />
+        <View style={$messageContentWrapper}>
+          <TextWithImage
+            text={item.content || "empty message"}
+            textStyle={$messageContent}
+            imageStyle={undefined}
+          />
+        </View>
+      </View>
+    )
+  }, [])
+
+  return (
+    <BottomSheetModalProvider>
+      <Screen style={$root} preset="fixed" safeAreaEdges={["bottom"]} keyboardOffset={120}>
+        <View style={$container}>
+          <View style={$main}>
+            <FlashList
+              data={[]}
+              keyExtractor={(item) => item.id}
+              renderItem={renderItem}
+              ListEmptyComponent={
+                <View style={$emptyState}>
+                  <ActivityIndicator type="large" />
+                </View>
+              }
+              removeClippedSubviews={true}
+              estimatedItemSize={60}
+              inverted={true}
+            />
+          </View>
+          <View style={$form}>
+            <ChannelMessageForm
+              channelManager={null}
+              channelId={"channel.asdfsdfasdfd"}
+              privkey={"asdf"}
+            />
+          </View>
+        </View>
+      </Screen>
+    </BottomSheetModalProvider>
+  )
+})
+
+const $root: ViewStyle = {
+  flex: 1,
+}
+
+const $headerRightActions: ViewStyle = {
+  flexDirection: "row",
+  gap: spacing.medium,
+  paddingRight: spacing.medium,
+}
+
+const $container: ViewStyle = {
+  height: "100%",
+  justifyContent: "space-between",
+  paddingHorizontal: spacing.medium,
+}
+
+const $main: ViewStyle = {
+  flex: 1,
+}
+
+const $form: ViewStyle = {
+  flexShrink: 0,
+  paddingTop: spacing.small,
+}
+
+const $messageItem: ViewStyle = {
+  flex: 1,
+  paddingVertical: spacing.extraSmall,
+}
+
+const $messageContentWrapper: ViewStyle = {
+  paddingLeft: 48,
+  marginTop: -24,
+}
+
+const $messageContent: TextStyle = {
+  color: "#fff",
+}
+
+const $emptyState: ViewStyle = {
+  alignSelf: "center",
+  transform: [{ scaleY: -1 }],
+  paddingVertical: spacing.medium,
+  height: 470,
+}

app/screens/ErrorScreen/ErrorDetails.tsx

@@ -60,7 +60,7 @@ const $heading: TextStyle = {
 
 const $errorSection: ViewStyle = {
   flex: 2,
-  backgroundColor: colors.separator,
+  backgroundColor: colors.palette.neutral800,
   marginVertical: spacing.medium,
   borderRadius: 6,
 }
@@ -75,7 +75,7 @@ const $errorContent: TextStyle = {
 
 const $errorBacktrace: TextStyle = {
   marginTop: spacing.medium,
-  color: colors.textDim,
+  color: colors.palette.neutral400,
 }
 
 const $resetButton: ViewStyle = {

app/screens/HomeMessagesScreen.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite"
 import { View, StyleSheet } from "react-native"
 import { NativeStackScreenProps } from "@react-navigation/native-stack"
 import { AppStackScreenProps } from "app/navigators"
-import { ScreenWithSidebar, ChannelItem, Text, RelayContext } from "app/components"
+import { ScreenWithSidebar, AIChannelItem, ChannelItem, Text, RelayContext } from "app/components"
 import { FlashList } from "@shopify/flash-list"
 import { useStores } from "app/models"
 import { ChannelManager, NostrPool } from "app/arclib/src"
@@ -39,7 +39,21 @@ export const HomeMessagesScreen: FC<HomeMessagesScreenProps> = observer(
       }, []),
     )
 
-    const data = [...getChannels, ...privMessages].sort(
+    const aiRooms = [
+      {
+        id: " ",
+        name: "Spirit of Satoshi",
+        about: "Awaiting your questions...",
+        kind: 911911,
+        lastMessageAt: Date.now() - 1600000000000,
+        lastMessage: "",
+        lastMessageBy: "",
+        lastMessageByAvatar: "",
+        picture: "https://pbs.twimg.com/profile_images/1655658089989693440/KXx1NU9i_400x400.jpg",
+      },
+    ]
+
+    const data = [...getChannels, ...privMessages, ...aiRooms].sort(
       (a: any, b: any) => b.lastMessageAt - a.lastMessageAt,
     )
 
@@ -48,6 +62,8 @@ export const HomeMessagesScreen: FC<HomeMessagesScreenProps> = observer(
         <Animated.View entering={FadeInDown.delay(100 * index).duration(800)}>
           {item.kind === 4 ? (
             <DirectMessageItem dm={item} pool={pool} />
+          ) : item.kind === 911911 ? (
+            <AIChannelItem channel={item} />
           ) : (
             <ChannelItem channel={item} channelManager={channelManager} />
           )}

app/screens/index.ts

@@ -1,3 +1,4 @@
+export * from "./AIChatScreen"
 export * from "./CascadeDemo"
 export * from "./ChannelsScreen"
 export * from "./ChatScreen"

ios/arcade/Info.plist

@@ -21,7 +21,7 @@
     <key>CFBundleSignature</key>
     <string>????</string>
     <key>CFBundleVersion</key>
-    <string>62</string>
+    <string>66</string>
     <key>ITSAppUsesNonExemptEncryption</key>
     <false />
     <key>LSRequiresIPhoneOS</key>