feat(message-actions): move to separate components

This commit is contained in:
ItzCrazyKns 2024-05-31 11:02:37 +05:30
parent dcbcab3122
commit cf0abbb9d2
No known key found for this signature in database
GPG Key ID: 8162927C7CCE3065
5 changed files with 64 additions and 54 deletions

View File

@ -1,7 +1,8 @@
import { ArrowRight } from 'lucide-react'; import { ArrowRight } from 'lucide-react';
import { useState } from 'react'; import { useState } from 'react';
import TextareaAutosize from 'react-textarea-autosize'; import TextareaAutosize from 'react-textarea-autosize';
import { CopilotToggle, Focus } from './MessageInputActions'; import CopilotToggle from './MessageInputActions/Copilot';
import Focus from './MessageInputActions/Focus';
const EmptyChatMessageInput = ({ const EmptyChatMessageInput = ({
sendMessage, sendMessage,

View File

@ -2,7 +2,8 @@ import { cn } from '@/lib/utils';
import { ArrowUp } from 'lucide-react'; import { ArrowUp } from 'lucide-react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import TextareaAutosize from 'react-textarea-autosize'; import TextareaAutosize from 'react-textarea-autosize';
import { Attach, CopilotToggle } from './MessageInputActions'; import Attach from './MessageInputActions/Attach';
import CopilotToggle from './MessageInputActions/Copilot';
const MessageInput = ({ const MessageInput = ({
sendMessage, sendMessage,

View File

@ -0,0 +1,14 @@
import { CopyPlus } from 'lucide-react';
const Attach = () => {
return (
<button
type="button"
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"
>
<CopyPlus />
</button>
);
};
export default Attach;

View File

@ -0,0 +1,43 @@
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;

View File

@ -1,28 +1,16 @@
import { import {
BadgePercent, BadgePercent,
ChevronDown, ChevronDown,
CopyPlus,
Globe, Globe,
Pencil, Pencil,
ScanEye, ScanEye,
SwatchBook, SwatchBook,
} from 'lucide-react'; } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { Popover, Switch, Transition } from '@headlessui/react'; import { Popover, Transition } from '@headlessui/react';
import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons'; import { SiReddit, SiYoutube } from '@icons-pack/react-simple-icons';
import { Fragment } from 'react'; import { Fragment } from 'react';
export const Attach = () => {
return (
<button
type="button"
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"
>
<CopyPlus />
</button>
);
};
const focusModes = [ const focusModes = [
{ {
key: 'webSearch', key: 'webSearch',
@ -74,7 +62,7 @@ const focusModes = [
}, },
]; ];
export const Focus = ({ const Focus = ({
focusMode, focusMode,
setFocusMode, setFocusMode,
}: { }: {
@ -144,41 +132,4 @@ export const Focus = ({
); );
}; };
export const CopilotToggle = ({ export default Focus;
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>
);
};