mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-09 12:08:50 +01:00
🗓️ feat: Add Special Variables for Prompts & Agents, Prompt UI Improvements (#7123)
* wip: Add Instructions component for agent configuration
* ✨ feat: Implement DropdownPopup for variable insertion in instructions
* refactor: Enhance variable handling by exporting specialVariables and updating Markdown components
* feat: Add special variable support for current date and user in Instructions component
* refactor: Update handleAddVariable to include localized label
* feat: replace special variables in instructions presets
* chore: update parameter type for user in getListAgents function
* refactor: integrate dayjs for date handling and move replaceSpecialVars function to data-provider
* feat: enhance replaceSpecialVars to include day number in current date format
* feat: integrate replaceSpecialVars for processing agent instructions
* feat: add support for current date & time in replaceSpecialVars function
* feat: add iso_datetime support in replaceSpecialVars function
* fix: enforce text parameter to be a required field in replaceSpecialVars function
* feat: add ISO datetime support in translation file
* fix: disable eslint warning for autoFocus in TextareaAutosize component
* feat: add VariablesDropdown component and integrate it into CreatePromptForm and PromptEditor; update translation for special variables
* fix: CategorySelector and related localizations
* fix: add z-index class to LanguageSTTDropdown for proper stacking context
* fix: add max-height and overflow styles to OGDialogContent in VariableDialog and PreviewPrompt components
* fix: update variable detection logic to exclude special variables and improve regex matching
* fix: improve accessibility text for actions menu in ChatGroupItem component
* fix: adjust max-width and height styles for dialog components and improve markdown rendering for light vs. dark, height/widths, etc.
* fix: remove commented-out code for better readability in PromptVariableGfm component
* fix: handle undefined input parameter in setParams function call
* fix: update variable label types to use TSpecialVarLabel for consistency
* fix: remove outdated information from special variables description in translation file
* fix: enhance unused i18next keys detection for special variable keys
* fix: update color classes for consistency/a11y in category and prompt variable components
* fix: update PromptVariableGfm component and special variable styles for consistency
* fix: improve variable highlighting logic in VariableForm component
* fix: update background color classes for consistency in VariableForm component
* fix: add missing ref parameter to Dialog component in OriginalDialog
* refactor: move navigate call for new conversation to after setConversation update
* refactor: move message query hook to client workspace; fix: handle edge case for navigation from finalHandler creating race condition for response message DB save
* chore: bump librechat-data-provider to 0.7.793
* ci: add unit tests for replaceSpecialVars function
* fix: implement getToolkitKey function for image_gen_oai toolkit filtering/including
* ci: enhance dayjs mock for consistent date/time values in tests
* fix: MCP stdio server fail to start when passing env property
* fix: use optional chaining for clientRef dereferencing in AskController and EditController
feat: add context to saveMessage call in streamResponse utility
* fix: only save error messages if the userMessageId was initialized
* refactor: add isNotAppendable check to disable inputs in ChatForm and useTextarea
* feat: enhance error handling in useEventHandlers and update conversation state in useNewConvo
* refactor: prepend underscore to conversationId in newConversation template
* feat: log aborted conversations with minimal messages and use consistent conversationId generation
---------
Co-authored-by: Olivier Schiavo <olivier.schiavo@wengo.com>
Co-authored-by: aka012 <aka012@neowiz.com>
Co-authored-by: jiasheng <jiashengguo@outlook.com>
This commit is contained in:
Danny Avila
GitHub
parent
0e8041bcac
commit
55f5f2d11a
47 changed files with 707 additions and 195 deletions
|
|
@ -10,6 +10,7 @@ import Action from '~/components/SidePanel/Builder/Action';
|
|||
import { ToolSelectDialog } from '~/components/Tools';
|
||||
import { icons } from '~/hooks/Endpoint/Icons';
|
||||
import { processAgentOption } from '~/utils';
|
||||
import Instructions from './Instructions';
|
||||
import AgentAvatar from './AgentAvatar';
|
||||
import FileContext from './FileContext';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
|
@ -228,39 +229,7 @@ export default function AgentConfig({
|
|||
/>
|
||||
</div>
|
||||
{/* Instructions */}
|
||||
<div className="mb-4">
|
||||
<label className={labelClass} htmlFor="instructions">
|
||||
{localize('com_ui_instructions')}
|
||||
</label>
|
||||
<Controller
|
||||
name="instructions"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<>
|
||||
<textarea
|
||||
{...field}
|
||||
value={field.value ?? ''}
|
||||
// maxLength={32768}
|
||||
className={cn(inputClass, 'min-h-[100px] resize-y')}
|
||||
id="instructions"
|
||||
placeholder={localize('com_agents_instructions_placeholder')}
|
||||
rows={3}
|
||||
aria-label="Agent instructions"
|
||||
aria-required="true"
|
||||
aria-invalid={error ? 'true' : 'false'}
|
||||
/>
|
||||
{error && (
|
||||
<span
|
||||
className="text-sm text-red-500 transition duration-300 ease-in-out"
|
||||
role="alert"
|
||||
>
|
||||
{localize('com_ui_field_required')}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Instructions />
|
||||
{/* Model and Provider */}
|
||||
<div className="mb-4">
|
||||
<label className={labelClass} htmlFor="provider">
|
||||
|
|
|
|||
127
client/src/components/SidePanel/Agents/Instructions.tsx
Normal file
127
client/src/components/SidePanel/Agents/Instructions.tsx
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
import React, { useState, useId } from 'react';
|
||||
import { PlusCircle } from 'lucide-react';
|
||||
import * as Menu from '@ariakit/react/menu';
|
||||
import { specialVariables } from 'librechat-data-provider';
|
||||
import type { TSpecialVarLabel } from 'librechat-data-provider';
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import type { AgentForm } from '~/common';
|
||||
import { cn, defaultTextProps, removeFocusOutlines } from '~/utils';
|
||||
// import ControlCombobox from '~/components/ui/ControlCombobox';
|
||||
import { DropdownPopup } from '~/components';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
const inputClass = cn(
|
||||
defaultTextProps,
|
||||
'flex w-full px-3 py-2 border-border-light bg-surface-secondary focus-visible:ring-2 focus-visible:ring-ring-primary',
|
||||
removeFocusOutlines,
|
||||
);
|
||||
|
||||
interface VariableOption {
|
||||
label: TSpecialVarLabel;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const variableOptions: VariableOption[] = Object.keys(specialVariables).map((key) => ({
|
||||
label: `com_ui_special_var_${key}` as TSpecialVarLabel,
|
||||
value: `{{${key}}}`,
|
||||
}));
|
||||
|
||||
export default function Instructions() {
|
||||
const menuId = useId();
|
||||
const localize = useLocalize();
|
||||
const methods = useFormContext<AgentForm>();
|
||||
const { control, setValue, getValues } = methods;
|
||||
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
const handleAddVariable = (label: TSpecialVarLabel, value: string) => {
|
||||
const currentInstructions = getValues('instructions') || '';
|
||||
const spacer = currentInstructions.length > 0 ? '\n' : '';
|
||||
const prefix = localize(label);
|
||||
setValue('instructions', currentInstructions + spacer + prefix + ': ' + value);
|
||||
setIsMenuOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mb-4">
|
||||
<div className="mb-2 flex items-center">
|
||||
<label className="text-token-text-primary flex-grow font-medium" htmlFor="instructions">
|
||||
{localize('com_ui_instructions')}
|
||||
</label>
|
||||
<div className="ml-auto" title="Add variables to instructions">
|
||||
{/* ControlCombobox implementation
|
||||
<ControlCombobox
|
||||
selectedValue=""
|
||||
displayValue="Add variables"
|
||||
items={variableOptions.map((option) => ({
|
||||
label: option.label,
|
||||
value: option.value,
|
||||
}))}
|
||||
setValue={handleAddVariable}
|
||||
ariaLabel="Add variable to instructions"
|
||||
searchPlaceholder="Search variables"
|
||||
selectPlaceholder="Add"
|
||||
isCollapsed={false}
|
||||
SelectIcon={<PlusCircle className="h-3 w-3 text-text-secondary" />}
|
||||
containerClassName="w-fit"
|
||||
className="h-7 gap-1 rounded-md border border-border-medium bg-surface-secondary px-2 py-0 text-sm text-text-primary transition-colors duration-200 hover:bg-surface-tertiary"
|
||||
iconSide="left"
|
||||
showCarat={false}
|
||||
/>
|
||||
*/}
|
||||
<DropdownPopup
|
||||
portal={true}
|
||||
mountByState={true}
|
||||
unmountOnHide={true}
|
||||
preserveTabOrder={true}
|
||||
isOpen={isMenuOpen}
|
||||
setIsOpen={setIsMenuOpen}
|
||||
trigger={
|
||||
<Menu.MenuButton
|
||||
id="variables-menu-button"
|
||||
aria-label="Add variable to instructions"
|
||||
className="flex h-7 items-center gap-1 rounded-md border border-border-medium bg-surface-secondary px-2 py-0 text-sm text-text-primary transition-colors duration-200 hover:bg-surface-tertiary"
|
||||
>
|
||||
<PlusCircle className="mr-1 h-3 w-3 text-text-secondary" aria-hidden={true} />
|
||||
{localize('com_ui_variables')}
|
||||
</Menu.MenuButton>
|
||||
}
|
||||
items={variableOptions.map((option) => ({
|
||||
label: localize(option.label) || option.label,
|
||||
onClick: () => handleAddVariable(option.label, option.value),
|
||||
}))}
|
||||
menuId={menuId}
|
||||
className="z-30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Controller
|
||||
name="instructions"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<>
|
||||
<textarea
|
||||
{...field}
|
||||
value={field.value ?? ''}
|
||||
className={cn(inputClass, 'min-h-[100px] resize-y')}
|
||||
id="instructions"
|
||||
placeholder={localize('com_agents_instructions_placeholder')}
|
||||
rows={3}
|
||||
aria-label="Agent instructions"
|
||||
aria-required="true"
|
||||
aria-invalid={error ? 'true' : 'false'}
|
||||
/>
|
||||
{error && (
|
||||
<span
|
||||
className="text-sm text-red-500 transition duration-300 ease-in-out"
|
||||
role="alert"
|
||||
>
|
||||
{localize('com_ui_field_required')}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue