@tellescope/chat 1.256.16 → 2.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/lib/cjs/tsconfig.cjs.tsbuildinfo +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +14 -13
- package/tsconfig.cjs.json +18 -0
- package/src/components.native.tsx +0 -205
- package/src/index.native.ts +0 -2
package/package.json
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tellescope/chat",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-beta.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "./lib/cjs/index.js",
|
|
6
6
|
"module": "./lib/esm/index.js",
|
|
7
|
-
"react-native": "./lib/esm/index.js",
|
|
8
7
|
"types": "./lib/esm/index.d.ts",
|
|
9
8
|
"scripts": {
|
|
10
9
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
11
10
|
"build": "npm run-script build:esm && npm run-script build:cjs",
|
|
12
11
|
"build:esm": "tsc",
|
|
13
|
-
"build:cjs": "tsc
|
|
14
|
-
"watch:cjs": "tsc
|
|
12
|
+
"build:cjs": "tsc -b tsconfig.cjs.json",
|
|
13
|
+
"watch:cjs": "tsc -b -w --preserveWatchOutput tsconfig.cjs.json"
|
|
15
14
|
},
|
|
16
15
|
"repository": {
|
|
17
16
|
"type": "git",
|
|
@@ -23,6 +22,9 @@
|
|
|
23
22
|
"url": "https://github.com/tellescope-os/enduser-authentication/issues"
|
|
24
23
|
},
|
|
25
24
|
"homepage": "https://github.com/tellescope-os/enduser-authentication#readme",
|
|
25
|
+
"engines": {
|
|
26
|
+
"node": ">=22.12.0"
|
|
27
|
+
},
|
|
26
28
|
"devDependencies": {
|
|
27
29
|
"@types/react": "17.0.52",
|
|
28
30
|
"@types/react-dom": "17.0.18",
|
|
@@ -38,20 +40,19 @@
|
|
|
38
40
|
"@fontsource/roboto": "4.5.8",
|
|
39
41
|
"@mui/icons-material": "5.15.0",
|
|
40
42
|
"@mui/material": "5.15.0",
|
|
41
|
-
"@tellescope/constants": "
|
|
42
|
-
"@tellescope/react-components": "
|
|
43
|
-
"@tellescope/sdk": "
|
|
44
|
-
"@tellescope/types-client": "
|
|
45
|
-
"@tellescope/types-models": "
|
|
46
|
-
"@tellescope/types-utilities": "
|
|
47
|
-
"@tellescope/utilities": "
|
|
48
|
-
"react-native-image-picker": "7.0.2"
|
|
43
|
+
"@tellescope/constants": "2.0.0-beta.1",
|
|
44
|
+
"@tellescope/react-components": "2.0.0-beta.1",
|
|
45
|
+
"@tellescope/sdk": "2.0.0-beta.1",
|
|
46
|
+
"@tellescope/types-client": "2.0.0-beta.1",
|
|
47
|
+
"@tellescope/types-models": "2.0.0-beta.1",
|
|
48
|
+
"@tellescope/types-utilities": "2.0.0-beta.1",
|
|
49
|
+
"@tellescope/utilities": "2.0.0-beta.1"
|
|
49
50
|
},
|
|
50
51
|
"peerDependencies": {
|
|
51
52
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
52
53
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
53
54
|
},
|
|
54
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "20732ce4e382a7d81dde795ce9c7194c2aca1ce6",
|
|
55
56
|
"publishConfig": {
|
|
56
57
|
"access": "public"
|
|
57
58
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{
|
|
2
|
+
// CommonJS build (lib/cjs); see ../../constants/tsconfig.cjs.json.
|
|
3
|
+
"extends": "./tsconfig.json",
|
|
4
|
+
"compilerOptions": {
|
|
5
|
+
"module": "commonjs",
|
|
6
|
+
"outDir": "lib/cjs",
|
|
7
|
+
"tsBuildInfoFile": "lib/cjs/tsconfig.cjs.tsbuildinfo"
|
|
8
|
+
},
|
|
9
|
+
"references": [
|
|
10
|
+
{ "path": "../components/tsconfig.cjs.json" },
|
|
11
|
+
{ "path": "../../sdk/tsconfig.cjs.json" },
|
|
12
|
+
{ "path": "../../utilities/tsconfig.cjs.json" },
|
|
13
|
+
{ "path": "../../types-client/tsconfig.cjs.json" },
|
|
14
|
+
{ "path": "../../types-models/tsconfig.cjs.json" },
|
|
15
|
+
{ "path": "../../types-utilities/tsconfig.cjs.json" },
|
|
16
|
+
{ "path": "../../constants/tsconfig.cjs.json" }
|
|
17
|
+
]
|
|
18
|
+
}
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
import { launchImageLibrary, launchCamera } from 'react-native-image-picker';
|
|
2
|
-
import { Modal, TextInput, useWindowDimensions } from "react-native"
|
|
3
|
-
import { Avatar } from 'react-native-paper'
|
|
4
|
-
import {
|
|
5
|
-
useFileUpload,
|
|
6
|
-
Flex,
|
|
7
|
-
Typography,
|
|
8
|
-
AsyncIconButton,
|
|
9
|
-
SendIcon,
|
|
10
|
-
LabeledIconButton,
|
|
11
|
-
Button,
|
|
12
|
-
Paper,
|
|
13
|
-
useChats,
|
|
14
|
-
useResolvedSession,
|
|
15
|
-
} from "@tellescope/react-components"
|
|
16
|
-
import { useState } from 'react';
|
|
17
|
-
import { HTMLMessageProps } from './components';
|
|
18
|
-
import { sanitize_user_html } from '@tellescope/utilities';
|
|
19
|
-
import RenderHtml from 'react-native-render-html';
|
|
20
|
-
|
|
21
|
-
export const HTMLMessage = ({ html: htmlUnprocessed, color="white", selectable=true } : HTMLMessageProps) => {
|
|
22
|
-
const html = (
|
|
23
|
-
htmlUnprocessed.endsWith('<br/>')
|
|
24
|
-
? htmlUnprocessed.substring(0, htmlUnprocessed.length - 5)
|
|
25
|
-
: htmlUnprocessed
|
|
26
|
-
)
|
|
27
|
-
|
|
28
|
-
const { width } = useWindowDimensions();
|
|
29
|
-
return (
|
|
30
|
-
<RenderHtml defaultTextProps={{ selectable }}
|
|
31
|
-
baseStyle={{
|
|
32
|
-
paddingTop: 4, // causes better fit into both 1-line and multiline chat bubbles
|
|
33
|
-
}}
|
|
34
|
-
contentWidth={width}
|
|
35
|
-
source={{
|
|
36
|
-
html: (
|
|
37
|
-
sanitize_user_html(html)
|
|
38
|
-
)
|
|
39
|
-
}}
|
|
40
|
-
tagsStyles={{
|
|
41
|
-
'body': {
|
|
42
|
-
color,
|
|
43
|
-
},
|
|
44
|
-
'a': {
|
|
45
|
-
color,
|
|
46
|
-
textDecorationColor: color, // underline color in the link
|
|
47
|
-
}
|
|
48
|
-
}}
|
|
49
|
-
/>
|
|
50
|
-
);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
const CHAT_ICON_SIZE = 35
|
|
54
|
-
const SendImageOrVideo = ({
|
|
55
|
-
onUpload,
|
|
56
|
-
disabled
|
|
57
|
-
} : {
|
|
58
|
-
disabled?: boolean,
|
|
59
|
-
onUpload: (file: { secureName: string }, assetType: 'image' | 'video') => void,
|
|
60
|
-
}) => {
|
|
61
|
-
const session = useResolvedSession()
|
|
62
|
-
const [menuOpen, setMenuOpen] = useState(false)
|
|
63
|
-
const [errorMessage, setErrorMessage] = useState('')
|
|
64
|
-
const { handleUpload, uploading } = useFileUpload({ enduserId: session.userInfo.id })
|
|
65
|
-
|
|
66
|
-
const handleImageSelect = async (type: 'library' | 'camera') => {
|
|
67
|
-
if (uploading) return
|
|
68
|
-
setErrorMessage('')
|
|
69
|
-
|
|
70
|
-
const result = await (type === 'library' ? launchImageLibrary : launchCamera)({
|
|
71
|
-
mediaType: 'mixed', // library' ? 'mixed' : 'photo', // mixed only works for library
|
|
72
|
-
maxWidth: 500,
|
|
73
|
-
maxHeight: 500,
|
|
74
|
-
})
|
|
75
|
-
if (result.didCancel) return
|
|
76
|
-
if (result.errorCode || result.errorMessage) {
|
|
77
|
-
setErrorMessage(
|
|
78
|
-
result.errorCode === 'camera_unavailable' ? "Your camera is unavailable"
|
|
79
|
-
: result.errorCode === 'permission' ? "We do have permission to access your camera"
|
|
80
|
-
: result.errorMessage || 'An error occurred'
|
|
81
|
-
)
|
|
82
|
-
return
|
|
83
|
-
}
|
|
84
|
-
const image = result.assets?.[0]
|
|
85
|
-
if (!image) return
|
|
86
|
-
|
|
87
|
-
const blob = await (await fetch(image.uri as string)).blob()
|
|
88
|
-
const actualSize = blob.size // image.size is incorrect by an unpredictable margin
|
|
89
|
-
|
|
90
|
-
try {
|
|
91
|
-
const file = await handleUpload({
|
|
92
|
-
name: image.fileName as string,
|
|
93
|
-
size: actualSize, // image.fileSize as number,
|
|
94
|
-
type: image.type as string,
|
|
95
|
-
}, {
|
|
96
|
-
uri: image.uri as string,
|
|
97
|
-
name: image.fileName as string,
|
|
98
|
-
type: image.type as string,
|
|
99
|
-
})
|
|
100
|
-
onUpload(
|
|
101
|
-
file,
|
|
102
|
-
result.assets?.[0]?.duration ? 'video' : 'image',
|
|
103
|
-
)
|
|
104
|
-
setMenuOpen(false)
|
|
105
|
-
} catch(err: any) {
|
|
106
|
-
setErrorMessage(err?.message ?? err.toString())
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
const menuDisabled = uploading || disabled
|
|
111
|
-
return (
|
|
112
|
-
<>
|
|
113
|
-
<Modal animationType='fade' transparent={true}
|
|
114
|
-
visible={menuOpen} onRequestClose={() => setMenuOpen(false)}
|
|
115
|
-
>
|
|
116
|
-
<Flex flex={1} alignItems="center" justifyContent="center">
|
|
117
|
-
<Paper flex style={{ padding: 25, margin: 10, }} >
|
|
118
|
-
<Button disabled={menuDisabled} variant="contained" onPress={() => handleImageSelect('library')}
|
|
119
|
-
style={{ marginBottom: 20, fontSize: 18, padding: 10 }}
|
|
120
|
-
>
|
|
121
|
-
Upload Photo or Video
|
|
122
|
-
</Button>
|
|
123
|
-
<Button disabled={menuDisabled} variant="contained" onPress={() => handleImageSelect('camera')}
|
|
124
|
-
style={{ fontSize: 18, padding: 10 }}
|
|
125
|
-
>
|
|
126
|
-
Take Photo
|
|
127
|
-
</Button>
|
|
128
|
-
<Button variant='outlined' onPress={() => setMenuOpen(false)} style={{ marginTop: 25 }}>
|
|
129
|
-
Cancel
|
|
130
|
-
</Button>
|
|
131
|
-
|
|
132
|
-
<Typography style={{ marginTop: 5, color: '#ff4444'}}>
|
|
133
|
-
{errorMessage}
|
|
134
|
-
</Typography>
|
|
135
|
-
</Paper>
|
|
136
|
-
</Flex>
|
|
137
|
-
</Modal>
|
|
138
|
-
|
|
139
|
-
<LabeledIconButton label="attach image" disabled={menuDisabled}
|
|
140
|
-
onClick={() => setMenuOpen(true)}
|
|
141
|
-
Icon={() => <Avatar.Icon icon={'image'} size={CHAT_ICON_SIZE} />}
|
|
142
|
-
/>
|
|
143
|
-
</>
|
|
144
|
-
)
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
interface SendMessage_T {
|
|
148
|
-
roomId: string,
|
|
149
|
-
placeholderText?: string;
|
|
150
|
-
style?: React.CSSProperties;
|
|
151
|
-
}
|
|
152
|
-
export const SendMessage = ({
|
|
153
|
-
roomId,
|
|
154
|
-
placeholderText="Enter a message",
|
|
155
|
-
style={},
|
|
156
|
-
}: SendMessage_T) => {
|
|
157
|
-
const [message, setMessage] = useState('')
|
|
158
|
-
const [sending, setSending] = useState(false)
|
|
159
|
-
|
|
160
|
-
const [, { createElement: createMessage }] = useChats(roomId)
|
|
161
|
-
|
|
162
|
-
return (
|
|
163
|
-
<Flex row flex={1} alignContent="center" style={{ marginTop: 8, ...style }}>
|
|
164
|
-
<Flex column flex={1} style={{ marginLeft: 5, marginRight: 5 }}>
|
|
165
|
-
<TextInput value={message} onChangeText={setMessage}
|
|
166
|
-
style={{
|
|
167
|
-
width: '100%',
|
|
168
|
-
borderColor: '#0f0f0f',
|
|
169
|
-
borderWidth: 1,
|
|
170
|
-
padding: 10,
|
|
171
|
-
borderRadius: 5,
|
|
172
|
-
}}
|
|
173
|
-
aria-label="Enter a message..."
|
|
174
|
-
placeholder={placeholderText}
|
|
175
|
-
/>
|
|
176
|
-
</Flex>
|
|
177
|
-
<Flex alignSelf="center">
|
|
178
|
-
<Flex style={{ marginRight: 5 }}>
|
|
179
|
-
<AsyncIconButton label="send" Icon={() => <SendIcon size={CHAT_ICON_SIZE} />}
|
|
180
|
-
disabled={message === ''}
|
|
181
|
-
action={() => createMessage({ message, roomId })}
|
|
182
|
-
onSuccess={() => setMessage('')}
|
|
183
|
-
onChange={setSending}
|
|
184
|
-
/>
|
|
185
|
-
</Flex>
|
|
186
|
-
|
|
187
|
-
<Flex style={{ marginRight: 5 }}>
|
|
188
|
-
<SendImageOrVideo disabled={sending} onUpload={async ({ secureName }, type) => {
|
|
189
|
-
setSending(true)
|
|
190
|
-
try {
|
|
191
|
-
await createMessage({
|
|
192
|
-
roomId, message: '',
|
|
193
|
-
attachments: [{ type, secureName }]
|
|
194
|
-
})
|
|
195
|
-
} catch(err: any) {
|
|
196
|
-
console.error(err)
|
|
197
|
-
} finally {
|
|
198
|
-
setSending(false)
|
|
199
|
-
}
|
|
200
|
-
}} />
|
|
201
|
-
</Flex>
|
|
202
|
-
</Flex>
|
|
203
|
-
</Flex>
|
|
204
|
-
)
|
|
205
|
-
}
|
package/src/index.native.ts
DELETED