add steps and fix css for gradio 5

app.py

@@ -142,6 +142,7 @@ async def chat(query,history,audience,sources,reports):
     }
     
     used_documents = []
+    answer_message_content = ""
     try:
         async for event in result:
             if "langgraph_node" in event["metadata"]:
@@ -155,8 +156,7 @@ async def chat(query,history,audience,sources,reports):
                             docs_html.append(make_html_source(d, i))
                         
                         used_documents = used_documents + [d.metadata["name"] for d in docs]
-                        # already_used_sources =
-                        history[-1].content = "Adding source :\n" + "\n".join(np.unique(used_documents))
+                        history[-1].content = "Adding sources :\n\n - " + "\n - ".join(np.unique(used_documents))
                             
                         docs_html = "".join(docs_html)
                         
@@ -173,16 +173,20 @@ async def chat(query,history,audience,sources,reports):
                     if start_streaming == False:
                         start_streaming = True
                         history.append(ChatMessage(role="assistant", content = ""))
-                    last_message_content = history[-1].content
-                    new_message_content = last_message_content + event["data"]["chunk"].content
-                    new_message_content = parse_output_llm_with_sources(new_message_content)
-                    history[-1] = ChatMessage(role="assistant", content = new_message_content)
+                    answer_message_content +=  event["data"]["chunk"].content
+                    answer_message_content = parse_output_llm_with_sources(answer_message_content)
+                    history[-1] = ChatMessage(role="assistant", content = answer_message_content)
+                    # history.append(ChatMessage(role="assistant", content = new_message_content))
 
                 if event["name"] == "transform_query" and event["event"] =="on_chain_end":
                     if hasattr(history[-1],"content"):
-                        history[-1].content += "Decompose question : \n\n" + "\n".join([q["question"] for q in event["data"]["output"]["remaining_questions"]])
+                        history[-1].content += "Decompose question into sub-questions: \n\n - " + "\n - ".join([q["question"] for q in event["data"]["output"]["remaining_questions"]])
+                        
+                if event["name"] == "categorize_intent" and event["event"] == "on_chain_start":
+                    print("X")
             
-
+            yield history,docs_html,output_query,output_language,gallery #,output_query,output_keywords
+ 
 
 
             # if event["event"] == "on_chat_model_stream" and event["name"] != "transform_query": # if streaming answer
@@ -259,7 +263,7 @@ async def chat(query,history,audience,sources,reports):
 
 
             # history = [tuple(x) for x in history]
-            yield history,docs_html,output_query,output_language,gallery,output_query,output_keywords
+            # yield history,docs_html,output_query,output_language,gallery,output_query,output_keywords
 
     except Exception as e:
         print(event, "has failed")
@@ -328,7 +332,7 @@ async def chat(query,history,audience,sources,reports):
     #     gallery = list(set("|".join(gallery).split("|")))
     #     gallery = [get_image_from_azure_blob_storage(x) for x in gallery]
 
-    yield history,docs_html,output_query,output_language,gallery,output_query,output_keywords
+    yield history,docs_html,output_query,output_language,gallery#,output_query,output_keywords
 
 
 
@@ -462,7 +466,7 @@ def vote(data: gr.LikeData):
 
 
 
-with gr.Blocks(title="Climate Q&A", css="style.css", theme=theme,elem_id = "main-component") as demo:
+with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=theme,elem_id = "main-component") as demo:
     # user_id_state = gr.State([user_id])
 
     with gr.Tab("ClimateQ&A"):

style.css

@@ -2,6 +2,14 @@
 /* :root {
     --user-image: url('https://ih1.redbubble.net/image.4776899543.6215/st,small,507x507-pad,600x600,f8f8f8.jpg');
   } */
+.avatar-container.svelte-1x5p6hu:not(.thumbnail-item) img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+    padding: 0px;
+    margin: 0px;
+}
 
 .warning-box {
     background-color: #fff3cd;
@@ -57,6 +65,7 @@ body.dark .tip-box * {
 
 .message{
     font-size:14px !important;
+    
 }
 
 
@@ -65,6 +74,10 @@ a {
     color: inherit;
 }
 
+.doc-ref sup{
+    color:#dc2626!important;
+    /* margin-right:1px; */
+}
 .card {
     background-color: white;
     border-radius: 10px;
@@ -465,3 +478,6 @@ span.chatbot > p > img{
   .score-orange{
     color:red !important;
   }
+.message-buttons-left.panel.message-buttons.with-avatar {
+    display: none;
+}