Spaces:
Runtime error
Runtime error
File size: 2,673 Bytes
5c5d81b 7357f85 5c5d81b 7357f85 b1426d3 64cfbce b1426d3 f48efbb 5c5d81b 5ac02d2 5c5d81b 5ac02d2 5c5d81b b924465 c7f83e1 5c5d81b 1a8c098 5c5d81b e7afcb4 5ac02d2 5c5d81b e30fa56 382cad0 73b6f4f 5c5d81b 556c447 5ac02d2 f39959c 5c5d81b 8c5a2cf 5ac02d2 5c5d81b 8c5a2cf 5c5d81b f39959c 5c5d81b ba9894c f48efbb ba9894c |
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 |
<script lang="ts">
import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
import { createEventDispatcher } from "svelte";
import { models } from "$lib/stores/models.js";
import Avatar from "../avatar.svelte";
import IconCog from "~icons/carbon/settings";
import GenerationConfig from "./generation-config.svelte";
import ModelSelectorModal from "./model-selector-modal.svelte";
import ProviderSelect from "./provider-select.svelte";
interface Props {
conversation: Conversation;
conversationIdx: number;
}
let { conversation = $bindable(), conversationIdx }: Props = $props();
const dispatch = createEventDispatcher<{ close: string }>();
let modelSelectorOpen = $state(false);
function changeModel(newModelId: ModelWithTokenizer["id"]) {
const model = $models.find(m => m.id === newModelId);
if (!model) {
return;
}
conversation.model = model;
conversation.provider = undefined;
}
let nameSpace = $derived(conversation.model.id.split("/")[0] ?? "");
</script>
{#if modelSelectorOpen}
<ModelSelectorModal
{conversation}
on:modelSelected={e => changeModel(e.detail)}
on:close={() => (modelSelectorOpen = false)}
/>
{/if}
<div
class="{conversationIdx === 0
? 'mr-4 max-sm:ml-4'
: 'mx-4'} flex h-11 flex-none items-center gap-2 rounded-lg border border-gray-200/80 bg-white pr-2 pl-3 text-sm leading-none whitespace-nowrap shadow-xs *:flex-none max-sm:mt-4 dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
>
<Avatar orgName={nameSpace} size="md" />
<button class="flex-1! self-stretch text-left hover:underline" onclick={() => (modelSelectorOpen = true)}
>{conversation.model.id}</button
>
<button
class="borderdark:border-white/5 flex size-6 items-center justify-center rounded-sm bg-gray-50 text-xs hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600"
onclick={() => dispatch("close", conversation.model.id)}
>
✕
</button>
<button
class="borderdark:border-white/5 group relative flex size-6 items-center justify-center rounded-sm bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600"
>
<IconCog />
<GenerationConfig
bind:conversation
classNames="absolute top-7 min-w-[250px] z-10 right-3 bg-white dark:bg-gray-900 p-4 rounded-xl border border-gray-200 dark:border-gray-800 hidden group-focus:flex hover:flex"
/>
</button>
</div>
<div
class="{conversationIdx === 0
? 'mr-4 max-sm:ml-4'
: 'mx-4'} mt-2 h-11 text-sm leading-none whitespace-nowrap max-sm:mt-4"
>
<ProviderSelect
bind:conversation
class="rounded-lg border border-gray-200/80 bg-white dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
/>
</div>
|