Skip to content

Commit 3d46843

Browse files
committed
Add loading indicator and error handling to chat UI
1 parent f7df4ef commit 3d46843

File tree

1 file changed

+30
-8
lines changed

1 file changed

+30
-8
lines changed

app/components/agent/Chat.tsx

+30-8
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { litlyticsAtom, pipelineAtom } from '~/store/store';
55
import { Button } from '../catalyst/button';
66
import { Input } from '../catalyst/input';
77
import { CustomMarkdown } from '../markdown/Markdown';
8+
import { Spinner } from '../Spinner';
89
import { askAgent } from './logic/askAgent';
910
import { type Message } from './logic/types';
1011

@@ -45,6 +46,8 @@ export function Chat() {
4546
text: `Hi! I'm Lit. Ask me to do anything for you.`,
4647
},
4748
]);
49+
const [loading, setLoading] = useState<boolean>(false);
50+
const [error, setError] = useState<Error | undefined>();
4851

4952
useEffect(() => {
5053
// scroll to bottom
@@ -64,6 +67,8 @@ export function Chat() {
6467
}
6568
// reset input
6669
setInput('');
70+
// reset error
71+
setError(undefined);
6772
// append user message to messages
6873
const messagesWithUser: Message[] = [
6974
...messages,
@@ -75,15 +80,22 @@ export function Chat() {
7580
];
7681
setMessages(messagesWithUser);
7782

78-
// TODO: show loading state
79-
83+
// show loading state
84+
setLoading(true);
8085
// 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);
8799
};
88100

89101
return (
@@ -95,6 +107,16 @@ export function Chat() {
95107
{messages.map((m) => (
96108
<MessageRender key={m.id} message={m} />
97109
))}
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+
)}
98120
</div>
99121
<div className="flex items-center min-h-16 p-2">
100122
<Input

0 commit comments

Comments
 (0)