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

feat(app): enhance UI

Browse Source
This commit is contained in:
ItzCrazyKns
2025-11-18 14:37:41 +05:30
parent f6dac43d7a
commit 657a577ec8
3 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/MessageActions/Copy.tsx
View File

@@ -20,9 +20,9 @@ const Copy = ({
setCopied(true); setCopied(true);
setTimeout(() => setCopied(false), 1000); setTimeout(() => setCopied(false), 1000);
}} }}
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-full hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
> >
{copied ? <Check size={18} /> : <ClipboardList size={18} />} {copied ? <Check size={16} /> : <ClipboardList size={16} />}
</button> </button>
); );
}; };

9
src/components/MessageActions/Rewrite.tsx
View File

@@ -1,4 +1,4 @@
import { ArrowLeftRight } from 'lucide-react'; import { ArrowLeftRight, Repeat } from 'lucide-react';
const Rewrite = ({ const Rewrite = ({
rewrite, rewrite,
@@ -10,12 +10,11 @@ const Rewrite = ({
return ( return (
<button <button
onClick={() => rewrite(messageId)} onClick={() => rewrite(messageId)}
className="py-2 px-3 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 flex flex-row items-center space-x-1" className="p-2 text-black/70 dark:text-white/70 rounded-full hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white flex flex-row items-center space-x-1"
> >
<ArrowLeftRight size={18} /> <Repeat size={16} />
<p className="text-xs font-medium">Rewrite</p>
</button> </button>
); );
}; };
1;
export default Rewrite; export default Rewrite;

35
src/components/MessageBox.tsx
View File

@@ -10,6 +10,7 @@ import {
StopCircle, StopCircle,
Layers3, Layers3,
Plus, Plus,
CornerDownRight,
} from 'lucide-react'; } from 'lucide-react';
import Markdown, { MarkdownToJSX } from 'markdown-to-jsx'; import Markdown, { MarkdownToJSX } from 'markdown-to-jsx';
import Copy from './MessageActions/Copy'; import Copy from './MessageActions/Copy';
@@ -122,14 +123,14 @@ const MessageBox = ({
</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">
<div className="flex flex-row items-center space-x-1"> <div className="flex flex-row items-center -ml-2">
<Rewrite <Rewrite
rewrite={rewrite} rewrite={rewrite}
messageId={section.assistantMessage.messageId} messageId={section.assistantMessage.messageId}
/> />
</div> </div>
<div className="flex flex-row items-center space-x-1"> <div className="flex flex-row items-center -mr-2">
<Copy <Copy
initialMessage={section.assistantMessage.content} initialMessage={section.assistantMessage.content}
section={section} section={section}
@@ -142,12 +143,12 @@ const MessageBox = ({
start(); start();
} }
}} }}
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-full 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={16} />
) : ( ) : (
<Volume2 size={18} /> <Volume2 size={16} />
)} )}
</button> </button>
</div> </div>
@@ -159,7 +160,7 @@ const MessageBox = ({
section.suggestions.length > 0 && section.suggestions.length > 0 &&
section.assistantMessage && section.assistantMessage &&
!loading && ( !loading && (
<div className="mt-8 pt-6 border-t border-light-200/50 dark:border-dark-200/50"> <div className="mt-6">
<div className="flex flex-row items-center space-x-2 mb-4"> <div className="flex flex-row items-center space-x-2 mb-4">
<Layers3 <Layers3
className="text-black dark:text-white" className="text-black dark:text-white"
@@ -173,20 +174,24 @@ const MessageBox = ({
{section.suggestions.map( {section.suggestions.map(
(suggestion: string, i: number) => ( (suggestion: string, i: number) => (
<div key={i}> <div key={i}>
{i > 0 && ( <div className="h-px bg-light-200/40 dark:bg-dark-200/40" />
<div className="h-px bg-light-200/40 dark:bg-dark-200/40 mx-3" />
)}
<button <button
onClick={() => sendMessage(suggestion)} onClick={() => sendMessage(suggestion)}
className="group w-full px-3 py-4 text-left transition-colors duration-200" className="group w-full py-4 text-left transition-colors duration-200"
> >
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<p className="text-sm text-black/70 dark:text-white/70 group-hover:text-[#24A0ED] transition-colors duration-200 leading-relaxed"> <div className="flex flex-row space-x-3 items-center ">
{suggestion} <CornerDownRight
</p> size={17}
className="group-hover:text-sky-400 transition-colors duration-200"
/>
<p className="text-sm text-black/70 dark:text-white/70 group-hover:text-sky-400 transition-colors duration-200 leading-relaxed">
{suggestion}
</p>
</div>
<Plus <Plus
size={16} size={16}
className="text-black/40 dark:text-white/40 group-hover:text-[#24A0ED] transition-colors duration-200 flex-shrink-0" className="text-black/40 dark:text-white/40 group-hover:text-sky-400 transition-colors duration-200 flex-shrink-0"
/> />
</div> </div>
</button> </button>