Spaces:
Runtime error
Runtime error
File size: 4,578 Bytes
9e93b10 | 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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 | <script lang="ts">
import { REXPRO_API_BASE_URL, REXPRO_BASE_URL } from "$lib/constants";
import { marked } from "marked";
import DOMPurify from "dompurify";
import {
config,
user,
models as _models,
temporaryChatEnabled,
} from "$lib/stores";
import { onMount, getContext } from "svelte";
import { blur, fade } from "svelte/transition";
import Suggestions from "./Suggestions.svelte";
import { sanitizeResponseContent } from "$lib/utils";
import Tooltip from "$lib/components/common/Tooltip.svelte";
import EyeSlash from "$lib/components/icons/EyeSlash.svelte";
const i18n = getContext("i18n");
export let modelIds = [];
export let models = [];
export let atSelectedModel;
export let onSelect = (e) => {};
let mounted = false;
let selectedModelIdx = 0;
$: if (modelIds.length > 0) {
selectedModelIdx = models.length - 1;
}
$: models = modelIds.map((id) => $_models.find((m) => m.id === id));
onMount(() => {
mounted = true;
});
</script>
{#key mounted}
<div class="m-auto w-full max-w-6xl px-8 lg:px-20">
<div class="flex justify-start">
<div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 200 }}>
{#each models as model, modelIdx}
<button
on:click={() => {
selectedModelIdx = modelIdx;
}}
>
<Tooltip
content={DOMPurify.sanitize(
marked.parse(
sanitizeResponseContent(
models[selectedModelIdx]?.info?.meta
?.description ?? "",
).replaceAll("\n", "<br>"),
),
)}
placement="right"
>
<img
src={`${REXPRO_API_BASE_URL}/models/model/profile/image?id=${model?.id}&lang=${$i18n.language}`}
class=" size-[2.7rem] rounded-xl border-[1px] border-gray-100 dark:border-none"
alt="logo"
draggable="false"
on:error={(e) => {
e.currentTarget.src = "/favicon.png";
}}
/>
</Tooltip>
</button>
{/each}
</div>
</div>
{#if $temporaryChatEnabled}
<Tooltip
content={$i18n.t(
"This chat won't appear in history and your messages will not be saved.",
)}
className="w-full flex justify-start mb-0.5"
placement="top"
>
<div
class="flex items-center gap-2 text-gray-500 text-lg mt-2 w-fit"
>
<EyeSlash strokeWidth="2.5" className="size-5" />{$i18n.t(
"Temporary Chat",
)}
</div>
</Tooltip>
{/if}
<div
class=" mt-2 mb-4 text-3xl text-gray-800 dark:text-gray-100 text-left flex items-center gap-4 font-primary"
>
<div>
<div
class=" capitalize line-clamp-1"
in:fade={{ duration: 200 }}
>
{#if models[selectedModelIdx]?.name}
{models[selectedModelIdx]?.name}
{:else}
{$i18n.t("Hello, {{name}}", { name: $user?.name })}
{/if}
</div>
<div in:fade={{ duration: 200, delay: 200 }}>
{#if models[selectedModelIdx]?.info?.meta?.description ?? null}
<div
class="mt-0.5 text-base font-normal text-gray-500 dark:text-gray-400 line-clamp-3 markdown"
>
{@html DOMPurify.sanitize(
marked.parse(
sanitizeResponseContent(
models[selectedModelIdx]?.info?.meta
?.description,
).replaceAll("\n", "<br>"),
),
)}
</div>
{#if models[selectedModelIdx]?.info?.meta?.user}
<div
class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500"
>
By
{#if models[selectedModelIdx]?.info?.meta?.user.community}
<a
href="https://rexpro-ai.rexpro.com/m/{models[
selectedModelIdx
]?.info?.meta?.user.username}"
>{models[selectedModelIdx]?.info?.meta
?.user.name
? models[selectedModelIdx]?.info
?.meta?.user.name
: `@${models[selectedModelIdx]?.info?.meta?.user.username}`}</a
>
{:else}
{models[selectedModelIdx]?.info?.meta?.user
.name}
{/if}
</div>
{/if}
{:else}
<div
class=" text-gray-400 dark:text-gray-500 line-clamp-1 font-p"
>
{$i18n.t("How can I help you today?")}
</div>
{/if}
</div>
</div>
</div>
<div
class=" w-full font-primary"
in:fade={{ duration: 200, delay: 300 }}
>
<Suggestions
className="grid grid-cols-2"
suggestionPrompts={atSelectedModel?.info?.meta
?.suggestion_prompts ??
models[selectedModelIdx]?.info?.meta?.suggestion_prompts ??
$config?.default_prompt_suggestions ??
[]}
{onSelect}
/>
</div>
</div>
{/key}
|