From 36fd146fedd9700bbe8cea1747a894a43fcac98b Mon Sep 17 00:00:00 2001 From: Mamadou DICKO <63923024+mamadoudicko@users.noreply.github.com> Date: Fri, 29 Sep 2023 10:24:31 +0200 Subject: [PATCH] feat: improve app ux (#1281) * style: make FeedItemIcon the same size * feat: update feed component brain selector label position * style: change purple to 600 * feat: improve already dropped file message ux * feat: autoclose feedinput on chatId change * style: change chat colors * feat: prevent linebreak in knowledge to upload row * feat(textFIeld): avoid textfield content going under icon * feat(knowledgeToUpload): add tooltip on urls and files name * feat(feedBrain): auto scroll on messages when feed modal get opened * style: update colors * refactor: rename uploadCard to FeedCard --- .../components/SettingsTab/SettingsTab.tsx | 2 +- .../components/BrainsList/BrainsList.tsx | 4 +- .../PublicBrainItem/PublicBrainItem.tsx | 2 +- .../components/ActionsBar/ActionsBar.tsx | 23 +++------ .../ActionsBar/components/ChatInput/index.tsx | 13 ++--- .../KnowledgeToFeed/KnowledgeToFeed.tsx | 15 +++--- .../hooks/useFeedBrainInChat.ts | 9 ++-- .../components/MessageRow/MessageRow.tsx | 8 +-- .../ChatDialogue/hooks/useChatDialogue.ts | 4 +- .../components/ChatDialogue/index.tsx | 1 + .../chat/[chatId]/components/ChatHeader.tsx | 9 ++-- .../[chatId]/hooks/useSelectedChatPage.ts | 20 -------- frontend/app/chat/[chatId]/page.tsx | 12 ++--- .../ChatsList/__tests__/ChatsList.test.tsx | 50 +++++++++++-------- .../hooks/useChatNotificationsSync.ts | 3 ++ .../KnowledgeToFeedInput.tsx | 2 +- .../components/FeedItems/FeedItems.tsx | 2 +- .../FeedItems/components/CrawlFeedItem.tsx | 20 +++++--- .../FeedTitleDisplayer/FeedTitleDisplayer.tsx | 32 +++--------- .../FeedItems/components/FileFeedItem.tsx | 35 +++++++++++++ .../components/FileFeedItem/FileFeedItem.tsx | 31 ------------ .../components/FileFeedItem/index.ts | 1 - .../FeedItems/styles/StyledFeedItemDiv.tsx | 2 +- frontend/lib/components/ui/Field.tsx | 1 + .../knowledgeToFeed-provider.tsx | 5 ++ frontend/lib/hooks/useDropzone.ts | 5 +- frontend/public/locales/en/brain.json | 4 +- frontend/public/locales/en/upload.json | 4 +- frontend/public/locales/es/brain.json | 4 +- frontend/public/locales/es/upload.json | 4 +- frontend/public/locales/fr/brain.json | 4 +- frontend/public/locales/fr/upload.json | 4 +- frontend/public/locales/pt-br/brain.json | 4 +- frontend/public/locales/pt-br/upload.json | 4 +- frontend/public/locales/ru/brain.json | 4 +- frontend/public/locales/ru/upload.json | 4 +- frontend/public/locales/zh-cn/brain.json | 4 +- frontend/public/locales/zh-cn/upload.json | 4 +- frontend/tailwind.config.js | 3 ++ 39 files changed, 175 insertions(+), 187 deletions(-) delete mode 100644 frontend/app/chat/[chatId]/hooks/useSelectedChatPage.ts create mode 100644 frontend/lib/components/KnowledgeToFeedInput/components/FeedItems/components/FileFeedItem.tsx delete mode 100644 frontend/lib/components/KnowledgeToFeedInput/components/FeedItems/components/FileFeedItem/FileFeedItem.tsx delete mode 100644 frontend/lib/components/KnowledgeToFeedInput/components/FeedItems/components/FileFeedItem/index.ts diff --git a/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/SettingsTab.tsx b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/SettingsTab.tsx index 7110ac8b1..c47a6aa6d 100644 --- a/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/SettingsTab.tsx +++ b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/SettingsTab.tsx @@ -88,7 +88,7 @@ export const SettingsTab = ({ brainId }: SettingsTabProps): JSX.Element => {
{isPublicBrain && !isOwnedByCurrentUser && ( - + {t("brain:public_brain_label")} )} diff --git a/frontend/app/brains-management/[brainId]/components/BrainsList/BrainsList.tsx b/frontend/app/brains-management/[brainId]/components/BrainsList/BrainsList.tsx index 8c49163d4..64232a10e 100644 --- a/frontend/app/brains-management/[brainId]/components/BrainsList/BrainsList.tsx +++ b/frontend/app/brains-management/[brainId]/components/BrainsList/BrainsList.tsx @@ -71,7 +71,7 @@ export const BrainsList = (): JSX.Element => { > @@ -83,7 +83,7 @@ export const BrainsList = (): JSX.Element => { > diff --git a/frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx b/frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx index f6c349fc8..9b2e4c789 100644 --- a/frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx +++ b/frontend/app/brains-management/library/components/PublicBrainItem/PublicBrainItem.tsx @@ -36,7 +36,7 @@ export const PublicBrainItem = ({ }} disabled={isUserSubscribedToBrain || subscriptionRequestPending} isLoading={subscriptionRequestPending} - className="bg-purple-600 text-white p-0 px-3 rounded-xl border-0 w-content mt-3" + className="bg-primary text-white p-0 px-3 rounded-xl border-0 w-content mt-3" > {isUserSubscribedToBrain ? t("public_brain_already_subscribed_button_label") diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx index 9b8fce147..07f7e3653 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx +++ b/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx @@ -2,21 +2,16 @@ import { AnimatePresence, motion } from "framer-motion"; import { useTranslation } from "react-i18next"; import { AiOutlineLoading3Quarters } from "react-icons/ai"; +import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext"; + import { ChatInput, KnowledgeToFeed } from "./components"; import { useActionBar } from "./hooks/useActionBar"; -type ActionBarProps = { - setShouldDisplayUploadCard: (shouldDisplay: boolean) => void; - shouldDisplayUploadCard: boolean; -}; - -export const ActionsBar = ({ - setShouldDisplayUploadCard, - shouldDisplayUploadCard, -}: ActionBarProps): JSX.Element => { +export const ActionsBar = (): JSX.Element => { const { hasPendingRequests, setHasPendingRequests } = useActionBar(); const { t } = useTranslation(["chat"]); + const { shouldDisplayFeedCard } = useKnowledgeToFeedContext(); return ( <> @@ -30,7 +25,7 @@ export const ActionsBar = ({ )}
- {shouldDisplayUploadCard && ( + {shouldDisplayFeedCard && (
setShouldDisplayUploadCard(false)} dispatchHasPendingRequests={() => setHasPendingRequests(true)} />
)} - {!shouldDisplayUploadCard && ( + {!shouldDisplayFeedCard && (
- +
)}
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx index 096179ba9..0c017bb1d 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx @@ -3,24 +3,25 @@ import { useTranslation } from "react-i18next"; import { PiPaperclipFill } from "react-icons/pi"; import Button from "@/lib/components/ui/Button"; +import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext"; import { ChatBar } from "./components/ChatBar/ChatBar"; import { ConfigModal } from "./components/ConfigModal"; import { useChatInput } from "./hooks/useChatInput"; type ChatInputProps = { - shouldDisplayUploadCard: boolean; - setShouldDisplayUploadCard: (shouldDisplayUploadCard: boolean) => void; + shouldDisplayFeedCard: boolean; }; export const ChatInput = ({ - shouldDisplayUploadCard, - setShouldDisplayUploadCard, + shouldDisplayFeedCard, }: ChatInputProps): JSX.Element => { const { setMessage, submitQuestion, generatingAnswer, message } = useChatInput(); const { t } = useTranslation(["chat"]); + const { setShouldDisplayFeedCard } = useKnowledgeToFeedContext(); + return (
- {!shouldDisplayUploadCard && ( + {!shouldDisplayFeedCard && (