update message input api

src/Chat.tsx

@@ -78,6 +78,21 @@ export interface ChatProps extends PropsWithChildren {
    * Callback function to handle creating a new session.
    */
   onNewSession?: () => void;
+
+  /**
+   * Callback function to handle sending a new message.
+   */
+  onSendMessage?: (message: string) => void;
+
+  /**
+   * Callback function to handle stopping the current action.
+   */
+  onStopMessage?: () => void;
+
+  /**
+   * Callback function to handle file upload.
+   */
+  onFileUpload?: (file: File) => void;
 }
 
 export const Chat: FC<ChatProps> = ({
@@ -86,6 +101,9 @@ export const Chat: FC<ChatProps> = ({
   sessions,
   onSelectSession,
   onDeleteSession,
+  onSendMessage,
+  onStopMessage,
+  onFileUpload,
   isLoading,
   activeSessionId,
   theme: customTheme = chatTheme,
@@ -97,7 +115,7 @@ export const Chat: FC<ChatProps> = ({
 }) => {
   const theme = useComponentTheme<ChatTheme>('chat', customTheme);
   const [internalActiveSessionID, setInternalActiveSessionID] = useState<
-    string | undefined
+    string | null
   >(activeSessionId);
 
   const { width, observe } = useDimensions();
@@ -157,7 +175,10 @@ export const Chat: FC<ChatProps> = ({
       activeSessionId: internalActiveSessionID,
       selectSession: handleSelectSession,
       deleteSession: handleDeleteSession,
-      createSession: handleCreateNewSession
+      createSession: handleCreateNewSession,
+      sendMessage: onSendMessage,
+      stopMessage: onStopMessage,
+      fileUpload: onFileUpload
     }),
     [
       isLoading,
@@ -170,7 +191,10 @@ export const Chat: FC<ChatProps> = ({
       internalActiveSessionID,
       handleSelectSession,
       handleDeleteSession,
-      handleCreateNewSession
+      handleCreateNewSession,
+      onSendMessage,
+      onStopMessage,
+      onFileUpload
     ]
   );
 

src/ChatContext.ts

@@ -15,6 +15,9 @@ export interface ChatContextProps {
   selectSession?: (sessionId: string) => void;
   deleteSession?: (sessionId: string) => void;
   createSession?: () => void;
+  sendMessage?: (message: string) => void;
+  stopMessage?: () => void;
+  fileUpload?: (file: File) => void;
 }
 
 export const ChatContext = createContext<ChatContextProps>({

src/ChatInput.tsx

@@ -43,41 +43,24 @@ interface ChatInputProps {
    * Icon to show for attach.
    */
   attachIcon?: ReactElement;
-
-  /**
-   * Callback function to handle sending a new message.
-   */
-  onSendMessage?: (message: string) => void;
-
-  /**
-   * Callback function to handle stopping the current action.
-   */
-  onStopMessage?: () => void;
-
-  /**
-   * Callback function to handle file upload.
-   */
-  onFileUpload?: (file: File) => void;
 }
 
 export const ChatInput: FC<ChatInputProps> = ({
   allowedFiles,
-  onSendMessage,
   placeholder,
-  onStopMessage,
-  onFileUpload,
   defaultValue,
   sendIcon = <SendIcon />,
   stopIcon = <StopIcon />,
   attachIcon = <AttachIcon />
 }) => {
-  const { theme, isLoading, disabled } = useContext(ChatContext);
+  const { theme, isLoading, disabled, sendMessage, stopMessage, fileUpload } =
+    useContext(ChatContext);
   const [message, setMessage] = useState<string>('');
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleSendMessage = () => {
     if (message.trim()) {
-      onSendMessage?.(message);
+      sendMessage?.(message);
       setMessage('');
     }
   };
@@ -91,8 +74,8 @@ export const ChatInput: FC<ChatInputProps> = ({
 
   const handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
-    if (file && onFileUpload) {
-      onFileUpload(file);
+    if (file && fileUpload) {
+      fileUpload(file);
     }
   };
 
@@ -132,7 +115,7 @@ export const ChatInput: FC<ChatInputProps> = ({
         <Button
           title="Stop"
           className={cn(theme.input.stop)}
-          onClick={onStopMessage}
+          onClick={stopMessage}
           disabled={disabled}
         >
           {stopIcon}

stories/Integration.stories.tsx

@@ -147,6 +147,7 @@ export const _OpenAI = () => {
           isLoading={isLoading}
           disabled={!apiKey}
           onDeleteSession={handleDeleteSession}
+          onSendMessage={handleNewMessage}
           activeSessionId={activeSessionId}
         >
           <SessionsList>
@@ -176,7 +177,7 @@ export const _OpenAI = () => {
                 ))
               }
             </SessionMessages>
-            <ChatInput onSendMessage={handleNewMessage} />
+            <ChatInput />
           </SessionMessagePanel>
         </Chat>
       </div>
@@ -209,7 +210,9 @@ export const VercelAI = () => {
 
         setSessions(prevSessions => {
           const newSessionId = sessionId || Date.now().toString();
-          const sessionIndex = prevSessions.findIndex(s => s.id === newSessionId);
+          const sessionIndex = prevSessions.findIndex(
+            s => s.id === newSessionId
+          );
 
           if (sessionIndex === -1) {
             // Create a new session
@@ -260,50 +263,59 @@ export const VercelAI = () => {
     [apiKey]
   );
 
-  const handleDeleteSession = useCallback((sessionId: string) => {
-    setSessions(prevSessions => prevSessions.filter(s => s.id !== sessionId));
-    if (activeSessionId === sessionId) {
-      setActiveSessionId(null);
-    }
-  }, [activeSessionId]);
+  const handleDeleteSession = useCallback(
+    (sessionId: string) => {
+      setSessions(prevSessions => prevSessions.filter(s => s.id !== sessionId));
+      if (activeSessionId === sessionId) {
+        setActiveSessionId(null);
+      }
+    },
+    [activeSessionId]
+  );
 
   const handleNewSession = useCallback(() => {
     setActiveSessionId(null);
   }, []);
 
   return (
-    <div style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      padding: 20
-    }}>
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20
+      }}
+    >
       <Input
         fullWidth
         placeholder="OpenAI API Key"
         value={apiKey}
         onChange={e => setApiKey(e.target.value)}
       />
-      <div style={{
-        position: 'absolute',
-        top: 50,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        padding: 20,
-        margin: 20,
-        background: '#02020F',
-        borderRadius: 5
-      }}>
+      <div
+        style={{
+          position: 'absolute',
+          top: 50,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          padding: 20,
+          margin: 20,
+          background: '#02020F',
+          borderRadius: 5
+        }}
+      >
         <Chat
           viewType="console"
           sessions={sessions}
           isLoading={isLoading}
           disabled={!apiKey}
+          onSendMessage={handleNewMessage}
           onDeleteSession={handleDeleteSession}
           activeSessionId={activeSessionId}
+          onSelectSession={setActiveSessionId}
         >
           <SessionsList>
             <NewSessionButton />
@@ -312,11 +324,7 @@ export const VercelAI = () => {
                 groups.map(({ heading, sessions }) => (
                   <SessionsGroup heading={heading} key={heading}>
                     {sessions.map(s => (
-                      <SessionListItem
-                        key={s.id}
-                        session={s}
-                        onClick={() => setActiveSessionId(s.id)}
-                      />
+                      <SessionListItem key={s.id} session={s} />
                     ))}
                   </SessionsGroup>
                 ))
@@ -336,7 +344,7 @@ export const VercelAI = () => {
                 ))
               }
             </SessionMessages>
-            <ChatInput onSendMessage={handleNewMessage} />
+            <ChatInput />
           </SessionMessagePanel>
         </Chat>
       </div>