mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-02-05 11:10:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

mirror webcam + autoscroll chatbot

Browse Source
This commit is contained in:
dawoodkhan82 2022-02-15 17:48:35 -05:00
parent ada68c9ed4
commit 200ed97b1a
2 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
View File

@ -1,8 +1,20 @@
<script lang="ts">
import { beforeUpdate, afterUpdate } from 'svelte';
import Html from '../Html/Html.svelte';
export let value: Array<string>;
let div: HTMLDivElement;
let autoscroll: Boolean;
beforeUpdate(() => {
autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
});
afterUpdate(() => {
if (autoscroll) div.scrollTo(0, div.scrollHeight);
});
</script>
<div class="overflow-y-auto h-64 border border-b-0 rounded-t-lg leading-tight">
<div class="overflow-y-auto h-64 border border-b-0 rounded-t-lg leading-tight" bind:this={div}>
<div class="flex flex-col items-end space-y-4 p-3">
{#each value as message}
<div
@ -17,5 +29,9 @@
</div>
</div>
<style lang="postcss">
</style>

7
ui/packages/app/src/components/utils/Webcam.svelte
View File

@ -66,3 +66,10 @@
/>
</button>
</div>
<style lang="postcss" global>
video {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
</style>