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.
2024-11-09 19:10:34 +05:30 · 2024-11-09 19:10:34 +05:30 · f8791a0707
commit f8791a0707
parent 8fbdfc35d3
21 changed files with 167 additions and 52 deletions
--- a/src/assets/locale/da/option.json
+++ b/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"
 }
--- a/src/assets/locale/de/option.json
+++ b/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"
 }
--- a/src/assets/locale/en/option.json
+++ b/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"
 }
--- a/src/assets/locale/es/option.json
+++ b/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"
 }
--- a/src/assets/locale/fa/option.json
+++ b/src/assets/locale/fa/option.json
@ -8,5 +8,6 @@
    "somethingWentWrong": "مشکلی پیش آمد",
    "validationSelectModel": "لطفا یک مدل را برای ادامه انتخاب کنید",
    "deleteHistoryConfirmation": "آیا مطمئن هستید که می خواهید این تاریخچه را حذف کنید؟",
-    "editHistoryTitle": "یک عنوان جدید وارد کنید"
+    "editHistoryTitle": "یک عنوان جدید وارد کنید",
+    "temporaryChat": "گپ موقت"
 }
--- a/src/assets/locale/fr/option.json
+++ b/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"
 }
--- a/src/assets/locale/it/option.json
+++ b/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"
 }
--- a/src/assets/locale/ja-JP/option.json
+++ b/src/assets/locale/ja-JP/option.json
@ -8,5 +8,6 @@
    "somethingWentWrong": "何かが間違っています",
    "validationSelectModel": "続行するにはモデルを選択してください",
    "deleteHistoryConfirmation": "この履歴を削除しますか?",
-    "editHistoryTitle": "新しいタイトルを入力"
+    "editHistoryTitle": "新しいタイトルを入力",
+    "temporaryChat": "一時的なチャット"
  }
--- a/src/assets/locale/ko/option.json
+++ b/src/assets/locale/ko/option.json
@ -8,5 +8,6 @@
    "somethingWentWrong": "문제가 발생했습니다",
    "validationSelectModel": "계속하려면 모델을 선택하세요",
    "deleteHistoryConfirmation": "이 기록을 삭제하시겠습니까?",
-    "editHistoryTitle": "새 제목 입력"
+    "editHistoryTitle": "새 제목 입력",
+    "temporaryChat": "임시 채팅"
 }
--- a/src/assets/locale/ml/option.json
+++ b/src/assets/locale/ml/option.json
@ -8,5 +8,6 @@
    "somethingWentWrong": "എന്തോ തെറ്റായി",
    "deleteHistoryConfirmation": "നിങ്ങളുടെ ചാറ്റ് ചരിത്രം ഇല്ലാതാക്കണമെന്ന് തീർച്ചയാണോ?",
    "editHistoryTitle": "ചാറ്റ് title എഡിറ്റുചെയ്യുക",
-    "validationSelectModel": "തുടരുന്നതിന് ഒരു മോഡല്‍ തിരഞ്ഞെടുക്കുക"
+    "validationSelectModel": "തുടരുന്നതിന് ഒരു മോഡല്‍ തിരഞ്ഞെടുക്കുക",
+    "temporaryChat": "താൽക്കാലിക ചാറ്റ്"
 }
--- a/src/assets/locale/no/option.json
+++ b/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"
 }
--- a/src/assets/locale/pt-BR/option.json
+++ b/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"
 }
--- a/src/assets/locale/ru/option.json
+++ b/src/assets/locale/ru/option.json
@ -8,5 +8,6 @@
    "somethingWentWrong": "Что-то пошло не так",
    "validationSelectModel": "Пожалуйста, выберите модель, чтобы продолжить",
    "deleteHistoryConfirmation": "Вы уверены, что хотите удалить эту историю?",
-    "editHistoryTitle": "Введите новое название"
+    "editHistoryTitle": "Введите новое название",
+    "temporaryChat": "Временный чат"
 }
--- a/src/assets/locale/sv/option.json
+++ b/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"
 }
--- a/src/assets/locale/zh/option.json
+++ b/src/assets/locale/zh/option.json
@ -8,5 +8,6 @@
    "somethingWentWrong": "出现了错误",
    "validationSelectModel": "请选择一个模型以继续",
    "deleteHistoryConfirmation": "你确定要删除这个历史记录吗？",
-    "editHistoryTitle": "输入一个新的标题"
+    "editHistoryTitle": "输入一个新的标题",
+    "temporaryChat": "临时聊天"
 }
--- a/src/components/Layouts/Header.tsx
+++ b/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>
--- a/src/components/Layouts/NewChat.tsx
+++ b/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>
+  )
+}
--- a/src/components/Option/Playground/PlaygroundForm.tsx
+++ b/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
--- a/src/components/Option/Sidebar.tsx
+++ b/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")} />
--- a/src/hooks/useMessageOption.tsx
+++ b/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,
-       numPredict: currentChatModelSettings?.numPredict ?? userDefaultModelSettings?.numPredict,
-
+            currentChatModelSettings?.numGpu ??
+            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,
-       numPredict: currentChatModelSettings?.numPredict ?? userDefaultModelSettings?.numPredict,
-
+            currentChatModelSettings?.numGpu ??
+            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,
  }
 }
--- a/src/store/option.tsx
+++ b/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 }),
 }))