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

Merge 690ef42861 into a24992a3db

Browse Source
This commit is contained in:
Willie Zutz
2025-03-02 01:16:09 +08:00
committed by GitHub
parent a24992a3db 690ef42861
commit aa95f209f0
21 changed files with 410 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
ui/components/MessageInputActions/Optimization.tsx
View File

@@ -1,4 +1,4 @@
import { ChevronDown, Sliders, Star, Zap } from 'lucide-react';
import { ChevronDown, Minimize2, Sliders, Star, Zap } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
Popover,
@@ -6,8 +6,7 @@ import {
PopoverPanel,
Transition,
} from '@headlessui/react';
import { Fragment } from 'react';
import { Fragment, useEffect } from 'react';
const OptimizationModes = [
{
key: 'speed',
@@ -37,10 +36,33 @@ const OptimizationModes = [
const Optimization = ({
optimizationMode,
setOptimizationMode,
isCompact,
setIsCompact,
}: {
optimizationMode: string;
setOptimizationMode: (mode: string) => void;
isCompact: boolean;
setIsCompact: (isCompact: boolean) => void;
}) => {
useEffect(() => {
const savedCompactMode = localStorage.getItem('compactMode');
if (savedCompactMode === null) {
localStorage.setItem('compactMode', String(isCompact));
} else {
setIsCompact(savedCompactMode === 'true');
}
}, [setIsCompact]);
const handleCompactChange = (checked: boolean) => {
setIsCompact(checked);
localStorage.setItem('compactMode', String(checked));
};
const handleOptimizationChange = (mode: string) => {
setOptimizationMode(mode);
localStorage.setItem('optimizationMode', mode);
};
return (
<Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
<PopoverButton
@@ -48,6 +70,12 @@ const Optimization = ({
className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
>
<div className="flex flex-row items-center space-x-1">
{isCompact && (
<Minimize2
size={16}
className="text-gray-600 dark:text-gray-400"
/>
)}
{
OptimizationModes.find((mode) => mode.key === optimizationMode)
?.icon
@@ -70,11 +98,11 @@ const Optimization = ({
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<PopoverPanel className="absolute z-10 w-64 md:w-[250px] right-0">
<PopoverPanel className="absolute z-10 w-64 md:w-[250px] right-0 bottom-[100%] mb-2">
<div className="flex flex-col gap-2 bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-4 max-h-[200px] md:max-h-none overflow-y-auto">
{OptimizationModes.map((mode, i) => (
<PopoverButton
onClick={() => setOptimizationMode(mode.key)}
onClick={() => handleOptimizationChange(mode.key)}
key={i}
disabled={mode.key === 'quality'}
className={cn(
@@ -94,6 +122,30 @@ const Optimization = ({
</p>
</PopoverButton>
))}
<div className="border-t border-light-200 dark:border-dark-200 pt-2 mt-1">
<label className="flex items-center space-x-2 p-2 rounded-lg cursor-pointer hover:bg-light-secondary dark:hover:bg-dark-secondary">
<input
type="checkbox"
checked={isCompact}
onChange={(e) => handleCompactChange(e.target.checked)}
className="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
/>
<div className="flex items-center space-x-2">
<Minimize2
size={16}
className="text-gray-600 dark:text-gray-400"
/>
<div>
<p className="text-sm font-medium text-black dark:text-white">
Compact Mode
</p>
<p className="text-xs text-black/70 dark:text-white/70">
Generate more concise responses
</p>
</div>
</div>
</label>
</div>
</div>
</PopoverPanel>
</Transition>