Moved NotesDrawer to ModelConfig component

web/src/lib/components/chat/ModelConfig.svelte

@@ -3,58 +3,94 @@
   import { Slider } from "$lib/components/ui/slider";
   import { modelConfig } from "$lib/store/model-store";
   import Transcripts from "./Transcripts.svelte";
+
+
+  import NoteDrawer from '$lib/components/ui/noteDrawer/NoteDrawer.svelte';
+  import { getDrawerStore } from '@skeletonlabs/skeleton';
+  import { Button } from '$lib/components/ui/button';
+  import { page } from '$app/stores';
+  import { beforeNavigate } from '$app/navigation';
+
+  const drawerStore = getDrawerStore();
+  function openDrawer() {
+    drawerStore.open({});
+  }
+
+  beforeNavigate(() => {
+    drawerStore.close();
+  });
+
+  $: isVisible = $page.url.pathname.startsWith('/chat');
 </script>
 
-    <div class="space-y-1">
-        <Label>Maximum Length ({$modelConfig.maxLength})</Label>
-        <Slider
-            bind:value={$modelConfig.maxLength}
-            min={1}
-            max={4000}
-            step={1}
-        />
-    </div>
+<div class="p-2">
+  <div class="space-y-1">
+    <Label>Maximum Length ({$modelConfig.maxLength})</Label>
+    <Slider
+      bind:value={$modelConfig.maxLength}
+      min={1}
+      max={4000}
+      step={1}
+    />
+  </div>
 
-    <div class="space-y-1">
-        <Label>Temperature ({$modelConfig.temperature.toFixed(1)})</Label>
-        <Slider
-            bind:value={$modelConfig.temperature}
-            min={0}
-            max={2}
-            step={0.1}
-        />
-    </div>
+  <div class="space-y-1">
+    <Label>Temperature ({$modelConfig.temperature.toFixed(1)})</Label>
+    <Slider
+      bind:value={$modelConfig.temperature}
+      min={0}
+      max={2}
+      step={0.1}
+    />
+  </div>
 
-    <div class="space-y-1">
-        <Label>Top P ({$modelConfig.top_p.toFixed(2)})</Label>
-        <Slider
-            bind:value={$modelConfig.top_p}
-            min={0}
-            max={1}
-            step={0.01}
-        />
-    </div>
+  <div class="space-y-1">
+    <Label>Top P ({$modelConfig.top_p.toFixed(2)})</Label>
+    <Slider
+      bind:value={$modelConfig.top_p}
+      min={0}
+      max={1}
+      step={0.01}
+    />
+  </div>
 
-    <div class="space-y-1">
-        <Label>Frequency Penalty ({$modelConfig.frequency.toFixed(2)})</Label>
-        <Slider
-            bind:value={$modelConfig.frequency}
-            min={0}
-            max={1}
-            step={0.01}
-        />
-    </div>
+  <div class="space-y-1">
+    <Label>Frequency Penalty ({$modelConfig.frequency.toFixed(2)})</Label>
+    <Slider
+      bind:value={$modelConfig.frequency}
+      min={0}
+      max={1}
+      step={0.01}
+    />
+  </div>
 
-    <div class="space-y-1">
-        <Label>Presence Penalty ({$modelConfig.presence.toFixed(2)})</Label>
-        <Slider
-            bind:value={$modelConfig.presence}
-            min={0}
-            max={1}
-            step={0.01}
-        />
-    </div>
+  <div class="space-y-1">
+    <Label>Presence Penalty ({$modelConfig.presence.toFixed(2)})</Label>
+    <Slider
+      bind:value={$modelConfig.presence}
+      min={0}
+      max={1}
+      step={0.01}
+    />
+  </div>
+  <br>
+  <div class="space-y-1">
+    <Transcripts />
+  </div>
 
-    <div class="space-y-1">
-        <Transcripts />
-    </div>
+  <div class="flex flex-col gap-2">
+    {#if isVisible}
+      <div class="flex text-inherit justify-start mt-2">
+        <Button
+          variant="primary"
+          class="btn border variant-filled-primary text-align-center"
+          on:click={openDrawer}
+        >Open Drawer
+        </Button>
+      </div>
+      <NoteDrawer />
+    {/if}
+  </div>
+
+
+</div>

web/src/lib/components/chat/Models.svelte

@@ -8,7 +8,7 @@
     });
 </script>
 
-<div class="min-w-0">
+<div class="min-w-0 p-2">
     <Select 
         bind:value={$modelConfig.model}
     >
@@ -17,4 +17,4 @@
           <option value={model.name}>{model.vendor} - {model.name}</option>
         {/each}
     </Select>
-</div>
+</div>

web/src/lib/components/chat/Patterns.svelte

@@ -15,7 +15,7 @@
     });
 </script>
 
-<div class="min-w-0">
+<div class="min-w-0 p-2">
     <Select 
         bind:value={selectedPreset}
     > 
@@ -24,4 +24,4 @@
             <option value={pattern.Name}>{pattern.Description}</option>
         {/each}
     </Select>
-</div>
+</div>

web/src/lib/components/chat/Transcripts.svelte

@@ -77,7 +77,7 @@
     <Input
         type="text"
         bind:value={url}
-        placeholder="Enter YouTube URL"
+        placeholder="YouTube URL"
         class="flex-1 rounded-full border bg-background px-4"
         disabled={loading}
     />
@@ -89,7 +89,7 @@
     {#if loading}
         <div class="spinner-border" />
     {:else}
-        Fetch Transcript
+        Get 
     {/if}
     </Button>
 </div>