fix(frontend): remove right panel and reduce chat section width (#2012)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

---------

Co-authored-by: Antoine Dewez <antoinedewez@MacBook-Pro-de-Antoine.local>
This commit is contained in:
Zewed 2024-01-13 23:52:21 +01:00 committed by GitHub
parent f87eae7c67
commit 97efbc13ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,6 +1,5 @@
"use client"; "use client";
import { useMenuWidth } from "@/lib/components/Menu/hooks/useMenuWidth";
import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext"; import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
import { useCustomDropzone } from "@/lib/hooks/useDropzone"; import { useCustomDropzone } from "@/lib/hooks/useDropzone";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -11,41 +10,34 @@ import { useChatNotificationsSync } from "./hooks/useChatNotificationsSync";
import { useChatsList } from "./hooks/useChatsList"; import { useChatsList } from "./hooks/useChatsList";
const SelectedChatPage = (): JSX.Element => { const SelectedChatPage = (): JSX.Element => {
const { getRootProps } = useCustomDropzone(); const { getRootProps } = useCustomDropzone();
const { shouldDisplayFeedCard } = useKnowledgeToFeedContext(); const { shouldDisplayFeedCard } = useKnowledgeToFeedContext();
const { shouldDisplayRightSideBar, OPENED_MENU_WIDTH } = useMenuWidth();
useChatsList(); useChatsList();
useChatNotificationsSync(); useChatNotificationsSync();
return ( return (
<div className="flex flex-1"> <div className="flex flex-1">
<div <div
className={cn( className={cn(
"flex flex-col flex-1 items-center justify-stretch w-full h-full overflow-hidden", "flex flex-col flex-1 items-center justify-stretch w-full h-full overflow-hidden",
shouldDisplayFeedCard ? "bg-chat-bg-gray" : "bg-tertiary", shouldDisplayFeedCard ? "bg-chat-bg-gray" : "bg-tertiary",
"dark:bg-black transition-colors ease-out duration-500" "dark:bg-black transition-colors ease-out duration-500"
)} )}
data-testid="chat-page" data-testid="chat-page"
{...getRootProps()} {...getRootProps()}
> >
<div <div
className={`flex flex-col flex-1 w-full max-w-5xl h-full dark:shadow-primary/25 overflow-hidden p-2 sm:p-4 md:p-6 lg:p-8`} className={`flex flex-col flex-1 w-full max-w-4xl h-full dark:shadow-primary/25 overflow-hidden p-2 sm:p-4 md:p-6 lg:p-8`}
> >
<div className="flex flex-1 flex-col overflow-y-auto"> <div className="flex flex-1 flex-col overflow-y-auto">
<ChatDialogueArea /> <ChatDialogueArea />
</div> </div>
<ActionsBar /> <ActionsBar />
</div>
</div>
</div> </div>
</div> );
{shouldDisplayRightSideBar && (
<div
className="h-full bg-highlight"
style={{ width: OPENED_MENU_WIDTH }}
/>
)}
</div>
);
}; };
export default SelectedChatPage; export default SelectedChatPage;