···

       
1
       
 
       
import { Message } from "@/components/Chat/Message";

     

       
2
       
 
       
import { Loading } from "@/components/primitives/Loading";

     

       
3
       
 
       
import { Text } from "@/components/primitives/Text";

     

       
0
       
 
       

     

       
4
       
 
       
import { useChannel } from "@/lib/hooks/useChannel";

     

       
5
       
 
       
import type { AtUri } from "@/lib/types/atproto";

     

       
6
       
 
       
import { useProfile } from "@/providers/authed/ProfileProvider";

     

       
7
       
 
       
import { useCurrentPalette } from "@/providers/ThemeProvider";

     

       
0
       
 
       

     

       
8
       
 
       
import { useState } from "react";

     

       
9
       
 
       
import {

     

       
10
       
 
       
    View,

     

       
11
       
 
       
    TextInput,

     

       
12
       
 
       
    TouchableOpacity,

     

       
13
       
-
       
    ScrollView,

     

       
14
       
 
       
    Image,

     

       
15
       
 
       
    FlatList,

     

       
16
       
 
       
} from "react-native";

     
···

       
20
       
 
       
    const { messages, sendMessageToChannel, isConnected } =

     

       
21
       
 
       
        useChannel(channelAtUri);

     

       
22
       
 
       
    const { semantic } = useCurrentPalette();

     

       
0
       
 
       

     

       
23
       
 
       


     

       
24
       
 
       
    const handleSend = () => {

     

       
25
       
 
       
        if (inputText.trim()) {

     
···

       
50
       
 
       
                            justifyContent: "space-between",

     

       
51
       
 
       
                            padding: 16,

     

       
52
       
 
       
                            borderBottomWidth: 1,

     

       
53
       
-
       
                            borderBottomColor: semantic.border,

     

       
54
       
 
       
                            alignItems: "center",

     

       
55
       
 
       
                        }}

     

       
56
       
 
       
                    >

     
···

       
62
       
 
       
                                style={{

     

       
63
       
 
       
                                    width: 32,

     

       
64
       
 
       
                                    height: 32,

     

       
65
       
-
       
                                    borderRadius: 2000000000,

     

       
66
       
 
       
                                }}

     

       
67
       
 
       
                                source={{ uri: profile.avatar }}

     

       
68
       
 
       
                            />

     
···

       
74
       
 
       
                style={{

     

       
75
       
 
       
                    padding: 16,

     

       
76
       
 
       
                    borderBottomWidth: 1,

     

       
77
       
-
       
                    borderBottomColor: semantic.border,

     

       
78
       
 
       
                }}

     

       
79
       
 
       
            >

     

       
80
       
 
       
                <Text

     
···

       
89
       
 
       


     

       
90
       
 
       
            <FlatList

     

       
91
       
 
       
                inverted

     

       
92
       
-
       
                data={messages}

     

       
93
       
 
       
                renderItem={({ item }) => <Message message={item} />}

     

       
94
       
-
       
                keyExtractor={(item, index) => index.toString()}

     

       
95
       
 
       
                contentContainerStyle={{

     

       
96
       
-
       
                    padding: 16,

     

       
0
       
 
       

     

       
0
       
 
       

     

       
97
       
 
       
                }}

     

       
98
       
-
       
                style={{ flex: 1 }}

     

       
99
       
 
       
            />

     

       
100
       
 
       


     

       
101
       
 
       
            <View

     

       
102
       
 
       
                style={{

     

       
103
       
 
       
                    flexDirection: "row",

     

       
104
       
 
       
                    padding: 16,

     

       
105
       
-
       
                    borderTopWidth: 1,

     

       
106
       
-
       
                    borderTopColor: semantic.border,

     

       
107
       
 
       
                }}

     

       
108
       
 
       
            >

     

       
109
       
 
       
                <TextInput

     

       
110
       
-
       
                    style={{

     

       
111
       
-
       
                        flex: 1,

     

       
112
       
-
       
                        borderWidth: 1,

     

       
113
       
-
       
                        borderColor: semantic.border,

     

       
114
       
-
       
                        borderRadius: 8,

     

       
115
       
-
       
                        paddingHorizontal: 12,

     

       
116
       
-
       
                        paddingVertical: 8,

     

       
117
       
-
       
                        marginRight: 8,

     

       
118
       
-
       
                        fontSize: 16,

     

       
119
       
-
       
                        color: semantic.text,

     

       
120
       
-
       
                    }}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
121
       
 
       
                    value={inputText}

     

       
122
       
 
       
                    onChangeText={setInputText}

     

       
123
       
 
       
                    placeholder="boop"

     

       
124
       
 
       
                    placeholderTextColor={semantic.textTertiary}

     

       
125
       
 
       
                    onSubmitEditing={handleSend}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
126
       
 
       
                />

     

       
127
       
 
       
                <TouchableOpacity

     

       
128
       
 
       
                    style={{

     

       
129
       
-
       
                        backgroundColor: semantic.primary,

     

       
130
       
-
       
                        paddingHorizontal: 20,

     

       
131
       
-
       
                        paddingVertical: 10,

     

       
132
       
-
       
                        borderRadius: 8,

     

       
133
       
 
       
                        justifyContent: "center",

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
134
       
 
       
                    }}

     

       
135
       
 
       
                    onPress={handleSend}

     

       
136
       
 
       
                    disabled={!isConnected}

     

       
137
       
 
       
                >

     

       
138
       
-
       
                    <Text

     

       
139
       
-
       
                        style={{

     

       
140
       
-
       
                            color: semantic.textInverse,

     

       
141
       
-
       
                            fontSize: 16,

     

       
142
       
-
       
                            fontWeight: "600",

     

       
143
       
-
       
                        }}

     

       
144
       
-
       
                    >

     

       
145
       
-
       
                        Send

     

       
146
       
-
       
                    </Text>

     

       
147
       
 
       
                </TouchableOpacity>

     

       
148
       
 
       
            </View>

     

       
149
       
 
       
        </View>

     

···

       
1
       
 
       
import { Message } from "@/components/Chat/Message";

     

       
2
       
 
       
import { Loading } from "@/components/primitives/Loading";

     

       
3
       
 
       
import { Text } from "@/components/primitives/Text";

     

       
4
       
+
       
import { useFacet } from "@/lib/facet";

     

       
5
       
 
       
import { useChannel } from "@/lib/hooks/useChannel";

     

       
6
       
 
       
import type { AtUri } from "@/lib/types/atproto";

     

       
7
       
 
       
import { useProfile } from "@/providers/authed/ProfileProvider";

     

       
8
       
 
       
import { useCurrentPalette } from "@/providers/ThemeProvider";

     

       
9
       
+
       
import { ArrowUp } from "lucide-react-native";

     

       
10
       
 
       
import { useState } from "react";

     

       
11
       
 
       
import {

     

       
12
       
 
       
    View,

     

       
13
       
 
       
    TextInput,

     

       
14
       
 
       
    TouchableOpacity,

     

       
0
       
 
       

     

       
15
       
 
       
    Image,

     

       
16
       
 
       
    FlatList,

     

       
17
       
 
       
} from "react-native";

     
···

       
21
       
 
       
    const { messages, sendMessageToChannel, isConnected } =

     

       
22
       
 
       
        useChannel(channelAtUri);

     

       
23
       
 
       
    const { semantic } = useCurrentPalette();

     

       
24
       
+
       
    const { typography, atoms } = useFacet();

     

       
25
       
 
       


     

       
26
       
 
       
    const handleSend = () => {

     

       
27
       
 
       
        if (inputText.trim()) {

     
···

       
52
       
 
       
                            justifyContent: "space-between",

     

       
53
       
 
       
                            padding: 16,

     

       
54
       
 
       
                            borderBottomWidth: 1,

     

       
55
       
+
       
                            borderBottomColor: semantic.borderVariant,

     

       
56
       
 
       
                            alignItems: "center",

     

       
57
       
 
       
                        }}

     

       
58
       
 
       
                    >

     
···

       
64
       
 
       
                                style={{

     

       
65
       
 
       
                                    width: 32,

     

       
66
       
 
       
                                    height: 32,

     

       
67
       
+
       
                                    borderRadius: atoms.radii.full,

     

       
68
       
 
       
                                }}

     

       
69
       
 
       
                                source={{ uri: profile.avatar }}

     

       
70
       
 
       
                            />

     
···

       
76
       
 
       
                style={{

     

       
77
       
 
       
                    padding: 16,

     

       
78
       
 
       
                    borderBottomWidth: 1,

     

       
79
       
+
       
                    borderBottomColor: semantic.borderVariant,

     

       
80
       
 
       
                }}

     

       
81
       
 
       
            >

     

       
82
       
 
       
                <Text

     
···

       
91
       
 
       


     

       
92
       
 
       
            <FlatList

     

       
93
       
 
       
                inverted

     

       
94
       
+
       
                data={messages.toReversed()}

     

       
95
       
 
       
                renderItem={({ item }) => <Message message={item} />}

     

       
96
       
+
       
                keyExtractor={(_, index) => index.toString()}

     

       
97
       
 
       
                contentContainerStyle={{

     

       
98
       
+
       
                    paddingLeft: 20,

     

       
99
       
+
       
                    flex: 1,

     

       
100
       
+
       
                    gap: 2,

     

       
101
       
 
       
                }}

     

       
102
       
+
       
                showsVerticalScrollIndicator={false}

     

       
103
       
 
       
            />

     

       
104
       
 
       


     

       
105
       
 
       
            <View

     

       
106
       
 
       
                style={{

     

       
107
       
 
       
                    flexDirection: "row",

     

       
108
       
 
       
                    padding: 16,

     

       
109
       
+
       
                    alignItems: "center",

     

       
0
       
 
       

     

       
110
       
 
       
                }}

     

       
111
       
 
       
            >

     

       
112
       
 
       
                <TextInput

     

       
113
       
+
       
                    style={[

     

       
114
       
+
       
                        {

     

       
115
       
+
       
                            flex: 1,

     

       
116
       
+
       
                            borderWidth: 1,

     

       
117
       
+
       
                            borderColor: semantic.border,

     

       
118
       
+
       
                            borderRadius: 8,

     

       
119
       
+
       
                            paddingHorizontal: 12,

     

       
120
       
+
       
                            paddingVertical: 10,

     

       
121
       
+
       
                            marginRight: 8,

     

       
122
       
+
       
                            color: semantic.text,

     

       
123
       
+
       
                            outline: "0",

     

       
124
       
+
       
                        },

     

       
125
       
+
       
                        typography.sizes.base,

     

       
126
       
+
       
                    ]}

     

       
127
       
 
       
                    value={inputText}

     

       
128
       
 
       
                    onChangeText={setInputText}

     

       
129
       
 
       
                    placeholder="boop"

     

       
130
       
 
       
                    placeholderTextColor={semantic.textTertiary}

     

       
131
       
 
       
                    onSubmitEditing={handleSend}

     

       
132
       
+
       
                    // eslint-disable-next-line @typescript-eslint/no-deprecated -- can't get it working with the new prop.

     

       
133
       
+
       
                    blurOnSubmit={false}

     

       
134
       
 
       
                />

     

       
135
       
 
       
                <TouchableOpacity

     

       
136
       
 
       
                    style={{

     

       
137
       
+
       
                        backgroundColor: inputText.trim()

     

       
138
       
+
       
                            ? semantic.primary

     

       
139
       
+
       
                            : semantic.border,

     

       
140
       
+
       
                        borderRadius: atoms.radii.full,

     

       
141
       
 
       
                        justifyContent: "center",

     

       
142
       
+
       
                        height: 36,

     

       
143
       
+
       
                        width: 36,

     

       
144
       
+
       
                        alignItems: "center",

     

       
145
       
 
       
                    }}

     

       
146
       
 
       
                    onPress={handleSend}

     

       
147
       
 
       
                    disabled={!isConnected}

     

       
148
       
 
       
                >

     

       
149
       
+
       
                    <ArrowUp height={20} width={20} />

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
150
       
 
       
                </TouchableOpacity>

     

       
151
       
 
       
            </View>

     

       
152
       
 
       
        </View>

     

···

       
43
       
 
       
                padding: 12,

     

       
44
       
 
       
                paddingTop: 6,

     

       
45
       
 
       
                borderTopRightRadius: atoms.radii.xl,

     

       
0
       
 
       

     

       
46
       
 
       
            }}

     

       
47
       
 
       
        >

     

       
48
       
 
       
            {spaces.map((space) => (

     

···

       
43
       
 
       
                padding: 12,

     

       
44
       
 
       
                paddingTop: 6,

     

       
45
       
 
       
                borderTopRightRadius: atoms.radii.xl,

     

       
46
       
+
       
                minWidth: 200,

     

       
47
       
 
       
            }}

     

       
48
       
 
       
        >

     

       
49
       
 
       
            {spaces.map((space) => (