Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,14 @@
+.eggs/
+dist/
+.vscode/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/
+README_TEMPLATE.md

README.md

@@ -1,12 +1,256 @@
----
-title: Gradio Topbar
-emoji: 👀
-colorFrom: red
-colorTo: red
-sdk: gradio
-sdk_version: 5.42.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+tags: [gradio-custom-component, SideBar]
+title: gradio_topbar
+short_description: A TopBar for Gradio Interface
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_topbar`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+A TopBar for Gradio Interface
+
+## Installation
+
+```bash
+pip install gradio_topbar
+```
+
+## Usage
+
+```python
+# demo/app.py
+
+import gradio as gr
+import time
+from gradio_topbar import TopBar
+
+def chat_response(message, history):
+    history = history or ""
+    history += f"You: {message}\n"
+    time.sleep(1) # Simulate thinking
+    history += f"Bot: Thanks for the message! You said: '{message}'\n"
+    return history, ""
+
+def update_label(value):
+    return f"Current temperature is: {value}"
+
+with gr.Blocks(theme=gr.themes.Ocean(), title="Full Layout Demo") as demo:
+    gr.Markdown(
+        """
+        # TopBar Demo
+        This demo shows the `TopBar` with `width="50%"` and `bring_to_front=True`.
+        Notice how the bar is now horizontally centered and no longer full-width.
+        """
+    )
+
+    with TopBar(open=True, height=180, width="50%", bring_to_front=True):
+        with gr.Row():
+            message_box = gr.Textbox(
+                show_label=False,
+                placeholder="Type your message here...",
+                elem_id="message-input",
+                scale=7
+            )
+            send_button = gr.Button("Send", variant="primary", scale=1)
+        with gr.Row():
+            gr.Button("Upload File")
+            gr.Button("Record Audio")
+            gr.ClearButton([message_box])
+
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=3):
+            gr.Markdown("### 🤖 Chat Interface")
+            chatbot_display = gr.Textbox(
+                label="Chat History",
+                lines=25,
+                interactive=False
+            )
+
+    send_button.click(
+        fn=chat_response,
+        inputs=[message_box, chatbot_display],
+        outputs=[chatbot_display, message_box]
+    )
+    message_box.submit(
+        fn=chat_response,
+        inputs=[message_box, chatbot_display],
+        outputs=[chatbot_display, message_box]
+    )
+
+if __name__ == "__main__":
+    demo.launch(debug=True)
+```
+
+## `TopBar`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | gradio.i18n.I18nData | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">name of the top bar. Not displayed to the user.</td>
+</tr>
+
+<tr>
+<td align="left"><code>open</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">if True, top bar is open by default.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, the component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str
+```
+
+</td>
+<td align="left"><code>320</code></td>
+<td align="left">The height of the top bar, specified in pixels if a number is passed, or in CSS units if a string is passed.</td>
+</tr>
+
+<tr>
+<td align="left"><code>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str
+```
+
+</td>
+<td align="left"><code>"100%"</code></td>
+<td align="left">The width of the top bar, specified in pixels if a number is passed, or in CSS units (like "80%") if a string is passed. The bar will be horizontally centered.</td>
+</tr>
+
+<tr>
+<td align="left"><code>bring_to_front</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, the TopBar will be rendered on top of all other elements with a higher z-index. Defaults to False.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, Ellipsis] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.</td>
+</tr>
+
+<tr>
+<td align="left"><code>preserved_by_key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `expand` | This listener is triggered when the TopBar is expanded. |
+| `collapse` | This listener is triggered when the TopBar is collapsed. |
+
+
+

app.py

@@ -0,0 +1,61 @@
+# demo/app.py
+
+import gradio as gr
+import time
+from gradio_topbar import TopBar
+
+def chat_response(message, history):
+    history = history or ""
+    history += f"You: {message}\n"
+    time.sleep(1) # Simulate thinking
+    history += f"Bot: Thanks for the message! You said: '{message}'\n"
+    return history, ""
+
+def update_label(value):
+    return f"Current temperature is: {value}"
+
+with gr.Blocks(theme=gr.themes.Ocean(), title="Full Layout Demo") as demo:
+    gr.Markdown(
+        """
+        # TopBar Demo
+        This demo shows the `TopBar` with `width="50%"` and `bring_to_front=True`.
+        Notice how the bar is now horizontally centered and no longer full-width.
+        """
+    )
+
+    with TopBar(open=True, height=180, width="50%", bring_to_front=True):
+        with gr.Row():
+            message_box = gr.Textbox(
+                show_label=False,
+                placeholder="Type your message here...",
+                elem_id="message-input",
+                scale=7
+            )
+            send_button = gr.Button("Send", variant="primary", scale=1)
+        with gr.Row():
+            gr.Button("Upload File")
+            gr.Button("Record Audio")
+            gr.ClearButton([message_box])
+
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=3):
+            gr.Markdown("### 🤖 Chat Interface")
+            chatbot_display = gr.Textbox(
+                label="Chat History",
+                lines=25,
+                interactive=False
+            )
+
+    send_button.click(
+        fn=chat_response,
+        inputs=[message_box, chatbot_display],
+        outputs=[chatbot_display, message_box]
+    )
+    message_box.submit(
+        fn=chat_response,
+        inputs=[message_box, chatbot_display],
+        outputs=[chatbot_display, message_box]
+    )
+
+if __name__ == "__main__":
+    demo.launch(debug=True)

css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

requirements.txt

@@ -0,0 +1 @@
+gradio_topbar

space.py

@@ -0,0 +1,159 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'TopBar': {'description': 'TopBar is a collapsible panel that renders child components in a fixed bar at the top of the page.\n    with gr.Blocks() as demo:\n        with gr.TopBar(height=200, width="80%"):\n            gr.Textbox(label="Enter your text here")\n            gr.Button("Submit")', 'members': {'__init__': {'label': {'type': 'str | gradio.i18n.I18nData | None', 'default': 'None', 'description': 'name of the top bar. Not displayed to the user.'}, 'open': {'type': 'bool', 'default': 'True', 'description': 'if True, top bar is open by default.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'height': {'type': 'int | str', 'default': '320', 'description': 'The height of the top bar, specified in pixels if a number is passed, or in CSS units if a string is passed.'}, 'width': {'type': 'int | str', 'default': '"100%"', 'description': 'The width of the top bar, specified in pixels if a number is passed, or in CSS units (like "80%") if a string is passed. The bar will be horizontally centered.'}, 'bring_to_front': {'type': 'bool', 'default': 'False', 'description': 'If True, the TopBar will be rendered on top of all other elements with a higher z-index. Defaults to False.'}, 'key': {'type': 'int | str | tuple[int | str, Ellipsis] | None', 'default': 'None', 'description': "in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render."}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': 'None', 'description': "A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor."}}, 'postprocess': {}}, 'events': {'expand': {'type': None, 'default': None, 'description': 'This listener is triggered when the TopBar is expanded.'}, 'collapse': {'type': None, 'default': None, 'description': 'This listener is triggered when the TopBar is collapsed.'}}}, '__meta__': {'additional_interfaces': {}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Ocean(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_topbar`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+A TopBar for Gradio Interface
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_topbar
+```
+
+## Usage
+
+```python
+# demo/app.py
+
+import gradio as gr
+import time
+from gradio_topbar import TopBar
+
+def chat_response(message, history):
+    history = history or ""
+    history += f"You: {message}\n"
+    time.sleep(1) # Simulate thinking
+    history += f"Bot: Thanks for the message! You said: '{message}'\n"
+    return history, ""
+
+def update_label(value):
+    return f"Current temperature is: {value}"
+
+with gr.Blocks(theme=gr.themes.Ocean(), title="Full Layout Demo") as demo:
+    gr.Markdown(
+        \"\"\"
+        # TopBar Demo
+        This demo shows the `TopBar` with `width="50%"` and `bring_to_front=True`.
+        Notice how the bar is now horizontally centered and no longer full-width.
+        \"\"\"
+    )
+
+    with TopBar(open=True, height=180, width="50%", bring_to_front=True):
+        with gr.Row():
+            message_box = gr.Textbox(
+                show_label=False,
+                placeholder="Type your message here...",
+                elem_id="message-input",
+                scale=7
+            )
+            send_button = gr.Button("Send", variant="primary", scale=1)
+        with gr.Row():
+            gr.Button("Upload File")
+            gr.Button("Record Audio")
+            gr.ClearButton([message_box])
+
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=3):
+            gr.Markdown("### 🤖 Chat Interface")
+            chatbot_display = gr.Textbox(
+                label="Chat History",
+                lines=25,
+                interactive=False
+            )
+
+    send_button.click(
+        fn=chat_response,
+        inputs=[message_box, chatbot_display],
+        outputs=[chatbot_display, message_box]
+    )
+    message_box.submit(
+        fn=chat_response,
+        inputs=[message_box, chatbot_display],
+        outputs=[chatbot_display, message_box]
+    )
+
+if __name__ == "__main__":
+    demo.launch(debug=True)
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `TopBar`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["TopBar"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["TopBar"]["events"], linkify=['Event'])
+
+
+
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {};
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

@@ -0,0 +1,14 @@
+.eggs/
+dist/
+.vscode/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/
+README_TEMPLATE.md

src/README.md

@@ -0,0 +1,256 @@
+---
+tags: [gradio-custom-component, SideBar]
+title: gradio_topbar
+short_description: A TopBar for Gradio Interface
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_topbar`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+A TopBar for Gradio Interface
+
+## Installation
+
+```bash
+pip install gradio_topbar
+```
+
+## Usage
+
+```python
+# demo/app.py
+
+import gradio as gr
+import time
+from gradio_topbar import TopBar
+
+def chat_response(message, history):
+    history = history or ""
+    history += f"You: {message}\n"
+    time.sleep(1) # Simulate thinking
+    history += f"Bot: Thanks for the message! You said: '{message}'\n"
+    return history, ""
+
+def update_label(value):
+    return f"Current temperature is: {value}"
+
+with gr.Blocks(theme=gr.themes.Ocean(), title="Full Layout Demo") as demo:
+    gr.Markdown(
+        """
+        # TopBar Demo
+        This demo shows the `TopBar` with `width="50%"` and `bring_to_front=True`.
+        Notice how the bar is now horizontally centered and no longer full-width.
+        """
+    )
+
+    with TopBar(open=True, height=180, width="50%", bring_to_front=True):
+        with gr.Row():
+            message_box = gr.Textbox(
+                show_label=False,
+                placeholder="Type your message here...",
+                elem_id="message-input",
+                scale=7
+            )
+            send_button = gr.Button("Send", variant="primary", scale=1)
+        with gr.Row():
+            gr.Button("Upload File")
+            gr.Button("Record Audio")
+            gr.ClearButton([message_box])
+
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=3):
+            gr.Markdown("### 🤖 Chat Interface")
+            chatbot_display = gr.Textbox(
+                label="Chat History",
+                lines=25,
+                interactive=False
+            )
+
+    send_button.click(
+        fn=chat_response,
+        inputs=[message_box, chatbot_display],
+        outputs=[chatbot_display, message_box]
+    )
+    message_box.submit(
+        fn=chat_response,
+        inputs=[message_box, chatbot_display],
+        outputs=[chatbot_display, message_box]
+    )
+
+if __name__ == "__main__":
+    demo.launch(debug=True)
+```
+
+## `TopBar`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | gradio.i18n.I18nData | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">name of the top bar. Not displayed to the user.</td>
+</tr>
+
+<tr>
+<td align="left"><code>open</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">if True, top bar is open by default.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, the component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str
+```
+
+</td>
+<td align="left"><code>320</code></td>
+<td align="left">The height of the top bar, specified in pixels if a number is passed, or in CSS units if a string is passed.</td>
+</tr>
+
+<tr>
+<td align="left"><code>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str
+```
+
+</td>
+<td align="left"><code>"100%"</code></td>
+<td align="left">The width of the top bar, specified in pixels if a number is passed, or in CSS units (like "80%") if a string is passed. The bar will be horizontally centered.</td>
+</tr>
+
+<tr>
+<td align="left"><code>bring_to_front</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">If True, the TopBar will be rendered on top of all other elements with a higher z-index. Defaults to False.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, Ellipsis] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.</td>
+</tr>
+
+<tr>
+<td align="left"><code>preserved_by_key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `expand` | This listener is triggered when the TopBar is expanded. |
+| `collapse` | This listener is triggered when the TopBar is collapsed. |
+
+
+

src/backend/gradio_topbar/__init__.py

@@ -0,0 +1,4 @@
+
+from .topbar import TopBar
+
+__all__ = ['TopBar']

src/backend/gradio_topbar/templates/component/style.css

@@ -0,0 +1 @@
+.top-bar.svelte-isy6s1.svelte-isy6s1{display:flex;flex-direction:column;position:fixed;top:0;left:50%;background-color:var(--background-fill-secondary);transform:translate(-50%) translateY(-100%);z-index:1000;border-bottom:1px solid var(--border-color-primary);box-shadow:0 2px 5px #0000000d}.top-bar.on-top.svelte-isy6s1.svelte-isy6s1{z-index:2000}.top-bar.svelte-isy6s1.svelte-isy6s1:not(.reduce-motion){transition:transform .3s ease-in-out}.top-bar.open.svelte-isy6s1.svelte-isy6s1{transform:translate(-50%) translateY(0)}.toggle-top-button.svelte-isy6s1.svelte-isy6s1{position:absolute;bottom:0;left:50%;transform:translate(-50%,100%);background:var(--background-fill-secondary);border:1px solid var(--border-color-primary);border-top:none;cursor:pointer;padding:var(--size-2);display:flex;align-items:center;justify-content:center;width:var(--size-10);height:var(--size-6);z-index:inherit;border-radius:0 0 var(--radius-lg) var(--radius-lg)}.toggle-top-button.svelte-isy6s1.svelte-isy6s1:not(.reduce-motion){transition:all .3s ease-in-out}.chevron.svelte-isy6s1.svelte-isy6s1{position:relative;display:block;width:var(--size-3);height:var(--size-3)}.chevron-arrow.svelte-isy6s1.svelte-isy6s1{position:absolute;box-sizing:border-box;top:10%;left:18%;width:80%;height:80%;border-bottom:var(--size-0-5) solid var(--body-text-color);border-right:var(--size-0-5) solid var(--body-text-color);transform:rotate(45deg)}.top-bar.svelte-isy6s1:not(.reduce-motion) .chevron-arrow.svelte-isy6s1{transition:transform .3s ease-in-out}.top-bar.open.svelte-isy6s1 .chevron-arrow.svelte-isy6s1{transform:rotate(-135deg)}.bar-content.svelte-isy6s1.svelte-isy6s1{padding:var(--size-4);overflow-y:auto;flex-grow:1}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-1h0hs6p{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-2);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-1h0hs6p{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-1h0hs6p{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-1h0hs6p:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-1h0hs6p{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-1h0hs6p button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child),.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-1h0hs6p>*{height:100%}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-syezpc{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-syezpc{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-syezpc{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-syezpc{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-syezpc{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-syezpc{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-title.error.svelte-syezpc{color:var(--color-red-50)}.toast-title.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-title.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-title.info.svelte-syezpc{color:var(--color-grey-50)}.toast-title.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-title.success.svelte-syezpc{color:var(--color-green-50)}.toast-close.svelte-syezpc{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-close.error.svelte-syezpc{color:var(--color-red-500)}.toast-close.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-close.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-close.info.svelte-syezpc{color:var(--color-grey-500)}.toast-close.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-close.success.svelte-syezpc{color:var(--color-green-500)}.toast-text.svelte-syezpc{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-text.error.svelte-syezpc{color:var(--color-red-50)}.toast-text.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-text.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-text.info.svelte-syezpc{color:var(--color-grey-50)}.toast-text.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-text.success.svelte-syezpc{color:var(--color-green-50)}.toast-details.svelte-syezpc{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-syezpc{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-icon.error.svelte-syezpc{color:var(--color-red-500)}.toast-icon.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-icon.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-syezpc{color:var(--color-grey-500)}.toast-icon.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-icon.success.svelte-syezpc{color:var(--color-green-500)}@keyframes svelte-syezpc-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-syezpc{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-syezpc-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-syezpc{background:var(--color-red-700)}.dark .timer.error.svelte-syezpc{background:var(--color-red-500)}.timer.warning.svelte-syezpc{background:var(--color-yellow-700)}.dark .timer.warning.svelte-syezpc{background:var(--color-yellow-500)}.timer.info.svelte-syezpc{background:var(--color-grey-700)}.dark .timer.info.svelte-syezpc{background:var(--color-grey-500)}.timer.success.svelte-syezpc{background:var(--color-green-700)}.dark .timer.success.svelte-syezpc{background:var(--color-green-500)}.hidden.svelte-syezpc{display:none}.toast-text.svelte-syezpc a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}div.svelte-y3tjew{display:flex;position:relative;flex-direction:column;gap:var(--layout-gap)}div.svelte-y3tjew>*,div.svelte-y3tjew>.form>*{width:var(--size-full)}.hide.svelte-y3tjew{display:none}.compact.svelte-y3tjew>*,.compact.svelte-y3tjew .box{border-radius:0}.compact.svelte-y3tjew,.panel.svelte-y3tjew{border:solid var(--panel-border-width) var(--panel-border-color);border-radius:var(--container-radius);background:var(--panel-background-fill);padding:var(--spacing-lg)}

src/backend/gradio_topbar/topbar.py

@@ -0,0 +1,71 @@
+# gradio_topbar/topbar.py
+
+from __future__ import annotations
+
+from typing import Literal
+
+from gradio_client.documentation import document
+
+from gradio.blocks import BlockContext
+from gradio.component_meta import ComponentMeta
+from gradio.events import Events
+from gradio.i18n import I18nData
+
+
+@document()
+class TopBar(BlockContext, metaclass=ComponentMeta):
+    """
+    TopBar is a collapsible panel that renders child components in a fixed bar at the top of the page.
+    Example:
+        with gr.Blocks() as demo:
+            with gr.TopBar(height=200, width="80%"):
+                gr.Textbox(label="Enter your text here")
+                gr.Button("Submit")
+    Guides: controlling-layout
+    """
+
+    EVENTS = [Events.expand, Events.collapse]
+
+    def __init__(
+        self,
+        label: str | I18nData | None = None,
+        *,
+        open: bool = True,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        height: int | str = 320,
+        width: int | str = "100%",
+        bring_to_front: bool = False,
+        key: int | str | tuple[int | str, ...] | None = None,
+        preserved_by_key: list[str] | str | None = None,
+    ):
+        """
+        Parameters:
+            label: name of the top bar. Not displayed to the user.
+            open: if True, top bar is open by default.
+            visible: If False, the component will be hidden.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            height: The height of the top bar, specified in pixels if a number is passed, or in CSS units if a string is passed.
+            width: The width of the top bar, specified in pixels if a number is passed, or in CSS units (like "80%") if a string is passed. The bar will be horizontally centered.
+            bring_to_front: If True, the TopBar will be rendered on top of all other elements with a higher z-index. Defaults to False.
+            key: in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render.
+            preserved_by_key: A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor.
+        """
+        self.label = label
+        self.open = open
+        self.height = height
+        self.width = width
+        self.bring_to_front = bring_to_front
+        BlockContext.__init__(
+            self,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            preserved_by_key=preserved_by_key,
+        )

src/demo/app.py

@@ -0,0 +1,61 @@
+# demo/app.py
+
+import gradio as gr
+import time
+from gradio_topbar import TopBar
+
+def chat_response(message, history):
+    history = history or ""
+    history += f"You: {message}\n"
+    time.sleep(1) # Simulate thinking
+    history += f"Bot: Thanks for the message! You said: '{message}'\n"
+    return history, ""
+
+def update_label(value):
+    return f"Current temperature is: {value}"
+
+with gr.Blocks(theme=gr.themes.Ocean(), title="Full Layout Demo") as demo:
+    gr.Markdown(
+        """
+        # TopBar Demo
+        This demo shows the `TopBar` with `width="50%"` and `bring_to_front=True`.
+        Notice how the bar is now horizontally centered and no longer full-width.
+        """
+    )
+
+    with TopBar(open=True, height=180, width="50%", bring_to_front=True):
+        with gr.Row():
+            message_box = gr.Textbox(
+                show_label=False,
+                placeholder="Type your message here...",
+                elem_id="message-input",
+                scale=7
+            )
+            send_button = gr.Button("Send", variant="primary", scale=1)
+        with gr.Row():
+            gr.Button("Upload File")
+            gr.Button("Record Audio")
+            gr.ClearButton([message_box])
+
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=3):
+            gr.Markdown("### 🤖 Chat Interface")
+            chatbot_display = gr.Textbox(
+                label="Chat History",
+                lines=25,
+                interactive=False
+            )
+
+    send_button.click(
+        fn=chat_response,
+        inputs=[message_box, chatbot_display],
+        outputs=[chatbot_display, message_box]
+    )
+    message_box.submit(
+        fn=chat_response,
+        inputs=[message_box, chatbot_display],
+        outputs=[chatbot_display, message_box]
+    )
+
+if __name__ == "__main__":
+    demo.launch(debug=True)

src/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

src/demo/requirements.txt

@@ -0,0 +1 @@
+gradio_topbar

src/demo/space.py

@@ -0,0 +1,159 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'TopBar': {'description': 'TopBar is a collapsible panel that renders child components in a fixed bar at the top of the page.\n    with gr.Blocks() as demo:\n        with gr.TopBar(height=200, width="80%"):\n            gr.Textbox(label="Enter your text here")\n            gr.Button("Submit")', 'members': {'__init__': {'label': {'type': 'str | gradio.i18n.I18nData | None', 'default': 'None', 'description': 'name of the top bar. Not displayed to the user.'}, 'open': {'type': 'bool', 'default': 'True', 'description': 'if True, top bar is open by default.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'height': {'type': 'int | str', 'default': '320', 'description': 'The height of the top bar, specified in pixels if a number is passed, or in CSS units if a string is passed.'}, 'width': {'type': 'int | str', 'default': '"100%"', 'description': 'The width of the top bar, specified in pixels if a number is passed, or in CSS units (like "80%") if a string is passed. The bar will be horizontally centered.'}, 'bring_to_front': {'type': 'bool', 'default': 'False', 'description': 'If True, the TopBar will be rendered on top of all other elements with a higher z-index. Defaults to False.'}, 'key': {'type': 'int | str | tuple[int | str, Ellipsis] | None', 'default': 'None', 'description': "in a gr.render, Components with the same key across re-renders are treated as the same component, not a new component. Properties set in 'preserved_by_key' are not reset across a re-render."}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': 'None', 'description': "A list of parameters from this component's constructor. Inside a gr.render() function, if a component is re-rendered with the same key, these (and only these) parameters will be preserved in the UI (if they have been changed by the user or an event listener) instead of re-rendered based on the values provided during constructor."}}, 'postprocess': {}}, 'events': {'expand': {'type': None, 'default': None, 'description': 'This listener is triggered when the TopBar is expanded.'}, 'collapse': {'type': None, 'default': None, 'description': 'This listener is triggered when the TopBar is collapsed.'}}}, '__meta__': {'additional_interfaces': {}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Ocean(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_topbar`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+A TopBar for Gradio Interface
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_topbar
+```
+
+## Usage
+
+```python
+# demo/app.py
+
+import gradio as gr
+import time
+from gradio_topbar import TopBar
+
+def chat_response(message, history):
+    history = history or ""
+    history += f"You: {message}\n"
+    time.sleep(1) # Simulate thinking
+    history += f"Bot: Thanks for the message! You said: '{message}'\n"
+    return history, ""
+
+def update_label(value):
+    return f"Current temperature is: {value}"
+
+with gr.Blocks(theme=gr.themes.Ocean(), title="Full Layout Demo") as demo:
+    gr.Markdown(
+        \"\"\"
+        # TopBar Demo
+        This demo shows the `TopBar` with `width="50%"` and `bring_to_front=True`.
+        Notice how the bar is now horizontally centered and no longer full-width.
+        \"\"\"
+    )
+
+    with TopBar(open=True, height=180, width="50%", bring_to_front=True):
+        with gr.Row():
+            message_box = gr.Textbox(
+                show_label=False,
+                placeholder="Type your message here...",
+                elem_id="message-input",
+                scale=7
+            )
+            send_button = gr.Button("Send", variant="primary", scale=1)
+        with gr.Row():
+            gr.Button("Upload File")
+            gr.Button("Record Audio")
+            gr.ClearButton([message_box])
+
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=3):
+            gr.Markdown("### 🤖 Chat Interface")
+            chatbot_display = gr.Textbox(
+                label="Chat History",
+                lines=25,
+                interactive=False
+            )
+
+    send_button.click(
+        fn=chat_response,
+        inputs=[message_box, chatbot_display],
+        outputs=[chatbot_display, message_box]
+    )
+    message_box.submit(
+        fn=chat_response,
+        inputs=[message_box, chatbot_display],
+        outputs=[chatbot_display, message_box]
+    )
+
+if __name__ == "__main__":
+    demo.launch(debug=True)
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `TopBar`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["TopBar"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["TopBar"]["events"], linkify=['Event'])
+
+
+
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {};
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Index.svelte

@@ -0,0 +1,42 @@
+<!-- frontend/index.svelte -->
+
+<script lang="ts">
+	// This component acts as a bridge between the Gradio Python backend and the Svelte UI.
+	import TopBarPanel from "./shared/TopBarPanel.svelte";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import type { Gradio } from "@gradio/utils";
+	import Column from "@gradio/column";
+
+	export let open = true;
+	export let loading_status: LoadingStatus;
+	export let gradio: Gradio<{
+		expand: never;
+		collapse: never;
+	}>;
+	export let height: number | string;
+	export let width: number | string;
+	export let visible = true;
+	export let bring_to_front = false;
+</script>
+
+<StatusTracker
+	autoscroll={gradio.autoscroll}
+	i18n={gradio.i18n}
+	{...loading_status}
+/>
+
+{#if visible}
+	<TopBarPanel
+		bind:open
+		{height}
+		{width}
+		{bring_to_front}
+		on:expand={() => gradio.dispatch("expand")}
+		on:collapse={() => gradio.dispatch("collapse")}
+	>
+		<Column>
+			<slot />
+		</Column>
+	</TopBarPanel>
+{/if}

src/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

src/frontend/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "gradio_topbar",
+  "version": "0.1.19",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "main_changeset": true,
+  "dependencies": {
+    "@gradio/atoms": "0.16.4",
+    "@gradio/column": "0.2.1",
+    "@gradio/statustracker": "0.10.16",
+    "@gradio/utils": "0.10.2"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.14.0"
+  },
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/sidebar"
+  }
+}

src/frontend/shared/TopBarPanel.svelte

@@ -0,0 +1,149 @@
+<!-- frontend/shared/TopBarPanel.svelte -->
+
+<script lang="ts">
+	import { createEventDispatcher, onMount } from "svelte";
+	const dispatch = createEventDispatcher<{
+		expand: void;
+		collapse: void;
+	}>();
+
+	export let open = true;
+	export let height: number | string;
+	export let width: number | string;
+	export let bring_to_front = false;
+
+	let mounted = false;
+	let _open = false;
+
+	let width_css = typeof width === "number" ? `${width}px` : width;
+	let height_css = typeof height === "number" ? `${height}px` : height;
+	let prefersReducedMotion: boolean;
+
+	onMount(() => {
+		mounted = true;
+		const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+		prefersReducedMotion = mediaQuery.matches;
+
+		const updateMotionPreference = (e: MediaQueryListEvent): void => {
+			prefersReducedMotion = e.matches;
+		};
+		mediaQuery.addEventListener("change", updateMotionPreference);
+		return () => {
+			mediaQuery.removeEventListener("change", updateMotionPreference);
+		};
+	});
+
+	$: if (mounted) _open = open;
+</script>
+
+<div
+	class="top-bar"
+	class:open={_open}
+	class:reduce-motion={prefersReducedMotion}
+	class:on-top={bring_to_front}
+	style="height: {height_css}; width: {width_css};"
+>
+	<button
+		on:click={() => {
+			_open = !_open;
+			open = _open;
+			if (_open) {
+				dispatch("expand");
+			} else {
+				dispatch("collapse");
+			}
+		}}
+		class="toggle-top-button"
+		aria-label="Toggle Top Bar"
+	>
+		<div class="chevron">
+			<span class="chevron-arrow"></span>
+		</div>
+	</button>
+	<div class="bar-content">
+		<slot />
+	</div>
+</div>
+
+<style>
+	.top-bar {
+		display: flex;
+		flex-direction: column;
+		position: fixed;
+		top: 0;
+		left: 50%;
+		background-color: var(--background-fill-secondary);
+		transform: translateX(-50%) translateY(-100%);
+		z-index: 1000;
+		border-bottom: 1px solid var(--border-color-primary);
+		box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+	}
+
+	.top-bar.on-top {
+		z-index: 2000;
+	}
+
+	.top-bar:not(.reduce-motion) {
+		transition: transform 0.3s ease-in-out;
+	}
+
+	.top-bar.open {
+		transform: translateX(-50%) translateY(0);
+	}
+
+	.toggle-top-button {
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translate(-50%, 100%);
+		background: var(--background-fill-secondary);
+		border: 1px solid var(--border-color-primary);
+		border-top: none;
+		cursor: pointer;
+		padding: var(--size-2);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--size-10);
+		height: var(--size-6);
+		z-index: inherit;
+		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+	}
+
+	.toggle-top-button:not(.reduce-motion) {
+		transition: all 0.3s ease-in-out;
+	}
+
+	.chevron {
+		position: relative;
+		display: block;
+		width: var(--size-3);
+		height: var(--size-3);
+	}
+
+	.chevron-arrow {
+		position: absolute;
+		box-sizing: border-box;
+		top: 10%;
+		left: 18%;
+		width: 80%;
+		height: 80%;
+		border-bottom: var(--size-0-5) solid var(--body-text-color);
+		border-right: var(--size-0-5) solid var(--body-text-color);
+		transform: rotate(45deg);
+	}
+
+	.top-bar:not(.reduce-motion) .chevron-arrow {
+		transition: transform 0.3s ease-in-out;
+	}
+
+	.top-bar.open .chevron-arrow {
+		transform: rotate(-135deg);
+	}
+
+	.bar-content {
+		padding: var(--size-4);
+		overflow-y: auto;
+		flex-grow: 1;
+	}
+</style>

src/frontend/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"verbatimModuleSyntax": true
+	},
+	"exclude": ["node_modules", "dist", "./gradio.config.js"]
+}

src/pyproject.toml

@@ -0,0 +1,51 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_topbar"
+version = "0.0.1"
+description = "A TopBar for Gradio Interface"
+readme = "README.md"
+license = "apache-2.0"
+requires-python = ">=3.10"
+authors = [{ name = "Eliseu Silva", email = "[email protected]" }]
+keywords = ["gradio-custom-component", "gradio-template-Sidebar"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "https://github.com/DEVAIEXP/gradio_component_topbar"
+# space = "https://huggingface.co/spaces/elismasilva/gradio_topbar"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_topbar/templates", "*.pyi", "/\\backend\\gradio_topbar\\templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_topbar"]