Merge pull request #593 from gradio-app/dawood/chatbot

Chatbot component

gradio/outputs.py

@@ -793,6 +793,40 @@ class Timeseries(OutputComponent):
     def restore_flagged(self, dir, data, encryption_key):
         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):
+        return {**super().get_template_context()}
+
+    @classmethod
+    def get_shortcut_implementations(cls):
+        return {
+            "chatbot": {},
+        }
+
+    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
+
+
 
 class State(OutputComponent):
     """

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,21 @@
+<script lang="ts">
+	export let value: Array<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
+};