Skip to content

Commit b54ca16

Browse files
0xk4b1r0xk4b1r
authored
performance (#901)
* performance * performance
1 parent ea3901a commit b54ca16

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+1375
-724
lines changed

‎src/App.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ const App = () => {
114114
<Route exact path={"/resetPassword/:token"} element={<ResetPassword />} />
115115
<Route exact path={"/register"} element={<Register />} />
116116

117-
<Route exact path={"/aichat"} element={<AiChat />} />
117+
<Route exact path={"/aichat/*"} element={<AiChat />} />
118118

119119
<Route path={"/explore/*"} element={<ExploreRoutes />} />
120120
<Route path={"/feeds/*"} element={<FeedsRoute />} />
@@ -192,6 +192,7 @@ const App = () => {
192192
{/* <ChatBot /> */}
193193
{!hideHomeHeader() && <Footer />}
194194
</Container>
195+
195196
<ToastContainer
196197
position="bottom-right"
197198
autoClose={5000}

‎src/app/store.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import blogCommentsReducer from "src/features/blogs/blogComments/blogCommentSlic
1616
import ctfReducer from "src/features/ctf/ctfSlice";
1717
import bookmarkReduces from "src/features/bookmarks/bookmarkSlice";
1818
import resetPasswordReducer from "src/features/resetPassword/resetPasswordSlice";
19-
import followReducer from "src/features/follow/followSlice";
20-
import connectionReducer from "src/features/connections/connectionSlice";
19+
import followReducer from "src/features/userDetail/follow/followSlice";
20+
import connectionReducer from "src/features/userDetail/connections/connectionSlice";
2121

2222
import eventsReducer from "src/features/events/eventsSlice";
2323

@@ -44,7 +44,7 @@ export default configureStore({
4444
userDetail: userDetailReducer,
4545
ctfs: ctfReducer,
4646
resetPassword: resetPasswordReducer,
47-
followData: followReducer,
47+
follow: followReducer,
4848
connectionData: connectionReducer,
4949

5050
events: eventsReducer,

‎src/components/AIChat/AIChat.jsx

+89-99
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,23 @@
1-
import React, { useState, useEffect } from "react";
1+
import React, { useState, useEffect, useCallback } from "react";
22
import axios from "axios";
33
import { Wrapper } from "src/components/Dashboard/Profile/ProfileElements";
4-
import { AIChatContainer, ChatHeader, ChatInput, ChatBox, ChatTitle, ToggleSection } from "./AIChatElements";
5-
import ChatMessages from "./ChatMessages";
4+
import { AIChatContainer } from "./AIChatElements";
65
import RecentChats from "./RecentChats";
76
import { useSelector } from "react-redux";
8-
import { BiSend } from "react-icons/bi";
9-
import { CircleSpinner } from "react-spinners-kit";
107
import { getApiUrl } from "src/features/apiUrl";
118
import { toast } from "react-toastify";
12-
import { SlOptionsVertical } from "react-icons/sl";
13-
import { FaAngleLeft, FaAngleRight } from "react-icons/fa";
149
import AuthPopup from "src/pages/AuthPopup/AuthPopup";
15-
import Prompts from "./Prompts/Prompts";
16-
import { TbMessage2Plus } from "react-icons/tb";
17-
import { RecentChatsHeader } from "src/components/AIChat/RecentChatsElements.jsx";
10+
import { Route, Routes } from "react-router-dom";
11+
import Chat from "src/components/AIChat/Chat.jsx";
12+
import NewChat from "src/components/AIChat/NewChat.jsx";
1813

1914
const API_BASE_URL = getApiUrl("api/aiChat");
2015

2116
const AiChat = () => {
22-
// const navigate = useNavigate();
2317
const { user } = useSelector((state) => state.auth);
24-
25-
// if (!user) {
26-
// navigate("/login");
27-
// }
28-
2918
const [chats, setChats] = useState([]);
19+
const [chat, setChat] = useState({});
3020
const [isTrailEnded, setIsTrailEnded] = useState(false);
31-
3221
const trailMessage = [
3322
{
3423
type: "user",
@@ -43,13 +32,12 @@ const AiChat = () => {
4332
_id: "65b7507df24f3468473bb983",
4433
},
4534
];
46-
4735
const [userInput, setUserInput] = useState("");
4836
const [isLoading, setIsLoading] = useState(false);
4937
const [selectedChatId, setSelectedChatId] = useState(null);
50-
5138
const [toggle, setToggle] = useState(false);
5239
const [showAuthPopup, setShowAuthPopup] = useState(false);
40+
const [fetchError, setFetchError] = useState(null);
5341

5442
useEffect(() => {
5543
const handleResize = () => {
@@ -64,6 +52,7 @@ const AiChat = () => {
6452
window.addEventListener("resize", handleResize);
6553
return () => window.removeEventListener("resize", handleResize);
6654
}, []);
55+
6756
const handleSendDummyMessage = async (dummyMessage) => {
6857
setUserInput(dummyMessage);
6958
setIsLoading(true);
@@ -111,6 +100,8 @@ const AiChat = () => {
111100
return;
112101
}
113102

103+
console.log(userInput);
104+
114105
try {
115106
const response = await axios.post(
116107
`${API_BASE_URL}/ask/${selectedChatId}`,
@@ -123,7 +114,9 @@ const AiChat = () => {
123114
},
124115
);
125116

126-
const { chats } = response.data;
117+
const { chats, updatedChat } = response.data;
118+
119+
setChat(updatedChat);
127120
setChats(chats);
128121
setUserInput("");
129122
} catch (error) {
@@ -132,9 +125,6 @@ const AiChat = () => {
132125
toast("Your trial period has ended");
133126
return;
134127
}
135-
// toast("Please enter your API Key");
136-
137-
// toast(error.response.data);
138128
console.error(error);
139129
} finally {
140130
setIsLoading(false);
@@ -146,7 +136,6 @@ const AiChat = () => {
146136
setIsLoading(true);
147137
setShowAuthPopup(true);
148138
setIsLoading(false);
149-
150139
}
151140
};
152141

@@ -158,14 +147,40 @@ const AiChat = () => {
158147
Authorization: `Bearer ${user.token}`,
159148
},
160149
});
161-
const { chats } = response.data;
162-
setChats(chats);
150+
setChats(response.data);
163151
setSelectedChatId(chats.length > 0 ? chats.reverse()[0]?._id : null);
164152
} catch (error) {
165153
console.error(error);
166154
}
167155
};
168156

157+
const getChat = useCallback(async () => {
158+
try {
159+
setFetchError(null);
160+
const response = await axios.get(`${API_BASE_URL}/${selectedChatId}`, {
161+
headers: {
162+
"Content-Type": "application/json",
163+
Authorization: `Bearer ${user.token}`,
164+
},
165+
});
166+
setChat(response.data);
167+
} catch (error) {
168+
console.error("Error fetching chat:", error);
169+
setFetchError("Failed to load chat. Please try again.");
170+
}
171+
}, [API_BASE_URL, selectedChatId, user.token]);
172+
173+
useEffect(() => {
174+
if (!user) return;
175+
getMessages();
176+
}, []);
177+
178+
useEffect(() => {
179+
if (!selectedChatId) return;
180+
181+
getChat();
182+
}, [getChat, selectedChatId]);
183+
169184
const handleNewChat = async () => {
170185
setIsLoading(true);
171186

@@ -225,10 +240,9 @@ const AiChat = () => {
225240
}
226241
};
227242

228-
useEffect(() => {
229-
if (!user) return;
230-
getMessages();
231-
}, []);
243+
const handleCloseAuthPopup = () => {
244+
setShowAuthPopup(false);
245+
};
232246

233247
useEffect(() => {
234248
if (chats.length === 0) {
@@ -238,9 +252,7 @@ const AiChat = () => {
238252
}
239253
}, []);
240254

241-
const handleCloseAuthPopup = () => {
242-
setShowAuthPopup(false);
243-
};
255+
console.log(fetchError);
244256

245257
return (
246258
<Wrapper>
@@ -258,72 +270,50 @@ const AiChat = () => {
258270
/>
259271
)}
260272

261-
{selectedChatId ? (
262-
chats.map(
263-
(chat) =>
264-
chat._id === selectedChatId && (
265-
<ChatBox key={chat?._id}>
266-
<ChatHeader>
267-
<ToggleSection onClick={() => setToggle(!toggle)}>
268-
{toggle ? <FaAngleRight /> : <FaAngleLeft />}
269-
</ToggleSection>
270-
<ChatTitle>{chat?.title}</ChatTitle>
271-
<SlOptionsVertical />
272-
</ChatHeader>
273-
274-
<ChatMessages
275-
messages={chat.messages}
276-
isTrailEnded={isTrailEnded}
277-
trailMessage={trailMessage}
278-
/>
279-
280-
{!isTrailEnded ? (
281-
<>
282-
{chat.title !== "New Chat" ? null : (
283-
<Prompts handleSendDummyMessage={handleSendDummyMessage} />
284-
)}
285-
286-
<ChatInput onSubmit={handleSendMessage}>
287-
<input
288-
type="text"
289-
value={userInput}
290-
onChange={(e) => setUserInput(e.target.value)}
291-
/>
292-
{isLoading ? (
293-
<button>
294-
<CircleSpinner size={20} color={"#131313"} />
295-
</button>
296-
) : (
297-
<button type="submit">
298-
<BiSend size={25} />
299-
</button>
300-
)}
301-
</ChatInput>
302-
</>
303-
) : null}
304-
</ChatBox>
305-
),
306-
)
307-
) : (
308-
<ChatBox key={selectedChatId}>
309-
<ChatHeader>
310-
<ToggleSection onClick={() => setToggle(!toggle)}>
311-
{toggle ? <FaAngleRight /> : <FaAngleLeft />}
312-
</ToggleSection>
313-
<ChatTitle>{"New Chat"}</ChatTitle>
314-
<SlOptionsVertical className="hidden" />
315-
</ChatHeader>
316-
317-
<ChatInput onClick={handleIsUserExit} className="cursor-pointer" onSubmit={handleSendMessage}>
318-
<p>Start a New Chat</p>
319-
<RecentChatsHeader>
320-
<div className="new-chat-button" onClick={handleNewChat}>
321-
<TbMessage2Plus size={30} />
322-
</div>
323-
</RecentChatsHeader>
324-
</ChatInput>
325-
</ChatBox>
326-
)}
273+
<Routes>
274+
<Route
275+
index
276+
exac
277+
path={""}
278+
element={
279+
<NewChat
280+
trailMessage={trailMessage}
281+
setToggle={setToggle}
282+
toggle={toggle}
283+
handleIsUserExit={handleIsUserExit}
284+
handleNewChat={handleNewChat}
285+
handleSendMessage={handleSendMessage}
286+
/>
287+
}
288+
/>
289+
290+
<Route
291+
path={"/:id"}
292+
element={
293+
<Chat
294+
selectedChatId={selectedChatId}
295+
isTrailEnded={isTrailEnded}
296+
isLoading={isLoading}
297+
userInput={userInput}
298+
setUserInput={setUserInput}
299+
handleSendDummyMessage={handleSendDummyMessage}
300+
handleSendMessage={handleSendMessage}
301+
handleIsUserExit={handleIsUserExit}
302+
API_BASE_URL={API_BASE_URL}
303+
setToggle={setToggle}
304+
toggle={toggle}
305+
user={user}
306+
chats={chats}
307+
chat={chat}
308+
setChats={setChats}
309+
handleDeleteChat={handleDeleteChat}
310+
handleNewChat={handleNewChat}
311+
trailMessage={trailMessage}
312+
setSelectedChatId={setSelectedChatId}
313+
/>
314+
}
315+
/>
316+
</Routes>
327317
</AIChatContainer>
328318
</Wrapper>
329319
);

‎src/components/AIChat/AIChatElements.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ export const UserMessage = styled.div`
152152
align-self: flex-end;
153153
border: 1px solid #333;
154154
margin-top: 10px;
155-
border-radius: 10px 1px 0 0;
155+
border-radius: 10px 10px 0 0;
156156
font-size: 18px;
157157
font-weight: bold;
158158
padding: 15px 20px;

‎src/components/AIChat/Chat.jsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from "react";
2+
import { ChatBox, ChatHeader, ChatInput, ChatTitle, ToggleSection } from "src/components/AIChat/AIChatElements.jsx";
3+
import { FaAngleLeft, FaAngleRight } from "react-icons/fa";
4+
import { SlOptionsVertical } from "react-icons/sl";
5+
import ChatMessages from "src/components/AIChat/ChatMessages.jsx";
6+
import Prompts from "src/components/AIChat/Prompts/Prompts.jsx";
7+
import { CircleSpinner } from "react-spinners-kit";
8+
import { BiSend } from "react-icons/bi";
9+
10+
const Chat = ({
11+
isTrailEnded,
12+
isLoading,
13+
userInput,
14+
setUserInput,
15+
handleSendDummyMessage,
16+
toggle,
17+
setToggle,
18+
trailMessage,
19+
chat,
20+
handleSendMessage,
21+
}) => {
22+
return (
23+
<ChatBox>
24+
<ChatHeader>
25+
<ToggleSection onClick={() => setToggle(!toggle)}>
26+
{toggle ? <FaAngleRight /> : <FaAngleLeft />}
27+
</ToggleSection>
28+
<ChatTitle>{chat?.title}</ChatTitle>
29+
<SlOptionsVertical />
30+
</ChatHeader>
31+
32+
<div
33+
style={{
34+
display: "flex",
35+
gap: "10px",
36+
flexDirection: "column",
37+
}}
38+
>
39+
<ChatMessages messages={chat?.messages} isTrailEnded={isTrailEnded} trailMessage={trailMessage} />
40+
41+
{!isTrailEnded && (
42+
<>
43+
{chat?.title === "New Chat" && <Prompts handleSendDummyMessage={handleSendDummyMessage} />}
44+
45+
<ChatInput onSubmit={handleSendMessage}>
46+
<input
47+
type="text"
48+
value={userInput}
49+
onChange={(e) => setUserInput(e.target.value)}
50+
placeholder="Type your message here..."
51+
/>
52+
<button type="submit" disabled={isLoading}>
53+
{isLoading ? <CircleSpinner size={20} color={"#131313"} /> : <BiSend size={25} />}
54+
</button>
55+
</ChatInput>
56+
</>
57+
)}
58+
</div>
59+
</ChatBox>
60+
);
61+
};
62+
63+
export default Chat;

0 commit comments

Comments
 (0)