mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-23 11:50:14 +01:00
🪨 feat: AWS Bedrock support (#3935)
* feat: Add BedrockIcon component to SVG library * feat: EModelEndpoint.bedrock * feat: first pass, bedrock chat. note: AgentClient is returning `agents` as conversation.endpoint * fix: declare endpoint in initialization step * chore: Update @librechat/agents dependency to version 1.4.5 * feat: backend content aggregation for agents/bedrock * feat: abort agent requests * feat: AWS Bedrock icons * WIP: agent provider schema parsing * chore: Update EditIcon props type * refactor(useGenerationsByLatest): make agents and bedrock editable * refactor: non-assistant message content, parts * fix: Bedrock response `sender` * fix: use endpointOption.model_parameters not endpointOption.modelOptions * fix: types for step handler * refactor: Update Agents.ToolCallDelta type * refactor: Remove unnecessary assignment of parentMessageId in AskController * refactor: remove unnecessary assignment of parentMessageId (agent request handler) * fix(bedrock/agents): message regeneration * refactor: dynamic form elements using react-hook-form Controllers * fix: agent icons/labels for messages * fix: agent actions * fix: use of new dynamic tags causing application crash * refactor: dynamic settings touch-ups * refactor: update Slider component to allow custom track class name * refactor: update DynamicSlider component styles * refactor: use Constants value for GLOBAL_PROJECT_NAME (enum) * feat: agent share global methods/controllers * fix: agents query * fix: `getResponseModel` * fix: share prompt a11y issue * refactor: update SharePrompt dialog theme styles * refactor: explicit typing for SharePrompt * feat: add agent roles/permissions * chore: update @librechat/agents dependency to version 1.4.7 for tool_call_ids edge case * fix(Anthropic): messages.X.content.Y.tool_use.input: Input should be a valid dictionary * fix: handle text parts with tool_call_ids and empty text * fix: role initialization * refactor: don't make instructions required * refactor: improve typing of Text part * fix: setShowStopButton for agents route * chore: remove params for now * fix: add streamBuffer and streamRate to help prevent 'Overloaded' errors from Anthropic API * refactor: remove console.log statement in ContentRender component * chore: typing, rename Context to Delete Button * chore(DeleteButton): logging * refactor(Action): make accessible * style(Action): improve a11y again * refactor: remove use/mention of mongoose sessions * feat: first pass, sharing agents * feat: visual indicator for global agent, remove author when serving to non-author * wip: params * chore: fix typing issues * fix(schemas): typing * refactor: improve accessibility of ListCard component and fix console React warning * wip: reset templates for non-legacy new convos * Revert "wip: params" This reverts commitf8067e91d4. * Revert "refactor: dynamic form elements using react-hook-form Controllers" This reverts commit2150c4815d. * fix(Parameters): types and parameter effect update to only update local state to parameters * refactor: optimize useDebouncedInput hook for better performance * feat: first pass, anthropic bedrock params * chore: paramEndpoints check for endpointType too * fix: maxTokens to use coerceNumber.optional(), * feat: extra chat model params * chore: reduce code repetition * refactor: improve preset title handling in SaveAsPresetDialog component * refactor: improve preset handling in HeaderOptions component * chore: improve typing, replace legacy dialog for SaveAsPresetDialog * feat: save as preset from parameters panel * fix: multi-search in select dropdown when using Option type * refactor: update default showDefault value to false in Dynamic components * feat: Bedrock presets settings * chore: config, fix agents schema, update config version * refactor: update AWS region variable name in bedrock options endpoint to BEDROCK_AWS_DEFAULT_REGION * refactor: update baseEndpointSchema in config.ts to include baseURL property * refactor: update createRun function to include req parameter and set streamRate based on provider * feat: availableRegions via config * refactor: remove unused demo agent controller file * WIP: title * Update @librechat/agents to version 1.5.0 * chore: addTitle.js to handle empty responseText * feat: support images and titles * feat: context token updates * Refactor BaseClient test to use expect.objectContaining * refactor: add model select, remove header options params, move side panel params below prompts * chore: update models list, catch title error * feat: model service for bedrock models (env) * chore: Remove verbose debug log in AgentClient class following stream * feat(bedrock): track token spend; fix: token rates, value key mapping for AWS models * refactor: handle streamRate in `handleLLMNewToken` callback * chore: AWS Bedrock example config in `.env.example` * refactor: Rename bedrockMeta to bedrockGeneral in settings.ts and use for AI21 and Amazon Bedrock providers * refactor: Update `.env.example` with AWS Bedrock model IDs URL and additional notes * feat: titleModel support for bedrock * refactor: Update `.env.example` with additional notes for AWS Bedrock model IDs
This commit is contained in:
Danny Avila
GitHub
parent
8c14360263
commit
d59b62174f
134 changed files with 3684 additions and 1213 deletions
|
|
@ -11,9 +11,10 @@ import Action from '~/components/SidePanel/Builder/Action';
|
|||
import { useLocalize } from '~/hooks';
|
||||
import { ToolSelectDialog } from '~/components/Tools';
|
||||
import { useToastContext } from '~/Providers';
|
||||
import ContextButton from './ContextButton';
|
||||
import { Spinner } from '~/components/svg';
|
||||
import DeleteButton from './DeleteButton';
|
||||
import AgentAvatar from './AgentAvatar';
|
||||
import ShareAgent from './ShareAgent';
|
||||
import AgentTool from './AgentTool';
|
||||
import { Panel } from '~/common';
|
||||
|
||||
|
|
@ -57,14 +58,14 @@ export default function AgentConfig({
|
|||
() => agentsConfig?.capabilities?.includes(Capabilities.actions),
|
||||
[agentsConfig],
|
||||
);
|
||||
const retrievalEnabled = useMemo(
|
||||
() => agentsConfig?.capabilities?.includes(Capabilities.retrieval),
|
||||
[agentsConfig],
|
||||
);
|
||||
const codeEnabled = useMemo(
|
||||
() => agentsConfig?.capabilities?.includes(Capabilities.code_interpreter),
|
||||
[agentsConfig],
|
||||
);
|
||||
// const retrievalEnabled = useMemo(
|
||||
// () => agentsConfig?.capabilities?.includes(Capabilities.retrieval),
|
||||
// [agentsConfig],
|
||||
// );
|
||||
// const codeEnabled = useMemo(
|
||||
// () => agentsConfig?.capabilities?.includes(Capabilities.code_interpreter),
|
||||
// [agentsConfig],
|
||||
// );
|
||||
|
||||
/* Mutations */
|
||||
const update = useUpdateAgentMutation({
|
||||
|
|
@ -190,7 +191,7 @@ export default function AgentConfig({
|
|||
name="id"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<p className="h-3 text-xs italic text-gray-600" aria-live="polite">
|
||||
<p className="h-3 text-xs italic text-text-secondary" aria-live="polite">
|
||||
{field.value}
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -221,12 +222,11 @@ export default function AgentConfig({
|
|||
{/* Instructions */}
|
||||
<div className="mb-6">
|
||||
<label className={labelClass} htmlFor="instructions">
|
||||
{localize('com_ui_instructions')} <span className="text-red-500">*</span>
|
||||
{localize('com_ui_instructions')}
|
||||
</label>
|
||||
<Controller
|
||||
name="instructions"
|
||||
control={control}
|
||||
rules={{ required: true, minLength: 1 }}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<>
|
||||
<textarea
|
||||
|
|
@ -276,16 +276,16 @@ export default function AgentConfig({
|
|||
/>
|
||||
</div>
|
||||
)}
|
||||
<span>{model ? model : localize('com_ui_select_model')}</span>
|
||||
<span>{model != null ? model : localize('com_ui_select_model')}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/* Agent Tools & Actions */}
|
||||
<div className="mb-6">
|
||||
<label className={labelClass}>
|
||||
{`${toolsEnabled ? localize('com_assistants_tools') : ''}
|
||||
${toolsEnabled && actionsEnabled ? ' + ' : ''}
|
||||
${actionsEnabled ? localize('com_assistants_actions') : ''}`}
|
||||
{`${toolsEnabled === true ? localize('com_assistants_tools') : ''}
|
||||
${toolsEnabled === true && actionsEnabled === true ? ' + ' : ''}
|
||||
${actionsEnabled === true ? localize('com_assistants_actions') : ''}`}
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
{tools?.map((func, i) => (
|
||||
|
|
@ -339,11 +339,16 @@ export default function AgentConfig({
|
|||
</div>
|
||||
{/* Context Button */}
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<ContextButton
|
||||
<DeleteButton
|
||||
agent_id={agent_id}
|
||||
setCurrentAgentId={setCurrentAgentId}
|
||||
createMutation={create}
|
||||
/>
|
||||
<ShareAgent
|
||||
agent_id={agent_id}
|
||||
agentName={agent?.name ?? ''}
|
||||
projectIds={agent?.projectIds ?? []}
|
||||
/>
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
className="btn btn-primary focus:shadow-outline flex w-full items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { Plus } from 'lucide-react';
|
||||
import { Plus, EarthIcon } from 'lucide-react';
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import { useGetStartupConfig } from 'librechat-data-provider/react-query';
|
||||
import { Capabilities, defaultAgentFormValues } from 'librechat-data-provider';
|
||||
import type { AgentCapabilities, AgentForm, TAgentOption } from '~/common';
|
||||
import type { Agent, AgentCreateParams } from 'librechat-data-provider';
|
||||
import type { UseMutationResult } from '@tanstack/react-query';
|
||||
import type { UseFormReset } from 'react-hook-form';
|
||||
import type { AgentCapabilities, AgentForm, TAgentOption } from '~/common';
|
||||
import { cn, createDropdownSetter, createProviderOption, processAgentOption } from '~/utils';
|
||||
import { useListAgentsQuery, useGetAgentByIdQuery } from '~/data-provider';
|
||||
import SelectDropDown from '~/components/ui/SelectDropDown';
|
||||
|
|
@ -16,7 +17,7 @@ const keys = new Set(Object.keys(defaultAgentFormValues));
|
|||
export default function AgentSelect({
|
||||
reset,
|
||||
value: currentAgentValue,
|
||||
selectedAgentId,
|
||||
selectedAgentId = null,
|
||||
setCurrentAgentId,
|
||||
createMutation,
|
||||
}: {
|
||||
|
|
@ -31,21 +32,33 @@ export default function AgentSelect({
|
|||
// const fileMap = useFileMapContext();
|
||||
const lastSelectedAgent = useRef<string | null>(null);
|
||||
|
||||
const { data: agents = [] } = useListAgentsQuery(undefined, {
|
||||
select: (res) => res.data.map((agent) => processAgentOption(agent /*, fileMap */)),
|
||||
const { data: startupConfig } = useGetStartupConfig();
|
||||
const { data: agents = null } = useListAgentsQuery(undefined, {
|
||||
select: (res) =>
|
||||
res.data.map((agent) =>
|
||||
processAgentOption({
|
||||
agent,
|
||||
instanceProjectId: startupConfig?.instanceProjectId,
|
||||
/* fileMap */
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
const agentQuery = useGetAgentByIdQuery(selectedAgentId ?? '', {
|
||||
enabled: !!selectedAgentId,
|
||||
enabled: !!(selectedAgentId ?? ''),
|
||||
});
|
||||
|
||||
const resetAgentForm = useCallback(
|
||||
(fullAgent: Agent) => {
|
||||
const { instanceProjectId } = startupConfig ?? {};
|
||||
const isGlobal =
|
||||
(instanceProjectId != null && fullAgent.projectIds?.includes(instanceProjectId)) ?? false;
|
||||
const update = {
|
||||
...fullAgent,
|
||||
provider: createProviderOption(fullAgent.provider),
|
||||
label: fullAgent.name ?? '',
|
||||
value: fullAgent.id ?? '',
|
||||
value: fullAgent.id || '',
|
||||
icon: isGlobal ? <EarthIcon className={'icon-lg text-green-400'} /> : null,
|
||||
};
|
||||
|
||||
const actions: AgentCapabilities = {
|
||||
|
|
@ -84,7 +97,7 @@ export default function AgentSelect({
|
|||
const onSelect = useCallback(
|
||||
(selectedId: string) => {
|
||||
const agentExists = !!(selectedId
|
||||
? agents.find((agent) => agent.id === selectedId)
|
||||
? (agents ?? []).find((agent) => agent.id === selectedId)
|
||||
: undefined);
|
||||
|
||||
createMutation.reset();
|
||||
|
|
@ -120,7 +133,7 @@ export default function AgentSelect({
|
|||
return;
|
||||
}
|
||||
|
||||
if (selectedAgentId && agents) {
|
||||
if (selectedAgentId != null && selectedAgentId !== '' && agents) {
|
||||
timerId = setTimeout(() => {
|
||||
lastSelectedAgent.current = selectedAgentId;
|
||||
onSelect(selectedAgentId);
|
||||
|
|
@ -136,8 +149,9 @@ export default function AgentSelect({
|
|||
|
||||
const createAgent = localize('com_ui_create') + ' ' + localize('com_ui_agent');
|
||||
const hasAgentValue = !!(typeof currentAgentValue === 'object'
|
||||
? currentAgentValue.value
|
||||
: currentAgentValue);
|
||||
? currentAgentValue.value != null && currentAgentValue.value !== ''
|
||||
: typeof currentAgentValue !== 'undefined');
|
||||
|
||||
return (
|
||||
<SelectDropDown
|
||||
value={!hasAgentValue ? createAgent : (currentAgentValue as TAgentOption)}
|
||||
|
|
@ -151,9 +165,11 @@ export default function AgentSelect({
|
|||
]
|
||||
}
|
||||
iconSide="left"
|
||||
optionIconSide="right"
|
||||
showAbove={false}
|
||||
showLabel={false}
|
||||
emptyTitle={true}
|
||||
showOptionIcon={true}
|
||||
containerClassName="flex-grow"
|
||||
searchClassName="dark:from-gray-850"
|
||||
searchPlaceholder={localize('com_agents_search_name')}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ import { OGDialog, OGDialogTrigger, Label } from '~/components/ui';
|
|||
import { useChatContext, useToastContext } from '~/Providers';
|
||||
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
|
||||
import { useLocalize, useSetIndexOptions } from '~/hooks';
|
||||
import { cn, removeFocusOutlines, logger } from '~/utils';
|
||||
import { useDeleteAgentMutation } from '~/data-provider';
|
||||
import { cn, removeFocusOutlines } from '~/utils/';
|
||||
import { TrashIcon } from '~/components/svg';
|
||||
|
||||
export default function ContextButton({
|
||||
export default function DeleteButton({
|
||||
agent_id,
|
||||
setCurrentAgentId,
|
||||
createMutation,
|
||||
|
|
@ -34,8 +34,8 @@ export default function ContextButton({
|
|||
status: 'success',
|
||||
});
|
||||
|
||||
if (createMutation.data?.id) {
|
||||
console.log('[deleteAgent] resetting createMutation');
|
||||
if (createMutation.data?.id ?? '') {
|
||||
logger.log('agents', 'resetting createMutation');
|
||||
createMutation.reset();
|
||||
}
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ export default function ContextButton({
|
|||
return setOption('agent_id')(firstAgent.id);
|
||||
}
|
||||
|
||||
const currentAgent = updatedList?.find((agent) => agent.id === conversation?.agent_id);
|
||||
const currentAgent = updatedList.find((agent) => agent.id === conversation?.agent_id);
|
||||
|
||||
if (currentAgent) {
|
||||
setCurrentAgentId(currentAgent.id);
|
||||
|
|
@ -78,6 +78,7 @@ export default function ContextButton({
|
|||
'btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium',
|
||||
removeFocusOutlines,
|
||||
)}
|
||||
aria-label={localize('com_ui_delete') + ' ' + localize('com_ui_agent')}
|
||||
type="button"
|
||||
>
|
||||
<div className="flex w-full items-center justify-center gap-2 text-red-500">
|
||||
206
client/src/components/SidePanel/Agents/ShareAgent.tsx
Normal file
206
client/src/components/SidePanel/Agents/ShareAgent.tsx
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
import React, { useEffect, useMemo } from 'react';
|
||||
import { Share2Icon } from 'lucide-react';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { Permissions } from 'librechat-data-provider';
|
||||
import { useGetStartupConfig } from 'librechat-data-provider/react-query';
|
||||
import type { TStartupConfig, AgentUpdateParams } from 'librechat-data-provider';
|
||||
import {
|
||||
Switch,
|
||||
OGDialog,
|
||||
OGDialogTitle,
|
||||
OGDialogClose,
|
||||
OGDialogContent,
|
||||
OGDialogTrigger,
|
||||
} from '~/components/ui';
|
||||
import { useUpdateAgentMutation } from '~/data-provider';
|
||||
import { cn, removeFocusOutlines } from '~/utils';
|
||||
import { useToastContext } from '~/Providers';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
type FormValues = {
|
||||
[Permissions.SHARED_GLOBAL]: boolean;
|
||||
};
|
||||
|
||||
export default function ShareAgent({
|
||||
agent_id = '',
|
||||
agentName,
|
||||
projectIds = [],
|
||||
}: {
|
||||
agent_id?: string;
|
||||
agentName?: string;
|
||||
projectIds?: string[];
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const { data: startupConfig = {} as TStartupConfig, isFetching } = useGetStartupConfig();
|
||||
const { instanceProjectId } = startupConfig;
|
||||
const agentIsGlobal = useMemo(
|
||||
() => !!projectIds.includes(instanceProjectId),
|
||||
[projectIds, instanceProjectId],
|
||||
);
|
||||
|
||||
const {
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<FormValues>({
|
||||
mode: 'onChange',
|
||||
defaultValues: {
|
||||
[Permissions.SHARED_GLOBAL]: agentIsGlobal,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setValue(Permissions.SHARED_GLOBAL, agentIsGlobal);
|
||||
}, [agentIsGlobal, setValue]);
|
||||
|
||||
const updateAgent = useUpdateAgentMutation({
|
||||
onSuccess: (data) => {
|
||||
showToast({
|
||||
message: `${localize('com_assistants_update_success')} ${
|
||||
data.name ?? localize('com_ui_agent')
|
||||
}`,
|
||||
status: 'success',
|
||||
});
|
||||
},
|
||||
onError: (err) => {
|
||||
const error = err as Error;
|
||||
showToast({
|
||||
message: `${localize('com_agents_update_error')}${
|
||||
error.message ? ` ${localize('com_ui_error')}: ${error.message}` : ''
|
||||
}`,
|
||||
status: 'error',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
if (!agent_id || !instanceProjectId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const onSubmit = (data: FormValues) => {
|
||||
if (!agent_id || !instanceProjectId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {} as AgentUpdateParams;
|
||||
|
||||
if (data[Permissions.SHARED_GLOBAL]) {
|
||||
payload.projectIds = [startupConfig.instanceProjectId];
|
||||
} else {
|
||||
payload.removeProjectIds = [startupConfig.instanceProjectId];
|
||||
}
|
||||
|
||||
updateAgent.mutate({
|
||||
agent_id,
|
||||
data: payload,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<OGDialog>
|
||||
<OGDialogTrigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
'btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium',
|
||||
removeFocusOutlines,
|
||||
)}
|
||||
aria-label={localize(
|
||||
'com_ui_share_var',
|
||||
agentName != null && agentName !== '' ? `"${agentName}"` : localize('com_ui_agent'),
|
||||
)}
|
||||
type="button"
|
||||
>
|
||||
<div className="flex w-full items-center justify-center gap-2 text-blue-500">
|
||||
<Share2Icon className="icon-md h-4 w-4" />
|
||||
</div>
|
||||
</button>
|
||||
</OGDialogTrigger>
|
||||
<OGDialogContent className="border-border-light bg-surface-primary-alt text-text-secondary">
|
||||
<OGDialogTitle>
|
||||
{localize(
|
||||
'com_ui_share_var',
|
||||
agentName != null && agentName !== '' ? `"${agentName}"` : localize('com_ui_agent'),
|
||||
)}
|
||||
</OGDialogTitle>
|
||||
<form
|
||||
className="p-2"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleSubmit(onSubmit)(e);
|
||||
}}
|
||||
>
|
||||
<div className="mb-4 flex items-center justify-between gap-2 py-4">
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="mr-2 cursor-pointer"
|
||||
onClick={() =>
|
||||
setValue(Permissions.SHARED_GLOBAL, !getValues(Permissions.SHARED_GLOBAL), {
|
||||
shouldDirty: true,
|
||||
})
|
||||
}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
setValue(Permissions.SHARED_GLOBAL, !getValues(Permissions.SHARED_GLOBAL), {
|
||||
shouldDirty: true,
|
||||
});
|
||||
}
|
||||
}}
|
||||
aria-checked={getValues(Permissions.SHARED_GLOBAL)}
|
||||
role="checkbox"
|
||||
>
|
||||
{localize('com_ui_share_to_all_users')}
|
||||
</button>
|
||||
<label htmlFor={Permissions.SHARED_GLOBAL} className="select-none">
|
||||
{agentIsGlobal && (
|
||||
<span className="ml-2 text-xs">{localize('com_ui_agent_shared_to_all')}</span>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
<Controller
|
||||
name={Permissions.SHARED_GLOBAL}
|
||||
control={control}
|
||||
disabled={isFetching || updateAgent.isLoading || !instanceProjectId}
|
||||
rules={{
|
||||
validate: (value) => {
|
||||
const isValid = !(value && agentIsGlobal);
|
||||
if (!isValid) {
|
||||
showToast({
|
||||
message: localize('com_ui_agent_already_shared_to_all'),
|
||||
status: 'warning',
|
||||
});
|
||||
}
|
||||
return isValid;
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<Switch
|
||||
{...field}
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field.value.toString()}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<OGDialogClose asChild>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || isFetching}
|
||||
className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
|
||||
>
|
||||
{localize('com_ui_save')}
|
||||
</button>
|
||||
</OGDialogClose>
|
||||
</div>
|
||||
</form>
|
||||
</OGDialogContent>
|
||||
</OGDialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,32 +1,40 @@
|
|||
import { useState } from 'react';
|
||||
import type { Action } from 'librechat-data-provider';
|
||||
import GearIcon from '~/components/svg/GearIcon';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
export default function Action({ action, onClick }: { action: Action; onClick: () => void }) {
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={onClick}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
onClick();
|
||||
}
|
||||
}}
|
||||
className="group flex w-full rounded-lg border border-border-medium text-sm hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-text-primary"
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => setIsHovering(false)}
|
||||
aria-label={`Action for ${action.metadata.domain}`}
|
||||
>
|
||||
<div
|
||||
onClick={onClick}
|
||||
className="flex w-full rounded-lg text-sm hover:cursor-pointer"
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => setIsHovering(false)}
|
||||
className="h-9 grow overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2"
|
||||
style={{ wordBreak: 'break-all' }}
|
||||
>
|
||||
<div
|
||||
className="h-9 grow whitespace-nowrap px-3 py-2"
|
||||
style={{ textOverflow: 'ellipsis', wordBreak: 'break-all', overflow: 'hidden' }}
|
||||
>
|
||||
{action.metadata.domain}
|
||||
</div>
|
||||
{isHovering && (
|
||||
<button
|
||||
type="button"
|
||||
className="transition-colors flex h-9 w-9 min-w-9 items-center justify-center rounded-lg duration-200 hover:bg-gray-200 dark:hover:bg-gray-700"
|
||||
>
|
||||
<GearIcon className="icon-sm" />
|
||||
</button>
|
||||
{action.metadata.domain}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'h-9 w-9 min-w-9 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-tertiary focus:outline-none focus:ring-2 focus:ring-text-primary group-focus:flex',
|
||||
isHovering ? 'flex' : 'hidden',
|
||||
)}
|
||||
aria-label="Settings"
|
||||
>
|
||||
<GearIcon className="icon-sm" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,17 +9,17 @@ import OptionHover from './OptionHover';
|
|||
import { ESide } from '~/common';
|
||||
|
||||
function DynamicCheckbox({
|
||||
label,
|
||||
label = '',
|
||||
settingKey,
|
||||
defaultValue,
|
||||
description,
|
||||
description = '',
|
||||
columnSpan,
|
||||
setOption,
|
||||
optionType,
|
||||
readonly = false,
|
||||
showDefault = true,
|
||||
labelCode,
|
||||
descriptionCode,
|
||||
showDefault = false,
|
||||
labelCode = false,
|
||||
descriptionCode = false,
|
||||
conversation,
|
||||
}: DynamicSettingProps) {
|
||||
const localize = useLocalize();
|
||||
|
|
@ -57,7 +57,7 @@ function DynamicCheckbox({
|
|||
return (
|
||||
<div
|
||||
className={`flex flex-col items-center justify-start gap-6 ${
|
||||
columnSpan ? `col-span-${columnSpan}` : 'col-span-full'
|
||||
columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
|
||||
}`}
|
||||
>
|
||||
<HoverCard openDelay={300}>
|
||||
|
|
@ -67,11 +67,11 @@ function DynamicCheckbox({
|
|||
htmlFor={`${settingKey}-dynamic-checkbox`}
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{labelCode ? localize(label ?? '') || label : label ?? settingKey}{' '}
|
||||
{labelCode ? localize(label) ?? label : label || settingKey}{' '}
|
||||
{showDefault && (
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default')}:{' '}
|
||||
{defaultValue ? localize('com_ui_yes') : localize('com_ui_no')})
|
||||
{defaultValue != null ? localize('com_ui_yes') : localize('com_ui_no')})
|
||||
</small>
|
||||
)}
|
||||
</Label>
|
||||
|
|
@ -86,7 +86,7 @@ function DynamicCheckbox({
|
|||
</HoverCardTrigger>
|
||||
{description && (
|
||||
<OptionHover
|
||||
description={descriptionCode ? localize(description) || description : description}
|
||||
description={descriptionCode ? localize(description) ?? description : description}
|
||||
side={ESide.Left}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
132
client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
Normal file
132
client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
import { useMemo, useState, useCallback } from 'react';
|
||||
import { OptionTypes } from 'librechat-data-provider';
|
||||
import type { DynamicSettingProps } from 'librechat-data-provider';
|
||||
import { Label, HoverCard, HoverCardTrigger } from '~/components/ui';
|
||||
import ControlCombobox from '~/components/ui/ControlCombobox';
|
||||
import { useLocalize, useParameterEffects } from '~/hooks';
|
||||
import { useChatContext } from '~/Providers';
|
||||
import OptionHover from './OptionHover';
|
||||
import { ESide } from '~/common';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
function DynamicCombobox({
|
||||
label = '',
|
||||
settingKey,
|
||||
defaultValue,
|
||||
description = '',
|
||||
columnSpan,
|
||||
setOption,
|
||||
optionType,
|
||||
options: _options,
|
||||
items: _items,
|
||||
showLabel = true,
|
||||
showDefault = false,
|
||||
labelCode = false,
|
||||
descriptionCode = false,
|
||||
searchPlaceholderCode = false,
|
||||
selectPlaceholderCode = false,
|
||||
conversation,
|
||||
isCollapsed = false,
|
||||
SelectIcon = null,
|
||||
selectPlaceholder = '',
|
||||
searchPlaceholder = '',
|
||||
}: DynamicSettingProps & { isCollapsed?: boolean; SelectIcon?: React.ReactNode }) {
|
||||
const localize = useLocalize();
|
||||
const { preset } = useChatContext();
|
||||
const [inputValue, setInputValue] = useState<string | null>(null);
|
||||
|
||||
const selectedValue = useMemo(() => {
|
||||
if (optionType === OptionTypes.Custom) {
|
||||
return inputValue;
|
||||
}
|
||||
return conversation?.[settingKey] ?? defaultValue;
|
||||
}, [conversation, defaultValue, optionType, settingKey, inputValue]);
|
||||
|
||||
const items = useMemo(() => {
|
||||
if (_items != null) {
|
||||
return _items;
|
||||
}
|
||||
return (_options ?? []).map((option) => ({
|
||||
label: option,
|
||||
value: option,
|
||||
}));
|
||||
}, [_options, _items]);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(value: string) => {
|
||||
if (optionType === OptionTypes.Custom) {
|
||||
setInputValue(value);
|
||||
} else {
|
||||
setOption(settingKey)(value);
|
||||
}
|
||||
},
|
||||
[optionType, setOption, settingKey],
|
||||
);
|
||||
|
||||
useParameterEffects({
|
||||
preset,
|
||||
settingKey,
|
||||
defaultValue,
|
||||
conversation,
|
||||
inputValue,
|
||||
setInputValue,
|
||||
preventDelayedUpdate: true,
|
||||
});
|
||||
|
||||
const options = items ?? _options ?? [];
|
||||
if (options.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-start gap-6',
|
||||
columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full',
|
||||
)}
|
||||
>
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
{showLabel === true && (
|
||||
<div className="flex w-full justify-between">
|
||||
<Label
|
||||
htmlFor={`${settingKey}-dynamic-combobox`}
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{labelCode ? localize(label) ?? label : label || settingKey}
|
||||
{showDefault && (
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default')}: {defaultValue})
|
||||
</small>
|
||||
)}
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
<ControlCombobox
|
||||
displayValue={selectedValue}
|
||||
selectPlaceholder={
|
||||
selectPlaceholderCode === true ? localize(selectPlaceholder) : selectPlaceholder
|
||||
}
|
||||
searchPlaceholder={
|
||||
searchPlaceholderCode === true ? localize(searchPlaceholder) : searchPlaceholder
|
||||
}
|
||||
isCollapsed={isCollapsed}
|
||||
ariaLabel={settingKey}
|
||||
selectedValue={selectedValue ?? ''}
|
||||
setValue={handleChange}
|
||||
items={items}
|
||||
SelectIcon={SelectIcon}
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
{description && (
|
||||
<OptionHover
|
||||
description={descriptionCode ? localize(description) ?? description : description}
|
||||
side={ESide.Left}
|
||||
/>
|
||||
)}
|
||||
</HoverCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DynamicCombobox;
|
||||
|
|
@ -9,19 +9,22 @@ import { ESide } from '~/common';
|
|||
import { cn } from '~/utils';
|
||||
|
||||
function DynamicDropdown({
|
||||
label,
|
||||
label = '',
|
||||
settingKey,
|
||||
defaultValue,
|
||||
description,
|
||||
description = '',
|
||||
columnSpan,
|
||||
setOption,
|
||||
optionType,
|
||||
options,
|
||||
// type: _type,
|
||||
readonly = false,
|
||||
showDefault = true,
|
||||
labelCode,
|
||||
descriptionCode,
|
||||
showLabel = true,
|
||||
showDefault = false,
|
||||
labelCode = false,
|
||||
descriptionCode = false,
|
||||
placeholder = '',
|
||||
placeholderCode = false,
|
||||
conversation,
|
||||
}: DynamicSettingProps) {
|
||||
const localize = useLocalize();
|
||||
|
|
@ -64,24 +67,26 @@ function DynamicDropdown({
|
|||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-start gap-6',
|
||||
columnSpan ? `col-span-${columnSpan}` : 'col-span-full',
|
||||
columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full',
|
||||
)}
|
||||
>
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex w-full justify-between">
|
||||
<Label
|
||||
htmlFor={`${settingKey}-dynamic-dropdown`}
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{labelCode ? localize(label ?? '') || label : label ?? settingKey}
|
||||
{showDefault && (
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default')}: {defaultValue})
|
||||
</small>
|
||||
)}
|
||||
</Label>
|
||||
</div>
|
||||
{showLabel === true && (
|
||||
<div className="flex w-full justify-between">
|
||||
<Label
|
||||
htmlFor={`${settingKey}-dynamic-dropdown`}
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{labelCode ? localize(label) ?? label : label || settingKey}
|
||||
{showDefault && (
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default')}: {defaultValue})
|
||||
</small>
|
||||
)}
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
<SelectDropDown
|
||||
showLabel={false}
|
||||
emptyTitle={true}
|
||||
|
|
@ -91,11 +96,12 @@ function DynamicDropdown({
|
|||
availableValues={options}
|
||||
containerClassName="w-full"
|
||||
id={`${settingKey}-dynamic-dropdown`}
|
||||
placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
{description && (
|
||||
<OptionHover
|
||||
description={descriptionCode ? localize(description) || description : description}
|
||||
description={descriptionCode ? localize(description) ?? description : description}
|
||||
side={ESide.Left}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -9,25 +9,25 @@ import OptionHover from './OptionHover';
|
|||
import { ESide } from '~/common';
|
||||
|
||||
function DynamicInput({
|
||||
label,
|
||||
label = '',
|
||||
settingKey,
|
||||
defaultValue,
|
||||
description,
|
||||
description = '',
|
||||
columnSpan,
|
||||
setOption,
|
||||
optionType,
|
||||
placeholder,
|
||||
placeholder = '',
|
||||
readonly = false,
|
||||
showDefault = true,
|
||||
labelCode,
|
||||
descriptionCode,
|
||||
placeholderCode,
|
||||
showDefault = false,
|
||||
labelCode = false,
|
||||
descriptionCode = false,
|
||||
placeholderCode = false,
|
||||
conversation,
|
||||
}: DynamicSettingProps) {
|
||||
const localize = useLocalize();
|
||||
const { preset } = useChatContext();
|
||||
|
||||
const [setInputValue, inputValue] = useDebouncedInput<string | null>({
|
||||
const [setInputValue, inputValue, setLocalValue] = useDebouncedInput<string | null>({
|
||||
optionKey: optionType !== OptionTypes.Custom ? settingKey : undefined,
|
||||
initialValue:
|
||||
optionType !== OptionTypes.Custom
|
||||
|
|
@ -43,13 +43,13 @@ function DynamicInput({
|
|||
defaultValue: typeof defaultValue === 'undefined' ? '' : defaultValue,
|
||||
conversation,
|
||||
inputValue,
|
||||
setInputValue,
|
||||
setInputValue: setLocalValue,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col items-center justify-start gap-6 ${
|
||||
columnSpan ? `col-span-${columnSpan}` : 'col-span-full'
|
||||
columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
|
||||
}`}
|
||||
>
|
||||
<HoverCard openDelay={300}>
|
||||
|
|
@ -59,11 +59,11 @@ function DynamicInput({
|
|||
htmlFor={`${settingKey}-dynamic-input`}
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{labelCode ? localize(label ?? '') || label : label ?? settingKey}{' '}
|
||||
{labelCode ? localize(label) ?? label : label || settingKey}{' '}
|
||||
{showDefault && (
|
||||
<small className="opacity-40">
|
||||
(
|
||||
{typeof defaultValue === 'undefined' || !(defaultValue as string)?.length
|
||||
{typeof defaultValue === 'undefined' || !(defaultValue as string).length
|
||||
? localize('com_endpoint_default_blank')
|
||||
: `${localize('com_endpoint_default')}: ${defaultValue}`}
|
||||
)
|
||||
|
|
@ -76,13 +76,13 @@ function DynamicInput({
|
|||
disabled={readonly}
|
||||
value={inputValue ?? ''}
|
||||
onChange={setInputValue}
|
||||
placeholder={placeholderCode ? localize(placeholder ?? '') || placeholder : placeholder}
|
||||
placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
|
||||
className={cn(defaultTextProps, 'flex h-10 max-h-10 w-full resize-none px-3 py-2')}
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
{description && (
|
||||
<OptionHover
|
||||
description={descriptionCode ? localize(description) || description : description}
|
||||
description={descriptionCode ? localize(description) ?? description : description}
|
||||
side={ESide.Left}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -9,19 +9,19 @@ import { useChatContext } from '~/Providers';
|
|||
import OptionHover from './OptionHover';
|
||||
|
||||
function DynamicInputNumber({
|
||||
label,
|
||||
label = '',
|
||||
settingKey,
|
||||
defaultValue,
|
||||
description,
|
||||
description = '',
|
||||
columnSpan,
|
||||
setOption,
|
||||
optionType,
|
||||
readonly = false,
|
||||
showDefault = true,
|
||||
labelCode,
|
||||
descriptionCode,
|
||||
placeholderCode,
|
||||
placeholder,
|
||||
showDefault = false,
|
||||
labelCode = false,
|
||||
descriptionCode = false,
|
||||
placeholderCode = false,
|
||||
placeholder = '',
|
||||
conversation,
|
||||
range,
|
||||
className = '',
|
||||
|
|
@ -30,7 +30,7 @@ function DynamicInputNumber({
|
|||
const localize = useLocalize();
|
||||
const { preset } = useChatContext();
|
||||
|
||||
const [setInputValue, inputValue] = useDebouncedInput<ValueType | null>({
|
||||
const [setInputValue, inputValue, setLocalValue] = useDebouncedInput<ValueType | null>({
|
||||
optionKey: optionType !== OptionTypes.Custom ? settingKey : undefined,
|
||||
initialValue:
|
||||
optionType !== OptionTypes.Custom
|
||||
|
|
@ -46,14 +46,14 @@ function DynamicInputNumber({
|
|||
defaultValue: typeof defaultValue === 'undefined' ? '' : defaultValue,
|
||||
conversation,
|
||||
inputValue,
|
||||
setInputValue,
|
||||
setInputValue: setLocalValue,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-start gap-6',
|
||||
columnSpan ? `col-span-${columnSpan}` : 'col-span-full',
|
||||
columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
|
|
@ -64,7 +64,7 @@ function DynamicInputNumber({
|
|||
htmlFor={`${settingKey}-dynamic-setting`}
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{labelCode ? localize(label ?? '') || label : label ?? settingKey}{' '}
|
||||
{labelCode ? localize(label) ?? label : label || settingKey}{' '}
|
||||
{showDefault && (
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default')}: {defaultValue})
|
||||
|
|
@ -79,9 +79,7 @@ function DynamicInputNumber({
|
|||
min={range?.min}
|
||||
max={range?.max}
|
||||
step={range?.step}
|
||||
placeholder={
|
||||
placeholderCode ? localize(placeholder ?? '') || placeholder : placeholder
|
||||
}
|
||||
placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
|
|
@ -96,7 +94,7 @@ function DynamicInputNumber({
|
|||
</HoverCardTrigger>
|
||||
{description && (
|
||||
<OptionHover
|
||||
description={descriptionCode ? localize(description) || description : description}
|
||||
description={descriptionCode ? localize(description) ?? description : description}
|
||||
side={ESide.Left}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -9,27 +9,30 @@ import { useChatContext } from '~/Providers';
|
|||
import OptionHover from './OptionHover';
|
||||
|
||||
function DynamicSlider({
|
||||
label,
|
||||
label = '',
|
||||
settingKey,
|
||||
defaultValue,
|
||||
range,
|
||||
description,
|
||||
description = '',
|
||||
columnSpan,
|
||||
setOption,
|
||||
optionType,
|
||||
options,
|
||||
readonly = false,
|
||||
showDefault = true,
|
||||
showDefault = false,
|
||||
includeInput = true,
|
||||
labelCode,
|
||||
descriptionCode,
|
||||
labelCode = false,
|
||||
descriptionCode = false,
|
||||
conversation,
|
||||
}: DynamicSettingProps) {
|
||||
const localize = useLocalize();
|
||||
const { preset } = useChatContext();
|
||||
const isEnum = useMemo(() => !range && options && options.length > 0, [options, range]);
|
||||
const isEnum = useMemo(
|
||||
() => (!range && options && options.length > 0) ?? false,
|
||||
[options, range],
|
||||
);
|
||||
|
||||
const [setInputValue, inputValue] = useDebouncedInput<string | number>({
|
||||
const [setInputValue, inputValue, setLocalValue] = useDebouncedInput<string | number>({
|
||||
optionKey: optionType !== OptionTypes.Custom ? settingKey : undefined,
|
||||
initialValue: optionType !== OptionTypes.Custom ? conversation?.[settingKey] : defaultValue,
|
||||
setter: () => ({}),
|
||||
|
|
@ -43,7 +46,7 @@ function DynamicSlider({
|
|||
defaultValue,
|
||||
conversation,
|
||||
inputValue,
|
||||
setInputValue,
|
||||
setInputValue: setLocalValue,
|
||||
preventDelayedUpdate: isEnum,
|
||||
});
|
||||
|
||||
|
|
@ -87,6 +90,16 @@ function DynamicSlider({
|
|||
[isEnum, setInputValue, valueToEnumOption],
|
||||
);
|
||||
|
||||
const max = useMemo(() => {
|
||||
if (isEnum && options) {
|
||||
return options.length - 1;
|
||||
} else if (range) {
|
||||
return range.max;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}, [isEnum, options, range]);
|
||||
|
||||
if (!range && !isEnum) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -94,18 +107,18 @@ function DynamicSlider({
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-start gap-6',
|
||||
columnSpan ? `col-span-${columnSpan}` : 'col-span-full',
|
||||
'flex flex-col items-center justify-start gap-2',
|
||||
columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full',
|
||||
)}
|
||||
>
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<Label
|
||||
htmlFor={`${settingKey}-dynamic-setting`}
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{labelCode ? localize(label ?? '') || label : label ?? settingKey}{' '}
|
||||
{labelCode ? localize(label) ?? label : label || settingKey}{' '}
|
||||
{showDefault && (
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default')}: {defaultValue})
|
||||
|
|
@ -156,15 +169,16 @@ function DynamicSlider({
|
|||
]}
|
||||
onValueChange={(value) => handleValueChange(value[0])}
|
||||
doubleClickHandler={() => setInputValue(defaultValue as string | number)}
|
||||
max={isEnum && options ? options.length - 1 : range ? range.max : 0}
|
||||
max={max}
|
||||
min={range ? range.min : 0}
|
||||
step={range ? range.step ?? 1 : 1}
|
||||
className="flex h-4 w-full"
|
||||
trackClassName="bg-surface-hover"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
{description && (
|
||||
<OptionHover
|
||||
description={descriptionCode ? localize(description) || description : description}
|
||||
description={descriptionCode ? localize(description) ?? description : description}
|
||||
side={ESide.Left}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -8,17 +8,17 @@ import OptionHover from './OptionHover';
|
|||
import { ESide } from '~/common';
|
||||
|
||||
function DynamicSwitch({
|
||||
label,
|
||||
label = '',
|
||||
settingKey,
|
||||
defaultValue,
|
||||
description,
|
||||
description = '',
|
||||
columnSpan,
|
||||
setOption,
|
||||
optionType,
|
||||
readonly = false,
|
||||
showDefault = true,
|
||||
labelCode,
|
||||
descriptionCode,
|
||||
showDefault = false,
|
||||
labelCode = false,
|
||||
descriptionCode = false,
|
||||
conversation,
|
||||
}: DynamicSettingProps) {
|
||||
const localize = useLocalize();
|
||||
|
|
@ -55,7 +55,7 @@ function DynamicSwitch({
|
|||
return (
|
||||
<div
|
||||
className={`flex flex-col items-center justify-start gap-6 ${
|
||||
columnSpan ? `col-span-${columnSpan}` : 'col-span-full'
|
||||
columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
|
||||
}`}
|
||||
>
|
||||
<HoverCard openDelay={300}>
|
||||
|
|
@ -65,10 +65,11 @@ function DynamicSwitch({
|
|||
htmlFor={`${settingKey}-dynamic-switch`}
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{labelCode ? localize(label ?? '') || label : label ?? settingKey}{' '}
|
||||
{labelCode ? localize(label) ?? label : label || settingKey}{' '}
|
||||
{showDefault && (
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default')}: {defaultValue ? 'com_ui_on' : 'com_ui_off'})
|
||||
({localize('com_endpoint_default')}:{' '}
|
||||
{defaultValue != null ? 'com_ui_on' : 'com_ui_off'})
|
||||
</small>
|
||||
)}
|
||||
</Label>
|
||||
|
|
@ -83,7 +84,7 @@ function DynamicSwitch({
|
|||
</HoverCardTrigger>
|
||||
{description && (
|
||||
<OptionHover
|
||||
description={descriptionCode ? localize(description) || description : description}
|
||||
description={descriptionCode ? localize(description) ?? description : description}
|
||||
side={ESide.Left}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -10,19 +10,19 @@ import OptionHover from './OptionHover';
|
|||
import { ESide } from '~/common';
|
||||
|
||||
function DynamicTags({
|
||||
label,
|
||||
label = '',
|
||||
settingKey,
|
||||
defaultValue = [],
|
||||
description,
|
||||
description = '',
|
||||
columnSpan,
|
||||
setOption,
|
||||
optionType,
|
||||
placeholder,
|
||||
placeholder = '',
|
||||
readonly = false,
|
||||
showDefault = true,
|
||||
labelCode,
|
||||
descriptionCode,
|
||||
placeholderCode,
|
||||
showDefault = false,
|
||||
labelCode = false,
|
||||
descriptionCode = false,
|
||||
placeholderCode = false,
|
||||
descriptionSide = ESide.Left,
|
||||
conversation,
|
||||
minTags,
|
||||
|
|
@ -65,7 +65,7 @@ function DynamicTags({
|
|||
return defaultValue ?? [];
|
||||
}
|
||||
|
||||
return conversation?.[settingKey];
|
||||
return conversation[settingKey];
|
||||
}, [conversation, defaultValue, optionType, settingKey, tags]);
|
||||
|
||||
const onTagRemove = useCallback(
|
||||
|
|
@ -74,7 +74,7 @@ function DynamicTags({
|
|||
return;
|
||||
}
|
||||
|
||||
if (minTags && currentTags.length <= minTags) {
|
||||
if (minTags != null && currentTags.length <= minTags) {
|
||||
showToast({
|
||||
message: localize('com_ui_min_tags', minTags + ''),
|
||||
status: 'warning',
|
||||
|
|
@ -93,7 +93,7 @@ function DynamicTags({
|
|||
}
|
||||
|
||||
let update = [...(currentTags ?? []), tagText];
|
||||
if (maxTags && update.length > maxTags) {
|
||||
if (maxTags != null && update.length > maxTags) {
|
||||
showToast({
|
||||
message: localize('com_ui_max_tags', maxTags + ''),
|
||||
status: 'warning',
|
||||
|
|
@ -117,7 +117,7 @@ function DynamicTags({
|
|||
return (
|
||||
<div
|
||||
className={`flex flex-col items-center justify-start gap-6 ${
|
||||
columnSpan ? `col-span-${columnSpan}` : 'col-span-full'
|
||||
columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
|
||||
}`}
|
||||
>
|
||||
<HoverCard openDelay={300}>
|
||||
|
|
@ -127,11 +127,11 @@ function DynamicTags({
|
|||
htmlFor={`${settingKey}-dynamic-input`}
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{labelCode ? localize(label ?? '') || label : label ?? settingKey}{' '}
|
||||
{labelCode ? localize(label) ?? label : label || settingKey}{' '}
|
||||
{showDefault && (
|
||||
<small className="opacity-40">
|
||||
(
|
||||
{typeof defaultValue === 'undefined' || !(defaultValue as string)?.length
|
||||
{typeof defaultValue === 'undefined' || !(defaultValue as string).length
|
||||
? localize('com_endpoint_default_blank')
|
||||
: `${localize('com_endpoint_default')}: ${defaultValue}`}
|
||||
)
|
||||
|
|
@ -171,9 +171,7 @@ function DynamicTags({
|
|||
}
|
||||
}}
|
||||
onChange={(e) => setTagText(e.target.value)}
|
||||
placeholder={
|
||||
placeholderCode ? localize(placeholder ?? '') || placeholder : placeholder
|
||||
}
|
||||
placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
|
||||
className={cn(defaultTextProps, 'flex h-10 max-h-10 px-3 py-2')}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -181,7 +179,7 @@ function DynamicTags({
|
|||
</HoverCardTrigger>
|
||||
{description && (
|
||||
<OptionHover
|
||||
description={descriptionCode ? localize(description) || description : description}
|
||||
description={descriptionCode ? localize(description) ?? description : description}
|
||||
side={descriptionSide as ESide}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -9,25 +9,25 @@ import OptionHover from './OptionHover';
|
|||
import { ESide } from '~/common';
|
||||
|
||||
function DynamicTextarea({
|
||||
label,
|
||||
label = '',
|
||||
settingKey,
|
||||
defaultValue,
|
||||
description,
|
||||
description = '',
|
||||
columnSpan,
|
||||
setOption,
|
||||
optionType,
|
||||
placeholder,
|
||||
placeholder = '',
|
||||
readonly = false,
|
||||
showDefault = true,
|
||||
labelCode,
|
||||
descriptionCode,
|
||||
placeholderCode,
|
||||
showDefault = false,
|
||||
labelCode = false,
|
||||
descriptionCode = false,
|
||||
placeholderCode = false,
|
||||
conversation,
|
||||
}: DynamicSettingProps) {
|
||||
const localize = useLocalize();
|
||||
const { preset } = useChatContext();
|
||||
|
||||
const [setInputValue, inputValue] = useDebouncedInput<string | null>({
|
||||
const [setInputValue, inputValue, setLocalValue] = useDebouncedInput<string | null>({
|
||||
optionKey: optionType !== OptionTypes.Custom ? settingKey : undefined,
|
||||
initialValue:
|
||||
optionType !== OptionTypes.Custom
|
||||
|
|
@ -43,13 +43,13 @@ function DynamicTextarea({
|
|||
defaultValue: typeof defaultValue === 'undefined' ? '' : defaultValue,
|
||||
conversation,
|
||||
inputValue,
|
||||
setInputValue,
|
||||
setInputValue: setLocalValue,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col items-center justify-start gap-6 ${
|
||||
columnSpan ? `col-span-${columnSpan}` : 'col-span-full'
|
||||
columnSpan != null ? `col-span-${columnSpan}` : 'col-span-full'
|
||||
}`}
|
||||
>
|
||||
<HoverCard openDelay={300}>
|
||||
|
|
@ -59,11 +59,11 @@ function DynamicTextarea({
|
|||
htmlFor={`${settingKey}-dynamic-textarea`}
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{labelCode ? localize(label ?? '') || label : label ?? settingKey}{' '}
|
||||
{labelCode ? localize(label) ?? label : label || settingKey}{' '}
|
||||
{showDefault && (
|
||||
<small className="opacity-40">
|
||||
(
|
||||
{typeof defaultValue === 'undefined' || !(defaultValue as string)?.length
|
||||
{typeof defaultValue === 'undefined' || !(defaultValue as string).length
|
||||
? localize('com_endpoint_default_blank')
|
||||
: `${localize('com_endpoint_default')}: ${defaultValue}`}
|
||||
)
|
||||
|
|
@ -76,7 +76,7 @@ function DynamicTextarea({
|
|||
disabled={readonly}
|
||||
value={inputValue ?? ''}
|
||||
onChange={setInputValue}
|
||||
placeholder={placeholderCode ? localize(placeholder ?? '') || placeholder : placeholder}
|
||||
placeholder={placeholderCode ? localize(placeholder) ?? placeholder : placeholder}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
// TODO: configurable max height
|
||||
|
|
@ -86,7 +86,7 @@ function DynamicTextarea({
|
|||
</HoverCardTrigger>
|
||||
{description && (
|
||||
<OptionHover
|
||||
description={descriptionCode ? localize(description) || description : description}
|
||||
description={descriptionCode ? localize(description) ?? description : description}
|
||||
side={ESide.Left}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,203 +1,46 @@
|
|||
import { ComponentTypes } from 'librechat-data-provider';
|
||||
import type {
|
||||
DynamicSettingProps,
|
||||
SettingDefinition,
|
||||
SettingsConfiguration,
|
||||
} from 'librechat-data-provider';
|
||||
import { useSetIndexOptions } from '~/hooks';
|
||||
import React, { useMemo, useState, useCallback } from 'react';
|
||||
import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
|
||||
import { getSettingsKeys, tPresetUpdateSchema } from 'librechat-data-provider';
|
||||
import type { TPreset } from 'librechat-data-provider';
|
||||
import { SaveAsPresetDialog } from '~/components/Endpoints';
|
||||
import { useSetIndexOptions, useLocalize } from '~/hooks';
|
||||
import { componentMapping } from './components';
|
||||
import { useChatContext } from '~/Providers';
|
||||
import {
|
||||
DynamicDropdown,
|
||||
DynamicCheckbox,
|
||||
DynamicTextarea,
|
||||
DynamicSlider,
|
||||
DynamicSwitch,
|
||||
DynamicInput,
|
||||
DynamicTags,
|
||||
} from './';
|
||||
|
||||
const settingsConfiguration: SettingsConfiguration = [
|
||||
{
|
||||
key: 'temperature',
|
||||
label: 'com_endpoint_temperature',
|
||||
labelCode: true,
|
||||
description: 'com_endpoint_openai_temp',
|
||||
descriptionCode: true,
|
||||
type: 'number',
|
||||
default: 1,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 2,
|
||||
step: 0.01,
|
||||
},
|
||||
component: 'slider',
|
||||
optionType: 'model',
|
||||
// columnSpan: 2,
|
||||
// includeInput: false,
|
||||
},
|
||||
{
|
||||
key: 'top_p',
|
||||
label: 'com_endpoint_top_p',
|
||||
labelCode: true,
|
||||
description: 'com_endpoint_openai_topp',
|
||||
descriptionCode: true,
|
||||
type: 'number',
|
||||
default: 1,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.01,
|
||||
},
|
||||
component: 'slider',
|
||||
optionType: 'model',
|
||||
},
|
||||
{
|
||||
key: 'presence_penalty',
|
||||
label: 'com_endpoint_presence_penalty',
|
||||
labelCode: true,
|
||||
description: 'com_endpoint_openai_pres',
|
||||
descriptionCode: true,
|
||||
type: 'number',
|
||||
default: 0,
|
||||
range: {
|
||||
min: -2,
|
||||
max: 2,
|
||||
step: 0.01,
|
||||
},
|
||||
component: 'slider',
|
||||
optionType: 'model',
|
||||
},
|
||||
{
|
||||
key: 'frequency_penalty',
|
||||
label: 'com_endpoint_frequency_penalty',
|
||||
labelCode: true,
|
||||
description: 'com_endpoint_openai_freq',
|
||||
descriptionCode: true,
|
||||
type: 'number',
|
||||
default: 0,
|
||||
range: {
|
||||
min: -2,
|
||||
max: 2,
|
||||
step: 0.01,
|
||||
},
|
||||
component: 'slider',
|
||||
optionType: 'model',
|
||||
},
|
||||
{
|
||||
key: 'chatGptLabel',
|
||||
label: 'com_endpoint_custom_name',
|
||||
labelCode: true,
|
||||
type: 'string',
|
||||
default: '',
|
||||
component: 'input',
|
||||
placeholder: 'com_endpoint_openai_custom_name_placeholder',
|
||||
placeholderCode: true,
|
||||
optionType: 'conversation',
|
||||
},
|
||||
{
|
||||
key: 'promptPrefix',
|
||||
label: 'com_endpoint_prompt_prefix',
|
||||
labelCode: true,
|
||||
type: 'string',
|
||||
default: '',
|
||||
component: 'textarea',
|
||||
placeholder: 'com_endpoint_openai_prompt_prefix_placeholder',
|
||||
placeholderCode: true,
|
||||
optionType: 'conversation',
|
||||
// columnSpan: 2,
|
||||
},
|
||||
{
|
||||
key: 'resendFiles',
|
||||
label: 'com_endpoint_plug_resend_files',
|
||||
labelCode: true,
|
||||
description: 'com_endpoint_openai_resend_files',
|
||||
descriptionCode: true,
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
component: 'switch',
|
||||
optionType: 'conversation',
|
||||
showDefault: false,
|
||||
columnSpan: 2,
|
||||
},
|
||||
{
|
||||
key: 'imageDetail',
|
||||
label: 'com_endpoint_plug_image_detail',
|
||||
labelCode: true,
|
||||
description: 'com_endpoint_openai_detail',
|
||||
descriptionCode: true,
|
||||
type: 'enum',
|
||||
default: 'auto',
|
||||
options: ['low', 'auto', 'high'],
|
||||
optionType: 'conversation',
|
||||
component: 'slider',
|
||||
showDefault: false,
|
||||
columnSpan: 2,
|
||||
},
|
||||
{
|
||||
key: 'stop',
|
||||
label: 'com_endpoint_stop',
|
||||
labelCode: true,
|
||||
description: 'com_endpoint_openai_stop',
|
||||
descriptionCode: true,
|
||||
placeholder: 'com_endpoint_stop_placeholder',
|
||||
placeholderCode: true,
|
||||
type: 'array',
|
||||
default: [],
|
||||
component: 'tags',
|
||||
optionType: 'conversation',
|
||||
columnSpan: 4,
|
||||
minTags: 1,
|
||||
maxTags: 4,
|
||||
},
|
||||
];
|
||||
|
||||
const componentMapping: Record<ComponentTypes, React.ComponentType<DynamicSettingProps>> = {
|
||||
[ComponentTypes.Slider]: DynamicSlider,
|
||||
[ComponentTypes.Dropdown]: DynamicDropdown,
|
||||
[ComponentTypes.Switch]: DynamicSwitch,
|
||||
[ComponentTypes.Textarea]: DynamicTextarea,
|
||||
[ComponentTypes.Input]: DynamicInput,
|
||||
[ComponentTypes.Checkbox]: DynamicCheckbox,
|
||||
[ComponentTypes.Tags]: DynamicTags,
|
||||
};
|
||||
import { settings } from './settings';
|
||||
|
||||
export default function Parameters() {
|
||||
const localize = useLocalize();
|
||||
const { conversation } = useChatContext();
|
||||
const { setOption } = useSetIndexOptions();
|
||||
|
||||
const temperature = settingsConfiguration.find(
|
||||
(setting) => setting.key === 'temperature',
|
||||
) as SettingDefinition;
|
||||
const TempComponent = componentMapping[temperature.component];
|
||||
const { key: temp, default: tempDefault, ...tempSettings } = temperature;
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [preset, setPreset] = useState<TPreset | null>(null);
|
||||
|
||||
const imageDetail = settingsConfiguration.find(
|
||||
(setting) => setting.key === 'imageDetail',
|
||||
) as SettingDefinition;
|
||||
const DetailComponent = componentMapping[imageDetail.component];
|
||||
const { key: detail, default: detailDefault, ...detailSettings } = imageDetail;
|
||||
const { data: endpointsConfig } = useGetEndpointsQuery();
|
||||
|
||||
const resendFiles = settingsConfiguration.find(
|
||||
(setting) => setting.key === 'resendFiles',
|
||||
) as SettingDefinition;
|
||||
const Switch = componentMapping[resendFiles.component];
|
||||
const { key: switchKey, default: switchDefault, ...switchSettings } = resendFiles;
|
||||
const bedrockRegions = useMemo(() => {
|
||||
return endpointsConfig?.[conversation?.endpoint ?? '']?.availableRegions ?? [];
|
||||
}, [endpointsConfig, conversation?.endpoint]);
|
||||
|
||||
const promptPrefix = settingsConfiguration.find(
|
||||
(setting) => setting.key === 'promptPrefix',
|
||||
) as SettingDefinition;
|
||||
const Textarea = componentMapping[promptPrefix.component];
|
||||
const { key: textareaKey, default: textareaDefault, ...textareaSettings } = promptPrefix;
|
||||
const parameters = useMemo(() => {
|
||||
const [combinedKey, endpointKey] = getSettingsKeys(
|
||||
conversation?.endpoint ?? '',
|
||||
conversation?.model ?? '',
|
||||
);
|
||||
return settings[combinedKey] ?? settings[endpointKey];
|
||||
}, [conversation]);
|
||||
|
||||
const chatGptLabel = settingsConfiguration.find(
|
||||
(setting) => setting.key === 'chatGptLabel',
|
||||
) as SettingDefinition;
|
||||
const Input = componentMapping[chatGptLabel.component];
|
||||
const { key: inputKey, default: inputDefault, ...inputSettings } = chatGptLabel;
|
||||
const openDialog = useCallback(() => {
|
||||
const newPreset = tPresetUpdateSchema.parse({
|
||||
...conversation,
|
||||
}) as TPreset;
|
||||
setPreset(newPreset);
|
||||
setIsDialogOpen(true);
|
||||
}, [conversation]);
|
||||
|
||||
const stop = settingsConfiguration.find((setting) => setting.key === 'stop') as SettingDefinition;
|
||||
const Tags = componentMapping[stop.component];
|
||||
const { key: stopKey, default: stopDefault, ...stopSettings } = stop;
|
||||
if (!parameters) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-auto max-w-full overflow-x-hidden p-3">
|
||||
|
|
@ -205,49 +48,38 @@ export default function Parameters() {
|
|||
{' '}
|
||||
{/* This is the parent element containing all settings */}
|
||||
{/* Below is an example of an applied dynamic setting, each be contained by a div with the column span specified */}
|
||||
<Input
|
||||
settingKey={inputKey}
|
||||
defaultValue={inputDefault}
|
||||
{...inputSettings}
|
||||
setOption={setOption}
|
||||
conversation={conversation}
|
||||
/>
|
||||
<Textarea
|
||||
settingKey={textareaKey}
|
||||
defaultValue={textareaDefault}
|
||||
{...textareaSettings}
|
||||
setOption={setOption}
|
||||
conversation={conversation}
|
||||
/>
|
||||
<TempComponent
|
||||
settingKey={temp}
|
||||
defaultValue={tempDefault}
|
||||
{...tempSettings}
|
||||
setOption={setOption}
|
||||
conversation={conversation}
|
||||
/>
|
||||
<Switch
|
||||
settingKey={switchKey}
|
||||
defaultValue={switchDefault}
|
||||
{...switchSettings}
|
||||
setOption={setOption}
|
||||
conversation={conversation}
|
||||
/>
|
||||
<DetailComponent
|
||||
settingKey={detail}
|
||||
defaultValue={detailDefault}
|
||||
{...detailSettings}
|
||||
setOption={setOption}
|
||||
conversation={conversation}
|
||||
/>
|
||||
<Tags
|
||||
settingKey={stopKey}
|
||||
defaultValue={stopDefault}
|
||||
{...stopSettings}
|
||||
setOption={setOption}
|
||||
conversation={conversation}
|
||||
/>
|
||||
{parameters.map((setting) => {
|
||||
const Component = componentMapping[setting.component];
|
||||
const { key, default: defaultValue, ...rest } = setting;
|
||||
|
||||
if (key === 'region' && bedrockRegions.length) {
|
||||
rest.options = bedrockRegions;
|
||||
}
|
||||
|
||||
return (
|
||||
<Component
|
||||
key={key}
|
||||
settingKey={key}
|
||||
defaultValue={defaultValue}
|
||||
{...rest}
|
||||
setOption={setOption}
|
||||
conversation={conversation}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-6 flex justify-center">
|
||||
<button
|
||||
onClick={openDialog}
|
||||
className="btn btn-primary focus:shadow-outline flex w-full items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"
|
||||
type="button"
|
||||
>
|
||||
{localize('com_endpoint_save_as_preset')}
|
||||
</button>
|
||||
</div>
|
||||
{preset && (
|
||||
<SaveAsPresetDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} preset={preset} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
23
client/src/components/SidePanel/Parameters/components.tsx
Normal file
23
client/src/components/SidePanel/Parameters/components.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentTypes } from 'librechat-data-provider';
|
||||
import type { DynamicSettingProps } from 'librechat-data-provider';
|
||||
import {
|
||||
DynamicCombobox,
|
||||
DynamicDropdown,
|
||||
DynamicCheckbox,
|
||||
DynamicTextarea,
|
||||
DynamicSlider,
|
||||
DynamicSwitch,
|
||||
DynamicInput,
|
||||
DynamicTags,
|
||||
} from './';
|
||||
|
||||
export const componentMapping: Record<ComponentTypes, React.ComponentType<DynamicSettingProps>> = {
|
||||
[ComponentTypes.Slider]: DynamicSlider,
|
||||
[ComponentTypes.Dropdown]: DynamicDropdown,
|
||||
[ComponentTypes.Switch]: DynamicSwitch,
|
||||
[ComponentTypes.Textarea]: DynamicTextarea,
|
||||
[ComponentTypes.Input]: DynamicInput,
|
||||
[ComponentTypes.Checkbox]: DynamicCheckbox,
|
||||
[ComponentTypes.Tags]: DynamicTags,
|
||||
[ComponentTypes.Combobox]: DynamicCombobox,
|
||||
};
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
export { default as DynamicInputNumber } from './DynamicInputNumber';
|
||||
export { default as DynamicCombobox } from './DynamicCombobox';
|
||||
export { default as DynamicDropdown } from './DynamicDropdown';
|
||||
export { default as DynamicCheckbox } from './DynamicCheckbox';
|
||||
export { default as DynamicTextarea } from './DynamicTextarea';
|
||||
|
|
@ -6,3 +7,4 @@ export { default as DynamicSlider } from './DynamicSlider';
|
|||
export { default as DynamicSwitch } from './DynamicSwitch';
|
||||
export { default as DynamicInput } from './DynamicInput';
|
||||
export { default as DynamicTags } from './DynamicTags';
|
||||
export { default as OptionHoverAlt } from './OptionHover';
|
||||
|
|
|
|||
354
client/src/components/SidePanel/Parameters/settings.ts
Normal file
354
client/src/components/SidePanel/Parameters/settings.ts
Normal file
|
|
@ -0,0 +1,354 @@
|
|||
import { EModelEndpoint, BedrockProviders } from 'librechat-data-provider';
|
||||
import type { SettingsConfiguration, SettingDefinition } from 'librechat-data-provider';
|
||||
|
||||
// Base definitions
|
||||
const baseDefinitions: Record<string, Partial<SettingDefinition>> = {
|
||||
model: {
|
||||
key: 'model',
|
||||
label: 'com_ui_model',
|
||||
labelCode: true,
|
||||
type: 'string',
|
||||
component: 'dropdown',
|
||||
optionType: 'model',
|
||||
selectPlaceholder: 'com_ui_select_model',
|
||||
searchPlaceholder: 'com_ui_select_search_model',
|
||||
searchPlaceholderCode: true,
|
||||
selectPlaceholderCode: true,
|
||||
columnSpan: 4,
|
||||
},
|
||||
temperature: {
|
||||
key: 'temperature',
|
||||
label: 'com_endpoint_temperature',
|
||||
labelCode: true,
|
||||
description: 'com_endpoint_openai_temp',
|
||||
descriptionCode: true,
|
||||
type: 'number',
|
||||
component: 'slider',
|
||||
optionType: 'model',
|
||||
columnSpan: 4,
|
||||
},
|
||||
topP: {
|
||||
key: 'topP',
|
||||
label: 'com_endpoint_top_p',
|
||||
labelCode: true,
|
||||
description: 'com_endpoint_anthropic_topp',
|
||||
descriptionCode: true,
|
||||
type: 'number',
|
||||
component: 'slider',
|
||||
optionType: 'model',
|
||||
columnSpan: 4,
|
||||
},
|
||||
};
|
||||
|
||||
const bedrock: Record<string, SettingDefinition> = {
|
||||
region: {
|
||||
key: 'region',
|
||||
type: 'string',
|
||||
label: 'com_ui_region',
|
||||
labelCode: true,
|
||||
component: 'combobox',
|
||||
optionType: 'conversation',
|
||||
selectPlaceholder: 'com_ui_select_region',
|
||||
searchPlaceholder: 'com_ui_select_search_region',
|
||||
searchPlaceholderCode: true,
|
||||
selectPlaceholderCode: true,
|
||||
columnSpan: 2,
|
||||
},
|
||||
};
|
||||
|
||||
const createDefinition = (
|
||||
base: Partial<SettingDefinition>,
|
||||
overrides: Partial<SettingDefinition>,
|
||||
): SettingDefinition => {
|
||||
return { ...base, ...overrides } as SettingDefinition;
|
||||
};
|
||||
|
||||
const librechat: Record<string, SettingDefinition> = {
|
||||
modelLabel: {
|
||||
key: 'modelLabel',
|
||||
label: 'com_endpoint_custom_name',
|
||||
labelCode: true,
|
||||
type: 'string',
|
||||
default: '',
|
||||
component: 'input',
|
||||
placeholder: 'com_endpoint_openai_custom_name_placeholder',
|
||||
placeholderCode: true,
|
||||
optionType: 'conversation',
|
||||
},
|
||||
maxContextTokens: {
|
||||
key: 'maxContextTokens',
|
||||
label: 'com_endpoint_context_tokens',
|
||||
labelCode: true,
|
||||
type: 'number',
|
||||
component: 'input',
|
||||
placeholder: 'com_endpoint_context_info',
|
||||
placeholderCode: true,
|
||||
optionType: 'model',
|
||||
columnSpan: 2,
|
||||
},
|
||||
resendFiles: {
|
||||
key: 'resendFiles',
|
||||
label: 'com_endpoint_plug_resend_files',
|
||||
labelCode: true,
|
||||
description: 'com_endpoint_openai_resend_files',
|
||||
descriptionCode: true,
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
component: 'switch',
|
||||
optionType: 'conversation',
|
||||
showDefault: false,
|
||||
columnSpan: 2,
|
||||
},
|
||||
promptPrefix: {
|
||||
key: 'promptPrefix',
|
||||
label: 'com_endpoint_prompt_prefix',
|
||||
labelCode: true,
|
||||
type: 'string',
|
||||
default: '',
|
||||
component: 'textarea',
|
||||
placeholder: 'com_endpoint_openai_prompt_prefix_placeholder',
|
||||
placeholderCode: true,
|
||||
optionType: 'model',
|
||||
},
|
||||
};
|
||||
|
||||
const anthropic: Record<string, SettingDefinition> = {
|
||||
system: {
|
||||
key: 'system',
|
||||
label: 'com_endpoint_prompt_prefix',
|
||||
labelCode: true,
|
||||
type: 'string',
|
||||
default: '',
|
||||
component: 'textarea',
|
||||
placeholder: 'com_endpoint_openai_prompt_prefix_placeholder',
|
||||
placeholderCode: true,
|
||||
optionType: 'model',
|
||||
},
|
||||
maxTokens: {
|
||||
key: 'maxTokens',
|
||||
label: 'com_endpoint_max_output_tokens',
|
||||
labelCode: true,
|
||||
type: 'number',
|
||||
component: 'input',
|
||||
placeholder: 'com_endpoint_anthropic_maxoutputtokens',
|
||||
placeholderCode: true,
|
||||
optionType: 'model',
|
||||
columnSpan: 2,
|
||||
},
|
||||
temperature: createDefinition(baseDefinitions.temperature, {
|
||||
default: 1,
|
||||
range: { min: 0, max: 1, step: 0.01 },
|
||||
}),
|
||||
topP: createDefinition(baseDefinitions.topP, {
|
||||
default: 0.999,
|
||||
range: { min: 0, max: 1, step: 0.01 },
|
||||
}),
|
||||
topK: {
|
||||
key: 'topK',
|
||||
label: 'com_endpoint_top_k',
|
||||
labelCode: true,
|
||||
description: 'com_endpoint_anthropic_topk',
|
||||
descriptionCode: true,
|
||||
type: 'number',
|
||||
range: { min: 0, max: 500, step: 1 },
|
||||
component: 'slider',
|
||||
optionType: 'model',
|
||||
columnSpan: 4,
|
||||
},
|
||||
stop: {
|
||||
key: 'stop',
|
||||
label: 'com_endpoint_stop',
|
||||
labelCode: true,
|
||||
description: 'com_endpoint_openai_stop',
|
||||
descriptionCode: true,
|
||||
placeholder: 'com_endpoint_stop_placeholder',
|
||||
placeholderCode: true,
|
||||
type: 'array',
|
||||
default: [],
|
||||
component: 'tags',
|
||||
optionType: 'conversation',
|
||||
minTags: 0,
|
||||
maxTags: 4,
|
||||
},
|
||||
};
|
||||
|
||||
const mistral: Record<string, SettingDefinition> = {
|
||||
temperature: createDefinition(baseDefinitions.temperature, {
|
||||
default: 0.7,
|
||||
range: { min: 0, max: 1, step: 0.01 },
|
||||
}),
|
||||
topP: createDefinition(baseDefinitions.topP, {
|
||||
range: { min: 0, max: 1, step: 0.01 },
|
||||
}),
|
||||
};
|
||||
|
||||
const cohere: Record<string, SettingDefinition> = {
|
||||
temperature: createDefinition(baseDefinitions.temperature, {
|
||||
default: 0.3,
|
||||
range: { min: 0, max: 1, step: 0.01 },
|
||||
}),
|
||||
topP: createDefinition(baseDefinitions.topP, {
|
||||
default: 0.75,
|
||||
range: { min: 0.01, max: 0.99, step: 0.01 },
|
||||
}),
|
||||
};
|
||||
|
||||
const meta: Record<string, SettingDefinition> = {
|
||||
temperature: createDefinition(baseDefinitions.temperature, {
|
||||
default: 0.5,
|
||||
range: { min: 0, max: 1, step: 0.01 },
|
||||
}),
|
||||
topP: createDefinition(baseDefinitions.topP, {
|
||||
default: 0.9,
|
||||
range: { min: 0, max: 1, step: 0.01 },
|
||||
}),
|
||||
};
|
||||
|
||||
const bedrockAnthropic: SettingsConfiguration = [
|
||||
librechat.modelLabel,
|
||||
anthropic.system,
|
||||
librechat.maxContextTokens,
|
||||
anthropic.maxTokens,
|
||||
anthropic.temperature,
|
||||
anthropic.topP,
|
||||
anthropic.topK,
|
||||
anthropic.stop,
|
||||
bedrock.region,
|
||||
librechat.resendFiles,
|
||||
];
|
||||
|
||||
const bedrockMistral: SettingsConfiguration = [
|
||||
librechat.modelLabel,
|
||||
librechat.promptPrefix,
|
||||
librechat.maxContextTokens,
|
||||
anthropic.maxTokens,
|
||||
mistral.temperature,
|
||||
mistral.topP,
|
||||
bedrock.region,
|
||||
librechat.resendFiles,
|
||||
];
|
||||
|
||||
const bedrockCohere: SettingsConfiguration = [
|
||||
librechat.modelLabel,
|
||||
librechat.promptPrefix,
|
||||
librechat.maxContextTokens,
|
||||
anthropic.maxTokens,
|
||||
cohere.temperature,
|
||||
cohere.topP,
|
||||
bedrock.region,
|
||||
librechat.resendFiles,
|
||||
];
|
||||
|
||||
const bedrockGeneral: SettingsConfiguration = [
|
||||
librechat.modelLabel,
|
||||
librechat.promptPrefix,
|
||||
librechat.maxContextTokens,
|
||||
meta.temperature,
|
||||
meta.topP,
|
||||
bedrock.region,
|
||||
librechat.resendFiles,
|
||||
];
|
||||
|
||||
const bedrockAnthropicCol1: SettingsConfiguration = [
|
||||
baseDefinitions.model as SettingDefinition,
|
||||
librechat.modelLabel,
|
||||
anthropic.system,
|
||||
anthropic.stop,
|
||||
];
|
||||
|
||||
const bedrockAnthropicCol2: SettingsConfiguration = [
|
||||
librechat.maxContextTokens,
|
||||
anthropic.maxTokens,
|
||||
anthropic.temperature,
|
||||
anthropic.topP,
|
||||
anthropic.topK,
|
||||
bedrock.region,
|
||||
librechat.resendFiles,
|
||||
];
|
||||
|
||||
const bedrockMistralCol1: SettingsConfiguration = [
|
||||
baseDefinitions.model as SettingDefinition,
|
||||
librechat.modelLabel,
|
||||
librechat.promptPrefix,
|
||||
];
|
||||
|
||||
const bedrockMistralCol2: SettingsConfiguration = [
|
||||
librechat.maxContextTokens,
|
||||
anthropic.maxTokens,
|
||||
mistral.temperature,
|
||||
mistral.topP,
|
||||
bedrock.region,
|
||||
librechat.resendFiles,
|
||||
];
|
||||
|
||||
const bedrockCohereCol1: SettingsConfiguration = [
|
||||
baseDefinitions.model as SettingDefinition,
|
||||
librechat.modelLabel,
|
||||
librechat.promptPrefix,
|
||||
];
|
||||
|
||||
const bedrockCohereCol2: SettingsConfiguration = [
|
||||
librechat.maxContextTokens,
|
||||
anthropic.maxTokens,
|
||||
cohere.temperature,
|
||||
cohere.topP,
|
||||
bedrock.region,
|
||||
librechat.resendFiles,
|
||||
];
|
||||
|
||||
const bedrockGeneralCol1: SettingsConfiguration = [
|
||||
baseDefinitions.model as SettingDefinition,
|
||||
librechat.modelLabel,
|
||||
librechat.promptPrefix,
|
||||
];
|
||||
|
||||
const bedrockGeneralCol2: SettingsConfiguration = [
|
||||
librechat.maxContextTokens,
|
||||
meta.temperature,
|
||||
meta.topP,
|
||||
bedrock.region,
|
||||
librechat.resendFiles,
|
||||
];
|
||||
|
||||
export const settings: Record<string, SettingsConfiguration | undefined> = {
|
||||
[`${EModelEndpoint.bedrock}-${BedrockProviders.Anthropic}`]: bedrockAnthropic,
|
||||
[`${EModelEndpoint.bedrock}-${BedrockProviders.MistralAI}`]: bedrockMistral,
|
||||
[`${EModelEndpoint.bedrock}-${BedrockProviders.Cohere}`]: bedrockCohere,
|
||||
[`${EModelEndpoint.bedrock}-${BedrockProviders.Meta}`]: bedrockGeneral,
|
||||
[`${EModelEndpoint.bedrock}-${BedrockProviders.AI21}`]: bedrockGeneral,
|
||||
[`${EModelEndpoint.bedrock}-${BedrockProviders.Amazon}`]: bedrockGeneral,
|
||||
};
|
||||
|
||||
export const presetSettings: Record<
|
||||
string,
|
||||
| {
|
||||
col1: SettingsConfiguration;
|
||||
col2: SettingsConfiguration;
|
||||
}
|
||||
| undefined
|
||||
> = {
|
||||
[`${EModelEndpoint.bedrock}-${BedrockProviders.Anthropic}`]: {
|
||||
col1: bedrockAnthropicCol1,
|
||||
col2: bedrockAnthropicCol2,
|
||||
},
|
||||
[`${EModelEndpoint.bedrock}-${BedrockProviders.MistralAI}`]: {
|
||||
col1: bedrockMistralCol1,
|
||||
col2: bedrockMistralCol2,
|
||||
},
|
||||
[`${EModelEndpoint.bedrock}-${BedrockProviders.Cohere}`]: {
|
||||
col1: bedrockCohereCol1,
|
||||
col2: bedrockCohereCol2,
|
||||
},
|
||||
[`${EModelEndpoint.bedrock}-${BedrockProviders.Meta}`]: {
|
||||
col1: bedrockGeneralCol1,
|
||||
col2: bedrockGeneralCol2,
|
||||
},
|
||||
[`${EModelEndpoint.bedrock}-${BedrockProviders.AI21}`]: {
|
||||
col1: bedrockGeneralCol1,
|
||||
col2: bedrockGeneralCol2,
|
||||
},
|
||||
[`${EModelEndpoint.bedrock}-${BedrockProviders.Amazon}`]: {
|
||||
col1: bedrockGeneralCol1,
|
||||
col2: bedrockGeneralCol2,
|
||||
},
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue