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>

src/components/Layouts/NewChat.tsx

@@ -0,0 +1,57 @@
+import { SquarePen, MoreHorizontal, TimerReset } from "lucide-react"
+import { useTranslation } from "react-i18next"
+import { Dropdown, Switch } from "antd"
+import type { MenuProps } from "antd"
+import { useMessageOption } from "@/hooks/useMessageOption"
+
+type Props = {
+  clearChat: () => void
+}
+
+export const NewChat: React.FC<Props> = ({ clearChat }) => {
+  const { t } = useTranslation(["option", "common"])
+
+  const { temporaryChat, setTemporaryChat, messages } = useMessageOption()
+
+  const items: MenuProps["items"] = [
+    {
+      key: "1",
+      label: (
+        <label className="flex items-center gap-6 justify-between px-1 py-0.5 cursor-pointer w-full">
+          <div className="flex items-center gap-2">
+            <TimerReset className="h-4 w-4 text-gray-600" />
+            <span>
+                {t("temporaryChat")}
+            </span>
+          </div>
+          <Switch
+            checked={temporaryChat}
+            onChange={(checked) => {
+              setTemporaryChat(checked)
+              // just like chatgpt
+              if (messages.length > 0) {
+                clearChat()
+              }
+            }}
+            size="small"
+          />
+        </label>
+      )
+    }
+  ]
+  return (
+    <div className="flex items-center justify-between">
+      <button
+        onClick={clearChat}
+        className="inline-flex dark:bg-transparent  bg-white items-center rounded-r-none rounded-lg border dark:border-gray-700 bg-transparent px-3 py-2.5 pr-6 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>
+      <Dropdown menu={{ items }} trigger={["click"]}>
+        <button className="inline-flex dark:bg-transparent bg-white items-center rounded-lg border-l-0 rounded-l-none 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">
+          <MoreHorizontal className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+        </button>
+      </Dropdown>
+    </div>
+  )
+}