+
,
+) => {
const compressedData: Record = {}
- const { models, ...restData } = data
+ const { models, parameters, ...restData } = data
const modelsToProcess = models.length === 0 ? [null] : models
modelsToProcess.forEach((model, modelIndex) => {
const formData = {
...restData,
model: model,
- modelProvider: data.name
+ modelProvider: data.name,
+ ...(model ? parameters[model] || {} : _parameter),
}
- const configuration = {...formData} as Partial> & Omit
+ const configuration = { ...formData } as Partial> &
+ Omit
delete configuration.configuration
compressedData[`${restData.name}-${index}-${modelIndex}`] = {
...formData,
diff --git a/src/helper/modelParameterUtils.ts b/src/helper/modelParameterUtils.ts
new file mode 100644
index 00000000..17e97c99
--- /dev/null
+++ b/src/helper/modelParameterUtils.ts
@@ -0,0 +1,150 @@
+import { InterfaceProvider } from '../atoms/interfaceState'
+
+export interface Parameter {
+ name: string
+ type: 'int' | 'float' | 'string' | 'boolean' | ''
+ value: string | number | boolean
+ isSpecific?: boolean // if true, the parameter is a special parameter, to avoid removing it when duplicate
+ isDuplicate?: boolean // if true, the parameter is a duplicate parameter
+}
+
+/**
+ * Initializes model parameters, adding default special parameters if necessary.
+ */
+export function initializeAdvancedParameters(
+ modelName: string,
+ provider: InterfaceProvider,
+ existingParams: Record | undefined,
+): Parameter[] {
+ const modelParams: Parameter[] = []
+
+ // load existing parameters
+ if (existingParams) {
+ Object.entries(existingParams).forEach(([key, value]) => {
+ if (!key) return
+ // temperature and topP are not default parameters handled here
+ if (['temperature', 'topP'].includes(key)) return
+
+ // special parameters handling, transform to custom parameters structure list
+ if (key === 'thinking') {
+ const thinking = value as any
+ if (thinking.type === 'enabled' && thinking.budget_tokens !== undefined) {
+ modelParams.push({
+ name: 'budget_tokens',
+ type: 'int',
+ value: thinking.budget_tokens,
+ isSpecific: true,
+ })
+ }
+ return
+ }
+ // Handle disable_streaming specifically if it exists
+ if (key === 'disable_streaming') {
+ modelParams.push({
+ name: 'disable_streaming',
+ type: 'boolean',
+ value: typeof value === 'boolean' ? value : false, // Ensure boolean
+ isSpecific: true,
+ })
+ return
+ }
+
+ const paramType =
+ typeof value === 'string'
+ ? 'string'
+ : typeof value === 'number'
+ ? Number.isInteger(value)
+ ? 'int'
+ : 'float'
+ : '' // Default or unknown type
+ if (paramType) {
+ modelParams.push({
+ name: key,
+ type: paramType as 'int' | 'float' | 'string',
+ value: value as any,
+ isSpecific: ['reasoning_effort', 'budget_tokens', 'disable_streaming'].includes(key),
+ })
+ }
+ })
+ }
+
+ // Add default reasoning_effort for o3-mini if needed
+ if (
+ modelName.includes('o3-mini') &&
+ provider === 'openai' &&
+ !modelParams.some((p) => p.name === 'reasoning_effort')
+ ) {
+ modelParams.push({ name: 'reasoning_effort', type: 'string', value: 'low', isSpecific: true })
+ }
+
+ // Add default budget_tokens for claude-3-7 if needed
+ if (
+ modelName.includes('claude-3-7') && // Assuming this is the correct check string
+ (provider === 'anthropic' || provider === 'bedrock') &&
+ !modelParams.some((p) => p.name === 'budget_tokens')
+ ) {
+ modelParams.push({ name: 'budget_tokens', type: 'int', value: 1024, isSpecific: true })
+ }
+
+ // Ensure disable_streaming parameter exists
+ if (!modelParams.some((p) => p.name === 'disable_streaming')) {
+ modelParams.push({ name: 'disable_streaming', type: 'boolean', value: false, isSpecific: true })
+ }
+
+ return modelParams
+}
+
+/**
+ * Formats the parameters array into a record suitable for saving, applying type conversions and specific transformations.
+ */
+export function formatParametersForSave(parameters: Parameter[]): Record {
+ const finalParameters: Record = {}
+ parameters.forEach((param) => {
+ if (!param.name || param.type === '' || param.value === '') return // Allow boolean false for disable_streaming
+ let value = param.value
+ let name = param.name
+
+ switch (param.type) {
+ case 'int':
+ value = parseInt(String(value), 10)
+ if (isNaN(value)) value = 0 // Default to 0 if parsing fails
+ if (value < 0) value = 0
+ if (value > 1000000) value = 1000000
+
+ if (param.name === 'budget_tokens') {
+ if (value < 1024) value = 1024
+ if (value > 4096) value = 4096
+ }
+ break
+ case 'float':
+ value = parseFloat(String(value))
+ if (isNaN(value)) value = 0.0 // Default to 0.0 if parsing fails
+ if (value < 0) value = 0
+ if (value > 1.0) value = 1.0
+ break
+ case 'boolean':
+ // Already handled by Parameter type, ensure it's boolean
+ value = typeof value === 'boolean' ? value : String(value).toLowerCase() === 'true'
+ break
+ case 'string':
+ default:
+ value = String(value)
+ break
+ }
+
+ // Special handling for budget_tokens -> thinking object
+ if (param.name === 'budget_tokens') {
+ name = 'thinking'
+ const value_ = value as number
+ value = {
+ type: 'enabled',
+ budget_tokens: value_,
+ } as any
+ }
+
+ // Assign value if not handled specifically above
+ finalParameters[name] = value
+ })
+
+ return finalParameters
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index be9d5ec3..600413e1 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -304,6 +304,16 @@ $z-sidebar: 200;
// slot
.left-slot{
margin: 0;
+
+ &.row{
+ display: flex;
+ align-items: center;
+ gap: 6px;
+
+ .info{
+ margin-top: 0;
+ }
+ }
}
.right-slot{
line-height: 0;
diff --git a/src/styles/components/Popup/_AdvancedSetting.scss b/src/styles/components/Popup/_AdvancedSetting.scss
new file mode 100644
index 00000000..cd917624
--- /dev/null
+++ b/src/styles/components/Popup/_AdvancedSetting.scss
@@ -0,0 +1,373 @@
+@use '../../_variables' as *;
+
+.models-key-popup {
+ &.parameters {
+ width: 100%;
+ gap: 0;
+ }
+}
+
+.model-parameters-popup {
+ width: 60vw;
+ height: 65vh;
+
+ .verify-status-container {
+ font-size: 16px;
+ margin-top: 16px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 5px;
+ color: var(--text-pri-green);
+
+ &.error {
+ color: var(--text-error);
+ }
+ }
+
+ .confirm-btn {
+ &:disabled {
+ background-color: var(--bg-op-dark-mediumweak) !important;
+
+ &:hover {
+ background-color: var(--bg-op-dark-mediumweak) !important;
+ }
+ }
+ }
+}
+
+.model-custom-parameters {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+
+ .parameters-list {
+ max-height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ margin-top: 5px;
+
+ .left-slot{
+ display: flex;
+ }
+
+ .item {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ align-items: flex-start;
+ padding: 15px;
+ border-radius: 8px;
+ border: 1px solid var(--border-weak);
+ position: relative;
+
+ &:hover {
+ .btn-delete {
+ display: flex;
+ }
+ }
+
+ .btn-delete {
+ display: none;
+ position: absolute;
+ top: 13px;
+ right: 13px;
+ align-items: center;
+ justify-content: center;
+ background: var(--bg-op-dark-ultraweak);
+ border-radius: 50%;
+ padding: 4px;
+ cursor: pointer;
+
+ svg {
+ color: var(--stroke-dark-medium);
+ }
+
+ &:hover {
+ background: var(--bg-op-dark-mediumweak);
+ }
+ }
+
+ .name {
+ display: flex;
+ align-items: flex-start;
+ gap: 5px;
+ font-size: 14px;
+ color: var(--text-weak);
+
+ label {
+ padding: 6px 0;
+ }
+
+ input.error {
+ border-color: var(--text-error);
+ }
+ }
+
+ .select-button {
+ background: var(--bg-input);
+ }
+
+ .error-message {
+ color: var(--text-error);
+ font-size: 14px;
+ margin-top: 5px;
+ }
+
+ .row {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 16px;
+ }
+
+ .type,
+ .value {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 14px;
+ color: var(--text-weak);
+ }
+
+ .value {
+ flex: 1;
+ }
+
+ label {
+ flex-shrink: 0;
+ display: block;
+ font-size: 14px;
+ margin-bottom: 5px;
+ color: var(--text-weak);
+ }
+ }
+ }
+}
+
+.token-budget-slider {
+ width: 100%;
+ padding: 0 10px;
+ margin-top: 10px;
+
+ input {
+ padding: 0 !important;
+ border: none !important;
+
+ &:focus {
+ outline: none !important;
+ border-color: transparent !important;
+ box-shadow: none !important;
+ }
+ }
+
+ .range-values {
+ display: flex;
+ justify-content: space-between;
+ font-size: 14px;
+ color: var(--text-weak);
+ margin-bottom: 8px;
+ }
+
+ .slider {
+ -webkit-appearance: none;
+ width: 100%;
+ height: 6px;
+ border-radius: 5px;
+ background: var(--bg-op-dark-mediumweak);
+ outline: none;
+ cursor: pointer;
+
+ &::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: var(--bg-pri-blue);
+ cursor: pointer;
+ border: 2px solid white;
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+ }
+
+ &::-moz-range-thumb {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: var(--bg-pri-blue);
+ cursor: pointer;
+ border: 2px solid white;
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+ }
+ }
+}
+
+.reasoning-level-btn-group {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 16px;
+ gap: 10px;
+
+ .btn {
+ flex: 1;
+ padding: 10px 16px;
+ border-radius: 8px;
+ background: var(--bg);
+ border: 1px solid var(--stroke-dark-weak);
+ box-shadow: 0 3px 7px var(--shadow-btn-cancel);
+
+ outline: none;
+
+ &:hover,
+ &.active {
+ background: var(--bg-op-dark-ultraweak);
+ border: 1px solid transparent;
+ }
+ }
+}
+
+.non-streaming {
+ .non-streaming-switch {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ padding: 0 20px;
+ gap: 10px;
+ }
+
+ .non-streaming-alert {
+ display: none;
+ align-items: flex-start;
+ gap: 8px;
+ padding: 12px;
+ background-color: var(--bg-alert);
+ border-radius: 6px;
+ color: var(--text-alert);
+
+ svg {
+ flex-shrink: 0;
+ margin-top: 2px;
+ }
+
+ .alert-content {
+ font-size: 14px;
+ line-height: 1.4;
+ }
+
+ &.visible {
+ display: flex;
+ }
+ }
+}
+
+.special-parameter {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid var(--border-weak);
+
+ &.start {
+ align-items: flex-start;
+ }
+
+ .content {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap: 15px;
+ }
+
+ .title {
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 5px;
+ font-size: 20px;
+ color: var(--text);
+
+ .title-left {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 5px;
+ }
+
+ .description {
+ font-size: 16px;
+ color: var(--text-weak);
+ }
+
+ &.align-top {
+ padding: 15px 0;
+ }
+
+ .parameter-label {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ svg {
+ color: var(--stroke-dark-medium);
+ }
+ }
+ }
+
+ .body {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
+
+.add-custom-parameter {
+ padding: 10px 0;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 30px;
+
+ .title {
+ font-weight: 500;
+ font-size: 20px;
+ color: var(--text);
+ }
+
+ .btn {
+ padding: 14px 23px;
+ border-radius: 5px;
+ border-style: dashed;
+ border: 1px dashed var(--stroke-dark-medium);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ font-size: 14px;
+ background-color: var(--bg-input);
+ white-space: nowrap;
+ outline: none;
+
+ &:hover {
+ background-color: var(--bg-op-dark-ultraweak);
+ }
+ }
+}
+
diff --git a/src/styles/components/_PopupConfirm.scss b/src/styles/components/_PopupConfirm.scss
index e3e72afb..30ef73cc 100644
--- a/src/styles/components/_PopupConfirm.scss
+++ b/src/styles/components/_PopupConfirm.scss
@@ -60,9 +60,11 @@
display: flex;
justify-content: center;
align-items: center;
+ min-height: 0;
}
.popup-confirm-footer {
+ flex-shrink: 0;
padding: 20px 16px;
display: flex;
justify-content: flex-end;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 2171c197..5781b744 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,6 @@
@use "variables" as *;
+@use "./components/Popup/AdvancedSetting";
@use "./components/Header";
@use "./components/ModelConfig";
@use "./components/HistorySidebar";
diff --git a/src/styles/overlay/_Model.scss b/src/styles/overlay/_Model.scss
index e6b5e10a..5c17898b 100644
--- a/src/styles/overlay/_Model.scss
+++ b/src/styles/overlay/_Model.scss
@@ -426,6 +426,7 @@
flex-direction: column;
gap: 12px;
padding: 0 30px;
+ height: 100%;
&.edit{
padding: 20px 86px 0 62px;
@@ -438,10 +439,32 @@
}
}
+ .header {
+ font-weight: 500;
+ font-size: 24px;
+ line-height: 100%;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ justify-content: flex-start;
+ color: var(--text);
+ padding: 20px 0 36px 0;
+ border-bottom: 1px solid var(--border-weak);
+ }
+
+ .body{
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+ @include scrollbar;
+ }
+
.models-key-form-group {
display: flex;
flex-direction: column;
gap: 6px;
+ height: 100%;
.models-key-field-title {
font-weight: 700;
@@ -518,7 +541,7 @@
.model-popup {
width: 900px;
- height: 500px;
+ height: 65vh;
.popup-confirm-content .loading-spinner {
width: 50px;
@@ -1018,90 +1041,3 @@
background: var(--bg-op-dark-ultraweak);
}
}
-
-.model-setting-popup {
- .model-popup-content {
- flex: 1;
- padding: 0 20px;
-
- .model-setting-content {
- height: 100%;
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- gap: 24px;
-
- .model-popup-title {
- font-size: 18px;
- font-weight: 700;
- margin-bottom: 8px;
- }
-
- .model-setting-option {
- width: 100%;
- display: flex;
- flex-direction: column;
- gap: 6px;
- font-size: 16px;
-
- .model-setting-option-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .label {
- font-weight: 500;
- font-size: 20px;
- display: flex;
- align-items: center;
- gap: 5px;
- }
-
- .parameter-label {
- display: flex;
- align-items: center;
- gap: 8px;
-
- svg {
- color: var(--stroke-dark-medium);
- }
- }
- }
-
- .model-setting-option-description {
- font-size: 14px;
- color: var(--text-weak);
- }
-
- .model-setting-alert {
- display: flex;
- align-items: flex-start;
- gap: 8px;
- padding: 12px;
- background-color: var(--bg-alert);
- border-radius: 6px;
- color: var(--text-alert);
- visibility: hidden;
-
- svg {
- flex-shrink: 0;
- margin-top: 2px;
- }
-
- .alert-content {
- font-size: 14px;
- line-height: 1.4;
- }
-
- &.visible {
- visibility: visible;
- }
- }
- }
- }
- }
-}
-
-
diff --git a/src/views/Overlay/Model/ModelVerify.tsx b/src/views/Overlay/Model/ModelVerify.tsx
index 5f884b86..e46796d7 100644
--- a/src/views/Overlay/Model/ModelVerify.tsx
+++ b/src/views/Overlay/Model/ModelVerify.tsx
@@ -7,7 +7,7 @@ export interface ModelVerifyDetail {
detail?: Record
}
-export type ModelVerifyStatus = "verifying" | "abort" | "ignore" | "success" | "unSupportTool" | "unSupportModel" | "unVerified"
+export type ModelVerifyStatus = "verifying" | "abort" | "ignore" | "success" | "unSupportTool" | "unSupportModel" | "unVerified" | "error"
export const useModelVerify = () => {
const localListOptions = localStorage.getItem("modelVerify")
@@ -64,12 +64,17 @@ export const useModelVerify = () => {
onUpdate?.(detail.current)
})
.catch(error => {
+ const _detail = [...detail.current]
+ const _detailItem = _detail.find(item => item.name === _value.model)!
if (error.name === 'AbortError') {
- const _detail = [...detail.current]
- _detail.find(item => item.name === _value.model)!.status = "abort"
- detail.current = _detail
- onUpdate?.(detail.current)
+ _detailItem.status = "abort"
+ }
+ else{
+ _detailItem.status = "error"
+ _detailItem.detail = error.message
}
+ detail.current = _detail
+ onUpdate?.(detail.current)
})
.finally(() => {
controllers.current.delete(controller)
diff --git a/src/views/Overlay/Model/ModelsProvider.tsx b/src/views/Overlay/Model/ModelsProvider.tsx
index 54c5c359..83b08f51 100644
--- a/src/views/Overlay/Model/ModelsProvider.tsx
+++ b/src/views/Overlay/Model/ModelsProvider.tsx
@@ -160,8 +160,7 @@ export default function ModelsProvider({
const _multiModelConfigList = await getMultiModelConfigList()
const _parameter = await getParameter()
_multiModelConfigList.forEach((multiModelConfig, index) => {
- multiModelConfig = Object.assign(multiModelConfig, _parameter)
- compressedData = Object.assign(compressedData, compressData(multiModelConfig, index))
+ compressedData = Object.assign(compressedData, compressData(multiModelConfig, index, _parameter))
})
Object.entries(compressedData).forEach(([key, value]) => {
if (value !== undefined) {
diff --git a/src/views/Overlay/Model/Popup/AdvancedSetting.tsx b/src/views/Overlay/Model/Popup/AdvancedSetting.tsx
index 38badde3..ab874782 100644
--- a/src/views/Overlay/Model/Popup/AdvancedSetting.tsx
+++ b/src/views/Overlay/Model/Popup/AdvancedSetting.tsx
@@ -1,119 +1,543 @@
-import clsx from "clsx";
-import { Dispatch, SetStateAction, useState } from "react";
-import { useTranslation } from "react-i18next";
-import InfoTooltip from "../../../../components/InfoTooltip";
-import PopupConfirm from "../../../../components/PopupConfirm";
-import Switch from "../../../../components/Switch";
-
-const AdvancedSettingPopup = ({
- modelName,
- isStreamingMode_,
- onClose,
-}: {
- modelName: string;
- isStreamingMode_: boolean;
- onClose: () => void;
-}) => {
- const { t } = useTranslation();
- const [isStreamingMode, setIsStreamingMode] =
- useState(isStreamingMode_);
+import { useAtom } from 'jotai'
+import { RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { InterfaceProvider } from '../../../../atoms/interfaceState'
+import { showToastAtom } from '../../../../atoms/toastState'
+import PopupConfirm from '../../../../components/PopupConfirm'
+import Select from '../../../../components/Select'
+import Tooltip from '../../../../components/Tooltip'
+import WrappedInput from '../../../../components/WrappedInput'
+import { compressData } from '../../../../helper/config'
+import {
+ formatParametersForSave,
+ initializeAdvancedParameters,
+ Parameter,
+} from '../../../../helper/modelParameterUtils'
+import { useModelsProvider } from '../ModelsProvider'
+import { ModelVerifyDetail, useModelVerify } from '../ModelVerify'
+import NonStreamingParameter from './SpecialParameters/NonStreaming'
+import ReasoningLevelParameter from './SpecialParameters/ReasoningLevel'
+import TokenBudgetParameter from './SpecialParameters/TokenBudget'
+
+interface AdvancedSettingPopupProps {
+ modelName: string
+ onClose: () => void
+ onSave?: () => void
+}
+
+const AdvancedSettingPopup = ({ modelName, onClose, onSave }: AdvancedSettingPopupProps) => {
+ const { t } = useTranslation()
+ const [, showToast] = useAtom(showToastAtom)
+ const {
+ parameter,
+ multiModelConfigList = [],
+ currentIndex,
+ setMultiModelConfigList,
+ } = useModelsProvider()
+ const { verify, abort } = useModelVerify()
+
+ const [parameters, setParameters] = useState([])
+ const [provider, setProvider] = useState('openai')
+ const isVerifying = useRef(false)
+ const [isVerifySuccess, setIsVerifySuccess] = useState(false)
+ const [verifyStatus, setVerifyStatus] = useState('')
+ const [verifyDetail, setVerifyDetail] = useState('')
+ const bodyRef = useRef(null)
+ const isAddParameter = useRef(false)
+ const prevParamsLength = useRef(0)
+ // load parameters of current model
+ useEffect(() => {
+ const currentModelProvider = multiModelConfigList[currentIndex]
+ if (!currentModelProvider) return
+
+ const provider = currentModelProvider.name
+ const existingParams = currentModelProvider.parameters[modelName]
+
+ // Use the utility function to initialize parameters
+ const initializedParams = initializeAdvancedParameters(modelName, provider, existingParams)
+
+ setParameters(initializedParams)
+ setProvider(provider)
+ }, [parameter, multiModelConfigList, currentIndex, modelName]) // Added modelName dependency
+
+ // integrate parameters config to current ModelConfig (not write just format)
+ const integrateParametersConfig = () => {
+ if (!multiModelConfigList || multiModelConfigList.length <= 0) {
+ return []
+ }
+
+ // Use the utility function to format parameters
+ const finalParameters = formatParametersForSave(parameters)
+
+ const updatedModelConfigList = [...multiModelConfigList]
+ updatedModelConfigList[currentIndex] = {
+ ...updatedModelConfigList[currentIndex],
+ parameters: {
+ ...updatedModelConfigList[currentIndex].parameters,
+ [modelName]: finalParameters,
+ },
+ }
+ return updatedModelConfigList
+ }
+
+ const handleParameterTypeChange = (type: 'int' | 'float' | 'string', index?: number) => {
+ if (index == undefined || index < 0) return
+ const updatedParameters = [...parameters]
+ updatedParameters[index].type = type
+ setParameters(updatedParameters)
+ }
+ const handleParameterValueChange = (value: string | number | boolean, index?: number) => {
+ // Added boolean type
+ if (index == undefined || index < 0) return
+ const updatedParameters = [...parameters]
+ updatedParameters[index].value = value
+ setParameters(updatedParameters)
+ }
- const handleStreamingModeChange = (
- e: React.ChangeEvent
- ) => {
- setIsStreamingMode(e.target.checked);
- };
+ const handleParameterNameChange = (value: string, index?: number) => {
+ if (index == undefined || index < 0) return
+ const updatedParameters = [...parameters]
+ updatedParameters[index].name = value
+ // Check for duplicates ignoring the current parameter being edited
+ const duplicateExists = parameters.some((p, i) => p.name === value && i !== index)
+ updatedParameters[index].isDuplicate = duplicateExists
+ // Also update duplicate status of other parameters with the same name
+ setParameters(
+ updatedParameters.map((p, i) => {
+ if (i !== index && p.name === value) {
+ return { ...p, isDuplicate: true }
+ } else if (p.name === value && !duplicateExists) {
+ // If the edited one is no longer a duplicate source, reset others
+ return { ...p, isDuplicate: false }
+ }
+ // Check if previously duplicated names are now unique
+ const wasDuplicate = parameters.filter((param) => param.name === p.name).length > 1
+ const isNowUnique = updatedParameters.filter((param) => param.name === p.name).length <= 1
+ if (wasDuplicate && isNowUnique) {
+ return { ...p, isDuplicate: false }
+ }
+ return p
+ }),
+ )
+ }
+
+ const handleAddParameter = () => {
+ isAddParameter.current = true
+ setParameters([...parameters, { name: '', type: '', value: '' }])
+ }
+ useLayoutEffect(() => {
+ if (!isAddParameter.current) return
+ if (parameters.length > prevParamsLength.current && bodyRef.current) {
+ const parameterItems = bodyRef.current.querySelectorAll(
+ '.model-custom-parameters .parameters-list .item',
+ )
+ if (parameterItems.length > 0) {
+ const lastItem = parameterItems[parameterItems.length - 1]
+ const nameInput = lastItem?.querySelector('.name input[type="text"]') as HTMLInputElement
+ nameInput && nameInput.focus()
+ lastItem?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+ }
+ }
+ prevParamsLength.current = parameters.length
+ isAddParameter.current = false
+ }, [parameters.length])
+
+ const handleDeleteParameter = (index: number) => {
+ // careful, if the parameter is specific, don't delete it
+ if (parameters[index].isSpecific) {
+ // Maybe show a toast or message indicating it cannot be deleted?
+ console.warn(`Parameter "${parameters[index].name}" is specific and cannot be deleted.`)
+ return
+ }
+ const updatedParameters = [...parameters]
+ const deletedParamName = updatedParameters[index].name
+ updatedParameters.splice(index, 1)
+
+ // After deleting, check if the name that was deleted still has duplicates
+ const remainingWithSameName = updatedParameters.filter((p) => p.name === deletedParamName)
+ if (remainingWithSameName.length === 1) {
+ // If only one remains, it's no longer a duplicate
+ const indexOfRemaining = updatedParameters.findIndex((p) => p.name === deletedParamName)
+ if (indexOfRemaining !== -1) {
+ updatedParameters[indexOfRemaining].isDuplicate = false
+ }
+ }
+ setParameters(updatedParameters)
+ }
const handleClose = () => {
- onClose();
- };
+ onClose()
+ }
+
+ const handleSave = async () => {
+ const integratedParametersConfig = integrateParametersConfig()
+ if (integratedParametersConfig.length <= 0) {
+ return
+ }
+ setMultiModelConfigList(integratedParametersConfig)
+
+ if (onSave) {
+ onSave()
+ }
+ onClose()
+ }
+
+ // verify current model setting if work
+ const onVerifyConfirm = async () => {
+ isVerifying.current = true
+ setVerifyStatus(t('setup.verifying'))
+ setVerifyDetail('')
+
+ const integratedParametersConfig = integrateParametersConfig()
+ if (integratedParametersConfig.length <= 0) {
+ isVerifying.current = false
+ setVerifyStatus(t('setup.verifyFailed'))
+ setVerifyDetail('No model config to verify')
+ return
+ }
+ integratedParametersConfig[currentIndex].models = [modelName]
+ const compressedData = compressData(
+ integratedParametersConfig[currentIndex],
+ currentIndex,
+ parameter,
+ )
+
+ const _needVerifyList = compressedData
+
+ // verify complete callback
+ const onComplete = async () => {
+ isVerifying.current = false
+ setIsVerifySuccess(true)
+ }
+
+ // update status callback
+ const onUpdate = (detail: ModelVerifyDetail[]) => {
+ const _detail = detail.find((item) => item.name == modelName)
+ if (_detail) {
+ setVerifyStatus(
+ _detail.status === 'success'
+ ? t('setup.verifySuccess')
+ : _detail.status === 'error'
+ ? t('setup.verifyError')
+ : t('setup.verifying'),
+ )
+ if (!_detail.detail?.['connectingSuccess']) {
+ setVerifyDetail(_detail.detail?.['connectingResult'] || '')
+ } else if (!_detail.detail?.['supportTools']) {
+ setVerifyDetail(_detail.detail?.['supportToolsResult'] || '')
+ }
+ }
+ }
+
+ // abort verify callback
+ const onAbort = () => {
+ setIsVerifySuccess(false)
+ }
+
+ verify(_needVerifyList, onComplete, onUpdate, onAbort)
+ }
- const handleSave = () => {
- onClose();
- };
+ useEffect(() => {
+ if (bodyRef.current && (verifyDetail || verifyStatus)) {
+ bodyRef.current.scrollTo({
+ top: bodyRef.current.scrollHeight,
+ // behavior: 'smooth'
+ })
+ }
+ }, [verifyStatus, verifyDetail])
+
+ const handleCopiedError = async (text: string) => {
+ await navigator.clipboard.writeText(text)
+ showToast({
+ message: t('toast.copiedToClipboard'),
+ type: 'success',
+ })
+ }
return (
p.isDuplicate)}
+ footerHint={
{item.label}
{item.info &&
{item.info}
diff --git a/src/helper/config.ts b/src/helper/config.ts
index d78eb6e9..a2e36b23 100644
--- a/src/helper/config.ts
+++ b/src/helper/config.ts
@@ -1,19 +1,40 @@
import { InterfaceModelConfig, InterfaceModelConfigMap, ModelConfig, ModelConfigMap, MultiModelConfig } from "../atoms/configState"
import { InterfaceProvider, ModelProvider } from "../atoms/interfaceState"
-export const formatData = (data: InterfaceModelConfig|ModelConfig): MultiModelConfig => {
- const { modelProvider, model, apiKey, baseURL, active, topP, temperature, ...extra } = convertConfigToInterfaceModel(data)
+export const formatData = (data: InterfaceModelConfig | ModelConfig): MultiModelConfig => {
+ const {
+ modelProvider,
+ model,
+ apiKey,
+ baseURL,
+ active,
+ topP,
+ temperature,
+ configuration,
+ checked,
+ name,
+ ...otherParams
+ } = convertConfigToInterfaceModel(data)
+
+ const baseParams = { topP: topP ?? 0, temperature: temperature ?? 0 }
+
+ const allParams = { ...baseParams, ...otherParams }
+
return {
- ...extra,
name: modelProvider,
apiKey,
baseURL,
active: active ?? false,
checked: false,
models: model ? [model] : [],
- topP: topP ?? 0,
- temperature: temperature ?? 0,
model,
+ temperature: temperature ?? 0,
+ topP: topP ?? 0,
+ parameters: model
+ ? {
+ [model]: allParams,
+ }
+ : {},
}
}
@@ -28,31 +49,45 @@ export const extractData = (data: InterfaceModelConfigMap|ModelConfigMap) => {
const _index = parseInt(index)
if (!providerConfigList[_index]) {
- const _value: InterfaceModelConfig|ModelConfig = {...value}
+ const _value: InterfaceModelConfig | ModelConfig = { ...value }
_value.modelProvider = name as InterfaceProvider
providerConfigList[_index] = {
...formatData(_value),
}
- } else if(value.model) {
+ } else if (value.model) {
+ const formatData_ = formatData(value)
+ const allParams = formatData_.parameters[value.model] || {}
providerConfigList[_index].models.push(value.model)
+ providerConfigList[_index].parameters = {
+ ...(providerConfigList[_index].parameters || {}),
+ [value.model]: {
+ ...allParams,
+ },
+ }
}
})
return providerConfigList
}
-export const compressData = (data: MultiModelConfig, index: number) => {
+export const compressData = (
+ data: MultiModelConfig,
+ index: number,
+ _parameter: Record
-
-
- {t("models.modelSetting", { name: modelName })}
-
+
+
+
{t('models.modelSetting', { name: modelName })}
+
+
+ {/* Streaming Mode Area */}
+
+}) => {
+ const { t } = useTranslation()
+ return (
+ (false)
+
+ useEffect(() => {
+ const parameter = parameters.find((p) => p.name === 'disable_streaming' && p.isSpecific)
+ if (parameter) {
+ setIsStreamingMode(parameter.value as boolean)
+ }
+ }, [parameters])
+
+ const handleStreamingModeChange = (e: React.ChangeEvent) => {
+ const updatedParameters = [...parameters]
+ const parameter = updatedParameters.find((p) => p.name === 'disable_streaming' && p.isSpecific)
+ if (parameter) {
+ parameter.value = e.target.checked
+ } else {
+ updatedParameters.push({
+ name: 'disable_streaming',
+ type: 'boolean',
+ value: e.target.checked,
+ isSpecific: true,
+ })
+ }
+ setParameters(updatedParameters)
+ }
+
+ return (
+ ('low')
+
+ useEffect(() => {
+ const parameter = parameters.find((p) => p.name === 'reasoning_effort' && p.isSpecific)
+ if (parameter) {
+ setReasoningLevel(parameter.value as string)
+ }
+ }, [parameters])
+
+ const handleReasoningLevelChange = (level: string) => {
+ const updatedParameters = [...parameters]
+ const parameter = updatedParameters.find((p) => p.name === 'reasoning_effort' && p.isSpecific)
+ if (parameter) {
+ parameter.value = level
+ } else {
+ updatedParameters.push({
+ name: 'reasoning_effort',
+ type: 'string',
+ value: level,
+ isSpecific: true,
+ })
+ }
+ setParameters(updatedParameters)
+ setReasoningLevel(level)
+ }
+
+ return (
+ (0)
+
+ useEffect(() => {
+ const parameter = parameters.find((p) => p.name === 'budget_tokens' && p.isSpecific)
+ if (parameter) {
+ setTokenBudget(Number(parameter.value))
+ }
+ }, [parameters])
+
+ const handleTokenBudgetChange = (e: React.ChangeEvent) => {
+ const updatedParameters = [...parameters]
+ const parameter = updatedParameters.find((p) => p.name === 'budget_tokens' && p.isSpecific)
+ if (parameter) {
+ parameter.value = Number(e.target.value)
+ } else {
+ updatedParameters.push({
+ name: 'budget_tokens',
+ type: 'int',
+ value: Number(e.target.value),
+ isSpecific: true,
+ })
+ }
+ setParameters(updatedParameters)
+ }
+
+ return (
+ {
+ setShowAdvancedSetting(false);
+ setSelectedModel('');
+ }}
+ onSave={() => {
setShowAdvancedSetting(false);
setSelectedModel("");
}}
+
+
+ {/* Custom Input Parameters List */}
+
+
+
+
+
+
-
+ {parameters.map((param, index) => {
+ if (
+ param.name === 'reasoning_effort' ||
+ param.name === 'budget_tokens' ||
+ param.name === 'disable_streaming'
+ ) {
+ return null
+ }
+ return (
+
+
+
+ )
+ })}
+ handleDeleteParameter(index)}>
+
+
+
+
+
+
+ handleParameterNameChange(e.target.value, index)}
+ />
+ {param.isDuplicate && (
+
+
+ {t('models.parameterNameDuplicate')}
+
+ )}
+
+
+
+
+
+
+
+ handleParameterValueChange(e.target.value, index)}
+ placeholder={
+ param.type === 'int'
+ ? t('models.parameterTypeIntDescription')
+ : param.type === 'float'
+ ? t('models.parameterTypeFloatDescription')
+ : param.type === 'string'
+ ? t('models.parameterTypeStringDescription')
+ : t('models.parameterValueDescription')
+ }
+ disabled={param.type === ''}
+ min={
+ param.type === 'int' ? 0 : param.type === 'float' ? 0.0 : undefined
+ }
+ max={
+ param.type === 'int'
+ ? 1000000
+ : param.type === 'float'
+ ? 1.0
+ : undefined
+ }
+ step={param.type === 'float' ? 0.1 : undefined}
+ />
+
+
-
- );
-};
+ )
+}
+
+export default AdvancedSettingPopup
+
+const SpecialParameters = ({
+ provider,
+ modelName,
+ parameters,
+ setParameters,
+}: {
+ provider: InterfaceProvider
+ modelName: string
+ parameters: Parameter[]
+ setParameters: (parameters: Parameter[]) => void
+}) => {
+ if (modelName.includes('o3-mini') && provider === 'openai') {
+ return
-
-
-
-
+
-
+
+
-
+ {verifyStatus}
+ {verifyDetail && - {verifyDetail}}
+
+ {verifyDetail && (
+ handleCopiedError(verifyDetail)} className="error-message">
-
-
- {t("models.streamingModeDescription")}
-
-
-
)}
- >
- 
-
-
- {t("models.streamingModeAlert", { name: modelName })}
-
+
+
+ )
+}
diff --git a/src/views/Overlay/Model/Popup/SpecialParameters/NonStreaming.tsx b/src/views/Overlay/Model/Popup/SpecialParameters/NonStreaming.tsx
new file mode 100644
index 00000000..83c62869
--- /dev/null
+++ b/src/views/Overlay/Model/Popup/SpecialParameters/NonStreaming.tsx
@@ -0,0 +1,101 @@
+import clsx from 'clsx'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import InfoTooltip from '../../../../../components/InfoTooltip'
+import Switch from '../../../../../components/Switch'
+import { Parameter } from '../../../../../helper/modelParameterUtils'
+
+const NonStreamingParameter = ({
+ modelName,
+ parameters,
+ setParameters,
+}: {
+ modelName: string
+ parameters: Parameter[]
+ setParameters: (parameters: Parameter[]) => void
+}) => {
+ const { t } = useTranslation()
+ const [isStreamingMode, setIsStreamingMode] = useState
+
+ )
+}
+
+export default NonStreamingParameter
diff --git a/src/views/Overlay/Model/Popup/SpecialParameters/ReasoningLevel.tsx b/src/views/Overlay/Model/Popup/SpecialParameters/ReasoningLevel.tsx
new file mode 100644
index 00000000..164a285c
--- /dev/null
+++ b/src/views/Overlay/Model/Popup/SpecialParameters/ReasoningLevel.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import InfoTooltip from '../../../../../components/Tooltip'
+import { Parameter } from '../../../../../helper/modelParameterUtils'
+
+const ReasoningLevelParameter = ({
+ parameters,
+ setParameters,
+}: {
+ parameters: Parameter[]
+ setParameters: (parameters: Parameter[]) => void
+}) => {
+ // reasoning_effort
+ const { t } = useTranslation()
+
+ const [reasoningLevel, setReasoningLevel] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('models.streamingModeDescription')}
+
+
+
+
+
+ 
+
+
+ {t('models.streamingModeAlert', { name: modelName })}
+
+
+ )
+}
+
+export default ReasoningLevelParameter
diff --git a/src/views/Overlay/Model/Popup/SpecialParameters/TokenBudget.tsx b/src/views/Overlay/Model/Popup/SpecialParameters/TokenBudget.tsx
new file mode 100644
index 00000000..7bd56e2e
--- /dev/null
+++ b/src/views/Overlay/Model/Popup/SpecialParameters/TokenBudget.tsx
@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import WrappedInput from '../../../../../components/WrappedInput'
+import { Parameter } from '../../../../../helper/modelParameterUtils'
+
+const TokenBudgetParameter = ({
+ min,
+ max,
+ parameters,
+ setParameters,
+}: {
+ min: number
+ max: number
+ parameters: Parameter[]
+ setParameters: (parameters: Parameter[]) => void
+}) => {
+ // last saving format is -- thinking: {"type": "enabled", "budget_tokens": 10_000}
+ const { t } = useTranslation()
+ const [tokenBudget, setTokenBudget] = useState
+
+
+
+
+
+
+
+
+
+
+
+ {t('models.reasoningLevelDescription')}
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default TokenBudgetParameter
diff --git a/src/views/Overlay/Model/Popup/index.tsx b/src/views/Overlay/Model/Popup/index.tsx
index 8447a8cd..7e9d3a28 100644
--- a/src/views/Overlay/Model/Popup/index.tsx
+++ b/src/views/Overlay/Model/Popup/index.tsx
@@ -350,23 +350,39 @@ const ModelPopup = ({
const status = option.verifyStatus ?? "unVerified";
const menu = [];
- // menu.push({
- // label: (
- //
+
+
+
+
+ {t('models.tokenBudgetDescription', { min, max })}
+
+
+
+ handleTokenBudgetChange(e)}
+ />
+
+
+ handleTokenBudgetChange(e)}
+ className="slider"
+ />
+
+
+ {min}
+ {max}
+
+
- //
- // {t("models.verifyMenu0")}
- //
- // ),
- // onClick: () => {
- // setSelectedModel(option.name);
- // setShowAdvancedSetting(true);
- // },
- // });
+ menu.push({
+ label: (
+
+
+ {t('models.verifyMenu0')}
+
+ ),
+ onClick: () => {
+ setSelectedModel(option.name);
+ setShowAdvancedSetting(true);
+ },
+ });
// verify model
if(status !== "success"){
@@ -491,8 +507,11 @@ const ModelPopup = ({
{showAdvancedSetting && (