Skip to content

Commit e185b91

Browse files
DanielAgbeniDanielAgbeni
committed
fix: Updated te UI of The chat component and improved the UX of the chat component
1 parent 91981a6 commit e185b91

File tree

1 file changed

+99
-65
lines changed

1 file changed

+99
-65
lines changed

‎client/src/components/Chat/chat.tsx‎

Lines changed: 99 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,111 @@
1-
"use client";
1+
'use client';
22

3-
import { PlaceholdersAndVanishInput } from "../ui/placeholders-and-vanish-input";
4-
import { useState } from "react";
5-
import axios from "axios";
3+
import { PlaceholdersAndVanishInput } from '../ui/placeholders-and-vanish-input';
4+
import { useState, useEffect, useRef } from 'react';
5+
import axios from 'axios';
6+
7+
interface Message {
8+
query: string;
9+
response: string;
10+
isLoading?: boolean;
11+
}
612

713
export function PlaceholdersAndVanishInputDemo() {
8-
const [messages, setMessages] = useState<Array<{ query: string; response: string }>>([]);
9-
const [isLoading, setIsLoading] = useState(false);
14+
const [messages, setMessages] = useState<Array<Message>>([]);
15+
const messagesEndRef = useRef<HTMLDivElement>(null);
16+
17+
const backendUrl =
18+
import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
1019

11-
const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5000';
20+
const placeholders = [
21+
"What's the first rule of Fight Club?",
22+
'Who is Tyler Durden?',
23+
'Where is Andrew Laeddis Hiding?',
24+
'Write a Javascript method to reverse a string',
25+
'How to assemble your own PC?',
26+
];
1227

28+
const scrollToBottom = () => {
29+
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
30+
};
1331

14-
const placeholders = [
15-
"What's the first rule of Fight Club?",
16-
"Who is Tyler Durden?",
17-
"Where is Andrew Laeddis Hiding?",
18-
"Write a Javascript method to reverse a string",
19-
"How to assemble your own PC?",
20-
];
32+
useEffect(() => {
33+
scrollToBottom();
34+
}, [messages]);
2135

22-
const handleChange = () => {
23-
// You can add any additional logic here if needed
24-
};
36+
const handleChange = () => {
37+
// Additional logic can be added here
38+
};
2539

26-
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
27-
e.preventDefault();
28-
const query = e.currentTarget.querySelector('input')?.value;
29-
if (!query) return;
40+
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
41+
e.preventDefault();
42+
const query = e.currentTarget.querySelector('input')?.value;
43+
if (!query) return;
3044

31-
setIsLoading(true);
32-
try {
33-
const result = await axios.post(`${backendUrl}/chat`, { query });
34-
setMessages(prevMessages => [...prevMessages, { query, response: result.data.result }]);
35-
} catch (error) {
36-
console.error('Error querying the model:', error);
37-
setMessages(prevMessages => [...prevMessages, { query, response: "An error occurred while processing your request." }]);
38-
} finally {
39-
setIsLoading(false);
40-
}
41-
};
45+
setMessages((prevMessages) => [
46+
...prevMessages,
47+
{ query, response: '', isLoading: true },
48+
]);
4249

43-
return (
44-
<div className="h-[50rem] flex flex-col">
45-
<h2 className="mb-4 text-xl text-center sm:text-5xl dark:text-white text-black">
46-
Start Collaborating
47-
</h2>
48-
<div className="flex-grow overflow-y-auto px-4 flex flex-col items-center">
49-
{messages.map((message, index) => (
50-
<div key={index} className="mb-4 w-full max-w-[80%]">
51-
<div className="bg-zinc-100 dark:bg-zinc-800 p-2 rounded-lg mb-2">
52-
<p className="font-bold">You:</p>
53-
<p>{message.query}</p>
54-
</div>
55-
<div className="bg-zinc-200 dark:bg-zinc-700 p-2 rounded-lg">
56-
<p className="font-bold">AI:</p>
57-
<p>{message.response}</p>
58-
</div>
59-
</div>
60-
))}
61-
</div>
62-
{isLoading && (
63-
<div className="flex justify-center items-center p-4">
64-
<p>Loading...</p>
65-
</div>
66-
)}
67-
<div className="p-4 mt-4">
68-
<PlaceholdersAndVanishInput
69-
placeholders={placeholders}
50+
try {
51+
const result = await axios.post(`${backendUrl}/chat`, { query });
52+
setMessages((prevMessages) => {
53+
const newMessages = [...prevMessages];
54+
const lastMessage = newMessages[newMessages.length - 1];
55+
lastMessage.response = result.data.result;
56+
lastMessage.isLoading = false;
57+
return newMessages;
58+
});
59+
} catch (error) {
60+
console.error('Error querying the model:', error);
61+
setMessages((prevMessages) => {
62+
const newMessages = [...prevMessages];
63+
const lastMessage = newMessages[newMessages.length - 1];
64+
lastMessage.response =
65+
'An error occurred while processing your request.';
66+
lastMessage.isLoading = false;
67+
return newMessages;
68+
});
69+
}
70+
};
7071

71-
onChange={handleChange}
72-
onSubmit={onSubmit}
73-
/>
74-
</div>
75-
</div>
76-
);
72+
return (
73+
<div className='h-screen flex flex-col'>
74+
<h2 className='mb-4 text-xl text-center sm:text-5xl dark:text-white text-black mt-5'>
75+
Start Collaborating
76+
</h2>
77+
<div className='flex-grow overflow-y-auto px-4'>
78+
{messages.map((message, index) => (
79+
<div
80+
key={index}
81+
className='mb-4'>
82+
<div className='flex justify-end mb-2'>
83+
<div className='bg-zinc-100 dark:bg-zinc-800 p-3 rounded-lg max-w-[80%]'>
84+
<p className='font-bold'>You:</p>
85+
<p>{message.query}</p>
86+
</div>
87+
</div>
88+
<div className='flex justify-start'>
89+
<div className='bg-zinc-200 dark:bg-zinc-700 p-3 rounded-lg max-w-[80%]'>
90+
<p className='font-bold'>AI:</p>
91+
{message.isLoading ? (
92+
<p>Loading...</p>
93+
) : (
94+
<p>{message.response}</p>
95+
)}
96+
</div>
97+
</div>
98+
</div>
99+
))}
100+
<div ref={messagesEndRef} />
101+
</div>
102+
<div className='p-4 mb-auto'>
103+
<PlaceholdersAndVanishInput
104+
placeholders={placeholders}
105+
onChange={handleChange}
106+
onSubmit={onSubmit}
107+
/>
108+
</div>
109+
</div>
110+
);
77111
}

0 commit comments

Comments
 (0)