quivr/frontend/app/chat/[chatId]/page.tsx
Antoine Dewez 66ffc6b9aa
feat(panel): added (#2088)
# 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):
2024-01-25 12:44:24 -08:00

55 lines
1.7 KiB
TypeScript

"use client";
import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
import { useDevice } from "@/lib/hooks/useDevice";
import { useCustomDropzone } from "@/lib/hooks/useDropzone";
import { cn } from "@/lib/utils";
import { ActionsBar } from "./components/ActionsBar";
import { ChatDialogueArea } from "./components/ChatDialogueArea/ChatDialogue";
import DataPanel from "./components/DataPanel/DataPanel";
import { useChatNotificationsSync } from "./hooks/useChatNotificationsSync";
import styles from "./page.module.scss";
const SelectedChatPage = (): JSX.Element => {
const { getRootProps } = useCustomDropzone();
const { shouldDisplayFeedCard } = useKnowledgeToFeedContext();
const { isMobile } = useDevice();
useChatNotificationsSync();
return (
<div
className={`
${styles.chat_page_container ?? ""}
${shouldDisplayFeedCard ? styles.feeding ?? "" : ""}
`}
data-testid="chat-page"
{...getRootProps()}
>
<div
className={cn(
"flex flex-col flex-1 items-center justify-stretch w-full h-full overflow-hidden",
"dark:bg-black transition-colors ease-out duration-500"
)}
>
<div
className={`flex flex-col flex-1 w-full max-w-4xl h-full dark:shadow-primary/25 overflow-hidden`}
>
<div className="flex flex-1 flex-col overflow-y-auto">
<ChatDialogueArea />
</div>
<ActionsBar />
</div>
</div>
{!isMobile && (
<div className={styles.data_panel_wrapper}>
<DataPanel />
</div>
)}
</div>
);
};
export default SelectedChatPage;