Features/edit convo title (#20)

## What

Add an edit icon next to a chat history item on the sidebar to let users
edit a generated conversation title

## Why

- Feature parity with ChatGPT
- Auto generated titles aren't very good sometimes

## How

- Hack CSS
- NOTE: if streamlit version is upgraded, css classnames could be
generated
  
## Screenshots/Loom

![iScreen Shoter - Google Chrome -
230612162016](https://github.com/CoderPush/chatlit/assets/65232736/ff43d8a0-6169-4f29-906f-d8d83dcbe276)

![iScreen Shoter - Google Chrome -
230612161919](https://github.com/CoderPush/chatlit/assets/65232736/b97136b5-6017-4f92-a628-5ef326d5bf53)

firestore_utils.py

@@ -56,3 +56,13 @@ def delete_convo(convo_id):
     document_ref = db.collection("conversations").document(convo_id)
     document_ref.delete()
     print(f"Deleted document with ID: {convo_id}")
+
+
+def edit_convo(convo_id, new_label):
+    try:
+        db = get_firestore_db()
+        document_ref = db.collection("conversations").document(convo_id)
+        document_ref.update({"title": new_label})
+        print(f"Updated document with ID: {convo_id}")
+    except firestore.NotFound as e:
+        print(f"Document with ID {convo_id} not found")

utils.py

@@ -1,4 +1,4 @@
-from firestore_utils import delete_convo
+from firestore_utils import delete_convo, edit_convo
 
 
 def link_button(st, text, path):
@@ -38,20 +38,49 @@ def link_row(st, text, path, selected=False):
 def button_row(st, cid, conversation, selected=False):
     title = conversation.get("title", cid)
     container = st.sidebar.container()
+
     with container:
-        col1, col2 = st.columns([5, 1])
+        col1, col2, col3 = st.columns([6, 1, 1], gap="small")
 
         with col1:
-            convo_button = st.button(
-                title, key=f"button_{cid}", disabled=selected, use_container_width=True
-            )
-            if convo_button:
-                st.session_state["cid"] = cid
+            is_edit = st.session_state.get(f"edit_convo_button_{cid}", False)
+
+            if not is_edit:
+                convo_button = st.button(
+                    title,
+                    key=f"button_{cid}",
+                    disabled=selected,
+                    use_container_width=True,
+                )
+                if convo_button:
+                    st.session_state["cid"] = cid
+                    st.experimental_rerun()
+            else:
+                st.text_input(
+                    "Edit Label",
+                    title,
+                    key=f"new_title_{cid}",
+                    max_chars=30,
+                    label_visibility="collapsed",
+                )
+
+            new_title = st.session_state.get(f"new_title_{cid}", "")
+            if new_title and new_title != title:
+                edit_convo(cid, new_label=new_title)
+                st.session_state[f"new_title_{cid}"] = ""
                 st.experimental_rerun()
 
         with col2:
+            st.button(
+                ":pencil2:",
+                key=f"edit_convo_button_{cid}",
+                disabled=selected,
+                use_container_width=True,
+            )
+
+        with col3:
             delete_button = st.button(
-                "🗑️",
+                ":wastebasket:",
                 key=f"delete_convo_button_{cid}",
                 disabled=selected,
                 use_container_width=True,
@@ -60,6 +89,47 @@ def button_row(st, cid, conversation, selected=False):
                 delete_convo(cid)
                 st.experimental_rerun()
 
+    css = """
+        <style>
+            div.css-ocqkz7.e1tzin5v3  {
+                border: 1px solid #e6e6e6;
+                border-radius: 4px;
+                background-color: #fff;
+            }
+            div.css-ocqkz7.e1tzin5v3 .stButton > button {
+                border: 1px solid transparent;
+                background-color: #fff;
+                align-items: center;
+            }
+            div.css-ocqkz7.e1tzin5v3 .stButton > button:hover {
+                color: #6e6e6e;
+            }
+            div.css-ocqkz7.e1tzin5v3 [data-testid="column"]:first-child .stButton > button {
+                justify-content: flex-start;
+                width: 220px;
+                overflow: hidden; 
+                white-space: nowrap;
+                position: relative;
+                background: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,1));
+                background-size: cover;
+                background-position: center;
+                background-repeat: no-repeat;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+            div.css-ocqkz7.e1tzin5v3 [data-testid="column"]:nth-child(2) .stButton{
+                position: relative;
+            }
+            div.css-ocqkz7.e1tzin5v3 [data-testid="column"]:nth-child(2) .stButton > button {
+                position: absolute;
+                top: 0;
+                right: -15px;
+            }
+        </style>
+        """
+
+    st.sidebar.markdown(css, unsafe_allow_html=True)
+
 
 def get_key_from_params(st, key):
     params = st.experimental_get_query_params()