-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: move delete all button and restyle side menu (#375)
- Loading branch information
1 parent
cd88576
commit 69b2371
Showing
30 changed files
with
1,057 additions
and
874 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
98 changes: 28 additions & 70 deletions
98
apps/nextjs/src/components/AppComponents/Chat/clear-history.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,81 +1,39 @@ | ||
| "use client"; | ||
|
|
||
| import * as React from "react"; | ||
| import { toast } from "react-hot-toast"; | ||
|
|
||
| import { useRouter } from "next/navigation"; | ||
| import { OakFlex, OakSpan } from "@oaknational/oak-components"; | ||
|
|
||
| import { | ||
| AlertDialog, | ||
| AlertDialogAction, | ||
| AlertDialogCancel, | ||
| AlertDialogContent, | ||
| AlertDialogDescription, | ||
| AlertDialogFooter, | ||
| AlertDialogHeader, | ||
| AlertDialogTitle, | ||
| AlertDialogTrigger, | ||
| } from "@/components/AppComponents/Chat/ui/alert-dialog"; | ||
| import { Button } from "@/components/AppComponents/Chat/ui/button"; | ||
| import { IconSpinner } from "@/components/AppComponents/Chat/ui/icons"; | ||
| import { trpc } from "@/utils/trpc"; | ||
| import BinIcon from "@/components/BinIcon"; | ||
|
|
||
| type ClearHistoryProps = Readonly<{ | ||
| isEnabled: boolean; | ||
| }>; | ||
|
|
||
| export function ClearHistory({ isEnabled = false }: ClearHistoryProps) { | ||
| const clearChats = trpc.chat.appSessions.deleteAllChats.useMutation({ | ||
| onSuccess() { | ||
| toast.success("Chat history cleared"); | ||
| setOpen(false); | ||
| router.push("/"); | ||
| }, | ||
| onError() { | ||
| toast.error("Failed to clear chat history"); | ||
| }, | ||
| }).mutate; | ||
| import { useDialog } from "../DialogContext"; | ||
|
|
||
| const [open, setOpen] = React.useState(false); | ||
| const [isPending, startTransition] = React.useTransition(); | ||
| const router = useRouter(); | ||
| type ClearHistoryProps = { | ||
| isEnabled: boolean; | ||
| }; | ||
|
|
||
| export function ClearHistory({ isEnabled }: Readonly<ClearHistoryProps>) { | ||
| const { setDialogWindow, setOpenSidebar } = useDialog(); | ||
| if (!isEnabled) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <AlertDialog open={open} onOpenChange={setOpen}> | ||
| <AlertDialogTrigger asChild> | ||
| <Button | ||
| variant="ghost" | ||
| disabled={!isEnabled || isPending} | ||
| className="fixed bottom-0 right-0 z-40 flex w-full justify-center bg-white p-16 pl-0 sm:w-[298px]" | ||
| > | ||
| {isPending && <IconSpinner className="mr-7" />} | ||
| <span className="text-teachersRed">Clear history</span> | ||
| </Button> | ||
| </AlertDialogTrigger> | ||
| <AlertDialogContent> | ||
| <AlertDialogHeader> | ||
| <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> | ||
| <AlertDialogDescription> | ||
| This will permanently delete your chat history and remove your data | ||
| from our servers. | ||
| </AlertDialogDescription> | ||
| </AlertDialogHeader> | ||
| <AlertDialogFooter> | ||
| <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel> | ||
| <AlertDialogAction | ||
| disabled={isPending} | ||
| onClick={(event) => { | ||
| event.preventDefault(); | ||
| startTransition(() => { | ||
| clearChats(); | ||
| }); | ||
| }} | ||
| > | ||
| {isPending && <IconSpinner className="mr-7 animate-spin" />} | ||
| Delete | ||
| </AlertDialogAction> | ||
| </AlertDialogFooter> | ||
| </AlertDialogContent> | ||
| </AlertDialog> | ||
| <OakFlex | ||
| $justifyContent="flex-start" | ||
| $gap="all-spacing-2" | ||
| $alignItems="center" | ||
| > | ||
| <BinIcon /> | ||
| <button | ||
| onClick={() => { | ||
| setOpenSidebar(false); | ||
| setDialogWindow("clear-history"); | ||
| }} | ||
| > | ||
| <OakSpan $font="body-3-bold" $color="black" $textDecoration="none"> | ||
| Delete all lessons | ||
| </OakSpan> | ||
| </button> | ||
| </OakFlex> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
apps/nextjs/src/components/AppComponents/Chat/open-side-bar-button.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| "use client"; | ||
|
|
||
| import { OakFlex, OakSpan } from "@oaknational/oak-components"; | ||
|
|
||
| import { Button } from "@/components/AppComponents/Chat/ui/button"; | ||
| import { Icon } from "@/components/Icon"; | ||
| import useAnalytics from "@/lib/analytics/useAnalytics"; | ||
|
|
||
| export function OpenSideBarButton({ | ||
| setOpenSidebar, | ||
| }: Readonly<{ | ||
| setOpenSidebar: (value: boolean) => void; | ||
| }>) { | ||
| const { trackEvent } = useAnalytics(); | ||
|
|
||
| return ( | ||
| <Button | ||
| variant="ghost" | ||
| data-testid="sidebar-button" | ||
| className="flex items-center px-5" | ||
| onClick={() => { | ||
| setOpenSidebar(true); | ||
| trackEvent("chat:toggle_sidebar"); | ||
| }} | ||
| > | ||
| <Icon icon="sidebar" size="md" /> | ||
| <OakFlex $pl={"inner-padding-ssx"} $display={["none", "flex"]}> | ||
| <OakSpan $font={"body-2"}>Menu</OakSpan> | ||
| </OakFlex> | ||
|
|
||
| <span className="sr-only block sm:hidden">Toggle Sidebar</span> | ||
| </Button> | ||
| ); | ||
| } |
23 changes: 23 additions & 0 deletions
23
apps/nextjs/src/components/AppComponents/Chat/render-chat-history.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { OakBox, OakFlex, OakP } from "@oaknational/oak-components"; | ||
| import { motion } from "framer-motion"; | ||
|
|
||
| import type { SideBarChatItem } from "@/lib/types"; | ||
|
|
||
| import { SidebarItem } from "./sidebar-item"; | ||
|
|
||
| const RenderChats = (title: string, chats: SideBarChatItem[]) => ( | ||
| <OakBox $ml="space-between-s"> | ||
| <OakP $font="body-2-bold" $mb="space-between-s"> | ||
| {title} | ||
| </OakP> | ||
| <OakFlex $mb="space-between-s" $flexDirection="column" $gap="all-spacing-2"> | ||
| {chats.map((chat) => ( | ||
| <motion.div key={chat.id} exit={{ opacity: 0, height: 0 }}> | ||
| <SidebarItem chat={chat} /> | ||
| </motion.div> | ||
| ))} | ||
| </OakFlex> | ||
| </OakBox> | ||
| ); | ||
|
|
||
| export default RenderChats; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.