Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align AI modal with journals config style

Browse Source
This commit is contained in:
Scott Idem
2026-05-05 14:12:55 -04:00
parent d8616ea5fd
commit 1c20038a55
1 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/lib/ae_elements/AE_AITools.svelte
View File

@@ -74,6 +74,16 @@ let active_tab: 'result' | 'settings' = $state('result');
let tmp_summary = $state('');
let show_api_token = $state(false);
const panel_class = 'space-y-4 rounded-xl border border-surface-500/20 bg-surface-500/5 p-4 shadow-sm';
const panel_title_class = 'flex items-center gap-2 border-b border-surface-500/20 pb-2 text-lg font-bold';
const tab_button_base_class = 'btn btn-sm border transition-all duration-200';
const tab_button_active_class = 'border-surface-200-800 bg-surface-200-800 text-surface-950-50 shadow-sm';
const tab_button_inactive_class = 'border-transparent bg-surface-50-900/60 text-surface-600-400 hover:border-surface-200-800 hover:bg-surface-100-900 hover:text-surface-950-50';
function tab_button_class(is_active: boolean): string {
return `${tab_button_base_class} ${is_active ? tab_button_active_class : tab_button_inactive_class}`;
}
async function generate_ai_result() {
if (!content) {
alert('No content available to analyze.');
@@ -179,21 +189,17 @@ function handle_save() {
title="Aether AI Assistant"
bind:open={show_modal}
size="lg"
class="bg-surface-50-900">
<div class="space-y-4 p-2">
class="relative mx-auto flex h-[calc(100dvh-2rem)] max-h-[calc(100dvh-2rem)] w-full flex-col rounded-xl border border-surface-200-800 bg-surface-50-900 text-surface-950-50 shadow-xl">
<div class="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-3">
<!-- Tab Navigation -->
<div class="border-surface-500/20 flex gap-1 border-b pb-2">
<div class="bg-surface-500/10 sticky top-0 z-10 mx-auto flex max-w-fit justify-center gap-1 rounded-lg p-1 backdrop-blur-sm">
<button
class="btn btn-sm {active_tab === 'result'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
class={tab_button_class(active_tab === 'result')}
onclick={() => (active_tab = 'result')}>
<Bot size="1.1em" class="mr-1" /> Result
</button>
<button
class="btn btn-sm {active_tab === 'settings'
? 'preset-filled-secondary'
: 'preset-tonal-surface'}"
class={tab_button_class(active_tab === 'settings')}
onclick={() => (active_tab = 'settings')}>
<Settings size="1.1em" class="mr-1" /> Settings
</button>
@@ -225,9 +231,8 @@ function handle_save() {
<div
class="animate-in slide-in-from-left-4 space-y-6 duration-200">
<!-- Connection Settings -->
<div class="space-y-4">
<h3
class="text-surface-500 flex items-center gap-2 text-sm font-bold tracking-widest uppercase">
<section class={panel_class}>
<h3 class={panel_title_class}>
<Globe size="1.1em" /> API Connection
</h3>
@@ -299,13 +304,11 @@ function handle_save() {
</button>
</div>
</label>
</div>
</section>
<!-- Model Parameters -->
<div
class="border-surface-500/10 space-y-4 border-t pt-4">
<h3
class="text-surface-500 flex items-center gap-2 text-sm font-bold tracking-widest uppercase">
<section class={panel_class}>
<h3 class={panel_title_class}>
<FilePenLine size="1.1em" /> Inference Parameters
</h3>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -331,10 +334,10 @@ function handle_save() {
<span>System Prompt</span>
<textarea
bind:value={systemPrompt}
class="textarea h-24 font-mono text-xs"
class="textarea h-24 font-mono text-xs bg-surface-50-900"
></textarea>
</label>
</div>
</section>
</div>
{/if}
</div>