🎨 style: update Assistants builder (#3397)

* style: update Assistant builder

* fix(Eng): re-introduce old file_search info message

* feat: new OGDialogTemplate; style: imporved tools + actions dialogs

* style: fix alignment issue for delete tool dialog

* chore: import order

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Marco Beretta 2024-07-21 19:46:43 +02:00 committed by GitHub
parent 344297021f
commit 0bd59c0efe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 1115 additions and 916 deletions

View file

@ -7,9 +7,10 @@ import {
} from 'librechat-data-provider';
import type { AssistantPanelProps, ActionAuthForm } from '~/common';
import { useAssistantsMapContext, useToastContext } from '~/Providers';
import { Dialog, DialogTrigger } from '~/components/ui';
import { Dialog, DialogTrigger, OGDialog, OGDialogTrigger, Label } from '~/components/ui';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { useDeleteAction } from '~/data-provider';
import { NewTrashIcon } from '~/components/svg';
import { TrashIcon } from '~/components/svg';
import useLocalize from '~/hooks/useLocalize';
import ActionsInput from './ActionsInput';
import ActionsAuth from './ActionsAuth';
@ -119,33 +120,52 @@ export default function ActionsPanel({
</div>
</button>
</div>
{!!action && (
<div className="absolute right-0 top-6">
<button
type="button"
disabled={!assistant_id || !action.action_id}
className="btn relative bg-transparent text-red-500 hover:bg-gray-100 dark:hover:bg-gray-800"
onClick={() => {
if (!assistant_id) {
return prompt('No assistant_id found, is the assistant created?');
}
const confirmed = confirm('Are you sure you want to delete this action?');
if (confirmed) {
<OGDialog>
<OGDialogTrigger asChild>
<div className="absolute right-0 top-6">
<button
type="button"
disabled={!assistant_id || !action.action_id}
className="btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium"
>
<TrashIcon className="text-red-500" />
</button>
</div>
</OGDialogTrigger>
<OGDialogTemplate
showCloseButton={false}
title={localize('com_ui_delete_action')}
className="max-w-[450px]"
main={
<Label className="text-left text-sm font-medium">
{localize('com_ui_delete_action_confirm')}
</Label>
}
selection={{
selectHandler: () => {
if (!assistant_id) {
return showToast({
message: 'No assistant_id found, is the assistant created?',
status: 'error',
});
}
deleteAction.mutate({
model: assistantMap[endpoint][assistant_id].model,
action_id: action.action_id,
assistant_id,
endpoint,
});
}
},
selectClasses:
'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 transition-color duration-200 text-white',
selectText: localize('com_ui_delete'),
}}
>
<div className="flex w-full items-center justify-center gap-2">
<NewTrashIcon className="icon-md text-red-500" />
</div>
</button>
</div>
/>
</OGDialog>
)}
<div className="text-xl font-medium">{(action ? 'Edit' : 'Add') + ' ' + 'actions'}</div>
<div className="text-token-text-tertiary text-sm">
{localize('com_assistants_actions_info')}