Feat: Show multiple chat boxes #3221 (#9443)

### What problem does this PR solve?

Feat: Show multiple chat boxes #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-chats/chat/use-add-box.ts

@@ -0,0 +1,26 @@
+import { useCallback, useState } from 'react';
+import { v4 as uuid } from 'uuid';
+
+export function useAddChatBox() {
+  const [ids, setIds] = useState<string[]>([uuid()]);
+
+  const hasSingleChatBox = ids.length === 1;
+
+  const hasThreeChatBox = ids.length === 3;
+
+  const addChatBox = useCallback(() => {
+    setIds((prev) => [...prev, uuid()]);
+  }, []);
+
+  const removeChatBox = useCallback((id: string) => {
+    setIds((prev) => prev.filter((x) => x !== id));
+  }, []);
+
+  return {
+    chatBoxIds: ids,
+    hasSingleChatBox,
+    hasThreeChatBox,
+    addChatBox,
+    removeChatBox,
+  };
+}