Spaces:
Build error
Build error
File size: 4,219 Bytes
87a665c | 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 | <script lang="ts">
import { createEventDispatcher, getContext } from 'svelte';
const dispatch = createEventDispatcher();
const i18n = getContext('i18n');
import XMark from '$lib/components/icons/XMark.svelte';
import AdvancedParams from '../Settings/Advanced/AdvancedParams.svelte';
import Valves from '$lib/components/chat/Controls/Valves.svelte';
import FileItem from '$lib/components/common/FileItem.svelte';
import Collapsible from '$lib/components/common/Collapsible.svelte';
import { user, settings } from '$lib/stores';
export let models = [];
export let chatFiles = [];
export let params = {};
export let embed = false;
// Persist collapsible section open/close state
const getOpen = (key: string, fallback = true): boolean => {
const v = localStorage.getItem(`chatControls.${key}`);
return v !== null ? v === 'true' : fallback;
};
const setOpen = (key: string) => (open: boolean) => {
localStorage.setItem(`chatControls.${key}`, String(open));
};
let showFiles = getOpen('files');
let showValves = getOpen('valves', false);
let showSystemPrompt = getOpen('systemPrompt');
let showAdvancedParams = getOpen('advancedParams');
</script>
<div class=" dark:text-white">
{#if !embed}
<div class=" flex items-center justify-between dark:text-gray-100 mb-2">
<div class=" text-md self-center font-primary">{$i18n.t('Controls')}</div>
<button
class="self-center"
aria-label={$i18n.t('Close chat controls')}
on:click={() => {
dispatch('close');
}}
>
<XMark className="size-3.5" />
</button>
</div>
{/if}
{#if $user?.role === 'admin' || ($user?.permissions.chat?.controls ?? true)}
<div class=" dark:text-gray-200 text-sm py-0.5 px-0.5">
{#if chatFiles.length > 0}
<Collapsible
title={$i18n.t('Files')}
bind:open={showFiles}
onChange={setOpen('files')}
buttonClassName="w-full"
>
<div class="flex flex-col gap-1 mt-1.5" slot="content">
{#each chatFiles as file, fileIdx}
<FileItem
className="w-full"
item={file}
edit={true}
url={file?.url ? file.url : null}
name={file.name}
type={file.type}
size={file?.size}
dismissible={true}
small={true}
on:dismiss={() => {
// Remove the file from the chatFiles array
chatFiles.splice(fileIdx, 1);
chatFiles = chatFiles;
}}
on:click={() => {
console.log(file);
}}
/>
{/each}
</div>
</Collapsible>
<hr class="my-2 border-gray-50 dark:border-gray-700/10" />
{/if}
{#if $user?.role === 'admin' || ($user?.permissions.chat?.valves ?? true)}
<Collapsible
bind:open={showValves}
onChange={setOpen('valves')}
title={$i18n.t('Valves')}
buttonClassName="w-full"
>
<div class="text-sm" slot="content">
<Valves show={showValves} />
</div>
</Collapsible>
<hr class="my-2 border-gray-50 dark:border-gray-700/10" />
{/if}
{#if $user?.role === 'admin' || ($user?.permissions.chat?.system_prompt ?? true)}
<Collapsible
title={$i18n.t('System Prompt')}
bind:open={showSystemPrompt}
onChange={setOpen('systemPrompt')}
buttonClassName="w-full"
>
<div class="" slot="content">
<textarea
bind:value={params.system}
class="w-full text-xs outline-hidden resize-vertical {$settings.highContrastMode
? 'border-2 border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800 p-2.5'
: 'py-1.5 bg-transparent'}"
rows="4"
placeholder={$i18n.t('Enter system prompt')}
/>
</div>
</Collapsible>
<hr class="my-2 border-gray-50 dark:border-gray-700/10" />
{/if}
{#if $user?.role === 'admin' || ($user?.permissions.chat?.params ?? true)}
<Collapsible
title={$i18n.t('Advanced Params')}
bind:open={showAdvancedParams}
onChange={setOpen('advancedParams')}
buttonClassName="w-full"
>
<div class="text-sm mt-1.5" slot="content">
<div>
<AdvancedParams admin={$user?.role === 'admin'} custom={true} bind:params />
</div>
</div>
</Collapsible>
{/if}
</div>
{/if}
</div>
|