Enable the use of other components inside Chat

FunkyOz · Dec 30, 2024 · c913392 · c913392
1 parent 53d0902
commit c913392
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 20 deletions.
diff --git a/apps/site/src/App.tsx b/apps/site/src/App.tsx
@@ -84,6 +84,7 @@ function App() {
                         </SidebarItem>
                     )}
                 </Sidebar>
+                <div>Test</div>
                 <Messages
                     items={activeConversation.messages}
                     isLoading={isLoading}

diff --git a/lib/components/chat/chat.tsx b/lib/components/chat/chat.tsx
@@ -33,7 +33,7 @@ const ChatHelper: React.FC<ChatProps> = ({
     className,
     classNames,
 }) => {
-    const { sidebar, messageInput, messages } = useChat(children);
+    const { sidebar, messageInput, messages, others } = useChat(children);
     const classes = useClassNames({ className, classNames });
     const isMobile = useMediaQuery("(max-width: 768px)");
     const { handleClose } = useSidebarHandler();
@@ -49,6 +49,7 @@ const ChatHelper: React.FC<ChatProps> = ({
                     <ChatLayer onClick={handleClose} />
                 )}
                 <ChatContainer className={classes?.container}>
+                    {others}
                     {messages}
                     {messageInput}
                 </ChatContainer>

diff --git a/lib/components/chat/hooks/useChat.ts b/lib/components/chat/hooks/useChat.ts
@@ -6,6 +6,7 @@ type UseChatReturn = {
     sidebar: ReactNode;
     messageInput: ReactNode;
     messages: ReactNode;
+    others: ReactNode[];
 };
 
 const isSidebarElement = (child: ReactNode): child is ReactElement => {
@@ -37,9 +38,19 @@ export const useChat = (children: ReactNode): UseChatReturn => {
         return childrenAsArray.find(isMessagesElement);
     }, [childrenAsArray]);
 
+    const others = useMemo(() => {
+        return childrenAsArray.filter(
+            (child) =>
+                !isSidebarElement(child) &&
+                !isMessageInputElement(child) &&
+                !isMessagesElement(child)
+        );
+    }, [childrenAsArray]);
+
     return {
         sidebar,
         messageInput,
         messages,
+        others,
     };
 };
diff --git a/tests/components/chat/chat.test.tsx b/tests/components/chat/chat.test.tsx
@@ -99,25 +99,6 @@ describe("Chat", () => {
         expect(container).toBeEmptyDOMElement();
     });
 
-    it("should ignore invalid children", () => {
-        render(
-            <Chat>
-                <div data-testid="invalid-child">Invalid Child</div>
-                <Sidebar data-testid="sidebar" />
-                <Messages data-testid="messages" />
-                <MessageInput data-testid="message-input" />
-            </Chat>
-        );
-
-        const content = screen.getByTestId("chat-content");
-        const container = screen.getByTestId("chat-container");
-
-        expect(screen.queryByTestId("invalid-child")).not.toBeInTheDocument();
-        expect(content).toContainElement(screen.getByTestId("sidebar"));
-        expect(container).toContainElement(screen.getByTestId("messages"));
-        expect(container).toContainElement(screen.getByTestId("message-input"));
-    });
-
     it("should handle multiple instances of the same component type", () => {
         render(
             <Chat>