perplexica/ui/components/MessageInputActions.tsx

185 lines
5.7 KiB
TypeScript
Raw Normal View History

2024-04-13 06:41:47 +00:00
import {
BadgePercent,
ChevronDown,
2024-04-13 06:41:47 +00:00
CopyPlus,
Globe,
Pencil,
ScanEye,
SwatchBook,
} from 'lucide-react';
2024-04-09 10:51:05 +00:00
import { cn } from '@/lib/utils';
2024-04-13 06:41:47 +00:00
import { Popover, Switch, Transition } from '@headlessui/react';
import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons';
import { Fragment } from 'react';
2024-04-09 10:51:05 +00:00
export const Attach = () => {
return (
2024-04-13 06:41:47 +00:00
<button
type="button"
2024-05-27 03:49:09 +00:00
className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
2024-04-13 06:41:47 +00:00
>
2024-04-09 10:51:05 +00:00
<CopyPlus />
</button>
);
};
2024-04-13 06:41:47 +00:00
const focusModes = [
{
key: 'webSearch',
title: 'All',
description: 'Searches across all of the internet',
icon: <Globe size={20} />,
},
{
key: 'academicSearch',
title: 'Academic',
description: 'Search in published academic papers',
icon: <SwatchBook size={20} />,
},
{
key: 'writingAssistant',
title: 'Writing',
description: 'Chat without searching the web',
icon: <Pencil size={16} />,
2024-04-13 06:41:47 +00:00
},
{
key: 'wolframAlphaSearch',
title: 'Wolfram Alpha',
description: 'Computational knowledge engine',
icon: <BadgePercent size={20} />,
},
{
key: 'youtubeSearch',
title: 'Youtube',
description: 'Search and watch videos',
icon: (
<SiYoutube
className="h-5 w-auto mr-0.5"
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
/>
),
},
{
key: 'redditSearch',
title: 'Reddit',
description: 'Search for discussions and opinions',
icon: (
<SiReddit
className="h-5 w-auto mr-0.5"
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
/>
),
},
];
export const Focus = ({
focusMode,
setFocusMode,
}: {
focusMode: string;
setFocusMode: (mode: string) => void;
}) => {
2024-04-09 10:51:05 +00:00
return (
2024-04-13 06:41:47 +00:00
<Popover className="fixed w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
<Popover.Button
type="button"
2024-05-27 03:49:09 +00:00
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"
2024-04-13 06:41:47 +00:00
>
{focusMode !== 'webSearch' ? (
<div className="flex flex-row items-center space-x-1">
{focusModes.find((mode) => mode.key === focusMode)?.icon}
<p className="text-xs font-medium">
{focusModes.find((mode) => mode.key === focusMode)?.title}
</p>
<ChevronDown size={20} />
</div>
) : (
<ScanEye />
)}
2024-04-13 06:41:47 +00:00
</Popover.Button>
<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"
>
<Popover.Panel className="absolute z-10 w-full">
2024-05-27 03:49:09 +00:00
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1 dark:bg-dark-primary border rounded-lg border-light-300 dark:border-dark-200 w-full p-2 max-h-[200px] md:max-h-none overflow-y-auto">
2024-04-13 06:41:47 +00:00
{focusModes.map((mode, i) => (
<Popover.Button
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',
focusMode === mode.key
? 'bg-light-secondary dark:bg-dark-secondary'
: 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
2024-04-13 06:41:47 +00:00
)}
>
<div
className={cn(
'flex flex-row items-center space-x-1',
2024-05-24 12:29:49 +00:00
focusMode === mode.key
? 'text-[#24A0ED]'
: 'text-black dark:text-white',
2024-04-13 06:41:47 +00:00
)}
>
{mode.icon}
<p className="text-sm font-medium">{mode.title}</p>
</div>
2024-05-24 12:29:49 +00:00
<p className="text-black/70 dark:text-white/70 text-xs">
{mode.description}
</p>
2024-04-13 06:41:47 +00:00
</Popover.Button>
))}
</div>
</Popover.Panel>
</Transition>
</Popover>
2024-04-09 10:51:05 +00:00
);
};
export 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-primary dark:bg-dark-primary 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"
2024-04-09 10:51:05 +00:00
>
<span className="sr-only">Copilot</span>
<span
className={cn(
copilotEnabled
? 'translate-x-6 bg-[#24A0ED]'
2024-05-24 12:29:49 +00:00
: 'translate-x-1 bg-black/50 dark:bg-white/50',
2024-04-09 10:51:05 +00:00
'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]'
2024-05-24 12:29:49 +00:00
: 'text-black/50 dark:text-white/50 group-hover:text-black dark:group-hover:text-white',
2024-04-09 10:51:05 +00:00
)}
>
Copilot
</p>
</div>
);
};