Update app.py via AI Editor

app.py

@@ -181,20 +181,23 @@ app = dash.Dash(
 )
 
 def chat_message_card(msg, is_user):
-    align = "end" if is_user else "start"
+    align = "flex-end" if is_user else "flex-start"
     color = "primary" if is_user else "secondary"
     avatar = "🧑" if is_user else "🤖"
-    return dbc.Card(
-        dbc.CardBody([
-            html.Div([
-                html.Span(avatar, style={"fontSize": "2rem"}),
-                html.Span(msg, style={"whiteSpace": "pre-wrap", "marginLeft": "0.75rem", "overflowWrap": "break-word", "wordBreak": "break-word"})
-            ], style={"display": "flex", "alignItems": "center", "justifyContent": align})
-        ]),
-        className=f"mb-2 ms-3 me-3",
-        color=color,
-        inverse=is_user,
-        style={"maxWidth": "80%", "alignSelf": f"flex-{align}"}
+    return html.Div(
+        dbc.Card(
+            dbc.CardBody([
+                html.Div([
+                    html.Span(avatar, style={"fontSize": "2rem"}),
+                    html.Span(msg, style={"whiteSpace": "pre-wrap", "marginLeft": "0.75rem", "overflowWrap": "break-word", "wordBreak": "break-word"})
+                ], style={"display": "flex", "alignItems": "center"})
+            ]),
+            className=f"mb-2 ms-3 me-3",
+            color=color,
+            inverse=is_user,
+            style={"maxWidth": "80%"}
+        ),
+        style={"display": "flex", "justifyContent": align, "width": "100%"}
     )
 
 def uploaded_file_card(filename, is_img):
@@ -233,20 +236,23 @@ def left_navbar_static():
     ], style={"padding": "1rem", "backgroundColor": "#f8f9fa", "height": "100vh", "overflowY": "auto"})
 
 def chat_box_card():
-    # Fix the chat window height and allow vertical scroll
+    # Use a scrollable vertical container for chat history
     return dbc.Card(
         dbc.CardBody([
-            html.Div(id="chat-window", style={
-                "height": "70vh",
-                "overflowY": "auto",
-                "overflowX": "auto",
-                "display": "flex",
-                "flexDirection": "column",
-                "justifyContent": "flex-end",
-                "backgroundColor": "#fff",
-                "padding": "0.5rem",
-                "borderRadius": "0.5rem"
-            })
+            html.Div(
+                id="chat-window-container",
+                children=[
+                    html.Div(id="chat-window", style={"width": "100%"})
+                ],
+                style={
+                    "height": "70vh",
+                    "overflowY": "auto",
+                    "overflowX": "hidden",
+                    "backgroundColor": "#fff",
+                    "padding": "0.5rem",
+                    "borderRadius": "0.5rem"
+                }
+            )
         ]),
         className="mt-3",
         style={