diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/__tests__/ChatInput.test.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/__tests__/ChatInput.test.tsx deleted file mode 100644 index c67837586bcf..000000000000 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/__tests__/ChatInput.test.tsx +++ /dev/null @@ -1,148 +0,0 @@ -/* eslint-disable max-lines */ -import { fireEvent, render } from "@testing-library/react"; -import { afterEach, describe, expect, it, vi } from "vitest"; - -import { BrainProvider } from "@/lib/context"; -import { BrainConfigProvider } from "@/lib/context/BrainConfigProvider"; - -import { ChatInput } from "../index"; - -const addQuestionMock = vi.fn((...params: unknown[]) => ({ params })); - -vi.mock("@/lib/hooks", async () => { - const actual = await vi.importActual( - "@/lib/hooks" - ); - - return { - ...actual, - useAxios: () => ({ - axiosInstance: { - get: vi.fn(() => ({ - data: {}, - })), - }, - }), - }; -}); - -vi.mock("@/app/chat/[chatId]/hooks/useChat", () => ({ - useChat: () => ({ - addQuestion: (...params: unknown[]) => addQuestionMock(...params), - generatingAnswer: false, - }), -})); - -const mockUseSupabase = vi.fn(() => ({ - session: {}, -})); - -vi.mock("@/lib/context/SupabaseProvider", () => ({ - useSupabase: () => mockUseSupabase(), -})); - -describe("ChatInput", () => { - afterEach(() => { - vi.restoreAllMocks(); - }); - - it("should render correctly", () => { - // Rendering the ChatInput component - const { getByTestId } = render( - - - - - - ); - - const chatInputForm = getByTestId("chat-input-form"); - expect(chatInputForm).toBeDefined(); - - const chatInput = getByTestId("chat-input"); - expect(chatInput).toBeDefined(); - - const submitButton = getByTestId("submit-button"); - expect(submitButton).toBeDefined(); - - const micButton = getByTestId("mic-button"); - expect(micButton).toBeDefined(); - }); - - it("should not call addQuestion on form submit when message is empty", () => { - const { getByTestId } = render( - - - - - - ); - const chatInputForm = getByTestId("chat-input-form"); - fireEvent.submit(chatInputForm); - - // Asserting that the addQuestion function was called with the expected arguments - expect(addQuestionMock).not.toHaveBeenCalled(); - }); - - it("should call addQuestion once on form submit when message is not empty", () => { - const { getByTestId } = render( - - - - - - ); - const chatInput = getByTestId("chat-input"); - fireEvent.change(chatInput, { target: { value: "Test question" } }); - const chatInputForm = getByTestId("chat-input-form"); - fireEvent.submit(chatInputForm); - - // Asserting that the addQuestion function was called with the expected arguments - expect(addQuestionMock).toHaveBeenCalledTimes(1); - expect(addQuestionMock).toHaveBeenCalledWith( - "Test question", - expect.any(Function) - ); - }); - - it('should submit a question when "Enter" key is pressed without shift', () => { - // Mocking the addQuestion function - - // Rendering the ChatInput component with the mock function - const { getByTestId } = render( - - - - - - ); - const chatInput = getByTestId("chat-input"); - - fireEvent.change(chatInput, { target: { value: "Another test question" } }); - fireEvent.keyDown(chatInput, { key: "Enter", shiftKey: false }); - - // Asserting that the addQuestion function was called with the expected arguments - expect(addQuestionMock).toHaveBeenCalledTimes(1); - expect(addQuestionMock).toHaveBeenCalledWith( - "Another test question", - expect.any(Function) - ); - }); - - it('should not submit a question when "Enter" key is pressed with shift', () => { - const { getByTestId } = render( - - - - - - ); - - const inputElement = getByTestId("chat-input"); - - fireEvent.change(inputElement, { target: { value: "Test question" } }); - fireEvent.keyDown(inputElement, { key: "Enter", shiftKey: true }); - - expect(addQuestionMock).not.toHaveBeenCalled(); - }); -}); diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/BrainMentionItem.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/BrainMentionItem.tsx index 51c40ec0dace..3068c22fad7a 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/BrainMentionItem.tsx +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/BrainMentionItem.tsx @@ -1,7 +1,5 @@ import { MdRemoveCircleOutline } from "react-icons/md"; -import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext"; - type MentionItemProps = { text: string; onRemove: () => void; @@ -11,8 +9,6 @@ export const BrainMentionItem = ({ text, onRemove, }: MentionItemProps): JSX.Element => { - const { setCurrentBrainId } = useBrainContext(); - return (
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/MentionInput.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/MentionInput.tsx index c3f26f5188ac..3db5eac08e79 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/MentionInput.tsx +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/MentionInput.tsx @@ -43,6 +43,7 @@ export const MentionInput = ({
(
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx index c06c142ea83d..c6dbe15256d1 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx @@ -1,7 +1,7 @@ import Link from "next/link"; +import { useTranslation } from "react-i18next"; import Button from "@/lib/components/ui/Button"; -import { useTranslation } from "react-i18next"; export const AddNewBrainButton = (): JSX.Element => { const { t } = useTranslation(["chat"]); diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/helpers/MentionPlugin.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/helpers/MentionPlugin.tsx index c802d179b05c..ca10d2ad3d65 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/helpers/MentionPlugin.tsx +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/helpers/MentionPlugin.tsx @@ -2,6 +2,7 @@ import createMentionPlugin from "@draft-js-plugins/mention"; import { useMemo } from "react"; import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext"; + import { BrainMentionItem } from "../../../BrainMentionItem"; interface MentionPluginProps { diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx index d09a85d5bd6b..e4ea9dc2037d 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx @@ -5,15 +5,15 @@ import { MentionData, } from "@draft-js-plugins/mention"; import { UUID } from "crypto"; +import { EditorState, getDefaultKeyBinding } from "draft-js"; import { useCallback, useEffect, useRef, useState } from "react"; import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext"; -import { EditorState, getDefaultKeyBinding } from "draft-js"; -import { mapMinimalBrainToMentionData } from "../utils/mapMinimalBrainToMentionData"; import { useMentionPlugin } from "./helpers/MentionPlugin"; import { useMentionState } from "./helpers/MentionState"; import { useMentionUtils } from "./helpers/MentionUtils"; +import { mapMinimalBrainToMentionData } from "../utils/mapMinimalBrainToMentionData"; import "@draft-js-plugins/mention/lib/plugin.css"; import "draft-js/dist/Draft.css"; @@ -107,13 +107,11 @@ export const useMentionInput = ({ (item) => item.name === mention.content ); if (correspondingMention !== undefined) { - if (mention.trigger === "@") { - newEditorState = insertMention( - correspondingMention, - mention.trigger, - newEditorState - ); - } + newEditorState = insertMention( + correspondingMention, + mention.trigger, + newEditorState + ); } } }); @@ -123,6 +121,7 @@ export const useMentionInput = ({ const keyBindingFn = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { onSubmit(); + return "submit"; } diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/utils/withCustomEntryComponent.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/utils/withCustomEntryComponent.tsx deleted file mode 100644 index 3eaf3e774649..000000000000 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/utils/withCustomEntryComponent.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { EntryComponentProps } from "@draft-js-plugins/mention/lib/MentionSuggestions/Entry/Entry"; -import { ComponentType, useEffect, useRef } from "react"; - -export const withCustomEntryComponent = < - P extends EntryComponentProps & { isFocused: boolean } ->( - WrappedComponent: ComponentType

-): ComponentType

=> { - const EnrichedBrainSuggestion = (props: P) => { - const entryRef = useRef(null); - let className = "mention-text"; - - if (props.isFocused) { - className += " mention-focused"; - } - - useEffect(() => { - if (props.isFocused) { - if ("scrollIntoViewIfNeeded" in document.body) { - entryRef.current?.scrollIntoViewIfNeeded?.(false); - } else { - entryRef.current?.scrollIntoView?.(false); - } - } - }, [props.isFocused]); - - return ( -

- -
- ); - }; - - EnrichedBrainSuggestion.displayName = `withEnrichedBrainSuggestion`; - - return EnrichedBrainSuggestion; -}; diff --git a/frontend/lib/components/BrainUsers/components/BrainUser/BrainUser.tsx b/frontend/lib/components/BrainUsers/components/BrainUser/BrainUser.tsx index aa9425f56ab8..b666dfbb0fb2 100644 --- a/frontend/lib/components/BrainUsers/components/BrainUser/BrainUser.tsx +++ b/frontend/lib/components/BrainUsers/components/BrainUser/BrainUser.tsx @@ -5,10 +5,9 @@ import Field from "@/lib/components/ui/Field"; import { Select } from "@/lib/components/ui/Select"; import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext"; -import { BrainRoleType } from "../../../NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types"; import { RemoveAccessIcon } from "./components/RemoveAccessIcon"; import { useBrainUser } from "./hooks/useBrainUser"; - +import { BrainRoleType } from "../../../NavBar/components/NavItems/components/BrainsDropDown/components/BrainActions/types"; type BrainUserProps = { email: string; role: BrainRoleType;