Update static/style.css

static/style.css

@@ -1,258 +1,258 @@
-/* Reset & Global */
-* { box-sizing: border-box; margin: 0; padding: 0; }
-body, html { 
-    height: 100%; 
-    font-family: Arial, 
-    Helvetica, sans-serif; 
-    background-color: #f3f3ff; 
-    color: #2e353a; 
-}
-
-.app-wrapper {
-      display: flex;
-      flex-direction: row;
-    
-    }
-
-
- /* Sidebar Styling */
-    .sidebar {
-      width: 25%;
-      background-color: #1e1e1e;
-      color: white;
-      display: flex;
-      flex-direction: column;
-      border-right: 1px solid #333;
-      overflow-y: auto;
-      z-index: 0;
-      height: 100vh;
-    }
-
-    .sidebar-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 1rem;
-      border-bottom: 1px solid #333;
-      background-color: #262626;
-    }
-
-    .sidebar-header h2 {
-      font-size: 1.25rem;
-    }
-
-    #new_chat_sidebar_btn {
-      background-color: #0084ff;
-      color: white;
-      font-size: 1.5rem;
-      padding: 0.25rem 0.75rem;
-      border: none;
-      border-radius: 12px;
-      cursor: pointer;
-    }
-
-    #new_chat_sidebar_btn:hover {
-      background-color: #006bbd;
-    }
-
-    .chat-list {
-      padding: 0.5rem 0;
-      overflow-y: auto;
-      flex: 1;
-    }
-
-    .chat-item {
-      padding: 0.75rem 1rem;
-      cursor: pointer;
-      transition: background 0.2s;
-      font-size: 0.95rem;
-      border-bottom: 1px solid #333;
-    }
-
-    .chat-item:hover {
-      background-color: #2e2e2e;
-    }
-
-    .chat-item.active {
-      background-color: #3e3e3e;
-      font-weight: bold;
-    }
-
-
-/* Chat Container */
-.chat-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    width: 100vw;
-    overflow: hidden;
-    /* padding: 1rem; */
-}
-
-/* Watermark Background */
-.chat-container::before {
-    content: "Be Patient for Responses, Model is running on CPU";
-    position: absolute;
-    top: 50%;
-    left: 51%;
-    transform: translate(-50%, -50%);
-    font-size: 2.6rem;
-    color: rgb(0, 0, 0);
-    text-align: center;
-    pointer-events: none;
-    z-index: 0;
-}
-
-/* Messages Area */
-.messages {
-    position: relative;
-    z-index: 1;
-    flex: 1;
-    overflow-y: auto;
-    padding: 2% 10%;
-    display: flex;
-    flex-direction: column;
-    background-color: #121212f0;
-}
-.message {
-    max-width: 70%;
-    padding: 0.75rem 1rem;
-    margin-bottom: 1rem;
-    border-radius: 12px;
-    line-height: 1.4;
-    word-wrap: break-word;
-}
-.message.user {
-    align-self: flex-end;
-    background-color: #0084ff;
-    color: #fff;
-    border-bottom-right-radius: 2px;
-}
-.message.bot {
-    align-self: flex-start;
-    background-color: #e4e6eb;
-    color: #202124;
-    border-bottom-left-radius: 2px;
-}
-
-.message.file_uploaded {
-    background-color: green;
-    color: white;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-
-/* Bot message formatting */
-.message.bot p {
-    margin: 0.5rem 0;
-}
-.message.bot ul {
-    padding-left: 1.5rem;
-    margin: 0.5rem 0;
-}
-.message.bot li {
-    margin-bottom: 0.3rem;
-    list-style-type: disc;
-}
-.message.bot strong,
-.message.bot b {
-    font-weight: bold;
-}
-
-/* Code block styling */
-.message.bot pre {
-    background: #ffffff00;
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    overflow-x: auto;
-    font-family: inherit;
-    font-size: inherit;
-    /* white-space: pre; */
-    margin: 0.5rem 0;
-    white-space: pre-wrap; 
-    word-wrap: break-word;
-    color: red;
-}
-.message.bot code {
-    font-family: inherit;
-    font-size: inherit;
-    white-space: pre-wrap; 
-    word-wrap: break-word;
-    color: green;
-}
-
-/* Input Area */
-.input-container {
-    position: fixed;
-    left: 10%;
-    right: 10%;
-    bottom: 0;
-    border-radius: 20px;
-    
-    z-index: 2;
-    background: #141414;
-    padding: 0.75rem 1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    outline: none;
-}
-#input_prompt {
-    flex: 1;
-    padding: 0.75rem 1rem;
-    font-size: 1rem;
-    border: none;
-    background-color: #202020;
-    color: white;
-    border-radius: 20px;
-    outline: none;
-}
-.input-container button {
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-    border: none;
-    border-radius: 20px;
-    background-color: #0084ff;
-    color: #fff;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-}
-.input-container button:hover {
-    background-color: #006bbd;
-}
-
-/* Styled label that looks like a button */
-.upload-label {
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-    border: none;
-    border-radius: 20px;
-    background-color: #0084ff;
-    color: #fff;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-}
-
-.upload-label:hover {
-    background-color: #006bbd;
-}
-
-/* Hide the default file input */
-#pdf_upload {
-    display: none;
-}
-
-
-#new_chat_btn {
-    background-color: rgb(230, 230, 230);
-    color: rgb(0, 0, 0);
-    font-size: xx-large;
-    padding: 0.5rem 1rem;
-}
-
-#new_chat_btn:hover {
-    background-color: #ffffff;
-    color: black;
-}
+/* Reset & Global */
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body, html { 
+    height: 100%; 
+    font-family: Arial, 
+    Helvetica, sans-serif; 
+    background-color: #f3f3ff; 
+    color: #2e353a; 
+}
+
+.app-wrapper {
+      display: flex;
+      flex-direction: row;
+    
+    }
+
+
+ /* Sidebar Styling */
+    .sidebar {
+      width: 25%;
+      background-color: #1e1e1e;
+      color: white;
+      display: flex;
+      flex-direction: column;
+      border-right: 1px solid #333;
+      overflow-y: auto;
+      z-index: 0;
+      height: 100vh;
+    }
+
+    .sidebar-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem;
+      border-bottom: 1px solid #333;
+      background-color: #262626;
+    }
+
+    .sidebar-header h2 {
+      font-size: 1.25rem;
+    }
+
+    #new_chat_sidebar_btn {
+      background-color: #0084ff;
+      color: white;
+      font-size: 1.5rem;
+      padding: 0.25rem 0.75rem;
+      border: none;
+      border-radius: 12px;
+      cursor: pointer;
+    }
+
+    #new_chat_sidebar_btn:hover {
+      background-color: #006bbd;
+    }
+
+    .chat-list {
+      padding: 0.5rem 0;
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    .chat-item {
+      padding: 0.75rem 1rem;
+      cursor: pointer;
+      transition: background 0.2s;
+      font-size: 0.95rem;
+      border-bottom: 1px solid #333;
+    }
+
+    .chat-item:hover {
+      background-color: #2e2e2e;
+    }
+
+    .chat-item.active {
+      background-color: #3e3e3e;
+      font-weight: bold;
+    }
+
+
+/* Chat Container */
+.chat-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    /* padding: 1rem; */
+}
+
+/* Watermark Background */
+.chat-container::before {
+    content: "Hey There ! What's on your mind today ?";
+    position: absolute;
+    top: 50%;
+    left: 51%;
+    transform: translate(-50%, -50%);
+    font-size: 2.6rem;
+    color: rgb(0, 0, 0);
+    text-align: center;
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* Messages Area */
+.messages {
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    overflow-y: auto;
+    padding: 2% 10%;
+    display: flex;
+    flex-direction: column;
+    background-color: #121212f0;
+}
+.message {
+    max-width: 70%;
+    padding: 0.75rem 1rem;
+    margin-bottom: 1rem;
+    border-radius: 12px;
+    line-height: 1.4;
+    word-wrap: break-word;
+}
+.message.user {
+    align-self: flex-end;
+    background-color: #0084ff;
+    color: #fff;
+    border-bottom-right-radius: 2px;
+}
+.message.bot {
+    align-self: flex-start;
+    background-color: #e4e6eb;
+    color: #202124;
+    border-bottom-left-radius: 2px;
+}
+
+.message.file_uploaded {
+    background-color: green;
+    color: white;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+/* Bot message formatting */
+.message.bot p {
+    margin: 0.5rem 0;
+}
+.message.bot ul {
+    padding-left: 1.5rem;
+    margin: 0.5rem 0;
+}
+.message.bot li {
+    margin-bottom: 0.3rem;
+    list-style-type: disc;
+}
+.message.bot strong,
+.message.bot b {
+    font-weight: bold;
+}
+
+/* Code block styling */
+.message.bot pre {
+    background: #ffffff00;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    font-family: inherit;
+    font-size: inherit;
+    /* white-space: pre; */
+    margin: 0.5rem 0;
+    white-space: pre-wrap; 
+    word-wrap: break-word;
+    color: red;
+}
+.message.bot code {
+    font-family: inherit;
+    font-size: inherit;
+    white-space: pre-wrap; 
+    word-wrap: break-word;
+    color: green;
+}
+
+/* Input Area */
+.input-container {
+    position: fixed;
+    left: 10%;
+    right: 10%;
+    bottom: 0;
+    border-radius: 20px;
+    
+    z-index: 2;
+    background: #141414;
+    padding: 0.75rem 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    outline: none;
+}
+#input_prompt {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    border: none;
+    background-color: #202020;
+    color: white;
+    border-radius: 20px;
+    outline: none;
+}
+.input-container button {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    border: none;
+    border-radius: 20px;
+    background-color: #0084ff;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+.input-container button:hover {
+    background-color: #006bbd;
+}
+
+/* Styled label that looks like a button */
+.upload-label {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    border: none;
+    border-radius: 20px;
+    background-color: #0084ff;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.upload-label:hover {
+    background-color: #006bbd;
+}
+
+/* Hide the default file input */
+#pdf_upload {
+    display: none;
+}
+
+
+#new_chat_btn {
+    background-color: rgb(230, 230, 230);
+    color: rgb(0, 0, 0);
+    font-size: xx-large;
+    padding: 0.5rem 1rem;
+}
+
+#new_chat_btn:hover {
+    background-color: #ffffff;
+    color: black;
+}