Repository: gradio-app/gradio

Issue:
Allow passing `kwargs` to `gr.ChatInterface` via `gr.load`
- [x] I have searched to see if a similar issue already exists.

Currently, `gr.load` doesn't allow customization when creating an app for chat models.
https://github.com/gradio-app/gradio/blob/49492dd2fcb3741f5afc033d6da9da300fd0dd6c/gradio/external.py#L299-L311

One issue is that users can't change the default examples.

Also, the Deepseek-R1 model includes `<think>` tags in their output, but by default, `gr.ChatInterface` ignores these tags, so the following code doesn't work as expected.
```py
import gradio as gr

gr.load(name="deepseek-ai/DeepSeek-R1", src="models", provider="together").launch()
```

This issue can be avoided by passing `gr.Chatbot(allow_tags=["think"])` to `gr.ChatInterface` like this:
```py
import os

import gradio as gr
from huggingface_hub import InferenceClient

client = InferenceClient(provider="together", api_key=os.getenv("HF_TOKEN"))


def fn(message, history):
    messages = [
        *history,
        {
            "role": "user",
            "content": message,
        },
    ]

    completion = client.chat.completions.create(
        model="deepseek-ai/DeepSeek-R1", messages=messages, max_tokens=2000, stream=True
    )
    out = ""
    for chunk in completion:
        if not chunk.choices:
            return
        out += chunk.choices[0].delta.content or ""
        yield out


gr.ChatInterface(
    fn=fn, type="messages", chatbot=gr.Chatbot(type="messages", allow_tags=["think"], scale=1)
).launch()
```

But this is not possible with the current `gr.load`.

Discussion:

Solution patch:
diff --git a/.changeset/fast-mammals-hide.md b/.changeset/fast-mammals-hide.md
new file mode 100644
index 000000000..6ce9d53b5
--- /dev/null
+++ b/.changeset/fast-mammals-hide.md
@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Pass kwargs into `gr.ChatInterface` created by `gr.load()`
diff --git a/.changeset/four-eggs-dig.md b/.changeset/four-eggs-dig.md
new file mode 100644
index 000000000..7bdb45a14
--- /dev/null
+++ b/.changeset/four-eggs-dig.md
@@ -0,0 +1,7 @@
+---
+"@gradio/atoms": minor
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:fix spelling of `resizable` parameter in `gr.Chatbot`
diff --git a/gradio/components/chatbot.py b/gradio/components/chatbot.py
index 34e7df98b..64aa043a0 100644
--- a/gradio/components/chatbot.py
+++ b/gradio/components/chatbot.py
@@ -216,7 +216,8 @@ class Chatbot(Component):
         render: bool = True,
         key: int | str | None = None,
         height: int | str | None = 400,
-        resizeable: bool = False,
+        resizable: bool = False,
+        resizeable: bool = False,  # Deprecated, TODO: Remove
         max_height: int | str | None = None,
         min_height: int | str | None = None,
         editable: Literal["user", "all"] | None = None,
@@ -257,7 +258,7 @@ class Chatbot(Component):
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
             height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll.
-            resizeable: If True, the component will be resizeable by the user.
+            resizable: If True, the user of the Gradio app can resize the chatbot by dragging the bottom right corner.
             max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll. If messages are shorter than the height, the component will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`.
             min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`.
             editable: Allows user to edit messages in the chatbot. If set to "user", allows editing of user messages. If set to "all", allows editing of assistant messages as well.
@@ -299,7 +300,13 @@ class Chatbot(Component):
         self._setup_data_model()
         self.autoscroll = autoscroll
         self.height = height
-        self.resizeable = resizeable
+        if resizeable is not False:
+            warnings.warn(
+                "The 'resizeable' parameter is deprecated and will be removed in a future version. Please use the 'resizable' (note the corrected spelling) parameter instead.",
+                DeprecationWarning,
+            )
+            self.resizable = resizeable
+        self.resizable = resizable
         self.max_height = max_height
         self.min_height = min_height
         self.editable = editable
diff --git a/gradio/external.py b/gradio/external.py
index 463e32aa4..3bba7a8f6 100644
--- a/gradio/external.py
+++ b/gradio/external.py
@@ -308,7 +308,11 @@ def from_model(
                 "Explain gravity to a 5-year-old.",
                 "What were the main causes of World War I?",
             ]
-            return ChatInterface(fn, type="messages", examples=examples)
+            chat_interface_kwargs = {
+                "examples": examples,
+            }
+            kwargs = dict(chat_interface_kwargs, **kwargs)
+            return ChatInterface(fn, type="messages", **kwargs)  # type: ignore
         inputs = components.Textbox(label="Text")
         outputs = inputs
         examples = ["Once upon a time"]
diff --git a/guides/05_chatbots/05_chatbot-specific-events.md b/guides/05_chatbots/05_chatbot-specific-events.md
index 260a3397c..52ca23c0f 100644
--- a/guides/05_chatbots/05_chatbot-specific-events.md
+++ b/guides/05_chatbots/05_chatbot-specific-events.md
@@ -1,10 +1,10 @@
-# Liking, Retrying and Undoing Messages
+# Chatbot-Specific Events
 
 Tags: LLM, CHAT
 
 Users expect modern chatbot UIs to let them easily interact with individual chat messages: for example, users might want to retry message generations, undo messages, or click on a like/dislike button to upvote or downvote a generated message.
 
-Thankfully, the Gradio Chatbot exposes three events, `.retry`, `.undo`, and `like`, to let you build this functionality into your application. As an application developer, you can attach functions to any of these event, allowing you to run arbitrary Python functions e.g. when a user interacts with a message.
+Thankfully, the Gradio Chatbot exposes several events, such as `.retry`, `.undo`, `.like`, and `.clear`, to let you build this functionality into your application. As an application developer, you can attach functions to any of these event, allowing you to run arbitrary Python functions e.g. when a user interacts with a message.
 
 In this demo, we'll build a UI that implements these events. You can see our finished demo deployed on Hugging Face spaces here:
 
@@ -148,10 +148,48 @@ def handle_edit(history, edit_data: gr.EditData):
 chatbot.edit(handle_edit, chatbot, chatbot)
 ```
 
+## The Clear Event
+
+As a bonus, we'll also cover the `.clear()` event, which is triggered when the user clicks the clear icon to clear all messages. As a developer, you can attach additional events that should happen when this icon is clicked, e.g. to handle clearing of additional chatbot state:
+
+```python
+from uuid import uuid4
+import gradio as gr
+
+
+def clear():
+    print("Cleared uuid")
+    return uuid4()
+
+
+def chat_fn(user_input, history, uuid):
+    return f"{user_input} with uuid {uuid}"
+
+
+with gr.Blocks() as demo:
+    uuid_state = gr.State(
+        uuid4
+    )
+    chatbot = gr.Chatbot(type="messages")
+    chatbot.clear(clear, outputs=[uuid_state])
+
+    gr.ChatInterface(
+        chat_fn,
+        additional_inputs=[uuid_state],
+        chatbot=chatbot,
+        type="messages"
+    )
+
+demo.launch()
+```
+
+In this example, the `clear` function, bound to the `chatbot.clear` event, returns a new UUID into our session state, when the chat history is cleared via the trash icon. This can be seen in the `chat_fn` function, which references the UUID saved in our session state.
+
+This example also shows that you can use these events with `gr.ChatInterface` by passing in a custom `gr.Chatbot` object.
 
 ## Conclusion
 
-That's it! You now know how you can implement the retry, undo, and like events for the Chatbot.
+That's it! You now know how you can implement the retry, undo, like, and clear events for the Chatbot.
 
 
 
diff --git a/js/atoms/src/Block.svelte b/js/atoms/src/Block.svelte
index f0ecb039c..195527837 100644
--- a/js/atoms/src/Block.svelte
+++ b/js/atoms/src/Block.svelte
@@ -18,7 +18,7 @@
 	export let scale: number | null = null;
 	export let min_width = 0;
 	export let flex = false;
-	export let resizeable = false;
+	export let resizable = false;
 	let element: HTMLElement;
 
 	let tag = type === "fieldset" ? "fieldset" : "div";
@@ -82,7 +82,7 @@
 	class:auto-margin={scale === null}
 >
 	<slot />
-	{#if resizeable}
+	{#if resizable}
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<svg
 			class="resize-handle"
diff --git a/js/chatbot/Index.svelte b/js/chatbot/Index.svelte
index b64686cf7..72ba11908 100644
--- a/js/chatbot/Index.svelte
+++ b/js/chatbot/Index.svelte
@@ -80,7 +80,7 @@
 	export let like_user_message = false;
 	export let loading_status: LoadingStatus | undefined = undefined;
 	export let height: number | string | undefined;
-	export let resizeable: boolean;
+	export let resizable: boolean;
 	export let min_height: number | string | undefined;
 	export let max_height: number | string | undefined;
 	export let editable: "user" | "all" | null = null;
@@ -98,7 +98,7 @@
 	{scale}
 	{min_width}
 	{height}
-	{resizeable}
+	{resizable}
 	{min_height}
 	{max_height}
 	allow_overflow={true}


Test patch:
diff --git a/test/components/test_chatbot.py b/test/components/test_chatbot.py
index 7a31306d7..177bc879e 100644
--- a/test/components/test_chatbot.py
+++ b/test/components/test_chatbot.py
@@ -48,7 +48,7 @@ class TestChatbot:
             "height": 400,
             "feedback_options": ("Like", "Dislike"),
             "feedback_value": None,
-            "resizeable": False,
+            "resizable": False,
             "max_height": None,
             "min_height": None,
             "autoscroll": True,