add chatbot component to ui dir

gradio/outputs.py

@@ -795,8 +795,17 @@ class Timeseries(OutputComponent):
         return json.loads(data)
 
 class Chatbot(OutputComponent):
+    """
+    Component displays a chatbot output showing both user submitted messages and responses
+    Output type: List[Tuple[str, str]]
+    Demos: chatbot
+    """
 
     def __init__(self, label: Optional[str] = None):
+        """
+        Parameters:
+        label (str): component name in interface (not used).
+        """
         super().__init__(label)
 
     def get_template_context(self):
@@ -809,6 +818,13 @@ class Chatbot(OutputComponent):
         }
 
     def postprocess(self, y):
+        """
+        Parameters:
+        y (List[Tuple[str, str]]): List of tuples representing the message and response
+        Returns:
+        (List[Tuple[str, str]]): Returns same list of tuples
+
+        """
         return y
 
 

ui/packages/app/src/components/directory.ts

@@ -24,6 +24,7 @@ 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 OutputChatbot from "./output/Chatbot/config.js";
 
 export const input_component_map = {
 	audio: InputAudio,
@@ -53,5 +54,6 @@ export const output_component_map = {
 	label: OutputLabel,
 	textbox: OutputTextbox,
 	timeseries: OutputTimeSeries,
-	video: OutputVideo
+	video: OutputVideo,
+	chatbot: OutputChatbot
 };

ui/packages/app/src/components/output/Chatbot/Chatbot.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	export let value: Array<string>;
+	export let theme: string;
+</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>
+
+<style lang="postcss">
+</style>

ui/packages/app/src/components/output/Chatbot/config.ts

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