Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-22 03:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨: Updated Plugins Search Bar; 🌎: Added Translations (#1549)

Browse source 
* 🎨: layout search bar plugins: updated  / 🌎: translation update

* 🌎:Update Portuguese Translation

* fix: Refactored 'pluginstoredialog' code.

* chore(PopoverButtons): remove comments, re-organize imports

* chore: linting and reorganize useState declarations

* chore: linting and reorganize useState declarations

---------

Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
This commit is contained in:
Raí Santos 2024-01-16 15:15:39 -03:00 • committed by GitHub
parent 406940490b
commit 7b4e31ecc4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 70 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/src/components/Chat/Input/PopoverButtons.tsx
View file

@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
import { MessagesSquared, GPTIcon } from '~/components/svg';
import { useChatContext } from '~/Providers';
import { Button } from '~/components/ui';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils/';
type TPopoverButton = {
@ -26,6 +27,7 @@ export default function PopoverButtons({
showAgentSettings,
setShowAgentSettings,
} = useChatContext();
const localize = useLocalize();
const { model, endpoint: _endpoint, endpointType } = conversation ?? {};
const endpoint = endpointType ?? _endpoint;
@ -42,7 +44,7 @@ export default function PopoverButtons({
const buttons: { [key: string]: TPopoverButton[] } = {
[EModelEndpoint.google]: [
{
label: (showExamples ? 'Hide' : 'Show') + ' Examples',
label: localize(showExamples ? 'com_hide_examples' : 'com_show_examples'),
buttonClass: isGenerativeModel || isTextModel ? 'disabled' : '',
handler: triggerExamples,
icon: <MessagesSquared className={cn('mr-1 w-[14px]', iconClass)} />,
@ -50,7 +52,9 @@ export default function PopoverButtons({
],
[EModelEndpoint.gptPlugins]: [
{
label: `Show ${showAgentSettings ? 'Completion' : 'Agent'} Settings`,
label: localize(
showAgentSettings ? 'com_show_completion_settings' : 'com_show_agent_settings',
),
buttonClass: '',
handler: () => setShowAgentSettings((prev) => !prev),
icon: <GPTIcon className={cn('mr-1 w-[14px]', iconClass)} size={24} />,
@ -71,7 +75,7 @@ export default function PopoverButtons({
<div>
{endpointButtons.map((button, index) => (
<Button
key={`${endpoint}-button-${index}`}
key={`button-${index}`}
type="button"
className={cn(
button.buttonClass,

42
client/src/components/Plugins/Store/PluginStoreDialog.tsx
View file

@ -22,19 +22,23 @@ type TPluginStoreDialogProps = {
function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
const localize = useLocalize();
const { data: availablePlugins } = useAvailablePluginsQuery();
const { user } = useAuthContext();
const { data: availablePlugins } = useAvailablePluginsQuery();
const updateUserPlugins = useUpdateUserPluginsMutation();
const [conversation, setConversation] = useRecoilState(store.conversation) || {};
const [currentPage, setCurrentPage] = useState<number>(1);
const [itemsPerPage, setItemsPerPage] = useState<number>(1);
const [maxPage, setMaxPage] = useState<number>(1);
const [userPlugins, setUserPlugins] = useState<string[]>([]);
const [conversation, setConversation] = useRecoilState(store.conversation) ?? {};
const [selectedPlugin, setSelectedPlugin] = useState<TPlugin | undefined>(undefined);
const [showPluginAuthForm, setShowPluginAuthForm] = useState<boolean>(false);
const [maxPage, setMaxPage] = useState(1);
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(1);
const [userPlugins, setUserPlugins] = useState<string[]>([]);
const [searchChanged, setSearchChanged] = useState(false);
const [searchValue, setSearchValue] = useState('');
const [error, setError] = useState<boolean>(false);
const [errorMessage, setErrorMessage] = useState<string>('');
const [searchChanged, setSearchChanged] = useState(false);
const [showPluginAuthForm, setShowPluginAuthForm] = useState<boolean>(false);
const handleInstallError = (error: TError) => {
setError(true);
@ -122,7 +126,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
},
[itemsPerPage],
);
const [searchValue, setSearchValue] = useState<string>('');
const filteredPlugins = availablePlugins?.filter((plugin) =>
plugin.name.toLowerCase().includes(searchValue.toLowerCase()),
);
@ -209,28 +213,14 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
)}
<div className="p-4 sm:p-6 sm:pt-4">
<div className="mt-4 flex flex-col gap-4">
<div style={{ position: 'relative', display: 'inline-block', width: '250px' }}>
<div className="flex items-center justify-center space-x-4">
<Search className="h-6 w-6 text-gray-500" />
<input
type="text"
value={searchValue}
onChange={handleSearch}
placeholder={localize('com_nav_plugin_search')}
style={{
width: '100%',
paddingLeft: '30px',
border: '1px solid #ccc',
borderRadius: '4px', // This rounds the corners
}}
/>
<Search
style={{
position: 'absolute',
left: '10px',
top: '50%',
transform: 'translateY(-50%)',
width: '16px',
height: '16px',
}}
className="w-64 rounded border border-gray-300 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
/>
</div>
<div