From 2ae5846b3d016387c4b8a72fce40a68917e0c342 Mon Sep 17 00:00:00 2001 From: WanQuanXie <i2cherry941219@gmail.com> Date: Mon, 3 Jun 2024 18:54:12 +0800 Subject: [PATCH 1/5] fix(ui): ui compile fail remove both of them, a new feature is coming soon - mobile device support setting navbar --- ui/components/EmptyChat.tsx | 2 -- ui/components/Navbar.tsx | 2 -- 2 files changed, 4 deletions(-) diff --git a/ui/components/EmptyChat.tsx b/ui/components/EmptyChat.tsx index 2aade48..1efedf8 100644 --- a/ui/components/EmptyChat.tsx +++ b/ui/components/EmptyChat.tsx @@ -12,8 +12,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. diff --git a/ui/components/Navbar.tsx b/ui/components/Navbar.tsx index 0123267..9f3da92 100644 --- a/ui/components/Navbar.tsx +++ b/ui/components/Navbar.tsx @@ -50,8 +50,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} From 594106aea3c6e7b0d40c0c255e2c036859ba86e9 Mon Sep 17 00:00:00 2001 From: WanQuanXie <i2cherry941219@gmail.com> Date: Fri, 7 Jun 2024 16:39:14 +0800 Subject: [PATCH 2/5] update(ui): remove useless imports --- ui/components/EmptyChat.tsx | 1 - ui/components/MessageBox.tsx | 1 - ui/components/Navbar.tsx | 1 - ui/components/SettingsDialog.tsx | 1 - ui/components/Sidebar.tsx | 1 - ui/components/theme/Switcher.tsx | 3 +-- 6 files changed, 1 insertion(+), 7 deletions(-) diff --git a/ui/components/EmptyChat.tsx b/ui/components/EmptyChat.tsx index 1efedf8..ea3642b 100644 --- a/ui/components/EmptyChat.tsx +++ b/ui/components/EmptyChat.tsx @@ -1,5 +1,4 @@ import EmptyChatMessageInput from './EmptyChatMessageInput'; -import ThemeSwitcher from './theme/Switcher'; const EmptyChat = ({ sendMessage, diff --git a/ui/components/MessageBox.tsx b/ui/components/MessageBox.tsx index 89c6761..1dce2d0 100644 --- a/ui/components/MessageBox.tsx +++ b/ui/components/MessageBox.tsx @@ -7,7 +7,6 @@ import { cn } from '@/lib/utils'; import { BookCopy, Disc3, - Share, Volume2, StopCircle, Layers3, diff --git a/ui/components/Navbar.tsx b/ui/components/Navbar.tsx index 9f3da92..020dfb4 100644 --- a/ui/components/Navbar.tsx +++ b/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>(''); diff --git a/ui/components/SettingsDialog.tsx b/ui/components/SettingsDialog.tsx index e932cee..d6ee18d 100644 --- a/ui/components/SettingsDialog.tsx +++ b/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'; diff --git a/ui/components/Sidebar.tsx b/ui/components/Sidebar.tsx index 7b3e971..ed8953e 100644 --- a/ui/components/Sidebar.tsx +++ b/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 ( diff --git a/ui/components/theme/Switcher.tsx b/ui/components/theme/Switcher.tsx index 22e2ecc..43bbdc8 100644 --- a/ui/components/theme/Switcher.tsx +++ b/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' }, ]} /> ); From 87cc86d406a7659bda1f6d62f7c955ac411139d5 Mon Sep 17 00:00:00 2001 From: ItzCrazyKns <kushagra20103@gmail.com> Date: Sun, 23 Jun 2024 09:55:25 +0530 Subject: [PATCH 3/5] feat(package): bump version --- package.json | 2 +- ui/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 431155e..ce5f0eb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "perplexica-backend", - "version": "1.6.0", + "version": "1.6.1", "license": "MIT", "author": "ItzCrazyKns", "scripts": { diff --git a/ui/package.json b/ui/package.json index 7489eea..430ad2d 100644 --- a/ui/package.json +++ b/ui/package.json @@ -1,6 +1,6 @@ { "name": "perplexica-frontend", - "version": "1.6.0", + "version": "1.6.1", "license": "MIT", "author": "ItzCrazyKns", "scripts": { From 9a96fd4788e5bfaa15f74ac5e42184184364c4c1 Mon Sep 17 00:00:00 2001 From: ItzCrazyKns <kushagra20103@gmail.com> Date: Sun, 23 Jun 2024 10:46:22 +0530 Subject: [PATCH 4/5] feat(message-input): focus on `/` key --- ui/components/EmptyChatMessageInput.tsx | 20 +++++++++++++++++++- ui/components/MessageInput.tsx | 20 +++++++++++++++++++- 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/ui/components/EmptyChatMessageInput.tsx b/ui/components/EmptyChatMessageInput.tsx index 37ecc8f..0ff9b2e 100644 --- a/ui/components/EmptyChatMessageInput.tsx +++ b/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} diff --git a/ui/components/MessageInput.tsx b/ui/components/MessageInput.tsx index 7b54ea5..2229cdf 100644 --- a/ui/components/MessageInput.tsx +++ b/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) => { From 336ceefe2b4c8e5c27cd1cbe4daaf38788ebf790 Mon Sep 17 00:00:00 2001 From: ItzCrazyKns <kushagra20103@gmail.com> Date: Sun, 23 Jun 2024 14:36:15 +0530 Subject: [PATCH 5/5] feat(readme): update connection error docs --- README.md | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 0cf197b..77c964f 100644 --- a/README.md +++ b/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