You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/react-native-sdk/README.md
+32-34Lines changed: 32 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,6 +3,7 @@
3
3
This official repository for Stream Chat's UI components is designed specifically for AI-first applications written in Swift UI. When paired with our real-time [Chat API](https://getstream.io/chat/), it makes integrating with and rendering responses from LLM providers such as ChatGPT, Gemini, Anthropic or any custom backend easier by providing rich with out-of-the-box components able to render Markdown, Code blocks, tables, thinking indicators, images, etc.
4
4
5
5
To start, this library includes the following components which assist with this task:
6
+
6
7
-`StreamingMessageView` - a component that is able to render text, markdown and code in real-time, using a typewriter, character-by-character animation, similar to ChatGPT
7
8
-`ComposerView` - a fully featured prompt composer with attachments and speech input
8
9
-`SpeechToTextButton` - a reusable button that records voice input and streams the recognized transcript back into your UI
@@ -12,12 +13,12 @@ Our team plans to keep iterating and adding more components over time. If there'
12
13
13
14
## 🛠️ Installation
14
15
15
-
The `@stream-io/ai-components-react-native` SDK is available on NPM.
16
+
The `@stream-io/chat-react-native-ai` SDK is available on NPM.
16
17
17
18
To install it and its peer dependencies, you may run the following command:
|`text`|`string`| yes | The text we want to pass as markdown. |
133
134
|`paragraphTextNumberOfLines`|`boolean`| no | A boolean signifying if `numberOfLines` should be applied as a property to markdown `Paragraph` and `Text` components. Particularly useful if we want to display the same message, but in a "cut" fashion (for example when replying to someone). |
134
135
|`rules`|[`MarkdownRules`](https://github.com/GetStream/ai-components-js/blob/11314d5b7e888ed4585e6c4790eb173e928be6b3/packages/react-native-sdk/src/markdown/types.ts#L24)| no | An object of `MarkdownRules` that is then going to be deeply merged with our default rules, based on the [`SimpleMarkdown` parsing engine](https://github.com/Khan/perseus/tree/main/packages/simple-markdown#adding-a-simple-extension). Can be used to add custom rules or change existing rules. You can disable a rule by passing `{ [ruleName]: { match: () => null }}`. |
@@ -140,7 +141,7 @@ Under the hood, it implements a letter-by-letter typewriter animation with a cha
140
141
141
142
Provided below is an example of how to use the component.
142
143
143
-
```tsx
144
+
````tsx
144
145
const markdownText =```
145
146
# Heading
146
147
@@ -149,20 +150,20 @@ some text
149
150
## Another heading
150
151
```;
151
152
152
-
<StreamingMessageView
153
+
<StreamingMessageView
153
154
text={markdownText}
154
155
letterInterval={5}// every 5ms
155
156
renderingLetterCount={3}// render 3 letters at a time
156
-
/>
157
-
```
157
+
/>;
158
+
````
159
+
158
160
### `AITypingIndicatorView`
159
161
160
162
The `AITypingIndicatorView` is used to represent different states of the LLM, such as `Thinking`, `Checking External Sources` and so on, depending on the states you've defined on your backend. The only thing that needs to be passed to the component is the `text` property, which will then be displayed with a shimmering animation.
|`text`|`string`| yes | The text we want to be displayed inside of the view. |
166
167
167
168
#### Example
168
169
@@ -174,9 +175,8 @@ The `AITypingIndicatorView` is used to represent different states of the LLM, su
174
175
175
176
The `ComposerView` gives users a modern text entry surface with attachment previews, actionable bottom sheet, speech-to-text button and an integrated send button.
|`onSendMessage`|`(opts: { text: string; attachments?: MediaPickerState['assets']; custom?: Record<string, unknown>; }) => Promise<void>`| yes | A callback that will be invoked whenever the send button is pressed. The `text`, `attachments` and any `custom` data we've added to the state will be passed to it. |
181
181
|`bottomSheetOptions`|[`BottomSheetOption[]`](https://github.com/GetStream/ai-components-js/blob/11314d5b7e888ed4585e6c4790eb173e928be6b3/packages/react-native-sdk/src/message-composer/MessageComposer.tsx#L19)| no | An array of [`BottomSheetOption`](https://github.com/GetStream/ai-components-js/blob/11314d5b7e888ed4585e6c4790eb173e928be6b3/packages/react-native-sdk/src/message-composer/MessageComposer.tsx#L19) objects that will render the extra options in the bottom sheet. |
182
182
|`bottomSheetInsets`|`{ top: number; bottom: number; left: number; right: number }`| no | An object containing extra insets we can pass to the `ComposerView` in order to make sure the bottom sheet can extend properly beyond them. |
@@ -202,16 +202,16 @@ const options = [
202
202
subtitle: 'Think longer for better answers',
203
203
action: () =>Alert.alert('Pressed on Thinking !'),
204
204
Icon: Flag,
205
-
}
206
-
]
205
+
},
206
+
];
207
207
208
208
const insets =useSafeAreaInsets();
209
209
210
210
<ComposerView
211
211
onSendMessage={sendMessage}
212
212
bottomSheetOptions={bottomSheetOptions}
213
213
bottomSheetInsets={insets}
214
-
/>
214
+
/>;
215
215
```
216
216
217
217
### `SpeechToTextButton`
@@ -222,12 +222,11 @@ It uses the `useDictation` hook under the hood, which can also be used without t
222
222
223
223
It takes a single property named `options` that has the following keys:
|`language`|`string`| no | The language we want to transcribe from. It will default to `en-US`. |
228
-
|`intermediateResults`|`boolean`| no | A boolean signifying whether we want to receive the intermediate results from the transcription or just the final result when the transcription is deemed done. Defaults to `true`|
229
-
|`silenceTimeoutMs`|`number`| no | A number signifying the number of milliseconds of silence until transcription is deemed finished. Defaults to `2500`. |
|`language`|`string`| no | The language we want to transcribe from. It will default to `en-US`. |
228
+
|`intermediateResults`|`boolean`| no | A boolean signifying whether we want to receive the intermediate results from the transcription or just the final result when the transcription is deemed done. Defaults to `true`|
229
+
|`silenceTimeoutMs`|`number`| no | A number signifying the number of milliseconds of silence until transcription is deemed finished. Defaults to `2500`. |
231
230
232
231
```tsx
233
232
const options = {
@@ -251,8 +250,8 @@ In order to modify the theme, you may refer to our full fledged theme object [as
251
250
In the example below, we introduce a dark color scheme through the theming system.
252
251
253
252
```tsx
254
-
const customTheme = {
255
-
colors: colorScheme==='dark'
253
+
const customTheme = {
254
+
colors: colorScheme==='dark'
256
255
? {
257
256
accent_blue: '#4C9DFF',
258
257
accent_red: '#FF636E',
@@ -289,14 +288,14 @@ Stream provides UI components and state handling that make it easy to build real
289
288
## 📕 Tutorials
290
289
291
290
To learn more about integrating AI and chatbots into your application, we recommend checking out the full list of tutorials across all of our supported frontend SDKs and providers. Stream's Chat SDK is natively supported across:
-[Javascript/Bring your own](https://getstream.io/chat/docs/javascript/)
300
299
301
300
## 👩💻 Free for Makers 👨💻
302
301
@@ -309,7 +308,6 @@ We've closed a [\$38 million Series B funding round](https://techcrunch.com/2021
309
308
Our APIs are used by more than a billion end-users, and you'll have a chance to make a huge impact on the product within a team of the strongest engineers all over the world.
310
309
Check out our current openings and apply via [Stream's website](https://getstream.io/team/#jobs).
0 commit comments