Update app.py

app.py

@@ -11,7 +11,6 @@ from dash.exceptions import PreventUpdate
 import PyPDF2
 import docx
 import chardet
-import json
 
 # Initialize the Dash app
 app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
@@ -45,6 +44,10 @@ matrix_types = {
     "SWOT Matrix": "Create a matrix analyzing Strengths, Weaknesses, Opportunities, and Threats."
 }
 
+import dash
+from dash import dcc, html
+import dash_bootstrap_components as dbc
+
 app.layout = dbc.Container([
     dbc.Row([
         dbc.Col([
@@ -67,7 +70,10 @@ app.layout = dbc.Container([
                 },
                 multiple=True
             ),
-            html.Div(id='file-list'),
+            html.Div([
+                html.H5("Uploaded Files"),
+                dbc.ListGroup(id='file-list')
+            ], className="mt-3"),
             html.Hr(),
             html.Div([
                 dbc.Button(
@@ -80,7 +86,7 @@ app.layout = dbc.Container([
             ])
         ], width=3),
         dbc.Col([
-            html.Div(style={"height": "20px"}),  # Added small gap
+            html.Div(style={"height": "20px"}),  # Small gap
             dcc.Loading(
                 id="loading-indicator",
                 type="dot",
@@ -90,7 +96,7 @@ app.layout = dbc.Container([
             dbc.Button("Download Matrix", id="btn-download", color="success", className="mt-3"),
             dcc.Download(id="download-matrix"),
             html.Hr(),
-            html.Div(style={"height": "20px"}),  # Added small gap
+            html.Div(style={"height": "20px"}),  # Small gap
             dcc.Loading(
                 id="chat-loading",
                 type="dot",
@@ -138,15 +144,17 @@ def update_output(list_of_contents, list_of_names, existing_files):
         for i, (content, name) in enumerate(zip(list_of_contents, list_of_names)):
             file_content = parse_file_content(content, name)
             uploaded_files[name] = file_content
-            new_files.append(html.Div([
-                html.Button('×', id={'type': 'remove-file', 'index': name}, className='remove-file-button'),
+            new_files.append(dbc.ListGroupItem([
+                dbc.Button("×", id={'type': 'remove-file', 'index': name}, 
+                           color="danger", size="sm", className="me-2"),
                 html.Span(name)
-            ], style={'marginBottom': '5px'}))
+            ]))
         if existing_files is None:
             existing_files = []
-        return existing_files + new_files
-    return existing_files
+        return dbc.ListGroup(existing_files + new_files)
+    return dbc.ListGroup(existing_files) if existing_files else []
 
+# Update the remove file callback
 @app.callback(
     Output('file-list', 'children', allow_duplicate=True),
     Input({'type': 'remove-file', 'index': dash.ALL}, 'n_clicks'),
@@ -160,11 +168,10 @@ def remove_file(n_clicks, existing_files):
         raise PreventUpdate
     
     triggered_id = ctx.triggered[0]['prop_id']
-    # Extract the file name from the triggered_id string
-    removed_file = triggered_id.split('"index":')[1].split('}')[0].strip('"')
+    removed_file = triggered_id.split('"index":')[1].split('"')[1]
     
     uploaded_files.pop(removed_file, None)
-    return [file for file in existing_files if file['props']['children'][1]['props']['children'] != removed_file]
+    return [file for file in existing_files if file['props']['children'][1]['children'] != removed_file]
     
 def generate_matrix_with_gpt(matrix_type, file_contents):
     prompt = f"""Generate a {matrix_type} based on the following project artifacts: