jamesf/Perplexica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'master' of github.com:notedsource/Perplexica into hristo/deploy-on-gcp-gke

Browse source
This commit is contained in:
Hristo 2024-05-21 15:41:23 -04:00
commit 4c7942d2e8
28 changed files with 1035 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

5
ui/app/page.tsx
View file

@ -1,5 +1,6 @@
import ChatWindow from '@/components/ChatWindow';
import { Metadata } from 'next';
import { Suspense } from 'react';
export const metadata: Metadata = {
title: 'Chat - Perplexica',
@ -9,7 +10,9 @@ export const metadata: Metadata = {
const Home = () => {
return (
<div>
<ChatWindow />
<Suspense>
<ChatWindow />
</Suspense>
</div>
);
};

7
ui/components/Chat.tsx
View file

@ -1,6 +1,6 @@
'use client';
import { useEffect, useRef, useState } from 'react';
import { Fragment, useEffect, useRef, useState } from 'react';
import MessageInput from './MessageInput';
import { Message } from './ChatWindow';
import MessageBox from './MessageBox';
@ -53,7 +53,7 @@ const Chat = ({
const isLast = i === messages.length - 1;
return (
<>
<Fragment key={msg.id}>
<MessageBox
key={i}
message={msg}
@ -63,11 +63,12 @@ const Chat = ({
dividerRef={isLast ? dividerRef : undefined}
isLast={isLast}
rewrite={rewrite}
sendMessage={sendMessage}
/>
{!isLast && msg.role === 'assistant' && (
<div className="h-px w-full bg-[#1C1C1C]" />
)}
</>
</Fragment>
);
})}
{loading && !messageAppeared && <MessageBoxLoading />}

62
ui/components/ChatWindow.tsx
View file

@ -1,11 +1,13 @@
'use client';
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { Document } from '@langchain/core/documents';
import Navbar from './Navbar';
import Chat from './Chat';
import EmptyChat from './EmptyChat';
import { toast } from 'sonner';
import { useSearchParams } from 'next/navigation';
import { getSuggestions } from '@/lib/actions';
import { clientFetch } from '@/lib/utils';
import { getAccessKey } from '@/lib/config';
@ -14,10 +16,11 @@ export type Message = {
createdAt: Date;
content: string;
role: 'user' | 'assistant';
suggestions?: string[];
sources?: Document[];
};
const useSocket = (url: string) => {
const useSocket = (url: string, setIsReady: (ready: boolean) => void) => {
const [ws, setWs] = useState<WebSocket | null>(null);
useEffect(() => {
@ -107,9 +110,17 @@ const useSocket = (url: string) => {
ws.onopen = () => {
console.log('[DEBUG] open');
setWs(ws);
};
const stateCheckInterval = setInterval(() => {
if (ws.readyState === 1) {
setIsReady(true);
clearInterval(stateCheckInterval);
}
}, 100);
setWs(ws);
ws.onmessage = (e) => {
const parsedData = JSON.parse(e.data);
if (parsedData.type === 'error') {
@ -128,19 +139,29 @@ const useSocket = (url: string) => {
ws?.close();
console.log('[DEBUG] closed');
};
}, [ws, url]);
}, [ws, url, setIsReady]);
return ws;
};
const ChatWindow = () => {
const ws = useSocket(process.env.NEXT_PUBLIC_WS_URL!);
const searchParams = useSearchParams();
const initialMessage = searchParams.get('q');
const [isReady, setIsReady] = useState(false);
const ws = useSocket(process.env.NEXT_PUBLIC_WS_URL!, setIsReady);
const [chatHistory, setChatHistory] = useState<[string, string][]>([]);
const [messages, setMessages] = useState<Message[]>([]);
const messagesRef = useRef<Message[]>([]);
const [loading, setLoading] = useState(false);
const [messageAppeared, setMessageAppeared] = useState(false);
const [focusMode, setFocusMode] = useState('webSearch');
useEffect(() => {
messagesRef.current = messages;
}, [messages]);
const sendMessage = async (message: string) => {
if (loading) return;
setLoading(true);
@ -169,7 +190,7 @@ const ChatWindow = () => {
},
]);
const messageHandler = (e: MessageEvent) => {
const messageHandler = async (e: MessageEvent) => {
const data = JSON.parse(e.data);
if (data.type === 'error') {
@ -231,8 +252,28 @@ const ChatWindow = () => {
['human', message],
['assistant', recievedMessage],
]);
ws?.removeEventListener('message', messageHandler);
setLoading(false);
const lastMsg = messagesRef.current[messagesRef.current.length - 1];
if (
lastMsg.role === 'assistant' &&
lastMsg.sources &&
lastMsg.sources.length > 0 &&
!lastMsg.suggestions
) {
const suggestions = await getSuggestions(messagesRef.current);
setMessages((prev) =>
prev.map((msg) => {
if (msg.id === lastMsg.id) {
return { ...msg, suggestions: suggestions };
}
return msg;
}),
);
}
}
};
@ -256,7 +297,14 @@ const ChatWindow = () => {
sendMessage(message.content);
};
return ws ? (
useEffect(() => {
if (isReady && initialMessage) {
sendMessage(initialMessage);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isReady, initialMessage]);
return isReady ? (
<div>
{messages.length > 0 ? (
<>

2
ui/components/EmptyChatMessageInput.tsx
View file

@ -1,7 +1,7 @@
import { ArrowRight } from 'lucide-react';
import { useState } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import { Attach, CopilotToggle, Focus } from './MessageInputActions';
import { CopilotToggle, Focus } from './MessageInputActions';
const EmptyChatMessageInput = ({
sendMessage,

3
ui/components/MessageActions/Rewrite.tsx
View file

@ -10,9 +10,10 @@ const Rewrite = ({
return (
<button
onClick={() => rewrite(messageId)}
className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
className="py-2 px-3 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white flex flex-row items-center space-x-1"
>
<ArrowLeftRight size={18} />
<p className="text-xs font-medium">Rewrite</p>
</button>
);
};

52
ui/components/MessageBox.tsx
View file

@ -4,7 +4,15 @@
import React, { MutableRefObject, useEffect, useState } from 'react';
import { Message } from './ChatWindow';
import { cn } from '@/lib/utils';
import { BookCopy, Disc3, Share, Volume2, StopCircle } from 'lucide-react';
import {
BookCopy,
Disc3,
Share,
Volume2,
StopCircle,
Layers3,
Plus,
} from 'lucide-react';
import Markdown from 'markdown-to-jsx';
import Copy from './MessageActions/Copy';
import Rewrite from './MessageActions/Rewrite';
@ -21,6 +29,7 @@ const MessageBox = ({
dividerRef,
isLast,
rewrite,
sendMessage,
}: {
message: Message;
messageIndex: number;
@ -29,6 +38,7 @@ const MessageBox = ({
dividerRef?: MutableRefObject<HTMLDivElement | null>;
isLast: boolean;
rewrite: (messageId: string) => void;
sendMessage: (message: string) => void;
}) => {
const [parsedMessage, setParsedMessage] = useState(message.content);
const [speechMessage, setSpeechMessage] = useState(message.content);
@ -98,9 +108,9 @@ const MessageBox = ({
{loading && isLast ? null : (
<div className="flex flex-row items-center justify-between w-full text-white py-4 -mx-2">
<div className="flex flex-row items-center space-x-1">
<button className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">
{/* <button className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">
<Share size={18} />
</button>
</button> */}
<Rewrite rewrite={rewrite} messageId={message.id} />
</div>
<div className="flex flex-row items-center space-x-1">
@ -124,6 +134,42 @@ const MessageBox = ({
</div>
</div>
)}
{isLast &&
message.suggestions &&
message.suggestions.length > 0 &&
message.role === 'assistant' &&
!loading && (
<>
<div className="h-px w-full bg-[#1C1C1C]" />
<div className="flex flex-col space-y-3 text-white">
<div className="flex flex-row items-center space-x-2 mt-4">
<Layers3 />
<h3 className="text-xl font-medium">Related</h3>
</div>
<div className="flex flex-col space-y-3">
{message.suggestions.map((suggestion, i) => (
<div
className="flex flex-col space-y-3 text-sm"
key={i}
>
<div className="h-px w-full bg-[#1C1C1C]" />
<div
onClick={() => {
sendMessage(suggestion);
}}
className="cursor-pointer flex flex-row justify-between font-medium space-x-2 items-center"
>
<p className="transition duration-200 hover:text-[#24A0ED]">
{suggestion}
</p>
<Plus size={20} className="text-[#24A0ED]" />
</div>
</div>
))}
</div>
</div>
</>
)}
</div>
</div>
<div className="lg:sticky lg:top-20 flex flex-col items-center space-y-3 w-full lg:w-3/12 z-30 h-full pb-4">

2
ui/components/SettingsDialog.tsx
View file

@ -90,7 +90,7 @@ const SettingsDialog = ({
setSelectedEmbeddingModelProvider(embeddingModelProvider);
setSelectedEmbeddingModel(embeddingModel);
setCustomOpenAIApiKey(localStorage.getItem('openAIApiKey') || '');
setCustomOpenAIBaseURL(localStorage.getItem('openAIBaseUrl') || '');
setCustomOpenAIBaseURL(localStorage.getItem('openAIBaseURL') || '');
setIsLoading(false);
};

22
ui/lib/actions.ts Normal file
View file

@ -0,0 +1,22 @@
import { Message } from '@/components/ChatWindow';
export const getSuggestions = async (chatHisory: Message[]) => {
const chatModel = localStorage.getItem('chatModel');
const chatModelProvider = localStorage.getItem('chatModelProvider');
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/suggestions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
chat_history: chatHisory,
chat_model: chatModel,
chat_model_provider: chatModelProvider,
}),
});
const data = (await res.json()) as { suggestions: string[] };
return data.suggestions;
};

2
ui/package.json
View file

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