Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 410aca76 by DigHuang Committed by GitHub
Options

feat(app): sync aiChatReasoningEffort in SimpleApp form and refine AI settings inputs (#6862) 

* feat(app): sync aiChatReasoningEffort in SimpleApp form and refine AI settings inputs

* chore: bump pro submodule to 1a56dfc0

* feat: refactor AI setting modal layout, standardize input heights, and update internationalization strings
parent ea8abf47
Showing with 136 additions and 33 deletions
packages/web/components/common/MySelect/index.tsx
......@@ -228,8 +228,9 @@ const MySelect = <T = any,>(
_active={{
transform: 'none'
}}
bg={bg ? (isOpen ? '#fff' : bg) : '#fff'}
color={isOpen ? 'primary.700' : 'myGray.700'}
bg={isDisabled ? 'myWhite.300' : bg ? (isOpen ? '#fff' : bg) : '#fff'}
color={isDisabled ? 'myGray.400' : isOpen ? 'primary.700' : 'myGray.700'}
fontWeight={'normal'}
borderColor={isInvalid ? 'red.500' : isOpen ? 'primary.300' : 'myGray.200'}
boxShadow={
isOpen
......@@ -238,6 +239,7 @@ const MySelect = <T = any,>(
: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)'
: 'none'
}
opacity={isDisabled ? 0.4 : 1}
_hover={isInvalid ? { borderColor: 'red.400' } : { borderColor: 'primary.300' }}
{...props}
>
......@@ -259,6 +261,9 @@ const MySelect = <T = any,>(
(typeof selectItem?.alias === 'string' ? selectItem?.alias : '') ||
(typeof selectItem?.label === 'string' ? selectItem?.label : placeholder)
}
_placeholder={{
color: 'myGray.500'
}}
size={'sm'}
w={'100%'}
color={'myGray.700'}
......@@ -278,7 +283,14 @@ const MySelect = <T = any,>(
/>
)}
{
<Box noOfLines={1}>
<Box
noOfLines={1}
{...(!selectItem
? {
color: 'myGray.500'
}
: {})}
>
{selectItem?.alias || selectItem?.label || placeholder}
</Box>
}
......
packages/web/components/common/MySlider/InputSlider.tsx
......@@ -8,7 +8,8 @@ const InputSlider = ({
max = 100,
min = 0,
step = 1,
isDisabled
isDisabled,
inputVariant
}: {
value?: number;
onChange: (index: number) => void;
......@@ -16,6 +17,7 @@ const InputSlider = ({
min: number;
step?: number;
isDisabled?: boolean;
inputVariant?: string;
}) => {
const markList = useMemo(() => {
const valLen = max - min;
......@@ -30,7 +32,7 @@ const InputSlider = ({
}, [max, min]);
return (
<HStack zIndex={10} spacing={3}>
<HStack zIndex={10} spacing={4}>
<Slider
max={max}
min={min}
......@@ -65,6 +67,7 @@ const InputSlider = ({
</Slider>
<MyNumberInput
size={'sm'}
variant={inputVariant}
width={'150px'}
min={min}
max={max}
......
packages/web/i18n/en/app.json
......@@ -302,6 +302,7 @@
"refresh_templates": "Refresh",
"request_headers": "Request header",
"response_format": "Response format",
"response_format_placeholder": "Please select response format",
"sandbox_free_not_support": "The plan does not support this function",
"sandbox_free_not_support_tip": "Click to upgrade package",
"sandbox_free_tip": "Free for a limited time",
......
packages/web/i18n/zh-CN/app.json
......@@ -302,6 +302,7 @@
"refresh_templates": "换一批",
"request_headers": "请求头",
"response_format": "回复格式",
"response_format_placeholder": "请选择回复格式",
"sandbox_free_not_support": "套餐不支持该功能",
"sandbox_free_not_support_tip": "点击升级套餐",
"sandbox_free_tip": "限时免费",
......
packages/web/i18n/zh-Hant/app.json
......@@ -293,6 +293,7 @@
"refresh_templates": "換一批",
"request_headers": "請求頭",
"response_format": "回覆格式",
"response_format_placeholder": "請選擇回覆格式",
"sandbox_free_not_support": "套餐不支援該功能",
"sandbox_free_not_support_tip": "點擊升級套餐",
"sandbox_free_tip": "限時免費",
......
packages/web/styles/theme.ts
......@@ -332,7 +332,13 @@ const Button = defineStyleConfig({
const Input: ComponentStyleConfig = {
baseStyle: {
field: {
color: 'myGray.700'
width: '100%',
color: 'myGray.700',
fontSize: 'sm',
_placeholder: {
color: 'myGray.500',
fontSize: 'sm'
}
}
},
sizes: {
......@@ -383,19 +389,26 @@ const Input: ComponentStyleConfig = {
};
const NumberInput = numInputMultiStyle({
baseStyle: numInputPart({
field: {
width: '100%',
color: 'myGray.700',
fontSize: 'sm'
}
}),
sizes: {
sm: defineStyle({
field: {
h: '32px',
borderRadius: 'sm',
fontsize: 'sm'
fontSize: 'sm'
}
}),
lg: defineStyle({
field: {
h: '40px',
borderRadius: 'sm',
fontsize: 'sm'
fontSize: 'sm'
}
})
},
......@@ -407,6 +420,57 @@ const NumberInput = numInputMultiStyle({
borderColor: 'myGray.200',
borderRadius: 'sm',
transition: 'border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out',
_placeholder: {
color: 'myGray.500',
fontSize: 'sm'
},
_hover: {
borderColor: 'primary.300'
},
_focus: {
borderColor: 'primary.600 !important',
boxShadow: `${shadowLight} !important`,
bg: 'white'
},
_disabled: {
color: 'myGray.400 !important',
bg: 'myWhite.300 !important'
},
_invalid: {
borderColor: 'red.500 !important',
borderWidth: '1px !important',
boxShadow: 'none !important',
_hover: {
borderColor: 'red.400 !important'
},
_focus: {
borderColor: 'red.600 !important',
boxShadow: '0px 0px 0px 2.4px rgba(244, 69, 46, 0.15) !important'
}
}
},
stepper: {
bg: 'transparent',
color: 'myGray.600',
_active: {
color: 'primary.500'
},
_hover: {
bg: 'myGray.100'
}
}
}),
whiteOutline: numInputPart({
field: {
bg: 'white',
border: '1px solid',
borderColor: 'myGray.200',
borderRadius: 'sm',
transition: 'border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out',
_placeholder: {
color: 'myGray.500',
fontSize: 'sm'
},
_hover: {
borderColor: 'primary.300'
},
......@@ -457,6 +521,10 @@ const Textarea: ComponentStyleConfig = {
borderRadius: 'md',
borderColor: 'myGray.200',
fontSize: 'sm',
_placeholder: {
color: 'myGray.500',
fontSize: 'sm'
},
_hover: {
borderColor: 'primary.300'
},
......
pro @ 1a56dfc0
Subproject commit 23b39240c48e8b75132258e8e0549f91fc871020
Subproject commit 1a56dfc0d3c2fc1dc3e4a2f23ad1847926c804a8
projects/app/src/components/core/ai/AISettingModal/index.tsx
......@@ -70,7 +70,7 @@ const SettingRow = ({
switchControl?: React.ReactNode;
children?: React.ReactNode;
}) => (
<Flex w="full" alignItems="center" justifyContent="space-between" minH="36px">
<Flex w="full" alignItems="center" justifyContent="space-between" minH="45px">
<HStack spacing={0.5} fontSize="sm" color="myGray.900" fontWeight={500}>
<Box>{label}</Box>
{tip && <QuestionTip label={tip} />}
......@@ -194,7 +194,7 @@ const AIChatSettingsModal = ({
<SettingRow label={t('common:core.ai.Model')}>
<AIModelSelector
width={'100%'}
h={'38px'}
h={'36px'}
value={model}
list={llmModels.map((item) => ({
value: item.model,
......@@ -267,16 +267,19 @@ const AIChatSettingsModal = ({
label={t('app:max_histories_number')}
tip={t('app:max_histories_number_tip')}
>
<InputSlider
min={0}
max={30}
step={1}
value={getValues('maxHistories') ?? 6}
onChange={(e) => {
setValue('maxHistories', e);
setRefresh(!refresh);
}}
/>
<Box ml={'52px'}>
<InputSlider
min={0}
max={30}
step={1}
value={getValues('maxHistories') ?? 6}
inputVariant={'whiteOutline'}
onChange={(e) => {
setValue('maxHistories', e);
setRefresh(!refresh);
}}
/>
</Box>
</SettingRow>
)}
{showMaxToken && (
......@@ -285,7 +288,6 @@ const AIChatSettingsModal = ({
switchControl={
<Switch
isChecked={maxToken !== undefined}
size={'sm'}
onChange={(e) => {
setValue('maxToken', e.target.checked ? tokenLimit / 2 : undefined);
}}
......@@ -296,6 +298,7 @@ const AIChatSettingsModal = ({
min={0}
max={tokenLimit}
step={200}
inputVariant={'whiteOutline'}
isDisabled={maxToken === undefined}
value={maxToken}
onChange={(val) => {
......@@ -312,7 +315,6 @@ const AIChatSettingsModal = ({
switchControl={
<Switch
isChecked={temperature !== undefined}
size={'sm'}
onChange={(e) => {
setValue('temperature', e.target.checked ? 0 : undefined);
}}
......@@ -324,6 +326,7 @@ const AIChatSettingsModal = ({
max={10}
step={1}
value={temperature}
inputVariant={'whiteOutline'}
isDisabled={temperature === undefined}
onChange={(e) => {
setValue(NodeInputKeyEnum.aiChatTemperature, e);
......@@ -339,7 +342,6 @@ const AIChatSettingsModal = ({
switchControl={
<Switch
isChecked={topP !== undefined}
size={'sm'}
onChange={(e) => {
setValue(NodeInputKeyEnum.aiChatTopP, e.target.checked ? 1 : undefined);
}}
......@@ -351,6 +353,7 @@ const AIChatSettingsModal = ({
max={1}
step={0.1}
value={topP}
inputVariant={'whiteOutline'}
isDisabled={topP === undefined}
onChange={(e) => {
setValue(NodeInputKeyEnum.aiChatTopP, e);
......@@ -365,7 +368,6 @@ const AIChatSettingsModal = ({
switchControl={
<Switch
isChecked={stopSign !== undefined}
size={'sm'}
onChange={(e) => {
setValue(NodeInputKeyEnum.aiChatStopSign, e.target.checked ? '' : undefined);
}}
......@@ -374,7 +376,7 @@ const AIChatSettingsModal = ({
>
<Input
isDisabled={stopSign === undefined}
h={'38px'}
h={'36px'}
{...register(NodeInputKeyEnum.aiChatStopSign)}
placeholder={t('app:stop_sign_placeholder')}
/>
......@@ -386,7 +388,6 @@ const AIChatSettingsModal = ({
switchControl={
<Switch
isChecked={responseFormat !== undefined}
size={'sm'}
onChange={(e) => {
setValue(
NodeInputKeyEnum.aiChatResponseFormat,
......@@ -398,7 +399,8 @@ const AIChatSettingsModal = ({
>
<MySelect<string>
isDisabled={responseFormat === undefined}
h={'38px'}
placeholder={t('app:response_format_placeholder')}
h={'36px'}
list={selectedModel.responseFormatList!.map((item) => ({
value: item,
label: item
......@@ -433,7 +435,6 @@ const AIChatSettingsModal = ({
supportParams.vision ? (
<Switch
isChecked={useVision}
size={'sm'}
onChange={(e) => {
setValue(NodeInputKeyEnum.aiChatVision, e.target.checked);
}}
......@@ -453,7 +454,6 @@ const AIChatSettingsModal = ({
switchControl={
<Switch
isChecked={!getValues(NodeInputKeyEnum.aiChatIsResponseText)}
size={'sm'}
onChange={(e) => {
setValue(NodeInputKeyEnum.aiChatIsResponseText, !e.target.checked);
setRefresh((state) => !state);
......@@ -473,7 +473,7 @@ const AIChatSettingsModal = ({
>
{supportParams.reasoningEffort ? (
<MySelect<ReasoningEffort>
h={'38px'}
h={'36px'}
list={reasoningEffortList.map((item) => ({
label: t(item.label),
value: item.value
......@@ -495,7 +495,6 @@ const AIChatSettingsModal = ({
switchControl={
<Switch
isChecked={!reasoning}
size={'sm'}
onChange={(e) => {
setValue(NodeInputKeyEnum.aiChatReasoning, !e.target.checked);
}}
......
projects/app/src/components/core/ai/PriceTiersLabel.tsx
......@@ -54,7 +54,7 @@ const SummaryLine = ({
const { t } = useTranslation();
return (
<Flex fontSize={fontSize} lineHeight={1.5} gap={0.5}>
<Box>{priceKey === 'input' ? t('common:Input') : t('common:Output')}:</Box>
<Box>{priceKey === 'input' ? t('common:Input') : t('common:Output')}:&nbsp;</Box>
{formatPriceSummary({
tiers,
priceKey: priceKey === 'input' ? 'inputPrice' : 'outputPrice',
......
projects/app/src/pageComponents/app/detail/Edit/SimpleApp/utils.ts
......@@ -81,6 +81,10 @@ export const appWorkflow2Form = ({
node.inputs,
NodeInputKeyEnum.aiChatReasoning
);
defaultAppForm.aiSettings.aiChatReasoningEffort = findInputValueByKey(
node.inputs,
NodeInputKeyEnum.aiChatReasoningEffort
);
defaultAppForm.aiSettings.aiChatTopP = findInputValueByKey(
node.inputs,
NodeInputKeyEnum.aiChatTopP
......@@ -339,6 +343,13 @@ export function form2AppWorkflow(
value: formData.aiSettings.aiChatReasoning
},
{
key: NodeInputKeyEnum.aiChatReasoningEffort,
renderTypeList: [FlowNodeInputTypeEnum.hidden],
label: '',
valueType: WorkflowIOValueTypeEnum.string,
value: formData.aiSettings.aiChatReasoningEffort
},
{
key: NodeInputKeyEnum.aiChatTopP,
renderTypeList: [FlowNodeInputTypeEnum.hidden],
label: '',
......@@ -688,6 +699,13 @@ export function form2AppWorkflow(
label: '',
valueType: WorkflowIOValueTypeEnum.boolean,
value: formData.aiSettings.aiChatReasoning
},
{
key: NodeInputKeyEnum.aiChatReasoningEffort,
renderTypeList: [FlowNodeInputTypeEnum.hidden],
label: '',
valueType: WorkflowIOValueTypeEnum.string,
value: formData.aiSettings.aiChatReasoningEffort
}
],
outputs: ToolCallNode.outputs
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment