From 8ba7e4c77148be6702bc7c2591c66a47f31be674 Mon Sep 17 00:00:00 2001 From: Keigo Healy Date: Wed, 1 Oct 2025 20:48:28 -0500 Subject: [PATCH] fixing errors --- src/app/eme/eme-chat.tsx | 164 ++++++++++++++++++++++++++++++++++++++ src/app/eme/page.tsx | 165 +-------------------------------------- 2 files changed, 167 insertions(+), 162 deletions(-) create mode 100644 src/app/eme/eme-chat.tsx diff --git a/src/app/eme/eme-chat.tsx b/src/app/eme/eme-chat.tsx new file mode 100644 index 0000000..aca366a --- /dev/null +++ b/src/app/eme/eme-chat.tsx @@ -0,0 +1,164 @@ +"use client" +import { useState } from "react"; +import { Message, thinkingMessage } from "@/constants/eme"; +import { fetchEmeResponse, fetchEmeHealth } from "./fetch-eme"; +import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; +import { Button } from "@/components/ui/button"; +import { ChatBubble } from "./chat-bubble"; + +export default function EmeChat() { + const [messages, setMessages] = useState([]) + const [prompt, setPrompt] = useState("") + const [isLoading, setIsLoading] = useState(false) + + const isHealthCheck = false; + + const submitPrompt = async (e: React.FormEvent) => { + e.preventDefault(); + + if(isHealthCheck) { + healthCheck(); + return; + } + + if (isLoading || prompt.trim() === "") return; + + const userMsg: Message = { + id: Date.now().toString(), + text: prompt, + sender: "user", + timestamp: new Date(), + }; + + setMessages(prev => [...prev, userMsg]); + setIsLoading(true); + setPrompt(""); + + try { + const stream = await fetchEmeResponse(prompt); + const reader = stream.getReader(); + const decoder = new TextDecoder(); + + let botResponse = ''; + const botMsg: Message = { + id: Date.now().toString(), + text: '', + sender: "bot", + timestamp: new Date(), + }; + + setMessages(prev => [...prev, botMsg]); + setIsLoading(false); + + while (true) { + const { done, value} = await reader.read(); + if (done) break; + + const chunk = decoder.decode(value, { stream: true}); + botResponse += chunk; + + // Update message with accumulated text + setMessages((prev) => + prev.map((msg) => (msg.id === botMsg.id ? { ...msg, text: botResponse } : msg)), + ); + } + } catch (error) { + console.error("Error retrieving eme output:", error); + + const errorMsg: Message = { + id: (Date.now() + 1).toString(), + text: 'Sorry, I encountered an error. Please try again.', + sender: 'bot', + timestamp: new Date(), + } + setMessages((prev) => [...prev, errorMsg]); + } finally { + setIsLoading(false); + } + } + + const healthCheck = async () => { + try { + const response = await fetchEmeHealth(); + console.log("Health is: ", response); + } catch(error) { + console.error("Error retrieving eme health: ", error); + } + } + + return ( +
+

+ eme +

+ + + + + +
+

+ eme is the EMCO chatbot that answers your questions about navigating CS at Northwestern. We hope it can be another point of reference for underclass students getting started. +

+

+ Answers are based on historical EMCO GroupMe messages. eme uses {" "} + + RAG + + {" "} to pull relevant messages into its context. +

+

+ NOTE: eme can make mistakes. Emerging Coders, its affiliated members and Executive Board do not endorse its messages. +

+
+ + + +
+
+
+ {messages.length === 0 && +

+ Ask me something like "should I take CS214 and CS211 at the same time?" +

+ } +
+ {messages.map((msg, i) => ( + + ))} + {isLoading && + + } +
+ +
+
+ setPrompt(e.target.value)} + className="w-full bg-black border-zinc-800 text-white focus-visible:ring-purple-500/30 px-5 py-2 rounded focus:outline-none" + disabled={isLoading} + /> + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/eme/page.tsx b/src/app/eme/page.tsx index fe72ea0..7314fc3 100644 --- a/src/app/eme/page.tsx +++ b/src/app/eme/page.tsx @@ -1,167 +1,8 @@ "use client" -import { useState } from "react"; -import { Message, thinkingMessage } from "@/constants/eme"; -import { fetchEmeResponse, fetchEmeHealth } from "./fetch-eme"; -import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; -import { Button } from "@/components/ui/button"; -import { ChatBubble } from "./chat-bubble"; - -export default function emePage() { - const [messages, setMessages] = useState([]) - const [prompt, setPrompt] = useState("") - const [isLoading, setIsLoading] = useState(false) - const [isStreaming, setIsStreaming] = useState(false) - - const isHealthCheck = false; - - const submitPrompt = async (e: React.FormEvent) => { - e.preventDefault(); - - if(isHealthCheck) { - healthCheck(); - return; - } - - if (isLoading || prompt.trim() === "") return; - - const userMsg: Message = { - id: Date.now().toString(), - text: prompt, - sender: "user", - timestamp: new Date(), - }; - - setMessages(prev => [...prev, userMsg]); - setIsLoading(true); - setPrompt(""); - - try { - const stream = await fetchEmeResponse(prompt); - const reader = stream.getReader(); - const decoder = new TextDecoder(); - - let botResponse = ''; - const botMsg: Message = { - id: Date.now().toString(), - text: '', - sender: "bot", - timestamp: new Date(), - }; - - setIsStreaming(true); - setMessages(prev => [...prev, botMsg]); - setIsLoading(false); - - while (true) { - const { done, value} = await reader.read(); - if (done) break; - - const chunk = decoder.decode(value, { stream: true}); - botResponse += chunk; - - // Update message with accumulated text - setMessages((prev) => - prev.map((msg) => (msg.id === botMsg.id ? { ...msg, text: botResponse } : msg)), - ); - } - } catch (error) { - console.error("Error retrieving eme output:", error); - - const errorMsg: Message = { - id: (Date.now() + 1).toString(), - text: 'Sorry, I encountered an error. Please try again.', - sender: 'bot', - timestamp: new Date(), - } - setMessages((prev) => [...prev, errorMsg]); - } finally { - setIsLoading(false); - setIsStreaming(false); - } - } - - const healthCheck = async () => { - try { - const response = await fetchEmeHealth(); - console.log("Health is: ", response); - } catch(error) { - console.error("Error retrieving eme health: ", error); - } - } +import EmeChat from "./eme-chat" +export default function Page() { return ( -
-

- eme -

- - - - - -
-

- eme is the EMCO chatbot that answers your questions about navigating CS at Northwestern. We hope it can be another point of reference for underclass students getting started. -

-

- Answers are based on historical EMCO GroupMe messages. eme uses {" "} - - RAG - - {" "} to pull relevant messages into its context. -

-

- NOTE: eme can make mistakes. Emerging Coders, its affiliated members and Executive Board do not endorse its messages. -

-
- - - -
-
-
- {messages.length === 0 && -

- Ask me something like "should I take CS214 and CS211 at the same time?" -

- } -
- {messages.map((msg, i) => ( - - ))} - {isLoading && - - } -
- -
-
- setPrompt(e.target.value)} - className="w-full bg-black border-zinc-800 text-white focus-visible:ring-purple-500/30 px-5 py-2 rounded focus:outline-none" - disabled={isLoading} - /> - -
-
-
-
+ ) } \ No newline at end of file