Added image container and fixed issues with layout and facility information

app.py

@@ -6,14 +6,19 @@ import os
  
 CSS ="""
 .contain { display: flex; flex-direction: column; }
-.gradio-container { height: 100vh !important; }
 .svelte-vt1mxs div:first-child { flex-grow: 1; overflow: auto;}
 #chatbot { flex-grow: 1; overflow: auto;}
-.svelte-vt1mxs div:nth-child(2) > div:first-child:not(.message-bubble-border) {height: 300px; overflow: auto !important;}
-footer {visibility: hidden}
+footer {display: none !important;}
 .app.svelte-182fdeq.svelte-182fdeq {
   max-width: 100vw !important;
 }
+#main_container {
+  height: 95vh;
+}
+#markup_container {
+  height: 100%;
+  overflow:auto;
+}
 """
 
 openAIToken = os.environ['openAIToken']
@@ -77,7 +82,12 @@ def process_text_chunk(text, storage):
   if "#" in text and storage["is_loading_suggestions"] != True:
     storage["is_loading_markup"] = True
 
-  if storage["is_loading_suggestions"] == True or storage["is_loading_markup"] == True:
+  if "<" in text:
+    storage["is_loading_suggestions"] = False
+    storage["is_loading_markup"] = False
+    storage["is_loading_svg"] = True
+
+  if storage["is_loading_suggestions"] == True or storage["is_loading_markup"] == True or storage["is_loading_svg"] == True:
     accumulative_string = storage["accumulative_string"] + text
     if storage["is_loading_suggestions"] == True:
       if "#s#" in accumulative_string:
@@ -89,17 +99,43 @@ def process_text_chunk(text, storage):
         storage["is_loading_suggestions"] = False
         local_message = accumulative_string
         accumulative_string = ""
-    else:
+    elif storage["is_loading_markup"]:
       if "#p#" in accumulative_string:
         parts = accumulative_string.split("#p#")
-        local_message = parts[0]
-        accumulative_string = "#p#" + parts[1]
-        storage["markup_string"] = accumulative_string[3:]
+        if len(parts) > 2:
+          accumulative_string = parts[0] + parts[2]
+          storage["markup_string"] = parts[1]
+          storage["is_loading_markup"] = False
+        else:
+          local_message = parts[0]
+          accumulative_string = "#p#" + parts[1]
+          storage["markup_string"] = parts[1]
       elif "#" in accumulative_string and "#p" not in accumulative_string and not accumulative_string.endswith("#"):
-        storage["markup_string"] = accumulative_string[4:]
         storage["is_loading_markup"] = False
         local_message = accumulative_string
         accumulative_string = ""
+    else:
+      if "<" in accumulative_string and "<s" not in accumulative_string and not accumulative_string.endswith("<"):
+        storage["is_loading_svg"] = False
+        local_message = accumulative_string
+        accumulative_string = ""
+      elif "<svg" in accumulative_string:
+        parts = accumulative_string.split("<svg")
+        if "#p#" in parts[0]:
+          info_parts = parts[0].split('#p#')
+          local_message = info_parts[0]
+        else:
+          local_message = parts[0]
+        
+        if "</svg>" in parts[1]:
+          svg_ending = ("<svg" + parts[1]).split('</svg>')
+          storage["svg"] = svg_ending[0] + '</svg>'
+          accumulative_string = svg_ending[1]
+          storage["is_loading_svg"] = False
+        else: 
+          accumulative_string = "<svg" + parts[1]
+          storage["svg"] = accumulative_string
+    
     storage["accumulative_string"] = accumulative_string
   else:
     local_message = text
@@ -110,8 +146,10 @@ def handle_events(threadId, chat_history, storage):
     "list_of_suggestions" : [],
     "is_loading_suggestions" : False,
     "is_loading_markup" : False,
+    "is_loading_svg": False,
     "accumulative_string" : "",
-    "markup_string": ""
+    "markup_string": "",
+    "svg": ""
   })
   try:
     with client.beta.threads.runs.stream(
@@ -124,7 +162,7 @@ def handle_events(threadId, chat_history, storage):
           local_message, storage = process_text_chunk(text, storage)
           if local_message is not None:
             chat_history[-1][1] += local_message 
-            yield [ chat_history,  storage, storage["markup_string"]]
+          yield [ chat_history,  storage, storage["markup_string"], storage["svg"]]
         if event.event == 'thread.run.requires_action':
           result = handle_requires_action(event.data)
           tool_outputs = [x["tool_output"] for x in result]
@@ -137,22 +175,22 @@ def handle_events(threadId, chat_history, storage):
               local_message, storage = process_text_chunk(text, storage)
               if local_message is not None:
                 chat_history[-1][1] += local_message
-                yield [chat_history, storage, storage["markup_string"]]
+              yield [chat_history, storage, storage["markup_string"], storage["svg"]]
             action_stream.close()
       stream.until_done()
       print("")
-      return [chat_history, storage, storage["markup_string"]]
+      return [chat_history, storage, storage["markup_string"], storage["svg"]]
   except Exception as e:
     print(e)
     chat_history[-1][1] = "Error occured during processing your message. Please try again"
-    yield [chat_history, storage, storage["markup_string"]]
+    yield [chat_history, storage, storage["markup_string"], storage["svg"]]
 
 def initiate_chatting(chat_history, storage):
   threadId = storage["threadId"]
   chat_history = [[None, ""]]
   add_message_to_openai(initial_message, threadId)
   for response in handle_events(threadId, chat_history, storage):
-    yield response 
+    yield response
 
 def respond_on_user_msg(chat_history, storage):
   message = chat_history[-1][0]
@@ -166,17 +204,19 @@ def respond_on_user_msg(chat_history, storage):
 def create_application():
   with gr.Blocks(css=CSS, fill_height=True) as demo:
     storage = gr.State({"list_of_suggestions": [], "is_loading_suggestions": False, "is_loading_markup": False, "accumulative_string": "", "markup_string": ""})
-    with gr.Row():
+    btn_list = []
+    with gr.Row(elem_id="main_container"):
       with gr.Column(scale=4):
         chatbot = gr.Chatbot(label="Facility managment bot", line_breaks=False, height=300, show_label=False, show_share_button=False, elem_id="chatbot")
-      with gr.Column(scale=1):
+        with gr.Row():
+          for i in range(6):
+              btn = gr.Button(visible=False, size="sm")
+              btn_list.append(btn)
+        msg = gr.Textbox(label="Answer", interactive=False)
+      with gr.Column(scale=1, elem_id="markup_container"):
         markdown = gr.Markdown(label="Bullet-list", value="# Facility information")
-    btn_list = []
-    with gr.Row():
-      for i in range(6):
-          btn = gr.Button(visible=False, size="sm")
-          btn_list.append(btn)
-    msg = gr.Textbox(label="Answer", interactive=False)
+    with gr.Row(variant="compact"):
+      svg_container = gr.HTML(label="SVG Container", value="""""")
 
     def user(user_message, history):
         return "", history + [[user_message, None]]
@@ -198,7 +238,7 @@ def create_application():
       return message_box
 
     add_user_message_flow = [user, [msg,chatbot],  [msg,chatbot]]
-    chat_response_flow = [respond_on_user_msg, [chatbot, storage], [chatbot, storage, markdown]]
+    chat_response_flow = [respond_on_user_msg, [chatbot, storage], [chatbot, storage, markdown, svg_container]]
     update_suggestions_flow = [update_suggestions, storage, btn_list]
     hide_suggestions_flow = [hide_suggestions, None, btn_list]
     disable_msg_flow = [disable_msg, None, msg] 
@@ -220,7 +260,7 @@ def create_application():
               ).then(*enable_msg_flow)
     
     demo.load(create_thread_openai, inputs=storage, outputs=storage
-        ).then(initiate_chatting, inputs=[chatbot, storage], outputs=[chatbot, storage, markdown]
+        ).then(initiate_chatting, inputs=[chatbot, storage], outputs=[chatbot, storage, markdown, svg_container]
         ).then(*update_suggestions_flow
         ).then(*enable_msg_flow)
   return demo