OV-42: Add Chat Component

frontend/src/bundles/chat/chat-api.ts

@@ -0,0 +1,58 @@
+import { ApiPath, ContentType } from '~/bundles/common/enums/enums.js';
+import { type Http } from '~/framework/http/http.js';
+import { BaseHttpApi } from '~/framework/http-api/http-api.js';
+import { type Storage } from '~/framework/storage/storage.js';
+
+import { ChatApiPath } from './enums/enums.js';
+import {
+    type DeleteChatRequestDto,
+    type DeleteChatResponseDto,
+    type GenerateTextRequestDto,
+    type GenerateTextResponseDto,
+} from './types/types.js';
+
+type Constructor = {
+    baseUrl: string;
+    http: Http;
+    storage: Storage;
+};
+
+class ChatApi extends BaseHttpApi {
+    public constructor({ baseUrl, http, storage }: Constructor) {
+        super({ path: ApiPath.CHAT, baseUrl, http, storage });
+    }
+
+    public async sendMessage(
+        payload: GenerateTextRequestDto,
+    ): Promise<GenerateTextResponseDto> {
+        const response = await this.load(
+            this.getFullEndpoint(ChatApiPath.SEND_MESSAGE, {}),
+            {
+                method: 'POST',
+                contentType: ContentType.JSON,
+                payload: JSON.stringify(payload),
+                hasAuth: true,
+            },
+        );
+
+        return await response.json<GenerateTextResponseDto>();
+    }
+
+    public async deleteChat(
+        payload: DeleteChatRequestDto,
+    ): Promise<DeleteChatResponseDto> {
+        const response = await this.load(
+            this.getFullEndpoint(ChatApiPath.DELETE_CHAT, {}),
+            {
+                method: 'DELETE',
+                contentType: ContentType.JSON,
+                payload: JSON.stringify(payload),
+                hasAuth: true,
+            },
+        );
+
+        return await response.json<DeleteChatResponseDto>();
+    }
+}
+
+export { ChatApi };

frontend/src/bundles/chat/chat.ts

@@ -0,0 +1,15 @@
+import { config } from '~/framework/config/config.js';
+import { http } from '~/framework/http/http.js';
+import { storage } from '~/framework/storage/storage.js';
+
+import { ChatApi } from './chat-api.js';
+
+const chatApi = new ChatApi({
+    baseUrl: config.ENV.API.ORIGIN_URL,
+    storage,
+    http,
+});
+
+export { chatApi };
+export { type GenerateTextRequestDto } from './types/types.js';
+export { textGenerationValidationSchema } from './validation-schemas/validation-schemas.js';

frontend/src/bundles/chat/components/chat-avatar/chat-avatar.tsx

@@ -0,0 +1,43 @@
+import { Box, Image, Text } from '~/bundles/common/components/components.js';
+import { type ValueOf } from '~/bundles/common/types/types.js';
+
+import { MessageSender } from '../../enums/enums.js';
+
+type Properties = {
+    sender: ValueOf<typeof MessageSender>;
+    imageUrl?: string;
+    initials?: string;
+};
+
+const ChatAvatar: React.FC<Properties> = ({ sender, imageUrl, initials }) => {
+    return (
+        <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            w="40px"
+            h="40px"
+            borderRadius="full"
+            bg={sender === MessageSender.USER ? 'blue.500' : 'green.500'}
+            color="white"
+            fontSize="md"
+            fontWeight="bold"
+        >
+            {imageUrl ? (
+                <Image
+                    src={imageUrl}
+                    alt={initials}
+                    sx={{
+                        borderRadius: '50%',
+                        width: '100%',
+                        height: '100%',
+                    }}
+                />
+            ) : (
+                <Text>{initials}</Text>
+            )}
+        </Box>
+    );
+};
+
+export { ChatAvatar };

frontend/src/bundles/chat/components/chat-body/chat-body.tsx

@@ -0,0 +1,18 @@
+import { Box } from '~/bundles/common/components/components.js';
+
+import { type Message } from '../../types/types.js';
+import { MessageList } from '../message-list/message-list.js';
+
+type Properties = {
+    messages: Message[];
+};
+
+const ChatBody: React.FC<Properties> = ({ messages }) => {
+    return (
+        <Box sx={{ minH: '400px', maxH: '400px', overflowY: 'auto', mb: '2' }}>
+            <MessageList messages={messages} />
+        </Box>
+    );
+};
+
+export { ChatBody };

frontend/src/bundles/chat/components/chat-footer/chat-footer.tsx

@@ -0,0 +1,18 @@
+import { Box } from '~/bundles/common/components/components.js';
+
+import { type GenerateTextRequestDto } from '../../types/types.js';
+import { ChatForm } from '../chat-form/chat-form.js';
+
+type Properties = {
+    onSendMessage: (payload: GenerateTextRequestDto) => void;
+};
+
+const ChatFooter: React.FC<Properties> = ({ onSendMessage }) => {
+    return (
+        <Box>
+            <ChatForm onSubmit={onSendMessage} />
+        </Box>
+    );
+};
+
+export { ChatFooter };

frontend/src/bundles/chat/components/chat-form/chat-form.tsx

@@ -0,0 +1,72 @@
+import {
+    Button,
+    Flex,
+    FormProvider,
+    Input,
+} from '~/bundles/common/components/components.js';
+import {
+    useAppForm,
+    useCallback,
+    useMemo,
+} from '~/bundles/common/hooks/hooks.js';
+
+import {
+    type GenerateTextRequestDto,
+    textGenerationValidationSchema,
+} from '../../chat.js';
+import { DEFAULT_CHAT_FORM_PAYLOAD } from './constants/constants.js';
+
+type Properties = {
+    onSubmit: (payload: GenerateTextRequestDto) => void;
+};
+
+const ChatForm: React.FC<Properties> = ({ onSubmit }) => {
+    const form = useAppForm<GenerateTextRequestDto>({
+        initialValues: DEFAULT_CHAT_FORM_PAYLOAD,
+        validationSchema: textGenerationValidationSchema,
+        onSubmit: (data: GenerateTextRequestDto, { resetForm }) => {
+            onSubmit(data);
+            resetForm();
+        },
+    });
+    const { handleSubmit, values, setFieldValue } = form;
+
+    const handleInputChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>): void => {
+            void setFieldValue('message', event.target.value);
+        },
+        [setFieldValue],
+    );
+
+    const isEmpty = useMemo(
+        () => Object.values(values).some((value) => value.trim().length === 0),
+        [values],
+    );
+
+    return (
+        <FormProvider value={form}>
+            <form onSubmit={handleSubmit}>
+                <Flex alignItems={'flex-start'} w={'100%'} gap={5}>
+                    <Input
+                        type="text"
+                        label=""
+                        placeholder="Send a message"
+                        name="message"
+                        value={values.message}
+                        onChange={handleInputChange}
+                        sx={{ w: '100%' }}
+                    />
+                    <Button
+                        type="submit"
+                        label="Send"
+                        size="md"
+                        isDisabled={isEmpty}
+                        sx={{ w: '100px' }}
+                    />
+                </Flex>
+            </form>
+        </FormProvider>
+    );
+};
+
+export { ChatForm };

frontend/src/bundles/chat/components/chat-form/constants/constants.ts

@@ -0,0 +1,7 @@
+import { type GenerateTextRequestDto } from '~/bundles/chat/types/types.js';
+
+const DEFAULT_CHAT_FORM_PAYLOAD: GenerateTextRequestDto = {
+    message: '',
+};
+
+export { DEFAULT_CHAT_FORM_PAYLOAD };

frontend/src/bundles/chat/components/chat-header/chat-header.tsx

@@ -0,0 +1,27 @@
+// import { ModalHeader } from '@chakra-ui/react';
+
+import { Box, Heading, Text } from '~/bundles/common/components/components.js';
+
+type Properties = {
+    title: string;
+    comment: string;
+};
+
+const ChatHeader: React.FC<Properties> = ({ title, comment }) => {
+    return (
+        <Box
+            sx={{
+                bg: 'background.600',
+                p: '20px',
+                color: 'white',
+                borderTopLeftRadius: 'xl',
+                borderTopRightRadius: 'xl',
+            }}
+        >
+            <Heading as="h6">{title}</Heading>
+            <Text>{comment}</Text>
+        </Box>
+    );
+};
+
+export { ChatHeader };

frontend/src/bundles/chat/components/chat/chat.tsx

@@ -0,0 +1,35 @@
+import { Box } from '~/bundles/common/components/components.js';
+
+import {
+    type GenerateTextRequestDto,
+    type Message,
+} from '../../types/types.js';
+import { ChatBody } from '../chat-body/chat-body.js';
+import { ChatFooter } from '../chat-footer/chat-footer.js';
+import { ChatHeader } from '../chat-header/chat-header.js';
+
+type Properties = {
+    messages: Message[];
+    onSendMessage: (payload: GenerateTextRequestDto) => void;
+    headerTitle: string;
+    headerComment: string;
+};
+
+const Chat: React.FC<Properties> = ({
+    messages,
+    onSendMessage,
+    headerTitle,
+    headerComment,
+}) => {
+    return (
+        <Box>
+            <ChatHeader title={headerTitle} comment={headerComment} />
+            <Box sx={{ p: '10' }}>
+                <ChatBody messages={messages} />
+                <ChatFooter onSendMessage={onSendMessage} />
+            </Box>
+        </Box>
+    );
+};
+
+export { Chat };

frontend/src/bundles/chat/components/components.ts

@@ -0,0 +1 @@
+export { Chat } from './chat/chat.js';

frontend/src/bundles/chat/components/message-box/message-box.tsx

@@ -0,0 +1,42 @@
+import { Box, Flex, Text } from '~/bundles/common/components/components.js';
+
+import { MessageSender } from '../../enums/enums.js';
+import { type Message } from '../../types/types.js';
+
+type Properties = {
+    message: Message;
+};
+
+const MessageBox: React.FC<Properties> = ({ message }) => {
+    const { sender, text } = message;
+
+    return (
+        <Box
+            alignSelf={
+                sender === MessageSender.USER ? 'flex-start' : 'flex-end'
+            }
+            width="100%"
+        >
+            <Flex
+                ml={sender === MessageSender.USER ? 0 : 3}
+                mr={sender === MessageSender.USER ? 3 : 0}
+                direction={'column'}
+                alignItems={
+                    sender === MessageSender.USER ? 'flex-end' : 'flex-start'
+                }
+            >
+                <Text
+                    color={'black'}
+                    bg={'background.50'}
+                    p={3}
+                    borderRadius="md"
+                    width={'max'}
+                >
+                    {text}
+                </Text>
+            </Flex>
+        </Box>
+    );
+};
+
+export { MessageBox };