gradio

1
<script context="module" lang="ts">
2
	export { default as BaseChatBot } from "./shared/ChatBot.svelte";
3
</script>
4

5
<script lang="ts">
6
	import type { Gradio, SelectData, LikeData } from "@gradio/utils";
7

8
	import ChatBot from "./shared/ChatBot.svelte";
9
	import { Block, BlockLabel } from "@gradio/atoms";
10
	import type { LoadingStatus } from "@gradio/statustracker";
11
	import { Chat } from "@gradio/icons";
12
	import type { FileData } from "@gradio/client";
13
	import { StatusTracker } from "@gradio/statustracker";
14

15
	export let elem_id = "";
16
	export let elem_classes: string[] = [];
17
	export let visible = true;
18
	export let value: [
19
		string | { file: FileData; alt_text: string | null } | null,
20
		string | { file: FileData; alt_text: string | null } | null
21
	][] = [];
22
	export let scale: number | null = null;
23
	export let min_width: number | undefined = undefined;
24
	export let label: string;
25
	export let show_label = true;
26
	export let root: string;
27
	export let _selectable = false;
28
	export let likeable = false;
29
	export let show_share_button = false;
30
	export let rtl = false;
31
	export let show_copy_button = false;
32
	export let sanitize_html = true;
33
	export let bubble_full_width = true;
34
	export let layout: "bubble" | "panel" = "bubble";
35
	export let render_markdown = true;
36
	export let line_breaks = true;
37
	export let latex_delimiters: {
38
		left: string;
39
		right: string;
40
		display: boolean;
41
	}[];
42
	export let gradio: Gradio<{
43
		change: typeof value;
44
		select: SelectData;
45
		share: ShareData;
46
		error: string;
47
		like: LikeData;
48
	}>;
49
	export let avatar_images: [FileData | null, FileData | null] = [null, null];
50

51
	let _value: [
52
		string | { file: FileData; alt_text: string | null } | null,
53
		string | { file: FileData; alt_text: string | null } | null
54
	][];
55

56
	const redirect_src_url = (src: string): string =>
57
		src.replace('src="/file', `src="${root}file`);
58

59
	function normalize_messages(
60
		message: { file: FileData; alt_text: string | null } | null
61
	): { file: FileData; alt_text: string | null } | null {
62
		if (message === null) {
63
			return message;
64
		}
65
		return {
66
			file: message?.file as FileData,
67
			alt_text: message?.alt_text
68
		};
69
	}
70

71
	$: _value = value
72
		? value.map(([user_msg, bot_msg]) => [
73
				typeof user_msg === "string"
74
					? redirect_src_url(user_msg)
75
					: normalize_messages(user_msg),
76
				typeof bot_msg === "string"
77
					? redirect_src_url(bot_msg)
78
					: normalize_messages(bot_msg)
79
		  ])
80
		: [];
81

82
	export let loading_status: LoadingStatus | undefined = undefined;
83
	export let height = 400;
84
</script>
85

86
<Block
87
	{elem_id}
88
	{elem_classes}
89
	{visible}
90
	padding={false}
91
	{scale}
92
	{min_width}
93
	{height}
94
	allow_overflow={false}
95
>
96
	{#if loading_status}
97
		<StatusTracker
98
			autoscroll={gradio.autoscroll}
99
			i18n={gradio.i18n}
100
			{...loading_status}
101
			show_progress={loading_status.show_progress === "hidden"
102
				? "hidden"
103
				: "minimal"}
104
		/>
105
	{/if}
106
	<div class="wrapper">
107
		{#if show_label}
108
			<BlockLabel
109
				{show_label}
110
				Icon={Chat}
111
				float={false}
112
				label={label || "Chatbot"}
113
			/>
114
		{/if}
115
		<ChatBot
116
			i18n={gradio.i18n}
117
			selectable={_selectable}
118
			{likeable}
119
			{show_share_button}
120
			value={_value}
121
			{latex_delimiters}
122
			{render_markdown}
123
			pending_message={loading_status?.status === "pending"}
124
			{rtl}
125
			{show_copy_button}
126
			on:change={() => gradio.dispatch("change", value)}
127
			on:select={(e) => gradio.dispatch("select", e.detail)}
128
			on:like={(e) => gradio.dispatch("like", e.detail)}
129
			on:share={(e) => gradio.dispatch("share", e.detail)}
130
			on:error={(e) => gradio.dispatch("error", e.detail)}
131
			{avatar_images}
132
			{sanitize_html}
133
			{bubble_full_width}
134
			{line_breaks}
135
			{layout}
136
		/>
137
	</div>
138
</Block>
139

140
<style>
141
	.wrapper {
142
		display: flex;
143
		position: relative;
144
		flex-direction: column;
145
		align-items: start;
146
		width: 100%;
147
		height: 100%;
148
	}
149
</style>
150