mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-27 01:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

4614 chatbot (#4527)

Browse Source 
* fix code rendering

* tweak

* changelog

* tweaks
This commit is contained in:
pngwn 2023-06-15 16:24:17 +01:00 committed by GitHub
parent 03edbc6f81
commit e7ab0f323a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 207 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -36,7 +36,7 @@ demo.launch()
- Fix `_js` parameter to work even without backend function, by [@aliabid94](https://github.com/aliabid94) in [PR 4486](https://github.com/gradio-app/gradio/pull/4486).
- Fix new line issue with `gr.Chatbot()` by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 4491](https://github.com/gradio-app/gradio/pull/4491)
- Fixes issue with Clear button not working for `Label` component by [@abidlabs](https://github.com/abidlabs) in [PR 4456](https://github.com/gradio-app/gradio/pull/4456)
- Ensure code is correctly formatted and copy button is always present in Chatbot by [@pngwn](https://github.com/pngwn) in [PR 4527](https://github.com/gradio-app/gradio/pull/4527)
## Other Changes:

23
js/app/src/components/Chatbot/Chatbot.test.ts
View File

@ -1,6 +1,6 @@
import { test, describe, assert, afterEach } from "vitest";
import { cleanup, render, get_text } from "@gradio/tootils";
import { tick } from "svelte";
import Chatbot from "./Chatbot.svelte";
import type { LoadingStatus } from "../StatusTracker/types";
@ -11,19 +11,22 @@ const loading_status: LoadingStatus = {
status: "complete",
scroll_to_output: false,
visible: true,
fn_index: 0
fn_index: 0,
show_progress: "full"
};
describe("Chatbot", () => {
describe.skip("Chatbot", () => {
afterEach(() => cleanup());
test("renders user and bot messages", () => {
test("renders user and bot messages", async () => {
const { getAllByTestId } = render(Chatbot, {
loading_status,
label: "hello",
value: [["user message one", "bot message one"]],
root: "",
root_url: ""
root_url: "",
latex_delimiters: [{ left: "$$", right: "$$", display: true }],
theme_mode: "dark"
});
const bot = getAllByTestId("user")[0];
@ -39,15 +42,11 @@ describe("Chatbot", () => {
label: "hello",
value: [["user message one", "bot message one"]],
root: "",
root_url: ""
root_url: "",
latex_delimiters: [{ left: "$$", right: "$$", display: true }],
theme_mode: "dark"
});
const bot = getAllByTestId("user");
const user = getAllByTestId("bot");
assert.equal(user.length, 1);
assert.equal(bot.length, 1);
await component.$set({
value: [
["user message one", "bot message one"],

14
js/chatbot/src/ChatBot.svelte
View File

@ -1,12 +1,11 @@
<script lang="ts">
import { marked, copy } from "./utils";
import { copy } from "./utils";
import "katex/dist/katex.min.css";
import DOMPurify from "dompurify";
import render_math_in_element from "katex/dist/contrib/auto-render.js";
import { beforeUpdate, afterUpdate, createEventDispatcher } from "svelte";
import type { SelectData } from "@gradio/utils";
import type { ThemeMode } from "js/app/src/components/types";
import type { FileData } from "@gradio/upload";
import Markdown from "./MarkdownCode.svelte";
const code_highlight_css = {
light: () => import("prismjs/themes/prism.css"),
@ -57,13 +56,6 @@
});
});
}
if (latex_delimiters.length > 0) {
render_math_in_element(div, {
delimiters: latex_delimiters,
throwOnError: false
});
}
});
$: {
@ -100,7 +92,7 @@
on:click={() => handle_select(i, j, message)}
>
{#if typeof message === "string"}
{@html DOMPurify.sanitize(marked.parse(message))}
<Markdown {message} {latex_delimiters} />
{#if feedback && j == 1}
<div class="feedback">
{#each feedback as f}

41
js/chatbot/src/MarkdownCode.svelte Normal file
View File

@ -0,0 +1,41 @@
<script lang="ts">
import { onMount, tick } from "svelte";
import DOMPurify from "dompurify";
import render_math_in_element from "katex/dist/contrib/auto-render.js";
import { marked } from "./utils";
export let message: string;
export let latex_delimiters: Array<{
left: string;
right: string;
display: boolean;
}>;
let el: HTMLSpanElement;
let mounted = false;
onMount(() => {
tick().then(() => {
requestAnimationFrame(() => {
el.innerHTML = DOMPurify.sanitize(marked.parse(message));
mounted = true;
});
});
});
$: mounted &&
latex_delimiters.length > 0 &&
render_math_in_element(el, {
delimiters: latex_delimiters,
throwOnError: false
});
</script>
<span bind:this={el} />
<style>
span :global(code[class*="language-"]),
span :global(pre[class*="language-"]) {
font-size: var(--text-md);
}
</style>

1
js/theme/src/reset.css
View File

@ -54,7 +54,6 @@ code,
kbd,
samp,
pre {
font-size: 1em;
font-family: -var(--font-mono);
}

2
package.json
View File

@ -60,7 +60,7 @@
"prettier-plugin-svelte": "^2.10.0",
"sirv": "^2.0.2",
"sirv-cli": "^2.0.2",
"svelte": "^3.57.0",
"svelte": "^3.59.1",
"svelte-check": "^3.1.4",
"svelte-i18n": "^3.6.0",
"svelte-preprocess": "^5.0.3",

217
pnpm-lock.yaml
View File

@ -22,7 +22,7 @@ importers:
version: 1.27.1
'@sveltejs/vite-plugin-svelte':
specifier: ^1.0.0-next.44
version: 1.0.0-next.44(svelte@3.57.0)(vite@4.2.1)
version: 1.0.0-next.44(svelte@3.59.1)(vite@4.2.1)
'@tailwindcss/forms':
specifier: ^0.5.0
version: 0.5.0(tailwindcss@3.1.6)
@ -34,7 +34,7 @@ importers:
version: 5.16.5
'@testing-library/svelte':
specifier: ^3.1.0
version: 3.1.0(svelte@3.57.0)
version: 3.1.0(svelte@3.59.1)
'@testing-library/user-event':
specifier: ^13.5.0
version: 13.5.0(@testing-library/dom@8.11.3)
@ -91,7 +91,7 @@ importers:
version: 1.3.0(postcss@8.4.6)(prettier@2.6.2)
prettier-plugin-svelte:
specifier: ^2.10.0
version: 2.10.0(prettier@2.6.2)(svelte@3.57.0)
version: 2.10.0(prettier@2.6.2)(svelte@3.59.1)
sirv:
specifier: ^2.0.2
version: 2.0.2
@ -99,17 +99,17 @@ importers:
specifier: ^2.0.2
version: 2.0.2
svelte:
specifier: ^3.57.0
version: 3.57.0
specifier: ^3.59.1
version: 3.59.1
svelte-check:
specifier: ^3.1.4
version: 3.1.4(postcss@8.4.6)(svelte@3.57.0)
version: 3.1.4(postcss@8.4.6)(svelte@3.59.1)
svelte-i18n:
specifier: ^3.6.0
version: 3.6.0(svelte@3.57.0)
version: 3.6.0(svelte@3.59.1)
svelte-preprocess:
specifier: ^5.0.3
version: 5.0.3(postcss@8.4.6)(svelte@3.57.0)(typescript@4.7.4)
version: 5.0.3(postcss@8.4.6)(svelte@3.59.1)(typescript@4.7.4)
tailwindcss:
specifier: ^3.1.6
version: 3.1.6(postcss@8.4.6)
@ -1717,7 +1717,7 @@ packages:
- supports-color
dev: true
/@sveltejs/vite-plugin-svelte@1.0.0-next.44(svelte@3.57.0)(vite@4.2.1):
/@sveltejs/vite-plugin-svelte@1.0.0-next.44(svelte@3.59.1)(vite@4.2.1):
resolution: {integrity: sha512-n+sssEWbzykPS447FmnNyU5GxEhrBPDVd0lxNZnxRGz9P6651LjjwAnISKr3CKgT9v8IybP8VD0n2i5XzbqExg==}
engines: {node: ^14.13.1 || >= 16}
peerDependencies:
@ -1733,8 +1733,8 @@ packages:
deepmerge: 4.2.2
kleur: 4.1.4
magic-string: 0.26.1
svelte: 3.57.0
svelte-hmr: 0.14.11(svelte@3.57.0)
svelte: 3.59.1
svelte-hmr: 0.14.11(svelte@3.59.1)
vite: 4.2.1(@types/node@17.0.14)
transitivePeerDependencies:
- supports-color
@ -1811,14 +1811,14 @@ packages:
redent: 3.0.0
dev: false
/@testing-library/svelte@3.1.0(svelte@3.57.0):
/@testing-library/svelte@3.1.0(svelte@3.59.1):
resolution: {integrity: sha512-xTN6v4xRLQb75GTJn2mrjSUJN4PkhpNZFjwvtdzbOTS6OvxMrkRdm6hFRGauwiFd0LPV7/SqdWbbtMAOC7a+Dg==}
engines: {node: '>= 8'}
peerDependencies:
svelte: 3.x
dependencies:
'@testing-library/dom': 7.31.2
svelte: 3.57.0
svelte: 3.59.1
dev: false
/@testing-library/user-event@13.5.0(@testing-library/dom@8.11.3):
@ -5242,14 +5242,14 @@ packages:
- postcss
dev: false
/prettier-plugin-svelte@2.10.0(prettier@2.6.2)(svelte@3.57.0):
/prettier-plugin-svelte@2.10.0(prettier@2.6.2)(svelte@3.59.1):
resolution: {integrity: sha512-GXMY6t86thctyCvQq+jqElO+MKdB09BkL3hexyGP3Oi8XLKRFaJP1ud/xlWCZ9ZIa2BxHka32zhHfcuU+XsRQg==}
peerDependencies:
prettier: ^1.16.4 || ^2.0.0
svelte: ^3.2.0
dependencies:
prettier: 2.6.2
svelte: 3.57.0
svelte: 3.59.1
dev: false
/prettier-plugin-svelte@2.10.0(prettier@2.8.1)(svelte@3.57.0):
@ -5982,6 +5982,34 @@ packages:
- sass
- stylus
- sugarss
dev: true
/svelte-check@3.1.4(postcss@8.4.6)(svelte@3.59.1):
resolution: {integrity: sha512-25Lb46ZS4IK/XpBMe4IBMrtYf23V8alqBX+szXoccb7uM0D2Wqq5rMRzYBONZnFVuU1bQG3R50lyIT5eRewv2g==}
hasBin: true
peerDependencies:
svelte: ^3.55.0
dependencies:
'@jridgewell/trace-mapping': 0.3.17
chokidar: 3.5.3
fast-glob: 3.2.11
import-fresh: 3.3.0
picocolors: 1.0.0
sade: 1.8.1
svelte: 3.59.1
svelte-preprocess: 5.0.3(postcss@8.4.6)(svelte@3.59.1)(typescript@4.9.5)
typescript: 4.9.5
transitivePeerDependencies:
- '@babel/core'
- coffeescript
- less
- postcss
- postcss-load-config
- pug
- sass
- stylus
- sugarss
dev: false
/svelte-hmr@0.14.11(svelte@3.49.0):
resolution: {integrity: sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==}
@ -5992,13 +6020,13 @@ packages:
svelte: 3.49.0
dev: true
/svelte-hmr@0.14.11(svelte@3.57.0):
/svelte-hmr@0.14.11(svelte@3.59.1):
resolution: {integrity: sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==}
engines: {node: ^12.20 || ^14.13.1 || >= 16}
peerDependencies:
svelte: '>=3.19.0'
dependencies:
svelte: 3.57.0
svelte: 3.59.1
dev: false
/svelte-hmr@0.15.1(svelte@3.57.0):
@ -6010,7 +6038,7 @@ packages:
svelte: 3.57.0
dev: true
/svelte-i18n@3.6.0(svelte@3.57.0):
/svelte-i18n@3.6.0(svelte@3.59.1):
resolution: {integrity: sha512-qvvcMqHVCXJ5pHoQR5uGzWAW5vS3qB9mBq+W6veLZ6jkrzZGOziR+wyOUJsc59BupMh+Ae30qjOndFrRU6v5jA==}
engines: {node: '>= 16'}
hasBin: true
@ -6022,7 +6050,7 @@ packages:
estree-walker: 2.0.2
intl-messageformat: 9.13.0
sade: 1.8.1
svelte: 3.57.0
svelte: 3.59.1
tiny-glob: 0.2.9
dev: false
@ -6132,54 +6160,6 @@ packages:
typescript: 5.0.4
dev: true
/svelte-preprocess@5.0.3(postcss@8.4.6)(svelte@3.57.0)(typescript@4.7.4):
resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==}
engines: {node: '>= 14.10.0'}
requiresBuild: true
peerDependencies:
'@babel/core': ^7.10.2
coffeescript: ^2.5.1
less: ^3.11.3 || ^4.0.0
postcss: ^7 || ^8
postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0
pug: ^3.0.0
sass: ^1.26.8
stylus: ^0.55.0
sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
svelte: ^3.23.0
typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0'
peerDependenciesMeta:
'@babel/core':
optional: true
coffeescript:
optional: true
less:
optional: true
postcss:
optional: true
postcss-load-config:
optional: true
pug:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
typescript:
optional: true
dependencies:
'@types/pug': 2.0.6
detect-indent: 6.1.0
magic-string: 0.27.0
postcss: 8.4.6
sorcery: 0.11.0
strip-indent: 3.0.0
svelte: 3.57.0
typescript: 4.7.4
dev: false
/svelte-preprocess@5.0.3(postcss@8.4.6)(svelte@3.57.0)(typescript@4.9.5):
resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==}
engines: {node: '>= 14.10.0'}
@ -6226,6 +6206,103 @@ packages:
strip-indent: 3.0.0
svelte: 3.57.0
typescript: 4.9.5
dev: true
/svelte-preprocess@5.0.3(postcss@8.4.6)(svelte@3.59.1)(typescript@4.7.4):
resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==}
engines: {node: '>= 14.10.0'}
requiresBuild: true
peerDependencies:
'@babel/core': ^7.10.2
coffeescript: ^2.5.1
less: ^3.11.3 || ^4.0.0
postcss: ^7 || ^8
postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0
pug: ^3.0.0
sass: ^1.26.8
stylus: ^0.55.0
sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
svelte: ^3.23.0
typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0'
peerDependenciesMeta:
'@babel/core':
optional: true
coffeescript:
optional: true
less:
optional: true
postcss:
optional: true
postcss-load-config:
optional: true
pug:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
typescript:
optional: true
dependencies:
'@types/pug': 2.0.6
detect-indent: 6.1.0
magic-string: 0.27.0
postcss: 8.4.6
sorcery: 0.11.0
strip-indent: 3.0.0
svelte: 3.59.1
typescript: 4.7.4
dev: false
/svelte-preprocess@5.0.3(postcss@8.4.6)(svelte@3.59.1)(typescript@4.9.5):
resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==}
engines: {node: '>= 14.10.0'}
requiresBuild: true
peerDependencies:
'@babel/core': ^7.10.2
coffeescript: ^2.5.1
less: ^3.11.3 || ^4.0.0
postcss: ^7 || ^8
postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0
pug: ^3.0.0
sass: ^1.26.8
stylus: ^0.55.0
sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
svelte: ^3.23.0
typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0'
peerDependenciesMeta:
'@babel/core':
optional: true
coffeescript:
optional: true
less:
optional: true
postcss:
optional: true
postcss-load-config:
optional: true
pug:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
typescript:
optional: true
dependencies:
'@types/pug': 2.0.6
detect-indent: 6.1.0
magic-string: 0.27.0
postcss: 8.4.6
sorcery: 0.11.0
strip-indent: 3.0.0
svelte: 3.59.1
typescript: 4.9.5
dev: false
/svelte-range-slider-pips@2.0.2:
resolution: {integrity: sha512-VTWHOdwDyWbndGZnI0PQJY9DO7hgQlNubtCcCL6Wlypv5dU4vEsc4A1sX9TWMuvebEe4332SgsQQHzOdZ+guhQ==}
@ -6250,6 +6327,12 @@ packages:
/svelte@3.57.0:
resolution: {integrity: sha512-WMXEvF+RtAaclw0t3bPDTUe19pplMlfyKDsixbHQYgCWi9+O9VN0kXU1OppzrB9gPAvz4NALuoca2LfW2bOjTQ==}
engines: {node: '>= 8'}
dev: true
/svelte@3.59.1:
resolution: {integrity: sha512-pKj8fEBmqf6mq3/NfrB9SLtcJcUvjYSWyePlfCqN9gujLB25RitWK8PvFzlwim6hD/We35KbPlRteuA6rnPGcQ==}
engines: {node: '>= 8'}
dev: false
/sync-threads@1.0.1:
resolution: {integrity: sha512-hIdwt/c/e1ONnr2RJmfBxEAj/J6KQQWKdToF3Qw8ZNRsTNNteGkOe63rQy9I7J5UNlr8Yl0wkzIr9wgLY94x0Q==}