From 01fc683d321fd1d338e50d865d7198c44a0bc455 Mon Sep 17 00:00:00 2001 From: WanQuanXie Date: Tue, 7 May 2024 06:35:39 +0800 Subject: [PATCH 001/406] fix(SettingDialog): use `value` instead of `selected` props in { setSelectedChatModelProvider(e.target.value); setSelectedChatModel( @@ -180,13 +181,7 @@ const SettingsDialog = ({ > {Object.keys(config.chatModelProviders).map( (provider) => ( - @@ -200,6 +195,7 @@ const SettingsDialog = ({

Chat Model

{ setSelectedEmbeddingModelProvider(e.target.value); setSelectedEmbeddingModel( @@ -297,13 +290,7 @@ const SettingsDialog = ({ > {Object.keys(config.embeddingModelProviders).map( (provider) => ( - @@ -316,6 +303,7 @@ const SettingsDialog = ({

Embedding Model

{Object.keys(config.chatModelProviders).map( (provider) => ( @@ -193,13 +193,15 @@ const SettingsDialog = ({ {selectedChatModelProvider && selectedChatModelProvider != 'custom_openai' && (
-

Chat Model

+

+ Chat Model +

setSelectedChatModel(e.target.value) } - className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm" + className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm" />
-

+

Custom OpenAI API Key

setCustomOpenAIApiKey(e.target.value) } - className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm" + className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm" />
-

+

Custom OpenAI Base URL

setCustomOpenAIBaseURL(e.target.value) } - className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm" + className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm" />
@@ -275,7 +279,7 @@ const SettingsDialog = ({ {/* Embedding models */} {config.embeddingModelProviders && (
-

+

Embedding model Provider

setSelectedEmbeddingModel(e.target.value) } - className="bg-[#111111] px-3 py-2 flex items-center overflow-hidden border border-[#1C1C1C] text-white rounded-lg text-sm" + className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm" > {config.embeddingModelProviders[ selectedEmbeddingModelProvider @@ -336,7 +342,9 @@ const SettingsDialog = ({
)}
-

OpenAI API Key

+

+ OpenAI API Key +

-

Ollama API URL

+

+ Ollama API URL +

-

GROQ API Key

+

+ GROQ API Key +

)} {isLoading && ( -
+
)}
-

+

We'll refresh the page after updating the settings.

+ ); +} const Sidebar = ({ children }: { children: React.ReactNode }) => { const segments = useSelectedLayoutSegments(); @@ -38,31 +45,39 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => { return (
-
+
- + -
+ {navLinks.map((link, i) => ( {link.active && ( -
+
)} ))} -
- setIsSettingsOpen(!isSettingsOpen)} - className="text-white cursor-pointer" - /> + + + + + + setIsSettingsOpen(!isSettingsOpen)} + className="cursor-pointer" + /> + + {
-
+
{navLinks.map((link, i) => ( Date: Fri, 24 May 2024 21:58:14 +0800 Subject: [PATCH 041/406] refactor(SettingDialog): extract reduplicate code to common component DO NOT REPEAT YOURSELF! --- ui/components/SettingsDialog.tsx | 213 ++++++++++++++++++------------- 1 file changed, 127 insertions(+), 86 deletions(-) diff --git a/ui/components/SettingsDialog.tsx b/ui/components/SettingsDialog.tsx index 1942179..4d80b9c 100644 --- a/ui/components/SettingsDialog.tsx +++ b/ui/components/SettingsDialog.tsx @@ -1,6 +1,51 @@ +import { cn } from '@/lib/utils'; import { Dialog, Transition } from '@headlessui/react'; import { CloudUpload, RefreshCcw, RefreshCw } from 'lucide-react'; -import React, { Fragment, useEffect, useState } from 'react'; +import React, { + Fragment, + useEffect, + useMemo, + useState, + type SelectHTMLAttributes, +} from 'react'; + +interface InputProps extends React.InputHTMLAttributes {} + +function Input({ className, ...restProps }: InputProps) { + return ( + + ); +} + +interface SelectProps extends SelectHTMLAttributes { + options: { value: string; label: string; disabled?: boolean }[]; +} + +function Select({ className, options, ...restProps }: SelectProps) { + return ( + + ); +} interface SettingsType { chatModelProviders: { @@ -169,7 +214,7 @@ const SettingsDialog = ({

Chat model Provider

- + />
)} {selectedChatModelProvider && @@ -196,37 +239,40 @@ const SettingsDialog = ({

Chat Model

- + ]; + + return chatModelProvider + ? chatModelProvider.length > 0 + ? chatModelProvider.map((model) => ({ + value: model, + label: model, + })) + : [ + { + value: '', + label: 'No models available', + disabled: true, + }, + ] + : [ + { + value: '', + label: + 'Invalid provider, please check backend logs', + disabled: true, + }, + ]; + })()} + />
)} {selectedChatModelProvider && @@ -236,42 +282,39 @@ const SettingsDialog = ({

Model name

- setSelectedChatModel(e.target.value) } - className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm" />

Custom OpenAI API Key

- setCustomOpenAIApiKey(e.target.value) } - className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm" />

Custom OpenAI Base URL

- setCustomOpenAIBaseURL(e.target.value) } - className="bg-primaryLight dark:bg-primaryDark px-3 py-2 flex items-center overflow-hidden border border-light dark:border-dark dark:text-white rounded-lg text-sm" />
@@ -282,7 +325,7 @@ const SettingsDialog = ({

Embedding model Provider

- + options={Object.keys( + config.embeddingModelProviders, + ).map((provider) => ({ + label: + provider.charAt(0).toUpperCase() + + provider.slice(1), + value: provider, + }))} + />
)} {selectedEmbeddingModelProvider && ( @@ -308,44 +349,47 @@ const SettingsDialog = ({

Embedding Model

- + ]; + + return embeddingModelProvider + ? embeddingModelProvider.length > 0 + ? embeddingModelProvider.map((model) => ({ + label: model, + value: model, + })) + : [ + { + label: 'No embedding models available', + value: '', + disabled: true, + }, + ] + : [ + { + label: + 'Invalid provider, please check backend logs', + value: '', + disabled: true, + }, + ]; + })()} + />
)}

OpenAI API Key

-

Ollama API URL

-

GROQ API Key

-
From 89c30530bc44013d6c7d088f8a7011c11c4c450c Mon Sep 17 00:00:00 2001 From: WanQuanXie Date: Fri, 24 May 2024 22:08:47 +0800 Subject: [PATCH 042/406] update(Navbar): update Navbar light mode background --- ui/components/Navbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/Navbar.tsx b/ui/components/Navbar.tsx index c07d6fd..f95a455 100644 --- a/ui/components/Navbar.tsx +++ b/ui/components/Navbar.tsx @@ -38,7 +38,7 @@ const Navbar = ({ messages }: { messages: Message[] }) => { }, []); return ( -
+
Date: Fri, 24 May 2024 22:41:06 +0800 Subject: [PATCH 043/406] update(SearchVideos): video cover label style adapt light mode --- ui/components/SearchVideos.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/SearchVideos.tsx b/ui/components/SearchVideos.tsx index 05c3180..eaad078 100644 --- a/ui/components/SearchVideos.tsx +++ b/ui/components/SearchVideos.tsx @@ -118,7 +118,7 @@ const Searchvideos = ({ alt={video.title} className="relative h-full w-full aspect-video object-cover rounded-lg" /> -
+

Video

From 382fa295e57593fb80b9371af47dbd1e9abfecee Mon Sep 17 00:00:00 2001 From: Devin Stokes Date: Fri, 24 May 2024 08:19:15 -0700 Subject: [PATCH 044/406] fix: add extra_hosts to docker-compose.yaml to allow connection to ollama --- docker-compose.yaml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docker-compose.yaml b/docker-compose.yaml index ac83575..d8e1047 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -18,6 +18,8 @@ services: - searxng ports: - 3001:3001 + extra_hosts: + - "host.docker.internal:host-gateway" networks: - perplexica-network @@ -32,6 +34,8 @@ services: - perplexica-backend ports: - 3000:3000 + extra_hosts: + - "host.docker.internal:host-gateway" networks: - perplexica-network From c97a4347230f505a68339d0c08d13baf2cf67696 Mon Sep 17 00:00:00 2001 From: WanQuanXie Date: Sat, 25 May 2024 06:57:24 +0800 Subject: [PATCH 045/406] fix(ui): hover style class uses --- ui/components/MessageActions/Rewrite.tsx | 2 +- ui/components/MessageBox.tsx | 4 ++-- ui/components/MessageInputActions.tsx | 2 +- ui/components/MessageSources.tsx | 6 +++--- ui/components/SearchImages.tsx | 4 ++-- ui/components/SearchVideos.tsx | 4 ++-- 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/ui/components/MessageActions/Rewrite.tsx b/ui/components/MessageActions/Rewrite.tsx index b5f865b..76a422f 100644 --- a/ui/components/MessageActions/Rewrite.tsx +++ b/ui/components/MessageActions/Rewrite.tsx @@ -10,7 +10,7 @@ const Rewrite = ({ return ( */} @@ -127,7 +127,7 @@ const MessageBox = ({ start(); } }} - className="p-2 text-black/70 dark:text-white/70 rounded-xl hover(bg-secondLight dark:bg-secondDark) transition duration-200 hover:text-black dark:hover:text-white" + className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-secondLight dark:hover:bg-secondDark transition duration-200 hover:text-black dark:hover:text-white" > {speechStatus === 'started' ? ( diff --git a/ui/components/MessageInputActions.tsx b/ui/components/MessageInputActions.tsx index 22fc708..8b6d784 100644 --- a/ui/components/MessageInputActions.tsx +++ b/ui/components/MessageInputActions.tsx @@ -85,7 +85,7 @@ export const Focus = ({ {focusMode !== 'webSearch' ? (
diff --git a/ui/components/MessageSources.tsx b/ui/components/MessageSources.tsx index 476c73c..292b8c6 100644 --- a/ui/components/MessageSources.tsx +++ b/ui/components/MessageSources.tsx @@ -20,7 +20,7 @@ const MessageSources = ({ sources }: { sources: Document[] }) => {
{sources.slice(0, 3).map((source, i) => ( { {sources.length > 3 && ( diff --git a/ui/components/MessageActions/Rewrite.tsx b/ui/components/MessageActions/Rewrite.tsx index 76a422f..80fadb3 100644 --- a/ui/components/MessageActions/Rewrite.tsx +++ b/ui/components/MessageActions/Rewrite.tsx @@ -10,7 +10,7 @@ const Rewrite = ({ return ( */} @@ -127,7 +127,7 @@ const MessageBox = ({ start(); } }} - className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-secondLight dark:hover:bg-secondDark transition duration-200 hover:text-black dark:hover:text-white" + className="p-2 text-black/70 dark:text-white/70 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white" > {speechStatus === 'started' ? ( @@ -144,7 +144,7 @@ const MessageBox = ({ message.role === 'assistant' && !loading && ( <> -
+
@@ -156,7 +156,7 @@ const MessageBox = ({ className="flex flex-col space-y-3 text-sm" key={i} > -
+
{ sendMessage(suggestion); diff --git a/ui/components/MessageBoxLoading.tsx b/ui/components/MessageBoxLoading.tsx index 3a80fe8..caa6f18 100644 --- a/ui/components/MessageBoxLoading.tsx +++ b/ui/components/MessageBoxLoading.tsx @@ -1,9 +1,9 @@ const MessageBoxLoading = () => { return ( -
-
-
-
+
+
+
+
); }; diff --git a/ui/components/MessageInput.tsx b/ui/components/MessageInput.tsx index 4fbea7c..d215787 100644 --- a/ui/components/MessageInput.tsx +++ b/ui/components/MessageInput.tsx @@ -40,7 +40,7 @@ const MessageInput = ({ } }} className={cn( - 'bg-primaryLight dark:bg-primaryDark p-4 flex items-center overflow-hidden border border-light dark:border-dark', + 'bg-light-primary dark:bg-dark-primary p-4 flex items-center overflow-hidden border border-light-300 dark:border-dark-200', mode === 'multi' ? 'flex-col rounded-lg' : 'flex-row rounded-full', )} > diff --git a/ui/components/MessageInputActions.tsx b/ui/components/MessageInputActions.tsx index 8b6d784..80b2797 100644 --- a/ui/components/MessageInputActions.tsx +++ b/ui/components/MessageInputActions.tsx @@ -16,7 +16,7 @@ export const Attach = () => { return ( @@ -85,7 +85,7 @@ export const Focus = ({ {focusMode !== 'webSearch' ? (
@@ -109,7 +109,7 @@ export const Focus = ({ leaveTo="opacity-0 translate-y-1" > -
+
{focusModes.map((mode, i) => ( setFocusMode(mode.key)} @@ -117,8 +117,8 @@ export const Focus = ({ className={cn( 'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-2 duration-200 cursor-pointer transition', focusMode === mode.key - ? 'bg-primaryLight dark:bg-primaryDark' - : 'hover:bg-primaryLight dark:bg-primaryDark', + ? 'bg-light-primary dark:bg-dark-primary' + : 'hover:bg-light-primary dark:bg-dark-primary', )} >
Copilot {
{sources.slice(0, 3).map((source, i) => ( { {sources.length > 3 && (