@@ -76,6 +76,7 @@ export default function InboxPage() {
76
76
const [ content , setContent ] = useState ( "" ) ;
77
77
const [ showAllMail , setShowAllMail ] = useState ( true ) ;
78
78
const [ showUnreadMail , setShowUnreadMail ] = useState ( false ) ;
79
+ const [ sourceList , setSourceList ] = useState < JSX . Element [ ] > ( [ ] ) ;
79
80
80
81
const activeThread = threads . filter ( ( thread ) => {
81
82
return thread . id === active ;
@@ -179,41 +180,45 @@ export default function InboxPage() {
179
180
) ;
180
181
} ;
181
182
182
- const getResponse = useCallback ( ( ) => {
183
- // Checks if response is already stored
184
- const currEmailID =
185
- activeThread . emailList [ activeThread . emailList . length - 1 ] . id ;
186
- if ( storedResponses [ currEmailID ] ) {
187
- const oldResponse = storedResponses [ currEmailID ] ;
188
- setResponse ( oldResponse ) ;
189
- setContent ( oldResponse . content . replaceAll ( "\n" , "<br/>" ) ) ;
190
- return ;
191
- }
183
+ const getResponse = useCallback (
184
+ ( skip : boolean = false ) => {
185
+ // Checks if response is already stored
186
+ const currEmailID =
187
+ activeThread . emailList [ activeThread . emailList . length - 1 ] . id ;
188
+ if ( storedResponses [ currEmailID ] && ! skip ) {
189
+ const oldResponse = storedResponses [ currEmailID ] ;
190
+ setResponse ( oldResponse ) ;
191
+ setContent ( oldResponse . content . replaceAll ( "\n" , "<br/>" ) ) ;
192
+ return ;
193
+ }
192
194
193
- // Otherwise fetches response from server
194
- const formData = new FormData ( ) ;
195
- formData . append ( "id" , currEmailID . toString ( ) ) ;
195
+ // Otherwise fetches response from server
196
+ const formData = new FormData ( ) ;
197
+ formData . append ( "id" , currEmailID . toString ( ) ) ;
196
198
197
- fetch ( `/api/emails/get_response` , {
198
- method : "POST" ,
199
- body : formData ,
200
- } )
201
- . then ( ( res ) => {
202
- if ( res . ok ) return res . json ( ) ;
203
- notifications . show ( {
204
- title : "Error!" ,
205
- color : "red" ,
206
- message : "Something went wrong!" ,
207
- } ) ;
199
+ fetch ( `/api/emails/get_response` , {
200
+ method : "POST" ,
201
+ body : formData ,
208
202
} )
209
- . then ( ( data ) => {
210
- setStoredResponses ( ( oldResponses ) => {
211
- return { ...oldResponses , [ currEmailID ] : data } ;
203
+ . then ( ( res ) => {
204
+ if ( res . ok ) return res . json ( ) ;
205
+ notifications . show ( {
206
+ title : "Error!" ,
207
+ color : "red" ,
208
+ message : "Something went wrong!" ,
209
+ } ) ;
210
+ return ;
211
+ } )
212
+ . then ( ( data ) => {
213
+ setStoredResponses ( ( oldResponses ) => {
214
+ return { ...oldResponses , [ currEmailID ] : data } ;
215
+ } ) ;
216
+ setResponse ( data ) ;
217
+ setContent ( data . content . replaceAll ( "\n" , "<br/>" ) ) ;
212
218
} ) ;
213
- setResponse ( data ) ;
214
- setContent ( data . content . replaceAll ( "\n" , "<br/>" ) ) ;
215
- } ) ;
216
- } , [ activeThread , storedResponses ] ) ;
219
+ } ,
220
+ [ activeThread , storedResponses ] ,
221
+ ) ;
217
222
218
223
useEffect ( ( ) => {
219
224
if ( activeThread && ! activeThread . resolved ) getResponse ( ) ;
@@ -300,7 +305,7 @@ export default function InboxPage() {
300
305
} ) ;
301
306
} )
302
307
. then ( ( ) => {
303
- getResponse ( ) ;
308
+ getResponse ( true ) ;
304
309
notifications . update ( {
305
310
id : "loading" ,
306
311
title : "Success!" ,
@@ -574,67 +579,76 @@ export default function InboxPage() {
574
579
) ;
575
580
} ) ;
576
581
577
- const sourceList = response ?. questions . map ( ( question , index ) => {
578
- return (
579
- < div key = { index } >
580
- < Text className = { classes . sourceQuestion } >
581
- { "Question: " + question }
582
- </ Text >
583
- < Accordion >
584
- { response . documents [ index ] . map ( ( document , documentIndex ) => {
585
- return (
586
- < Accordion . Item
587
- style = { {
588
- borderLeft : `6px solid ${ computeColor (
589
- // Math.round((document.confidence / 0.8) * 100) / 100
590
- Math . round ( document . confidence * 100 ) / 100 ,
591
- ) } `,
592
- } }
593
- key = { documentIndex }
594
- value = {
595
- document . label . length === 0
596
- ? "Unlabeled Document " + documentIndex
597
- : document . label + " " + documentIndex
598
- }
599
- >
600
- < Accordion . Control >
601
- { document . label . length === 0
602
- ? "Unlabeled Document"
603
- : document . label }
604
- < Text className = { classes . sourceConfidence } >
605
- { "Relevance: " +
606
- // Math.round((document.confidence / 0.8) * 100) / 100
607
- Math . round ( document . confidence * 100 ) / 100 }
608
- </ Text >
609
- { document . to_delete && (
610
- < Text className = { classes . deletedWarning } >
611
- {
612
- "This source has been deleted! Regenerating response recommended."
582
+ useEffect ( ( ) => {
583
+ console . log ( "setting source list" ) ;
584
+ if ( response ) {
585
+ setSourceList (
586
+ response . questions . map ( ( question , index ) => {
587
+ return (
588
+ < div key = { index } >
589
+ < Text className = { classes . sourceQuestion } >
590
+ { "Question: " + question }
591
+ </ Text >
592
+ < Accordion >
593
+ { response . documents [ index ] . map ( ( document , documentIndex ) => {
594
+ return (
595
+ < Accordion . Item
596
+ style = { {
597
+ borderLeft : `6px solid ${ computeColor (
598
+ // Math.round((document.confidence / 0.8) * 100) / 100
599
+ Math . round ( document . confidence * 100 ) / 100 ,
600
+ ) } `,
601
+ } }
602
+ key = { documentIndex }
603
+ value = {
604
+ document . label . length === 0
605
+ ? "Unlabeled Document " + documentIndex
606
+ : document . label + " " + documentIndex
613
607
}
614
- </ Text >
615
- ) }
616
- </ Accordion . Control >
617
- < Accordion . Panel >
618
- < div >
619
- { document . question . length > 0 && (
620
- < Text className = { classes . sourceText } >
621
- { document . question }
622
- </ Text >
623
- ) }
624
- < Text className = { classes . sourceText } >
625
- { document . content }
626
- </ Text >
627
- < Text > Source: ({ document . source } )</ Text >
628
- { /* Change source to links in the future */ }
629
- </ div >
630
- </ Accordion . Panel >
631
- </ Accordion . Item >
632
- ) ;
633
- } ) }
634
- </ Accordion >
635
- </ div >
636
- ) ;
637
- } ) ;
608
+ >
609
+ < Accordion . Control >
610
+ { document . label . length === 0
611
+ ? "Unlabeled Document"
612
+ : document . label }
613
+ < Text className = { classes . sourceConfidence } >
614
+ { "Relevance: " +
615
+ // Math.round((document.confidence / 0.8) * 100) / 100
616
+ Math . round ( document . confidence * 100 ) / 100 }
617
+ </ Text >
618
+ { document . to_delete && (
619
+ < Text className = { classes . deletedWarning } >
620
+ {
621
+ "This source has been deleted! Regenerating response recommended."
622
+ }
623
+ </ Text >
624
+ ) }
625
+ </ Accordion . Control >
626
+ < Accordion . Panel >
627
+ < div >
628
+ { document . question . length > 0 && (
629
+ < Text className = { classes . sourceText } >
630
+ { document . question }
631
+ </ Text >
632
+ ) }
633
+ < Text className = { classes . sourceText } >
634
+ { document . content }
635
+ </ Text >
636
+ < Text > Source: ({ document . source } )</ Text >
637
+ Change source to links in the future
638
+ </ div >
639
+ </ Accordion . Panel >
640
+ </ Accordion . Item >
641
+ ) ;
642
+ } ) }
643
+ </ Accordion >
644
+ </ div >
645
+ ) ;
646
+ } ) ,
647
+ ) ;
648
+ } else {
649
+ setSourceList ( [ ] ) ;
650
+ }
651
+ } , [ response ] ) ;
638
652
639
653
return (
640
654
< Grid
@@ -846,8 +860,10 @@ export default function InboxPage() {
846
860
</ Grid . Col >
847
861
{ sourceActive && (
848
862
< Grid . Col span = { 42 } className = { classes . threads } >
849
- < Text className = { classes . inboxText } > Sources</ Text >
850
- < ScrollArea h = "95vh" > { sourceList } </ ScrollArea >
863
+ < Stack >
864
+ < Text className = { classes . inboxText } > Sources</ Text >
865
+ < ScrollArea h = "95vh" > { sourceList } </ ScrollArea >
866
+ </ Stack >
851
867
</ Grid . Col >
852
868
) }
853
869
</ Grid >
0 commit comments