Merge branch 'ItzCrazyKns:master' into gluetun

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

@@ -1,5 +1,4 @@
 import EmptyChatMessageInput from './EmptyChatMessageInput';
-import ThemeSwitcher from './theme/Switcher';
 
 const EmptyChat = ({
   sendMessage,
@@ -12,8 +11,6 @@ const EmptyChat = ({
 }) => {
   return (
     <div className="relative">
-      <ThemeSwitcher size={17} className="absolute top-2 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/Navbar.tsx

@@ -2,7 +2,6 @@ import { Clock, Edit, Share, Trash } from 'lucide-react';
 import { Message } from './ChatWindow';
 import { useEffect, useState } from 'react';
 import { formatTimeDifference } from '@/lib/utils';
-import ThemeSwitcher from './theme/Switcher';
 
 const Navbar = ({ messages }: { messages: Message[] }) => {
   const [title, setTitle] = useState<string>('');
@@ -50,8 +49,6 @@ const Navbar = ({ messages }: { messages: Message[] }) => {
       </div>
       <p className="hidden lg:flex">{title}</p>
 
-      <ThemeSwitcher size={17} className="lg:hidden ml-auto mr-4" />
-
       <div className="flex flex-row items-center space-x-4">
         <Share
           size={17}

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/Sidebar.tsx

@@ -7,7 +7,6 @@ import { useSelectedLayoutSegments } from 'next/navigation';
 import React, { useState, type ReactNode } from 'react';
 import Layout from './Layout';
 import SettingsDialog from './SettingsDialog';
-import ThemeSwitcher from './theme/Switcher';
 
 const VerticalIconContainer = ({ children }: { children: ReactNode }) => {
   return (

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": {