move all of the chatbot component in to js/chatbot (#4900)

* changes

* fix test

* changes

js/app/src/components/Chatbot/index.ts

@@ -1,17 +1,2 @@
-export { default as Component } from "./Chatbot.svelte";
+export { default as Component } from "@gradio/chatbot";
 export const modes = ["static"];
-
-export const document = (config: Record<string, any>) => ({
-	type: {
-		payload: "Array<[string, string]>"
-	},
-	description: {
-		payload: "list of message pairs of"
-	},
-	example_data: config.value?.length
-		? config.value
-		: [
-				["Hi", "Hello"],
-				["1 + 1", "2"]
-		  ]
-});

js/app/test/components.test.ts

@@ -12,7 +12,7 @@ import { setupi18n } from "../src/i18n";
 
 import AnnotatedImage from "../src/components/AnnotatedImage/AnnotatedImage.svelte";
 import Audio from "../src/components/Audio/Audio.svelte";
-import Chatbot from "../src/components/Chatbot/Chatbot.svelte";
+import Chatbot from "@gradio/chatbot";
 import Checkbox from "../src/components/Checkbox/Checkbox.svelte";
 import CheckboxGroup from "../src/components/CheckboxGroup/CheckboxGroup.svelte";
 import ColorPicker from "../src/components/ColorPicker/ColorPicker.svelte";

js/chatbot/package.json

@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"description": "Gradio UI packages",
 	"type": "module",
-	"main": "src/index.ts",
+	"main": "src/Index.svelte",
 	"author": "",
 	"license": "ISC",
 	"private": true,

js/app/src/components/Chatbot/Chatbot.test.ts → js/chatbot/src/Chatbot.test.ts

@@ -1,7 +1,8 @@
 import { test, describe, assert, afterEach } from "vitest";
 import { cleanup, render } from "@gradio/tootils";
-import Chatbot from "./Chatbot.svelte";
-import type { LoadingStatus } from "../StatusTracker/types";
+import Chatbot from "./Index.svelte";
+import type { LoadingStatus } from "../../app/src/components/StatusTracker/types";
+import type { FileData } from "@gradio/upload";
 
 const loading_status: LoadingStatus = {
 	eta: 0,
@@ -67,14 +68,16 @@ describe("Chatbot", () => {
 		const { component, getAllByTestId } = await render(Chatbot, {
 			loading_status,
 			label: "chatbot",
-			value: null,
+			value: undefined,
 			root: "",
 			root_url: "",
-			latex_delimiters: null,
+			latex_delimiters: [],
 			theme_mode: "dark"
 		});
 
-		let value = Array(2).fill([
+		let value: [string | FileData | null, string | FileData | null][] = Array(
+			2
+		).fill([
 			{
 				name: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah1.jpg",
 				mime_type: "image/jpeg",
@@ -88,7 +91,7 @@ describe("Chatbot", () => {
 			value: value
 		});
 
-		const image = getAllByTestId("chatbot-image");
+		const image = getAllByTestId("chatbot-image") as HTMLImageElement[];
 		assert.isTrue(image[0].src.includes("cheetah1.jpg"));
 		assert.isTrue(image[1].src.includes("cheetah1.jpg"));
 	});
@@ -97,26 +100,26 @@ describe("Chatbot", () => {
 		const { component, getAllByTestId } = await render(Chatbot, {
 			loading_status,
 			label: "chatbot",
-			value: null,
 			root: "",
 			root_url: "",
-			latex_delimiters: null,
+			latex_delimiters: [],
 			theme_mode: "dark"
 		});
-		let value = Array(2).fill([
-			{
-				name: "https://gradio-builds.s3.amazonaws.com/demo-files/video_sample.mp4",
-				mime_type: "video/mp4",
-				alt_text: null,
-				data: null,
-				is_file: true
-			}
-		]);
+		let value: Array<[string | FileData | null, string | FileData | null]> =
+			Array(2).fill([
+				{
+					name: "https://gradio-builds.s3.amazonaws.com/demo-files/video_sample.mp4",
+					mime_type: "video/mp4",
+					alt_text: null,
+					data: null,
+					is_file: true
+				}
+			]);
 		await component.$set({
 			value: value
 		});
 
-		const video = getAllByTestId("chatbot-video");
+		const video = getAllByTestId("chatbot-video") as HTMLVideoElement[];
 		assert.isTrue(video[0].src.includes("video_sample.mp4"));
 		assert.isTrue(video[1].src.includes("video_sample.mp4"));
 	});
@@ -125,10 +128,9 @@ describe("Chatbot", () => {
 		const { component, getAllByTestId } = await render(Chatbot, {
 			loading_status,
 			label: "chatbot",
-			value: null,
 			root: "",
 			root_url: "",
-			latex_delimiters: null,
+			latex_delimiters: [],
 			theme_mode: "dark"
 		});
 
@@ -146,7 +148,7 @@ describe("Chatbot", () => {
 			value: value
 		});
 
-		const audio = getAllByTestId("chatbot-audio");
+		const audio = getAllByTestId("chatbot-audio") as HTMLAudioElement[];
 		assert.isTrue(audio[0].src.includes("audio_sample.wav"));
 		assert.isTrue(audio[1].src.includes("audio_sample.wav"));
 	});
@@ -155,10 +157,9 @@ describe("Chatbot", () => {
 		const { component, getAllByTestId } = await render(Chatbot, {
 			loading_status,
 			label: "chatbot",
-			value: null,
 			root: "",
 			root_url: "",
-			latex_delimiters: null,
+			latex_delimiters: [],
 			theme_mode: "dark"
 		});
 
@@ -176,7 +177,7 @@ describe("Chatbot", () => {
 			value: value
 		});
 
-		const file_link = getAllByTestId("chatbot-file");
+		const file_link = getAllByTestId("chatbot-file") as HTMLAnchorElement[];
 		assert.isTrue(file_link[0].href.includes("titanic.csv"));
 		assert.isTrue(file_link[0].href.includes("titanic.csv"));
 	});

js/app/src/components/Chatbot/Chatbot.svelte → js/chatbot/src/Index.svelte

@@ -1,37 +1,35 @@
 <script lang="ts">
-	import { ChatBot } from "@gradio/chatbot";
+	import ChatBot from "./static";
 	import { Block, BlockLabel } from "@gradio/atoms";
-	import type { LoadingStatus } from "../StatusTracker/types";
+	import type { LoadingStatus } from "../../app/src/components/StatusTracker/types";
 	import type { ThemeMode } from "js/app/src/components/types";
 	import { Chat } from "@gradio/icons";
 	import type { FileData } from "@gradio/upload";
 	import { normalise_file } from "@gradio/upload";
-	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
+	import StatusTracker from "../../app/src/components/StatusTracker/StatusTracker.svelte";
 
-	export let elem_id: string = "";
-	export let elem_classes: Array<string> = [];
-	export let visible: boolean = true;
-	export let value: Array<
-		[string | FileData | null, string | FileData | null]
-	> = [];
-	let _value: Array<[string | FileData | null, string | FileData | null]>;
-	export let latex_delimiters: Array<{
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: [string | FileData | null, string | FileData | null][] = [];
+	let _value: [string | FileData | null, string | FileData | null][];
+	export let latex_delimiters: {
 		left: string;
 		right: string;
 		display: boolean;
-	}>;
-	export let container: boolean = false;
+	}[];
+	export let container = false;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let label: string;
-	export let show_label: boolean = true;
+	export let show_label = true;
 	export let root: string;
 	export let root_url: null | string;
-	export let selectable: boolean = false;
+	export let selectable = false;
 	export let theme_mode: ThemeMode;
-	export let show_share_button: boolean = false;
+	export let show_share_button = false;
 
-	const redirect_src_url = (src: string) =>
+	const redirect_src_url = (src: string): string =>
 		src.replace('src="/file', `src="${root}file`);
 
 	$: _value = value
@@ -45,7 +43,7 @@
 		  ])
 		: [];
 	export let loading_status: LoadingStatus | undefined = undefined;
-	export let height: number = 400;
+	export let height = 400;
 </script>
 
 <Block

js/chatbot/src/ChatBot.svelte → js/chatbot/src/static/ChatBot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { copy, format_chat_for_sharing } from "./utils";
+	import { copy, format_chat_for_sharing } from "../utils";
 	import "katex/dist/katex.min.css";
 	import { beforeUpdate, afterUpdate, createEventDispatcher } from "svelte";
 	import { ShareButton } from "@gradio/atoms";
@@ -9,25 +9,21 @@
 	import Markdown from "./MarkdownCode.svelte";
 
 	const code_highlight_css = {
-		light: () => import("prismjs/themes/prism.css"),
-		dark: () => import("prismjs/themes/prism-dark.css")
+		light: (): Promise<typeof import("prismjs/themes/prism.css")> => import("prismjs/themes/prism.css"),
+		dark: (): Promise<typeof import("prismjs/themes/prism.css") > => import("prismjs/themes/prism-dark.css")
 	};
 
-	export let value: Array<
-		[string | FileData | null, string | FileData | null]
-	> | null;
-	let old_value: Array<
-		[string | FileData | null, string | FileData | null]
-	> | null = null;
-	export let latex_delimiters: Array<{
+	export let value: [string | FileData | null, string | FileData | null][] | null;
+	let old_value: [string | FileData | null, string | FileData | null][] | null = null;
+	export let latex_delimiters: {
 		left: string;
 		right: string;
 		display: boolean;
-	}>;
-	export let pending_message: boolean = false;
-	export let feedback: Array<string> | null = null;
-	export let selectable: boolean = false;
-	export let show_share_button: boolean = false;
+	}[];
+	export let pending_message = false;
+	export let feedback: string[] | null = null;
+	export let selectable = false;
+	export let show_share_button = false;
 	export let theme_mode: ThemeMode;
 
 	$: if (theme_mode == "dark") {
@@ -37,7 +33,7 @@
 	}
 
 	let div: HTMLDivElement;
-	let autoscroll: Boolean;
+	let autoscroll: boolean;
 
 	const dispatch = createEventDispatcher<{
 		change: undefined;
@@ -49,7 +45,7 @@
 			div && div.offsetHeight + div.scrollTop > div.scrollHeight - 100;
 	});
 
-	const scroll = () => {
+	const scroll = (): void => {
 		if (autoscroll) {
 			div.scrollTo(0, div.scrollHeight);
 		}
@@ -76,7 +72,7 @@
 		i: number,
 		j: number,
 		message: string | FileData | null
-	) {
+	): void {
 		dispatch("select", {
 			index: [i, j],
 			value: message

js/chatbot/src/MarkdownCode.svelte → js/chatbot/src/static/MarkdownCode.svelte

@@ -2,16 +2,16 @@
 	import { afterUpdate, tick, createEventDispatcher } from "svelte";
 	import DOMPurify from "dompurify";
 	import render_math_in_element from "katex/dist/contrib/auto-render.js";
-	import { marked } from "./utils";
+	import { marked } from "../utils";
 	const dispatch = createEventDispatcher();
 
 	export let message: string;
-	let old_message: string = "";
-	export let latex_delimiters: Array<{
+	let old_message = "";
+	export let latex_delimiters: {
 		left: string;
 		right: string;
 		display: boolean;
-	}>;
+	}[];
 
 	let el: HTMLSpanElement;
 	let mounted = false;

js/chatbot/src/static/index.ts

@@ -0,0 +1 @@
+export { default } from "./ChatBot.svelte";