@@ -5,6 +5,7 @@ import { litlyticsAtom, pipelineAtom } from '~/store/store';
5
5
import { Button } from '../catalyst/button' ;
6
6
import { Input } from '../catalyst/input' ;
7
7
import { CustomMarkdown } from '../markdown/Markdown' ;
8
+ import { Spinner } from '../Spinner' ;
8
9
import { askAgent } from './logic/askAgent' ;
9
10
import { type Message } from './logic/types' ;
10
11
@@ -45,6 +46,8 @@ export function Chat() {
45
46
text : `Hi! I'm Lit. Ask me to do anything for you.` ,
46
47
} ,
47
48
] ) ;
49
+ const [ loading , setLoading ] = useState < boolean > ( false ) ;
50
+ const [ error , setError ] = useState < Error | undefined > ( ) ;
48
51
49
52
useEffect ( ( ) => {
50
53
// scroll to bottom
@@ -64,6 +67,8 @@ export function Chat() {
64
67
}
65
68
// reset input
66
69
setInput ( '' ) ;
70
+ // reset error
71
+ setError ( undefined ) ;
67
72
// append user message to messages
68
73
const messagesWithUser : Message [ ] = [
69
74
...messages ,
@@ -75,15 +80,22 @@ export function Chat() {
75
80
] ;
76
81
setMessages ( messagesWithUser ) ;
77
82
78
- // TODO: show loading state
79
-
83
+ // show loading state
84
+ setLoading ( true ) ;
80
85
// run new messages through agent
81
- const newMessages = await askAgent ( {
82
- messages : messagesWithUser ,
83
- litlytics,
84
- setPipeline,
85
- } ) ;
86
- setMessages ( newMessages ) ;
86
+ try {
87
+ const newMessages = await askAgent ( {
88
+ messages : messagesWithUser ,
89
+ litlytics,
90
+ setPipeline,
91
+ } ) ;
92
+ setMessages ( newMessages ) ;
93
+ } catch ( err ) {
94
+ // catch and display error
95
+ setError ( err as Error ) ;
96
+ }
97
+ // disable loading state
98
+ setLoading ( false ) ;
87
99
} ;
88
100
89
101
return (
@@ -95,6 +107,16 @@ export function Chat() {
95
107
{ messages . map ( ( m ) => (
96
108
< MessageRender key = { m . id } message = { m } />
97
109
) ) }
110
+ { loading && (
111
+ < div className = "flex items-center justify-end gap-2" >
112
+ < Spinner className = "h-5 w-5" /> Thinking...
113
+ </ div >
114
+ ) }
115
+ { error && (
116
+ < div className = "flex items-center justify-between bg-red-400 dark:bg-red-700 rounded-xl py-1 px-2 my-2" >
117
+ Error while thinking: { error . message }
118
+ </ div >
119
+ ) }
98
120
</ div >
99
121
< div className = "flex items-center min-h-16 p-2" >
100
122
< Input
0 commit comments