mirror of
https://github.com/ItzCrazyKns/Perplexica.git
synced 2025-12-16 16:48:14 +00:00
feat(message-input-actions): remove copilot, focus selector
This commit is contained in:
ItzCrazyKns
@@ -1,43 +0,0 @@
|
|||||||
import { cn } from '@/lib/utils';
|
|
||||||
import { Switch } from '@headlessui/react';
|
|
||||||
|
|
||||||
const CopilotToggle = ({
|
|
||||||
copilotEnabled,
|
|
||||||
setCopilotEnabled,
|
|
||||||
}: {
|
|
||||||
copilotEnabled: boolean;
|
|
||||||
setCopilotEnabled: (enabled: boolean) => void;
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div className="group flex flex-row items-center space-x-1 active:scale-95 duration-200 transition cursor-pointer">
|
|
||||||
<Switch
|
|
||||||
checked={copilotEnabled}
|
|
||||||
onChange={setCopilotEnabled}
|
|
||||||
className="bg-light-secondary dark:bg-dark-secondary border border-light-200/70 dark:border-dark-200 relative inline-flex h-5 w-10 sm:h-6 sm:w-11 items-center rounded-full"
|
|
||||||
>
|
|
||||||
<span className="sr-only">Copilot</span>
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
copilotEnabled
|
|
||||||
? 'translate-x-6 bg-[#24A0ED]'
|
|
||||||
: 'translate-x-1 bg-black/50 dark:bg-white/50',
|
|
||||||
'inline-block h-3 w-3 sm:h-4 sm:w-4 transform rounded-full transition-all duration-200',
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Switch>
|
|
||||||
<p
|
|
||||||
onClick={() => setCopilotEnabled(!copilotEnabled)}
|
|
||||||
className={cn(
|
|
||||||
'text-xs font-medium transition-colors duration-150 ease-in-out',
|
|
||||||
copilotEnabled
|
|
||||||
? 'text-[#24A0ED]'
|
|
||||||
: 'text-black/50 dark:text-white/50 group-hover:text-black dark:group-hover:text-white',
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
Copilot
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CopilotToggle;
|
|
||||||
@@ -1,123 +0,0 @@
|
|||||||
import {
|
|
||||||
BadgePercent,
|
|
||||||
ChevronDown,
|
|
||||||
Globe,
|
|
||||||
Pencil,
|
|
||||||
ScanEye,
|
|
||||||
SwatchBook,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
import {
|
|
||||||
Popover,
|
|
||||||
PopoverButton,
|
|
||||||
PopoverPanel,
|
|
||||||
Transition,
|
|
||||||
} from '@headlessui/react';
|
|
||||||
import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons';
|
|
||||||
import { Fragment } from 'react';
|
|
||||||
import { useChat } from '@/lib/hooks/useChat';
|
|
||||||
|
|
||||||
const focusModes = [
|
|
||||||
{
|
|
||||||
key: 'webSearch',
|
|
||||||
title: 'All',
|
|
||||||
description: 'Searches across all of the internet',
|
|
||||||
icon: <Globe size={16} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'academicSearch',
|
|
||||||
title: 'Academic',
|
|
||||||
description: 'Search in published academic papers',
|
|
||||||
icon: <SwatchBook size={16} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'writingAssistant',
|
|
||||||
title: 'Writing',
|
|
||||||
description: 'Chat without searching the web',
|
|
||||||
icon: <Pencil size={16} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'wolframAlphaSearch',
|
|
||||||
title: 'Wolfram Alpha',
|
|
||||||
description: 'Computational knowledge engine',
|
|
||||||
icon: <BadgePercent size={16} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'youtubeSearch',
|
|
||||||
title: 'Youtube',
|
|
||||||
description: 'Search and watch videos',
|
|
||||||
icon: <SiYoutube className="h-[16px] w-auto mr-0.5" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'redditSearch',
|
|
||||||
title: 'Reddit',
|
|
||||||
description: 'Search for discussions and opinions',
|
|
||||||
icon: <SiReddit className="h-[16px] w-auto mr-0.5" />,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const Focus = () => {
|
|
||||||
const { focusMode, setFocusMode } = useChat();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
|
|
||||||
<PopoverButton
|
|
||||||
type="button"
|
|
||||||
className="active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
|
|
||||||
>
|
|
||||||
{focusMode !== 'webSearch' ? (
|
|
||||||
<div className="flex flex-row items-center space-x-1">
|
|
||||||
{focusModes.find((mode) => mode.key === focusMode)?.icon}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex flex-row items-center space-x-1">
|
|
||||||
<Globe size={16} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</PopoverButton>
|
|
||||||
<Transition
|
|
||||||
as={Fragment}
|
|
||||||
enter="transition ease-out duration-150"
|
|
||||||
enterFrom="opacity-0 translate-y-1"
|
|
||||||
enterTo="opacity-100 translate-y-0"
|
|
||||||
leave="transition ease-in duration-150"
|
|
||||||
leaveFrom="opacity-100 translate-y-0"
|
|
||||||
leaveTo="opacity-0 translate-y-1"
|
|
||||||
>
|
|
||||||
<PopoverPanel className="absolute z-10 w-64 md:w-[500px] -right-4">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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">
|
|
||||||
{focusModes.map((mode, i) => (
|
|
||||||
<PopoverButton
|
|
||||||
onClick={() => setFocusMode(mode.key)}
|
|
||||||
key={i}
|
|
||||||
className={cn(
|
|
||||||
'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-2 duration-200 cursor-pointer transition focus:outline-none',
|
|
||||||
focusMode === mode.key
|
|
||||||
? 'bg-light-secondary dark:bg-dark-secondary'
|
|
||||||
: 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'flex flex-row items-center space-x-1',
|
|
||||||
focusMode === mode.key
|
|
||||||
? 'text-[#24A0ED]'
|
|
||||||
: 'text-black dark:text-white',
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{mode.icon}
|
|
||||||
<p className="text-sm font-medium">{mode.title}</p>
|
|
||||||
</div>
|
|
||||||
<p className="text-black/70 dark:text-white/70 text-xs">
|
|
||||||
{mode.description}
|
|
||||||
</p>
|
|
||||||
</PopoverButton>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</PopoverPanel>
|
|
||||||
</Transition>
|
|
||||||
</Popover>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Focus;
|
|
||||||
Reference in New Issue
Block a user