Spaces:
Paused
Paused
File size: 3,950 Bytes
55bd140 |
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 |
<script lang="ts">
import { getContext, onMount } from 'svelte';
import Modal from '../common/Modal.svelte';
import { shortcuts } from '$lib/shortcuts';
import { settings } from '$lib/stores';
import ShortcutItem from './ShortcutItem.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
type CategorizedShortcuts = {
[category: string]: {
left: Shortcut[];
right: Shortcut[];
};
};
const i18n = getContext('i18n');
export let show = false;
let categorizedShortcuts: CategorizedShortcuts = {};
let isMac = false;
onMount(() => {
isMac = /Mac/i.test(navigator.userAgent);
});
$: {
const allShortcuts = Object.values(shortcuts).filter((shortcut) => {
if (!shortcut.setting) {
return true;
}
return $settings[shortcut.setting.id] === shortcut.setting.value;
});
categorizedShortcuts = allShortcuts.reduce((acc, shortcut) => {
const category = shortcut.category;
if (!acc[category]) {
acc[category] = [];
}
acc[category].push(shortcut);
return acc;
}, {});
}
</script>
<Modal bind:show>
<div class="text-gray-700 dark:text-gray-100 px-5 py-4">
<div class="flex justify-between dark:text-gray-300 pb-2">
<div class="text-lg font-medium self-center">{$i18n.t('Keyboard Shortcuts')}</div>
<button class="self-center" on:click={() => (show = false)}>
<XMark className={'size-5'} />
</button>
</div>
{#each Object.entries(categorizedShortcuts) as [category, items], categoryIndex}
{#if categoryIndex > 0}
<div class="py-3">
<div class="w-full border-t dark:border-gray-850 border-gray-50" />
</div>
{/if}
<div class="flex justify-between dark:text-gray-300 pb-2">
<div class="text-base self-center">{$i18n.t(category)}</div>
</div>
<div class="flex flex-col md:flex-row w-full md:space-x-2 dark:text-gray-200">
<div class="flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
<div class=" grid grid-cols-1 sm:grid-cols-2 gap-2 gap-x-4 w-full">
<!-- {$i18n.t('Chat')} -->
<!-- {$i18n.t('Global')} -->
<!-- {$i18n.t('Input')} -->
<!-- {$i18n.t('Message')} -->
<!-- {$i18n.t('New Chat')} -->
<!-- {$i18n.t('New Temporary Chat')} -->
<!-- {$i18n.t('Delete Chat')} -->
<!-- {$i18n.t('Search')} -->
<!-- {$i18n.t('Open Settings')} -->
<!-- {$i18n.t('Show Shortcuts')} -->
<!-- {$i18n.t('Toggle Sidebar')} -->
<!-- {$i18n.t('Close Modal')} -->
<!-- {$i18n.t('Focus Chat Input')} -->
<!-- {$i18n.t('Accept Autocomplete Generation\nJump to Prompt Variable')} -->
<!-- {$i18n.t('Prevent File Creation')} -->
<!-- {$i18n.t('Attach File From Knowledge')} -->
<!-- {$i18n.t('Add Custom Prompt')} -->
<!-- {$i18n.t('Talk to Model')} -->
<!-- {$i18n.t('Generate Message Pair')} -->
<!-- {$i18n.t('Regenerate Response')} -->
<!-- {$i18n.t('Stop Generating')} -->
<!-- {$i18n.t('Edit Last Message')} -->
<!-- {$i18n.t('Copy Last Response')} -->
<!-- {$i18n.t('Copy Last Code Block')} -->
<!-- {$i18n.t('Only active when "Paste Large Text as File" setting is toggled on.')} -->
<!-- {$i18n.t('Only active when the chat input is in focus.')} -->
<!-- {$i18n.t('Only active when the chat input is in focus and an LLM is generating a response.')} -->
<!-- {$i18n.t('Only can be triggered when the chat input is in focus.')} -->
{#each items as shortcut}
<div class="col-span-1 flex items-start">
<ShortcutItem {shortcut} {isMac} />
</div>
{/each}
</div>
</div>
</div>
{/each}
</div>
</Modal>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.tabs::-webkit-scrollbar {
display: none;
}
.tabs {
-ms-overflow-style: none;
scrollbar-width: none;
}
input[type='number'] {
-moz-appearance: textfield;
}
</style>
|