feat: add chat history, edit panel

Dockerfile

@@ -16,4 +16,4 @@ EXPOSE 8501
 
 HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
 
-ENTRYPOINT ["streamlit", "run", "src/streamlit_app.py", "--server.port=8501", "--server.address=0.0.0.0"]
+ENTRYPOINT ["streamlit", "run", "streamlit_app.py", "--server.port=8501", "--server.address=0.0.0.0"]

chat.py

@@ -56,13 +56,13 @@ if prompt := st.chat_input("Send a message"):
                 )
                 
                 ######## debug #########
-                print("=== RAW RESPONSE ===")
-                print(json.dumps(response.__dict__, indent=2, default=str))
+                # print("=== RAW RESPONSE ===")
+                # print(json.dumps(response.__dict__, indent=2, default=str))
                 
                 # show the response
                 reply = response.choices[0].message["content"]
                 st.markdown(reply)
-                print(reply)
+                # print(reply)
                 
                 # reasoning = getattr(response.choices[0], "reasoning", None)
                 # if reasoning:

edit_history.py

@@ -0,0 +1,110 @@
+# edit_history.py
+import difflib
+from datetime import datetime
+import streamlit as st
+
+
+def init_edit_history():
+    """Ensure edit history list exists in session_state."""
+    if "edit_history" not in st.session_state:
+        st.session_state.edit_history = []
+
+
+def add_edit(old_text: str, new_text: str, source: str | None = None):
+    """
+    Append an edit event to history.
+
+    - old_text: text before edit
+    - new_text: text after edit
+    - source: where this edit came from (e.g., "In-place Chat", "System")
+    """
+    init_edit_history()
+    st.session_state.edit_history.append(
+        {
+            "old": old_text,
+            "new": new_text,
+            "source": source,
+            "ts": datetime.now().strftime("%H:%M:%S"),
+        }
+    )
+
+
+def _render_diff_html(old: str, new: str) -> str:
+    """
+    Return HTML for a git-style diff:
+    - removed tokens: red, strikethrough
+    - added tokens: green
+    - unchanged: normal
+    """
+    # word-level diff
+    diff = difflib.ndiff(old.split(), new.split())
+    parts: list[str] = []
+
+    for token in diff:
+        code = token[:2]  # "+ ", "- ", or "  "
+        word = token[2:]
+
+        if code == "+ ":
+            # Added text in green
+            parts.append(
+                f"<span style='color:#22c55e;'>{word}</span>"
+            )
+        elif code == "- ":
+            # Removed text in red with strikethrough
+            parts.append(
+                f"<span style='color:#ef4444;text-decoration:line-through;'>{word}</span>"
+            )
+        else:
+            parts.append(word)
+
+    return " ".join(parts)
+
+
+def render_edit_history_sidebar(max_items: int = 20):
+    """
+    Render the edit history inside the sidebar.
+
+    Call this inside a sidebar container.
+    """
+    init_edit_history()
+
+    with st.expander("Edit history", expanded=True):
+        history = st.session_state.edit_history
+
+        if not history:
+            st.caption("No edits yet. Edits will appear here.")
+            return
+
+        # Show most recent first
+        for idx, item in enumerate(reversed(history[-max_items:]), start=1):
+            header_html = "<div style='margin-bottom:0.15rem;'>"
+
+            # Title + meta info
+            meta_bits = []
+            if "ts" in item:
+                meta_bits.append(item["ts"])
+            if item.get("source"):
+                meta_bits.append(item["source"])
+
+            meta_html = " · ".join(meta_bits)
+
+            header_html += f"<strong>Edit {len(history) - idx + 1}</strong>"
+            if meta_html:
+                header_html += (
+                    f" <span style='font-size:0.75rem;color:#9ca3af;'>"
+                    f"{meta_html}</span>"
+                )
+            header_html += "</div>"
+
+            st.markdown(header_html, unsafe_allow_html=True)
+
+            diff_html = _render_diff_html(item["old"], item["new"])
+            st.markdown(
+                f"<div style='font-size:0.85rem;'>{diff_html}</div>",
+                unsafe_allow_html=True,
+            )
+
+            st.markdown(
+                "<hr style='margin:0.35rem 0;border:none;border-top:1px solid #e5e7eb;'/>",
+                unsafe_allow_html=True,
+            )

inplace_chat.py

@@ -16,18 +16,42 @@ hf_token = os.getenv("HF_TOKEN")
 client = InferenceClient(model="openai/gpt-oss-20b", token=hf_token)
 
 ####### initialize session states ######
-if "chat_history" not in st.session_state:
-    st.session_state.chat_history = []  # [{"role": "user", ...}, {"role": "assistant", ...}]
-if "original_user_prompt" not in st.session_state:
-    st.session_state.original_user_prompt = ""
-if "editable" not in st.session_state:
-    st.session_state.editable = False
-if "prev_text" not in st.session_state:
-    st.session_state.prev_text = ""
-if "edited_text" not in st.session_state:
-    st.session_state.edited_text = ""
-if "prev_msgs" not in st.session_state:
-    st.session_state.prev_msgs = []
+# These are managed globally in streamlit_app.py, but we ensure they exist
+if "current_chat_id" not in st.session_state:
+    st.session_state.current_chat_id = None
+if "conversations" not in st.session_state:
+    st.session_state.conversations = {}
+
+# Get or create current conversation
+chat_id = st.session_state.current_chat_id
+if chat_id is None or chat_id not in st.session_state.conversations:
+    # This shouldn't happen if streamlit_app.py is the entry point, but just in case
+    import uuid
+    chat_id = str(uuid.uuid4())
+    st.session_state.conversations[chat_id] = {
+        "title": "New chat",
+        "messages": [],
+        "editable": False,
+        "prev_text": "",
+        "edited_text": "",
+        "original_user_prompt": "",
+        "edit_history": []
+    }
+    st.session_state.current_chat_id = chat_id
+
+conv = st.session_state.conversations[chat_id]
+
+# Ensure all required keys exist in the current conversation
+conv.setdefault("messages", [])
+conv.setdefault("editable", False)
+conv.setdefault("prev_text", "")
+conv.setdefault("edited_text", "")
+conv.setdefault("original_user_prompt", "")
+conv.setdefault("title", "New chat")
+conv.setdefault("edit_history", [])  # List of {removed, added, timestamp}
+
+# Shorthand references
+chat_history = conv["messages"]
 
 # === Utility: compact "removed vs added" summary for the inplace_prefix ===
 ### later separate this into parse_diff.py
@@ -51,19 +75,41 @@ def summarize_edit(old: str, new: str) -> tuple[str, str]:
     edited_text = " / ".join(added_chunks) if added_chunks else "(none)"
     return removed_text, edited_text
 
+def get_detailed_diff(old: str, new: str) -> list[dict]:
+    """
+    Returns a list of diff chunks with tags: 'equal', 'delete', 'insert', 'replace'
+    Each chunk has: {'tag': str, 'text': str}
+    """
+    sm = difflib.SequenceMatcher(a=old, b=new)
+    diff_chunks = []
+    for tag, i1, i2, j1, j2 in sm.get_opcodes():
+        if tag == 'equal':
+            diff_chunks.append({'tag': 'equal', 'text': old[i1:i2]})
+        elif tag == 'delete':
+            diff_chunks.append({'tag': 'delete', 'text': old[i1:i2]})
+        elif tag == 'insert':
+            diff_chunks.append({'tag': 'insert', 'text': new[j1:j2]})
+        elif tag == 'replace':
+            diff_chunks.append({'tag': 'delete', 'text': old[i1:i2]})
+            diff_chunks.append({'tag': 'insert', 'text': new[j1:j2]})
+    return diff_chunks
+
 # === Render current conversation ===
-editable=st.session_state.editable
-print(editable)
-for i, msg in enumerate(st.session_state.chat_history):
-    print(i, msg)
-    if st.session_state.editable and msg["role"] == "assistant":
+editable = conv["editable"]
+for i, msg in enumerate(chat_history):
+    if editable and i == len(chat_history) - 1 and msg["role"] == "assistant":
         continue
     with st.chat_message(msg["role"]):
         st.markdown(msg["content"])
 
 if prompt := st.chat_input("Send a message"):
-    st.session_state.original_user_prompt = prompt
-    st.session_state.chat_history.append({"role": "user", "content": prompt})
+    conv["original_user_prompt"] = prompt
+    chat_history.append({"role": "user", "content": prompt})
+
+    # Update conversation title with first user message
+    if conv["title"] == "New chat" and len(chat_history) == 1:
+        conv["title"] = prompt[:50]  # Use first 50 chars of first message
+
     with st.chat_message("user"):
         st.markdown(prompt)
 
@@ -82,39 +128,37 @@ if prompt := st.chat_input("Send a message"):
                     top_p=0.95,
                     stream=False,
                 )
-            
+
                 reply = response.choices[0].message["content"]
                 st.markdown(reply)
-                st.session_state.chat_history.append(
+                chat_history.append(
                     {"role": "assistant", "content": reply}
                 )
-                st.session_state.prev_text = reply
-                # save previous messages for reference
-                st.session_state.prev_msgs.append(reply)
-                
+                conv["prev_text"] = reply
+
             except Exception as e:
                 st.error(f"Error: {e}")
 
 # Edit features
-if st.session_state.chat_history and st.session_state.chat_history[-1]["role"] == "assistant":
+if chat_history and chat_history[-1]["role"] == "assistant":
     # button
     with st.chat_message("assistant"):
         col_spacer, col_edit = st.columns([0.93, 0.07])
         with col_edit:
-            if not st.session_state.editable:
+            if not conv["editable"]:
                 if st.button("✏️", key="edit_btn", help="Edit response"):
-                    st.session_state.editable = True
+                    conv["editable"] = True
                     st.rerun()
-    
+
     ######## Edit mode #########
-    if st.session_state.editable:
+    if conv["editable"]:
         st.markdown('<div class="editable-on">', unsafe_allow_html=True)
         with st.chat_message("assistant"):
             st.caption("Editing the last response…")
             with st.form("edit_form", clear_on_submit=False):
-                st.session_state.edited_text = st.text_area(
+                conv["edited_text"] = st.text_area(
                     " ",
-                    value=st.session_state.prev_text,
+                    value=conv["prev_text"],
                     height=500,
                     label_visibility="collapsed",
                     key="edit_textarea",
@@ -127,15 +171,27 @@ if st.session_state.chat_history and st.session_state.chat_history[-1]["role"] =
         st.markdown("</div>", unsafe_allow_html=True)
 
     # === Handle edit submission (backend: in-place continuation) ===
-    if st.session_state.editable and finished_edit:
-        if st.session_state.chat_history and st.session_state.chat_history[-1]["role"] == "assistant":
-            st.session_state.chat_history.pop()
-        removed_text, added_text = summarize_edit(st.session_state.prev_text, st.session_state.edited_text)
-        
+    if conv["editable"] and finished_edit:
+        if chat_history and chat_history[-1]["role"] == "assistant":
+            chat_history.pop()
+        removed_text, added_text = summarize_edit(conv["prev_text"], conv["edited_text"])
+
+        # Save to edit history
+        import datetime
+        diff_chunks = get_detailed_diff(conv["prev_text"], conv["edited_text"])
+        conv["edit_history"].append({
+            "removed": removed_text,
+            "added": added_text,
+            "timestamp": datetime.datetime.now().strftime("%H:%M:%S"),
+            "original": conv["prev_text"],
+            "edited": conv["edited_text"],
+            "diff_chunks": diff_chunks
+        })
+
         system_prompt = "The user edited your previous answer. Only continue from the assistant message above. Do NOT rewrite or repeat it."
-        
+
         # Exit edit mode before generation
-        st.session_state.editable = False
+        conv["editable"] = False
 
         with st.chat_message("assistant"):
             with st.spinner("Continuing from your edit…"):
@@ -143,29 +199,26 @@ if st.session_state.chat_history and st.session_state.chat_history[-1]["role"] =
                     resp = client.chat_completion(
                         messages=[
                              {"role": "system", "content": system_prompt},
-                             {"role": "assistant", "content": st.session_state.edited_text},
+                             {"role": "assistant", "content": conv["edited_text"]},
                              {"role": "user", "content": "Continue exactly from the assistant message above. Do not restate any of it; just append."},
                         ],
-                        
+
                         max_tokens=60000,
                         temperature=0.7,
                         top_p=0.95,
                     )
 
                     generated = resp.choices[0].message["content"]
-                    combined = st.session_state.edited_text + '\n\n'+generated
-                    st.session_state.prev_text = combined
-                    # print("generated text after feedback")
-                    # print(generated)
-                    st.session_state.chat_history.append(
+                    combined = conv["edited_text"] + '\n\n'+generated
+                    conv["prev_text"] = combined
+                    chat_history.append(
                         {"role": "assistant", "content": combined}
                     )
-                    print(st.session_state.chat_history)
                     st.rerun()
 
                 except Exception as e:
                     st.error(f"Error while continuing from edit: {e}")
-                    st.session_state.chat_history.append(
-                        {"role": "assistant", "content": st.session_state.prev_text}
+                    chat_history.append(
+                        {"role": "assistant", "content": conv["prev_text"]}
                     )
-                    st.session_state.editable = False
+                    conv["editable"] = False

streamlit_app.py

@@ -3,22 +3,35 @@ import streamlit as st
 import pandas as pd
 import numpy as np
 from pathlib import Path
+import uuid
 
 from cards import (
-    # widgets_card,
-    # text_card,
-    # dataframe_card,
-    # charts_card,
-    # media_card,
-    # layouts_card,
     chat_card,
-    inplace_chat_card,
-    # status_card
+    inplace_chat_card
 )
 
+# ---------- Global state init ----------
 if "init" not in st.session_state:
     st.session_state.init = True
+    st.session_state.conversations = {}      # {chat_id: {"title": str, "messages": [...]}}
+    st.session_state.current_chat_id = None  # which conversation is open
 
+def create_new_conversation():
+    chat_id = str(uuid.uuid4())
+    st.session_state.conversations[chat_id] = {
+        "title": "New chat",
+        "messages": [],
+        "editable": False,
+        "prev_text": "",
+        "edited_text": "",
+        "original_user_prompt": "",
+        "edit_history": []
+    }
+    st.session_state.current_chat_id = chat_id
+
+# ensure at least one conversation exists
+if not st.session_state.conversations:
+    create_new_conversation()
 
 pages = [
     st.Page(
@@ -30,55 +43,160 @@ pages = [
         "chat.py",
         title="Chat",
         icon=":material/chat:"
-    ),
-    # st.Page(
-    #     "home.py",
-    #     title="Home",
-    #     icon=":material/home:"
-    # ),
-    # st.Page(
-    #     "widgets.py",
-    #     title="Widgets",
-    #     icon=":material/widgets:"
-    # ),
-    # st.Page(
-    #     "text.py",
-    #     title="Text",
-    #     icon=":material/article:"
-    # ),
-    # st.Page(
-    #     "data.py",
-    #     title="Data",
-    #     icon=":material/table:"
-    # ),
-    # st.Page(
-    #     "charts.py",
-    #     title="Charts",
-    #     icon=":material/insert_chart:"
-    # ),
-    # st.Page(
-    #     "media.py",
-    #     title="Media",
-    #     icon=":material/image:"
-    # ),
-    # st.Page(
-    #     "layouts.py",
-    #     title="Layouts",
-    #     icon=":material/dashboard:"
-    # ),
-    # st.Page(
-    #     "status.py",
-    #     title="Status",
-    #     icon=":material/error:"
-    # ),
+    )
 ]
 
 page = st.navigation(pages)
+# ---------- Sidebar: ChatGPT-style history ----------
+with st.sidebar:
+    # new chat button
+    st.write("This is a simple demo for CSED499 Inplace feedback.")
+    st.button(
+        "＋ New chat",
+        use_container_width=True,
+        on_click=create_new_conversation,
+    )
+    st.markdown("---")
+    st.markdown("### Chat History")
+
+    # Add custom CSS for hover effect on chat history items
+    st.markdown("""
+        <style>
+        /* Chat history item buttons */
+        .stButton > button[kind="secondary"] {
+            background-color: transparent;
+            border: none;
+            color: inherit;
+            padding: 8px 12px;
+            text-align: left;
+            width: 100%;
+            border-radius: 8px;
+            transition: background-color 0.2s;
+            justify-content: flex-start;
+        }
+        .stButton > button[kind="secondary"]:hover {
+            background-color: rgba(128, 128, 128, 0.2);
+        }
+        .stButton > button[kind="secondary"]:focus {
+            box-shadow: none;
+        }
+        /* Delete button styling */
+        .stButton > button[kind="secondary"].delete-btn {
+            width: auto;
+            padding: 4px 8px;
+            color: rgba(128, 128, 128, 0.6);
+        }
+        .stButton > button[kind="secondary"].delete-btn:hover {
+            color: rgba(128, 128, 128, 1);
+            background-color: rgba(128, 128, 128, 0.15);
+        }
+        </style>
+    """, unsafe_allow_html=True)
+
+    # list existing conversations as clickable text
+    for chat_id, conv in st.session_state.conversations.items():
+        # truncate title like ChatGPT
+        label = conv["title"]
+        if len(label) > 35:
+            label = label[:35] + "…"
+
+        # Create columns for chat item and delete button
+        col_chat, col_delete = st.columns([0.85, 0.15])
+
+        with col_chat:
+            # highlight current chat with a marker
+            if chat_id == st.session_state.current_chat_id:
+                st.markdown(f"**▶ {label}**")
+            else:
+                # Make entire text clickable with hover effect
+                if st.button(label, key=f"chat-{chat_id}", type="secondary", use_container_width=True):
+                    st.session_state.current_chat_id = chat_id
+                    st.rerun()
+
+        with col_delete:
+            # Delete button - only show for non-active chats or show for all
+            if st.button("✕", key=f"delete-{chat_id}", type="secondary", help="Delete chat"):
+                # If deleting current chat, switch to another one first
+                if chat_id == st.session_state.current_chat_id:
+                    remaining = [cid for cid in st.session_state.conversations.keys() if cid != chat_id]
+                    if remaining:
+                        st.session_state.current_chat_id = remaining[0]
+                    else:
+                        st.session_state.current_chat_id = None
+
+                # Delete the conversation
+                del st.session_state.conversations[chat_id]
+                st.rerun()
+
+# run selected page (after sidebar is defined)
 page.run()
 
-with st.sidebar.container(height=310):
-    st.write("This is a simple demo for CSED499 Inplace feedback.")
 
+# === Edit History Panel ===
+st.sidebar.markdown("### Edit History")
+
+if st.session_state.current_chat_id:
+    current_conv = st.session_state.conversations.get(st.session_state.current_chat_id, {})
+    edit_history = current_conv.get("edit_history", [])
+
+    if edit_history:
+        st.sidebar.markdown("""
+            <style>
+            .diff-container {
+                font-family: 'Space Mono', monospace;
+                font-size: 0.85em;
+                line-height: 1.4;
+                margin: 8px 0;
+                padding: 8px;
+                background-color: rgba(128, 128, 128, 0.05);
+                border-radius: 4px;
+            }
+            .diff-delete {
+                background-color: rgba(255, 0, 0, 0.15);
+                color: #d73a49;
+                text-decoration: line-through;
+                padding: 2px 4px;
+                border-radius: 2px;
+            }
+            .diff-insert {
+                background-color: rgba(0, 255, 0, 0.15);
+                color: #22863a;
+                padding: 2px 4px;
+                border-radius: 2px;
+            }
+            .diff-equal {
+                color: inherit;
+            }
+            </style>
+        """, unsafe_allow_html=True)
+
+        for idx, edit in enumerate(reversed(edit_history)):
+            edit_num = len(edit_history) - idx
+            # Each edit as a collapsible expander
+            with st.sidebar.expander(f"Edit #{edit_num} at {edit['timestamp']}", expanded=False):
+                # Build the diff HTML
+                diff_html = "<div class='diff-container'>"
+                for chunk in edit.get('diff_chunks', []):
+                    text = chunk['text'].replace('<', '&lt;').replace('>', '&gt;')
+                    if chunk['tag'] == 'delete':
+                        diff_html += f"<span class='diff-delete'>{text}</span>"
+                    elif chunk['tag'] == 'insert':
+                        diff_html += f"<span class='diff-insert'>{text}</span>"
+                    else:  # equal
+                        # Truncate long unchanged sections
+                        if len(text) > 100:
+                            text = text[:50] + "..." + text[-50:]
+                        diff_html += f"<span class='diff-equal'>{text}</span>"
+                diff_html += "</div>"
+
+                st.markdown(diff_html, unsafe_allow_html=True)
+    else:
+        st.sidebar.write("No edits yet in this conversation.")
+else:
+    st.sidebar.write("No conversation selected.")
+
+
+# st.markdown("---")
 st.sidebar.caption(
     "This app uses [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) "
     "and [Space Mono](https://fonts.google.com/specimen/Space+Mono) fonts."