refactor delete button and added dialog box for deletion confirmation.

Author: yesidc

locale/de/LC_MESSAGES/base.mo

@@ -110,5 +110,11 @@ msgstr "Chatverlauf löschen"
 msgid "There was an error while clearing the chat history. Please try again later."
 msgstr "Beim Löschen des Chatverlaufs ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut."
 
+msgid "Delete"
+msgstr "Löschen"
+
+msgid "Cancel"
+msgstr "Abbrechen"
+
 msgid "There was an error while loading previous messages. If this issue persists, try using a different browser or contact support."
 msgstr "Beim Laden vorheriger Nachrichten ist ein Fehler aufgetreten. Falls das Problem weiterhin besteht, versuchen Sie es mit einem anderen Browser oder wenden Sie sich an den Support."

locale/de/LC_MESSAGES/base.po

@@ -23,7 +23,7 @@
 
 # max number of messages after which a summary is generated
 MAX_MESSAGE_HISTORY = 5
-MAX_MESSAGES_PER_USER = 100  # Limit for the number of messages per user (Redis)
+MAX_MESSAGES_PER_USER = 150  # Limit for the number of messages per user (Redis)
 HUMAN_AVATAR = "./static/Icon-User.svg"
 ASSISTANT_AVATAR = "./static/Icon-chatbot.svg"
 ROLES = ("ai", "human")
@@ -230,36 +230,6 @@ def display_chat_messages(self):
                     f"Unknown message type: {m.type}. Expected one of {ROLES}."
                 )
 
-        # for message in st.session_state["messages"]:
-        #     with st.chat_message(message["role"], avatar=message["avatar"]):
-        #         st.write(message["content"])
-
-    def show_delete_button(self):
-        """Display a delete button in the top-right corner."""
-
-        col1, col2 = st.columns([4, 1])
-        with col2:
-            if st.button(
-                "🗑️",
-                key="delete_chat",
-                help=st.session_state["_"]("Clear chat history"),
-                use_container_width=False,
-            ):
-                try:
-                    user_id = self.get_user_id()
-                    history = self.get_history(user_id)
-                    history.clear()
-                    st.session_state["messages"] = []
-                    st.session_state["conversation_summary"] = []
-                    st.rerun()
-                except Exception as e:
-                    logger.error(f"Error clearing chat history: {e}")
-                    st.error(
-                        session_state["_"](
-                            "There was an error while clearing the chat history. Please try again later."
-                        )
-                    )
-
     def handle_user_input(self):
         """Handle user input and generate a response."""
 
@@ -284,9 +254,6 @@ def handle_user_input(self):
             if history.messages[-1].type != ROLES[0]:  # "ai"
                 self.generate_response(prompt)
 
-            # if st.session_state.messages[-1]["role"] != "assistant":
-            #     self.generate_response(prompt)
-
     def get_agent(self):
         if st.session_state["agent"] is None:
             st.session_state["agent"] = CampusManagementOpenAIToolsAgent.run(
@@ -784,14 +751,52 @@ def log_feedback(self):
                 logger.info(f"Feedback= {feedback}")
                 session_state.feedback_saved = True
 
+    @st.dialog("ask.UOS")
+    def delete_chat_history(self):
+        """Display a dialog to confirm chat history deletion."""
+        message = (
+            settings.chat_page.delete_message_dialog_box_german
+            if settings.language == "Deutsch"
+            else settings.chat_page.delete_message_dialog_box_english
+        )
+        st.markdown(message)
+        if st.button(
+            session_state["_"]("Delete"),
+            key="confirm_delete_chat",
+            use_container_width=True,
+        ):
+            user_id = self.get_user_id()
+            history = self.get_history(user_id)
+            history.clear()
+            st.session_state["messages"] = []
+            st.session_state["conversation_summary"] = []
+            st.rerun()
+        if st.button(
+            session_state["_"]("Cancel"),
+            key="cancel_delete_chat",
+            use_container_width=True,
+        ):
+            st.rerun()
+
+    def show_delete_button(self):
+        """Display a delete button below the chat input, full width and horizontal."""
+        # Add a small space
+        if st.button(
+            f'🗑️ {session_state["_"]("Clear chat history")}',
+            key="delete_chat",
+            help=session_state["_"]("Clear all chat history"),
+        ):
+            self.delete_chat_history()
+        st.write("")  # Add a small space
+
     def run(self):
         """Main method to run the application logic."""
         st.title("ask.UOS")
         initialize_session_sate()
         RemoveEmptyElementContainer()
         # Get or create user ID using our method
         user_id = self.get_user_id()
-        self.show_delete_button()
+
         # self.show_warning()
         # DO NOT CHANGE THE ORDER IN WHICH THESE METHODS ARE CALLED
 
@@ -801,6 +806,9 @@ def run(self):
         self.show_feedback_faces()
         self.ask_further_feedback()
 
+        # Move the delete button to the very end
+        self.show_delete_button()
+
 
 if __name__ == "__main__":
     app = ChatApp()

pages/ask_uos_chat.py

@@ -222,39 +222,86 @@ span[data-testid="stHeaderActionElements"] a {
 
 /* Delete button styling */
 .st-key-delete_chat {
-    float: right !important;
-    text-align: right !important;
+    position: static !important;
+    float: none !important;
+    margin: 16px 0 !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    display: flex !important;
+    justify-content: flex-end !important;
+    width: 100% !important;
 }
 
 .st-key-delete_chat .stButton {
-    display: flex !important;
-    justify-content: flex-end !important;
+    display: block !important;
+    justify-content: flex-start !important;
+    width: auto !important;
 }
 
 .st-key-delete_chat button {
-    margin-left: auto !important;
+    margin: 0 !important;
+    background-color: #f8f8f8 !important;
+    border: 1px solid #e0e0e0 !important;
+    border-radius: 6px !important; /* normal button */
+    width: auto !important;
+    min-width: 160px !important;
+    height: 40px !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 16px !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+    padding: 0 24px !important;
+    transition: all 0.2s ease !important;
 }
 
-/* Mobile responsive delete button */
+.st-key-delete_chat button:hover {
+    background-color: #f0f0f0 !important;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.10) !important;
+}
+
+/* Adjust for mobile devices */
 @media (max-width: 768px) {
-    .stHorizontalBlock .stColumn:last-child {
-        text-align: right !important;
-        display: flex !important;
-        justify-content: flex-end !important;
-        align-items: flex-start !important;
-    }
-    
     .st-key-delete_chat {
-        float: right !important;
-        text-align: right !important;
-        margin-left: auto !important;
-        width: auto !important;
+        justify-content: flex-end !important;
+        margin: 16px 0 !important;
+        padding-right: 0 !important;
     }
 
-    .st-key-delete_chat .stButton {
-        justify-content: flex-end !important;
-        margin-left: auto !important;
+    .st-key-delete_chat button {
+        min-width: 140px !important;
+        height: 36px !important;
+        font-size: 14px !important;
+        padding: 0 16px !important;
     }
 }
 
+/* Delete confirmation button styling */
+.st-key-confirm_delete_chat button {
+    background-color: #ad1034 !important;
+    border: 1px solid #ad1034 !important;
+    color: white !important;
+}
+
+.st-key-confirm_delete_chat button:hover {
+    background-color: #8f2133 !important;
+    border: 1px solid #8f2133 !important;
+    color: white !important;
+}
+
+.st-key-confirm_delete_chat button p {
+    color: white !important;
+}
+
+/* Remove the fixed positioning styles that were causing issues */
+.stChatInput {
+    position: relative !important;
+}
+
+/* Remove the bottom padding we added before */
+.stBottom {
+    padding-bottom: 0 !important;
+}
+
 

pages/static/style.css

@@ -11,6 +11,7 @@
 
 from .models import (
     ApplicationConfig,
+    ChatPageConfig,
     EmbeddingSettings,
     Legal,
     LogSettings,
@@ -39,6 +40,7 @@ class Settings(BaseSettings):
     milvus_settings: MilvusSettings
     language: Literal["Deutsch", "English"]
     start_page: StartPageConfig
+    chat_page: ChatPageConfig
     legal: Optional[Legal] = (
         None  # Optional legal information (e.g., data protection, imprint)
     )

src/config/core_config.py

@@ -85,3 +85,12 @@ class StartPageConfig(BaseModel):
 
     welcome_message_english: str
     welcome_message_german: str
+
+
+class ChatPageConfig(BaseModel):
+    """
+    Configuration for the chat page.
+    """
+
+    delete_message_dialog_box_english: str
+    delete_message_dialog_box_german: str