feat: Add temporaryChat prop to multiple components for improved chat functionality

Author: n4ze3m

src/components/Common/Playground/Message.tsx

@@ -59,6 +59,7 @@ type Props = {
   documents?: ChatDocuments
   actionInfo?: string | null
   onNewBranch?: () => void
+  temporaryChat?: boolean
 }
 
 export const PlaygroundMessage = (props: Props) => {
@@ -411,7 +412,7 @@ export const PlaygroundMessage = (props: Props) => {
                     </Tooltip>
                   )}
 
-                  {props?.onNewBranch && (
+                  {props?.onNewBranch && !props?.temporaryChat && (
                     <Tooltip title={t("newBranch")}>
                       <button
                         aria-label={t("newBranch")}

src/components/Layouts/Header.tsx

@@ -59,7 +59,7 @@ export const Header: React.FC<Props> = ({
     queryKey: ["fetchModel"],
     queryFn: () => fetchChatModels({ returnEmpty: true }),
     refetchIntervalInBackground: false,
-    staleTime: 1000 * 60 *1, 
+    staleTime: 1000 * 60 * 1
   })
 
   const { data: prompts, isLoading: isPromptLoading } = useQuery({
@@ -90,9 +90,8 @@ export const Header: React.FC<Props> = ({
 
   return (
     <div
-      className={`absolute top-0 z-10 flex h-14 w-full flex-row items-center justify-center p-3 overflow-x-auto lg:overflow-x-visible bg-gray-50 border-b  dark:bg-[#171717] dark:border-gray-600 ${
-        temporaryChat && "!bg-gray-200 dark:!bg-black"
-      }`}>
+      data-istemporary-chat={temporaryChat}
+      className={`absolute top-0 z-10 flex h-14 w-full flex-row items-center justify-center p-3 overflow-x-auto lg:overflow-x-visible bg-gray-50 border-b  dark:bg-[#171717] dark:border-gray-600 data-[istemporary-chat='true']:bg-gray-200 data-[istemporary-chat='true']:dark:bg-black`}>
       <div className="flex gap-2 items-center">
         {pathname !== "/" && (
           <div>

src/components/Layouts/NewChat.tsx

@@ -31,7 +31,7 @@ export const NewChat: React.FC<Props> = ({ clearChat }) => {
             }
           }}
           className="inline-flex dark:bg-transparent bg-white items-center rounded-lg border-s-0 rounded-s-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 data-[istemporary-chat='true']:bg-gray-100 data-[istemporary-chat='true']:dark:bg-gray-800">
-          <BsIncognito className="size-4 sm:size-5 text-gray-600 dark:text-gray-300" />
+          <BsIncognito className="size-4 sm:size-5 text-gray-500 dark:text-gray-400" />
         </button>
       </Tooltip>
       {/* </Dropdown> */}

src/components/Option/Playground/PlaygroundChat.tsx

@@ -15,7 +15,8 @@ export const PlaygroundChat = () => {
     ttsEnabled,
     onSubmit,
     actionInfo,
-    createChatBranch
+    createChatBranch,
+    temporaryChat
   } = useMessageOption()
   const [isSourceOpen, setIsSourceOpen] = React.useState(false)
   const [source, setSource] = React.useState<any>(null)
@@ -59,6 +60,7 @@ export const PlaygroundChat = () => {
             openReasoning={openReasoning}
             modelImage={message?.modelImage}
             modelName={message?.modelName}
+            temporaryChat={temporaryChat}  
             onContinue={() => {
               onSubmit({
                 image: "",

src/components/Sidepanel/Chat/body.tsx

@@ -12,7 +12,8 @@ export const SidePanelBody = () => {
     regenerateLastMessage,
     editMessage,
     isSearchingInternet, 
-    createChatBranch
+    createChatBranch,
+    temporaryChat
   } = useMessage()
   const [isSourceOpen, setIsSourceOpen] = React.useState(false)
   const [source, setSource] = React.useState<any>(null)
@@ -52,6 +53,7 @@ export const SidePanelBody = () => {
             reasoningTimeTaken={message?.reasoning_time_taken}
             modelImage={message?.modelImage}
             modelName={message?.modelName}
+            temporaryChat={temporaryChat}
           />
         ))}
       </div>