open-webui/src/lib/components/chat/Messages/Placeholder.svelte

105 lines
3.0 KiB
Svelte
Raw Normal View History

2023-12-30 07:03:48 +00:00
<script lang="ts">
2024-02-24 01:12:19 +00:00
import { WEBUI_BASE_URL } from '$lib/constants';
2024-05-24 10:02:56 +00:00
import { config, user, models as _models } from '$lib/stores';
2024-03-01 04:40:36 +00:00
import { onMount, getContext } from 'svelte';
2024-05-02 06:41:12 +00:00
import { blur, fade } from 'svelte/transition';
2024-04-30 21:56:06 +00:00
import Suggestions from '../MessageInput/Suggestions.svelte';
2024-03-01 04:40:36 +00:00
const i18n = getContext('i18n');
2023-12-30 07:03:48 +00:00
2024-05-24 10:02:56 +00:00
export let modelIds = [];
2023-12-30 07:03:48 +00:00
export let models = [];
2024-04-30 21:56:06 +00:00
export let submitPrompt;
2024-05-02 06:41:12 +00:00
let mounted = false;
2023-12-30 07:03:48 +00:00
let selectedModelIdx = 0;
2024-05-24 10:02:56 +00:00
$: if (modelIds.length > 0) {
2023-12-30 07:03:48 +00:00
selectedModelIdx = models.length - 1;
}
2024-05-02 06:41:12 +00:00
2024-05-24 10:02:56 +00:00
$: models = modelIds.map((id) => $_models.find((m) => m.id === id));
2024-05-02 06:41:12 +00:00
onMount(() => {
mounted = true;
});
2023-12-30 07:03:48 +00:00
</script>
2024-05-02 06:41:12 +00:00
{#key mounted}
2024-05-02 07:23:32 +00:00
<div class="m-auto w-full max-w-6xl px-8 lg:px-24 pb-16">
2024-05-02 05:55:42 +00:00
<div class="flex justify-start">
2024-05-02 06:41:12 +00:00
<div class="flex -space-x-4 mb-1" in:fade={{ duration: 200 }}>
2024-04-30 23:00:44 +00:00
{#each models as model, modelIdx}
<button
on:click={() => {
selectedModelIdx = modelIdx;
}}
>
2024-05-24 10:02:56 +00:00
<img
crossorigin="anonymous"
src={model?.info?.meta?.profile_image_url ??
($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
class=" size-[2.7rem] rounded-full border-[1px] border-gray-200 dark:border-none"
alt="logo"
draggable="false"
/>
2024-04-30 23:00:44 +00:00
</button>
{/each}
</div>
2024-05-02 05:55:42 +00:00
</div>
2024-04-30 23:00:44 +00:00
<div
2024-05-02 05:39:09 +00:00
class=" mt-2 mb-4 text-3xl text-gray-800 dark:text-gray-100 font-semibold text-left flex items-center gap-4"
2024-04-30 23:00:44 +00:00
>
<div>
2024-05-02 06:41:12 +00:00
<div class=" capitalize line-clamp-1" in:fade={{ duration: 200 }}>
2024-05-24 10:02:56 +00:00
{#if models[selectedModelIdx]?.info}
{models[selectedModelIdx]?.info?.name}
2024-05-02 06:41:12 +00:00
{:else}
{$i18n.t('Hello, {{name}}', { name: $user.name })}
2024-04-30 21:56:06 +00:00
{/if}
2024-05-02 06:41:12 +00:00
</div>
2024-02-25 20:34:32 +00:00
2024-05-02 06:41:12 +00:00
<div in:fade={{ duration: 200, delay: 200 }}>
2024-05-24 10:02:56 +00:00
{#if models[selectedModelIdx]?.info}
2024-05-02 06:41:12 +00:00
<div class="mt-0.5 text-base font-normal text-gray-500 dark:text-gray-400">
2024-05-24 10:02:56 +00:00
{models[selectedModelIdx]?.info?.meta?.description}
2024-05-02 06:41:12 +00:00
</div>
2024-05-24 10:02:56 +00:00
{#if models[selectedModelIdx]?.info?.meta?.user}
2024-05-02 06:41:12 +00:00
<div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500">
2024-05-24 10:02:56 +00:00
By
{#if models[selectedModelIdx]?.info?.meta?.user.community}
<a
href="https://openwebui.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}
2024-05-02 06:41:12 +00:00
</div>
{/if}
{:else}
<div class=" font-medium text-gray-400 dark:text-gray-500">
{$i18n.t('How can I help you today?')}
</div>
{/if}
</div>
2024-04-30 21:56:06 +00:00
</div>
2023-12-30 07:03:48 +00:00
</div>
2024-04-30 23:00:44 +00:00
2024-05-02 06:41:12 +00:00
<div class=" w-full" in:fade={{ duration: 200, delay: 300 }}>
2024-05-24 10:02:56 +00:00
<Suggestions
suggestionPrompts={models[selectedModelIdx]?.info?.meta?.suggestion_prompts ??
$config.default_prompt_suggestions}
{submitPrompt}
/>
2024-04-30 23:00:44 +00:00
</div>
2023-12-30 07:03:48 +00:00
</div>
2024-05-02 06:41:12 +00:00
{/key}