Spaces:
Runtime error
Runtime error
File size: 2,766 Bytes
5c5d81b c670717 5c5d81b 9b4caaa 64cfbce 9b4caaa b1426d3 f48efbb 5c5d81b 5ac02d2 5c5d81b 5ac02d2 5c5d81b c670717 9b4caaa 5c5d81b 1a8c098 5c5d81b e7afcb4 5ac02d2 5c5d81b bbbc9a8 5c5d81b e30fa56 382cad0 73b6f4f 5c5d81b 97c4991 f39959c 5c5d81b 8c5a2cf 5ac02d2 5c5d81b 8c5a2cf 5c5d81b f39959c 5c5d81b ba9894c 97c4991 |
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 |
<script lang="ts">
import { isConversationWithHFModel, type Conversation, type Model } from "$lib/types.js";
import { createEventDispatcher } from "svelte";
import { models } from "$lib/state/models.svelte.js";
import IconCog from "~icons/carbon/settings";
import Avatar from "../avatar.svelte";
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: Model["id"]) {
const model = models.all.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} onModelSelect={changeModel} onClose={() => (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 model={conversation.model} orgName={nameSpace} size="md" />
<button
class="focus-outline 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>
{#if isConversationWithHFModel(conversation)}
<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>
{/if}
|