Merge branch 'master' into pr/settings

README.md

@@ -10,7 +10,7 @@
 - [Installation](#installation)
   - [Getting Started with Docker (Recommended)](#getting-started-with-docker-recommended)
   - [Non-Docker Installation](#non-docker-installation)
-  - [Ollama connection errors](#ollama-connection-errors)
+  - [Ollama Connection Errors](#ollama-connection-errors)
 - [Using as a Search Engine](#using-as-a-search-engine)
 - [One-Click Deployment](#one-click-deployment)
 - [Upcoming Features](#upcoming-features)
@@ -95,15 +95,26 @@ 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 exposing it your network, etc.
 
-### Ollama connection errors
+### Ollama Connection Errors
 
-If you're facing an Ollama connection error, it is often related to the backend not being able to connect to Ollama's API. How can you fix it? You can fix it by updating your Ollama API URL in the settings menu to the following:
+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:
 
-On Windows: `http://host.docker.internal:11434`<br>
-On Mac: `http://host.docker.internal:11434`<br>
-On Linux: `http://private_ip_of_computer_hosting_ollama:11434`
+1. **Check your Ollama API URL:** Ensure that the API URL is correctly set in the settings menu.
+2. **Update API URL Based on OS:**
+   - **Windows:** Use `http://host.docker.internal:11434`
+   - **Mac:** Use `http://host.docker.internal:11434`
+   - **Linux:** Use `http://<private_ip_of_host>:11434`
 
-You need to edit the ports accordingly.
+   Adjust the port number if you're using a different one.
+
+3. **Linux Users - Expose Ollama to Network:**
+   - Serve Ollama over your network with the command:
+
+     ```bash
+     OLLAMA_HOST=0.0.0.0 ollama serve
+     ```
+
+   - Ensure that the port (default is 11434) is not blocked by your firewall.
 
 ## Using as a Search Engine
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "perplexica-backend",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "license": "MIT",
   "author": "ItzCrazyKns",
   "scripts": {

ui/components/EmptyChat.tsx

@@ -13,7 +13,6 @@ const EmptyChat = ({
   return (
     <div className="relative">
       <SettingsEntry className="absolute top-4 right-0 lg:hidden" />
-
       <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
         <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
           Research begins here.

ui/components/EmptyChatMessageInput.tsx

@@ -1,5 +1,5 @@
 import { ArrowRight } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import CopilotToggle from './MessageInputActions/Copilot';
 import Focus from './MessageInputActions/Focus';
@@ -16,6 +16,23 @@ const EmptyChatMessageInput = ({
   const [copilotEnabled, setCopilotEnabled] = useState(false);
   const [message, setMessage] = useState('');
 
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === '/') {
+      e.preventDefault();
+      inputRef.current?.focus();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   return (
     <form
       onSubmit={(e) => {
@@ -34,6 +51,7 @@ const EmptyChatMessageInput = ({
     >
       <div className="flex flex-col bg-light-secondary dark:bg-dark-secondary px-5 pt-5 pb-2 rounded-lg w-full border border-light-200 dark:border-dark-200">
         <TextareaAutosize
+          ref={inputRef}
           value={message}
           onChange={(e) => setMessage(e.target.value)}
           minRows={2}

ui/components/MessageBox.tsx

@@ -7,7 +7,6 @@ import { cn } from '@/lib/utils';
 import {
   BookCopy,
   Disc3,
-  Share,
   Volume2,
   StopCircle,
   Layers3,

ui/components/MessageInput.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@/lib/utils';
 import { ArrowUp } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import Attach from './MessageInputActions/Attach';
 import CopilotToggle from './MessageInputActions/Copilot';
@@ -25,6 +25,23 @@ const MessageInput = ({
     }
   }, [textareaRows, mode, message]);
 
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === '/') {
+      e.preventDefault();
+      inputRef.current?.focus();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   return (
     <form
       onSubmit={(e) => {
@@ -47,6 +64,7 @@ const MessageInput = ({
     >
       {mode === 'single' && <Attach />}
       <TextareaAutosize
+        ref={inputRef}
         value={message}
         onChange={(e) => setMessage(e.target.value)}
         onHeightChange={(height, props) => {

ui/components/SettingsDialog.tsx

@@ -4,7 +4,6 @@ import { CloudUpload, RefreshCcw, RefreshCw } from 'lucide-react';
 import React, {
   Fragment,
   useEffect,
-  useMemo,
   useState,
   type SelectHTMLAttributes,
 } from 'react';

ui/components/theme/Switcher.tsx

@@ -2,7 +2,6 @@
 import { useTheme } from 'next-themes';
 import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
-import { cn } from '@/lib/utils';
 import { Select } from '../SettingsDialog';
 
 type Theme = 'dark' | 'light' | 'system';
@@ -53,7 +52,7 @@ const ThemeSwitcher = ({ className }: { className?: string }) => {
       onChange={(e) => handleThemeSwitch(e.target.value as Theme)}
       options={[
         { value: 'light', label: 'Light' },
-        { value: 'dark', label: 'Dark' }
+        { value: 'dark', label: 'Dark' },
       ]}
     />
   );

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perplexica-frontend",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "license": "MIT",
   "author": "ItzCrazyKns",
   "scripts": {