add notification on tabs

app.py

@@ -455,7 +455,7 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                     textbox=gr.Textbox(placeholder="Ask me anything here!",show_label=False,scale=7,lines = 1,interactive = True,elem_id="input-textbox")
                  
 
-            with gr.Column(scale=1.5, variant="panel",elem_id = "right-panel"):
+            with gr.Column(scale=2, variant="panel",elem_id = "right-panel"):
 
 
                 with gr.Tabs() as tabs:
@@ -486,15 +486,14 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                             samples.append(group_examples)
 
 
-                    with gr.Tab("Sources",elem_id = "tab-citations",id = 1):
+                    with gr.Tab("Sources",elem_id = "tab-citations",id = 1) as tab_sources:
                         sources_textbox = gr.HTML(show_label=False, elem_id="sources-textbox")
                         docs_textbox = gr.State("")
                         
 
                         
-
                     # with Modal(visible = False) as config_modal:
-                    with gr.Tab("Configuration",elem_id = "tab-config",id = 2):
+                    with gr.Tab("Configuration",elem_id = "tab-config",id = 2) as tab_config:
 
                         gr.Markdown("Reminders: You can talk in any language, ClimateQ&A is multi-lingual!")
 
@@ -524,12 +523,19 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                         output_query = gr.Textbox(label="Query used for retrieval",show_label = True,elem_id = "reformulated-query",lines = 2,interactive = False)
                         output_language = gr.Textbox(label="Language",show_label = True,elem_id = "language",lines = 1,interactive = False)
                     
-                
-                    with gr.Tab("Recommended content", elem_id="tab-recommended_content", id=4) as recommended_content_tab:
-                        # placeholder_message = gr.HTML("<h2>There are no graphs to be displayed at the moment. Try asking another question.</h2>")
+                    with gr.Tab("Figures",elem_id = "tab-figures",id = 3) as tab_figures:
+                        with Modal(visible=False, elem_id="modal_figure_galery") as modal:
+                            gallery_component = gr.Gallery(object_fit='scale-down',elem_id="gallery-component", height="80vh")
+                            
+                        show_full_size_figures = gr.Button("Show figures in full size",elem_id="show-figures",interactive=True)    
+                        show_full_size_figures.click(lambda : Modal(visible=True),None,modal)
+
+                        figures_cards = gr.HTML(show_label=False, elem_id="sources-figures")
+                        
+                        
+                    with gr.Tab("Recommended content", elem_id="tab-recommended_content", id=4) as tab_recommended_content:
                         graphs_container = gr.HTML("<h2>There are no graphs to be displayed at the moment. Try asking another question.</h2>")
                         current_graphs.change(lambda x : x, inputs=[current_graphs], outputs=[graphs_container])
-                        gr.Textbox(current_graphs.value)
 
                         # @gr.render(inputs=[current_graphs])
                         # def display_default_recommended(current_graphs):
@@ -564,15 +570,7 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                         #             )
 
                             
-                    with gr.Tab("Figures",elem_id = "tab-figures",id = 3):
-                        with Modal(visible=False, elem_id="modal_figure_galery") as modal:
-                            gallery_component = gr.Gallery(object_fit='scale-down',elem_id="gallery-component", height="80vh")
-                            
-                        show_full_size_figures = gr.Button("Show figures in full size",elem_id="show-figures",interactive=True)    
-                        show_full_size_figures.click(lambda : Modal(visible=True),None,modal)
 
-                        figures_cards = gr.HTML(show_label=False, elem_id="sources-figures")
-                        
 
 
 
@@ -683,25 +681,31 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
         current_state = 1 - current_state
         return current_state
     
+    def update_sources_number_display(sources_textbox, figures_cards, current_graphs):
+        sources_number = sources_textbox.count("<h2>")
+        figures_number = figures_cards.count("<h2>")
+        graphs_number = current_graphs.count("<iframe")
+        sources_notif_label = f"Sources ({sources_number})"
+        figures_notif_label = f"Figures ({figures_number})"
+        graphs_notif_label = f"Recommended content ({graphs_number})"
+        # sources_notif_label = f"Sources (🆕)"
+        # figures_notif_label = f"Figures (🆕)"
+        # graphs_notif_label = f"Recommended content (🆕)"
+         
+        return gr.update(label = sources_notif_label), gr.update(label = figures_notif_label), gr.update(label = graphs_notif_label)
     
     (textbox
         .submit(start_chat, [textbox,chatbot], [textbox,tabs,chatbot],queue = False,api_name = "start_chat_textbox")
         .then(chat, [textbox,chatbot,dropdown_audience, dropdown_sources,dropdown_reports, current_graphs], [chatbot,sources_textbox,output_query,output_language,gallery_component, figures_cards, current_graphs],concurrency_limit = 8,api_name = "chat_textbox")
         .then(finish_chat, None, [textbox,tabs],api_name = "finish_chat_textbox")
-        .then(change_completion_status, [chat_completed_state], [chat_completed_state])
-        # .then(lambda graphs : generate_html_graphs(graphs), [current_graphs], [graphs_container],)
-
+        .then(update_sources_number_display, [sources_textbox, figures_cards, current_graphs],[tab_sources, tab_figures, tab_recommended_content] )
     )
 
     (examples_hidden
-        # .change(start_chat, [examples_hidden,chatbot], [textbox,tabs,chatbot],queue = False,api_name = "start_chat_examples")
-        # .then(chat, [examples_hidden,chatbot,dropdown_audience, dropdown_sources,dropdown_reports,current_graphs], [chatbot,sources_textbox,output_query,output_language,gallery_component, current_graphs],concurrency_limit = 8,api_name = "chat_examples")
-        # .then(finish_chat, None, [textbox,tabs],api_name = "finish_chat_examples")
-        # .then(change_completion_status, [chat_completed_state], [chat_completed_state])
         .change(start_chat, [examples_hidden,chatbot], [textbox,tabs,chatbot],queue = False,api_name = "start_chat_examples")
         .then(chat, [examples_hidden,chatbot,dropdown_audience, dropdown_sources,dropdown_reports, current_graphs], [chatbot,sources_textbox,output_query,output_language,gallery_component, figures_cards, current_graphs],concurrency_limit = 8,api_name = "chat_examples")
         .then(finish_chat, None, [textbox],api_name = "finish_chat_examples")
-        # .then(lambda graphs : graphs, [current_graphs], [graphs_container])
+        .then(update_sources_number_display, [sources_textbox, figures_cards, current_graphs],[tab_sources, tab_figures, tab_recommended_content] )
 
     )