From 18305adb111084c20898570abec5d7375b005e23 Mon Sep 17 00:00:00 2001 From: mamadoudicko Date: Thu, 10 Aug 2023 18:04:34 +0200 Subject: [PATCH] feat(chat): add brain selection through mention input --- .../components/ActionsBar/ActionsBar.tsx | 2 +- .../ChatInput/__tests__/ChatInput.test.tsx | 0 .../ChatInput/components/ChatBar/ChatBar.tsx | 7 + .../ChatBar/components/BrainMentionItem.tsx} | 8 +- .../components/MentionInput/MentionInput.tsx | 65 ++ .../components/AddNewBrainButton.tsx | 9 + .../MentionInput/components/index.ts | 1 + .../MentionInput/hooks/useMentionInput.tsx | 188 +++++ .../ChatBar/components/MentionInput/index.ts | 1 + .../MentionInput/utils/mapToMentionData.ts | 11 + .../components/ChatBar/components/index.ts | 1 + .../components/ChatBar/hooks/useChatBar.ts | 11 + .../ChatInput/components/ChatBar/index.ts | 1 + .../ChatInput/components/ChatBar/types.ts | 9 + .../components/ConfigModal/ConfigModal.tsx | 0 .../ConfigModal/hooks/useConfigModal.ts | 0 .../ChatInput/components/ConfigModal/index.ts | 0 .../components/MicButton/MicButton.tsx | 0 .../components/MicButton/hooks/useSpeech.ts | 0 .../components/ChatInput/components/index.ts | 1 + .../ChatInput/hooks/useChatInput.ts | 2 +- .../ActionsBar/components/ChatInput/index.tsx | 47 ++ .../ActionsBar/components/MentionsInput.tsx | 21 - .../components/ActionsBar/components/index.ts | 3 +- .../ActionsBar/hooks/useActionsBar.tsx | 15 - .../[chatId]/components/ChatInput/index.tsx | 73 -- .../app/chat/[chatId]/components/index.ts | 1 - frontend/package.json | 5 + frontend/yarn.lock | 649 ++++++++++++------ 29 files changed, 791 insertions(+), 340 deletions(-) rename frontend/app/chat/[chatId]/components/{ => ActionsBar/components}/ChatInput/__tests__/ChatInput.test.tsx (100%) create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/ChatBar.tsx rename frontend/app/chat/[chatId]/components/ActionsBar/components/{MentionItem.tsx => ChatInput/components/ChatBar/components/BrainMentionItem.tsx} (74%) create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/MentionInput.tsx create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/index.ts create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/index.ts create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/utils/mapToMentionData.ts create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/index.ts create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/hooks/useChatBar.ts create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/index.ts create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/types.ts rename frontend/app/chat/[chatId]/components/{ => ActionsBar/components}/ChatInput/components/ConfigModal/ConfigModal.tsx (100%) rename frontend/app/chat/[chatId]/components/{ => ActionsBar/components}/ChatInput/components/ConfigModal/hooks/useConfigModal.ts (100%) rename frontend/app/chat/[chatId]/components/{ => ActionsBar/components}/ChatInput/components/ConfigModal/index.ts (100%) rename frontend/app/chat/[chatId]/components/{ => ActionsBar/components}/ChatInput/components/MicButton/MicButton.tsx (100%) rename frontend/app/chat/[chatId]/components/{ => ActionsBar/components}/ChatInput/components/MicButton/hooks/useSpeech.ts (100%) create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts rename frontend/app/chat/[chatId]/components/{ => ActionsBar/components}/ChatInput/hooks/useChatInput.ts (90%) create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx delete mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/MentionsInput.tsx delete mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/hooks/useActionsBar.tsx delete mode 100644 frontend/app/chat/[chatId]/components/ChatInput/index.tsx diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx index 28b903981825..1063dcabce97 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx +++ b/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx @@ -1,4 +1,4 @@ -import { ChatInput } from "../ChatInput"; +import { ChatInput } from "./components"; export const ActionsBar = (): JSX.Element => { return ( diff --git a/frontend/app/chat/[chatId]/components/ChatInput/__tests__/ChatInput.test.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/__tests__/ChatInput.test.tsx similarity index 100% rename from frontend/app/chat/[chatId]/components/ChatInput/__tests__/ChatInput.test.tsx rename to frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/__tests__/ChatInput.test.tsx diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/ChatBar.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/ChatBar.tsx new file mode 100644 index 000000000000..8e229ca9aeb1 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/ChatBar.tsx @@ -0,0 +1,7 @@ +"use client"; + +import { CustomComponentMentionEditor } from "./components/MentionInput/MentionInput"; + +export const ChatBar = (): JSX.Element => { + return ; +}; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/MentionItem.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/BrainMentionItem.tsx similarity index 74% rename from frontend/app/chat/[chatId]/components/ActionsBar/components/MentionItem.tsx rename to frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/BrainMentionItem.tsx index 7e671a289de5..b2b4089d79aa 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/MentionItem.tsx +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/BrainMentionItem.tsx @@ -3,18 +3,16 @@ import { MdRemoveCircleOutline } from "react-icons/md"; type MentionItemProps = { text: string; onRemove: () => void; - prefix?: string; }; -export const MentionItem = ({ +export const BrainMentionItem = ({ text, - prefix = "", onRemove, }: MentionItemProps): JSX.Element => { return ( -
+
- {`${prefix}${text}`} + {text} { + const { + mentionInputRef, + MentionSuggestions, + editorState, + onOpenChange, + onSearchChange, + open, + plugins, + setEditorState, + suggestions, + onAddMention, + } = useMentionInput(); + const { t } = useTranslation(["chat"]); + + return ( +
{ + mentionInputRef.current?.focus(); + }} + > + + ( + +
+ {children} + +
+ + )} + onAddMention={onAddMention} + entryComponent={({ mention, ...otherProps }) => ( +

+ {mention.name} +

+ )} + /> +
+ ); +}; 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 new file mode 100644 index 000000000000..ececd1b775c4 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx @@ -0,0 +1,9 @@ +import Link from "next/link"; + +import Button from "@/lib/components/ui/Button"; + +export const AddNewBrainButton = (): JSX.Element => ( + + + +); diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/index.ts new file mode 100644 index 000000000000..44cffc618d2a --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/index.ts @@ -0,0 +1 @@ +export * from "./AddNewBrainButton"; 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 new file mode 100644 index 000000000000..94e7deb9ffc6 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx @@ -0,0 +1,188 @@ +/* eslint-disable max-lines */ +import Editor from "@draft-js-plugins/editor"; +import createMentionPlugin, { + defaultSuggestionsFilter, + MentionData, +} from "@draft-js-plugins/mention"; +import { UUID } from "crypto"; +import { EditorState, Modifier } from "draft-js"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; + +import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext"; + +import { BrainMentionsList } from "../../../types"; +import { BrainMentionItem } from "../../BrainMentionItem"; +import { mapToMentionData } from "../utils/mapToMentionData"; + +// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types +export const useMentionInput = () => { + const { allBrains } = useBrainContext(); + + const [selectedBrainAddedOnload, setSelectedBrainAddedOnload] = + useState(false); + + const { setCurrentBrainId, currentBrainId } = useBrainContext(); + const [editorState, setEditorState] = useState(() => + EditorState.createEmpty() + ); + + const [open, setOpen] = useState(false); + + const [mentionItems, setMentionItems] = useState({ + "@": allBrains.map((brain) => ({ ...brain, value: brain.name })), + }); + + const [suggestions, setSuggestions] = useState( + mapToMentionData(mentionItems["@"]) + ); + + const mentionInputRef = useRef(null); + + const onAddMention = (mention: MentionData) => { + setCurrentBrainId(mention.id as UUID); + }; + + const removeMention = (entityKeyToRemove: string): void => { + const contentState = editorState.getCurrentContent(); + const entity = contentState.getEntity(entityKeyToRemove); + + if (entity.getType() === "mention") { + const newContentState = contentState.replaceEntityData( + entityKeyToRemove, + {} + ); + + const newEditorState = EditorState.push( + editorState, + newContentState, + "apply-entity" + ); + + setEditorState(newEditorState); + setCurrentBrainId(null); + } + }; + + const { MentionSuggestions, plugins } = useMemo(() => { + const mentionPlugin = createMentionPlugin({ + mentionComponent: ({ entityKey, mention: { name } }) => ( + removeMention(entityKey)} + /> + ), + + popperOptions: { + placement: "top-end", + }, + }); + const { MentionSuggestions: coreMentionSuggestions } = mentionPlugin; + const corePlugins = [mentionPlugin]; + + return { plugins: corePlugins, MentionSuggestions: coreMentionSuggestions }; + }, []); + + const onOpenChange = useCallback((_open: boolean) => { + setOpen(_open); + }, []); + + const onSearchChange = useCallback( + ({ trigger, value }: { trigger: string; value: string }) => { + setSuggestions( + defaultSuggestionsFilter( + value, + currentBrainId !== null ? [] : mapToMentionData(mentionItems["@"]), + trigger + ) + ); + }, + [mentionItems, currentBrainId] + ); + + useEffect(() => { + setSuggestions(mapToMentionData(mentionItems["@"])); + }, [mentionItems]); + + useEffect(() => { + setMentionItems({ + ...mentionItems, + "@": [ + ...allBrains.map((brain) => ({ + ...brain, + value: brain.name, + })), + ], + }); + }, [allBrains]); + useEffect(() => { + if (selectedBrainAddedOnload) { + return; + } + + if (currentBrainId === null || mentionItems["@"].length === 0) { + return; + } + + const mention = mentionItems["@"].find( + (item) => item.id === currentBrainId + ); + + if (mention !== undefined) { + const mentionText = `@${mention.name}`; + const mentionWithSpace = `${mentionText} `; // Add white space after the mention + + // Check if the mention with white space is already in the editor's content + const contentState = editorState.getCurrentContent(); + const plainText = contentState.getPlainText(); + + if (plainText.includes(mentionWithSpace)) { + return; // Mention with white space already in content, no need to add it again + } + + const stateWithEntity = contentState.createEntity( + "mention", + "IMMUTABLE", + { + mention, + } + ); + const entityKey = stateWithEntity.getLastCreatedEntityKey(); + + const selectionState = editorState.getSelection(); + const updatedContentState = Modifier.insertText( + contentState, + selectionState, + mentionWithSpace, + undefined, + entityKey + ); + + // Calculate the new selection position after inserting the mention with white space + const newSelection = selectionState.merge({ + anchorOffset: selectionState.getStartOffset() + mentionWithSpace.length, + focusOffset: selectionState.getStartOffset() + mentionWithSpace.length, + }); + + const newEditorState = EditorState.forceSelection( + EditorState.push(editorState, updatedContentState, "insert-characters"), + newSelection + ); + + setEditorState(newEditorState); + } + setSelectedBrainAddedOnload(true); + }, [currentBrainId, mentionItems]); + + return { + mentionInputRef, + editorState, + setEditorState, + plugins, + MentionSuggestions, + onOpenChange, + onSearchChange, + open, + suggestions, + onAddMention, + }; +}; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/index.ts new file mode 100644 index 000000000000..bc5bdfe89212 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/index.ts @@ -0,0 +1 @@ +export * from "./MentionInput"; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/utils/mapToMentionData.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/utils/mapToMentionData.ts new file mode 100644 index 000000000000..40192e3c6fef --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/utils/mapToMentionData.ts @@ -0,0 +1,11 @@ +import { MentionData } from "@draft-js-plugins/mention"; + +import { MinimalBrainForUser } from "@/lib/context/BrainProvider/types"; + +export const mapToMentionData = ( + brains: MinimalBrainForUser[] +): MentionData[] => + brains.map((brain) => ({ + name: brain.name, + id: brain.id as string, + })); diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/index.ts new file mode 100644 index 000000000000..bc5bdfe89212 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/index.ts @@ -0,0 +1 @@ +export * from "./MentionInput"; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/hooks/useChatBar.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/hooks/useChatBar.ts new file mode 100644 index 000000000000..f1c979663a75 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/hooks/useChatBar.ts @@ -0,0 +1,11 @@ +// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types +import { useFeature } from "@growthbook/growthbook-react"; + +// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types +export const useChatBar = () => { + const shouldUseNewUX = useFeature("new-ux").on; + + return { + shouldUseNewUX, + }; +}; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/index.ts new file mode 100644 index 000000000000..85c1ff984f5a --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/index.ts @@ -0,0 +1 @@ +export * from "./ChatBar"; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/types.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/types.ts new file mode 100644 index 000000000000..8ed8b6fa9733 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/types.ts @@ -0,0 +1,9 @@ +import { MinimalBrainForUser } from "@/lib/context/BrainProvider/types"; + +export type BrainMentionType = MinimalBrainForUser & { value: string }; + +export type Trigger = "@" | "#"; + +export type BrainMentionsList = { + "@": MinimalBrainForUser[]; +}; diff --git a/frontend/app/chat/[chatId]/components/ChatInput/components/ConfigModal/ConfigModal.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/ConfigModal.tsx similarity index 100% rename from frontend/app/chat/[chatId]/components/ChatInput/components/ConfigModal/ConfigModal.tsx rename to frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/ConfigModal.tsx diff --git a/frontend/app/chat/[chatId]/components/ChatInput/components/ConfigModal/hooks/useConfigModal.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/hooks/useConfigModal.ts similarity index 100% rename from frontend/app/chat/[chatId]/components/ChatInput/components/ConfigModal/hooks/useConfigModal.ts rename to frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/hooks/useConfigModal.ts diff --git a/frontend/app/chat/[chatId]/components/ChatInput/components/ConfigModal/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/index.ts similarity index 100% rename from frontend/app/chat/[chatId]/components/ChatInput/components/ConfigModal/index.ts rename to frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ConfigModal/index.ts diff --git a/frontend/app/chat/[chatId]/components/ChatInput/components/MicButton/MicButton.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/MicButton/MicButton.tsx similarity index 100% rename from frontend/app/chat/[chatId]/components/ChatInput/components/MicButton/MicButton.tsx rename to frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/MicButton/MicButton.tsx diff --git a/frontend/app/chat/[chatId]/components/ChatInput/components/MicButton/hooks/useSpeech.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/MicButton/hooks/useSpeech.ts similarity index 100% rename from frontend/app/chat/[chatId]/components/ChatInput/components/MicButton/hooks/useSpeech.ts rename to frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/MicButton/hooks/useSpeech.ts diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts new file mode 100644 index 000000000000..85c1ff984f5a --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts @@ -0,0 +1 @@ +export * from "./ChatBar"; diff --git a/frontend/app/chat/[chatId]/components/ChatInput/hooks/useChatInput.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/hooks/useChatInput.ts similarity index 90% rename from frontend/app/chat/[chatId]/components/ChatInput/hooks/useChatInput.ts rename to frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/hooks/useChatInput.ts index fca7c036db37..ee1e91c07b16 100644 --- a/frontend/app/chat/[chatId]/components/ChatInput/hooks/useChatInput.ts +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/hooks/useChatInput.ts @@ -1,6 +1,6 @@ import { useState } from "react"; -import { useChat } from "../../../hooks/useChat"; +import { useChat } from "../../../../../hooks/useChat"; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export const useChatInput = () => { diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx new file mode 100644 index 000000000000..9a6788c62fc7 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx @@ -0,0 +1,47 @@ +"use client"; +import { useTranslation } from "react-i18next"; + +import Button from "@/lib/components/ui/Button"; + +import { ChatBar } from "./components/ChatBar/ChatBar"; +import { ConfigModal } from "./components/ConfigModal"; +import { MicButton } from "./components/MicButton/MicButton"; +import { useChatInput } from "./hooks/useChatInput"; + +export const ChatInput = (): JSX.Element => { + const { setMessage, submitQuestion, chatId, generatingAnswer } = + useChatInput(); + const { t } = useTranslation(["chat"]); + + return ( +
{ + e.preventDefault(); + submitQuestion(); + }} + className="sticky flex items-star bottom-0 bg-white dark:bg-black w-full flex justify-center gap-2 z-20" + > +
+ +
+ +
+ +
+ + +
+
+
+ ); +}; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/MentionsInput.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/MentionsInput.tsx deleted file mode 100644 index 07226dc424b4..000000000000 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/MentionsInput.tsx +++ /dev/null @@ -1,21 +0,0 @@ -type StyleMentionsInputProps = { - value: string; - onChange: (value: string) => void; - placeholder: string; -}; - -export const MentionsInput = ({ - onChange, - placeholder, - value, -}: StyleMentionsInputProps): JSX.Element => { - return ( - onChange(event.target.value)} - value={value} - className="focus:outline-none focus:border-none" - /> - ); -}; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/index.ts index 80fc14b5019b..924a01f255d8 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/index.ts +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/index.ts @@ -1,2 +1 @@ -export * from "./MentionItem"; -export * from "./MentionsInput"; +export * from "./ChatInput"; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/hooks/useActionsBar.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/hooks/useActionsBar.tsx deleted file mode 100644 index 1203de50b48e..000000000000 --- a/frontend/app/chat/[chatId]/components/ActionsBar/hooks/useActionsBar.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { useState } from "react"; - -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -export const useActionsBar = () => { - const [value, setValue] = useState(""); - - const handleChange = (newPlainTextValue: string) => { - setValue(newPlainTextValue); - }; - - return { - handleChange, - value, - }; -}; diff --git a/frontend/app/chat/[chatId]/components/ChatInput/index.tsx b/frontend/app/chat/[chatId]/components/ChatInput/index.tsx deleted file mode 100644 index 80b008e49c04..000000000000 --- a/frontend/app/chat/[chatId]/components/ChatInput/index.tsx +++ /dev/null @@ -1,73 +0,0 @@ -"use client"; -import { useFeature } from "@growthbook/growthbook-react"; -import { useTranslation } from "react-i18next"; - -import Button from "@/lib/components/ui/Button"; -import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext"; - -import { ConfigModal } from "./components/ConfigModal"; -import { MicButton } from "./components/MicButton/MicButton"; -import { useChatInput } from "./hooks/useChatInput"; -import { MentionItem } from "../ActionsBar/components"; - -export const ChatInput = (): JSX.Element => { - const { message, setMessage, submitQuestion, chatId, generatingAnswer } = - useChatInput(); - const { t } = useTranslation(["chat"]); - const { currentBrain, setCurrentBrainId } = useBrainContext(); - const shouldUseNewUX = useFeature("new-ux").on; - - return ( -
{ - e.preventDefault(); - submitQuestion(); - }} - className="sticky flex items-star bottom-0 bg-white dark:bg-black w-full flex justify-center gap-2 z-20" - > - {currentBrain !== undefined && ( - setCurrentBrainId(null)} - prefix="@" - /> - )} - -