feat: implement summarization

Author: oliverlaz

examples/react-example/src/Root.tsx

@@ -1,8 +1,4 @@
-import type {
-  ChannelFilters,
-  ChannelOptions,
-  ChannelSort,
-} from 'stream-chat';
+import type { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 import { AIChatApp } from './components/AIChatApp';
 import { ThemeProvider } from './contexts/ThemeContext';
 
@@ -28,7 +24,7 @@ const filters: ChannelFilters = {
   type: 'messaging',
   archived: false,
 };
-const options: ChannelOptions = { limit: 5, presence: true, state: true };
+const options: ChannelOptions = { limit: 15, presence: true, state: true };
 const sort: ChannelSort = { pinned_at: 1, last_message_at: -1, updated_at: -1 };
 
 const App = () => {

examples/react-example/src/api.ts

@@ -0,0 +1,30 @@
+import type { Channel } from 'stream-chat';
+
+const baseApiUrl = 'https://ai-sdk-server-0f347d455e2e.herokuapp.com';
+
+export const startAiAgent = async (
+  channel: Channel,
+  model: string | File | null,
+  platform: 'openai' | 'anthropic' | 'gemini' | 'xai' = 'openai',
+) => {
+  return await 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 = async (text: string): Promise<string> => {
+  return fetch(`${baseApiUrl}/summarize`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ text, platform: 'openai' }),
+  })
+    .then((res) => res.json())
+    .then((json) => json.summary);
+};

examples/react-example/src/components/AIChatApp/AIChatApp.tsx

@@ -8,6 +8,7 @@ import type {
 import { Chat, useCreateChatClient, useChatContext } from 'stream-chat-react';
 import { Sidebar } from '../Sidebar';
 import { ChatContainer } from '../ChatContainer';
+import { summarizeConversation } from '../../api';
 import './AIChatApp.scss';
 
 interface AIChatAppProps {
@@ -81,6 +82,42 @@ const ChatContent = ({
     return () => window.removeEventListener('popstate', handlePopState);
   }, [client, channel?.id, setActiveChannel]);
 
+  // Watch for new messages and trigger summarization
+  useEffect(() => {
+    if (!channel) return;
+
+    const handleNewMessage = async () => {
+      try {
+        // Get channel state to check message count
+        const state = channel.state;
+        const messages = state.messages || [];
+        const messageCount = messages.length;
+
+        // Only run if there are 5 or fewer messages
+        if (messageCount > 5) return;
+
+        // Extract text from the last 5 messages
+        const messageTexts = messages
+          .slice(-5)
+          .map((msg) => msg.text || '')
+          .filter((text) => text.trim() !== '')
+          .join('\n');
+
+        if (messageTexts.length === 0) return;
+
+        const summary = await summarizeConversation(messageTexts);
+        await channel.update({ summary });
+      } catch (error) {
+        console.error('Failed to summarize conversation:', error);
+      }
+    };
+
+    const subscription = channel.on('message.new', handleNewMessage);
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [channel]);
+
   const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
   const closeSidebar = () => setIsSidebarOpen(false);
 

examples/react-example/src/components/ChatContainer/ChatContainer.tsx

@@ -17,9 +17,7 @@ export const ChatContainer = ({ onToggleSidebar }: ChatContainerProps) => {
         initializeOnMount={false}
         EmptyPlaceholder={<EmptyState />}
         Message={MessageBubble}
-        /* @ts-expect-error: `null` isn't in the types yet */
         UnreadMessagesNotification={null}
-        /* @ts-expect-error: `null` isn't in the types yet */
         UnreadMessagesSeparator={null}
       >
         <TopNavBar onToggleSidebar={onToggleSidebar} />

examples/react-example/src/components/MessageInputBar/MessageInputBar.tsx

@@ -1,30 +1,12 @@
-import { type Channel } from 'stream-chat';
 import { AIMessageComposer } from '@stream-io/chat-react-ai';
 import {
   useChannelActionContext,
   useChannelStateContext,
   useMessageComposer,
 } from 'stream-chat-react';
+import { startAiAgent } from '../../api.ts';
 import './MessageInputBar.scss';
 
-const startAiAgent = async (channel: Channel, model: string | File | null) => {
-  await fetch(
-    'https://ai-sdk-server-0f347d455e2e.herokuapp.com/start-ai-agent',
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        channel_id: channel.id,
-        channel_type: channel.type,
-        platform: 'openai',
-        model,
-      }),
-    },
-  );
-};
-
 export const MessageInputBar = () => {
   const { updateMessage, sendMessage } = useChannelActionContext();
   const { channel } = useChannelStateContext();

examples/react-example/src/components/Sidebar/ChannelPreviewItem.tsx

@@ -3,16 +3,17 @@ import { useChatContext } from 'stream-chat-react';
 import './ChannelPreviewItem.scss';
 
 export const ChannelPreviewItem = (props: ChannelPreviewProps) => {
+  const { id, data } = props.channel;
   const { setActiveChannel, channel: activeChannel } = useChatContext();
-  const isActive = activeChannel?.id === props.channel.id;
+  const isActive = activeChannel?.id === id;
 
   return (
     <div
       className={`ai-demo-channel-preview ${isActive ? 'ai-demo-channel-preview--active' : ''}`}
       onClick={() => setActiveChannel(props.channel)}
     >
       <div className="ai-demo-channel-preview__text">
-        {props.channel.data?.summary ?? props.channel.id}
+        {data?.summary ?? 'New Chat'}
       </div>
     </div>
   );

examples/react-example/src/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import type { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
-import { ChannelList, ChannelPreview } from 'stream-chat-react';
+import { ChannelList } from 'stream-chat-react';
 import { SidebarHeader } from './SidebarHeader';
 import { SidebarFooter } from './SidebarFooter';
 import { ChannelPreviewItem } from './ChannelPreviewItem';
@@ -23,18 +23,16 @@ export const Sidebar = ({
   return (
     <>
       {/* Backdrop for mobile */}
-      {isOpen && (
-        <div className="ai-demo-sidebar-backdrop" onClick={onClose} />
-      )}
+      {isOpen && <div className="ai-demo-sidebar-backdrop" onClick={onClose} />}
 
-      <div className={`ai-demo-sidebar ${isOpen ? 'ai-demo-sidebar--open' : ''}`}>
+      <div
+        className={`ai-demo-sidebar ${isOpen ? 'ai-demo-sidebar--open' : ''}`}
+      >
         <SidebarHeader />
         <div className="ai-demo-sidebar__list">
           <ChannelList
             setActiveChannelOnMount={false}
-            Preview={(props) => (
-              <ChannelPreview {...props} Preview={ChannelPreviewItem} />
-            )}
+            Preview={ChannelPreviewItem}
             filters={filters}
             options={options}
             sort={sort}

examples/react-example/src/components/TopNavBar/TopNavBar.tsx

@@ -10,7 +10,7 @@ export const TopNavBar = ({ onToggleSidebar }: TopNavBarProps) => {
   const { channel } = useChannelStateContext();
   const { theme, toggleTheme } = useTheme();
 
-  const conversationTitle = channel?.data?.summary ?? channel?.id ?? 'New Chat';
+  const conversationTitle = channel?.data?.summary ?? 'New Chat';
 
   return (
     <div className="ai-demo-top-nav">