feat(react): minimal tutorial sample application

Author: arnautov-anton

examples/react-chat-ai-tutorial/package.json

@@ -11,6 +11,9 @@
   },
   "dependencies": {
     "@stream-io/chat-react-ai": "workspace:^",
+    "clsx": "^2.1.1",
+    "material-symbols": "^0.40.0",
+    "nanoid": "^5.1.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "stream-chat": "^9.26.1",

examples/react-chat-ai-tutorial/src/App.tsx

@@ -1,65 +1,101 @@
-import type { ChannelFilters, ChannelOptions, ChannelSort } from "stream-chat";
+import type { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 import {
-	Chat,
-	Channel,
-	MessageList,
-	useCreateChatClient,
-	ChannelList,
-	Window,
-} from "stream-chat-react";
+  Chat,
+  Channel,
+  MessageList,
+  useCreateChatClient,
+  ChannelList,
+  Window,
+  MessageInput,
+  useChatContext,
+} from 'stream-chat-react';
+import { Composer } from './components/Composer';
+import { MessageBubble } from './components/MessageBubble';
+import { AIStateIndicator } from './components/AIStateIndicator';
+import { useEffect } from 'react';
+import { nanoid } from 'nanoid';
+import { ChannelListItem } from './components/ChannelListItem';
 
 const userToken = import.meta.env.VITE_STREAM_USER_TOKEN;
 const apiKey = import.meta.env.VITE_STREAM_API_KEY;
 
-console.log(import.meta, userToken, apiKey);
-
-if (typeof apiKey !== "string" || !apiKey.length) {
-	throw new Error("Missing VITE_STREAM_API_KEY");
+if (typeof apiKey !== 'string' || !apiKey.length) {
+  throw new Error('Missing VITE_STREAM_API_KEY');
 }
 
-if (typeof userToken !== "string" || !userToken.length) {
-	throw new Error("Missing VITE_STREAM_USER_TOKEN");
+if (typeof userToken !== 'string' || !userToken.length) {
+  throw new Error('Missing VITE_STREAM_USER_TOKEN');
 }
 
 const userIdFromToken = (token: string) => {
-	const [, payload] = token.split(".");
-	const parsedPayload = JSON.parse(atob(payload));
-	return parsedPayload.user_id as string;
+  const [, payload] = token.split('.');
+  const parsedPayload = JSON.parse(atob(payload));
+  return parsedPayload.user_id as string;
 };
 
 const userId = userIdFromToken(userToken!);
 
 const filters: ChannelFilters = {
-	members: { $in: [userId] },
-	type: "messaging",
-	archived: false,
+  members: { $in: [userId] },
+  type: 'messaging',
+  archived: false,
 };
 const options: ChannelOptions = { limit: 5 };
 const sort: ChannelSort = { pinned_at: 1, last_message_at: -1, updated_at: -1 };
 
+const ChatContent = () => {
+  const { setActiveChannel, client, channel } = useChatContext();
+
+  useEffect(() => {
+    if (!channel) {
+      setActiveChannel(
+        client.channel('messaging', `ai-${nanoid()}`, {
+          members: [client.userID as string],
+          // @ts-expect-error fix - this is a hack that allows a custom upload function to run
+          own_capabilities: ['upload-file'],
+        }),
+      );
+    }
+  }, [channel]);
+
+  return (
+    <>
+      <ChannelList
+        Preview={ChannelListItem}
+        setActiveChannelOnMount={false}
+        filters={filters}
+        sort={sort}
+        options={options}
+      />
+      <Channel initializeOnMount={false} Message={MessageBubble}>
+        <Window>
+          <MessageList />
+          <AIStateIndicator />
+          <MessageInput Input={Composer} />
+        </Window>
+      </Channel>
+    </>
+  );
+};
+
 function App() {
-	const chatClient = useCreateChatClient({
-		apiKey: apiKey!,
-		tokenOrProvider: userToken!,
-		userData: {
-			id: userId,
-		},
-	});
+  const chatClient = useCreateChatClient({
+    apiKey: apiKey!,
+    tokenOrProvider: userToken!,
+    userData: {
+      id: userId,
+    },
+  });
 
-	if (!chatClient) {
-		return <div>Loading chat...</div>;
-	}
+  if (!chatClient) {
+    return <div>Loading chat...</div>;
+  }
 
-	return (
-		<Chat client={chatClient}>
-			<ChannelList filters={filters} sort={sort} options={options} />
-			<Channel>
-				<Window>
-					<MessageList />
-				</Window>
-			</Channel>
-		</Chat>
-	);
+  return (
+    <Chat client={chatClient}>
+      <ChatContent />
+    </Chat>
+  );
 }
 
 export default App;

examples/react-chat-ai-tutorial/src/api/index.ts

@@ -0,0 +1,33 @@
+import type { Channel } from 'stream-chat';
+
+const baseApiUrl = 'http://localhost:3000';
+
+export const startAiAgent = async (
+  channel: Channel,
+  model: string,
+  platform:
+    | 'openai'
+    | 'anthropic'
+    | 'gemini'
+    | 'xai'
+    | (string & {}) = 'openai',
+) =>
+  fetch(`${baseApiUrl}/start-ai-agent`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      channel_id: channel.id,
+      channel_type: channel.type,
+      platform,
+      model,
+    }),
+  });
+
+export const summarizeConversation = (text: string) =>
+  fetch(`${baseApiUrl}/summarize`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ text, platform: 'openai' }),
+  })
+    .then((res) => res.json())
+    .then((json) => json.summary as string);

examples/react-chat-ai-tutorial/src/components/AIStateIndicator.tsx

@@ -0,0 +1,15 @@
+import {
+  AIStates,
+  useAIState,
+  useChannelStateContext,
+} from 'stream-chat-react';
+import { AIStateIndicator as StateIndicator } from '@stream-io/chat-react-ai';
+
+export const AIStateIndicator = () => {
+  const { channel } = useChannelStateContext();
+  const { aiState } = useAIState(channel);
+
+  if (![AIStates.Generating, AIStates.Thinking].includes(aiState)) return null;
+
+  return <StateIndicator key={channel.state.last_message_at?.toString()} />;
+};

examples/react-chat-ai-tutorial/src/components/ChannelListItem.css

@@ -0,0 +1,14 @@
+.tut__channel-preview {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+}
+
+.tut__channel-preview--active {
+  background-color: var(--str-chat__primary-surface-color);
+}
+
+.tut__channel-preview__text {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--str-chat__text-color);
+}

examples/react-chat-ai-tutorial/src/components/ChannelListItem.tsx

@@ -0,0 +1,22 @@
+import type { ChannelPreviewProps } from 'stream-chat-react';
+import { useChatContext } from 'stream-chat-react';
+import clsx from 'clsx';
+
+export const ChannelListItem = (props: ChannelPreviewProps) => {
+  const { id, data } = props.channel;
+  const { setActiveChannel, channel: activeChannel } = useChatContext();
+  const isActive = activeChannel?.id === id;
+
+  return (
+    <div
+      className={clsx('tut__channel-preview', {
+        'tut__channel-preview--active': isActive,
+      })}
+      onClick={() => setActiveChannel(props.channel)}
+    >
+      <div className="tut__channel-preview__text">
+        {data?.summary ?? 'New Chat'}
+      </div>
+    </div>
+  );
+};

examples/react-chat-ai-tutorial/src/components/Composer.css

@@ -0,0 +1,14 @@
+.tut__composer-container {
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  overflow-y: hidden;
+  flex-shrink: 0;
+}
+
+.aicr__ai-message-composer__form {
+  max-width: 800px;
+  width: 100%;
+}