diff --git a/frontend/src/components/directory.js b/frontend/src/components/directory.js index 06c69de150..31ec5a73c1 100644 --- a/frontend/src/components/directory.js +++ b/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, } diff --git a/frontend/src/components/output/Chatbot/Component.svelte b/frontend/src/components/output/Chatbot/Component.svelte new file mode 100644 index 0000000000..c1282117e4 --- /dev/null +++ b/frontend/src/components/output/Chatbot/Component.svelte @@ -0,0 +1,14 @@ + + + +
+
+ {#each value as message} +
{ message[1] }
+
{ message[0] }
+ {/each} +
+
diff --git a/frontend/src/components/output/Chatbot/config.js b/frontend/src/components/output/Chatbot/config.js new file mode 100644 index 0000000000..4ec4c21795 --- /dev/null +++ b/frontend/src/components/output/Chatbot/config.js @@ -0,0 +1,5 @@ +import Component from "./Component.svelte"; + +export default { + "component": Component, +} \ No newline at end of file diff --git a/gradio/outputs.py b/gradio/outputs.py index b4bec518a3..4efac66e8d 100644 --- a/gradio/outputs.py +++ b/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): """