diff --git a/app/components/AIChannelItem.tsx b/app/components/AIChannelItem.tsx new file mode 100644 index 00000000..b5eda155 --- /dev/null +++ b/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() + const createdAt = formatCreatedAt(channel.lastMessageAt) + + return ( + navigate("AIChat")} style={styles.$messageItem}> + + + + {channel.name || "No name"} + {createdAt} + + {/* + {channel.lastMessagePubkey ? shortenKey(channel.lastMessagePubkey) : channel.id} + */} + + {channel.lastMessage || channel.about || "No about"} + + + + + ) +}) + +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, + }, +}) diff --git a/app/components/ChannelItem.tsx b/app/components/ChannelItem.tsx index 05a2ff72..4849e98a 100644 --- a/app/components/ChannelItem.tsx +++ b/app/components/ChannelItem.tsx @@ -59,7 +59,7 @@ export const ChannelItem = observer(function ChannelItem({ {channel.lastMessagePubkey ? shortenKey(channel.lastMessagePubkey) : channel.id} - {channel.lastMessage || channel.about || "No about"} + {channel.lastMessage || channel.about || ""} diff --git a/app/components/index.ts b/app/components/index.ts index 668151f7..d92bef93 100644 --- a/app/components/index.ts +++ b/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" diff --git a/app/navigators/AppNavigator.tsx b/app/navigators/AppNavigator.tsx index dc996e86..10038493 100644 --- a/app/navigators/AppNavigator.tsx +++ b/app/navigators/AppNavigator.tsx @@ -59,6 +59,7 @@ const AppStack = observer(function AppStack() { + diff --git a/app/navigators/TabNavigator.tsx b/app/navigators/TabNavigator.tsx index 1fd1c95e..d162de55 100644 --- a/app/navigators/TabNavigator.tsx +++ b/app/navigators/TabNavigator.tsx @@ -41,6 +41,7 @@ export function TabNavigator() { tabBarHideOnKeyboard: true, }} tabBar={(props) => } + initialRouteName="Home" > > {} + +export const AIChatScreen: FC = observer(function ChatScreen() { + const navigation = useNavigation() + + const back = () => { + navigation.goBack() + } + + useLayoutEffect(() => { + navigation.setOptions({ + headerShown: true, + header: () => ( +
back()} + RightActionComponent={ + + + + {/* console.log("nah")}> + + */} + + } + /> + ), + }) + }, []) + + 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 ( + + + + + + + ) + }, []) + + return ( + + + + + item.id} + renderItem={renderItem} + ListEmptyComponent={ + + + + } + removeClippedSubviews={true} + estimatedItemSize={60} + inverted={true} + /> + + + + + + + + ) +}) + +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, +} diff --git a/app/screens/ErrorScreen/ErrorDetails.tsx b/app/screens/ErrorScreen/ErrorDetails.tsx index d5ce4e9f..1d60cd5f 100644 --- a/app/screens/ErrorScreen/ErrorDetails.tsx +++ b/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 = { diff --git a/app/screens/HomeMessagesScreen.tsx b/app/screens/HomeMessagesScreen.tsx index 465195a2..89aed2e4 100644 --- a/app/screens/HomeMessagesScreen.tsx +++ b/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 = 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 = observer( {item.kind === 4 ? ( + ) : item.kind === 911911 ? ( + ) : ( )} diff --git a/app/screens/index.ts b/app/screens/index.ts index 5302e48f..02aeea8a 100644 --- a/app/screens/index.ts +++ b/app/screens/index.ts @@ -1,3 +1,4 @@ +export * from "./AIChatScreen" export * from "./CascadeDemo" export * from "./ChannelsScreen" export * from "./ChatScreen" diff --git a/ios/arcade/Info.plist b/ios/arcade/Info.plist index fe9c3678..f596636d 100644 --- a/ios/arcade/Info.plist +++ b/ios/arcade/Info.plist @@ -21,7 +21,7 @@ CFBundleSignature ???? CFBundleVersion - 62 + 66 ITSAppUsesNonExemptEncryption LSRequiresIPhoneOS