feat(react-sdk): uploading attachments (#16)

Author: arnautov-anton

AGENTS.md

@@ -9,7 +9,7 @@ Key React components include `AIMarkdown`, `StreamingMessage`, and `AIMessageCom
 ## Build, Test, and Development Commands
 - `pnpm install` — install workspace deps from `pnpm-lock.yaml`.
 - `pnpm packages:build:all` / `pnpm examples:build:all` — rebuild SDKs (Vite, `tsc`, Sass, bob) or demos.
-- `pnpm --filter @stream-io/ai-chat-react dev` — watch-build the React SDK; `pnpm --filter ./packages/react-native-sdk start` and `pnpm --filter ./packages/node-sdk dev` serve RN/Node watch modes.
+- `pnpm --filter @stream-io/chat-react-ai dev` — watch-build the React SDK; `pnpm --filter ./packages/react-native-sdk start` and `pnpm --filter ./packages/node-sdk dev` serve RN/Node watch modes.
 - `pnpm packages:test:all` or `pnpm --filter ./packages/react-sdk exec vitest run` — run Vitest across the repo or inside one package.
 - `pnpm lint:all` / `pnpm prettier:fix-all` — enforce lint and format rules before pushing.
 

CLAUDE.md

@@ -34,7 +34,7 @@ pnpm examples:build:all
 pnpm packages:test:all
 
 # Test a specific package
-pnpm --filter @stream-io/ai-chat-react test
+pnpm --filter @stream-io/chat-react-ai test
 pnpm --filter ./packages/react-native-sdk test
 
 # Lint everything
@@ -143,7 +143,7 @@ Both React and React Native SDKs use `@stream-io/state-store` for component stat
 - Both: `react-syntax-highlighter` for code blocks
 
 **Styling:**
-- React SDK: SCSS files compiled to CSS, consumers import from `@stream-io/ai-chat-react/styles/*`
+- React SDK: SCSS files compiled to CSS, consumers import from `@stream-io/chat-react-ai/styles/*`
 - React Native: StyleSheet-based, no external styles
 
 ## TypeScript Configuration

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

@@ -13,6 +13,8 @@ export const EmptyState = () => {
       setActiveChannel(
         client.channel('messaging', `ai-${nanoId()}`, {
           members: [client.userID as string],
+          // @ts-expect-error fix - this is a hack that allows custom upload funtion to run
+          own_capabilities: ['upload-file'],
         }),
       );
     }

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

@@ -56,7 +56,7 @@
     color: var(--ai-demo-text-primary);
     border-color: var(--ai-demo-border);
     border-radius: 8px;
-    padding: 0.5rem 0.75rem;
+    // padding: 0.5rem 0.75rem;
     font-family: var(--ai-demo-font-family);
     font-size: 0.875rem;
     cursor: pointer;

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

@@ -1,61 +1,139 @@
 import { AIMessageComposer } from '@stream-io/chat-react-ai';
+import { useEffect } from 'react';
 import {
+  isImageFile,
+  type Channel,
+  type LocalUploadAttachment,
+  type UploadRequestFn,
+} from 'stream-chat';
+import {
+  useAttachmentsForPreview,
   useChannelActionContext,
   useChannelStateContext,
+  useChatContext,
   useMessageComposer,
 } from 'stream-chat-react';
 import { startAiAgent } from '../../api.ts';
 import './MessageInputBar.scss';
 
+const isWatchedByAI = (channel: Channel) => {
+  return Object.keys(channel.state.watchers).some((watcher) =>
+    watcher.startsWith('ai-bot'),
+  );
+};
+
 export const MessageInputBar = () => {
+  const { client } = useChatContext();
   const { updateMessage, sendMessage } = useChannelActionContext();
   const { channel } = useChannelStateContext();
   const composer = useMessageComposer();
 
+  const { attachments } = useAttachmentsForPreview();
+
+  useEffect(() => {
+    if (!composer) return;
+
+    const upload: UploadRequestFn = (file) => {
+      const f = isImageFile(file) ? client.uploadImage : client.uploadFile;
+
+      return f.call(client, file as File);
+    };
+
+    const previousDefault = composer.attachmentManager.doDefaultUploadRequest;
+
+    composer.attachmentManager.setCustomUploadFn(upload);
+
+    return () => composer.attachmentManager.setCustomUploadFn(previousDefault);
+  }, [client, composer]);
+
   return (
     <div className="ai-demo-message-input-bar">
       <AIMessageComposer
+        onChange={(e) => {
+          const input = e.currentTarget.elements.namedItem(
+            'attachments',
+          ) as HTMLInputElement | null;
+
+          const files = input?.files ?? null;
+
+          if (files) {
+            composer.attachmentManager.uploadFiles(files);
+          }
+        }}
         onSubmit={async (e) => {
           const event = e;
-          const target = (event.currentTarget ??
-            event.target) as HTMLFormElement | null;
           event.preventDefault();
 
-          const formData = new FormData(event.currentTarget);
+          const target = event.currentTarget;
+
+          const formData = new FormData(target);
 
-          const t = formData.get('message');
+          const message = formData.get('message');
           const model = formData.get('model');
 
-          composer.textComposer.setText(t as string);
+          composer.textComposer.setText(message as string);
 
-          const d = await composer.compose();
+          const composedData = await composer.compose();
 
-          if (!d) return;
+          if (!composedData) return;
 
-          target?.reset();
+          target.reset();
           composer.clear();
 
-          if (channel.initialized) {
-            const isAiAgentActive = Object.keys(channel.state.watchers).some(
-              (userId) => userId.startsWith('ai-bot'),
-            );
-            if (!isAiAgentActive) {
-              await startAiAgent(channel, model);
-            }
-
-            await sendMessage(d);
-          } else {
-            updateMessage(d?.localMessage);
+          updateMessage(composedData?.localMessage);
 
+          if (!channel.initialized) {
             await channel.watch();
+          }
 
-            // TODO: wrap in retry (in case channel creation takes longer)
+          if (!isWatchedByAI(channel)) {
             await startAiAgent(channel, model);
-
-            await sendMessage(d);
           }
+
+          await sendMessage(composedData);
         }}
-      />
+      >
+        <AIMessageComposer.AttachmentPreview>
+          {attachments.map((attachment) => (
+            <AIMessageComposer.AttachmentPreview.Item
+              key={attachment.localMetadata.id}
+              file={attachment.localMetadata.file as File}
+              state={attachment.localMetadata.uploadState}
+              imagePreviewSource={
+                attachment.thumb_url ||
+                (attachment.localMetadata.previewUri as string)
+              }
+              onDelete={() => {
+                composer.attachmentManager.removeAttachments([
+                  attachment.localMetadata.id,
+                ]);
+              }}
+              onRetry={() => {
+                composer.attachmentManager.uploadAttachment(
+                  attachment as LocalUploadAttachment,
+                );
+              }}
+            />
+          ))}
+        </AIMessageComposer.AttachmentPreview>
+        <AIMessageComposer.TextInput name="message" />
+        <div
+          style={{
+            display: 'flex',
+            gap: '1rem',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <div style={{ display: 'flex', gap: '.25rem', alignItems: 'center' }}>
+            <AIMessageComposer.FileInput name="attachments" />
+            <AIMessageComposer.SpeechToTextButton />
+            <AIMessageComposer.ModelSelect name="model" />
+          </div>
+
+          <AIMessageComposer.SubmitButton />
+        </div>
+      </AIMessageComposer>
     </div>
   );
 };