chore: use enums and css helper (#204)

epam · Nov 23, 2023 · 91b2d6c · 91b2d6c
1 parent f28b582
commit 91b2d6c
Show file tree

Hide file tree

Showing 50 changed files with 353 additions and 297 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -13,7 +13,10 @@
   "settings": {
     "tailwindcss": {
       "config": "./tailwind.config.js",
-      "callees": ["classnames", "classNames"]
+      "callees":  [
+        "classnames", "classNames", "clsx", // defaults
+        "getByHighlightColor" // our helpers
+      ]
     }
   },
   "rules": {
@@ -27,6 +30,9 @@
     ],
     "no-restricted-imports": ["error", { "paths": ["react-i18next"] }],
     "tailwindcss/no-custom-classname": "error",
+    "tailwindcss/no-contradicting-classname": ["error", { "callees": [
+      "classnames", "classNames", "clsx" // only default
+    ]}],
     "no-restricted-globals": [
       "error",
       {
@@ -37,7 +43,8 @@
           "name": "sessionStorage",
           "message": "Use DataService instead."
       }
-    ]
+    ],
+    "no-multiple-empty-lines": ["warn", { "max": 2, "maxBOF": 0 }]
   },
   "overrides": [
     {

diff --git a/e2e/src/testData/conversationHistory/conversationData.ts b/e2e/src/testData/conversationHistory/conversationData.ts
@@ -1,7 +1,7 @@
 import { DateUtil } from '@/e2e/src/utils/dateUtil';
 import { GeneratorUtil } from '@/e2e/src/utils/generatorUtil';
 
-import { Conversation, Message, Stage } from '@/src/types/chat';
+import { Conversation, Message, Role, Stage } from '@/src/types/chat';
 import { FolderInterface } from '@/src/types/folder';
 import { OpenAIEntityModel } from '@/src/types/openai';
 
@@ -37,11 +37,11 @@ export class ConversationData extends FolderData {
       ? { id: model.id }
       : this.conversationBuilder.getConversation().model;
     const userMessage: Message = {
-      role: 'user',
+      role: Role.User,
       content: 'test request',
     };
     const assistantMessage: Message = {
-      role: 'assistant',
+      role: Role.Assistant,
       content: 'test response',
       model: { id: modelToUse.id },
     };
@@ -76,9 +76,9 @@ export class ConversationData extends FolderData {
     const basicConversation = this.prepareEmptyConversation(model, name);
     requests.forEach((r) => {
       basicConversation.messages.push(
-        { role: 'user', content: r },
+        { role: Role.User, content: r },
         {
-          role: 'assistant',
+          role: Role.Assistant,
           content: `response on ${r}`,
           model: {
             id: basicConversation.model.id,
@@ -159,11 +159,11 @@ export class ConversationData extends FolderData {
     conversation.model = { id: model.id };
     conversation.selectedAddons = addons;
     const userMessage: Message = {
-      role: 'user',
+      role: Role.User,
       content: request ?? 'what is epam? what is epam revenue in 2020?',
     };
     const assistantMessage: Message = {
-      role: 'assistant',
+      role: Role.Assistant,
       content:
         'EPAM is a global provider of software engineering and IT consulting services',
       model: { id: conversation.model.id },

diff --git a/overlay/ChatOverlayManager.ts b/overlay/ChatOverlayManager.ts
@@ -17,9 +17,9 @@ export interface Position {
 
 /**
  * Returns the styles for overlay placement
- * @returns {Record<OverlayPosition | string, Position>} styles for overlay placement
+ * @returns {Record<OverlayPosition, Position>} styles for overlay placement
  */
-const getPosition = (): Record<OverlayPosition | string, Position> => {
+const getPosition = (): Record<OverlayPosition, Position> => {
   return {
     'left-bottom': {
       top: 'initial',

diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
@@ -12,6 +12,7 @@ import {
   MergedMessages,
   Message,
   Replay,
+  Role,
 } from '@/src/types/chat';
 import { EntityType } from '@/src/types/common';
 import { Feature } from '@/src/types/features';
@@ -122,12 +123,12 @@ export const Chat = memo(() => {
     if (selectedConversations.length > 0) {
       const mergedMessages: MergedMessages[] = [];
       for (let i = 0; i < selectedConversations[0].messages.length; i++) {
-        if (selectedConversations[0].messages[i].role === 'system') continue;
+        if (selectedConversations[0].messages[i].role === Role.System) continue;
 
         mergedMessages.push(
           selectedConversations.map((conv) => [
             conv,
-            conv.messages[i] || { role: 'assistant', content: '' },
+            conv.messages[i] || { role: Role.Assistant, content: '' },
             i,
           ]),
         );
@@ -154,7 +155,7 @@ export const Chat = memo(() => {
           ) {
             return conv.replay.replayUserMessagesStack.some(
               (message) =>
-                message.role === 'user' &&
+                message.role === Role.User &&
                 message.model?.id &&
                 !modelIds.includes(message.model.id),
             );
@@ -274,7 +275,9 @@ export const Chat = memo(() => {
           ConversationsActions.updateConversation({
             id: conversation.id,
             values: {
-              messages: messages.filter((message) => message.role === 'system'),
+              messages: messages.filter(
+                (message) => message.role === Role.System,
+              ),
             },
           }),
         );
@@ -326,7 +329,7 @@ export const Chat = memo(() => {
           values: {
             model: { id: modelId },
             assistantModelId:
-              newAiEntity.type === 'assistant'
+              newAiEntity.type === EntityType.Assistant
                 ? DEFAULT_ASSISTANT_SUBMODEL.id
                 : undefined,
             replay: updatedReplay,
@@ -441,7 +444,7 @@ export const Chat = memo(() => {
   const onRegenerateMessage = useCallback(() => {
     const lastUserMessageIndex = selectedConversations[0].messages
       .map((msg) => msg.role)
-      .lastIndexOf('user');
+      .lastIndexOf(Role.User);
     dispatch(
       ConversationsActions.sendMessages({
         conversations: selectedConversations,

diff --git a/src/components/Chat/ChatCompareSelect.tsx b/src/components/Chat/ChatCompareSelect.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'next-i18next';
 
 import { isMobile } from '@/src/utils/app/mobile';
 
-import { Conversation } from '@/src/types/chat';
+import { Conversation, Role } from '@/src/types/chat';
 
 import { useAppSelector } from '@/src/store/hooks';
 import { ModelsSelectors } from '@/src/store/models/models.reducers';
@@ -76,10 +76,10 @@ export const ChatCompareSelect = ({
             return false;
           }
           const convUserMessages = conv.messages.filter(
-            (message) => message.role === 'user',
+            (message) => message.role === Role.User,
           );
           const selectedConvUserMessages = selectedConversation.messages.filter(
-            (message) => message.role === 'user',
+            (message) => message.role === Role.User,
           );
 
           if (convUserMessages.length !== selectedConvUserMessages.length) {

diff --git a/src/components/Chat/ChatHeader.tsx b/src/components/Chat/ChatHeader.tsx
@@ -11,6 +11,7 @@ import { useTranslation } from 'next-i18next';
 import { getSelectedAddons } from '@/src/utils/app/conversation';
 
 import { Conversation } from '@/src/types/chat';
+import { EntityType } from '@/src/types/common';
 import { OpenAIEntityModel } from '@/src/types/openai';
 
 import { AddonsSelectors } from '@/src/store/addons/addons.reducers';
@@ -121,23 +122,25 @@ export const ChatHeader = ({
                         selectedAddons={selectedAddons}
                         subModel={
                           conversation.assistantModelId &&
-                          model.type === 'assistant'
+                          model.type === EntityType.Assistant
                             ? modelsMap[conversation.assistantModelId]
                             : null
                         }
                         prompt={
-                          model.type === 'model' ? conversation.prompt : null
+                          model.type === EntityType.Model
+                            ? conversation.prompt
+                            : null
                         }
                         temperature={
-                          model.type !== 'application'
+                          model.type !== EntityType.Application
                             ? conversation.temperature
                             : null
                         }
                       />
                     </TooltipContent>
                   </Tooltip>
                 </span>
-                {model.type !== 'application' &&
+                {model.type !== EntityType.Application &&
                   (conversation.selectedAddons.length > 0 ||
                     (model.selectedAddons &&
                       model.selectedAddons.length > 0)) && (

diff --git a/src/components/Chat/ChatInfoTooltip.tsx b/src/components/Chat/ChatInfoTooltip.tsx
@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
+import { EntityType } from '@/src/types/common';
 import { OpenAIEntityAddon, OpenAIEntityModel } from '@/src/types/openai';
 import { Theme } from '@/src/types/settings';
 
@@ -54,9 +55,9 @@ export const ChatInfoTooltip = ({
   const { t } = useTranslation('chat');
   const getModelLabel = useCallback(() => {
     switch (model.type) {
-      case 'application':
+      case EntityType.Application:
         return t('Application');
-      case 'assistant':
+      case EntityType.Assistant:
         return t('Assistant');
       default:
         return t('Model');

diff --git a/src/components/Chat/ChatInput/ChatInputMessage.tsx b/src/components/Chat/ChatInput/ChatInputMessage.tsx
@@ -14,7 +14,7 @@ import classNames from 'classnames';
 import { getUserCustomContent } from '@/src/utils/app/file';
 import { isMobile } from '@/src/utils/app/mobile';
 
-import { Message } from '@/src/types/chat';
+import { Message, Role } from '@/src/types/chat';
 import { Feature } from '@/src/types/features';
 import { OpenAIEntityModels, defaultModelLimits } from '@/src/types/openai';
 import { Prompt } from '@/src/types/prompt';
@@ -140,7 +140,7 @@ export const ChatInputMessage = ({
     }
 
     onSend({
-      role: 'user',
+      role: Role.User,
       content,
       ...getUserCustomContent(files),
     });
@@ -150,7 +150,7 @@ export const ChatInputMessage = ({
     if (window.innerWidth < 640 && textareaRef && textareaRef.current) {
       textareaRef.current.blur();
     }
-  }, [content, messageIsStreaming, onSend, t, textareaRef]);
+  }, [content, dispatch, files, messageIsStreaming, onSend, t, textareaRef]);
 
   const parseVariables = useCallback((content: string) => {
     const regex = /{{(.*?)}}/g;
@@ -245,6 +245,7 @@ export const ChatInputMessage = ({
     [
       handleInitModal,
       handleSend,
+      isReplay,
       isTyping,
       prompts.length,
       showPluginSelect,

diff --git a/src/components/Chat/ChatInput/PromptList.tsx b/src/components/Chat/ChatInput/PromptList.tsx
@@ -34,7 +34,7 @@ export const PromptList: FC<Props> = ({
     if (refs.floating.current) {
       refs.floating.current.scrollTop = activePromptIndex * 30;
     }
-  }, [activePromptIndex]);
+  }, [activePromptIndex, refs.floating]);
 
   return (
     <ul

diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx
@@ -21,7 +21,7 @@ import { useTranslation } from 'next-i18next';
 
 import classNames from 'classnames';
 
-import { Conversation, Message } from '@/src/types/chat';
+import { Conversation, Message, Role } from '@/src/types/chat';
 
 import { ConversationsSelectors } from '@/src/store/conversations/conversations.reducers';
 import { useAppSelector } from '@/src/store/hooks';
@@ -103,8 +103,8 @@ export const ChatMessage: FC<Props> = memo(
 
     const isShowResponseLoader: boolean =
       conversation.isMessageStreaming && isLastMessage;
-    const isUser = message.role === 'user';
-    const isAssistant = message.role === 'assistant';
+    const isUser = message.role === Role.User;
+    const isAssistant = message.role === Role.Assistant;
 
     const textareaRef = useRef<HTMLTextAreaElement>(null);
 

diff --git a/src/components/Chat/ConversationSettings.tsx b/src/components/Chat/ConversationSettings.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'next-i18next';
 import classNames from 'classnames';
 
 import { Replay } from '@/src/types/chat';
+import { EntityType } from '@/src/types/common';
 import { OpenAIEntityModel } from '@/src/types/openai';
 import { Prompt } from '@/src/types/prompt';
 
@@ -152,12 +153,12 @@ export const ConversationSettings = ({
               className="flex max-h-full shrink flex-col divide-y divide-gray-300 overflow-auto bg-gray-200 dark:divide-gray-900 dark:bg-gray-800"
               data-qa="entity-settings"
             >
-              {model.type === 'application' && (
+              {model.type === EntityType.Application && (
                 <SettingContainer>
                   <ModelDescription model={model} />
                 </SettingContainer>
               )}
-              {model.type === 'assistant' && (
+              {model.type === EntityType.Assistant && (
                 <SettingContainer>
                   <AssistantSubModelSelector
                     assistantModelId={
@@ -167,7 +168,7 @@ export const ConversationSettings = ({
                   />
                 </SettingContainer>
               )}
-              {model.type === 'model' && (
+              {model.type === EntityType.Model && (
                 <SettingContainer>
                   <SystemPrompt
                     maxLength={model.maxLength}
@@ -178,7 +179,7 @@ export const ConversationSettings = ({
                 </SettingContainer>
               )}
 
-              {model.type !== 'application' && (
+              {model.type !== EntityType.Application && (
                 <SettingContainer>
                   <TemperatureSlider
                     label={t('Temperature')}
@@ -188,7 +189,7 @@ export const ConversationSettings = ({
                 </SettingContainer>
               )}
 
-              {model.type !== 'application' && (
+              {model.type !== EntityType.Application && (
                 <SettingContainer>
                   <Addons
                     preselectedAddonsIds={model.selectedAddons || []}