Merge pull request #857 from skoved/fix-light-mode

make file icon in attachment modal in chat page fit light theme better

README.md

@@ -53,7 +53,7 @@ Want to know more about its architecture and how it works? You can read it [here
 
 ## Features
 
-- **Local LLMs**: You can make use local LLMs such as Llama3 and Mixtral using Ollama.
+- **Local LLMs**: You can utilize local LLMs such as Qwen, DeepSeek, Llama, and Mistral.
 - **Two Main Modes:**
   - **Copilot Mode:** (In development) Boosts search by generating different queries to find more relevant internet sources. Like normal search instead of just using the context by SearxNG, it visits the top matches and tries to find relevant sources to the user's query directly from the page.
   - **Normal Mode:** Processes your query and performs a web search.
@@ -87,6 +87,7 @@ There are mainly 2 ways of installing Perplexica - With Docker, Without Docker.
 4. Rename the `sample.config.toml` file to `config.toml`. For Docker setups, you need only fill in the following fields:
 
    - `OPENAI`: Your OpenAI API key. **You only need to fill this if you wish to use OpenAI's models**.
+   - `CUSTOM_OPENAI`: Your OpenAI-API-compliant local server URL, model name, and API key. You should run your local server with host set to `0.0.0.0`, take note of which port number it is running on, and then use that port number to set `API_URL = http://host.docker.internal:PORT_NUMBER`. You must specify the model name, such as `MODEL_NAME = "unsloth/DeepSeek-R1-0528-Qwen3-8B-GGUF:Q4_K_XL"`. Finally, set `API_KEY` to the appropriate value. If you have not defined an API key, just put anything you want in-between the quotation marks: `API_KEY = "whatever-you-want-but-not-blank"` **You only need to configure these settings if you want to use a local OpenAI-compliant server, such as Llama.cpp's [`llama-server`](https://github.com/ggml-org/llama.cpp/blob/master/tools/server/README.md)**.
    - `OLLAMA`: Your Ollama API URL. You should enter it as `http://host.docker.internal:PORT_NUMBER`. If you installed Ollama on port 11434, use `http://host.docker.internal:11434`. For other ports, adjust accordingly. **You need to fill this if you wish to use Ollama's models instead of OpenAI's**.
    - `GROQ`: Your Groq API key. **You only need to fill this if you wish to use Groq's hosted models**.
    - `ANTHROPIC`: Your Anthropic API key. **You only need to fill this if you wish to use Anthropic models**.
@@ -120,7 +121,17 @@ There are mainly 2 ways of installing Perplexica - With Docker, Without Docker.
 
 See the [installation documentation](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/installation) for more information like updating, etc.
 
-### Ollama Connection Errors
+### Troubleshooting
+
+#### Local OpenAI-API-Compliant Servers
+
+If Perplexica tells you that you haven't configured any chat model providers, ensure that:
+
+1. Your server is running on `0.0.0.0` (not `127.0.0.1`) and on the same port you put in the API URL.
+2. You have specified the correct model name loaded by your local LLM server.
+3. You have specified the correct API key, or if one is not defined, you have put *something* in the API key field and not left it empty.
+
+#### Ollama Connection Errors
 
 If you're encountering an Ollama connection error, it is likely due to the backend being unable to connect to Ollama's API. To fix this issue you can:
 

src/app/discover/page.tsx

@@ -91,7 +91,7 @@ const Page = () => {
                 'border-[0.1px] rounded-full text-sm px-3 py-1 text-nowrap transition duration-200 cursor-pointer',
                 activeTopic === t.key
                   ? 'text-cyan-300 bg-cyan-300/30 border-cyan-300/60'
-                  : 'border-white/30 text-white/70 hover:text-white hover:border-white/40 hover:bg-white/5',
+                  : 'border-black/30 dark:border-white/30 text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white hover:border-black/40 dark:hover:border-white/40 hover:bg-black/5 dark:hover:bg-white/5',
               )}
               onClick={() => setActiveTopic(t.key)}
             >

src/components/MessageInputActions/Attach.tsx

@@ -132,8 +132,8 @@ const Attach = ({ showText }: { showText?: boolean }) => {
                   key={i}
                   className="flex flex-row items-center justify-start w-full space-x-3 p-3"
                 >
-                  <div className="bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
-                    <File size={16} className="text-white/70" />
+                  <div className="bg-light-100 dark:bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
+                    <File size={16} className="text-black/70 dark:text-white/70" />
                   </div>
                   <p className="text-black/70 dark:text-white/70 text-sm">
                     {file.fileName.length > 25

src/components/MessageInputActions/AttachSmall.tsx

@@ -107,8 +107,8 @@ const AttachSmall = () => {
                   key={i}
                   className="flex flex-row items-center justify-start w-full space-x-3 p-3"
                 >
-                  <div className="bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
-                    <File size={16} className="text-white/70" />
+                  <div className="bg-light-100 dark:bg-dark-100 flex items-center justify-center w-10 h-10 rounded-md">
+                    <File size={16} className="text-black/70 dark:text-white/70" />
                   </div>
                   <p className="text-black/70 dark:text-white/70 text-sm">
                     {file.fileName.length > 25

src/lib/providers/index.ts

@@ -120,7 +120,11 @@ export const getAvailableChatModelProviders = async () => {
             model: new ChatOpenAI({
               apiKey: customOpenAiApiKey,
               modelName: customOpenAiModelName,
-              temperature: 0.7,
+              ...((() => {
+                const temperatureRestrictedModels = ['gpt-5-nano','gpt-5','gpt-5-mini','o1', 'o3', 'o3-mini', 'o4-mini'];
+                const isTemperatureRestricted = temperatureRestrictedModels.some(restrictedModel => customOpenAiModelName.includes(restrictedModel));
+                return isTemperatureRestricted ? {} : { temperature: 0.7 };
+              })()),
               configuration: {
                 baseURL: customOpenAiApiUrl,
               },

src/lib/providers/openai.ts

@@ -26,6 +26,10 @@ const openaiChatModels: Record<string, string>[] = [
     displayName: 'GPT-4 omni',
     key: 'gpt-4o',
   },
+  {
+    displayName: 'GPT-4o (2024-05-13)',
+    key: 'gpt-4o-2024-05-13',
+  },
   {
     displayName: 'GPT-4 omni mini',
     key: 'gpt-4o-mini',
@@ -47,12 +51,28 @@ const openaiChatModels: Record<string, string>[] = [
     key: 'gpt-5-nano',
   },
   {
-    displayName: 'GPT 5 mini',
+    displayName: 'GPT 5',
+    key: 'gpt-5',
+  },
+  {
+    displayName: 'GPT 5 Mini',
     key: 'gpt-5-mini',
   },
   {
-    displayName: 'GPT 5',
-    key: 'gpt-5',
+    displayName: 'o1',
+    key: 'o1',
+  },
+  {
+    displayName: 'o3',
+    key: 'o3',
+  },
+  {
+    displayName: 'o3 Mini',
+    key: 'o3-mini',
+  },
+  {
+    displayName: 'o4 Mini',
+    key: 'o4-mini',
   },
 ];
 
@@ -76,13 +96,23 @@ export const loadOpenAIChatModels = async () => {
     const chatModels: Record<string, ChatModel> = {};
 
     openaiChatModels.forEach((model) => {
+      // Models that only support temperature = 1
+      const temperatureRestrictedModels = ['gpt-5-nano','gpt-5','gpt-5-mini','o1', 'o3', 'o3-mini', 'o4-mini'];
+      const isTemperatureRestricted = temperatureRestrictedModels.some(restrictedModel => model.key.includes(restrictedModel));
+
+      const modelConfig: any = {
+        apiKey: openaiApiKey,
+        modelName: model.key,
+      };
+
+      // Only add temperature if the model supports it
+      if (!isTemperatureRestricted) {
+        modelConfig.temperature = 0.7;
+      }
+
       chatModels[model.key] = {
         displayName: model.displayName,
-        model: new ChatOpenAI({
-          apiKey: openaiApiKey,
-          modelName: model.key,
-          temperature: model.key.includes('gpt-5') ? 1 : 0.7,
-        }) as unknown as BaseChatModel,
+        model: new ChatOpenAI(modelConfig) as unknown as BaseChatModel,
       };
     });