@@ -452,29 +452,22 @@ const ChatBox = (
452
452
border : theme . borders . base ,
453
453
mr : 3
454
454
} ;
455
- const controlContainerStyle = useCallback ( ( status : ChatSiteItemType [ 'status' ] ) => {
456
- return {
457
- className : 'control' ,
458
- color : 'myGray.400' ,
459
- display :
460
- status === 'finish'
461
- ? feedbackType === FeedbackTypeEnum . admin
462
- ? 'flex'
463
- : [ 'flex' , 'none' ]
464
- : 'none' ,
465
- pl : 1 ,
466
- mt : 2
467
- } ;
468
- } , [ ] ) ;
455
+ const controlContainerStyle = {
456
+ className : 'control' ,
457
+ color : 'myGray.400' ,
458
+ display : 'flex' ,
459
+ pl : 1 ,
460
+ mt : 2
461
+ } ;
469
462
const MessageCardStyle : BoxProps = {
470
463
px : 4 ,
471
464
py : 3 ,
472
465
borderRadius : '0 8px 8px 8px' ,
473
- boxShadow : '0 0 8px rgba(0,0,0,0.15)'
466
+ boxShadow : '0 0 8px rgba(0,0,0,0.15)' ,
467
+ display : 'inline-block' ,
468
+ maxW : [ 'calc(100% - 25px)' , 'calc(100% - 40px)' ]
474
469
} ;
475
470
476
- const messageCardMaxW = [ 'calc(100% - 25px)' , 'calc(100% - 40px)' ] ;
477
-
478
471
const showEmpty = useMemo (
479
472
( ) =>
480
473
feConfigs ?. show_emptyChat &&
@@ -542,84 +535,80 @@ const ChatBox = (
542
535
{ showEmpty && < Empty /> }
543
536
544
537
{ ! ! welcomeText && (
545
- < Flex flexDirection = { 'column' } alignItems = { 'flex-start' } py = { 2 } >
538
+ < Box py = { 3 } >
546
539
{ /* avatar */ }
547
540
< ChatAvatar src = { appAvatar } type = { 'AI' } />
548
541
{ /* message */ }
549
- < Card order = { 2 } mt = { 2 } { ...MessageCardStyle } bg = { 'white' } maxW = { messageCardMaxW } >
550
- < Markdown source = { `~~~guide \n${ welcomeText } ` } isChatting = { false } />
551
- </ Card >
552
- </ Flex >
542
+ < Box textAlign = { 'left' } >
543
+ < Card order = { 2 } mt = { 2 } { ...MessageCardStyle } bg = { 'white' } >
544
+ < Markdown source = { `~~~guide \n${ welcomeText } ` } isChatting = { false } />
545
+ </ Card >
546
+ </ Box >
547
+ </ Box >
553
548
) }
554
549
{ /* variable input */ }
555
550
{ ! ! variableModules ?. length && (
556
- < Flex flexDirection = { 'column' } alignItems = { 'flex-start' } py = { 2 } >
551
+ < Box py = { 3 } >
557
552
{ /* avatar */ }
558
553
< ChatAvatar src = { appAvatar } type = { 'AI' } />
559
554
{ /* message */ }
560
- < Card
561
- order = { 2 }
562
- mt = { 2 }
563
- bg = { 'white' }
564
- w = { '400px' }
565
- maxW = { messageCardMaxW }
566
- { ...MessageCardStyle }
567
- >
568
- { variableModules . map ( ( item ) => (
569
- < Box key = { item . id } mb = { 4 } >
570
- < VariableLabel required = { item . required } > { item . label } </ VariableLabel >
571
- { item . type === VariableInputEnum . input && (
572
- < Input
573
- isDisabled = { variableIsFinish }
574
- { ...register ( item . key , {
575
- required : item . required
576
- } ) }
577
- />
578
- ) }
579
- { item . type === VariableInputEnum . select && (
580
- < MySelect
581
- width = { '100%' }
582
- isDisabled = { variableIsFinish }
583
- list = { ( item . enums || [ ] ) . map ( ( item ) => ( {
584
- label : item . value ,
585
- value : item . value
586
- } ) ) }
587
- { ...register ( item . key , {
588
- required : item . required
589
- } ) }
590
- value = { getValues ( item . key ) }
591
- onchange = { ( e ) => {
592
- setValue ( item . key , e ) ;
593
- setRefresh ( ! refresh ) ;
594
- } }
595
- />
596
- ) }
597
- </ Box >
598
- ) ) }
599
- { ! variableIsFinish && (
600
- < Button
601
- leftIcon = { < MyIcon name = { 'chatFill' } w = { '16px' } /> }
602
- size = { 'sm' }
603
- maxW = { '100px' }
604
- borderRadius = { 'lg' }
605
- onClick = { handleSubmit ( ( data ) => {
606
- onUpdateVariable ?.( data ) ;
607
- setVariables ( data ) ;
608
- setVariableInputFinish ( true ) ;
609
- } ) }
610
- >
611
- { '开始对话' }
612
- </ Button >
613
- ) }
614
- </ Card >
615
- </ Flex >
555
+ < Box textAlign = { 'left' } >
556
+ < Card order = { 2 } mt = { 2 } bg = { 'white' } w = { '400px' } { ...MessageCardStyle } >
557
+ { variableModules . map ( ( item ) => (
558
+ < Box key = { item . id } mb = { 4 } >
559
+ < VariableLabel required = { item . required } > { item . label } </ VariableLabel >
560
+ { item . type === VariableInputEnum . input && (
561
+ < Input
562
+ isDisabled = { variableIsFinish }
563
+ { ...register ( item . key , {
564
+ required : item . required
565
+ } ) }
566
+ />
567
+ ) }
568
+ { item . type === VariableInputEnum . select && (
569
+ < MySelect
570
+ width = { '100%' }
571
+ isDisabled = { variableIsFinish }
572
+ list = { ( item . enums || [ ] ) . map ( ( item ) => ( {
573
+ label : item . value ,
574
+ value : item . value
575
+ } ) ) }
576
+ { ...register ( item . key , {
577
+ required : item . required
578
+ } ) }
579
+ value = { getValues ( item . key ) }
580
+ onchange = { ( e ) => {
581
+ setValue ( item . key , e ) ;
582
+ setRefresh ( ! refresh ) ;
583
+ } }
584
+ />
585
+ ) }
586
+ </ Box >
587
+ ) ) }
588
+ { ! variableIsFinish && (
589
+ < Button
590
+ leftIcon = { < MyIcon name = { 'chatFill' } w = { '16px' } /> }
591
+ size = { 'sm' }
592
+ maxW = { '100px' }
593
+ borderRadius = { 'lg' }
594
+ onClick = { handleSubmit ( ( data ) => {
595
+ onUpdateVariable ?.( data ) ;
596
+ setVariables ( data ) ;
597
+ setVariableInputFinish ( true ) ;
598
+ } ) }
599
+ >
600
+ { '开始对话' }
601
+ </ Button >
602
+ ) }
603
+ </ Card >
604
+ </ Box >
605
+ </ Box >
616
606
) }
617
607
618
608
{ /* chat history */ }
619
609
< Box id = { 'history' } >
620
610
{ chatHistory . map ( ( item , index ) => (
621
- < Flex
622
- position = { 'relative' }
611
+ < Box
623
612
key = { item . dataId }
624
613
flexDirection = { 'column' }
625
614
alignItems = { item . obj === 'Human' ? 'flex-end' : 'flex-start' }
@@ -633,11 +622,7 @@ const ChatBox = (
633
622
{ item . obj === 'Human' && (
634
623
< >
635
624
< Flex w = { '100%' } alignItems = { 'center' } justifyContent = { 'flex-end' } >
636
- < Flex
637
- { ...controlContainerStyle ( item . status ) }
638
- justifyContent = { 'flex-end' }
639
- mr = { 3 }
640
- >
625
+ < Flex { ...controlContainerStyle } justifyContent = { 'flex-end' } mr = { 3 } >
641
626
< MyTooltip label = { t ( 'common.Copy' ) } >
642
627
< MyIcon
643
628
{ ...controlIconStyle }
@@ -678,7 +663,7 @@ const ChatBox = (
678
663
</ Flex >
679
664
< ChatAvatar src = { userAvatar } type = { 'Human' } />
680
665
</ Flex >
681
- < Box position = { 'relative' } maxW = { messageCardMaxW } mt = { [ '6px' , 2 ] } >
666
+ < Box mt = { [ '6px' , 2 ] } textAlign = { 'right' } >
682
667
< Card
683
668
className = "markdown"
684
669
whiteSpace = { 'pre-wrap' }
@@ -695,7 +680,7 @@ const ChatBox = (
695
680
< >
696
681
< Flex w = { '100%' } alignItems = { 'flex-end' } >
697
682
< ChatAvatar src = { appAvatar } type = { 'AI' } />
698
- < Flex { ...controlContainerStyle ( item . status ) } ml = { 3 } >
683
+ < Flex { ...controlContainerStyle } ml = { 3 } >
699
684
< MyTooltip label = { '复制' } >
700
685
< MyIcon
701
686
{ ...controlIconStyle }
@@ -841,7 +826,7 @@ const ChatBox = (
841
826
</ Flex >
842
827
) }
843
828
</ Flex >
844
- < Box position = { 'relative' } maxW = { messageCardMaxW } mt = { [ '6px' , 2 ] } >
829
+ < Box textAlign = { 'left' } mt = { [ '6px' , 2 ] } >
845
830
< Card bg = { 'white' } { ...MessageCardStyle } >
846
831
< Markdown
847
832
source = { item . value }
@@ -869,7 +854,7 @@ const ChatBox = (
869
854
</ Box >
870
855
</ >
871
856
) }
872
- </ Flex >
857
+ </ Box >
873
858
) ) }
874
859
</ Box >
875
860
</ Box >
0 commit comments