Update static/frontend.html

static/frontend.html

@@ -5,26 +5,94 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Code Assistant Agent</title>
     <style>
-        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f7f9; }
-        .container { max-width: 800px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
-        h1 { color: #333; text-align: center; margin-bottom: 20px; }
-        #chat-window { height: 400px; overflow-y: scroll; border: 1px solid #ddd; padding: 10px; border-radius: 4px; margin-bottom: 20px; background-color: #e9eff4; }
-        .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 15px; max-width: 85%; }
-        .user { background-color: #dcf8c6; margin-left: auto; text-align: right; }
-        .assistant { background-color: #fff; border: 1px solid #ccc; text-align: left; }
-        #input-container { display: flex; gap: 10px; margin-bottom: 20px; }
-        #user-input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
-        #send-button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
-        #send-button:hover { background-color: #0056b3; }
-        #state-info { padding: 10px; background-color: #eee; border-radius: 4px; font-size: 0.9em; margin-bottom: 20px; }
-        pre { background-color: #272822; color: #f8f8f2; padding: 10px; border-radius: 4px; overflow-x: auto; }
-        .tag-area { margin-top: 5px; padding: 5px; border-top: 1px dashed #ccc; }
-        .tag-chip { display: inline-block; background-color: #007bff; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.8em; margin-right: 5px; cursor: pointer; }
-        .bookmark-btn { background-color: #28a745; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; margin-left: 10px; }
-        .bookmark-btn:hover { background-color: #1e7e34; }
-        .tagged-replies-list { list-style: none; padding: 0; }
-        .tagged-replies-list li { border-bottom: 1px solid #eee; padding: 10px 0; }
-    </style>
+    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background-color: #f0f2f5; color: #333; }
+    .container { max-width: 850px; margin: auto; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); }
+    h1 { color: #1f7cff; text-align: center; margin-bottom: 25px; font-weight: 600; }
+    #chat-window { 
+        height: 400px; 
+        overflow-y: scroll; 
+        border: 1px solid #ddd; 
+        padding: 15px; 
+        border-radius: 8px; 
+        margin-bottom: 20px; 
+        background-color: #e9eff4; 
+    }
+    
+    /* NEW STRUCTURE FOR CHAT BUBBLES */
+    .message-row {
+        display: flex; 
+        margin-bottom: 15px; 
+    }
+    .message { 
+        padding: 10px 15px; 
+        border-radius: 18px; 
+        max-width: 75%; 
+        position: relative;
+        word-wrap: break-word;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+    .user { 
+        background-color: #1f7cff; /* Bright blue for user */
+        color: white;
+        margin-left: auto; /* Pushes to the right */
+        border-bottom-right-radius: 4px; /* Sharper corner on user's side */
+    }
+    .assistant { 
+        background-color: #ffffff; 
+        border: 1px solid #c9d6de; 
+        color: #333;
+        margin-right: auto; /* Keeps it on the left */
+        border-bottom-left-radius: 4px;
+        text-align: left;
+    }
+
+    #input-container { display: flex; gap: 10px; margin-bottom: 20px; }
+    #user-input { flex-grow: 1; padding: 12px; border: 1px solid #ccc; border-radius: 6px; }
+    #send-button { padding: 10px 20px; background-color: #1f7cff; color: white; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; }
+    #send-button:hover { background-color: #165bb0; }
+    
+    #state-info { padding: 15px; background-color: #e6f0ff; border-left: 5px solid #1f7cff; border-radius: 4px; font-size: 0.9em; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center; }
+    
+    pre { 
+        background-color: #272822; 
+        color: #f8f8f2; 
+        padding: 10px; 
+        border-radius: 4px; 
+        overflow-x: auto; 
+        margin-top: 10px;
+        font-family: 'Consolas', 'Monaco', monospace;
+        font-size: 0.9em;
+    }
+    
+    .tag-area { 
+        margin-top: 10px; 
+        padding-top: 5px; 
+        border-top: 1px dashed #e0e0e0; 
+        font-size: 0.8em;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+    .tag-area input[type="text"] {
+        flex-grow: 1;
+        padding: 4px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        margin-right: 5px;
+        min-width: 150px;
+    }
+
+    .tag-chip { display: inline-block; background-color: #6c757d; color: white; padding: 3px 10px; border-radius: 16px; font-size: 0.75em; margin-right: 5px; margin-bottom: 5px; }
+    .bookmark-btn { background-color: #28a745; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; font-size: 0.8em; }
+    .bookmark-btn:hover { background-color: #1e7e34; }
+
+    /* Bookmarked Replies Styling */
+    h2 { border-bottom: 2px solid #ddd; padding-bottom: 5px; margin-top: 30px; }
+    #tag-search { padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%; margin-bottom: 15px; }
+    .tagged-replies-list { list-style: none; padding: 0; }
+    .tagged-replies-list li { border: 1px solid #f0f0f0; background: #fafafa; padding: 15px; border-radius: 6px; margin-bottom: 10px; }
+    .tagged-replies-list li p { margin: 0 0 5px 0; }
+</style>
 </head>
 <body>
     <div class="container">