review feedback

backend/src/api/__init__.py

@@ -1,3 +1,3 @@
-from .api import app, healthy_response, unhealthy_neo4j_response, chat_fail_response
+from .app import app, healthy_response, unhealthy_neo4j_response, chat_fail_response
 
 __all__ = ["app", "healthy_response", "unhealthy_neo4j_response", "chat_fail_response"]

frontend/src/app.tsx

@@ -1,21 +1,16 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import styles from './app.module.css';
 import { Chat } from './components/chat';
 import { Input } from './components/input';
 import { useMessages } from './useMessages';
-import { ConnectionStatus } from './components/connection-status';
-import { WebsocketContext } from './session/websocket-context';
 
 export const App = () => {
   const { sendMessage, messages, waiting } = useMessages();
 
-  const { isConnected } = useContext(WebsocketContext);
-
   return (
     <div className={styles.container}>
       <Chat messages={messages} waiting={waiting} />
       <Input sendMessage={sendMessage} />
-      <ConnectionStatus isConnected={isConnected} />
     </div>  
   );
 };

frontend/src/components/chat.module.css

@@ -1,4 +1,5 @@
 .container {
+  position: relative;
   align-items: center;
   border-radius: 5px;
   border: 1px solid var(--border-primary);

frontend/src/components/chat.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Message, MessageComponent } from './message';
 import styles from './chat.module.css';
 import { Waiting } from './waiting';
+import { ConnectionStatus } from './connection-status';
+import { WebsocketContext } from '../session/websocket-context';
 
 export interface ChatProps {
   messages: Message[];
@@ -11,6 +13,8 @@ export interface ChatProps {
 export const Chat = ({ messages, waiting }: ChatProps) => {
   const containerRef = React.useRef<HTMLDivElement>(null);
 
+  const { isConnected } = useContext(WebsocketContext);
+
   useEffect(() => {
     if (containerRef.current) {
       containerRef.current.scrollTo(0, containerRef.current.scrollHeight);
@@ -19,6 +23,7 @@ export const Chat = ({ messages, waiting }: ChatProps) => {
 
   return (
     <div ref={containerRef} className={styles.container}>
+      <ConnectionStatus isConnected={isConnected} />
       {messages.map((message, index) => (
         <MessageComponent key={index} message={message} />
       ))}

frontend/src/components/connection-status.module.css

@@ -2,6 +2,7 @@
     position: absolute;
     top: 0;
     right: 0;
+    float: right;
     display: flex;
     justify-content: space-between;
     align-items: center;