github/Fabric
1
1
Fork 0
mirror of https://github.com/danielmiessler/Fabric.git synced 2026-01-08 22:08:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(gui): fix Session ID input and improve layout

Browse Source 
- Remove reactive statement that was resetting input on each keystroke
- Initialize sessionInput only once in onMount
- Change layout to stack input and dropdown vertically for better display

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
lif
2025-12-27 08:51:56 +08:00
parent 6c5487609e
commit 5f5728ee8e
1 changed files with 22 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
web/src/lib/components/chat/DropdownGroup.svelte
View File

@@ -12,14 +12,9 @@
import { sessionAPI, sessions } from '$lib/store/session-store';
import { onMount } from 'svelte';
let sessionInput = $currentSession || '';
let sessionInput = '';
let sessionsList: string[] = [];
// Sync sessionInput with currentSession store
$: if ($currentSession !== sessionInput) {
sessionInput = $currentSession || '';
}
// Update sessions list when sessions store changes
$: if ($sessions) {
sessionsList = $sessions.map(s => s.Name);
@@ -69,6 +64,7 @@
onMount(() => {
fetchStrategies();
sessionAPI.loadSessions();
sessionInput = $currentSession || '';
});
</script>
@@ -104,28 +100,26 @@
</div>
<div>
<Label for="session-input" class="text-xs text-white/70 mb-1 block">Session ID</Label>
<div class="flex gap-2">
<input
id="session-input"
type="text"
bind:value={sessionInput}
on:blur={handleSessionInput}
on:keydown={(e) => e.key === 'Enter' && handleSessionInput()}
placeholder="Enter or select session..."
class="flex-1 px-3 py-2 text-sm bg-primary-800/30 border-none rounded-md hover:bg-primary-800/40 transition-colors text-white placeholder-white/50 focus:ring-1 focus:ring-white/20 focus:outline-none"
/>
{#if sessionsList.length > 0}
<select
on:change={handleSessionSelect}
class="px-3 py-2 text-sm bg-primary-800/30 border-none rounded-md hover:bg-primary-800/40 transition-colors text-white focus:ring-1 focus:ring-white/20 focus:outline-none"
>
<option value="">Select...</option>
{#each sessionsList as session}
<option value={session}>{session}</option>
{/each}
</select>
{/if}
</div>
<input
id="session-input"
type="text"
bind:value={sessionInput}
on:blur={handleSessionInput}
on:keydown={(e) => e.key === 'Enter' && handleSessionInput()}
placeholder="Enter session name..."
class="w-full px-3 py-2 text-sm bg-primary-800/30 border-none rounded-md hover:bg-primary-800/40 transition-colors text-white placeholder-white/50 focus:ring-1 focus:ring-white/20 focus:outline-none"
/>
{#if sessionsList.length > 0}
<select
on:change={handleSessionSelect}
class="w-full mt-2 px-3 py-2 text-sm bg-primary-800/30 border-none rounded-md hover:bg-primary-800/40 transition-colors text-white focus:ring-1 focus:ring-white/20 focus:outline-none"
>
<option value="">Load existing session...</option>
{#each sessionsList as session}
<option value={session}>{session}</option>
{/each}
</select>
{/if}
</div>
<div>
<Label for="pattern-variables" class="text-xs text-white/70 mb-1 block">Pattern Variables (JSON)</Label>