Merge pull request #968 from assafelovic/feature/ux

Improved NextJS UX

backend/chat/chat.py

@@ -84,6 +84,15 @@ def _process_document(self, report):
 
     async def chat(self, message, websocket):
         """Chat with React Agent"""
+        message = f"""
+         You are GPT Researcher, a autonomous research agent created by an open source community at https://github.com/assafelovic/gpt-researcher, homepage: https://gptr.dev. 
+         To learn more about GPT Researcher you can suggest to check out: docs.gptr.dev.
+         
+         This is a chat message between the user and you: GPT Researcher. 
+         The chat is about a research reports that you created. Answer based on the given context and report.
+         Report: {self.report}
+         User Message: {message}
+        """
         inputs = {"messages": [("user", message)]}
         response = await self.graph.ainvoke(inputs, config=self.chat_config)
         ai_message = response["messages"][-1].content

backend/server/server_utils.py

@@ -40,6 +40,7 @@ async def handle_human_feedback(data: str):
 
 async def handle_chat(websocket, data: str, manager):
     json_data = json.loads(data[4:])
+    print(f"Received chat message: {json_data.get('message')}")
     await manager.chat(json_data.get("message"), websocket)
 
 async def generate_report_files(report: str, filename: str) -> Dict[str, str]:

frontend/nextjs/app/globals.css

@@ -29,8 +29,8 @@ body {
   font-family: 'Montserrat', sans-serif;
   line-height: 1.6;
   background-size: 200% 200%;
-  background-image: linear-gradient(45deg, #151A2D, #111827, #151A2D);
-  animation: gradientBG 10s ease infinite;
+  background-image: linear-gradient(170deg, #151A2D, #036f73, #151A2D);
+  /*animation: gradientBG 10s ease infinite;*/
 }
 
 .landing {
@@ -102,3 +102,21 @@ body {
 body {
   margin: 0px !important;
 }
+
+/* Add these styles for the scrollbar */
+.scrollbar-thin {
+  scrollbar-width: thin;
+}
+
+.scrollbar-thumb-gray-600::-webkit-scrollbar-thumb {
+  background-color: #4B5563;
+  border-radius: 6px;
+}
+
+.scrollbar-track-gray-300::-webkit-scrollbar-track {
+  background-color: #D1D5DB;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+}