feat: chats list on the left of the client chat

src/client/index.ts

@@ -117,6 +117,7 @@ export type { CardUpdateServiceQuantityResponse } from './models/CardUpdateServi
 export type { CardUpdateServiceRequest } from './models/CardUpdateServiceRequest';
 export type { CardUpdateServiceResponse } from './models/CardUpdateServiceResponse';
 export type { ChatSchema } from './models/ChatSchema';
+export type { ChatsListItemSchema } from './models/ChatsListItemSchema';
 export type { CityBreakdownFromExcelSchema } from './models/CityBreakdownFromExcelSchema';
 export type { ClientCreateRequest } from './models/ClientCreateRequest';
 export type { ClientCreateResponse } from './models/ClientCreateResponse';
@@ -255,6 +256,7 @@ export type { GetCardProductsBarcodesPdfResponse } from './models/GetCardProduct
 export type { GetCardSummariesRequest } from './models/GetCardSummariesRequest';
 export type { GetChatRequest } from './models/GetChatRequest';
 export type { GetChatResponse } from './models/GetChatResponse';
+export type { GetChatsListResponse } from './models/GetChatsListResponse';
 export type { GetClientMarketplacesRequest } from './models/GetClientMarketplacesRequest';
 export type { GetClientMarketplacesResponse } from './models/GetClientMarketplacesResponse';
 export type { GetDepartmentSectionsResponse } from './models/GetDepartmentSectionsResponse';

src/client/models/ChatsListItemSchema.ts

@@ -0,0 +1,13 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { TgGroupSchema } from './TgGroupSchema';
+export type ChatsListItemSchema = {
+    id: number;
+    clientId: (number | null);
+    cardId: (number | null);
+    tgGroup: (TgGroupSchema | null);
+    name: string;
+};
+

src/client/models/GetChatsListResponse.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { ChatsListItemSchema } from './ChatsListItemSchema';
+export type GetChatsListResponse = {
+    chats: Array<ChatsListItemSchema>;
+};
+

src/client/services/ChatService.ts

@@ -10,6 +10,7 @@ import type { EditMessageRequest } from '../models/EditMessageRequest';
 import type { EditMessageResponse } from '../models/EditMessageResponse';
 import type { GetChatRequest } from '../models/GetChatRequest';
 import type { GetChatResponse } from '../models/GetChatResponse';
+import type { GetChatsListResponse } from '../models/GetChatsListResponse';
 import type { GetMessagesRequest } from '../models/GetMessagesRequest';
 import type { GetMessagesResponse } from '../models/GetMessagesResponse';
 import type { LoadMessagesResponse } from '../models/LoadMessagesResponse';
@@ -150,6 +151,27 @@ export class ChatService {
             },
         });
     }
+    /**
+     * Get Client Chats List
+     * @returns GetChatsListResponse Successful Response
+     * @throws ApiError
+     */
+    public static getClientChatsList({
+        clientId,
+    }: {
+        clientId: number,
+    }): CancelablePromise<GetChatsListResponse> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/chat/for-client/{client_id}',
+            path: {
+                'client_id': clientId,
+            },
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
     /**
      * Create Chat
      * @returns CreateChatResponse Successful Response

src/components/Chat/Chat.tsx

@@ -7,7 +7,12 @@ import MessageInput from "./components/MessageInput/MessageInput.tsx";
 import { Virtuoso } from "react-virtuoso";
 import { Stack } from "@mantine/core";
 
-const Chat = () => {
+type Props = {
+    height?: number | string;
+    padding?: number | string;
+}
+
+const Chat = ({ height = "96vh", padding = 0 }: Props) => {
     const {
         messages,
         lastMessage,
@@ -45,7 +50,7 @@ const Chat = () => {
                 );
             }
             return (
-                <Stack mb={"xs"} mr={"xs"}>
+                <Stack mt={"xs"} mr={"xs"} ml={padding}>
                     {dateComponent}
                     <Message
                         key={`${sessionData.id}${index}`}
@@ -59,14 +64,14 @@ const Chat = () => {
 
     if (messages.length === 0) {
         return (
-            <Stack h={"96vh"} justify={"flex-end"}>
+            <Stack h={height} justify={"flex-end"}>
-                <MessageInput />
+                <MessageInput inputMargin={padding} />
             </Stack>
         );
     }
 
     return (
-        <Stack h={"96vh"}>
+        <Stack h={height}>
             <Virtuoso
                 data={messages}
                 followOutput={onFollowOutputHandler}
@@ -78,7 +83,7 @@ const Chat = () => {
                 increaseViewportBy={200}
                 alignToBottom
             />
-            <MessageInput />
+            <MessageInput inputMargin={padding} />
         </Stack>
     );
 };

src/components/Chat/components/ChatsList/ChatsList.module.css

@@ -0,0 +1,12 @@
+.chats-list-item {
+    cursor: pointer;
+}
+
+.chats-list-item-selected {
+    @mixin dark {
+        background-color: var(--mantine-color-dark-6);
+    }
+    @mixin light {
+        background-color: var(--mantine-color-gray-3);
+    }
+}

src/components/Chat/components/ChatsList/ChatsList.tsx

@@ -0,0 +1,50 @@
+import { Center, List, Text } from "@mantine/core";
+import { ChatSchema, ChatsListItemSchema } from "../../../../client";
+import { IconBriefcase, IconGrid3x3 } from "@tabler/icons-react";
+import classNames from "classnames";
+import styles from "./ChatsList.module.css";
+
+type Props = {
+    chats: ChatsListItemSchema[];
+    onChatSelect: (chat: ChatSchema) => void;
+    selectedChat: ChatSchema | null;
+}
+
+const ChatsList = ({ chats, onChatSelect, selectedChat }: Props) => {
+    const clientChat = chats.find(chat => chat.clientId);
+    chats = chats.filter(chat => !chat.clientId);
+
+    const chatItem = (chat: ChatsListItemSchema, isGeneral: boolean) => {
+        return (
+            <List.Item
+                p={"sm"}
+                onClick={() => onChatSelect(chat)}
+                key={chat.id}
+                icon={(
+                    <Center>
+                        {isGeneral ? (
+                            <IconGrid3x3 />
+                        ) : (
+                            <IconBriefcase />
+                        )}
+                    </Center>
+                )}
+                className={classNames(
+                    styles["chats-list-item"],
+                    selectedChat?.id === chat.id && styles["chats-list-item-selected"],
+                )}
+            >
+                <Text>{chat.name}</Text>
+            </List.Item>
+        );
+    };
+
+    return (
+        <List center>
+            {clientChat && chatItem(clientChat, true)}
+            {chats.map(chat => chatItem(chat, false))}
+        </List>
+    );
+};
+
+export default ChatsList;

src/components/Chat/components/MessageInput/MessageInput.tsx

@@ -6,7 +6,11 @@ import SelectedFile from "../SelectedFile/SelectedFile.tsx";
 import React, { useRef } from "react";
 
 
-const MessageInput = () => {
+type Props = {
+    inputMargin?: number | string;
+}
+
+const MessageInput = ({ inputMargin }: Props) => {
     const formRef = useRef<HTMLFormElement>(null);
 
     const {
@@ -26,7 +30,7 @@ const MessageInput = () => {
         }
     };
 
-    const getFiles = files.map(file => (
+    const filesList = files.map(file => (
         <SelectedFile key={file.name} file={file} />
     ));
 
@@ -34,8 +38,12 @@ const MessageInput = () => {
         <form ref={formRef} onSubmit={form.onSubmit(values => submitMessage(values))}>
             <Stack gap={"xs"}>
                 <Divider />
-                {getFiles}
+                {filesList.length > 0 && (
-                <Group wrap={"nowrap"} align={"flex-end"}>
+                    <Stack mx={inputMargin}>
+                        {filesList}
+                    </Stack>
+                )}
+                <Group wrap={"nowrap"} align={"flex-end"} mx={inputMargin}>
                     {chat?.tgGroup?.tgInviteLink && (
                         <ActionIconCopy
                             onCopiedLabel={"Ссылка на чат скопирована в буфер обмена"}

src/pages/ClientsPage/ClientsPage.tsx

@@ -8,7 +8,7 @@ import { modals } from "@mantine/modals";
 import { ClientSchema, ClientService } from "../../client";
 import { notifications } from "../../shared/lib/notifications.ts";
 import { ChatContextProvider } from "./contexts/ChatContext.tsx";
-import ClientChatDrawer from "./drawers/ClientChatDrawer.tsx";
+import ClientChatDrawer from "./drawers/ClientChatDrawer/ClientChatDrawer.tsx";
 
 const ClientsPage: FC = () => {
     const { clients, refetch } = useClientsList();

src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawer.tsx

@@ -1,6 +1,6 @@
-import { useChatContext } from "../contexts/ChatContext.tsx";
+import { useChatContext } from "../../contexts/ChatContext.tsx";
 import { Drawer } from "@mantine/core";
-import Chat from "../../../components/Chat/Chat.tsx";
+import ClientChatDrawerContent from "./ClientChatDrawerContent.tsx";
 
 
 const ClientChatDrawer = () => {
@@ -13,10 +13,15 @@ const ClientChatDrawer = () => {
             opened={!!chat}
             onClose={() => setChat(null)}
             position={"right"}
-            size={"calc(50vw)"}
+            size={"calc(70vw)"}
             withCloseButton={false}
+            styles={{
+                body: {
+                    padding: 0,
+                },
+            }}
         >
-            <Chat />
+            <ClientChatDrawerContent />
         </Drawer>
     );
 };

src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawerContent.module.css

@@ -0,0 +1,9 @@
+.chats-list-border {
+    @mixin dark {
+        border-right: 1px solid var(--mantine-color-dark-4);
+    }
+    @mixin light {
+        border-right: 1px solid var(--mantine-color-gray-3);
+    }
+    border-right: 1px solid red;
+}

src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawerContent.tsx

@@ -0,0 +1,51 @@
+import { useChatContext } from "../../contexts/ChatContext.tsx";
+import { Box, Flex } from "@mantine/core";
+import Chat from "../../../../components/Chat/Chat.tsx";
+import { useEffect, useState } from "react";
+import { ChatService, ChatsListItemSchema } from "../../../../client";
+import ChatsList from "../../../../components/Chat/components/ChatsList/ChatsList.tsx";
+import classNames from "classnames";
+import styles from "./ClientChatDrawerContent.module.css";
+
+
+const ClientChatDrawerContent = () => {
+    const { chat, setChat } = useChatContext();
+
+    const [chats, setChats] = useState<ChatsListItemSchema[]>([]);
+
+    const fetchChats = () => {
+        if (!chat?.clientId) return;
+        ChatService.getClientChatsList({
+            clientId: chat.clientId,
+        })
+            .then(({ chats }) => {
+                console.log(chats);
+                setChats(chats);
+            })
+            .catch(err => console.log(err));
+    };
+
+    useEffect(() => {
+        fetchChats();
+    }, []);
+
+    return (
+        <Flex h={"100vh"}>
+            <Box
+                flex={1}
+                className={classNames(styles["chats-list-border"])}
+            >
+                <ChatsList
+                    chats={chats}
+                    selectedChat={chat}
+                    onChatSelect={setChat}
+                />
+            </Box>
+            <Box flex={3}>
+                <Chat height={"98vh"} padding={"md"} />
+            </Box>
+        </Flex>
+    );
+};
+
+export default ClientChatDrawerContent;