Add preview

app.py

@@ -7,8 +7,12 @@ 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;}
 footer {visibility: hidden}
+.app.svelte-182fdeq.svelte-182fdeq {
+  max-width: 100vw !important;
+}
 """
 
 openAIToken = os.environ['openAIToken']
@@ -63,30 +67,51 @@ def create_suggestions_list(suggestions):
   update_hide = [gr.update(visible=False, value="") for _ in range(6-len(suggestions))]
   return update_show + update_hide
 
-def process_text_chunk(text, list_of_suggestions, string_of_suggestions, is_loading_suggestions):
+def process_text_chunk(text, storage):
   print(text, end="", flush=True)
   local_message = None
   if "[" in text:
-    is_loading_suggestions = True
-
-  if is_loading_suggestions != True:
-    local_message = text
+    storage["is_loading_suggestions"] = True
+  
+  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:
+    accumulative_string = storage["accumulative_string"] + text
+    if storage["is_loading_suggestions"] == True:
+      if "#s#" in accumulative_string:
+        storage["is_loading_suggestions"] = False
+        list_of_suggestions, local_message = transform_suggestions_into_list(accumulative_string)
+        storage["list_of_suggestions"] = list_of_suggestions
+        accumulative_string = ""
+      elif "]" in accumulative_string and "]#" not in accumulative_string and not accumulative_string.endswith("]"):
+        storage["is_loading_suggestions"] = False
+        local_message = accumulative_string
+        accumulative_string = ""
+    else:
+      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:]
+      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 = ""
+    storage["accumulative_string"] = accumulative_string
   else:
-    string_of_suggestions = string_of_suggestions + text
-    if "#s#" in string_of_suggestions:
-      is_loading_suggestions = False
-      list_of_suggestions, local_message = transform_suggestions_into_list(string_of_suggestions)
-      string_of_suggestions = ""
-    elif "]" in string_of_suggestions and "]#" not in string_of_suggestions and not string_of_suggestions.endswith("]"):
-      is_loading_suggestions = False
-      local_message = string_of_suggestions
-      string_of_suggestions = ""
-  return local_message, list_of_suggestions, string_of_suggestions, is_loading_suggestions
+    local_message = text
+  return local_message, storage
 
 def handle_events(threadId, chat_history, storage):
-  list_of_suggestions = []
-  string_of_suggestions = ""
-  is_loading_suggestions = False
+  storage.update({
+    "list_of_suggestions" : [],
+    "is_loading_suggestions" : False,
+    "is_loading_markup" : False,
+    "accumulative_string" : "",
+    "markup_string": ""
+  })
   try:
     with client.beta.threads.runs.stream(
       thread_id=threadId,
@@ -95,10 +120,10 @@ def handle_events(threadId, chat_history, storage):
       for event in stream:
         if event.event == "thread.message.delta" and event.data.delta.content:
           text = event.data.delta.content[0].text.value
-          local_message, list_of_suggestions, string_of_suggestions, is_loading_suggestions = process_text_chunk(text, list_of_suggestions, string_of_suggestions, is_loading_suggestions)
+          local_message, storage = process_text_chunk(text, storage)
           if local_message is not None:
             chat_history[-1][1] += local_message 
-            yield [ chat_history,  storage]
+            yield [ chat_history,  storage, storage["markup_string"]]
         if event.event == 'thread.run.requires_action':
           result = handle_requires_action(event.data)
           tool_outputs = [x["tool_output"] for x in result]
@@ -108,19 +133,18 @@ def handle_events(threadId, chat_history, storage):
             tool_outputs=tool_outputs,
           ) as action_stream:
             for text in action_stream.text_deltas:
-              local_message, list_of_suggestions, string_of_suggestions, is_loading_suggestions = process_text_chunk(text, list_of_suggestions, string_of_suggestions, is_loading_suggestions)
+              local_message, storage = process_text_chunk(text, storage)
               if local_message is not None:
                 chat_history[-1][1] += local_message
-                yield [chat_history, storage]
+                yield [chat_history, storage, storage["markup_string"]]
             action_stream.close()
       stream.until_done()
       print("")
-      storage["list_of_suggestions"] = list_of_suggestions
-      return [chat_history, storage]
+      return [chat_history, storage, storage["markup_string"]]
   except Exception as e:
     print(e)
     chat_history[-1][1] = "Error occured during processing your message. Please try again"
-    yield [chat_history, storage]
+    yield [chat_history, storage, storage["markup_string"]]
 
 def initiate_chatting(chat_history, storage):
   threadId = storage["threadId"]
@@ -140,8 +164,12 @@ def respond_on_user_msg(chat_history, storage):
 
 def create_application():
   with gr.Blocks(css=CSS, fill_height=True) as demo:
-    storage = gr.State({})
-    chatbot = gr.Chatbot(label="Facility managment bot", line_breaks=False, show_label=False, show_share_button=False, elem_id="chatbot", height=300)
+    storage = gr.State({"list_of_suggestions": [], "is_loading_suggestions": False, "is_loading_markup": False, "accumulative_string": "", "markup_string": ""})
+    with gr.Row():
+      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):
+        markdown = gr.Markdown(label="Bullet-list", value="# Facility information")
     btn_list = []
     with gr.Row():
       for i in range(6):
@@ -169,7 +197,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]]
+    chat_response_flow = [respond_on_user_msg, [chatbot, storage], [chatbot, storage, markdown]]
     update_suggestions_flow = [update_suggestions, storage, btn_list]
     hide_suggestions_flow = [hide_suggestions, None, btn_list]
     disable_msg_flow = [disable_msg, None, msg] 
@@ -191,7 +219,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]
+        ).then(initiate_chatting, inputs=[chatbot, storage], outputs=[chatbot, storage, markdown]
         ).then(*update_suggestions_flow
         ).then(*enable_msg_flow)
   return demo