feat: added template button for starting a new chat.

frontend/src/popup.rs

@@ -95,7 +95,7 @@ pub fn Popup() -> impl IntoView {
 
     view! {
         <div class="flex flex-col rounded-lg bg-white dark:bg-zinc-900 text-zinc-950 dark:text-white h-screen w-full">
-            <header class="p-3">
+            <header class="relative p-3">
                 <input
                     class="w-full p-3 rounded-lg bg-zinc-200 dark:bg-zinc-950"
                     type="text"
@@ -111,8 +111,12 @@ pub fn Popup() -> impl IntoView {
                     }
                     prop:value=prompt_text
                     />
+                <button class="absolute py-1 px-2 right-5 mt-2
+                    rounded-full
+                    dark:bg-slate-800
+                    dark:hover:bg-slate-600">+</button>
             </header>
-            <main class="flex-grow overflow-y-auto p-2">
+            <main class="flex-grow overflow-y-auto p-4">
                 <div class="flex flex-col">
                     <For each=move || messages.get()
                     key=|msg| msg.id

frontend/styles-input.css

@@ -4,7 +4,7 @@
 
 @layer components {
     .msg {
-        @apply rounded-lg px-3 py-2 dark:bg-gray-800 max-w-[75%];
+        @apply rounded-lg mb-5 px-3 py-2 dark:bg-gray-800 max-w-[75%];
     }
 
     .msg-model {

frontend/styles.css

@@ -585,6 +585,9 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-5 {
+    right: calc(var(--spacing) * 5);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -684,6 +687,9 @@
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
@@ -1914,6 +1920,9 @@
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
@@ -2826,6 +2835,15 @@
       color: var(--color-zinc-800);
     }
   }
+  .dark\:hover\:bg-slate-600 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-slate-600);
+        }
+      }
+    }
+  }
   .\[\&_svg\]\:pointer-events-none {
     & svg {
       pointer-events: none;
@@ -2882,6 +2900,7 @@
 }
 @layer components {
   .msg {
+    margin-bottom: calc(var(--spacing) * 5);
     max-width: 75%;
     border-radius: var(--radius-lg);
     padding-inline: calc(var(--spacing) * 3);