remi/Perplexica
1
0
Fork 0
mirror of https://github.com/ItzCrazyKns/Perplexica.git synced 2025-06-21 17:28:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add sources of user

Browse Source
This commit is contained in:
litongjava
2025-02-04 19:15:54 -10:00
parent 4dc5857b17
commit 3afa826fb9
2 changed files with 45 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/ChatWindow.tsx
View File

@ -352,7 +352,7 @@ const loadMessages = async (
const messages = data.messages.map((msg: any) => { const messages = data.messages.map((msg: any) => {
return { return {
...msg, ...msg,
...JSON.parse(msg.metadata), // ...JSON.parse(msg.metadata),
}; };
}) as Message[]; }) as Message[];

69
ui/components/MessageBox.tsx
View File

@ -1,9 +1,9 @@
'use client'; 'use client';
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import React, { MutableRefObject, useEffect, useState } from 'react'; import React, {MutableRefObject, useEffect, useState} from 'react';
import { Message } from './ChatWindow'; import {Message} from './ChatWindow';
import { cn } from '@/lib/utils'; import {cn} from '@/lib/utils';
import { import {
BookCopy, BookCopy,
Disc3, Disc3,
@ -18,18 +18,18 @@ import Rewrite from './MessageActions/Rewrite';
import MessageSources from './MessageSources'; import MessageSources from './MessageSources';
import SearchImages from './SearchImages'; import SearchImages from './SearchImages';
import SearchVideos from './SearchVideos'; import SearchVideos from './SearchVideos';
import { useSpeech } from 'react-text-to-speech'; import {useSpeech} from 'react-text-to-speech';
const MessageBox = ({ const MessageBox = ({
message, message,
messageIndex, messageIndex,
history, history,
loading, loading,
dividerRef, dividerRef,
isLast, isLast,
rewrite, rewrite,
sendMessage, sendMessage,
}: { }: {
message: Message; message: Message;
messageIndex: number; messageIndex: number;
history: Message[]; history: Message[];
@ -63,7 +63,7 @@ const MessageBox = ({
setParsedMessage(message.content); setParsedMessage(message.content);
}, [message.content, message.sources, message.role]); }, [message.content, message.sources, message.role]);
const { speechStatus, start, stop } = useSpeech({ text: speechMessage }); const {speechStatus, start, stop} = useSpeech({text: speechMessage});
return ( return (
<div> <div>
@ -72,6 +72,23 @@ const MessageBox = ({
<h2 className="text-black dark:text-white font-medium text-3xl lg:w-9/12"> <h2 className="text-black dark:text-white font-medium text-3xl lg:w-9/12">
{message.content} {message.content}
</h2> </h2>
<div
ref={dividerRef}
className="flex flex-col space-y-6 w-full lg:w-9/12"
>
{message.sources && message.sources.length > 0 && (
<div className="flex flex-col space-y-2">
<div className="flex flex-row items-center space-x-2">
<BookCopy className="text-black dark:text-white" size={20}/>
<h3 className="text-black dark:text-white font-medium text-xl">
Sources
</h3>
</div>
<MessageSources sources={message.sources}/>
</div>
)}
</div>
</div> </div>
)} )}
@ -84,12 +101,12 @@ const MessageBox = ({
{message.sources && message.sources.length > 0 && ( {message.sources && message.sources.length > 0 && (
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
<div className="flex flex-row items-center space-x-2"> <div className="flex flex-row items-center space-x-2">
<BookCopy className="text-black dark:text-white" size={20} /> <BookCopy className="text-black dark:text-white" size={20}/>
<h3 className="text-black dark:text-white font-medium text-xl"> <h3 className="text-black dark:text-white font-medium text-xl">
Sources Sources
</h3> </h3>
</div> </div>
<MessageSources sources={message.sources} /> <MessageSources sources={message.sources}/>
</div> </div>
)} )}
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
@ -114,15 +131,16 @@ const MessageBox = ({
{parsedMessage} {parsedMessage}
</Markdown> </Markdown>
{loading && isLast ? null : ( {loading && isLast ? null : (
<div className="flex flex-row items-center justify-between w-full text-black dark:text-white py-4 -mx-2"> <div
className="flex flex-row items-center justify-between w-full text-black dark:text-white py-4 -mx-2">
<div className="flex flex-row items-center space-x-1"> <div className="flex flex-row items-center space-x-1">
{/* <button 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 text-black dark:hover:text-white"> {/* <button 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 text-black dark:hover:text-white">
<Share size={18} /> <Share size={18} />
</button> */} </button> */}
<Rewrite rewrite={rewrite} messageId={message.messageId} /> <Rewrite rewrite={rewrite} messageId={message.messageId}/>
</div> </div>
<div className="flex flex-row items-center space-x-1"> <div className="flex flex-row items-center space-x-1">
<Copy initialMessage={message.content} message={message} /> <Copy initialMessage={message.content} message={message}/>
<button <button
onClick={() => { onClick={() => {
if (speechStatus === 'started') { if (speechStatus === 'started') {
@ -134,9 +152,9 @@ const MessageBox = ({
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" 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' ? ( {speechStatus === 'started' ? (
<StopCircle size={18} /> <StopCircle size={18}/>
) : ( ) : (
<Volume2 size={18} /> <Volume2 size={18}/>
)} )}
</button> </button>
</div> </div>
@ -148,10 +166,10 @@ const MessageBox = ({
message.role === 'assistant' && message.role === 'assistant' &&
!loading && ( !loading && (
<> <>
<div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" /> <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary"/>
<div className="flex flex-col space-y-3 text-black dark:text-white"> <div className="flex flex-col space-y-3 text-black dark:text-white">
<div className="flex flex-row items-center space-x-2 mt-4"> <div className="flex flex-row items-center space-x-2 mt-4">
<Layers3 /> <Layers3/>
<h3 className="text-xl font-medium">Related</h3> <h3 className="text-xl font-medium">Related</h3>
</div> </div>
<div className="flex flex-col space-y-3"> <div className="flex flex-col space-y-3">
@ -160,7 +178,7 @@ const MessageBox = ({
className="flex flex-col space-y-3 text-sm" className="flex flex-col space-y-3 text-sm"
key={i} key={i}
> >
<div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" /> <div className="h-px w-full bg-light-secondary dark:bg-dark-secondary"/>
<div <div
onClick={() => { onClick={() => {
sendMessage(suggestion); sendMessage(suggestion);
@ -183,7 +201,8 @@ const MessageBox = ({
)} )}
</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"> <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">
<SearchImages <SearchImages
query={history[messageIndex - 1].content} query={history[messageIndex - 1].content}
chatHistory={history.slice(0, messageIndex - 1)} chatHistory={history.slice(0, messageIndex - 1)}