Merge pull request #934 from PSYEONE/no-ads

Added ability to remove the widgets in the front empty page of the search. Specifically the Weather and News widget.

README.md

@@ -49,10 +49,29 @@ Perplexica's development is powered by the generous support of our sponsors. The
   <img alt="Warp Terminal" src=".assets/sponsers/warp.png" width="100%">
 </a>
 
-**[Warp](https://www.warp.dev/perplexica)** - The AI-powered terminal revolutionizing development workflows
+### **✨ [Try Warp - The AI-Powered Terminal →](https://www.warp.dev/perplexica)**
+
+Warp is revolutionizing development workflows with AI-powered features, modern UX, and blazing-fast performance. Used by developers at top companies worldwide.
 
 </div>
 
+---
+
+We'd also like to thank the following partners for their generous support:
+
+<table>
+  <tr>
+    <td width="100" align="center">
+      <a href="https://dashboard.exa.ai" target="_blank">
+        <img src=".assets/sponsers/exa.png" alt="Exa" width="80" height="80" style="border-radius: .75rem;" />
+      </a>
+    </td>
+    <td>
+      <a href="https://dashboard.exa.ai">Exa</a> • The Perfect Web Search API for LLMs - web search, crawling, deep research, and answer APIs
+    </td>
+  </tr>
+</table>
+
 ## Installation
 
 There are mainly 2 ways of installing Perplexica - With Docker, Without Docker. Using Docker is highly recommended.

src/components/EmptyChat.tsx

@@ -1,3 +1,6 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import { Settings } from 'lucide-react';
 import EmptyChatMessageInput from './EmptyChatMessageInput';
 import { File } from './ChatWindow';
@@ -5,8 +8,39 @@ import Link from 'next/link';
 import WeatherWidget from './WeatherWidget';
 import NewsArticleWidget from './NewsArticleWidget';
 import SettingsButtonMobile from '@/components/Settings/SettingsButtonMobile';
+import {
+  getShowNewsWidget,
+  getShowWeatherWidget,
+} from '@/lib/config/clientRegistry';
 
 const EmptyChat = () => {
+  const [showWeather, setShowWeather] = useState(() =>
+    typeof window !== 'undefined' ? getShowWeatherWidget() : true,
+  );
+  const [showNews, setShowNews] = useState(() =>
+    typeof window !== 'undefined' ? getShowNewsWidget() : true,
+  );
+
+  useEffect(() => {
+    const updateWidgetVisibility = () => {
+      setShowWeather(getShowWeatherWidget());
+      setShowNews(getShowNewsWidget());
+    };
+
+    updateWidgetVisibility();
+
+    window.addEventListener('client-config-changed', updateWidgetVisibility);
+    window.addEventListener('storage', updateWidgetVisibility);
+
+    return () => {
+      window.removeEventListener(
+        'client-config-changed',
+        updateWidgetVisibility,
+      );
+      window.removeEventListener('storage', updateWidgetVisibility);
+    };
+  }, []);
+
   return (
     <div className="relative">
       <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
@@ -19,14 +53,20 @@ const EmptyChat = () => {
           </h2>
           <EmptyChatMessageInput />
         </div>
-        <div className="flex flex-col w-full gap-4 mt-2 sm:flex-row sm:justify-center">
+        {(showWeather || showNews) && (
-          <div className="flex-1 w-full">
+          <div className="flex flex-col w-full gap-4 mt-2 sm:flex-row sm:justify-center">
-            <WeatherWidget />
+            {showWeather && (
+              <div className="flex-1 w-full">
+                <WeatherWidget />
+              </div>
+            )}
+            {showNews && (
+              <div className="flex-1 w-full">
+                <NewsArticleWidget />
+              </div>
+            )}
           </div>
-          <div className="flex-1 w-full">
+        )}
-            <NewsArticleWidget />
-          </div>
-        </div>
       </div>
     </div>
   );

src/components/Settings/SettingsField.tsx

@@ -12,6 +12,12 @@ import { useTheme } from 'next-themes';
 import { Loader2 } from 'lucide-react';
 import { Switch } from '@headlessui/react';
 
+const emitClientConfigChanged = () => {
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(new Event('client-config-changed'));
+  }
+};
+
 const SettingsSelect = ({
   field,
   value,
@@ -35,6 +41,7 @@ const SettingsSelect = ({
         if (field.key === 'theme') {
           setTheme(newValue);
         }
+        emitClientConfigChanged();
       } else {
         const res = await fetch('/api/config', {
           method: 'POST',
@@ -106,6 +113,7 @@ const SettingsInput = ({
     try {
       if (field.scope === 'client') {
         localStorage.setItem(field.key, newValue);
+        emitClientConfigChanged();
       } else {
         const res = await fetch('/api/config', {
           method: 'POST',
@@ -182,6 +190,7 @@ const SettingsTextarea = ({
     try {
       if (field.scope === 'client') {
         localStorage.setItem(field.key, newValue);
+        emitClientConfigChanged();
       } else {
         const res = await fetch('/api/config', {
           method: 'POST',
@@ -258,6 +267,7 @@ const SettingsSwitch = ({
     try {
       if (field.scope === 'client') {
         localStorage.setItem(field.key, String(newValue));
+        emitClientConfigChanged();
       } else {
         const res = await fetch('/api/config', {
           method: 'POST',

src/lib/config/clientRegistry.ts

@@ -11,3 +11,9 @@ export const getAutoMediaSearch = () =>
 
 export const getSystemInstructions = () =>
   getClientConfig('systemInstructions', '');
+
+export const getShowWeatherWidget = () =>
+  getClientConfig('showWeatherWidget', 'true') === 'true';
+
+export const getShowNewsWidget = () =>
+  getClientConfig('showNewsWidget', 'true') === 'true';

src/lib/config/index.ts

@@ -69,6 +69,24 @@ class ConfigManager {
         default: true,
         scope: 'client',
       },
+      {
+        name: 'Show weather widget',
+        key: 'showWeatherWidget',
+        type: 'switch',
+        required: false,
+        description: 'Display the weather card on the home screen.',
+        default: true,
+        scope: 'client',
+      },
+      {
+        name: 'Show news widget',
+        key: 'showNewsWidget',
+        type: 'switch',
+        required: false,
+        description: 'Display the recent news card on the home screen.',
+        default: true,
+        scope: 'client',
+      },
     ],
     personalization: [
       {