mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-22 19:30:15 +01:00
📊 refactor: use Parameters from Side Panel for OpenAI, Anthropic, and Custom endpoints (#4092)
* feat: openai parameters * refactor: anthropic/bedrock params, add preset params for openai, and add azure params * refactor: use 'compact' schemas for anthropic/openai * refactor: ensure custom endpoints are properly recognized as valid param endpoints * refactor: update paramEndpoints check in BaseClient.js * chore: optimize logging by omitting modelsConfig * refactor: update label casing in baseDefinitions combobox items * fix: remove 'stop' model options when using o1 series models * refactor(AnthropicClient): remove default `stop` value * refactor: reset params on parameters change * refactor: remove unused default parameter value map introduced in prior commit * fix: 'min' typo for 'max' value * refactor: preset settings * refactor: replace dropdown for image detail with slider; remove `preventDelayedUpdate` condition from DynamicSlider * fix: localizations for freq./pres. penalty * Refactor maxOutputTokens to use coerceNumber in tConversationSchema * refactor(AnthropicClient): use `getModelMaxOutputTokens`
This commit is contained in:
Danny Avila
GitHub
parent
ebdbfe8427
commit
8dc5b320bc
20 changed files with 575 additions and 1103 deletions
|
|
@ -1,364 +1,64 @@
|
|||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import { anthropicSettings } from 'librechat-data-provider';
|
||||
import type { TModelSelectProps, OnInputNumberChange } from '~/common';
|
||||
import {
|
||||
Input,
|
||||
Label,
|
||||
Slider,
|
||||
Switch,
|
||||
HoverCard,
|
||||
InputNumber,
|
||||
SelectDropDown,
|
||||
HoverCardTrigger,
|
||||
} from '~/components/ui';
|
||||
import { cn, defaultTextProps, optionText, removeFocusOutlines, removeFocusRings } from '~/utils';
|
||||
import OptionHoverAlt from '~/components/SidePanel/Parameters/OptionHover';
|
||||
import { useLocalize, useDebouncedInput } from '~/hooks';
|
||||
import OptionHover from './OptionHover';
|
||||
import { ESide } from '~/common';
|
||||
import { useMemo } from 'react';
|
||||
import { getSettingsKeys } from 'librechat-data-provider';
|
||||
import type { SettingDefinition } from 'librechat-data-provider';
|
||||
import type { TModelSelectProps } from '~/common';
|
||||
import { componentMapping } from '~/components/SidePanel/Parameters/components';
|
||||
import { presetSettings } from '~/components/SidePanel/Parameters/settings';
|
||||
|
||||
export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
|
||||
const localize = useLocalize();
|
||||
const {
|
||||
model,
|
||||
modelLabel,
|
||||
promptPrefix,
|
||||
temperature,
|
||||
topP,
|
||||
topK,
|
||||
maxOutputTokens,
|
||||
maxContextTokens,
|
||||
resendFiles,
|
||||
promptCache,
|
||||
} = conversation ?? {};
|
||||
const [setMaxContextTokens, maxContextTokensValue] = useDebouncedInput<number | null | undefined>(
|
||||
{
|
||||
setOption,
|
||||
optionKey: 'maxContextTokens',
|
||||
initialValue: maxContextTokens,
|
||||
},
|
||||
);
|
||||
if (!conversation) {
|
||||
export default function AnthropicSettings({
|
||||
conversation,
|
||||
setOption,
|
||||
models,
|
||||
readonly,
|
||||
}: TModelSelectProps) {
|
||||
const parameters = useMemo(() => {
|
||||
const [combinedKey, endpointKey] = getSettingsKeys(
|
||||
conversation?.endpointType ?? conversation?.endpoint ?? '',
|
||||
conversation?.model ?? '',
|
||||
);
|
||||
return presetSettings[combinedKey] ?? presetSettings[endpointKey];
|
||||
}, [conversation]);
|
||||
|
||||
if (!parameters) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const setModelLabel = setOption('modelLabel');
|
||||
const setPromptPrefix = setOption('promptPrefix');
|
||||
const setTemperature = setOption('temperature');
|
||||
const setTopP = setOption('topP');
|
||||
const setTopK = setOption('topK');
|
||||
const setResendFiles = setOption('resendFiles');
|
||||
const setPromptCache = setOption('promptCache');
|
||||
|
||||
const setModel = (newModel: string) => {
|
||||
const modelSetter = setOption('model');
|
||||
const maxOutputSetter = setOption('maxOutputTokens');
|
||||
if (maxOutputTokens) {
|
||||
maxOutputSetter(anthropicSettings.maxOutputTokens.set(maxOutputTokens, newModel));
|
||||
const renderComponent = (setting: SettingDefinition | undefined) => {
|
||||
if (!setting) {
|
||||
return null;
|
||||
}
|
||||
modelSetter(newModel);
|
||||
};
|
||||
|
||||
const setMaxOutputTokens = (value: number) => {
|
||||
const setter = setOption('maxOutputTokens');
|
||||
if (model) {
|
||||
setter(anthropicSettings.maxOutputTokens.set(value, model));
|
||||
} else {
|
||||
setter(value);
|
||||
const Component = componentMapping[setting.component];
|
||||
if (!Component) {
|
||||
return null;
|
||||
}
|
||||
const { key, default: defaultValue, ...rest } = setting;
|
||||
|
||||
const props = {
|
||||
key,
|
||||
settingKey: key,
|
||||
defaultValue,
|
||||
...rest,
|
||||
readonly,
|
||||
setOption,
|
||||
conversation,
|
||||
};
|
||||
|
||||
if (key === 'model') {
|
||||
return <Component {...props} options={models} />;
|
||||
}
|
||||
|
||||
return <Component {...props} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-5 gap-6">
|
||||
<div className="col-span-5 flex flex-col items-center justify-start gap-6 sm:col-span-3">
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<SelectDropDown
|
||||
value={model ?? ''}
|
||||
setValue={setModel}
|
||||
availableValues={models}
|
||||
disabled={readonly}
|
||||
className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)}
|
||||
containerClassName="flex w-full resize-none"
|
||||
/>
|
||||
<div className="h-auto max-w-full overflow-x-hidden p-3">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-5">
|
||||
<div className="flex flex-col gap-6 md:col-span-3">
|
||||
{parameters.col1.map(renderComponent)}
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<Label htmlFor="modelLabel" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_custom_name')}{' '}
|
||||
<small className="opacity-40">({localize('com_endpoint_default_blank')})</small>
|
||||
</Label>
|
||||
<Input
|
||||
id="modelLabel"
|
||||
disabled={readonly}
|
||||
value={modelLabel || ''}
|
||||
onChange={(e) => setModelLabel(e.target.value ?? null)}
|
||||
placeholder={localize('com_endpoint_anthropic_custom_name_placeholder')}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
'flex h-10 max-h-10 w-full resize-none px-3 py-2',
|
||||
removeFocusOutlines,
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col gap-6 md:col-span-2">
|
||||
{parameters.col2.map(renderComponent)}
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<Label htmlFor="promptPrefix" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_prompt_prefix')}{' '}
|
||||
<small className="opacity-40">({localize('com_endpoint_default_blank')})</small>
|
||||
</Label>
|
||||
<TextareaAutosize
|
||||
id="promptPrefix"
|
||||
disabled={readonly}
|
||||
value={promptPrefix || ''}
|
||||
onChange={(e) => setPromptPrefix(e.target.value ?? null)}
|
||||
placeholder={localize('com_endpoint_prompt_prefix_placeholder')}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 ',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-5 flex flex-col items-center justify-start gap-6 px-3 sm:col-span-2">
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="mt-1 flex w-full justify-between">
|
||||
<Label htmlFor="max-context-tokens" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_context_tokens')}{' '}
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="max-context-tokens"
|
||||
stringMode={false}
|
||||
disabled={readonly}
|
||||
value={maxContextTokensValue as number}
|
||||
onChange={setMaxContextTokens as OnInputNumberChange}
|
||||
placeholder={localize('com_nav_theme_system')}
|
||||
min={10}
|
||||
max={2000000}
|
||||
step={1000}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
|
||||
'w-1/3',
|
||||
),
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</HoverCardTrigger>
|
||||
<OptionHoverAlt
|
||||
description="com_endpoint_context_info"
|
||||
langCode={true}
|
||||
side={ESide.Left}
|
||||
/>
|
||||
</HoverCard>
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="temp-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_temperature')}{' '}
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default')}: {anthropicSettings.temperature.default})
|
||||
</small>
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="temp-int"
|
||||
disabled={readonly}
|
||||
value={temperature}
|
||||
onChange={(value) => setTemperature(Number(value))}
|
||||
max={anthropicSettings.temperature.max}
|
||||
min={0}
|
||||
step={0.01}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
|
||||
),
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
disabled={readonly}
|
||||
value={[temperature ?? anthropicSettings.temperature.default]}
|
||||
onValueChange={(value) => setTemperature(value[0])}
|
||||
doubleClickHandler={() => setTemperature(anthropicSettings.temperature.default)}
|
||||
max={anthropicSettings.temperature.max}
|
||||
min={0}
|
||||
step={0.01}
|
||||
className="flex h-4 w-full"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
|
||||
</HoverCard>
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="top-p-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_top_p')}{' '}
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default_with_num', anthropicSettings.topP.default + '')})
|
||||
</small>
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="top-p-int"
|
||||
disabled={readonly}
|
||||
value={topP}
|
||||
onChange={(value) => setTopP(Number(value))}
|
||||
max={anthropicSettings.topP.max}
|
||||
min={0}
|
||||
step={0.01}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
|
||||
),
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
disabled={readonly}
|
||||
value={[topP ?? 0.7]}
|
||||
onValueChange={(value) => setTopP(value[0])}
|
||||
doubleClickHandler={() => setTopP(anthropicSettings.topP.default)}
|
||||
max={anthropicSettings.topP.max}
|
||||
min={0}
|
||||
step={0.01}
|
||||
className="flex h-4 w-full"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
|
||||
</HoverCard>
|
||||
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="top-k-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_top_k')}{' '}
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default_with_num', anthropicSettings.topK.default + '')})
|
||||
</small>
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="top-k-int"
|
||||
disabled={readonly}
|
||||
value={topK}
|
||||
onChange={(value) => setTopK(Number(value))}
|
||||
max={anthropicSettings.topK.max}
|
||||
min={1}
|
||||
step={0.01}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
|
||||
),
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
disabled={readonly}
|
||||
value={[topK ?? 5]}
|
||||
onValueChange={(value) => setTopK(value[0])}
|
||||
doubleClickHandler={() => setTopK(anthropicSettings.topK.default)}
|
||||
max={anthropicSettings.topK.max}
|
||||
min={1}
|
||||
step={0.01}
|
||||
className="flex h-4 w-full"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="topk" side={ESide.Left} />
|
||||
</HoverCard>
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="max-tokens-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_max_output_tokens')}{' '}
|
||||
<small className="opacity-40">({anthropicSettings.maxOutputTokens.default})</small>
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="max-tokens-int"
|
||||
disabled={readonly}
|
||||
value={maxOutputTokens}
|
||||
onChange={(value) => setMaxOutputTokens(Number(value))}
|
||||
max={anthropicSettings.maxOutputTokens.max}
|
||||
min={1}
|
||||
step={1}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
|
||||
),
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
disabled={readonly}
|
||||
value={[maxOutputTokens ?? anthropicSettings.maxOutputTokens.default]}
|
||||
onValueChange={(value) => setMaxOutputTokens(value[0])}
|
||||
doubleClickHandler={() =>
|
||||
setMaxOutputTokens(anthropicSettings.maxOutputTokens.default)
|
||||
}
|
||||
max={anthropicSettings.maxOutputTokens.max}
|
||||
min={1}
|
||||
step={1}
|
||||
className="flex h-4 w-full"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover
|
||||
endpoint={conversation.endpoint ?? ''}
|
||||
type="maxoutputtokens"
|
||||
side={ESide.Left}
|
||||
/>
|
||||
</HoverCard>
|
||||
<HoverCard openDelay={500}>
|
||||
<HoverCardTrigger className="grid w-full">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="resend-files" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_plug_resend_files')}{' '}
|
||||
</Label>
|
||||
<Switch
|
||||
id="resend-files"
|
||||
checked={resendFiles ?? true}
|
||||
onCheckedChange={(checked: boolean) => setResendFiles(checked)}
|
||||
disabled={readonly}
|
||||
className="flex"
|
||||
/>
|
||||
<OptionHover
|
||||
endpoint={conversation.endpoint ?? ''}
|
||||
type="resend"
|
||||
side={ESide.Bottom}
|
||||
/>
|
||||
</div>
|
||||
</HoverCardTrigger>
|
||||
</HoverCard>
|
||||
<HoverCard openDelay={500}>
|
||||
<HoverCardTrigger className="grid w-full">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="prompt-cache" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_prompt_cache')}{' '}
|
||||
</Label>
|
||||
<Switch
|
||||
id="prompt-cache"
|
||||
checked={promptCache ?? true}
|
||||
onCheckedChange={(checked: boolean) => setPromptCache(checked)}
|
||||
disabled={readonly}
|
||||
className="flex"
|
||||
/>
|
||||
<OptionHover
|
||||
endpoint={conversation.endpoint ?? ''}
|
||||
type="promptcache"
|
||||
side={ESide.Bottom}
|
||||
/>
|
||||
</div>
|
||||
</HoverCardTrigger>
|
||||
</HoverCard>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default function BedrockSettings({
|
|||
}: TModelSelectProps) {
|
||||
const parameters = useMemo(() => {
|
||||
const [combinedKey, endpointKey] = getSettingsKeys(
|
||||
conversation?.endpoint ?? '',
|
||||
conversation?.endpointType ?? conversation?.endpoint ?? '',
|
||||
conversation?.model ?? '',
|
||||
);
|
||||
return presetSettings[combinedKey] ?? presetSettings[endpointKey];
|
||||
|
|
@ -23,8 +23,14 @@ export default function BedrockSettings({
|
|||
return null;
|
||||
}
|
||||
|
||||
const renderComponent = (setting: SettingDefinition) => {
|
||||
const renderComponent = (setting: SettingDefinition | undefined) => {
|
||||
if (!setting) {
|
||||
return null;
|
||||
}
|
||||
const Component = componentMapping[setting.component];
|
||||
if (!Component) {
|
||||
return null;
|
||||
}
|
||||
const { key, default: defaultValue, ...rest } = setting;
|
||||
|
||||
const props = {
|
||||
|
|
|
|||
|
|
@ -1,474 +1,63 @@
|
|||
import { useMemo } from 'react';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import {
|
||||
openAISettings,
|
||||
EModelEndpoint,
|
||||
imageDetailValue,
|
||||
imageDetailNumeric,
|
||||
} from 'librechat-data-provider';
|
||||
import type { TModelSelectProps, OnInputNumberChange } from '~/common';
|
||||
import {
|
||||
Input,
|
||||
Label,
|
||||
Switch,
|
||||
Slider,
|
||||
HoverCard,
|
||||
InputNumber,
|
||||
SelectDropDown,
|
||||
HoverCardTrigger,
|
||||
} from '~/components/ui';
|
||||
import { cn, defaultTextProps, optionText, removeFocusOutlines, removeFocusRings } from '~/utils';
|
||||
import { OptionHoverAlt, DynamicTags } from '~/components/SidePanel/Parameters';
|
||||
import { useLocalize, useDebouncedInput } from '~/hooks';
|
||||
import OptionHover from './OptionHover';
|
||||
import { ESide } from '~/common';
|
||||
import { getSettingsKeys } from 'librechat-data-provider';
|
||||
import type { SettingDefinition, DynamicSettingProps } from 'librechat-data-provider';
|
||||
import type { TModelSelectProps } from '~/common';
|
||||
import { componentMapping } from '~/components/SidePanel/Parameters/components';
|
||||
import { presetSettings } from '~/components/SidePanel/Parameters/settings';
|
||||
|
||||
export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
|
||||
const localize = useLocalize();
|
||||
const {
|
||||
endpoint,
|
||||
endpointType,
|
||||
model,
|
||||
modelLabel,
|
||||
chatGptLabel,
|
||||
promptPrefix,
|
||||
temperature,
|
||||
top_p: topP,
|
||||
frequency_penalty: freqP,
|
||||
presence_penalty: presP,
|
||||
resendFiles,
|
||||
imageDetail,
|
||||
maxContextTokens,
|
||||
max_tokens,
|
||||
} = conversation ?? {};
|
||||
export default function OpenAISettings({
|
||||
conversation,
|
||||
setOption,
|
||||
models,
|
||||
readonly,
|
||||
}: TModelSelectProps) {
|
||||
const parameters = useMemo(() => {
|
||||
const [combinedKey, endpointKey] = getSettingsKeys(
|
||||
conversation?.endpointType ?? conversation?.endpoint ?? '',
|
||||
conversation?.model ?? '',
|
||||
);
|
||||
return presetSettings[combinedKey] ?? presetSettings[endpointKey];
|
||||
}, [conversation]);
|
||||
|
||||
const [setChatGptLabel, chatGptLabelValue] = useDebouncedInput<string | null | undefined>({
|
||||
setOption,
|
||||
optionKey: 'chatGptLabel',
|
||||
initialValue: modelLabel ?? chatGptLabel,
|
||||
});
|
||||
const [setPromptPrefix, promptPrefixValue] = useDebouncedInput<string | null | undefined>({
|
||||
setOption,
|
||||
optionKey: 'promptPrefix',
|
||||
initialValue: promptPrefix,
|
||||
});
|
||||
const [setTemperature, temperatureValue] = useDebouncedInput<number | null | undefined>({
|
||||
setOption,
|
||||
optionKey: 'temperature',
|
||||
initialValue: temperature,
|
||||
});
|
||||
const [setTopP, topPValue] = useDebouncedInput<number | null | undefined>({
|
||||
setOption,
|
||||
optionKey: 'top_p',
|
||||
initialValue: topP,
|
||||
});
|
||||
const [setFreqP, freqPValue] = useDebouncedInput<number | null | undefined>({
|
||||
setOption,
|
||||
optionKey: 'frequency_penalty',
|
||||
initialValue: freqP,
|
||||
});
|
||||
const [setPresP, presPValue] = useDebouncedInput<number | null | undefined>({
|
||||
setOption,
|
||||
optionKey: 'presence_penalty',
|
||||
initialValue: presP,
|
||||
});
|
||||
const [setMaxContextTokens, maxContextTokensValue] = useDebouncedInput<number | null | undefined>(
|
||||
{
|
||||
setOption,
|
||||
optionKey: 'maxContextTokens',
|
||||
initialValue: maxContextTokens,
|
||||
},
|
||||
);
|
||||
const [setMaxOutputTokens, maxOutputTokensValue] = useDebouncedInput<number | null | undefined>({
|
||||
setOption,
|
||||
optionKey: 'max_tokens',
|
||||
initialValue: max_tokens,
|
||||
});
|
||||
|
||||
const optionEndpoint = useMemo(() => endpointType ?? endpoint, [endpoint, endpointType]);
|
||||
const isOpenAI = useMemo(
|
||||
() => optionEndpoint === EModelEndpoint.openAI || optionEndpoint === EModelEndpoint.azureOpenAI,
|
||||
[optionEndpoint],
|
||||
);
|
||||
|
||||
if (!conversation) {
|
||||
if (!parameters) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const setModel = setOption('model');
|
||||
const setResendFiles = setOption('resendFiles');
|
||||
const setImageDetail = setOption('imageDetail');
|
||||
const renderComponent = (setting: SettingDefinition | undefined) => {
|
||||
if (!setting) {
|
||||
return null;
|
||||
}
|
||||
const Component = componentMapping[setting.component];
|
||||
if (!Component) {
|
||||
return null;
|
||||
}
|
||||
const { key, default: defaultValue, ...rest } = setting;
|
||||
|
||||
const props = {
|
||||
key,
|
||||
settingKey: key,
|
||||
defaultValue,
|
||||
...rest,
|
||||
readonly,
|
||||
setOption,
|
||||
conversation,
|
||||
};
|
||||
|
||||
if (key === 'model') {
|
||||
return <Component {...props} options={models} />;
|
||||
}
|
||||
|
||||
return <Component {...props} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-5 gap-6">
|
||||
<div className="col-span-5 flex flex-col items-center justify-start gap-6 sm:col-span-3">
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<SelectDropDown
|
||||
value={model ?? ''}
|
||||
setValue={setModel}
|
||||
availableValues={models}
|
||||
disabled={readonly}
|
||||
className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)}
|
||||
containerClassName="flex w-full resize-none"
|
||||
/>
|
||||
<div className="h-auto max-w-full overflow-x-hidden p-3">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-5">
|
||||
<div className="flex flex-col gap-6 md:col-span-3">
|
||||
{parameters.col1.map(renderComponent)}
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_custom_name')}{' '}
|
||||
<small className="opacity-40">({localize('com_endpoint_default_blank')})</small>
|
||||
</Label>
|
||||
<Input
|
||||
id="chatGptLabel"
|
||||
disabled={readonly}
|
||||
value={(chatGptLabelValue as string) || ''}
|
||||
onChange={setChatGptLabel}
|
||||
placeholder={localize('com_endpoint_openai_custom_name_placeholder')}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
'flex h-10 max-h-10 w-full resize-none px-3 py-2',
|
||||
removeFocusOutlines,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-2">
|
||||
<Label htmlFor="promptPrefix" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_prompt_prefix')}{' '}
|
||||
<small className="opacity-40">({localize('com_endpoint_default_blank')})</small>
|
||||
</Label>
|
||||
<TextareaAutosize
|
||||
id="promptPrefix"
|
||||
disabled={readonly}
|
||||
value={(promptPrefixValue as string) || ''}
|
||||
onChange={setPromptPrefix}
|
||||
placeholder={localize('com_endpoint_openai_prompt_prefix_placeholder')}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 transition-colors focus:outline-none',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-start gap-2">
|
||||
<DynamicTags
|
||||
settingKey="stop"
|
||||
setOption={setOption}
|
||||
label="com_endpoint_stop"
|
||||
labelCode={true}
|
||||
description="com_endpoint_openai_stop"
|
||||
descriptionCode={true}
|
||||
placeholder="com_endpoint_stop_placeholder"
|
||||
placeholderCode={true}
|
||||
descriptionSide="right"
|
||||
maxTags={isOpenAI ? 4 : undefined}
|
||||
conversation={conversation}
|
||||
readonly={readonly}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-5 flex flex-col items-center justify-start gap-6 px-3 sm:col-span-2">
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="mt-1 flex w-full justify-between">
|
||||
<Label htmlFor="max-context-tokens" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_context_tokens')}{' '}
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="max-context-tokens"
|
||||
stringMode={false}
|
||||
disabled={readonly}
|
||||
value={maxContextTokensValue as number}
|
||||
onChange={setMaxContextTokens as OnInputNumberChange}
|
||||
placeholder={localize('com_nav_theme_system')}
|
||||
min={10}
|
||||
max={2000000}
|
||||
step={1000}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
|
||||
'w-1/3',
|
||||
),
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</HoverCardTrigger>
|
||||
<OptionHoverAlt
|
||||
description="com_endpoint_context_info"
|
||||
langCode={true}
|
||||
side={ESide.Left}
|
||||
/>
|
||||
</HoverCard>
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="mt-1 flex w-full justify-between">
|
||||
<Label htmlFor="max-output-tokens" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_max_output_tokens')}{' '}
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="max-output-tokens"
|
||||
stringMode={false}
|
||||
disabled={readonly}
|
||||
value={maxOutputTokensValue as number}
|
||||
onChange={setMaxOutputTokens as OnInputNumberChange}
|
||||
placeholder={localize('com_nav_theme_system')}
|
||||
min={10}
|
||||
max={2000000}
|
||||
step={1000}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
|
||||
'w-1/3',
|
||||
),
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</HoverCardTrigger>
|
||||
<OptionHoverAlt
|
||||
description="com_endpoint_openai_max_tokens"
|
||||
langCode={true}
|
||||
side={ESide.Left}
|
||||
/>
|
||||
</HoverCard>
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="temp-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_temperature')}{' '}
|
||||
<small className="opacity-40">
|
||||
(
|
||||
{localize(
|
||||
'com_endpoint_default_with_num',
|
||||
openAISettings.temperature.default + '',
|
||||
)}
|
||||
)
|
||||
</small>
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="temp-int"
|
||||
stringMode={false}
|
||||
disabled={readonly}
|
||||
value={temperatureValue as number}
|
||||
onChange={setTemperature as OnInputNumberChange}
|
||||
max={openAISettings.temperature.max}
|
||||
min={openAISettings.temperature.min}
|
||||
step={openAISettings.temperature.step}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
|
||||
),
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
disabled={readonly}
|
||||
value={[temperatureValue ?? openAISettings.temperature.default]}
|
||||
onValueChange={(value) => setTemperature(value[0])}
|
||||
doubleClickHandler={() => setTemperature(openAISettings.temperature.default)}
|
||||
max={openAISettings.temperature.max}
|
||||
min={openAISettings.temperature.min}
|
||||
step={openAISettings.temperature.step}
|
||||
className="flex h-4 w-full"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={optionEndpoint ?? ''} type="temp" side={ESide.Left} />
|
||||
</HoverCard>
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="top-p-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_top_p')}{' '}
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default_with_num', openAISettings.top_p.default + '')})
|
||||
</small>
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="top-p-int"
|
||||
disabled={readonly}
|
||||
value={topPValue as number}
|
||||
onChange={(value) => setTopP(Number(value))}
|
||||
max={openAISettings.top_p.max}
|
||||
min={openAISettings.top_p.min}
|
||||
step={openAISettings.top_p.step}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
|
||||
),
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
disabled={readonly}
|
||||
value={[topPValue ?? openAISettings.top_p.default]}
|
||||
onValueChange={(value) => setTopP(value[0])}
|
||||
doubleClickHandler={() => setTopP(openAISettings.top_p.default)}
|
||||
max={openAISettings.top_p.max}
|
||||
min={openAISettings.top_p.min}
|
||||
step={openAISettings.top_p.step}
|
||||
className="flex h-4 w-full"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={optionEndpoint ?? ''} type="topp" side={ESide.Left} />
|
||||
</HoverCard>
|
||||
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="freq-penalty-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_frequency_penalty')}{' '}
|
||||
<small className="opacity-40">
|
||||
(
|
||||
{localize(
|
||||
'com_endpoint_default_with_num',
|
||||
openAISettings.frequency_penalty.default + '',
|
||||
)}
|
||||
)
|
||||
</small>
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="freq-penalty-int"
|
||||
disabled={readonly}
|
||||
value={freqPValue as number}
|
||||
onChange={(value) => setFreqP(Number(value))}
|
||||
max={openAISettings.frequency_penalty.max}
|
||||
min={openAISettings.frequency_penalty.min}
|
||||
step={openAISettings.frequency_penalty.step}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
|
||||
),
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
disabled={readonly}
|
||||
value={[freqPValue ?? openAISettings.frequency_penalty.default]}
|
||||
onValueChange={(value) => setFreqP(value[0])}
|
||||
doubleClickHandler={() => setFreqP(openAISettings.frequency_penalty.default)}
|
||||
max={openAISettings.frequency_penalty.max}
|
||||
min={openAISettings.frequency_penalty.min}
|
||||
step={openAISettings.frequency_penalty.step}
|
||||
className="flex h-4 w-full"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={optionEndpoint ?? ''} type="freq" side={ESide.Left} />
|
||||
</HoverCard>
|
||||
|
||||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="pres-penalty-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_presence_penalty')}{' '}
|
||||
<small className="opacity-40">
|
||||
(
|
||||
{localize(
|
||||
'com_endpoint_default_with_num',
|
||||
openAISettings.presence_penalty.default + '',
|
||||
)}
|
||||
)
|
||||
</small>
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="pres-penalty-int"
|
||||
disabled={readonly}
|
||||
value={presPValue as number}
|
||||
onChange={(value) => setPresP(Number(value))}
|
||||
max={openAISettings.presence_penalty.max}
|
||||
min={openAISettings.presence_penalty.min}
|
||||
step={openAISettings.presence_penalty.step}
|
||||
controls={false}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
optionText,
|
||||
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
|
||||
),
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
disabled={readonly}
|
||||
value={[presPValue ?? openAISettings.presence_penalty.default]}
|
||||
onValueChange={(value) => setPresP(value[0])}
|
||||
doubleClickHandler={() => setPresP(openAISettings.presence_penalty.default)}
|
||||
max={openAISettings.presence_penalty.max}
|
||||
min={openAISettings.presence_penalty.min}
|
||||
step={openAISettings.presence_penalty.step}
|
||||
className="flex h-4 w-full"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={optionEndpoint ?? ''} type="pres" side={ESide.Left} />
|
||||
</HoverCard>
|
||||
<div className="w-full">
|
||||
<div className="mb-2 flex w-full justify-between gap-2">
|
||||
<label
|
||||
htmlFor="resend-files"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
|
||||
>
|
||||
<small>{localize('com_endpoint_plug_resend_files')}</small>
|
||||
</label>
|
||||
<label
|
||||
htmlFor="image-detail-value"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
|
||||
>
|
||||
<small>{localize('com_endpoint_plug_image_detail')}</small>
|
||||
</label>
|
||||
<Input
|
||||
id="image-detail-value"
|
||||
disabled={true}
|
||||
value={imageDetail ?? openAISettings.imageDetail.default}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
optionText,
|
||||
'flex rounded-md bg-transparent py-2 text-xs focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:border-gray-700',
|
||||
'pointer-events-none max-h-5 w-12 border-0 group-hover/temp:border-gray-200',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full justify-between gap-2">
|
||||
<HoverCard openDelay={500}>
|
||||
<HoverCardTrigger>
|
||||
<Switch
|
||||
id="resend-files"
|
||||
checked={resendFiles ?? openAISettings.resendFiles.default}
|
||||
onCheckedChange={(checked: boolean) => setResendFiles(checked)}
|
||||
disabled={readonly}
|
||||
className="flex"
|
||||
/>
|
||||
<OptionHover endpoint={optionEndpoint ?? ''} type="resend" side={ESide.Bottom} />
|
||||
</HoverCardTrigger>
|
||||
</HoverCard>
|
||||
<HoverCard openDelay={500}>
|
||||
<HoverCardTrigger className="flex w-[52%] md:w-[125px]">
|
||||
<Slider
|
||||
id="image-detail-slider"
|
||||
disabled={readonly}
|
||||
value={[
|
||||
imageDetailNumeric[imageDetail ?? ''] ??
|
||||
imageDetailNumeric[openAISettings.imageDetail.default],
|
||||
]}
|
||||
onValueChange={(value) => setImageDetail(imageDetailValue[value[0]])}
|
||||
doubleClickHandler={() => setImageDetail(openAISettings.imageDetail.default)}
|
||||
max={openAISettings.imageDetail.max}
|
||||
min={openAISettings.imageDetail.min}
|
||||
step={openAISettings.imageDetail.step}
|
||||
/>
|
||||
<OptionHover endpoint={optionEndpoint ?? ''} type="detail" side={ESide.Bottom} />
|
||||
</HoverCardTrigger>
|
||||
</HoverCard>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 md:col-span-2">
|
||||
{parameters.col2.map(renderComponent)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue