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/assets/locale/da/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "Noget gik galt",
     "validationSelectModel": "Venligst vælg en model for at forsæætte",
     "deleteHistoryConfirmation": "Er du sikker på at du vil slette denne historik?",
-    "editHistoryTitle": "Indtast en ny titel"
+    "editHistoryTitle": "Indtast en ny titel",
+    "temporaryChat": "Midlertidig Chat"
 }

src/assets/locale/de/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "Etwas ist schiefgelaufen",
     "validationSelectModel": "Bitte wähle ein Modell aus, um fortzufahren",
     "deleteHistoryConfirmation": "Bist du sicher, dass du diesen Verlauf löschen möchtest?",
-    "editHistoryTitle": "Gib einen neuen Titel ein"
+    "editHistoryTitle": "Gib einen neuen Titel ein",
+    "temporaryChat": "Temporärer Chat"
 }

src/assets/locale/en/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "Something went wrong",
     "validationSelectModel": "Please select a model to continue",
     "deleteHistoryConfirmation": "Are you sure you want to delete this history?",
-    "editHistoryTitle": "Enter a new title"
+    "editHistoryTitle": "Enter a new title",
+    "temporaryChat": "Temporary Chat"
 }

src/assets/locale/es/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "Hubo un error",
     "validationSelectModel": "Selecione un modelo para continuar",
     "deleteHistoryConfirmation": "¿Esta seguro que quiere borrar éste histórico?",
-    "editHistoryTitle": "Ingrese un nuevo título"
+    "editHistoryTitle": "Ingrese un nuevo título",
+    "temporaryChat": "Chat Temporal"
 }

src/assets/locale/fa/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "مشکلی پیش آمد",
     "validationSelectModel": "لطفا یک مدل را برای ادامه انتخاب کنید",
     "deleteHistoryConfirmation": "آیا مطمئن هستید که می خواهید این تاریخچه را حذف کنید؟",
-    "editHistoryTitle": "یک عنوان جدید وارد کنید"
+    "editHistoryTitle": "یک عنوان جدید وارد کنید",
+    "temporaryChat": "گپ موقت"
 }

src/assets/locale/fr/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "Quelque chose s'est mal passé",
     "validationSelectModel": "Veuillez sélectionner un modèle pour continuer",
     "deleteHistoryConfirmation": "Êtes-vous sûr de vouloir supprimer cette historique ?",
-    "editHistoryTitle": "Entrez un nouveau titre"
+    "editHistoryTitle": "Entrez un nouveau titre",
+    "temporaryChat": "Chat temporaire"
 }

src/assets/locale/it/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "Qualcosa è andato storto",
     "validationSelectModel": "Scegliere un modello per continuare",
     "deleteHistoryConfirmation": "Sei sicuro che vuoi eliminare la cronologia?",
-    "editHistoryTitle": "Inserisci un nuovo titolo"
+    "editHistoryTitle": "Inserisci un nuovo titolo",
+    "temporaryChat": "Chat Temporanea"
 }

src/assets/locale/ja-JP/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "何かが間違っています",
     "validationSelectModel": "続行するにはモデルを選択してください",
     "deleteHistoryConfirmation": "この履歴を削除しますか?",
-    "editHistoryTitle": "新しいタイトルを入力"
+    "editHistoryTitle": "新しいタイトルを入力",
+    "temporaryChat": "一時的なチャット"
   }

src/assets/locale/ko/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "문제가 발생했습니다",
     "validationSelectModel": "계속하려면 모델을 선택하세요",
     "deleteHistoryConfirmation": "이 기록을 삭제하시겠습니까?",
-    "editHistoryTitle": "새 제목 입력"
+    "editHistoryTitle": "새 제목 입력",
+    "temporaryChat": "임시 채팅"
 }

src/assets/locale/ml/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "എന്തോ തെറ്റായി",
     "deleteHistoryConfirmation": "നിങ്ങളുടെ ചാറ്റ് ചരിത്രം ഇല്ലാതാക്കണമെന്ന് തീർച്ചയാണോ?",
     "editHistoryTitle": "ചാറ്റ് title എഡിറ്റുചെയ്യുക",
-    "validationSelectModel": "തുടരുന്നതിന് ഒരു മോഡല്‍ തിരഞ്ഞെടുക്കുക"
+    "validationSelectModel": "തുടരുന്നതിന് ഒരു മോഡല്‍ തിരഞ്ഞെടുക്കുക",
+    "temporaryChat": "താൽക്കാലിക ചാറ്റ്"
 }

src/assets/locale/no/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "Noe gikk galt",
     "validationSelectModel": "Vennligst velg en modell for å fortsette",
     "deleteHistoryConfirmation": "Er du sikker på at du vil slette denne historikken?",
-    "editHistoryTitle": "Skriv inn en ny tittel"
+    "editHistoryTitle": "Skriv inn en ny tittel",
+    "temporaryChat": "Midlertidig Chat"
 }

src/assets/locale/pt-BR/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "Algo deu errado",
     "validationSelectModel": "Por favor, selecione um modelo para continuar",
     "deleteHistoryConfirmation": "Tem certeza de que deseja excluir este histórico?",
-    "editHistoryTitle": "Digite um novo título"
+    "editHistoryTitle": "Digite um novo título",
+    "temporaryChat": "Chat Temporário"
 }

src/assets/locale/ru/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "Что-то пошло не так",
     "validationSelectModel": "Пожалуйста, выберите модель, чтобы продолжить",
     "deleteHistoryConfirmation": "Вы уверены, что хотите удалить эту историю?",
-    "editHistoryTitle": "Введите новое название"
+    "editHistoryTitle": "Введите новое название",
+    "temporaryChat": "Временный чат"
 }

src/assets/locale/sv/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "Något gick fel",
     "validationSelectModel": "Vänligen välj en modell för att fortsätta",
     "deleteHistoryConfirmation": "Är du säker på att du vill radera denna historik?",
-    "editHistoryTitle": "Ange en ny titel"
+    "editHistoryTitle": "Ange en ny titel",
+    "temporaryChat": "Tillfällig chatt"
 }

src/assets/locale/zh/option.json

@@ -8,5 +8,6 @@
     "somethingWentWrong": "出现了错误",
     "validationSelectModel": "请选择一个模型以继续",
     "deleteHistoryConfirmation": "你确定要删除这个历史记录吗？",
-    "editHistoryTitle": "输入一个新的标题"
+    "editHistoryTitle": "输入一个新的标题",
+    "temporaryChat": "临时聊天"
 }

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>
+        <NewChat 
-          <button
+          clearChat={clearChat}
-            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>
         <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>
+  )
+}

src/components/Option/Playground/PlaygroundForm.tsx

@@ -36,7 +36,8 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
     selectedQuickPrompt,
     textareaRef,
     setSelectedQuickPrompt,
-    selectedKnowledge
+    selectedKnowledge,
+    temporaryChat
   } = useMessageOption()
 
   const isMobile = () => {
@@ -190,7 +191,10 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
   }
 
   return (
-    <div className="px-3 pt-3 md:px-4 md:pt-4 bg-gray-100 dark:bg-[#262626] border rounded-t-xl  dark:border-gray-600">
+    <div
+      className={`px-3 pt-3 md:px-4 md:pt-4 bg-gray-100 dark:bg-[#262626] border rounded-t-xl  dark:border-gray-600
+    ${temporaryChat && "!bg-gray-300 dark:!bg-black "}
+    `}>
       <div
         className={`h-full rounded-md shadow relative ${
           form.values.image.length === 0 ? "hidden" : "block"
@@ -213,7 +217,9 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
         </div>
       </div>
       <div>
-        <div className="flex rounded-t-xl bg-white dark:bg-transparent">
+        <div className={`flex rounded-t-xl bg-white dark:bg-transparent ${
+          temporaryChat && "!bg-gray-300 dark:!bg-black"
+        }`}>
           <form
             onSubmit={form.onSubmit(async (value) => {
               stopListening()
@@ -228,7 +234,10 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
                   return
                 }
               }
-              if (value.message.trim().length === 0 && value.image.length === 0) {
+              if (
+                value.message.trim().length === 0 &&
+                value.image.length === 0
+              ) {
                 return
               }
               form.reset()
@@ -288,8 +297,6 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
                   )}
                 </div>
                 <div className="flex !justify-end gap-3">
-                  
-
                   {!selectedKnowledge && (
                     <Tooltip title={t("tooltip.uploadImage")}>
                       <button

src/components/Option/Sidebar.tsx

@@ -34,7 +34,8 @@ export const Sidebar = ({ onClose }: Props) => {
     setHistoryId,
     historyId,
     clearChat,
-    setSelectedModel
+    setSelectedModel,
+    temporaryChat
   } = useMessageOption()
   const { t } = useTranslation(["option", "common"])
   const client = useQueryClient()
@@ -126,7 +127,7 @@ export const Sidebar = ({ onClose }: Props) => {
   })
 
   return (
-    <div className="overflow-y-auto z-99">
+    <div className={`overflow-y-auto z-99 ${temporaryChat ? 'pointer-events-none opacity-50' : ''}`}>
       {status === "success" && chatHistories.length === 0 && (
         <div className="flex justify-center items-center mt-20 overflow-hidden">
           <Empty description={t("common:noHistory")} />

src/hooks/useMessageOption.tsx

@@ -22,7 +22,10 @@ import { notification } from "antd"
 import { getSystemPromptForWeb } from "~/web/web"
 import { generateHistory } from "@/utils/generate-history"
 import { useTranslation } from "react-i18next"
-import { saveMessageOnError, saveMessageOnSuccess } from "./chat-helper"
+import {
+  saveMessageOnError as saveError,
+  saveMessageOnSuccess as saveSuccess
+} from "./chat-helper"
 import { usePageAssist } from "@/context"
 import { PageAssistVectorStore } from "@/libs/PageAssistVectorStore"
 import { formatDocs } from "@/chain/chat-with-x"
@@ -65,7 +68,9 @@ export const useMessageOption = () => {
     selectedSystemPrompt,
     setSelectedSystemPrompt,
     selectedKnowledge,
-    setSelectedKnowledge
+    setSelectedKnowledge,
+    temporaryChat,
+    setTemporaryChat
   } = useStoreMessageOption()
   const currentChatModelSettings = useStoreChatModelSettings()
   const [selectedModel, setSelectedModel] = useStorage("selectedModel")
@@ -123,8 +128,9 @@ export const useMessageOption = () => {
       seed: currentChatModelSettings?.seed,
       numGpu:
         currentChatModelSettings?.numGpu ?? userDefaultModelSettings?.numGpu,
-       numPredict: currentChatModelSettings?.numPredict ?? userDefaultModelSettings?.numPredict,
+      numPredict:
-
+        currentChatModelSettings?.numPredict ??
+        userDefaultModelSettings?.numPredict
     })
 
     let newMessage: Message[] = []
@@ -199,9 +205,11 @@ export const useMessageOption = () => {
             userDefaultModelSettings?.numCtx,
           seed: currentChatModelSettings?.seed,
           numGpu:
-            currentChatModelSettings?.numGpu ?? userDefaultModelSettings?.numGpu,
+            currentChatModelSettings?.numGpu ??
-       numPredict: currentChatModelSettings?.numPredict ?? userDefaultModelSettings?.numPredict,
+            userDefaultModelSettings?.numGpu,
-
+          numPredict:
+            currentChatModelSettings?.numPredict ??
+            userDefaultModelSettings?.numPredict
         })
         const response = await questionOllama.invoke(promptForQuestion)
         query = response.content.toString()
@@ -355,6 +363,22 @@ export const useMessageOption = () => {
     }
   }
 
+  const saveMessageOnSuccess = async (e: any) => {
+    if (!temporaryChat) {
+      return await saveSuccess(e)
+    }
+
+    return true
+  }
+
+  const saveMessageOnError = async (e: any) => {
+    if (!temporaryChat) {
+      return await saveError(e)
+    }
+
+    return true
+  }
+
   const normalChatMode = async (
     message: string,
     image: string,
@@ -386,7 +410,9 @@ export const useMessageOption = () => {
       seed: currentChatModelSettings?.seed,
       numGpu:
         currentChatModelSettings?.numGpu ?? userDefaultModelSettings?.numGpu,
-       numPredict: currentChatModelSettings?.numPredict ?? userDefaultModelSettings?.numPredict,
+      numPredict:
+        currentChatModelSettings?.numPredict ??
+        userDefaultModelSettings?.numPredict
     })
 
     let newMessage: Message[] = []
@@ -501,7 +527,7 @@ export const useMessageOption = () => {
                 }
               }
             }
-          ],
+          ]
         }
       )
 
@@ -622,8 +648,9 @@ export const useMessageOption = () => {
       seed: currentChatModelSettings?.seed,
       numGpu:
         currentChatModelSettings?.numGpu ?? userDefaultModelSettings?.numGpu,
-       numPredict: currentChatModelSettings?.numPredict ?? userDefaultModelSettings?.numPredict,
+      numPredict:
-
+        currentChatModelSettings?.numPredict ??
+        userDefaultModelSettings?.numPredict
     })
 
     let newMessage: Message[] = []
@@ -714,9 +741,11 @@ export const useMessageOption = () => {
             userDefaultModelSettings?.numCtx,
           seed: currentChatModelSettings?.seed,
           numGpu:
-            currentChatModelSettings?.numGpu ?? userDefaultModelSettings?.numGpu,
+            currentChatModelSettings?.numGpu ??
-       numPredict: currentChatModelSettings?.numPredict ?? userDefaultModelSettings?.numPredict,
+            userDefaultModelSettings?.numGpu,
-
+          numPredict:
+            currentChatModelSettings?.numPredict ??
+            userDefaultModelSettings?.numPredict
         })
         const response = await questionOllama.invoke(promptForQuestion)
         query = response.content.toString()
@@ -1038,6 +1067,8 @@ export const useMessageOption = () => {
     textareaRef,
     selectedKnowledge,
     setSelectedKnowledge,
-    ttsEnabled
+    ttsEnabled,
+    temporaryChat,
+    setTemporaryChat,
   }
 }

src/store/option.tsx

@@ -65,6 +65,9 @@ type State = {
 
   setSpeechToTextLanguage: (language: string) => void
   speechToTextLanguage: string
+
+  temporaryChat: boolean
+  setTemporaryChat: (temporaryChat: boolean) => void
 }
 
 export const useStoreMessageOption = create<State>((set) => ({
@@ -102,5 +105,8 @@ export const useStoreMessageOption = create<State>((set) => ({
   setSelectedQuickPrompt: (selectedQuickPrompt) => set({ selectedQuickPrompt }),
 
   selectedKnowledge: null,
-  setSelectedKnowledge: (selectedKnowledge) => set({ selectedKnowledge })
+  setSelectedKnowledge: (selectedKnowledge) => set({ selectedKnowledge }),
+
+  temporaryChat: false,
+  setTemporaryChat: (temporaryChat) => set({ temporaryChat }),
 }))