Skip to content

Commit dec67fc

Browse files
isekovanicisekovanic
authored
feat: ai-bot integration poc (#2819)
* feat: add StreamingMessageView to kick off ai feature * fix: issues with message view * feat: add AITypingIndicatorView * feat: make send message button react to ai state * fix: improve typewriter animation * fix: improvements in ui and typewriter * chore: add customizations to StreamingMessageView * fix: hook deps * chore: extract logic in hook * fix: custom events * fix: revert the type change in favor of changes in the LLC * feat: codeblock scrollable view * feat: table initial reimpl * feat: finish table impl * fix: horizontal scroll list performance issues * feat: add markdown parsing fixes, optimistic code capture and various improvements * fix: theme prop and theming in general * fix: remove edited lalbel for ai messages * fix: bug with stop streaming button and types * fix: colors in md rendering * fix: rename custom scrollview * chore: translations * fix: remove TODO * chore: extract indicator styles in theme * fix: safeguard if channel does not exist * fix: get rid of enum and introduce proper type * fix: allow only message overrides * chore: update event names as per the changes * fix: bump stream-chat-js version to v8.46.0 * fix: use channel method for sending events * fix: cover background mode case * fix: use type from LLC * chore: add jsdocs * fix: move check to checker fn * fix: add overrides for StreamingMessageView * chore: add override for stop streaming button
1 parent ab21961 commit dec67fc

39 files changed

+611
-26
lines changed

‎examples/SampleApp/src/hooks/useStreamChatTheme.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const getChatStyle = (colorScheme: ColorSchemeName): DeepPartial<Theme> => ({
1717
border: '#141924',
1818
button_background: '#FFFFFF',
1919
button_text: '#005FFF',
20+
code_block: '#222222',
2021
grey: '#7A7A7A',
2122
grey_gainsboro: '#2D2F2F',
2223
grey_whisper: '#1C1E22',

‎examples/SampleApp/src/screens/ChannelScreen.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
useChatContext,
1313
useTheme,
1414
useTypingString,
15+
AITypingIndicatorView,
1516
} from 'stream-chat-react-native';
1617
import { Platform, StyleSheet, View } from 'react-native';
1718
import type { StackNavigationProp } from '@react-navigation/stack';
@@ -168,6 +169,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
168169
});
169170
}}
170171
/>
172+
<AITypingIndicatorView channel={channel} />
171173
<MessageInput />
172174
</Channel>
173175
</View>

‎examples/SampleApp/yarn.lock‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7405,6 +7405,21 @@ [email protected]:
74057405
jsonwebtoken "~9.0.0"
74067406
ws "^7.5.10"
74077407

7408+
[email protected]:
7409+
version "8.46.0"
7410+
resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.46.0.tgz#416b325e05b144d0937a3527d1e622463113d605"
7411+
integrity sha512-HQVCRVldrfQFAvsBOHiHR0TKYf+wpsg/cAzRojeZY+buy1vG6eoqk09h6Fl4k2eG3zFLoA0G9W6o7o45jyFE1g==
7412+
dependencies:
7413+
"@babel/runtime" "^7.16.3"
7414+
"@types/jsonwebtoken" "~9.0.0"
7415+
"@types/ws" "^7.4.0"
7416+
axios "^1.6.0"
7417+
base64-js "^1.5.1"
7418+
form-data "^4.0.0"
7419+
isomorphic-ws "^4.0.1"
7420+
jsonwebtoken "~9.0.0"
7421+
ws "^7.5.10"
7422+
74087423
strict-uri-encode@^2.0.0:
74097424
version "2.0.0"
74107425
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"

‎package/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
"path": "0.12.7",
7878
"react-native-markdown-package": "1.8.2",
7979
"react-native-url-polyfill": "^1.3.0",
80-
"stream-chat": "8.45.1"
80+
"stream-chat": "8.46.0"
8181
},
8282
"peerDependencies": {
8383
"@op-engineering/op-sqlite": ">=9.3.0",

‎package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
3+
import { StyleSheet, Text, View } from 'react-native';
4+
5+
import { Channel } from 'stream-chat';
6+
7+
import { AIStates, useAIState } from './hooks/useAIState';
8+
9+
import { useChannelContext, useTheme, useTranslationContext } from '../../contexts';
10+
import type { DefaultStreamChatGenerics } from '../../types/types';
11+
12+
export type AITypingIndicatorViewProps<
13+
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
14+
> = {
15+
channel?: Channel<StreamChatGenerics>;
16+
};
17+
18+
export const AITypingIndicatorView = <
19+
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
20+
>({
21+
channel: channelFromProps,
22+
}: AITypingIndicatorViewProps<StreamChatGenerics>) => {
23+
const { t } = useTranslationContext();
24+
const { channel: channelFromContext } = useChannelContext<StreamChatGenerics>();
25+
const channel = channelFromProps || channelFromContext;
26+
const { aiState } = useAIState(channel);
27+
const allowedStates = {
28+
[AIStates.Thinking]: t('Thinking...'),
29+
[AIStates.Generating]: t('Generating...'),
30+
};
31+
32+
const {
33+
theme: {
34+
aiTypingIndicatorView: { container, text },
35+
colors: { black, grey_gainsboro },
36+
},
37+
} = useTheme();
38+
39+
return aiState in allowedStates ? (
40+
<View style={[styles.container, { backgroundColor: grey_gainsboro }, container]}>
41+
<Text style={[{ color: black }, text]}>{allowedStates[aiState]}</Text>
42+
</View>
43+
) : null;
44+
};
45+
46+
AITypingIndicatorView.displayName = 'AITypingIndicatorView{messageSimple{content}}';
47+
48+
const styles = StyleSheet.create({
49+
container: { paddingHorizontal: 16, paddingVertical: 18 },
50+
});

‎package/src/components/AITypingIndicatorView/hooks/useAIState.ts‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { useEffect, useState } from 'react';
2+
3+
import { AIState, Channel, Event } from 'stream-chat';
4+
5+
import { useChatContext } from '../../../contexts';
6+
import type { DefaultStreamChatGenerics } from '../../../types/types';
7+
import { useIsOnline } from '../../Chat/hooks/useIsOnline';
8+
9+
export const AIStates = {
10+
Error: 'AI_STATE_ERROR',
11+
ExternalSources: 'AI_STATE_EXTERNAL_SOURCES',
12+
Generating: 'AI_STATE_GENERATING',
13+
Idle: 'AI_STATE_IDLE',
14+
Thinking: 'AI_STATE_THINKING',
15+
};
16+
17+
/**
18+
* A hook that returns the current state of the AI.
19+
* @param {Channel} channel - The channel for which we want to know the AI state.
20+
* @returns {{ aiState: AIState }} The current AI state for the given channel.
21+
*/
22+
export const useAIState = <
23+
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
24+
>(
25+
channel?: Channel<StreamChatGenerics>,
26+
): { aiState: AIState } => {
27+
const { client } = useChatContext<StreamChatGenerics>();
28+
const { isOnline } = useIsOnline<StreamChatGenerics>(client);
29+
30+
const [aiState, setAiState] = useState<AIState>(AIStates.Idle);
31+
32+
useEffect(() => {
33+
if (!isOnline) {
34+
setAiState(AIStates.Idle);
35+
}
36+
}, [isOnline]);
37+
38+
useEffect(() => {
39+
if (!channel) {
40+
return;
41+
}
42+
43+
const indicatorChangedListener = channel.on(
44+
'ai_indicator.update',
45+
(event: Event<StreamChatGenerics>) => {
46+
const { cid } = event;
47+
const state = event.ai_state as AIState;
48+
if (channel.cid === cid) {
49+
setAiState(state);
50+
}
51+
},
52+
);
53+
54+
const indicatorClearedListener = channel.on('ai_indicator.clear', (event) => {
55+
const { cid } = event;
56+
if (channel.cid === cid) {
57+
setAiState(AIStates.Idle);
58+
}
59+
});
60+
61+
return () => {
62+
indicatorChangedListener.unsubscribe();
63+
indicatorClearedListener.unsubscribe();
64+
};
65+
}, [channel]);
66+
67+
return { aiState };
68+
};

‎package/src/components/AITypingIndicatorView/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './AITypingIndicatorView';
2+
export * from './hooks/useAIState';

‎package/src/components/Channel/Channel.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/
142142
import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageSimple/MessageTimestamp';
143143
import { ReactionListBottom as ReactionListBottomDefault } from '../Message/MessageSimple/ReactionList/ReactionListBottom';
144144
import { ReactionListTop as ReactionListTopDefault } from '../Message/MessageSimple/ReactionList/ReactionListTop';
145+
import { StreamingMessageView as DefaultStreamingMessageView } from '../Message/MessageSimple/StreamingMessageView';
145146
import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
146147
import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
147148
import { AudioRecorder as AudioRecorderDefault } from '../MessageInput/components/AudioRecorder/AudioRecorder';
@@ -161,6 +162,7 @@ import { MoreOptionsButton as MoreOptionsButtonDefault } from '../MessageInput/M
161162
import { SendButton as SendButtonDefault } from '../MessageInput/SendButton';
162163
import { SendMessageDisallowedIndicator as SendMessageDisallowedIndicatorDefault } from '../MessageInput/SendMessageDisallowedIndicator';
163164
import { ShowThreadMessageInChannelButton as ShowThreadMessageInChannelButtonDefault } from '../MessageInput/ShowThreadMessageInChannelButton';
165+
import { StopMessageStreamingButton as DefaultStopMessageStreamingButton } from '../MessageInput/StopMessageStreamingButton';
164166
import { UploadProgressIndicator as UploadProgressIndicatorDefault } from '../MessageInput/UploadProgressIndicator';
165167
import { DateHeader as DateHeaderDefault } from '../MessageList/DateHeader';
166168
import type { MessageType } from '../MessageList/hooks/useMessageList';
@@ -354,6 +356,7 @@ export type ChannelPropsWithContext<
354356
| 'VideoThumbnail'
355357
| 'PollContent'
356358
| 'hasCreatePoll'
359+
| 'StreamingMessageView'
357360
>
358361
> &
359362
Partial<Pick<ThreadContextValue<StreamChatGenerics>, 'allowThreadMessagesInChannel'>> & {
@@ -441,7 +444,12 @@ export type ChannelPropsWithContext<
441444
* Tells if channel is rendering a thread list
442445
*/
443446
threadList?: boolean;
444-
} & Partial<Pick<InputMessageInputContextValue, 'openPollCreationDialog' | 'CreatePollContent'>>;
447+
} & Partial<
448+
Pick<
449+
InputMessageInputContextValue,
450+
'openPollCreationDialog' | 'CreatePollContent' | 'StopMessageStreamingButton'
451+
>
452+
>;
445453

446454
const ChannelWithContext = <
447455
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -566,7 +574,15 @@ const ChannelWithContext = <
566574
MessageAvatar = MessageAvatarDefault,
567575
MessageBounce = MessageBounceDefault,
568576
MessageContent = MessageContentDefault,
569-
messageContentOrder = ['quoted_reply', 'gallery', 'files', 'poll', 'text', 'attachments'],
577+
messageContentOrder = [
578+
'quoted_reply',
579+
'gallery',
580+
'files',
581+
'poll',
582+
'ai_text',
583+
'text',
584+
'attachments',
585+
],
570586
MessageDeleted = MessageDeletedDefault,
571587
MessageEditedTimestamp = MessageEditedTimestampDefault,
572588
MessageError = MessageErrorDefault,
@@ -625,6 +641,8 @@ const ChannelWithContext = <
625641
StartAudioRecordingButton = AudioRecordingButtonDefault,
626642
stateUpdateThrottleInterval = defaultThrottleInterval,
627643
StickyHeader = StickyHeaderDefault,
644+
StopMessageStreamingButton: StopMessageStreamingButtonOverride,
645+
StreamingMessageView = DefaultStreamingMessageView,
628646
supportedReactions = reactionData,
629647
t,
630648
thread: threadFromProps,
@@ -641,6 +659,10 @@ const ChannelWithContext = <
641659
} = props;
642660

643661
const { thread: threadProps, threadInstance } = threadFromProps;
662+
const StopMessageStreamingButton =
663+
StopMessageStreamingButtonOverride === undefined
664+
? DefaultStopMessageStreamingButton
665+
: StopMessageStreamingButtonOverride;
644666

645667
const {
646668
theme: {
@@ -2243,6 +2265,7 @@ const ChannelWithContext = <
22432265
setQuotedMessageState,
22442266
ShowThreadMessageInChannelButton,
22452267
StartAudioRecordingButton,
2268+
StopMessageStreamingButton,
22462269
UploadProgressIndicator,
22472270
});
22482271

@@ -2352,6 +2375,7 @@ const ChannelWithContext = <
23522375
setEditingState,
23532376
setQuotedMessageState,
23542377
shouldShowUnreadUnderlay,
2378+
StreamingMessageView,
23552379
supportedReactions,
23562380
targetedMessage,
23572381
TypingIndicator,

‎package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export const useCreateInputMessageInputContext = <
6464
showPollCreationDialog,
6565
ShowThreadMessageInChannelButton,
6666
StartAudioRecordingButton,
67+
StopMessageStreamingButton,
6768
UploadProgressIndicator,
6869
}: InputMessageInputContextValue<StreamChatGenerics> & {
6970
/**
@@ -133,6 +134,7 @@ export const useCreateInputMessageInputContext = <
133134
showPollCreationDialog,
134135
ShowThreadMessageInChannelButton,
135136
StartAudioRecordingButton,
137+
StopMessageStreamingButton,
136138
UploadProgressIndicator,
137139
}),
138140
// eslint-disable-next-line react-hooks/exhaustive-deps

‎package/src/components/Channel/hooks/useCreateMessagesContext.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ export const useCreateMessagesContext = <
9696
setEditingState,
9797
setQuotedMessageState,
9898
shouldShowUnreadUnderlay,
99+
StreamingMessageView,
99100
supportedReactions,
100101
targetedMessage,
101102
TypingIndicator,
@@ -205,6 +206,7 @@ export const useCreateMessagesContext = <
205206
setEditingState,
206207
setQuotedMessageState,
207208
shouldShowUnreadUnderlay,
209+
StreamingMessageView,
208210
supportedReactions,
209211
targetedMessage,
210212
TypingIndicator,

0 commit comments

Comments
 (0)