Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit fc7603b2 by Nixieboluo Committed by GitHub
Options

refactor: match ask ui with latest design (#7446) 

* refactor: match ask ui with latest design

Signed-off-by: Nixieboluo <me@sagirii.me>

* refactor: disable transitions for ask ui

Signed-off-by: Nixieboluo <me@sagirii.me>

* refactor: tweaks to ask_user prompt

Signed-off-by: Nixieboluo <me@sagirii.me>

---------

Signed-off-by: Nixieboluo <me@sagirii.me>
parent a5bcccdd
Showing with 178 additions and 72 deletions
packages/service/core/ai/llm/agentLoop/domain/systemTool/ask/tool.ts
...@@ -78,17 +78,17 @@ export const createAskAgentTool = (name = 'ask_agent'): ChatCompletionTool => ({ ...@@ -78,17 +78,17 @@ export const createAskAgentTool = (name = 'ask_agent'): ChatCompletionTool => ({
minItems: 2, minItems: 2,
maxItems: 4, maxItems: 4,
description: description:
'Two to four choices. summary is concise UI text; value is the complete answer returned after selection.', 'Use three choices by default when possible. Choices must be clear, mutually exclusive, definitive answers. Do not use choices to request any input from the user. The user can select exactly one choice or enter a custom answer. Do not add an "Other" choice because the user can enter custom text directly. Each choice uses a short summary phrase and a sentence that explains the answer itself to the user.',
items: { items: {
type: 'object', type: 'object',
properties: { properties: {
summary: { summary: {
type: 'string', type: 'string',
description: 'Concise option text shown to the user.' description: 'A short phrase summarizing the answer content.'
}, },
value: { value: {
type: 'string', type: 'string',
description: 'Complete answer returned to the agent after selection.' description: 'A sentence that explains the answer itself to the user.'
} }
}, },
required: ['summary', 'value'] required: ['summary', 'value']
......
packages/web/components/common/Icon/constants.ts
...@@ -421,6 +421,7 @@ export const iconPaths = { ...@@ -421,6 +421,7 @@ export const iconPaths = {
empty: () => import('./icons/empty.svg'), empty: () => import('./icons/empty.svg'),
export: () => import('./icons/export.svg'), export: () => import('./icons/export.svg'),
feedback: () => import('./icons/feedback.svg'), feedback: () => import('./icons/feedback.svg'),
'common/edit-filled': () => import('./icons/common/edit-filled.svg'),
'file/fill/audio': () => import('./icons/file/fill/audio.svg'), 'file/fill/audio': () => import('./icons/file/fill/audio.svg'),
'file/fill/csv': () => import('./icons/file/fill/csv.svg'), 'file/fill/csv': () => import('./icons/file/fill/csv.svg'),
'file/fill/doc': () => import('./icons/file/fill/doc.svg'), 'file/fill/doc': () => import('./icons/file/fill/doc.svg'),
......
packages/web/components/common/Icon/icons/common/edit-filled.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11">
<path fill="#fff" d="M10.68 2.7 8.24.26A.87.87 0 0 0 7 .26L.26 7a1 1 0 0 0-.26.62v2.44a.9.9 0 0 0 .88.88h9.18a.44.44 0 0 0 0-.88h-5.5l6.12-6.12a.9.9 0 0 0 0-1.24M8.75 4.63 6.31 2.2 7.6.87l2.45 2.45z" />
</svg>
projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/AgentAskComposer.tsx
import { Box, Button, Flex, IconButton, Textarea } from '@chakra-ui/react'; import { Box, Button, Flex, Textarea, useColorMode } from '@chakra-ui/react';
import MyIcon from '@fastgpt/web/components/common/Icon'; import MyIcon from '@fastgpt/web/components/common/Icon';
import type { AgentAskQuestionInteractive } from '@fastgpt/global/core/workflow/template/system/interactive/type'; import type { AgentAskQuestionInteractive } from '@fastgpt/global/core/workflow/template/system/interactive/type';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
...@@ -36,33 +36,36 @@ const AgentAskNavigation = ({ ...@@ -36,33 +36,36 @@ const AgentAskNavigation = ({
onSkipAll onSkipAll
}: AgentAskNavigationProps) => { }: AgentAskNavigationProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const darkMode = useColorMode().colorMode === 'dark';
return ( return (
<Flex flexShrink={0} alignItems={'center'} gap={3}> <Flex flexShrink={0} alignItems={'center'} gap={3}>
<Flex alignItems={'center'} gap={2}> <Flex alignItems={'center'} gap={2}>
<IconButton <Button
variant={'unstyled'} variant={'pagination'}
display={'flex'} className={'!h-6 !w-6 !rounded-full !p-0'}
alignItems={'center'} style={{ minWidth: '24px' }}
justifyContent={'center'}
borderRadius={'full'}
w={6} w={6}
h={6} h={6}
minW={6} minW={6}
maxW={6} maxW={6}
minH={6} minH={6}
maxH={6} maxH={6}
flexShrink={0} borderRadius={'full'}
p={0} p={0}
bg={'myGray.150'} bg={'myGray.150'}
_hover={{ bg: 'myGray.150' }}
_disabled={{ opacity: 0.5, bg: 'myGray.150' }}
isDisabled={isPreviousDisabled} isDisabled={isPreviousDisabled}
_hover={isPreviousDisabled ? undefined : { bg: 'myGray.200' }}
_focusVisible={{ bg: 'myGray.200', boxShadow: 'none', outline: 'none' }}
_active={{ transform: 'none' }}
onClick={onPrevious} onClick={onPrevious}
aria-label={t('chat:Previous')} aria-label={t('chat:Previous')}
icon={<MyIcon name={'common/leftArrowLight'} w={'6px'} color={'myGray.900'} />} >
<MyIcon
name={'common/leftArrowLight'}
w={'6px'}
color={darkMode ? undefined : '#262A32'}
/> />
</Button>
<Box color={'myGray.500'} fontSize={'sm'} fontWeight={500} whiteSpace={'nowrap'}> <Box color={'myGray.500'} fontSize={'sm'} fontWeight={500} whiteSpace={'nowrap'}>
{questionIndex + 1} {questionIndex + 1}
<Box as={'span'} mx={1}> <Box as={'span'} mx={1}>
...@@ -72,29 +75,27 @@ const AgentAskNavigation = ({ ...@@ -72,29 +75,27 @@ const AgentAskNavigation = ({
{questionCount} {questionCount}
</Box> </Box>
</Box> </Box>
<IconButton <Button
variant={'unstyled'} variant={'pagination'}
display={'flex'} className={'!h-6 !w-6 !rounded-full !p-0'}
alignItems={'center'} style={{ minWidth: '24px' }}
justifyContent={'center'}
borderRadius={'full'}
w={6} w={6}
h={6} h={6}
minW={6} minW={6}
maxW={6} maxW={6}
minH={6} minH={6}
maxH={6} maxH={6}
flexShrink={0} borderRadius={'full'}
p={0} p={0}
bg={'myGray.150'} bg={'myGray.150'}
_hover={{ bg: 'myGray.150' }}
_disabled={{ opacity: 0.5, bg: 'myGray.150' }}
isDisabled={isNextDisabled} isDisabled={isNextDisabled}
_hover={isNextDisabled ? undefined : { bg: 'myGray.200' }}
_focusVisible={{ bg: 'myGray.200', boxShadow: 'none', outline: 'none' }}
_active={{ transform: 'none' }}
onClick={onNext} onClick={onNext}
aria-label={t('chat:Next')} aria-label={t('chat:Next')}
icon={<MyIcon name={'common/rightArrow'} w={'6px'} color={'myGray.900'} />} >
/> <MyIcon name={'common/rightArrow'} w={'6px'} color={darkMode ? undefined : '#262A32'} />
</Button>
</Flex> </Flex>
<Button <Button
variant={'unstyled'} variant={'unstyled'}
...@@ -103,7 +104,10 @@ const AgentAskNavigation = ({ ...@@ -103,7 +104,10 @@ const AgentAskNavigation = ({
justifyContent={'center'} justifyContent={'center'}
w={6} w={6}
h={6} h={6}
minW={0} maxW={6}
minH={6}
maxH={6}
minW={6}
p={0} p={0}
borderRadius={'full'} borderRadius={'full'}
isDisabled={isDisabled} isDisabled={isDisabled}
...@@ -113,7 +117,7 @@ const AgentAskNavigation = ({ ...@@ -113,7 +117,7 @@ const AgentAskNavigation = ({
onClick={onSkipAll} onClick={onSkipAll}
aria-label={t('chat:interactive.agent_ask.skip_all')} aria-label={t('chat:interactive.agent_ask.skip_all')}
> >
<MyIcon name={'common/closeLight'} w={4} h={4} /> <MyIcon name={'common/closeLight'} w={'14px'} h={'14px'} />
</Button> </Button>
</Flex> </Flex>
); );
...@@ -157,6 +161,10 @@ type AgentAskOptionButtonProps = { ...@@ -157,6 +161,10 @@ type AgentAskOptionButtonProps = {
isSelected: boolean; isSelected: boolean;
isDisabled: boolean; isDisabled: boolean;
optionRef: (element: HTMLButtonElement | null) => void; optionRef: (element: HTMLButtonElement | null) => void;
isTemporarilyFocused: boolean;
onMouseEnter: () => void;
onFocus: (() => void) | undefined;
onBlur: (() => void) | undefined;
onSelect: () => void; onSelect: () => void;
onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void; onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
}; };
...@@ -167,10 +175,20 @@ const AgentAskOptionButton = ({ ...@@ -167,10 +175,20 @@ const AgentAskOptionButton = ({
isSelected, isSelected,
isDisabled, isDisabled,
optionRef, optionRef,
isTemporarilyFocused,
onMouseEnter,
onFocus,
onBlur,
onSelect, onSelect,
onKeyDown onKeyDown
}: AgentAskOptionButtonProps) => ( }: AgentAskOptionButtonProps) => (
<Box role={'group'}> <Box
role={'group'}
onMouseEnter={onMouseEnter}
_focusWithin={
isSelected ? undefined : { '& [data-agent-ask-option-index]': { bg: 'myGray.200' } }
}
>
<Button <Button
ref={optionRef} ref={optionRef}
variant={'unstyled'} variant={'unstyled'}
...@@ -188,14 +206,11 @@ const AgentAskOptionButton = ({ ...@@ -188,14 +206,11 @@ const AgentAskOptionButton = ({
borderColor={isSelected ? 'primary.300' : 'transparent'} borderColor={isSelected ? 'primary.300' : 'transparent'}
borderRadius={'21px'} borderRadius={'21px'}
bg={isSelected ? 'primary.50' : 'transparent'} bg={isSelected ? 'primary.50' : 'transparent'}
// transition={'background 0.15s ease, border-color 0.15s ease'}
textAlign={'left'} textAlign={'left'}
_hover={ _hover={isSelected ? { bg: 'primary.50', borderColor: 'primary.300' } : { bg: 'myGray.05' }}
isSelected ? { bg: 'primary.50', borderColor: 'primary.300' } : { bg: 'blackAlpha.50' }
}
_focusVisible={{ _focusVisible={{
...(isSelected ...(isSelected ? { bg: 'primary.50', borderColor: 'primary.300' } : { bg: 'myGray.05' }),
? { bg: 'primary.50', borderColor: 'primary.300' }
: { bg: 'blackAlpha.50' }),
boxShadow: 'none', boxShadow: 'none',
outline: 'none', outline: 'none',
'& > svg': { opacity: 1 } '& > svg': { opacity: 1 }
...@@ -203,19 +218,24 @@ const AgentAskOptionButton = ({ ...@@ -203,19 +218,24 @@ const AgentAskOptionButton = ({
_active={{ transform: 'none' }} _active={{ transform: 'none' }}
isDisabled={isDisabled} isDisabled={isDisabled}
_disabled={isSelected ? { opacity: 1 } : undefined} _disabled={isSelected ? { opacity: 1 } : undefined}
onFocus={onFocus}
onBlur={onBlur}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
onClick={onSelect} onClick={onSelect}
aria-pressed={isSelected} aria-pressed={isSelected}
> >
<Flex minW={0} alignItems={'center'} gap={2}> <Flex minW={0} alignItems={'center'} gap={2}>
<Flex <Flex
data-agent-ask-option-index
flexShrink={0} flexShrink={0}
alignItems={'center'} alignItems={'center'}
justifyContent={'center'} justifyContent={'center'}
w={6} w={6}
h={6} h={6}
borderRadius={'full'} borderRadius={'full'}
bg={isSelected ? 'primary.600' : 'myGray.50'} bg={isSelected ? 'primary.600' : isTemporarilyFocused ? 'myGray.200' : 'myGray.50'}
// transition={'background 0.15s ease'}
_groupHover={isSelected ? undefined : { bg: 'myGray.200' }}
color={isSelected ? 'myGray.100' : 'myGray.600'} color={isSelected ? 'myGray.100' : 'myGray.600'}
fontSize={'sm'} fontSize={'sm'}
fontWeight={500} fontWeight={500}
...@@ -227,7 +247,7 @@ const AgentAskOptionButton = ({ ...@@ -227,7 +247,7 @@ const AgentAskOptionButton = ({
{option.summary} {option.summary}
</Box> </Box>
{option.summary !== option.value && ( {option.summary !== option.value && (
<Box as={'span'} color={'myGray.600'}> <Box as={'span'} color={'myGray.600'} fontWeight={400}>
{` ${option.value}`} {` ${option.value}`}
</Box> </Box>
)} )}
...@@ -264,9 +284,11 @@ const AgentAskComposer = ({ ...@@ -264,9 +284,11 @@ const AgentAskComposer = ({
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [isQuestionVisible, setIsQuestionVisible] = useState(true); const [isQuestionVisible, setIsQuestionVisible] = useState(true);
const [isQuestionTransitioning, setIsQuestionTransitioning] = useState(false); const [isQuestionTransitioning, setIsQuestionTransitioning] = useState(false);
const [isInitialFocusActive, setIsInitialFocusActive] = useState(false);
const [contentHeight, setContentHeight] = useState<number>(); const [contentHeight, setContentHeight] = useState<number>();
const contentRef = useRef<HTMLDivElement>(null); const contentRef = useRef<HTMLDivElement>(null);
const optionRefs = useRef<Array<HTMLButtonElement | null>>([]); const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
const initialFocusStatus = useRef<'pending' | 'active' | 'cleared'>('pending');
const questionTransitionTimer = useRef<ReturnType<typeof setTimeout>>(); const questionTransitionTimer = useRef<ReturnType<typeof setTimeout>>();
const updateContentHeight = useCallback(() => { const updateContentHeight = useCallback(() => {
const content = contentRef.current; const content = contentRef.current;
...@@ -280,10 +302,31 @@ const AgentAskComposer = ({ ...@@ -280,10 +302,31 @@ const AgentAskComposer = ({
if (nextHeight) setContentHeight(nextHeight); if (nextHeight) setContentHeight(nextHeight);
}, []); }, []);
// Ask 覆盖普通输入区时，焦点始终从当前题的第一个选项开始。 const clearTemporaryInitialFocus = () => {
if (initialFocusStatus.current === 'cleared') return;
initialFocusStatus.current = 'cleared';
setIsInitialFocusActive(false);
optionRefs.current[0]?.blur();
};
useEffect(() => { useEffect(() => {
optionRefs.current[0]?.focus(); if (initialFocusStatus.current !== 'pending') return;
}, [questionIndex]);
const firstOption = optionRefs.current[0];
if (!firstOption) {
initialFocusStatus.current = 'cleared';
return;
}
initialFocusStatus.current = 'active';
firstOption.focus();
const frame = requestAnimationFrame(() => {
if (initialFocusStatus.current === 'active') setIsInitialFocusActive(true);
});
return () => cancelAnimationFrame(frame);
}, []);
useEffect(() => { useEffect(() => {
return () => { return () => {
...@@ -306,6 +349,16 @@ const AgentAskComposer = ({ ...@@ -306,6 +349,16 @@ const AgentAskComposer = ({
const isEditingCustom = editingQuestionIndex === questionIndex; const isEditingCustom = editingQuestionIndex === questionIndex;
const isAnswerValid = !!answer; const isAnswerValid = !!answer;
const isLastQuestion = questionIndex === questions.length - 1; const isLastQuestion = questionIndex === questions.length - 1;
const shouldTrimCustomAnswer = isCustom || isEditingCustom;
const trimCurrentCustomAnswer = () => {
if (!shouldTrimCustomAnswer) return answer;
const trimmedAnswer = answer.trim();
setAnswers((answers) => ({ ...answers, [questionKey]: trimmedAnswer }));
setCustomValues((values) => ({ ...values, [questionKey]: trimmedAnswer }));
return trimmedAnswer;
};
const changeQuestion = (nextQuestionIndex: number, delay = false) => { const changeQuestion = (nextQuestionIndex: number, delay = false) => {
if (isQuestionTransitioning || nextQuestionIndex === questionIndex) return; if (isQuestionTransitioning || nextQuestionIndex === questionIndex) return;
...@@ -338,8 +391,16 @@ const AgentAskComposer = ({ ...@@ -338,8 +391,16 @@ const AgentAskComposer = ({
delayTransition = false, delayTransition = false,
nextSelectedOptionIndex?: number nextSelectedOptionIndex?: number
) => { ) => {
const nextAnswers = { ...answers, [questionKey]: nextAnswer }; clearTemporaryInitialFocus();
const normalizedAnswer =
nextSelectedOptionIndex === undefined && shouldTrimCustomAnswer
? nextAnswer.trim()
: nextAnswer;
const nextAnswers = { ...answers, [questionKey]: normalizedAnswer };
setAnswers(nextAnswers); setAnswers(nextAnswers);
if (nextSelectedOptionIndex === undefined && shouldTrimCustomAnswer) {
setCustomValues((values) => ({ ...values, [questionKey]: normalizedAnswer }));
}
setSelectedOptionIndexes((indexes) => { setSelectedOptionIndexes((indexes) => {
const nextIndexes = { ...indexes }; const nextIndexes = { ...indexes };
if (nextSelectedOptionIndex === undefined) { if (nextSelectedOptionIndex === undefined) {
...@@ -357,9 +418,13 @@ const AgentAskComposer = ({ ...@@ -357,9 +418,13 @@ const AgentAskComposer = ({
} }
changeQuestion(questionIndex + 1, delayTransition); changeQuestion(questionIndex + 1, delayTransition);
}; };
const skipOrAdvance = () => goNext(isCustom && customValue.trim() ? customValue.trim() : ''); const skipOrAdvance = () => goNext(shouldTrimCustomAnswer ? customValue : '');
const skipAll = () => submit({}); const skipAll = () => {
clearTemporaryInitialFocus();
submit({});
};
const selectCustom = () => { const selectCustom = () => {
clearTemporaryInitialFocus();
setEditingQuestionIndex(questionIndex); setEditingQuestionIndex(questionIndex);
setAnswers((answers) => ({ ...answers, [questionKey]: customValue })); setAnswers((answers) => ({ ...answers, [questionKey]: customValue }));
setSelectedOptionIndexes((indexes) => { setSelectedOptionIndexes((indexes) => {
...@@ -408,9 +473,10 @@ const AgentAskComposer = ({ ...@@ -408,9 +473,10 @@ const AgentAskComposer = ({
boxShadow={'0px 5px 10px rgba(19, 51, 107, 0.13)'} boxShadow={'0px 5px 10px rgba(19, 51, 107, 0.13)'}
p={4} p={4}
ref={contentRef} ref={contentRef}
onPointerDown={clearTemporaryInitialFocus}
h={contentHeight ? `${contentHeight}px` : undefined} h={contentHeight ? `${contentHeight}px` : undefined}
overflow={'hidden'} overflow={'hidden'}
transition={'height 0.2s ease'} // transition={'height 0s ease'}
> >
<Flex alignItems={'center'} justifyContent={'space-between'} gap={4} px={1} mb={4}> <Flex alignItems={'center'} justifyContent={'space-between'} gap={4} px={1} mb={4}>
<Box <Box
...@@ -419,8 +485,8 @@ const AgentAskComposer = ({ ...@@ -419,8 +485,8 @@ const AgentAskComposer = ({
fontSize={'md'} fontSize={'md'}
fontWeight={500} fontWeight={500}
lineHeight={6} lineHeight={6}
opacity={isQuestionVisible ? 1 : 0} // opacity={isQuestionVisible ? 1 : 0}
transition={'opacity 0.2s ease'} // transition={'opacity 0s ease'}
> >
{question.question} {question.question}
</Box> </Box>
...@@ -431,13 +497,17 @@ const AgentAskComposer = ({ ...@@ -431,13 +497,17 @@ const AgentAskComposer = ({
isNextDisabled={isNextDisabled} isNextDisabled={isNextDisabled}
isDisabled={isInputDisabled} isDisabled={isInputDisabled}
onPrevious={() => { onPrevious={() => {
clearTemporaryInitialFocus();
trimCurrentCustomAnswer();
setEditingQuestionIndex(undefined); setEditingQuestionIndex(undefined);
changeQuestion(questionIndex - 1); changeQuestion(questionIndex - 1);
}} }}
onNext={() => { onNext={() => {
clearTemporaryInitialFocus();
const nextAnswer = trimCurrentCustomAnswer();
setEditingQuestionIndex(undefined); setEditingQuestionIndex(undefined);
if (isLastQuestion) { if (isLastQuestion) {
goNext(answer); goNext(nextAnswer);
return; return;
} }
changeQuestion(questionIndex + 1); changeQuestion(questionIndex + 1);
...@@ -449,8 +519,8 @@ const AgentAskComposer = ({ ...@@ -449,8 +519,8 @@ const AgentAskComposer = ({
<Flex <Flex
direction={'column'} direction={'column'}
gap={1} gap={1}
opacity={isQuestionVisible ? 1 : 0} // opacity={isQuestionVisible ? 1 : 0}
transition={'opacity 0.2s ease'} // transition={'opacity 0s ease'}
> >
{question.options.map((option, index) => { {question.options.map((option, index) => {
const isSelected = selectedOptionIndex === index; const isSelected = selectedOptionIndex === index;
...@@ -462,11 +532,16 @@ const AgentAskComposer = ({ ...@@ -462,11 +532,16 @@ const AgentAskComposer = ({
index={index} index={index}
isSelected={isSelected} isSelected={isSelected}
isDisabled={isInputDisabled} isDisabled={isInputDisabled}
isTemporarilyFocused={isInitialFocusActive && questionIndex === 0 && index === 0}
optionRef={(element) => { optionRef={(element) => {
optionRefs.current[index] = element; optionRefs.current[index] = element;
}} }}
onMouseEnter={clearTemporaryInitialFocus}
onFocus={index === 0 ? undefined : clearTemporaryInitialFocus}
onBlur={index === 0 ? clearTemporaryInitialFocus : undefined}
onSelect={() => goNext(option.value, true, index)} onSelect={() => goNext(option.value, true, index)}
onKeyDown={(event) => { onKeyDown={(event) => {
clearTemporaryInitialFocus();
const lastOptionIndex = question.options.length - 1; const lastOptionIndex = question.options.length - 1;
const nextIndex = (() => { const nextIndex = (() => {
if (event.key === 'ArrowDown' || event.key === 'ArrowRight') { if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
...@@ -489,16 +564,19 @@ const AgentAskComposer = ({ ...@@ -489,16 +564,19 @@ const AgentAskComposer = ({
{isEditingCustom ? ( {isEditingCustom ? (
<Flex <Flex
alignItems={'center'} alignItems={'stretch'}
flexWrap={'nowrap'} flexWrap={'nowrap'}
gap={2} gap={2}
pl={2} pl={2}
minW={0} minW={0}
minH={'42px'} minH={'42px'}
h={'auto'}
borderRadius={'21px'} borderRadius={'21px'}
> >
<Flex flex={'1 0 0'} minW={0} alignItems={'flex-start'} gap={2}>
<Flex <Flex
flexShrink={0} flexShrink={0}
mt={'9px'}
alignItems={'center'} alignItems={'center'}
justifyContent={'center'} justifyContent={'center'}
w={6} w={6}
...@@ -507,7 +585,7 @@ const AgentAskComposer = ({ ...@@ -507,7 +585,7 @@ const AgentAskComposer = ({
bg={'primary.600'} bg={'primary.600'}
color={'myGray.100'} color={'myGray.100'}
> >
<MyIcon name={'common/edit'} w={'14px'} h={'14px'} /> <MyIcon name={'common/edit-filled'} w={'11px'} h={'11px'} />
</Flex> </Flex>
<Textarea <Textarea
autoFocus autoFocus
...@@ -539,10 +617,35 @@ const AgentAskComposer = ({ ...@@ -539,10 +617,35 @@ const AgentAskComposer = ({
}); });
}} }}
/> />
{advanceButton} </Flex>
<Box alignSelf={'stretch'} alignItems={'flex-end'} display={'flex'}>
<Box my={'5px'}>{advanceButton}</Box>
</Box>
</Flex> </Flex>
) : ( ) : (
<Flex alignItems={'center'} gap={2} minW={0} minH={'42px'}> <Flex
role={'group'}
alignItems={'stretch'}
gap={2}
pr={1}
w={'100%'}
minW={0}
minH={'42px'}
h={isCustom ? 'auto' : '42px'}
cursor={'text'}
border={'1px solid'}
borderColor={isCustom ? 'primary.300' : 'transparent'}
borderRadius={'21px'}
bg={isCustom ? 'primary.50' : 'transparent'}
// transition={'background 0.15s ease, border-color 0.15s ease'}
_hover={
isCustom ? { bg: 'primary.50', borderColor: 'primary.300' } : { bg: 'myGray.05' }
}
_focusWithin={{
bg: isCustom ? 'primary.50' : 'myGray.05',
borderColor: isCustom ? 'primary.300' : 'transparent'
}}
>
<Button <Button
variant={'unstyled'} variant={'unstyled'}
display={'flex'} display={'flex'}
...@@ -556,26 +659,12 @@ const AgentAskComposer = ({ ...@@ -556,26 +659,12 @@ const AgentAskComposer = ({
justifyContent={'flex-start'} justifyContent={'flex-start'}
gap={2} gap={2}
p={2} p={2}
borderRadius={'21px'}
bg={isCustom ? 'primary.50' : 'transparent'}
border={'1px solid'}
borderColor={isCustom ? 'primary.300' : 'transparent'}
textAlign={'left'} textAlign={'left'}
_hover={
isCustom
? { bg: 'primary.50', borderColor: 'primary.300' }
: { bg: 'blackAlpha.50' }
}
_focusVisible={{
bg: isCustom ? 'primary.50' : 'blackAlpha.50',
borderColor: isCustom ? 'primary.300' : 'transparent',
boxShadow: 'none',
outline: 'none'
}}
_active={{ transform: 'none' }} _active={{ transform: 'none' }}
isDisabled={isSubmitting || isQuestionTransitioning} isDisabled={isSubmitting || isQuestionTransitioning}
onClick={selectCustom} onClick={selectCustom}
> >
<Flex minW={0} alignItems={'center'} gap={2}>
<Flex <Flex
flexShrink={0} flexShrink={0}
alignItems={'center'} alignItems={'center'}
...@@ -584,6 +673,8 @@ const AgentAskComposer = ({ ...@@ -584,6 +673,8 @@ const AgentAskComposer = ({
h={6} h={6}
borderRadius={'full'} borderRadius={'full'}
bg={isCustom ? 'primary.600' : 'myGray.50'} bg={isCustom ? 'primary.600' : 'myGray.50'}
// transition={'background 0.15s ease'}
_groupHover={isCustom ? undefined : { bg: 'myGray.200' }}
color={isCustom ? 'myGray.100' : 'myGray.600'} color={isCustom ? 'myGray.100' : 'myGray.600'}
> >
<MyIcon name={'common/edit'} w={'14px'} h={'14px'} /> <MyIcon name={'common/edit'} w={'14px'} h={'14px'} />
...@@ -591,13 +682,24 @@ const AgentAskComposer = ({ ...@@ -591,13 +682,24 @@ const AgentAskComposer = ({
<Box <Box
minW={0} minW={0}
color={isCustom ? 'myGray.900' : 'myGray.600'} color={isCustom ? 'myGray.900' : 'myGray.600'}
whiteSpace={'pre-wrap'} fontWeight={400}
wordBreak={'break-word'} lineHeight={5}
whiteSpace={'nowrap'}
overflow={'hidden'}
textOverflow={'ellipsis'}
sx={{
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 1
}}
> >
{customValue || t('chat:interactive.agent_ask.custom_answer')} {customValue || t('chat:interactive.agent_ask.custom_answer')}
</Box> </Box>
</Flex>
</Button> </Button>
{advanceButton} <Box alignSelf={'stretch'}>
<Box my={'4px'}>{advanceButton}</Box>
</Box>
</Flex> </Flex>
)} )}
</Flex> </Flex>
......
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