feat(web-ui): add page to create new chat

services/web-ui/src/Router.tsx

@@ -8,6 +8,7 @@ import { BlogPostListPage } from "src/features/blogs/pages/BlogPostListPage";
 import { BlogPostPage } from "src/features/blogs/pages/BlogPostPage";
 import { ChatListPage } from "src/features/chat/pages/ChatListPage";
 import { ChatPage } from "src/features/chat/pages/ChatPage";
+import { CreateChatPage } from "src/features/chat/pages/CreateChatPage";
 import { CreateOrganizationPage } from "src/pages/CreateOrganizationPage";
 import { CurrentOrganizationPage } from "src/pages/CurrentOrganizationPage";
 import { CurrentProfilePage } from "src/pages/CurrentProfilePage";
@@ -46,6 +47,10 @@ const router = createBrowserRouter([
         path: "/chat",
         element: <ChatListPage />,
       },
+      {
+        path: "/chat/create",
+        element: <CreateChatPage />,
+      },
       {
         path: "/chat/:id",
         element: <ChatPage />,

services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.container.tsx

@@ -15,7 +15,7 @@ export function ChatListPageContainer(): ReactElement {
   const { t } = useTranslation("connections");
 
   const { error, data, isPending } = useQuery({
-    queryKey: ["chat-conversations"],
+    queryKey: ["chats"],
     queryFn: () => chatsApi.getConversations(),
   });
 

services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.container.tsx

@@ -0,0 +1,69 @@
+import { ReactElement, useState } from "react";
+
+import { Autocomplete, TextField } from "@mui/material";
+
+import { chatsApi, organizationsApi } from "src/apis";
+import { Button } from "src/components/ui";
+import { useMutation, useQuery } from "src/core/query";
+import { ErrorView } from "src/views/ErrorView";
+
+import { CreateChatPageNav } from "./CreateChatPage.nav";
+import { CreateChatPageSkeleton } from "./CreateChatPage.skeleton";
+
+interface Option {
+  id: number;
+  label: string;
+}
+
+export function CreateChatPageContainer(): ReactElement {
+  const { error, data, isPending } = useQuery({
+    queryKey: ["members"],
+    queryFn: () => organizationsApi.getCurrentOrganizationMembers(),
+  });
+
+  const [members, setMembers] = useState<Option[]>([]);
+
+  const createChatMutation = useMutation({
+    mutationFn: () => chatsApi.getConversations(),
+  });
+
+  if (error) {
+    return (
+      <CreateChatPageNav>
+        <ErrorView />
+      </CreateChatPageNav>
+    );
+  }
+
+  if (isPending) {
+    return (
+      <CreateChatPageNav>
+        <CreateChatPageSkeleton />
+      </CreateChatPageNav>
+    );
+  }
+
+  const options = data.map((x) => ({ id: x.id, label: x.name }));
+
+  return (
+    <CreateChatPageNav>
+      <Autocomplete
+        multiple
+        onChange={(_, newValue) => setMembers(newValue)}
+        options={options}
+        renderInput={(params) => <TextField label="Members" {...params} />}
+        value={members}
+      />
+
+      <Button
+        disabled={members.length === 0}
+        loading={createChatMutation.isPending}
+        onClick={() => createChatMutation.mutate()}
+        sx={{ mt: 2 }}
+        variant="contained"
+      >
+        Create
+      </Button>
+    </CreateChatPageNav>
+  );
+}

services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.nav.tsx

@@ -0,0 +1,13 @@
+import { ReactElement, ReactNode } from "react";
+
+import { Box } from "@mui/material";
+
+interface CreateChatPageNavProps {
+  children: ReactNode;
+}
+
+export function CreateChatPageNav({
+  children,
+}: CreateChatPageNavProps): ReactElement {
+  return <Box sx={{ p: 2 }}>{children}</Box>;
+}

services/web-ui/src/features/chat/pages/CreateChatPage/CreateChatPage.skeleton.tsx

@@ -0,0 +1,5 @@
+import { ReactElement } from "react";
+
+export function CreateChatPageSkeleton(): ReactElement {
+  return <>Loading...</>;
+}

services/web-ui/src/features/chat/pages/CreateChatPage/index.ts

@@ -0,0 +1 @@
+export { CreateChatPageContainer as CreateChatPage } from "./CreateChatPage.container";