feat: replace settings with a full page
This commit is contained in:
@@ -1,138 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import GeneralSettings from '~/components/Settings/GeneralSettings.vue';
|
||||
import ProviderSettings from '~/components/Settings/ProviderSettings.vue';
|
||||
import ProviderSidebar from '~/components/Settings/ProviderSidebar.vue';
|
||||
import SystemAssistants from '~/components/Settings/SystemAssistants.vue';
|
||||
import AppearanceSettings from '~/components/Settings/AppearanceSettings.vue';
|
||||
import AIServiceProvider from '~/components/Settings/AIServiceProvider.vue';
|
||||
|
||||
const { providers } = await useModels();
|
||||
|
||||
const PAGES_CONFIG = {
|
||||
general: {
|
||||
label: 'General',
|
||||
icon: 'i-mynaui-cog-four',
|
||||
component: GeneralSettings
|
||||
},
|
||||
appearance: {
|
||||
label: 'Appearance',
|
||||
icon: 'i-tabler-palette',
|
||||
component: AppearanceSettings
|
||||
},
|
||||
providers: {
|
||||
label: 'AI Providers',
|
||||
icon: 'i-mynaui-api',
|
||||
component: ProviderSettings,
|
||||
sidebar: ProviderSidebar
|
||||
},
|
||||
systemAssistants: {
|
||||
label: 'System Assistants',
|
||||
icon: 'i-mynaui-sparkles',
|
||||
component: SystemAssistants
|
||||
},
|
||||
} as const;
|
||||
|
||||
const props = defineProps<{
|
||||
page: keyof typeof PAGES_CONFIG;
|
||||
params?: string;
|
||||
}>();
|
||||
|
||||
const { close, setOptions } = useDialog();
|
||||
|
||||
const mobileNavOpen = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', () => {
|
||||
if (window.innerWidth >= 768) {
|
||||
mobileNavOpen.value = false;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const handleNavigate = (page: string, params?: string) => {
|
||||
setOptions({ page: page as keyof typeof PAGES_CONFIG, params });
|
||||
mobileNavOpen.value = false;
|
||||
};
|
||||
|
||||
const runtimePage = computed(() => {
|
||||
// 1. Get the base config (e.g., 'providers' or 'general')
|
||||
const config = PAGES_CONFIG[props.page as keyof typeof PAGES_CONFIG] || PAGES_CONFIG.general;
|
||||
|
||||
// 2. Determine the actual component to show
|
||||
let component = config.component;
|
||||
let label = config.label as string;
|
||||
|
||||
if (props.page === 'providers' && props.params) {
|
||||
component = AIServiceProvider;
|
||||
const providerId = props.params;
|
||||
const provider = providers.value!.find(p => p.id === providerId);
|
||||
label = provider ? provider.name : 'Unknown Provider';
|
||||
}
|
||||
|
||||
return {
|
||||
...config,
|
||||
label,
|
||||
component,
|
||||
params: props.params,
|
||||
} as {
|
||||
label: string;
|
||||
icon: string;
|
||||
component: Component;
|
||||
sidebar?: Component;
|
||||
params: string;
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-2 flex flex-col md:flex-row h-screen md:h-[70vh] md:h-[70dvh] w-screen md:w-[85vw]">
|
||||
<nav :class="[
|
||||
'w-full md:w-64 flex-col gap-1 mr-2 overflow-y-auto text-xl md:text-base',
|
||||
// Mobile: hidden by default, shown as fixed overlay
|
||||
'hidden md:flex',
|
||||
mobileNavOpen ? '!flex fixed inset-y-0 left-0 z-15 bg-[var(--bg-base)] p-2 shadow-xl' : ''
|
||||
]">
|
||||
<!-- Mobile close button -->
|
||||
<button
|
||||
class="md:hidden flex items-center justify-center h-9 w-full rounded-lg @hover:bg-[var(--color-hover)] text-[var(--text-secondary)]"
|
||||
@click="mobileNavOpen = false">
|
||||
<span class="i-mynaui-x-solid mr-2"></span>
|
||||
Close
|
||||
</button>
|
||||
|
||||
<!-- If the page has a custom sidebar (for nested lists), show it; otherwise show default nav -->
|
||||
<component v-if="runtimePage?.sidebar" :is="runtimePage.sidebar" @navigate="handleNavigate"
|
||||
:params="props.params" />
|
||||
|
||||
<button v-else v-for="(config, id) in PAGES_CONFIG" :key="id" @click="handleNavigate(id)"
|
||||
:class="[page === id ? 'bg-[var(--color-hover)]' : '@hover:bg-[var(--color-hover)]', 'flex justify-between items-center shrink-0 px-1 rounded-lg transition-colors cursor-pointer h-9']">
|
||||
<div class="flex items-center gap-2 max-w-full flex-1">
|
||||
<span :class="['w-5 h-5 text-5', config.icon]"></span>
|
||||
{{ config.label }}
|
||||
</div>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- DYNAMIC CONTENT -->
|
||||
<main
|
||||
class="flex-1 flex flex-col overflow-y-hidden max-h-full h-full px-3 bg-[var(--bg-surface)] border rounded-none md:rounded-lg border-[var(--color-border)]">
|
||||
<header class="flex items-center justify-between pl-2 pb-2 pt-2 ">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
class="md:hidden flex items-center justify-center h-8 w-8 rounded-lg @hover:bg-[var(--color-hover)]"
|
||||
@click="mobileNavOpen = true">
|
||||
<span class="i-mynaui-menu text-5"></span>
|
||||
</button>
|
||||
<h2 class="text-lg font-semibold m-0 case-capital">{{ runtimePage.label }}</h2>
|
||||
</div>
|
||||
<button
|
||||
class="@hover:bg-[var(--color-hover)] p-1.5 rounded-md transition-colors duration-200 ease-[cubic-bezier(0,0.55,0.45,1)]"
|
||||
@click="close">
|
||||
<span class="i-mynaui-x-solid"></span>
|
||||
</button>
|
||||
</header>
|
||||
<component @navigate="handleNavigate" :is="runtimePage.component" :params="props.params" />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import Textbox from './Textbox.vue';
|
||||
import Settings from './Settings.vue';
|
||||
import QuickSwitcher from './QuickSwitcher.vue';
|
||||
|
||||
import { DialogType } from '~/composables/useDialog';
|
||||
@@ -11,7 +10,7 @@ const { addShortcut } = useKeyboardShortcuts();
|
||||
const unbindSettingsShortcut = addShortcut(['ctrl', ','], (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
openDialog(DialogType.Settings);
|
||||
navigateTo('/settings');
|
||||
});
|
||||
|
||||
const unbindQuickSwitcherShortcut = addShortcut(['ctrl', 'k'], (event) => {
|
||||
@@ -57,9 +56,7 @@ onUnmounted(() => {
|
||||
<div
|
||||
class="absolute w-full h-full md:w-auto md:h-auto max-w-6xl bg-[var(--bg-base)] rounded-none md:rounded-2xl shadow-2xl border border-[var(--color-border)] flex">
|
||||
<KeepAlive>
|
||||
<Settings v-if="page === DialogType.Settings" :page="data.page" :params="data.params" />
|
||||
|
||||
<Textbox v-else-if="page === DialogType.Textbox" v-bind="data" @confirm="confirm" @cancel="close" />
|
||||
<Textbox v-if="page === DialogType.Textbox" v-bind="data" @confirm="confirm" @cancel="close" />
|
||||
|
||||
<QuickSwitcher v-else-if="page === DialogType.QuickSwitcher" @close="close" />
|
||||
</KeepAlive>
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, nextTick } from 'vue';
|
||||
import { useFloating, offset, flip, shift, autoUpdate, size, hide } from '@floating-ui/vue';
|
||||
import { DialogType } from '~/composables/useDialog';
|
||||
import type { Model, ModelWithProvider, Provider, ProviderWithModels } from '~/composables/useModels';
|
||||
import { sortByReleaseDate } from '~/utils/sort';
|
||||
import RowVirtualizerFixed from './RowVirtualizerFixed.vue';
|
||||
|
||||
const { openDialog } = useDialog();
|
||||
const { allModels } = await useModels();
|
||||
const { addShortcut } = useKeyboardShortcuts();
|
||||
|
||||
@@ -17,6 +15,12 @@ const props = defineProps<{
|
||||
|
||||
const selectedModel = defineModel<ModelWithProvider | null>();
|
||||
|
||||
const openProviderSettings = async (providerId?: string) => {
|
||||
closeDropdown();
|
||||
|
||||
await navigateTo(providerId ? `/settings/providers/${providerId}` : '/settings/providers');
|
||||
};
|
||||
|
||||
const isOpen = ref(false);
|
||||
const dropdownButton = ref<HTMLElement | null>(null);
|
||||
const dropdownContent = ref<HTMLElement | null>(null);
|
||||
@@ -269,7 +273,7 @@ onUnmounted(() => {
|
||||
class="px-4 py-1.5 text-[13px] h-10.5 items-end font-medium text-[var(--text-secondary)] case-capital tracking-wider flex justify-between">
|
||||
{{ item.provider.name }}
|
||||
<button
|
||||
@click="closeDropdown(); openDialog(DialogType.Settings, undefined, { page: 'providers', params: item.provider.id })"
|
||||
@click="openProviderSettings(item.provider.id)"
|
||||
class="flex h-5 w-5 items-center justify-center @hover:bg-[var(--color-hover)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-cog-four text-4"></span>
|
||||
</button>
|
||||
@@ -295,7 +299,7 @@ onUnmounted(() => {
|
||||
<div class="p-1 border-t border-[var(--color-border)]">
|
||||
<button
|
||||
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--text-secondary)] @hover:text-[var(--text-primary)] @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
|
||||
@click="closeDropdown(); openDialog(DialogType.Settings, undefined, { page: 'providers' });">
|
||||
@click="openProviderSettings()">
|
||||
<span class="i-mynaui-cog-four text-4.5"></span>
|
||||
<span>Manage Providers</span>
|
||||
<span class="i-mynaui-arrow-right text-4 ml-auto"></span>
|
||||
|
||||
@@ -1,657 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { sortByReleaseDate } from '~/utils/sort';
|
||||
import { encryptData, decrypt, uint8ArrayToBase64, base64ToUint8Array } from '~/utils/crypto';
|
||||
import { type Model } from '~/types/model';
|
||||
import ModelItem from './ModelItem.vue';
|
||||
import RowVirtualizerDynamic from '../RowVirtualizerDynamic.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
params?: string;
|
||||
}>();
|
||||
|
||||
const { providers, updateProvider, createModel, updateModel } = await useModels();
|
||||
|
||||
const scrollContainerRef = ref<HTMLDivElement | null>(null);
|
||||
|
||||
const provider = computed(() => {
|
||||
if (props.params === undefined) return null;
|
||||
return providers.value!.find(p => p.id === props.params);
|
||||
});
|
||||
|
||||
watch(provider, async () => {
|
||||
if (!provider.value) return;
|
||||
await decryptApiKey();
|
||||
});
|
||||
|
||||
const apiKeyVisible = ref(false);
|
||||
|
||||
const apiKey = ref('');
|
||||
const apiProxyUrl = ref(provider.value?.config.apiProxyUrl ?? '');
|
||||
const modelSearch = ref('');
|
||||
|
||||
watch(() => props.params, () => {
|
||||
if (props.params === undefined) return;
|
||||
apiKey.value = provider.value?.config.apiKey ?? '';
|
||||
apiProxyUrl.value = provider.value?.config.apiProxyUrl ?? '';
|
||||
modelSearch.value = '';
|
||||
apiKeyVisible.value = false;
|
||||
|
||||
nextTick(() => {
|
||||
if (scrollContainerRef.value) {
|
||||
scrollContainerRef.value.scrollTo({ top: 0, behavior: 'instant' });
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
const decryptApiKey = async () => {
|
||||
if (!provider.value?.config.apiKey) {
|
||||
apiKey.value = '';
|
||||
return
|
||||
};
|
||||
|
||||
const key = await crypto.subtle.importKey(
|
||||
"jwk",
|
||||
JSON.parse(window.localStorage.getItem("encryptionKey")!),
|
||||
"AES-GCM",
|
||||
false,
|
||||
["encrypt", "decrypt"]
|
||||
);
|
||||
apiKey.value = await decrypt(key, base64ToUint8Array(provider.value!.config.apiKey));
|
||||
}
|
||||
|
||||
if (import.meta.client) {
|
||||
await decryptApiKey();
|
||||
};
|
||||
|
||||
const toggleProvider = async () => {
|
||||
await updateProvider(provider.value!.id, {
|
||||
enabled: !provider.value!.enabled,
|
||||
});
|
||||
};
|
||||
|
||||
let apiKeyTimeout: NodeJS.Timeout | undefined;
|
||||
|
||||
const updateApiKey = async (value: string) => {
|
||||
if (!provider.value) return;
|
||||
|
||||
const key = await crypto.subtle.importKey(
|
||||
"jwk",
|
||||
JSON.parse(window.localStorage.getItem("encryptionKey")!),
|
||||
"AES-GCM",
|
||||
false,
|
||||
["encrypt", "decrypt"]
|
||||
);
|
||||
const encypted = await encryptData(key, value);
|
||||
|
||||
if (apiKeyTimeout) {
|
||||
clearTimeout(apiKeyTimeout);
|
||||
}
|
||||
|
||||
apiKeyTimeout = setTimeout(async () => {
|
||||
await updateProvider(provider.value!.id, {
|
||||
config: {
|
||||
...provider.value!.config,
|
||||
apiKey: uint8ArrayToBase64(encypted),
|
||||
},
|
||||
});
|
||||
}, 700);
|
||||
};
|
||||
|
||||
let proxyUrlTimeout: NodeJS.Timeout | undefined;
|
||||
|
||||
const updateProxyUrl = async (value: string) => {
|
||||
if (!provider.value) return;
|
||||
|
||||
apiProxyUrl.value = value;
|
||||
|
||||
if (proxyUrlTimeout) {
|
||||
clearTimeout(proxyUrlTimeout);
|
||||
}
|
||||
|
||||
proxyUrlTimeout = setTimeout(async () => {
|
||||
await updateProvider(provider.value!.id, {
|
||||
config: {
|
||||
...provider.value!.config,
|
||||
apiProxyUrl: value,
|
||||
},
|
||||
});
|
||||
}, 700);
|
||||
};
|
||||
|
||||
const fetchingModels = ref(false);
|
||||
|
||||
const fetchModels = async () => {
|
||||
fetchingModels.value = true;
|
||||
|
||||
try {
|
||||
const response = await $fetch(`/api/provider/${provider.value!.id}/models`, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
providerApiKey: apiKey.value
|
||||
}
|
||||
});
|
||||
|
||||
// Simply update the local state with the returned models
|
||||
if (provider.value && response.models) {
|
||||
provider.value.models = response.models as Model[];
|
||||
}
|
||||
|
||||
// Optional: show a success toast
|
||||
} catch (error: any) {
|
||||
console.error('Failed to fetch models:', error);
|
||||
// handle error (toast, etc)
|
||||
} finally {
|
||||
fetchingModels.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const deleteModels = async () => {
|
||||
if (!provider.value) return;
|
||||
|
||||
provider.value!.models = [];
|
||||
await $fetch(`/api/provider/${provider.value!.id}/models`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
};
|
||||
|
||||
const enableAllModels = async () => {
|
||||
if (!provider.value) return;
|
||||
|
||||
const originalModels = provider.value.models;
|
||||
|
||||
await $fetch(`/api/provider/${provider.value.id}/models`, {
|
||||
method: 'PATCH',
|
||||
body: {
|
||||
enabled: true
|
||||
},
|
||||
onRequest() {
|
||||
if (provider.value === null || provider.value === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
provider.value.models = provider.value?.models.map(m => ({ ...m, enabled: true })) ?? [];
|
||||
},
|
||||
onResponseError() {
|
||||
if (provider.value === null || provider.value === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
provider.value.models = originalModels;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const disableAllModels = async () => {
|
||||
if (!provider.value) return;
|
||||
|
||||
const originalModels = provider.value.models;
|
||||
|
||||
await $fetch(`/api/provider/${provider.value.id}/models`, {
|
||||
method: 'PATCH',
|
||||
body: {
|
||||
enabled: false
|
||||
},
|
||||
onRequest() {
|
||||
if (provider.value === null || provider.value === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
provider.value.models = provider.value.models.map(m => ({ ...m, enabled: false }));
|
||||
},
|
||||
onResponseError() {
|
||||
if (provider.value === null || provider.value === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
provider.value.models = originalModels;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const enabledModels = computed(() =>
|
||||
filterModels(provider.value?.models.filter(m => m.enabled === true) as Model[] || [], modelSearch.value)
|
||||
.sort(sortByReleaseDate)
|
||||
)
|
||||
|
||||
const disabledModels = computed(() =>
|
||||
filterModels(provider.value?.models.filter(m => m.enabled === false) as Model[] || [], modelSearch.value)
|
||||
.sort(sortByReleaseDate)
|
||||
)
|
||||
|
||||
// ============================================
|
||||
// Custom Model Add/Edit Panel
|
||||
// ============================================
|
||||
|
||||
const showAddModelPanel = ref(false);
|
||||
const editingModel = ref<Model | null>(null);
|
||||
|
||||
interface ModelFormData {
|
||||
name: string;
|
||||
externalId: string;
|
||||
contextWindow: string;
|
||||
capabilities: string[];
|
||||
promptCost: string;
|
||||
completionCost: string;
|
||||
reasoning: boolean;
|
||||
tools: boolean;
|
||||
vision: boolean;
|
||||
}
|
||||
|
||||
const defaultFormData: ModelFormData = {
|
||||
name: '',
|
||||
externalId: '',
|
||||
contextWindow: '',
|
||||
capabilities: [],
|
||||
promptCost: '',
|
||||
completionCost: '',
|
||||
reasoning: false,
|
||||
tools: false,
|
||||
vision: false,
|
||||
};
|
||||
|
||||
const formData = ref<ModelFormData>({ ...defaultFormData });
|
||||
|
||||
const availableCapabilities = ['reasoning', 'tools', 'vision'];
|
||||
|
||||
const toggleCapability = (cap: string) => {
|
||||
const idx = formData.value.capabilities.indexOf(cap);
|
||||
if (idx === -1) {
|
||||
formData.value.capabilities.push(cap);
|
||||
} else {
|
||||
formData.value.capabilities.splice(idx, 1);
|
||||
}
|
||||
|
||||
if (cap === 'reasoning') {
|
||||
formData.value.reasoning = formData.value.capabilities.includes('reasoning');
|
||||
} else if (cap === 'tools') {
|
||||
formData.value.tools = formData.value.capabilities.includes('tools');
|
||||
} else if (cap === 'vision') {
|
||||
formData.value.vision = formData.value.capabilities.includes('vision');
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
formData.value = { ...defaultFormData };
|
||||
formData.value.capabilities = [];
|
||||
editingModel.value = null;
|
||||
};
|
||||
|
||||
const openAddPanel = () => {
|
||||
resetForm();
|
||||
showAddModelPanel.value = true;
|
||||
};
|
||||
|
||||
const openEditPanel = (model: Model) => {
|
||||
editingModel.value = model;
|
||||
formData.value = {
|
||||
name: model.name || '',
|
||||
externalId: model.externalId || '',
|
||||
contextWindow: model.contextWindow?.toString() || '',
|
||||
capabilities: model.capabilities,
|
||||
promptCost: model.cost?.prompt || '',
|
||||
completionCost: model.cost?.completion || '',
|
||||
reasoning: model.capabilities.includes('reasoning'),
|
||||
tools: model.capabilities.includes('tools'),
|
||||
vision: model.capabilities.includes('vision'),
|
||||
};
|
||||
showAddModelPanel.value = true;
|
||||
};
|
||||
|
||||
const { user } = useAuth();
|
||||
|
||||
// Preview model that reacts to form changes
|
||||
const previewModel = computed(() => {
|
||||
if (!formData.value.name || !formData.value.externalId) return null;
|
||||
|
||||
const inputModalities = ['text'];
|
||||
const outputModalities = ['text'];
|
||||
|
||||
if (formData.value.capabilities.includes('vision')) {
|
||||
inputModalities.push('image');
|
||||
}
|
||||
|
||||
return {
|
||||
userId: user.value?.id!,
|
||||
id: editingModel.value?.id || 'preview',
|
||||
providerId: provider.value?.id || '',
|
||||
name: formData.value.name,
|
||||
externalId: formData.value.externalId || 'model/id',
|
||||
cost: {
|
||||
prompt: formData.value.promptCost ? formatMoney(formData.value.promptCost) : undefined,
|
||||
completion: formData.value.completionCost ? formatMoney(formData.value.completionCost) : undefined,
|
||||
},
|
||||
inputModalities,
|
||||
outputModalities,
|
||||
capabilities: formData.value.capabilities.filter(c => c !== 'vision') as any,
|
||||
contextWindow: formData.value.contextWindow ? parseInt(formData.value.contextWindow) : null,
|
||||
supportedParameters: [],
|
||||
isCustom: true,
|
||||
enabled: true,
|
||||
provider: provider.value!,
|
||||
releasedAt: null,
|
||||
} as Model;
|
||||
});
|
||||
|
||||
const saveCustomModel = async () => {
|
||||
if (!provider.value || !formData.value.name || !formData.value.externalId) return;
|
||||
|
||||
const { id, ...previewModelWithoutId } = previewModel.value!;
|
||||
if (editingModel.value) {
|
||||
await updateModel(editingModel.value!.id, { ...previewModelWithoutId });
|
||||
} else {
|
||||
await createModel(previewModelWithoutId as Model);
|
||||
}
|
||||
|
||||
showAddModelPanel.value = false;
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const cancelPanel = () => {
|
||||
showAddModelPanel.value = false;
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const formatMoney = (value: string) => {
|
||||
// ensure that there are two decimal places MINIMUM I WILL STRANGLE YOU SO HELP ME GOD
|
||||
let [integerPart, fractionalPart] = value.split('.');
|
||||
|
||||
if (fractionalPart === undefined || fractionalPart === '') {
|
||||
fractionalPart = '00';
|
||||
}
|
||||
|
||||
if (fractionalPart.length === 1) {
|
||||
fractionalPart += '0';
|
||||
}
|
||||
|
||||
if (integerPart!.length === 0) {
|
||||
integerPart = '0';
|
||||
}
|
||||
|
||||
return `${integerPart}.${fractionalPart}`;
|
||||
}
|
||||
|
||||
const isFormValid = computed(() => {
|
||||
return formData.value.name.trim() && formData.value.externalId.trim();
|
||||
});
|
||||
|
||||
defineEmits(['navigate']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="scrollContainerRef"
|
||||
class="flex flex-col gap-4 py-4 overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]"
|
||||
v-if="provider">
|
||||
<div class="flex flex-row justify-between gap-16">
|
||||
<label class="whitespace-nowrap" for="provider-api-key">Enabled</label>
|
||||
<Slider :checked="provider.enabled" @click.stop="toggleProvider()" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-between gap-16">
|
||||
<label class="whitespace-nowrap" for="provider-api-key">API Key</label>
|
||||
<div class="text-sm font-mono flex flex-row rounded-md bg-[var(--bg-container)] items-center gap-1 w-7/10">
|
||||
<input class="placeholder:text-[var(--text-tertiary)] w-full p-0 pl-2 py-1 bg-transparent"
|
||||
:type="apiKeyVisible ? 'text' : 'password'" id="provider-api-key" :value="apiKey"
|
||||
autocomplete="false" spellcheck="false"
|
||||
@input="updateApiKey(($event.target! as HTMLInputElement).value)" />
|
||||
<button @click="apiKeyVisible = !apiKeyVisible"
|
||||
class="text-sm p-2 text-[var(--text-secondary)] @hover:text-[var(--text-primary)]">
|
||||
<span class="text-4" :class="apiKeyVisible ? 'i-mynaui-eye' : 'i-mynaui-eye-slash'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-between gap-16">
|
||||
<label class="whitespace-nowrap" for="provider-api-key">API Proxy URL</label>
|
||||
<div class="text-sm font-mono flex flex-row rounded-md bg-[var(--bg-container)] items-center gap-1 w-7/10">
|
||||
<input :placeholder="provider.defaultBaseUrl || ''"
|
||||
class="placeholder:text-[var(--text-tertiary)] w-full px-2 py-1 bg-transparent" type="text"
|
||||
id="provider-proxy-url" :value="apiProxyUrl"
|
||||
@input="updateProxyUrl(($event.target! as HTMLInputElement).value)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-center text-xs">
|
||||
<p class="text-[var(--text-secondary)]">
|
||||
<span class="i-mynaui-lock inline-block"></span> Your API key is encrypted using
|
||||
<a href="https://datatracker.ietf.org/doc/html/draft-ietf-avt-srtp-aes-gcm-01">AES-GCM</a> encryption.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="pt-5 justify-between w-full flex flex-wrap gap-y-1 items-center">
|
||||
<h4 class="whitespace-nowrap m-0 flex gap-x-2 items-start">
|
||||
Model List
|
||||
<span class="text-sm text-[var(--text-secondary)] font-normal text-xs flex items-center gap-1">
|
||||
{{ provider?.models.length }} models available
|
||||
<Dropdown placement="bottom">
|
||||
<template #default="{ toggle, setRef }">
|
||||
<button :ref="setRef" @click="toggle"
|
||||
class="p-0.5 @hover:bg-[var(--color-hover)] rounded transition-colors duration-200">
|
||||
<span class="i-mynaui-x-solid"></span>
|
||||
</button>
|
||||
</template>
|
||||
<template #dropdown="{ close }">
|
||||
<div class="px-3 py-2.5 w-64 flex flex-col gap-3">
|
||||
<p class="text-sm text-[var(--text-primary)] m-0 leading-snug text-center">
|
||||
Are you sure you want to delete all models? This will remove
|
||||
<strong>all</strong> fetched models for this provider
|
||||
</p>
|
||||
<div class="flex gap-2 justify-end">
|
||||
<button @click="close()"
|
||||
class="px-3 py-1.5 text-sm text-[var(--text-secondary)] @hover:text-[var(--text-primary)] @hover:bg-[var(--color-hover)] rounded-md transition-colors duration-200 border border-[var(--color-border)] @hover:border-transparent">
|
||||
Cancel
|
||||
</button>
|
||||
<button @click="deleteModels(); close()"
|
||||
class="px-3 py-1.5 text-sm bg-red-500 text-white rounded-md @hover:bg-red-600 transition-colors duration-200">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</span>
|
||||
</h4>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center justify-center px-2 py-1 bg-[var(--bg-container)] text-xs rounded-md">
|
||||
<input class="placeholder:text-[var(--text-tertiary)] p-0 bg-transparent" v-model="modelSearch"
|
||||
type="text" placeholder="Search models..." />
|
||||
<button :class="modelSearch.length > 0 ? 'visible' : 'invisible'" @click="modelSearch = ''"
|
||||
class="right-1 @hover:bg-[var(--color-hover)] rounded transition-colors duration-200 p-0.5">
|
||||
<span class="i-mynaui-x-solid text-3.5 block text-[var(--text-secondary)]"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button @click="fetchModels"
|
||||
class="whitespace-nowrap flex bg-[var(--bg-container)] @hover:bg-[var(--color-hover)] text-sm rounded-md items-center px-2 py-0.5 gap-2 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-refresh" :class="{ 'animate-rotate': fetchingModels }"></span>
|
||||
fetch models
|
||||
</button>
|
||||
|
||||
<div class="flex">
|
||||
<button @click="openAddPanel"
|
||||
class="whitespace-nowrap flex bg-[var(--bg-container)] @hover:bg-[var(--color-hover)] text-sm rounded-l-md items-center px-2 py-0.5 gap-2 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-plus-solid text-5"></span>
|
||||
</button>
|
||||
|
||||
<div class="relative">
|
||||
<Dropdown placement="bottom-end">
|
||||
<template #default="{ toggle, setRef }">
|
||||
<button :ref="setRef" @click="toggle"
|
||||
class="whitespace-nowrap flex bg-[var(--bg-container)] @hover:bg-[var(--color-hover)] text-sm rounded-r-md items-center px-1 py-0.5 gap-2 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-dots-vertical text-5"></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #dropdown="{ close }">
|
||||
<button @click="enableAllModels(); close()"
|
||||
class="truncate flex items-center gap-2 w-full text-left px-3 py-1.5 items-center gap-1 @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150">
|
||||
<span class="text-5 i-mynaui-toggle-right-solid"></span>
|
||||
Enable All
|
||||
</button>
|
||||
<button @click="disableAllModels(); close()"
|
||||
class="truncate flex items-center gap-2 w-full text-left px-3 py-1.5 items-center gap-1 @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150">
|
||||
<span class="text-5 i-mynaui-toggle-left"></span>
|
||||
Disable All
|
||||
</button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit Custom Model Panel -->
|
||||
<div class="mt-2">
|
||||
<!-- Expansion panel with grid-template-rows animation -->
|
||||
<div class="grid transition-[grid-template-rows] duration-300 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
:class="showAddModelPanel ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'">
|
||||
<div class="overflow-hidden">
|
||||
<div
|
||||
class="pt-3 pb-4 px-3 bg-[var(--bg-container)] border border-[var(--color-border)] rounded-lg mt-2">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h5 class="text-sm font-medium text-[var(--text-primary)] m-0">
|
||||
{{ editingModel ? 'Edit Custom Model' : 'Add Custom Model' }}
|
||||
</h5>
|
||||
<button @click="cancelPanel"
|
||||
class="p-1 @hover:bg-[var(--color-hover)] rounded transition-colors duration-200">
|
||||
<span class="i-mynaui-x text-4 text-[var(--text-secondary)]"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<!-- Model Name -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-secondary)]">Model Name</label>
|
||||
<input v-model="formData.name" type="text" placeholder="e.g., GPT-4 Turbo"
|
||||
class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
|
||||
</div>
|
||||
|
||||
<!-- Model ID -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-secondary)]">Model ID</label>
|
||||
<input v-model="formData.externalId" type="text" placeholder="e.g., gpt-4-turbo"
|
||||
class="w-full px-3 py-2 text-sm font-mono bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
|
||||
</div>
|
||||
|
||||
<!-- Context Window -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-secondary)]">Context Window (tokens)</label>
|
||||
<input v-model="formData.contextWindow" type="text" placeholder="e.g., 128000"
|
||||
class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
|
||||
</div>
|
||||
|
||||
<!-- Capabilities -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-secondary)]">Capabilities</label>
|
||||
<div class="flex gap-2">
|
||||
<button v-for="cap in availableCapabilities" :key="cap"
|
||||
@click="toggleCapability(cap)"
|
||||
class="px-3 py-1.5 text-xs rounded-md border transition-colors duration-200 capitalize"
|
||||
:class="formData.capabilities.includes(cap)
|
||||
? 'bg-[var(--color-accent)] text-white border-[var(--color-accent)]'
|
||||
: 'bg-[var(--bg-surface)] border-[var(--color-border)] text-[var(--text-secondary)] @hover:border-[var(--color-accent)]'">
|
||||
{{ cap }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-secondary)]">Prompt Cost ($/1M
|
||||
tokens)</label>
|
||||
<input v-model="formData.promptCost" type="text" placeholder="e.g., 10.00"
|
||||
class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-[var(--text-secondary)]">Completion Cost ($/1M
|
||||
tokens)</label>
|
||||
<input v-model="formData.completionCost" type="text" placeholder="e.g., 30.00"
|
||||
class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview Section -->
|
||||
<div v-if="previewModel" class="mt-3 pt-3 border-t border-[var(--color-border)]">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="i-mynaui-eye text-3.5 text-[var(--text-secondary)]"></span>
|
||||
<span class="text-xs text-[var(--text-secondary)]">Preview</span>
|
||||
</div>
|
||||
<div
|
||||
class="p-3 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md">
|
||||
<ModelInfo :details="true" :model="previewModel!" :show-edit="false"
|
||||
:show-cost="true" :show-external-id="true" :show-release-date="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div
|
||||
class="flex items-center justify-between pt-2 mt-1 border-t border-[var(--color-border)]">
|
||||
<span class="text-xs text-[var(--text-tertiary)]">
|
||||
{{
|
||||
editingModel
|
||||
? 'Changes will be saved to existing model'
|
||||
: 'Creates a new custom model'
|
||||
}}
|
||||
</span>
|
||||
<div class="flex gap-2">
|
||||
<button @click="cancelPanel"
|
||||
class="px-3 py-1.5 text-sm text-[var(--text-secondary)] @hover:text-[var(--text-primary)] @hover:bg-[var(--color-hover)] rounded-md transition-colors duration-200">
|
||||
Cancel
|
||||
</button>
|
||||
<button @click="saveCustomModel" :disabled="!isFormValid"
|
||||
class="px-3 py-1.5 text-sm bg-[var(--color-accent)] text-white rounded-md @hover:opacity-90 transition-opacity duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
{{ editingModel ? 'Save Changes' : 'Add Model' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<div v-if="provider?.models?.length === 0" class="flex flex-row items-center justify-center gap-2 mt-2">
|
||||
<span class="i-mynaui-info-circle text-4"></span>
|
||||
<span class="text-sm text-[var(--text-secondary)]">
|
||||
No models found
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ClientOnly v-else>
|
||||
<div v-if="enabledModels.length > 0" class="flex flex-col gap-1">
|
||||
<span class="text-sm text-[var(--text-secondary)]">
|
||||
Enabled
|
||||
</span>
|
||||
<div class="flex flex-col gap-1">
|
||||
<RowVirtualizerDynamic :items="enabledModels" key-field="id"
|
||||
:scroll-element="scrollContainerRef" :min-item-size="68" :overscan="20">
|
||||
<template v-slot="{ item: model }">
|
||||
<ModelItem :model="model" @edit="openEditPanel" />
|
||||
</template>
|
||||
</RowVirtualizerDynamic>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="disabledModels.length > 0" class="flex flex-col gap-1">
|
||||
<span class="text-sm text-[var(--text-secondary)]">
|
||||
Disabled
|
||||
</span>
|
||||
<div class="flex flex-col gap-1">
|
||||
<RowVirtualizerDynamic :items="disabledModels" key-field="id"
|
||||
:scroll-element="scrollContainerRef" :min-item-size="68" :overscan="20">
|
||||
<template v-slot="{ item: model }">
|
||||
<ModelItem :model="model" @edit="openEditPanel" />
|
||||
</template>
|
||||
</RowVirtualizerDynamic>
|
||||
</div>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,81 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const { colorScheme, settings, updateSettings } = await useUserSettings();
|
||||
|
||||
const accents = ['violet', 'volcano', 'lime', 'sky', 'coral', 'emerald', 'amber', 'rose', 'cyan', 'indigo', 'magenta'];
|
||||
const neutrals = ['zinc', 'slate', 'obsidian'];
|
||||
|
||||
const updateAccent = (accent: string) => {
|
||||
updateSettings({ appearance: { accent } });
|
||||
};
|
||||
|
||||
const updateNeutral = (neutral: string) => {
|
||||
updateSettings({ appearance: { neutral } });
|
||||
};
|
||||
|
||||
const updateHinting = (e: Event) => {
|
||||
const hinting = parseInt((e.target as HTMLInputElement).value);
|
||||
updateSettings({ appearance: { hinting } });
|
||||
};
|
||||
|
||||
defineEmits(['navigate']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col gap-6 py-4 overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]">
|
||||
<div class="flex flex-row items-center justify-between gap-2">
|
||||
<h4 class="font-medium">Theme</h4>
|
||||
<div class="flex gap-2">
|
||||
<button @click="updateSettings({ appearance: { colorScheme: 'system' } })"
|
||||
class="flex items-center gap-1 px-1 rounded-md @hover:bg-[var(--color-hover)] transition-[background-color] duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
:class="colorScheme.preference.value === 'system' ? 'bg-[var(--color-hover)]' : ''">
|
||||
<span class="i-tabler-device-desktop text-4"></span>
|
||||
<span>System</span>
|
||||
</button>
|
||||
<button @click="updateSettings({ appearance: { colorScheme: 'dark' } })"
|
||||
class="flex items-center gap-1 px-1 rounded-md @hover:bg-[var(--color-hover)] transition-[background-color] duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
:class="colorScheme.preference.value === 'dark' ? 'bg-[var(--color-hover)]' : ''">
|
||||
<span class="i-mynaui-moon text-4"></span>
|
||||
<span>Dark</span>
|
||||
</button>
|
||||
<button @click="updateSettings({ appearance: { colorScheme: 'light' } })"
|
||||
class="flex items-center gap-1 px-1 rounded-md @hover:bg-[var(--color-hover)] transition-[background-color] duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
:class="colorScheme.preference.value === 'light' ? 'bg-[var(--color-hover)]' : ''">
|
||||
<span class="i-mynaui-sun text-4"></span>
|
||||
<span>Light</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<h4 class="text-sm font-medium">Accent Color</h4>
|
||||
<div class="grid grid-cols-5 gap-2">
|
||||
<button v-for="accent in accents" :key="accent" @click="updateAccent(accent)"
|
||||
class="h-8 rounded border-2 @hover:scale-105 active:scale-95 transition-all duration-200 ease-[cubic-bezier(0.33,_1,_0.68,_1)]"
|
||||
:class="[
|
||||
settings.appearance.accent === accent ? 'dark:border-white/70 border-black/70' : 'border-transparent'
|
||||
]" :style="`background-color: var(--accent-${accent})`" :title="accent" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<h4 class="text-sm font-medium">Neutral Color</h4>
|
||||
<div class="grid grid-cols-5 gap-2">
|
||||
<button v-for="neutral in neutrals" :key="neutral" @click="updateNeutral(neutral)"
|
||||
class="h-8 rounded border-2 @hover:scale-105 active:scale-95 transition-all duration-200 ease-[cubic-bezier(0.33,_1,_0.68,_1)]"
|
||||
:class="[
|
||||
settings.appearance.neutral === neutral ? 'border-[var(--color-accent)]' : 'border-transparent @hover:border-zinc-500'
|
||||
]" :style="`background-color: var(--palette-${neutral}-200)`" :title="neutral" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<h4 class="text-sm font-medium">Accent Hinting</h4>
|
||||
<span class="text-xs text-zinc-500">{{ settings.appearance.hinting }}%</span>
|
||||
</div>
|
||||
<input type="range" min="0" max="100" step="1" :value="settings.appearance.hinting" @input="updateHinting"
|
||||
class="accent-[var(--color-accent)]" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,11 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
params?: string;
|
||||
}>();
|
||||
|
||||
defineEmits(['navigate']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
hi
|
||||
</template>
|
||||
@@ -1,75 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { providerIcons } from '~/utils/model-mapping';
|
||||
|
||||
const { providers, updateProvider } = await useModels();
|
||||
|
||||
const props = defineProps<{
|
||||
params?: string;
|
||||
}>();
|
||||
|
||||
if (providers.value === undefined) throw new Error('Providers not loaded');
|
||||
|
||||
const toggleProvider = async (id: string) => {
|
||||
const provider = providers.value!.find(p => p.id === id);
|
||||
if (!provider) return;
|
||||
|
||||
await updateProvider(provider.id, {
|
||||
enabled: !provider.enabled,
|
||||
});
|
||||
};
|
||||
|
||||
defineEmits(['navigate']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col gap-1 py-4 overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]">
|
||||
<h2 class="text-lg font-semibold flex items-center gap-2">
|
||||
Enabled <span class="text-sm bg-[var(--bg-container)] px-2 rounded-md py-0.5 text-[var(--text-secondary)]">
|
||||
{{providers?.filter(p => p.enabled).length}}
|
||||
</span>
|
||||
</h2>
|
||||
<div
|
||||
class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(max(240px,_calc((100%_-_16px_*_(3_-_1))_/_3)),_1fr))]">
|
||||
<button @click="$emit('navigate', 'providers', p.id)" v-for="p in providers?.filter(p => p.enabled)"
|
||||
:key="p.id"
|
||||
class="flex flex-col h-44 p-4 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg border border-[var(--color-border)] @hover:border-[var(--color-border-active)]">
|
||||
<div class="flex flex-col flex-grow">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
|
||||
class="w-8 h-8 text-[var(--text-primary)]" />
|
||||
<h3 class="text-md font-semibold text-start case-capital">{{ p.name }}</h3>
|
||||
</div>
|
||||
<hr class="border-t border-[var(--color-border)]" />
|
||||
</div>
|
||||
<div class="flex items-center justify-end">
|
||||
<Slider :checked="p.enabled" @click.stop="toggleProvider(p.id)" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h2 class="text-lg font-semibold flex items-center gap-2">
|
||||
Disabled <span class="text-sm bg-[var(--bg-container)] px-2 rounded-md py-0.5 text-[var(--text-secondary)]">
|
||||
{{providers?.filter(p => !p.enabled).length}}
|
||||
</span>
|
||||
</h2>
|
||||
<div
|
||||
class="grid gap-4 grid-cols-[repeat(auto-fill,_minmax(max(240px,_calc((100%_-_16px_*_(3_-_1))_/_3)),_1fr))]">
|
||||
<button @click="$emit('navigate', 'providers', p.id)" v-for="p in providers?.filter(p => !p.enabled)"
|
||||
:key="p.id"
|
||||
class="flex flex-col h-44 p-4 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg border border-[var(--color-border)] @hover:border-[var(--color-border-active)]">
|
||||
<div class="flex flex-col flex-grow">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
|
||||
class="w-8 h-8 text-[var(--text-primary)]" />
|
||||
<h3 class="text-md font-semibold text-start case-capital">{{ p.name }}</h3>
|
||||
</div>
|
||||
<hr class="border-t border-[var(--color-border)]" />
|
||||
</div>
|
||||
<div class="flex items-center justify-end">
|
||||
<Slider :checked="p.enabled" @click.stop="toggleProvider(p.id)" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,47 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { providerIcons } from '~/utils/model-mapping';
|
||||
|
||||
defineProps<{
|
||||
params?: string;
|
||||
}>();
|
||||
const { providers } = await useModels();
|
||||
|
||||
defineEmits(['navigate']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-1 overflow-auto">
|
||||
<button @click="$emit('navigate', 'general')"
|
||||
class="flex items-center gap-2 p-2 rounded-lg @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-chevron-left md:text-4"></span> Back to General
|
||||
</button>
|
||||
|
||||
<button @click="$emit('navigate', 'providers')"
|
||||
class="flex items-center gap-2 p-2 rounded-lg @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-envelope-open md:text-4"></span> All
|
||||
</button>
|
||||
|
||||
<div class="px-2 py-4 font-bold md:text-xs text-sm uppercase opacity-50">Enabled Providers</div>
|
||||
|
||||
<button v-for="p in providers?.filter(p => p.enabled)" :key="p.id" @click="$emit('navigate', 'providers', p.id)"
|
||||
:class="['case-capital flex items-center justify-between p-2 @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === params ? 'bg-[var(--color-hover)]' : '']">
|
||||
<div class="flex items-center gap-2">
|
||||
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
|
||||
class="h-6 w-6 md:w-4 md:h-4 text-[var(--text-primary)]" />
|
||||
<span>{{ p.name }}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="px-2 py-4 font-bold md:text-xs text-sm uppercase opacity-50">Disabled Providers</div>
|
||||
|
||||
<button v-for="p in providers?.filter(p => !p.enabled)" :key="p.id"
|
||||
@click="$emit('navigate', 'providers', p.id)"
|
||||
:class="['case-capital flex items-center justify-between p-2 @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === params ? 'bg-[var(--color-hover)]' : '']">
|
||||
<div class="flex items-center gap-2">
|
||||
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
|
||||
class="h-6 w-6 md:w-4 md:h-4 h-full text-[var(--text-primary)]" />
|
||||
<span>{{ p.name }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,55 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { ModelWithProvider } from '~/composables/useModels';
|
||||
|
||||
const { providers, allModels } = await useModels();
|
||||
const { settings, updateSettings } = await useUserSettings();
|
||||
|
||||
const toggle = async () => {
|
||||
const current = settings.value.systemAssistants.rename;
|
||||
await updateSettings({
|
||||
systemAssistants: {
|
||||
rename: {
|
||||
...current,
|
||||
enabled: !current.enabled
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const updateModel = async (model: ModelWithProvider | undefined | null) => {
|
||||
const current = settings.value.systemAssistants.rename;
|
||||
await updateSettings({
|
||||
systemAssistants: {
|
||||
rename: {
|
||||
...current,
|
||||
modelId: model?.id ?? null
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getModel = (id: string | null | undefined) => {
|
||||
if (!id) return null;
|
||||
|
||||
return allModels.value.find(m => m.id === id);
|
||||
}
|
||||
|
||||
defineEmits(['navigate']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col gap-4 py-4 flex-grow overflow-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]">
|
||||
<div class="flex flex-col">
|
||||
<label for="slider-rename" class="flex justify-between gap-4 items-center">
|
||||
<h4 class="case-capital">Rename</h4>
|
||||
<Slider id="slider-rename" :checked="settings.systemAssistants.rename?.enabled ?? false"
|
||||
@click="toggle" />
|
||||
</label>
|
||||
<div class="flex-1 justify-between gap-4 items-center">
|
||||
<ModelSelector :providers="providers" :model-value="getModel(settings.systemAssistants.rename?.modelId)"
|
||||
@update:model-value="updateModel" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import { DialogType } from '~/composables/useDialog';
|
||||
|
||||
const { user, signOut } = useAuth();
|
||||
|
||||
// to prevent the user details from going blank for a
|
||||
@@ -16,10 +14,14 @@ watch(user, () => {
|
||||
cachedUser.value = user.value;
|
||||
})
|
||||
|
||||
const { openDialog } = useDialog();
|
||||
|
||||
const { isHovered } = useSidenavContext();
|
||||
|
||||
const openSettings = async () => {
|
||||
dropdownOpen.value = false;
|
||||
|
||||
await navigateTo('/settings');
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
await signOut();
|
||||
|
||||
@@ -31,11 +33,7 @@ const handleLogout = async () => {
|
||||
<header class="flex items-center justify-between overflow-hidden">
|
||||
<button @click="dropdownOpen = !dropdownOpen"
|
||||
class="flex gap-1 pr-1 items-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<div
|
||||
:class="['w-9 h-9 md:w-7 md:h-7 flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-border)]']">
|
||||
<img v-if="cachedUser?.image" :src="cachedUser.image" class="w-full h-full object-cover" />
|
||||
<span v-else class="w-5.5 h-5.5 md:h-4 md:w-4 i-mynaui-user text-[var(--text-secondary)]"></span>
|
||||
</div>
|
||||
<UserAvatar :user="cachedUser" class="w-9 h-9 md:w-7 md:h-7 rounded-lg md:text-sm" />
|
||||
<span
|
||||
class="md:text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
|
||||
{{ cachedUser?.name }}
|
||||
@@ -55,7 +53,7 @@ const handleLogout = async () => {
|
||||
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
|
||||
<div v-if="dropdownOpen" v-click-outside="() => dropdownOpen = false"
|
||||
class="w-full top-full text-sm mt-1 absolute z-30 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 flex flex-col gap-2">
|
||||
<button @click="dropdownOpen = false; openDialog(DialogType.Settings)"
|
||||
<button @click="openSettings"
|
||||
class="text-left px-3 py-1.5 items-center gap-1 @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-cog-four text-4.5"></span>
|
||||
<span>Settings</span>
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const returnTo = useState('settings:returnTo', () => '/');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="flex items-center rounded-lg overflow-hidden flex-1 min-w-0">
|
||||
<NuxtLink :to="returnTo" aria-label="Back"
|
||||
class="flex items-center gap-1 p-1.5 pr-2.5 @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg decoration-none transition-inherit">
|
||||
<span class="i-mynaui-chevron-left text-5.5 md:text-4.5 text-[var(--text-secondary)]"></span>
|
||||
<span
|
||||
class="md:text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
|
||||
Settings
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</header>
|
||||
</template>
|
||||
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import { providerIcons } from '~/utils/model-mapping';
|
||||
|
||||
const route = useRoute();
|
||||
const { providers } = await useModels();
|
||||
|
||||
const groups = [
|
||||
{
|
||||
label: 'Account',
|
||||
items: [
|
||||
{ to: '/settings/profile', name: 'Profile', icon: 'i-mynaui-user' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'App',
|
||||
items: [
|
||||
{ to: '/settings/general', name: 'General', icon: 'i-mynaui-cog-four' },
|
||||
{ to: '/settings/appearance', name: 'Appearance', icon: 'i-tabler-palette' },
|
||||
{ to: '/settings/providers', name: 'AI Providers', icon: 'i-mynaui-api' },
|
||||
{ to: '/settings/assistants', name: 'System Assistants', icon: 'i-mynaui-sparkles' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const inProviders = computed(() => route.path.startsWith('/settings/providers'));
|
||||
|
||||
// enabled providers first, same order the provider list uses
|
||||
const sortedProviders = computed(() => [
|
||||
...providers.value.filter(p => p.enabled),
|
||||
...providers.value.filter(p => !p.enabled),
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav aria-label="Settings" class="flex flex-col gap-1 overflow-auto">
|
||||
<template v-for="group in groups" :key="group.label">
|
||||
<div class="px-2 pt-3 pb-0.5 text-sm md:text-xs font-medium uppercase tracking-wider">
|
||||
{{ group.label }}
|
||||
</div>
|
||||
|
||||
<template v-for="item in group.items" :key="item.to">
|
||||
<SidenavItem :to="item.to" :name="item.name" :icon="item.icon" :active="route.path === item.to" />
|
||||
|
||||
<!-- the providers are listed under their section while it is open -->
|
||||
<div v-if="item.to === '/settings/providers' && inProviders" class="flex flex-col gap-1 pl-4">
|
||||
<NuxtLink v-for="p in sortedProviders" :key="p.id" :to="`/settings/providers/${p.id}`" :class="[
|
||||
'case-capital decoration-none flex items-center gap-2 shrink-0 px-2 h-9 rounded-lg transition-colors',
|
||||
route.path === `/settings/providers/${p.id}`
|
||||
? 'text-[var(--text-primary)] bg-[var(--color-hover)]'
|
||||
: 'text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]',
|
||||
p.enabled ? '' : 'opacity-50',
|
||||
]">
|
||||
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
|
||||
class="h-6 w-6 md:w-4 md:h-4 flex-shrink-0 text-[var(--text-primary)]" />
|
||||
<span class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{{ p.name }}
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</nav>
|
||||
</template>
|
||||
@@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import { DialogType } from '~/composables/useDialog';
|
||||
|
||||
const { close: closeSidebar, open, sidebarWidth, resize, saveWidth } = useSidebar();
|
||||
const route = useRoute();
|
||||
|
||||
@@ -37,8 +35,6 @@ const onFocusOut = (e: FocusEvent) => {
|
||||
}
|
||||
};
|
||||
|
||||
const { openDialog } = useDialog();
|
||||
|
||||
const onResizeStart = (event: MouseEvent) => {
|
||||
isResizing.value = true;
|
||||
startX.value = event.clientX;
|
||||
@@ -97,8 +93,18 @@ const navKind = computed(() => {
|
||||
if (route.path === '/') return 'home';
|
||||
if (route.path.startsWith('/agent/')) return 'agent';
|
||||
if (route.path === '/resources') return 'resources';
|
||||
if (route.path.startsWith('/settings')) return 'settings';
|
||||
return null;
|
||||
});
|
||||
|
||||
// remember where the user was so the settings back button can return there
|
||||
const settingsReturnTo = useState('settings:returnTo', () => '/');
|
||||
|
||||
watch(() => route.fullPath, (path) => {
|
||||
if (!path.startsWith('/settings')) {
|
||||
settingsReturnTo.value = path;
|
||||
}
|
||||
}, { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -126,6 +132,7 @@ const navKind = computed(() => {
|
||||
<SidenavHeader v-if="navKind === 'home'" />
|
||||
<SidenavHeaderResources v-else-if="navKind === 'resources'" />
|
||||
<SidenavHeaderAgent v-else-if="navKind === 'agent'" />
|
||||
<SidenavHeaderSettings v-else-if="navKind === 'settings'" />
|
||||
|
||||
<div class="flex items-center justify-end text-[var(--text-secondary)] gap-0.5">
|
||||
<div :class="[
|
||||
@@ -158,15 +165,18 @@ const navKind = computed(() => {
|
||||
<SidenavNavHome v-if="navKind === 'home'" />
|
||||
<SidenavNavAgent v-else-if="navKind === 'agent'" />
|
||||
<SidenavNavResources v-else-if="navKind === 'resources'" />
|
||||
<SidenavNavSettings v-else-if="navKind === 'settings'" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between pt-2 z-25 bg-[var(--bg-base)] pb-2">
|
||||
<div class="flex">
|
||||
<Tooltip :hotkey="['ctrl', ',']">
|
||||
<button @click="openDialog(DialogType.Settings)"
|
||||
class="flex items-center justify-center h-9 w-9 md:h-7 md:w-7 cursor-pointer @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors text-[var(--text-secondary)] active:text-[var(--text-primary)]">
|
||||
<NuxtLink to="/settings" aria-label="Settings" :class="[
|
||||
'flex items-center justify-center h-9 w-9 md:h-7 md:w-7 cursor-pointer @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors active:text-[var(--text-primary)]',
|
||||
navKind === 'settings' ? 'text-[var(--text-primary)] bg-[var(--color-hover)]' : 'text-[var(--text-secondary)]',
|
||||
]">
|
||||
<span class="i-mynaui-cog-four text-6 md:text-5"></span>
|
||||
</button>
|
||||
</NuxtLink>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { avatarColor, avatarInitial } from '~/utils/avatar';
|
||||
|
||||
const props = defineProps<{
|
||||
user: {
|
||||
id: string;
|
||||
name?: string | null;
|
||||
image?: string | null;
|
||||
} | null | undefined;
|
||||
}>();
|
||||
|
||||
// fall back to the letter placeholder if the image fails to load
|
||||
const imageFailed = ref(false);
|
||||
|
||||
watch(() => props.user?.image, () => {
|
||||
imageFailed.value = false;
|
||||
});
|
||||
|
||||
const showImage = computed(() => !!props.user?.image && !imageFailed.value);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-shrink-0 overflow-hidden flex items-center justify-center font-semibold text-white select-none"
|
||||
:style="showImage ? {} : { backgroundColor: avatarColor(user?.id ?? '') }">
|
||||
<img v-if="showImage" :src="user!.image!" alt="" class="w-full h-full object-cover"
|
||||
@error="imageFailed = true" />
|
||||
<span v-else aria-hidden="true">{{ avatarInitial(user?.name) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user