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/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
@@ -411,4 +418,4 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
       </div>
     </div>
   )
-}
+}

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")} />
@@ -244,4 +245,4 @@ export const Sidebar = ({ onClose }: Props) => {
       )}
     </div>
   )
-}
+}