OV-42: Add Chat Component

backend/src/bundles/chat/chat.controller.ts

@@ -10,7 +10,7 @@ import { HttpCode, HTTPMethod } from '~/common/http/http.js';
 import { type Logger } from '~/common/logger/logger.js';
 import { MAX_TOKEN } from '~/common/services/open-ai/libs/constants/constants.js';
 import {
-    ChatPath,
+    ChatApiPath,
     OpenAIRole,
 } from '~/common/services/open-ai/libs/enums/enums.js';
 import { type OpenAIService } from '~/common/services/open-ai/open-ai.service.js';
@@ -34,7 +34,7 @@ class ChatController extends BaseController {
         this.chatService = chatService;
 
         this.addRoute({
-            path: ChatPath.ROOT,
+            path: ChatApiPath.ROOT,
             method: HTTPMethod.POST,
             validation: {
                 body: textGenerationValidationSchema,
@@ -49,7 +49,7 @@ class ChatController extends BaseController {
         });
 
         this.addRoute({
-            path: ChatPath.ROOT,
+            path: ChatApiPath.ROOT,
             method: HTTPMethod.DELETE,
             handler: (options) =>
                 this.deleteSession(

backend/src/common/services/open-ai/libs/enums/enums.ts

@@ -1,2 +1,2 @@
 export { OpenAIRole } from './open-ai-role.enum.js';
-export { ChatPath } from 'shared';
+export { ChatApiPath } from 'shared';

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

@@ -0,0 +1,55 @@
+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 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.ROOT, {}),
+            {
+                method: 'POST',
+                contentType: ContentType.JSON,
+                payload: JSON.stringify(payload),
+                hasAuth: true,
+            },
+        );
+
+        return await response.json<GenerateTextResponseDto>();
+    }
+
+    public async deleteChat(): Promise<DeleteChatResponseDto> {
+        const response = await this.load(
+            this.getFullEndpoint(ChatApiPath.ROOT, {}),
+            {
+                method: 'DELETE',
+                contentType: ContentType.JSON,
+                payload: JSON.stringify({}),
+                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-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,60 @@
+import {
+    Button,
+    Flex,
+    FormProvider,
+    Input,
+} from '~/bundles/common/components/components.js';
+import { useAppForm, 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 = {
+    onSendMessage: (payload: GenerateTextRequestDto) => void;
+};
+
+const ChatFooter: React.FC<Properties> = ({ onSendMessage }) => {
+    const form = useAppForm<GenerateTextRequestDto>({
+        initialValues: DEFAULT_CHAT_FORM_PAYLOAD,
+        validationSchema: textGenerationValidationSchema,
+        onSubmit: (data: GenerateTextRequestDto, { resetForm }) => {
+            onSendMessage(data);
+            resetForm();
+        },
+    });
+    const { handleSubmit, values } = form;
+
+    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}
+                        sx={{ w: '100%' }}
+                    />
+                    <Button
+                        type="submit"
+                        label="Send"
+                        size="md"
+                        isDisabled={isEmpty}
+                        sx={{ w: '100px' }}
+                    />
+                </Flex>
+            </form>
+        </FormProvider>
+    );
+};
+
+export { ChatFooter };

frontend/src/bundles/chat/components/chat-footer/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 { 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 variant="H2" mb={2}>
+                {title}
+            </Heading>
+            <Text variant="bodySmall">{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 };

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

@@ -0,0 +1,65 @@
+import { Flex, VStack } from '~/bundles/common/components/components.js';
+import { UserAvatar } from '~/bundles/users/components/components.js';
+
+import { MessageSender } from '../../enums/enums.js';
+import { type Message, type MessageGroup } from '../../types/types.js';
+import { MessageBox } from '../message-box/message-box.js';
+
+type Properties = {
+    messages: Message[];
+};
+
+const MessageList: React.FC<Properties> = ({ messages }) => {
+    const groupedMessages: MessageGroup[] = [];
+    let currentGroup: MessageGroup | null = null;
+
+    for (const message of messages) {
+        const { sender } = message;
+        if (!currentGroup || currentGroup.sender !== sender) {
+            currentGroup = { sender: sender, messages: [message] };
+            groupedMessages.push(currentGroup);
+        } else {
+            currentGroup.messages.push(message);
+        }
+    }
+
+    return (
+        <VStack spacing={4} align="stretch" p={4} h="400px" overflowY="auto">
+            {groupedMessages.map((group: MessageGroup, groupIndex: number) => {
+                const { sender, messages } = group;
+                return (
+                    <Flex
+                        key={groupIndex}
+                        direction={
+                            sender === MessageSender.USER
+                                ? 'row-reverse'
+                                : 'row'
+                        }
+                        alignItems="flex-start"
+                    >
+                        <UserAvatar
+                            username={
+                                sender === MessageSender.USER ? 'FL' : 'AI'
+                            }
+                        />
+                        <VStack
+                            spacing={2}
+                            align={
+                                sender === MessageSender.USER
+                                    ? 'flex-end'
+                                    : 'flex-start'
+                            }
+                            width={'max'}
+                        >
+                            {messages.map((message: Message, index: number) => (
+                                <MessageBox key={index} message={message} />
+                            ))}
+                        </VStack>
+                    </Flex>
+                );
+            })}
+        </VStack>
+    );
+};
+
+export { MessageList };

frontend/src/bundles/chat/enums/enums.ts

@@ -0,0 +1,2 @@
+export { MessageSender } from './message-sender.js';
+export { ChatApiPath } from 'shared';

frontend/src/bundles/chat/enums/message-sender.ts

@@ -0,0 +1,6 @@
+const MessageSender = {
+    USER: 'USER',
+    AI: 'AI',
+} as const;
+
+export { MessageSender };