feat: Introduce temporary chat mode

Adds a new "Temporary Chat" mode for quick, non-persistent conversations. The new mode is available in the header bar and will trigger a visually distinct chat experience with a temporary background color. Temporary chats do not save to the chat history and are meant for short, one-off interactions. This feature enhances flexibility and provides a more convenient option for users who need to quickly interact with the AI without committing the conversation to their history.

src/components/Layouts/Header.tsx

@@ -21,6 +21,7 @@ import { Select, Tooltip } from "antd"
 import { getAllPrompts } from "@/db"
 import { ShareBtn } from "~/components/Common/ShareBtn"
 import { ProviderIcons } from "../Common/ProviderIcon"
+import { NewChat } from "./NewChat"
 type Props = {
   setSidebarOpen: (open: boolean) => void
   setOpenModelSettings: (open: boolean) => void
@@ -45,12 +46,12 @@ export const Header: React.FC<Props> = ({
     setSelectedSystemPrompt,
     messages,
     streaming,
-    historyId
+    historyId,
+    temporaryChat
   } = useMessageOption()
   const {
     data: models,
     isLoading: isModelsLoading,
-    isFetching: isModelsFetching
   } = useQuery({
     queryKey: ["fetchModel"],
     queryFn: () => fetchChatModels({ returnEmpty: true }),
@@ -86,7 +87,9 @@ export const Header: React.FC<Props> = ({
   }
 
   return (
-    <div className="sticky top-0 z-[999] flex h-16 p-3  bg-gray-50 border-b  dark:bg-[#171717] dark:border-gray-600">
+    <div className={`sticky top-0 z-[999] flex h-16 p-3  bg-gray-50 border-b  dark:bg-[#171717] dark:border-gray-600 ${
+      temporaryChat && "!bg-gray-200 dark:!bg-black"
+    }`}>
       <div className="flex gap-2 items-center">
         {pathname !== "/" && (
           <div>
@@ -104,14 +107,9 @@ export const Header: React.FC<Props> = ({
             <PanelLeftIcon className="w-6 h-6" />
           </button>
         </div>
-        <div>
-          <button
-            onClick={clearChat}
-            className="inline-flex  dark:bg-transparent bg-white items-center rounded-lg border  dark:border-gray-700 bg-transparent px-3 py-2.5 text-xs lg:text-sm font-medium leading-4 text-gray-800  dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white">
-            <SquarePen className="h-5 w-5 " />
-            <span className=" truncate ml-3">{t("newChat")}</span>
-          </button>
-        </div>
+        <NewChat 
+          clearChat={clearChat}
+        />
         <span className="text-lg font-thin text-zinc-300 dark:text-zinc-600">
           {"/"}
         </span>