Spaces:
Runtime error
Runtime error
File size: 2,222 Bytes
411fba2 7357f85 4b8b411 7357f85 64cfbce b1426d3 f48efbb b1426d3 3138e12 936176c 86574c0 936176c a8ce6ad 2488073 b924465 c7f83e1 a8ce6ad e3a37e9 1a8c098 a8ce6ad 936176c 2488073 411fba2 f459835 25c63d0 936176c 25c63d0 64cfbce 25c63d0 2488073 9ab40fd |
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 |
<script lang="ts">
import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
import { models } from "$lib/stores/models.js";
import IconCaret from "~icons/carbon/chevron-down";
import Avatar from "../avatar.svelte";
import ModelSelectorModal from "./model-selector-modal.svelte";
import ProviderSelect from "./provider-select.svelte";
import { defaultSystemMessage } from "./utils.js";
interface Props {
conversation: Conversation;
}
let { conversation = $bindable() }: Props = $props();
let showModelPickerModal = $state(false);
// Model
function changeModel(modelId: ModelWithTokenizer["id"]) {
const model = $models.find(m => m.id === modelId);
if (!model) {
return;
}
conversation.model = model;
conversation.systemMessage = { role: "system", content: defaultSystemMessage?.[modelId] ?? "" };
conversation.provider = undefined;
}
let nameSpace = $derived(conversation.model.id.split("/")[0] ?? "");
let modelName = $derived(conversation.model.id.split("/")[1] ?? "");
const id = crypto.randomUUID();
</script>
<div class="flex flex-col gap-2">
<label for={id} class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
Models<span class="text-xs font-normal text-gray-400">{$models.length}</span>
</label>
<button
{id}
class="relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
onclick={() => (showModelPickerModal = true)}
>
<div class="flex flex-col items-start">
<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
<Avatar orgName={nameSpace} size="sm" />
{nameSpace}
</div>
<div>{modelName}</div>
</div>
<div
class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
>
<IconCaret />
</div>
</button>
</div>
{#if showModelPickerModal}
<ModelSelectorModal
{conversation}
on:modelSelected={e => changeModel(e.detail)}
on:close={() => (showModelPickerModal = false)}
/>
{/if}
<ProviderSelect bind:conversation />
|