navigate back in ai [age

src/app/[name]/(Main)/ai/AiPage.tsx

@@ -8,8 +8,9 @@ import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
 import { toast } from "@/components/Toast";
 import { extractErrorMessage } from "@/lib/func";
 import { glassSurfaceFlat } from "@/lib/styles/glassSurface";
-import { Send2 } from "iconsax-react";
+import { ArrowLeft, Send2 } from "iconsax-react";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 import { FormEvent, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useChat } from "./hooks/useAiData";
@@ -53,6 +54,7 @@ function toFood(food: ChatFood): Food {
 
 function AiPage() {
   const { t } = useTranslation("common", { keyPrefix: "AI" });
+  const router = useRouter();
   const { data: about } = useGetAbout();
   const { data: profile, isSuccess } = useGetProfile();
   const { mutate: chat, isPending } = useChat();
@@ -105,7 +107,11 @@ function AiPage() {
 
   return (
     <section className="flex h-[calc(100svh-6.5rem)] flex-col pt-4 xl:h-[calc(100svh-6rem)]">
-      <h1 className="shrink-0 text-center text-sm2 font-medium">{t("Heading")}</h1>
+      <div className="grid shrink-0 grid-cols-3 items-center">
+        <span />
+        <h1 className="place-self-center text-sm2 font-medium">{t("Heading")}</h1>
+        <ArrowLeft className="cursor-pointer place-self-end" size="20" color="currentColor" onClick={() => router.back()} />
+      </div>
 
       <div className="mt-6 flex min-h-0 flex-1 flex-col">
         {messages.length > 0 ? (