remi/Perplexica
1
0
Fork 0
mirror of https://github.com/ItzCrazyKns/Perplexica.git synced 2025-11-04 04:38:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(message-box): display suggestions

Browse Source
This commit is contained in:
ItzCrazyKns
2024-05-18 13:11:15 +05:30
parent fcff93a594
commit c61facef13
1 changed files with 49 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
ui/components/MessageBox.tsx
View File

@@ -4,7 +4,15 @@
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 { 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 Markdown from 'markdown-to-jsx';
import Copy from './MessageActions/Copy'; import Copy from './MessageActions/Copy';
import Rewrite from './MessageActions/Rewrite'; import Rewrite from './MessageActions/Rewrite';
@@ -21,6 +29,7 @@ const MessageBox = ({
dividerRef, dividerRef,
isLast, isLast,
rewrite, rewrite,
sendMessage,
}: { }: {
message: Message; message: Message;
messageIndex: number; messageIndex: number;
@@ -29,6 +38,7 @@ const MessageBox = ({
dividerRef?: MutableRefObject<HTMLDivElement | null>; dividerRef?: MutableRefObject<HTMLDivElement | null>;
isLast: boolean; isLast: boolean;
rewrite: (messageId: string) => void; rewrite: (messageId: string) => void;
sendMessage: (message: string) => void;
}) => { }) => {
const [parsedMessage, setParsedMessage] = useState(message.content); const [parsedMessage, setParsedMessage] = useState(message.content);
const [speechMessage, setSpeechMessage] = useState(message.content); const [speechMessage, setSpeechMessage] = useState(message.content);
@@ -98,9 +108,9 @@ const MessageBox = ({
{loading && isLast ? null : ( {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 justify-between w-full 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-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} /> <Share size={18} />
</button> </button> */}
<Rewrite rewrite={rewrite} messageId={message.id} /> <Rewrite rewrite={rewrite} messageId={message.id} />
</div> </div>
<div className="flex flex-row items-center space-x-1"> <div className="flex flex-row items-center space-x-1">
@@ -124,6 +134,42 @@ const MessageBox = ({
</div> </div>
</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> </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">