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>
   )
-}
+}