File size: 2,565 Bytes
1b66f8d 5da61b4 b7167b0 5da61b4 b7167b0 5da61b4 9405a81 8ba05f1 1b66f8d 3aa8136 1b66f8d 9405a81 1b66f8d 4dae10f 3aa8136 1b66f8d 5be0e20 1b66f8d 3aa8136 5da61b4 1b66f8d 17dba7d 1b66f8d 3aa8136 1b66f8d b7167b0 3aa8136 1b66f8d b7167b0 1b66f8d 9405a81 8ba05f1 9405a81 1b66f8d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<script lang="ts">
import type { Message } from "$lib/types/Message";
import { createEventDispatcher } from "svelte";
import CarbonSendAltFilled from "~icons/carbon/send-alt-filled";
import ChatMessages from "./ChatMessages.svelte";
import ChatInput from "./ChatInput.svelte";
import CarbonExport from "~icons/carbon/export";
import { PUBLIC_MODEL_NAME } from "$env/static/public";
export let messages: Message[] = [];
export let disabled: boolean = false;
export let loading: boolean = false;
export let pending: boolean = false;
let message: string;
const dispatch = createEventDispatcher<{ message: string; share: void }>();
</script>
<div class="relative min-h-0">
<ChatMessages {loading} {pending} {messages} on:message />
<div
class="flex flex-col max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white via-white/80 to-white/0 dark:from-gray-900 dark:via-gray-80 dark:to-gray-900/0 justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-4 md:py-8 w-full"
>
<form
on:submit|preventDefault={() => {
if (loading) return;
dispatch("message", message);
message = "";
}}
class="w-full relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100 focus-within:border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:focus-within:border-gray-500 "
>
<div class="w-full flex flex-1 border-none bg-transparent">
<ChatInput placeholder="Ask anything" bind:value={message} autofocus maxRows={10} />
<button
class="p-1 px-[0.7rem] group self-end my-1 h-[2.4rem] rounded-lg hover:bg-gray-100 enabled:dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent disabled:opacity-60 dark:disabled:opacity-40 flex-shrink-0 transition-all mx-1"
disabled={!message || loading || disabled}
type="submit"
>
<CarbonSendAltFilled
class="text-gray-400 group-hover:text-gray-800 group-disabled:text-gray-300"
/>
</button>
</div>
</form>
<div class="flex text-xs text-gray-400/80 mt-2 justify-between self-stretch px-1">
<p>
Model: {PUBLIC_MODEL_NAME} · Generated content may be inaccurate or false.
</p>
{#if messages.length}
<button
class="flex items-center hover:underline hover:text-gray-400"
type="button"
on:click={() => dispatch("share")}
>
<CarbonExport class="text-[.6rem] mr-1.5 text-yellow-500" />Share this conversation
</button>
{/if}
</div>
</div>
</div>
|