Fix: Improve settings layout and models refresh

Refine settings layout for better visual flow, enlarge settings sidebar for easier viewing, and adjust model refresh logic for more responsive updates.

Refactor: Add more visual weight to the settings panel and optimize model refresh logic.

Refactor: Enhance the visual appeal of settings panel by increasing its width and improving model refresh behavior for better user experience.

src/components/Layouts/Header.tsx

@@ -54,7 +54,9 @@ export const Header: React.FC<Props> = ({
   } = useQuery({
     queryKey: ["fetchModel"],
     queryFn: () => fetchChatModels({ returnEmpty: true }),
-    refetchInterval: 15000
+    refetchInterval: 15_000,
+    refetchIntervalInBackground: true,
+    placeholderData: (prev) => prev
   })
 
   const { data: prompts, isLoading: isPromptLoading } = useQuery({
@@ -121,7 +123,7 @@ export const Header: React.FC<Props> = ({
               localStorage.setItem("selectedModel", e)
             }}
             size="large"
-            loading={isModelsLoading || isModelsFetching}
+            loading={isModelsLoading}
             filterOption={(input, option) =>
               option.label.key.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }
@@ -205,9 +207,9 @@ export const Header: React.FC<Props> = ({
             {pathname === "/" &&
               messages.length > 0 &&
               !streaming &&
-              shareModeEnabled && <ShareBtn
+              shareModeEnabled && (
-              historyId={historyId}
+                <ShareBtn historyId={historyId} messages={messages} />
-              messages={messages} />}
+              )}
             <Tooltip title={t("githubRepository")}>
               <a
                 href="https://github.com/n4ze3m/page-assist"

src/components/Layouts/SettingsOptionLayout.tsx

@@ -58,7 +58,7 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <div className="mx-auto max-w-7xl lg:flex lg:gap-x-16 lg:px-8">
-        <aside className="flex lg:rounded-md bg-white lg:p-4 lg:mt-20 overflow-x-auto lg:border-0 border-b  py-4 lg:block lg:w-72 lg:flex-none  dark:bg-[#171717] dark:border-gray-600">
+        <aside className="flex lg:rounded-md bg-white lg:p-4 lg:mt-20 overflow-x-auto lg:border-0 border-b  py-4 lg:block lg:w-80 lg:flex-none  dark:bg-[#171717] dark:border-gray-600">
           <nav className="flex-none  px-4 sm:px-6 lg:px-0">
             <ul
               role="list"