chatbot component

frontend/src/components/directory.js

@@ -23,7 +23,9 @@ import OutputJson from "./output/Json/config.js";
 import OutputLabel from "./output/Label/config.js";
 import OutputTextbox from "./output/Textbox/config.js";
 import OutputVideo from "./output/Video/config.js";
-import OutputTimeSeries from './output/TimeSeries/config.js'
+import OutputTimeSeries from './output/TimeSeries/config.js';
+import OutputChatbot from './output/Chatbot/config.js';
+
 
 import Dummy from "./Dummy.svelte"
 
@@ -56,4 +58,5 @@ export const output_component_map = {
     "textbox": OutputTextbox,
     "timeseries": OutputTimeSeries,
     "video": OutputVideo,
+    "chatbot": OutputChatbot,
 }

frontend/src/components/output/Chatbot/Component.svelte

@@ -0,0 +1,14 @@
+<script>
+	export let value;
+	export let theme;
+</script>
+
+
+<div class="overflow-y-auto h-64 border border-b-0 rounded-t-lg leading-tight">
+	<div class="flex flex-col items-end space-y-4 p-3">
+		{#each value as message}
+			<div class="px-3 py-2 rounded-2xl place-self-start bg-gray-300 dark:bg-gray-850 dark:text-gray-200 mr-7">{ message[1] }</div>
+			<div class="px-3 py-2 rounded-2xl bg-yellow-500 text-white ml-7">{ message[0] }</div> 		
+		{/each}
+	</div>
+</div>

frontend/src/components/output/Chatbot/config.js

@@ -0,0 +1,5 @@
+import Component from "./Component.svelte";
+
+export default {
+    "component": Component, 
+}

gradio/outputs.py

@@ -794,6 +794,24 @@ class Timeseries(OutputComponent):
     def restore_flagged(self, dir, data, encryption_key):
         return json.loads(data)
 
+class Chatbot(OutputComponent):
+
+    def __init__(self, label: Optional[str] = None):
+        super().__init__(label)
+
+    def get_template_context(self):
+        return {**super().get_template_context()}
+
+    @classmethod
+    def get_shortcut_implementations(cls):
+        return {
+            "chatbot": {},
+        }
+
+    def postprocess(self, y):
+        return y
+
+
 
 class State(OutputComponent):
     """