Update Chatbot template

components/antdx/suggestion/demos/block.py

@@ -28,7 +28,7 @@ with gr.Blocks() as demo:
     with ms.Application():
         with antdx.XProvider():
             antd.Typography.Paragraph(
-                "Set `block` to display in a whole row. ``extra` can be used to configure additional information."
+                "Set `block` to display in a whole row. `extra` can be used to configure additional information."
             )
             with antdx.Suggestion(
                     items=items,

layout_templates/chatbot/demos/app.py

@@ -20,6 +20,8 @@ client = OpenAI(
 
 model = "Qwen/Qwen2.5-VL-72B-Instruct"
 
+save_history = False
+
 # =========== Configuration
 
 DEFAULT_PROMPTS = [{
@@ -111,7 +113,8 @@ class Gradio_Events:
                         }] + [{
                             "type": "image_url",
                             "image_url": image_to_base64(file["path"])
-                        } for file in item["content"]["files"]]
+                        } for file in item["content"]["files"]
+                              if os.path.exists(file["path"])]
                     })
                 elif item["role"] == "assistant":
                     messages.append(item)
@@ -307,7 +310,7 @@ class Gradio_Events:
                              value=state_value)
 
     @staticmethod
-    def regenerating(state_value, e: gr.EventData):
+    def regenerate_message(state_value, e: gr.EventData):
         conversation_key = e._data["component"]["conversationKey"]
         history = state_value["conversations_history"][
             state_value["conversation_id"]]
@@ -324,6 +327,37 @@ class Gradio_Events:
         # custom code
         return gr.update(items=history), gr.update(value=state_value)
 
+    @staticmethod
+    def edit_message(state_value, e: gr.EventData):
+        conversation_key = e._data["component"]["conversationKey"]
+        history = state_value["conversations_history"][
+            state_value["conversation_id"]]
+        index = -1
+        for i, conversation in enumerate(history):
+            if conversation["key"] == conversation_key:
+                index = i
+                break
+        if index == -1:
+            return gr.skip()
+        state_value["editing_message_index"] = index
+        text = ''
+        if isinstance(history[index]["content"], str):
+            text = history[index]["content"]
+        else:
+            text = history[index]["content"]["text"]
+        return gr.update(value=text), gr.update(value=state_value)
+
+    @staticmethod
+    def confirm_edit_message(edit_textarea_value, state_value):
+        history = state_value["conversations_history"][
+            state_value["conversation_id"]]
+        message = history[state_value["editing_message_index"]]
+        if isinstance(message["content"], str):
+            message["content"] = edit_textarea_value
+        else:
+            message["content"]["text"] = edit_textarea_value
+        return gr.update(items=history), gr.update(value=state_value)
+
     @staticmethod
     def select_suggestion(sender_value, e: gr.EventData):
         return gr.update(value=sender_value[:-1] + e._data["payload"][0])
@@ -400,6 +434,30 @@ class Gradio_Events:
                          e._data["payload"][0]), gr.update(
                              open=True), gr.update(value=state_value)
 
+    @staticmethod
+    def close_modal():
+        return gr.update(open=False)
+
+    @staticmethod
+    def open_modal():
+        return gr.update(open=True)
+
+    @staticmethod
+    def update_browser_state(state_value):
+
+        return gr.update(value=dict(
+            conversations=state_value["conversations"],
+            conversations_history=state_value["conversations_history"]))
+
+    @staticmethod
+    def apply_browser_state(browser_state_value, state_value):
+        state_value["conversations"] = browser_state_value["conversations"]
+        state_value["conversations_history"] = browser_state_value[
+            "conversations_history"]
+        return gr.update(
+            items=browser_state_value["conversations"]), gr.update(
+                value=state_value)
+
 
 css = """
 #chatbot {
@@ -464,13 +522,15 @@ def logo():
             ms.Span("Chatbot")
 
 
-with gr.Blocks(css=css) as demo:
+with gr.Blocks(css=css, fill_width=True) as demo:
     state = gr.State({
         "conversations_history": {},
         "conversations": [],
         "conversation_id": "",
+        "editing_message_index": -1,
         "attachments_open": False,
     })
+
     with ms.Application(), antdx.XProvider(
             theme=DEFAULT_THEME, locale=DEFAULT_LOCALE), ms.AutoLoading():
         with antd.Row(gutter=[20, 20], wrap=False, elem_id="chatbot"):
@@ -592,6 +652,7 @@ with gr.Blocks(css=css) as demo:
                                                       copy_btn: {
                                                         copyable: { text: typeof bubble.content === 'string' ? bubble.content : bubble.content?.text, tooltips: false },
                                                       },
+                                                      edit_btn: { conversationKey: bubble.key, disabled: bubble.meta.disabled },
                                                       delete_btn: { conversationKey: bubble.key, disabled: bubble.meta.disabled },
                                                     };
                                              }"""):
@@ -611,6 +672,14 @@ with gr.Blocks(css=css) as demo:
                                                              variant="text"):
                                                 with ms.Slot("icon"):
                                                     antd.Icon("CheckOutlined")
+                                    with antd.Button(value=None,
+                                                     size="small",
+                                                     color="default",
+                                                     variant="text",
+                                                     as_item="edit_btn"
+                                                     ) as user_edit_btn:
+                                        with ms.Slot("icon"):
+                                            antd.Icon("EditOutlined")
                                     with antd.Popconfirm(
                                             title="Delete the message",
                                             description=
@@ -660,8 +729,9 @@ with gr.Blocks(css=css) as demo:
                                                       copy_btn: {
                                                         copyable: { text: bubble.content, tooltips: false },
                                                       },
-                                                      regenerating_btn: { conversationKey: bubble.key, disabled: bubble.meta.disabled },
+                                                      regenerate_btn: { conversationKey: bubble.key, disabled: bubble.meta.disabled },
                                                       delete_btn: { conversationKey: bubble.key, disabled: bubble.meta.disabled },
+                                                      edit_btn: { conversationKey: bubble.key, disabled: bubble.meta.disabled },
                                                       like_btn: {
                                                         conversationKey: bubble.key,
                                                         color: bubble.meta?.action === 'like' ? 'primary' : 'default',
@@ -714,23 +784,30 @@ with gr.Blocks(css=css) as demo:
                                             with ms.Slot("icon"):
                                                 antd.Icon("DislikeOutlined")
                                         with antd.Popconfirm(
-                                                title=
-                                                "Regenerating the message",
+                                                title="Regenerate the message",
                                                 description=
-                                                "Regenerating the message will also delete all subsequent messages.",
+                                                "Regenerate the message will also delete all subsequent messages.",
                                                 ok_button_props=dict(
                                                     danger=True),
-                                                as_item="regenerating_btn"
-                                        ) as chatbot_regenerating_popconfirm:
+                                                as_item="regenerate_btn"
+                                        ) as chatbot_regenerate_popconfirm:
                                             with antd.Button(
                                                     value=None,
                                                     size="small",
                                                     color="default",
                                                     variant="text",
-                                                    as_item="regenerating_btn",
+                                                    as_item="regenerate_btn",
                                             ):
                                                 with ms.Slot("icon"):
                                                     antd.Icon("SyncOutlined")
+                                        with antd.Button(value=None,
+                                                         size="small",
+                                                         color="default",
+                                                         variant="text",
+                                                         as_item="edit_btn"
+                                                         ) as chatbot_edit_btn:
+                                            with ms.Slot("icon"):
+                                                antd.Icon("EditOutlined")
                                         with antd.Popconfirm(
                                                 title="Delete the message",
                                                 description=
@@ -839,8 +916,30 @@ with gr.Blocks(css=css) as demo:
                                             ):
                                                 antd.Icon(
                                                     "CloudUploadOutlined")
-
+        # Modals
+        with antd.Modal(title="Edit Message",
+                        open=False,
+                        centered=True,
+                        width="60%") as edit_modal:
+            edit_textarea = antd.Input.Textarea(auto_size=dict(minRows=2,
+                                                               maxRows=6),
+                                                elem_style=dict(width="100%"))
     # Events Handler
+    if save_history:
+        browser_state = gr.BrowserState(
+            {
+                "conversations_history": {},
+                "conversations": [],
+            },
+            storage_key="ms_chatbot_storage")
+        state.change(fn=Gradio_Events.update_browser_state,
+                     inputs=[state],
+                     outputs=[browser_state])
+
+        demo.load(fn=Gradio_Events.apply_browser_state,
+                  inputs=[browser_state, state],
+                  outputs=[conversations, state])
+
     add_conversation_btn.click(fn=Gradio_Events.new_chat,
                                inputs=[state],
                                outputs=[conversations, chatbot, state])
@@ -875,6 +974,16 @@ with gr.Blocks(css=css) as demo:
     chatbot_dislike_btn.click(fn=Gradio_Events.dislike,
                               inputs=[state],
                               outputs=[chatbot, state])
+    gr.on(triggers=[user_edit_btn.click, chatbot_edit_btn.click],
+          fn=Gradio_Events.edit_message,
+          inputs=[state],
+          outputs=[edit_textarea, state]).then(fn=Gradio_Events.open_modal,
+                                               outputs=[edit_modal])
+    edit_modal.ok(fn=Gradio_Events.confirm_edit_message,
+                  inputs=[edit_textarea, state],
+                  outputs=[chatbot, state]).then(fn=Gradio_Events.close_modal,
+                                                 outputs=[edit_modal])
+    edit_modal.cancel(fn=Gradio_Events.close_modal, outputs=[edit_modal])
     gr.on(triggers=[
         chatbot_delete_popconfirm.confirm, user_delete_popconfirm.confirm
     ],
@@ -882,8 +991,8 @@ with gr.Blocks(css=css) as demo:
           inputs=[state],
           outputs=[chatbot, state])
 
-    regenerating_event = chatbot_regenerating_popconfirm.confirm(
-        fn=Gradio_Events.regenerating,
+    regenerating_event = chatbot_regenerate_popconfirm.confirm(
+        fn=Gradio_Events.regenerate_message,
         inputs=[state],
         outputs=[chatbot, state
                  ]).then(fn=Gradio_Events.preprocess_submit(clear_input=False),

layout_templates/coder_artifacts/demos/app.py

@@ -263,6 +263,8 @@ with gr.Blocks(css=css) as demo:
                             with antd.Flex(gap="small", wrap=True):
                                 for example in EXAMPLES:
                                     with antd.Card(
+                                            elem_style=dict(
+                                                flex="1 1 fit-content"),
                                             hoverable=True) as example_card:
                                         antd.Card.Meta(
                                             title=example['title'],