railsui 3.1.5 → 3.2.0

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/settings/panels/_general.html.erb

@@ -0,0 +1,92 @@
+<section class="relative text-sm md:min-h-[380px]">
+  <%= render "rui/shared/settings/panels/title", title: "Settings" %>
+
+  <!-- Theme Setting -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between">
+      <label for="theme" class="w-1/2 md:w-1/3 form-label">Theme</label>
+      <select id="theme" class="pr-8 text-center truncate w-24 form-select form-select-minimal text-sm">
+        <option value="system">System</option>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+      </select>
+    </div>
+  </div>
+
+  <!-- Language Setting -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between">
+      <label for="language" class="w-1/2 md:w-1/3 form-label">Language</label>
+      <select id="language" class="w-24 pr-8 text-center truncate  form-select form-select-minimal text-sm">
+        <option value="en">English</option>
+        <option value="es">Español</option>
+        <option value="fr">Français</option>
+        <option value="de">Deutsch</option>
+        <option value="it">Italiano</option>
+        <option value="pt">Português</option>
+        <option value="ru">Русский</option>
+        <option value="zh">中文</option>
+        <option value="ja">日本語</option>
+        <option value="ko">한국어</option>
+        <option value="ar">العربية</option>
+        <option value="hi">हिन्दी</option>
+      </select>
+    </div>
+  </div>
+
+  <!-- Spoken Language Setting -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between">
+      <label for="spoken-language" class="w-1/2 md:w-1/3 form-label">Spoken language</label>
+      <select id="spoken-language"
+        class="w-32 pr-8 text-center truncate md:w-24 form-select form-select-minimal text-sm">
+        <option value="auto">Auto</option>
+        <option value="en">English</option>
+        <option value="es">Español</option>
+        <option value="fr">Français</option>
+        <option value="de">Deutsch</option>
+        <option value="it">Italiano</option>
+        <option value="pt">Português</option>
+        <option value="ru">Русский</option>
+        <option value="zh">中文</option>
+        <option value="ja">日本語</option>
+        <option value="ko">한국어</option>
+        <option value="ar">العربية</option>
+        <option value="hi">हिन्दी</option>
+      </select>
+    </div>
+    <p class="form-help">For best results, select the language you mainly speak. If it's not listed, it may still be
+      supported via auto-detection.</p>
+  </div>
+
+  <!-- Voice Setting -->
+  <div class="items-center py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between">
+      <label for="voice" class="w-1/2 mb-0 md:w-1/3 form-label">Voice</label>
+      <div class="flex items-center gap-2">
+        <div class="flex items-center gap-1">
+          <button class="flex items-center gap-2 rounded-full btn btn-ghost">
+            Play
+            <%= icon "play", class: "size-4 stroke-current" %>
+          </button>
+        </div>
+        <div>
+          <select id="voice" class="w-24 pr-8 text-center truncate md:w-16 form-select form-select-minimal text-sm">
+            <option value="en">Emma</option>
+            <option value="es">Leo</option>
+            <option value="fr">Marie</option>
+            <option value="de">Hans</option>
+            <option value="it">Sofia</option>
+            <option value="pt">João</option>
+            <option value="ru">Anastasia</option>
+            <option value="zh">Wei</option>
+            <option value="ja">Yuki</option>
+            <option value="ko">Min-ji</option>
+            <option value="ar">Ahmed</option>
+            <option value="hi">Priya</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/settings/panels/_notifications.html.erb

@@ -0,0 +1,102 @@
+<section class="relative text-sm md:min-h-[380px]">
+  <%= render "rui/shared/settings/panels/title", title: "Notifications" %>
+
+  <!-- Push Notifications -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Push Notifications</label>
+        <p class="form-help">Receive notifications in your browser</p>
+      </div>
+      <input type="checkbox" id="push-notifications" class="form-input-switch" checked>
+      <label for="push-notifications"></label>
+    </div>
+  </div>
+
+  <!-- Email Notifications -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Email Notifications</label>
+        <p class="form-help">Receive important updates via email</p>
+      </div>
+      <input type="checkbox" id="email-notifications" class="form-input-switch">
+      <label for="email-notifications"></label>
+    </div>
+  </div>
+
+  <!-- Notification Sound -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <label for="notification-sound" class="w-1/2 md:w-1/3 form-label">Notification Sound</label>
+      <div class="flex items-center gap-1">
+        <button class="flex items-center gap-2 rounded-full btn btn-ghost">
+          Play
+          <%= icon "speaker-wave", class: "size-4 stroke-current" %>
+        </button>
+        <div class="w-px h-4 bg-neutral-300 dark:bg-neutral-600"></div>
+        <select id="notification-sound"
+          class="w-32 pr-8 text-center truncate md:w-24 form-select form-select-minimal text-sm">
+          <option value="default">Default</option>
+          <option value="chime">Chime</option>
+          <option value="bell">Bell</option>
+          <option value="ping">Ping</option>
+          <option value="none">None</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <!-- Notification Frequency -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <label for="notification-frequency" class="w-1/2 md:w-1/3 form-label">Frequency</label>
+      <select id="notification-frequency" class="w-32 pr-8 text-center md:w-24 form-select form-select-minimal text-sm">
+        <option value="instant">Instant</option>
+        <option value="hourly">Hourly</option>
+        <option value="daily">Daily</option>
+        <option value="weekly">Weekly</option>
+      </select>
+    </div>
+    <p class="form-help">How often to receive notification summaries</p>
+  </div>
+
+  <!-- Do Not Disturb -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Do Not Disturb</label>
+        <p class="form-help">Pause all notifications temporarily</p>
+      </div>
+      <input type="checkbox" id="do-not-disturb" class="form-input-switch">
+      <label for="do-not-disturb"></label>
+    </div>
+  </div>
+
+  <!-- Quiet Hours -->
+  <div class="py-3">
+    <div class="flex items-center justify-between gap-3 mb-2">
+      <div class="flex-1">
+        <label class="form-label">Quiet Hours</label>
+        <p class="form-help">Automatically disable notifications during these hours</p>
+      </div>
+      <input type="checkbox" id="quiet-hours-enabled" class="form-input-switch">
+      <label for="quiet-hours-enabled"></label>
+    </div>
+    <div class="mt-3 opacity-50 form-datetime-select text-sm">
+      <select id="quiet-start-hour" class="w-20" disabled>
+        <option value="22">10 PM</option>
+        <option value="23">11 PM</option>
+        <option value="0">12 AM</option>
+        <option value="1">1 AM</option>
+      </select>
+      <span>to</span>
+      <select id="quiet-end-hour" class="w-20" disabled>
+        <option value="6">6 AM</option>
+        <option value="7">7 AM</option>
+        <option value="8">8 AM</option>
+        <option value="9">9 AM</option>
+      </select>
+    </div>
+  </div>
+</section>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/settings/panels/_personalization.html.erb

@@ -0,0 +1,100 @@
+<section class="relative text-sm md:min-h-[380px]">
+  <%= render "rui/shared/settings/panels/title", title: "Personalization" %>
+
+  <!-- AI Personality -->
+  <div class="border-b border-neutral-200 dark:border-neutral-700 py-3">
+    <div class="flex items-center justify-between">
+      <label for="ai-personality" class="form-label w-1/3">AI Personality</label>
+      <select id="ai-personality" class="form-select form-select-minimal w-28 text-center pr-8 truncate text-sm">
+        <option value="balanced">Balanced</option>
+        <option value="creative">Creative</option>
+        <option value="precise">Precise</option>
+        <option value="friendly">Friendly</option>
+        <option value="professional">Professional</option>
+      </select>
+    </div>
+    <p class="form-help">Choose how the AI responds to your messages</p>
+  </div>
+
+  <!-- Response Length -->
+  <div class="border-b border-neutral-200 dark:border-neutral-700 py-3">
+    <div class="flex items-center justify-between">
+      <label for="response-length" class="form-label w-1/3">Response Length</label>
+      <select id="response-length" class="form-select form-select-minimal w-24 text-center pr-8 truncate text-sm">
+        <option value="short">Short</option>
+        <option value="medium">Medium</option>
+        <option value="long">Long</option>
+        <option value="auto">Auto</option>
+      </select>
+    </div>
+    <p class="form-help">Preferred length for AI responses</p>
+  </div>
+
+  <!-- Custom Instructions -->
+  <div class="border-b border-neutral-200 dark:border-neutral-700 py-3">
+    <div class="mb-2">
+      <label for="custom-instructions" class="form-label">Custom Instructions</label>
+      <p class="form-help">Tell the AI how you'd like it to respond</p>
+    </div>
+    <textarea id="custom-instructions" class="form-textarea"
+      placeholder="e.g., Always be concise and use bullet points when listing items..."></textarea>
+  </div>
+
+  <!-- Conversation Starters -->
+  <div class="border-b border-neutral-200 dark:border-neutral-700 py-3">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <label class="form-label">Show conversation starters</label>
+        <p class="form-help">Display suggested topics when starting new conversations</p>
+      </div>
+      <input type="checkbox" id="conversation-starters" class="form-input-switch" checked>
+      <label for="conversation-starters"></label>
+    </div>
+  </div>
+
+  <!-- Memory -->
+  <div class="border-b border-neutral-200 dark:border-neutral-700 py-3">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <label class="form-label">Memory</label>
+        <p class="form-help">Allow AI to remember details from previous conversations</p>
+      </div>
+      <input type="checkbox" id="memory-enabled" class="form-input-switch" checked>
+      <label for="memory-enabled"></label>
+    </div>
+  </div>
+
+  <!-- Preferred Topics -->
+  <div class="py-3">
+    <div class="mb-2">
+      <label class="form-label">Preferred Topics</label>
+      <p class="form-help">Topics you're most interested in discussing</p>
+    </div>
+    <div class="flex flex-wrap gap-2">
+      <label class="inline-flex items-center gap-2">
+        <input type="checkbox" class="form-input-checkbox" checked>
+        <span class="text-sm">Technology</span>
+      </label>
+      <label class="inline-flex items-center gap-2">
+        <input type="checkbox" class="form-input-checkbox">
+        <span class="text-sm">Science</span>
+      </label>
+      <label class="inline-flex items-center gap-2">
+        <input type="checkbox" class="form-input-checkbox" checked>
+        <span class="text-sm">Business</span>
+      </label>
+      <label class="inline-flex items-center gap-2">
+        <input type="checkbox" class="form-input-checkbox">
+        <span class="text-sm">Arts</span>
+      </label>
+      <label class="inline-flex items-center gap-2">
+        <input type="checkbox" class="form-input-checkbox">
+        <span class="text-sm">Health</span>
+      </label>
+      <label class="inline-flex items-center gap-2">
+        <input type="checkbox" class="form-input-checkbox">
+        <span class="text-sm">Education</span>
+      </label>
+    </div>
+  </div>
+</section>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/settings/panels/_security.html.erb

@@ -0,0 +1,98 @@
+<section class="relative text-sm md:min-h-[380px]">
+  <%= render "rui/shared/settings/panels/title", title: "Security" %>
+
+  <!-- Two-Factor Authentication -->
+  <div class="border-b border-neutral-200 dark:border-neutral-700 py-3">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <label class="form-label">Two-Factor Authentication</label>
+        <p class="form-help">Add an extra layer of security to your account</p>
+      </div>
+      <button type="button" class="btn btn-primary">
+        Enable
+      </button>
+    </div>
+  </div>
+
+  <!-- Change Password -->
+  <div class="border-b border-neutral-200 dark:border-neutral-700 py-3">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <label class="form-label">Password</label>
+        <p class="form-help">Last changed 3 months ago</p>
+      </div>
+      <button type="button" class="btn btn-ghost">
+        Change
+      </button>
+    </div>
+  </div>
+
+  <!-- Session Management -->
+  <div class="border-b border-neutral-200 dark:border-neutral-700 py-3">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <label class="form-label">Active Sessions</label>
+        <p class="form-help">Manage devices signed into your account</p>
+      </div>
+      <button type="button" class="btn btn-ghost">
+        Manage
+      </button>
+    </div>
+  </div>
+
+  <!-- Login Alerts -->
+  <div class="border-b border-neutral-200 dark:border-neutral-700 py-3">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <label class="form-label">Login Alerts</label>
+        <p class="form-help">Get notified when someone signs into your account</p>
+      </div>
+      <input type="checkbox" id="login-alerts" class="form-input-switch" checked>
+      <label for="login-alerts"></label>
+    </div>
+  </div>
+
+  <!-- Privacy Mode -->
+  <div class="border-b border-neutral-200 dark:border-neutral-700 py-3">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <label class="form-label">Privacy Mode</label>
+        <p class="form-help">Hide sensitive information in conversations</p>
+      </div>
+      <input type="checkbox" id="privacy-mode" class="form-input-switch">
+      <label for="privacy-mode"></label>
+    </div>
+  </div>
+
+  <!-- Data Encryption -->
+  <div class="border-b border-neutral-200 dark:border-neutral-700 py-3">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <div class="flex items-center gap-2">
+          <label class="form-label mb-0">End-to-End Encryption</label>
+          <span class="rounded bg-green-100 text-green-800 font-medium px-1.5 py-0.5 text-xs dark:text-green-300 dark:bg-green-500/20 inline-flex items-center gap-1">
+            Active
+          </span>
+        </div>
+        <p class="form-help">Encrypt conversations with your personal key</p>
+
+      </div>
+      <div class="flex items-center gap-2">
+        <button type="button" class="btn btn-ghost">
+          Configure
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Account Deletion -->
+  <div class="py-3">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <label class="form-label text-red-600 dark:text-red-400">Delete Account</label>
+        <p class="form-help">Permanently delete account and all associated data</p>
+      </div>
+      <%= button_to "Delete", "#", method: :delete, class: "btn btn-danger" %>
+    </div>
+  </div>
+</section>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/settings/panels/_title.html.erb

@@ -0,0 +1,5 @@
+<%# locals:(title: ) %>
+
+<h3 class="flex items-center text-lg font-normal border-b border-neutral-200 dark:border-neutral-700 mb-6 pb-4">
+  <div class="truncate select-none"><%= title %></div>
+</h3>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/sidebar/_actions.html.erb

@@ -0,0 +1,39 @@
+<!-- Action Buttons -->
+<div class="px-4 w-full space-y-2 mb-4">
+  <!-- New Chat Button -->
+  <%= link_to rui_chat_new_path, class: "rounded-md w-full p-2 text-sm hover:bg-neutral-200/80 flex items-center gap-3 group dark:hover:bg-neutral-900 transition-all duration-200 sidebar-collapsed:justify-center sidebar-collapsed:size-8" do %>
+    <div class="flex items-center gap-3 min-w-0 flex-1 sidebar-collapsed:flex-none">
+      <%= icon "plus", class: "size-5 stroke-current text-neutral-700 dark:text-neutral-100 shrink-0" %>
+      <span class="sidebar-expanded-only transition-opacity duration-200 truncate">New chat</span>
+    </div>
+    <span
+      class="sidebar-expanded-only opacity-0 group-hover:opacity-100 duration-200 transition-opacity shrink-0">
+      <kbd class="px-1.5 py-0.5 bg-neutral-100 dark:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-300 font-mono text-xs"
+        >⇧ ⌘ O</kbd>
+    </span>
+  <% end %>
+
+  <!-- Search chats button -->
+  <button
+    class="rounded-md w-full p-2 text-sm hover:bg-neutral-200/80 flex items-center gap-3 group dark:hover:bg-neutral-900 transition-all duration-200 sidebar-collapsed:justify-center sidebar-collapsed:size-8"
+    data-action="click->search#open"
+  >
+    <div
+      class="flex items-center gap-3 min-w-0 flex-1 sidebar-collapsed:flex-none"
+    >
+      <%= icon "magnifying-glass", class: "size-5 stroke-current text-neutral-700 dark:text-neutral-100 shrink-0" %>
+      <span
+        class="sidebar-expanded-only transition-opacity duration-200 truncate"
+        >Search chats</span
+      >
+    </div>
+    <span
+      class="sidebar-expanded-only opacity-0 group-hover:opacity-100 duration-200 transition-opacity shrink-0"
+    >
+      <kbd
+        class="px-1.5 py-0.5 bg-neutral-100 dark:bg-neutral-700 rounded text-neutral-600 dark:text-neutral-300 font-mono text-xs"
+        >⌘ K</kbd
+      >
+    </span>
+  </button>
+</div>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/sidebar/_header.html.erb

@@ -0,0 +1,40 @@
+<!-- Header -->
+<div class="flex items-center justify-between p-4">
+  <div class="relative flex items-center gap-2 sidebar-collapsed:gap-0 sidebar-collapsed:justify-center sidebar-collapsed:flex">
+
+    <!-- Logo with hover toggle overlay -->
+    <div class="relative group" data-sidebar-target="logoContainer">
+      <%= link_to root_path, class: "block shrink-0" do %>
+        <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 shrink-0 fill-current dark:fill-neutral-100 transition-opacity duration-200" %>
+      <% end %>
+
+      <!-- Toggle overlay (appears on hover when collapsed) -->
+      <button
+        class="absolute inset-0 flex items-center justify-center transition-opacity duration-200 opacity-0 sidebar-collapsed-only dark:bg-neutral-800/90 group-hover:opacity-100 backdrop-blur-sm text-neutral-900 bg-neutral-50"
+        data-action="click->sidebar#toggle">
+        <svg class="size-8 fill-current dark:fill-white" viewBox="0 0 20 20" fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg" data-rtl-flip="" class="icon max-md:hidden">
+          <path
+            d="M6.83496 3.99992C6.38353 4.00411 6.01421 4.0122 5.69824 4.03801C5.31232 4.06954 5.03904 4.12266 4.82227 4.20012L4.62207 4.28606C4.18264 4.50996 3.81498 4.85035 3.55859 5.26848L3.45605 5.45207C3.33013 5.69922 3.25006 6.01354 3.20801 6.52824C3.16533 7.05065 3.16504 7.71885 3.16504 8.66301V11.3271C3.16504 12.2712 3.16533 12.9394 3.20801 13.4618C3.25006 13.9766 3.33013 14.2909 3.45605 14.538L3.55859 14.7216C3.81498 15.1397 4.18266 15.4801 4.62207 15.704L4.82227 15.79C5.03904 15.8674 5.31234 15.9205 5.69824 15.9521C6.01398 15.9779 6.383 15.986 6.83398 15.9902L6.83496 3.99992ZM18.165 11.3271C18.165 12.2493 18.1653 12.9811 18.1172 13.5702C18.0745 14.0924 17.9916 14.5472 17.8125 14.9648L17.7295 15.1415C17.394 15.8 16.8834 16.3511 16.2568 16.7353L15.9814 16.8896C15.5157 17.1268 15.0069 17.2285 14.4102 17.2773C13.821 17.3254 13.0893 17.3251 12.167 17.3251H7.83301C6.91071 17.3251 6.17898 17.3254 5.58984 17.2773C5.06757 17.2346 4.61294 17.1508 4.19531 16.9716L4.01855 16.8896C3.36014 16.5541 2.80898 16.0434 2.4248 15.4169L2.27051 15.1415C2.03328 14.6758 1.93158 14.167 1.88281 13.5702C1.83468 12.9811 1.83496 12.2493 1.83496 11.3271V8.66301C1.83496 7.74072 1.83468 7.00898 1.88281 6.41985C1.93157 5.82309 2.03329 5.31432 2.27051 4.84856L2.4248 4.57317C2.80898 3.94666 3.36012 3.436 4.01855 3.10051L4.19531 3.0175C4.61285 2.83843 5.06771 2.75548 5.58984 2.71281C6.17898 2.66468 6.91071 2.66496 7.83301 2.66496H12.167C13.0893 2.66496 13.821 2.66468 14.4102 2.71281C15.0069 2.76157 15.5157 2.86329 15.9814 3.10051L16.2568 3.25481C16.8833 3.63898 17.394 4.19012 17.7295 4.84856L17.8125 5.02531C17.9916 5.44285 18.0745 5.89771 18.1172 6.41985C18.1653 7.00898 18.165 7.74072 18.165 8.66301V11.3271ZM8.16406 15.995H12.167C13.1112 15.995 13.7794 15.9947 14.3018 15.9521C14.8164 15.91 15.1308 15.8299 15.3779 15.704L15.5615 15.6015C15.9797 15.3451 16.32 14.9774 16.5439 14.538L16.6299 14.3378C16.7074 14.121 16.7605 13.8478 16.792 13.4618C16.8347 12.9394 16.835 12.2712 16.835 11.3271V8.66301C16.835 7.71885 16.8347 7.05065 16.792 6.52824C16.7605 6.14232 16.7073 5.86904 16.6299 5.65227L16.5439 5.45207C16.32 5.01264 15.9796 4.64498 15.5615 4.3886L15.3779 4.28606C15.1308 4.16013 14.8165 4.08006 14.3018 4.03801C13.7794 3.99533 13.1112 3.99504 12.167 3.99504H8.16406C8.16407 3.99667 8.16504 3.99829 8.16504 3.99992L8.16406 15.995Z">
+          </path>
+        </svg>
+      </button>
+    </div>
+
+    <div class="flex-1">
+      <h1 class="sr-only"><%= Railsui.config.application_name || 'Corgie' %></h1>
+    </div>
+  </div>
+
+  <!-- Regular toggle button (visible when expanded) -->
+  <button
+    class="p-1.5 transition-all duration-200 rounded-md sidebar-expanded-only hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"
+    data-action="click->sidebar#toggle">
+    <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" data-rtl-flip=""
+      class="icon max-md:hidden">
+      <path
+        d="M6.83496 3.99992C6.38353 4.00411 6.01421 4.0122 5.69824 4.03801C5.31232 4.06954 5.03904 4.12266 4.82227 4.20012L4.62207 4.28606C4.18264 4.50996 3.81498 4.85035 3.55859 5.26848L3.45605 5.45207C3.33013 5.69922 3.25006 6.01354 3.20801 6.52824C3.16533 7.05065 3.16504 7.71885 3.16504 8.66301V11.3271C3.16504 12.2712 3.16533 12.9394 3.20801 13.4618C3.25006 13.9766 3.33013 14.2909 3.45605 14.538L3.55859 14.7216C3.81498 15.1397 4.18266 15.4801 4.62207 15.704L4.82227 15.79C5.03904 15.8674 5.31234 15.9205 5.69824 15.9521C6.01398 15.9779 6.383 15.986 6.83398 15.9902L6.83496 3.99992ZM18.165 11.3271C18.165 12.2493 18.1653 12.9811 18.1172 13.5702C18.0745 14.0924 17.9916 14.5472 17.8125 14.9648L17.7295 15.1415C17.394 15.8 16.8834 16.3511 16.2568 16.7353L15.9814 16.8896C15.5157 17.1268 15.0069 17.2285 14.4102 17.2773C13.821 17.3254 13.0893 17.3251 12.167 17.3251H7.83301C6.91071 17.3251 6.17898 17.3254 5.58984 17.2773C5.06757 17.2346 4.61294 17.1508 4.19531 16.9716L4.01855 16.8896C3.36014 16.5541 2.80898 16.0434 2.4248 15.4169L2.27051 15.1415C2.03328 14.6758 1.93158 14.167 1.88281 13.5702C1.83468 12.9811 1.83496 12.2493 1.83496 11.3271V8.66301C1.83496 7.74072 1.83468 7.00898 1.88281 6.41985C1.93157 5.82309 2.03329 5.31432 2.27051 4.84856L2.4248 4.57317C2.80898 3.94666 3.36012 3.436 4.01855 3.10051L4.19531 3.0175C4.61285 2.83843 5.06771 2.75548 5.58984 2.71281C6.17898 2.66468 6.91071 2.66496 7.83301 2.66496H12.167C13.0893 2.66496 13.821 2.66468 14.4102 2.71281C15.0069 2.76157 15.5157 2.86329 15.9814 3.10051L16.2568 3.25481C16.8833 3.63898 17.394 4.19012 17.7295 4.84856L17.8125 5.02531C17.9916 5.44285 18.0745 5.89771 18.1172 6.41985C18.1653 7.00898 18.165 7.74072 18.165 8.66301V11.3271ZM8.16406 15.995H12.167C13.1112 15.995 13.7794 15.9947 14.3018 15.9521C14.8164 15.91 15.1308 15.8299 15.3779 15.704L15.5615 15.6015C15.9797 15.3451 16.32 14.9774 16.5439 14.538L16.6299 14.3378C16.7074 14.121 16.7605 13.8478 16.792 13.4618C16.8347 12.9394 16.835 12.2712 16.835 11.3271V8.66301C16.835 7.71885 16.8347 7.05065 16.792 6.52824C16.7605 6.14232 16.7073 5.86904 16.6299 5.65227L16.5439 5.45207C16.32 5.01264 15.9796 4.64498 15.5615 4.3886L15.3779 4.28606C15.1308 4.16013 14.8165 4.08006 14.3018 4.03801C13.7794 3.99533 13.1112 3.99504 12.167 3.99504H8.16406C8.16407 3.99667 8.16504 3.99829 8.16504 3.99992L8.16406 15.995Z">
+      </path>
+    </svg>
+  </button>
+</div>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/sidebar/_history.html.erb

@@ -0,0 +1,36 @@
+<!-- Chat History -->
+<div class="sidebar-chat-history flex-1 overflow-y-auto px-4 text-sm">
+  <div class="space-y-2 pb-4">
+    <!-- Today -->
+    <div class="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3 px-2">
+      Today
+    </div>
+
+    <div class="space-y-1">
+      <%= render "rui/shared/sidebar/link", href: rui_chat_show_path, title: "How to optimize Rails performance", active: true %>
+
+      <%= render "rui/shared/sidebar/link", href: rui_chat_show_path, title: "Explain machine learning concepts" %>
+    </div>
+
+    <!-- Yesterday -->
+    <div class="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mt-6 mb-3 px-2">
+      Yesterday
+    </div>
+
+    <div class="space-y-1">
+      <%= render "rui/shared/sidebar/link", href: rui_chat_show_path, title: "CSS Grid vs Flexbox comparison" %>
+
+      <%= render "rui/shared/sidebar/link", href: rui_chat_show_path, title: "Best practices for API design" %>
+    </div>
+
+    <!-- Previous 7 Days -->
+    <div class="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mt-6 mb-3 px-2">
+      Previous 7 Days
+    </div>
+
+    <div class="space-y-1">
+      <%= render "rui/shared/sidebar/link", href: rui_chat_show_path, title: "Python data structures explained" %>
+      <%= render "rui/shared/sidebar/link", href: rui_chat_show_path, title: "Docker containerization tutorial" %>
+    </div>
+  </div>
+</div>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/sidebar/_link.html.erb

@@ -0,0 +1,23 @@
+<%# locals: (href:, active: false, title: "Chat title") %>
+
+<%= link_to href,
+  class: class_names(
+    "group flex items-center p-2 text-sm text-neutral-700 rounded-lg hover:bg-neutral-200 transition-colors dark:text-neutral-100 dark:hover:bg-neutral-900 gap-3",
+    { "bg-neutral-200 dark:bg-neutral-700" => active }
+  ),
+  data: { sidebar_target: "chatLink" } do %>
+
+  <span class="flex-1 truncate transition-opacity duration-200" data-sidebar-target="chatTitle"><%= title %></span>
+
+  <div class="opacity-0 group-hover:opacity-100 transition-opacity shrink-0 flex gap-1" data-sidebar-target="chatActions">
+    <%= link_to "#", class: "p-1 hover:bg-neutral-300 dark:hover:bg-neutral-600 rounded text-neutral-600 dark:text-neutral-400" do %>
+      <%= icon "pencil-square", class: "size-3.5" %>
+      <span class="sr-only">Edit</span>
+    <% end %>
+
+    <%= button_to "#", method: :delete, class: "p-1 hover:bg-neutral-300 dark:hover:bg-neutral-600 rounded text-neutral-600 dark:text-neutral-400" do %>
+      <%= icon "trash", class: "size-3.5" %>
+      <span class="sr-only">Delete</span>
+    <% end %>
+  </div>
+<% end %>

data/lib/generators/railsui/install/templates/themes/hound/stylesheets/railsui/forms.css

@@ -23,6 +23,18 @@
     }
   }
 
+  .form-help {
+    @apply text-sm mt-2 text-slate-600/80 dark:text-slate-500/90;
+  }
+
+  .form-textarea {
+    @apply px-3 py-2 border border-slate-300 bg-white font-normal text-base placeholder:text-slate-500 rounded-lg block w-full focus:outline-hidden focus:ring-4 focus:ring-primary-50 focus:border-primary-500 text-slate-900 dark:bg-slate-800 dark:border-slate-600 dark:focus:ring-primary-400/30 dark:focus:border-slate-500 dark:text-white dark:placeholder:text-slate-400 disabled:bg-slate-100/90 dark:disabled:bg-slate-800/90 disabled:cursor-not-allowed disabled:dark:opacity-70 shadow-xs min-h-[100px];
+
+    &:disabled {
+      @apply bg-slate-100/90 pointer-events-none select-none shadow-none cursor-not-allowed dark:bg-slate-800/90 dark:opacity-70;
+    }
+  }
+
   .form-file {
     @apply block w-full text-sm text-slate-500 dark:text-slate-400
     file:mr-4 file:py-2 file:px-4
@@ -59,8 +71,9 @@
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e");
     }
 
-    + label {
-      @apply select-none;
+    + label,
+    + .form-label {
+      @apply mb-0 select-none;
     }
   }
 
@@ -71,8 +84,9 @@
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='4' fill='%23fff'/%3e%3c/svg%3e");
     }
 
-    + label {
-      @apply select-none;
+    + label,
+    + .form-label {
+      @apply mb-0 select-none;
     }
   }
 

data/lib/generators/railsui/install/templates/themes/hound/stylesheets/railsui/theme.css

@@ -1,6 +1,7 @@
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans:
+    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
   --color-primary-50: oklch(0.962 0.0179 272.31); /* #eef2ff */
   --color-primary-100: oklch(0.93 0.0334 272.79); /* #e0e7ff */

data/lib/generators/railsui/install/templates/themes/shepherd/stylesheets/railsui/forms.css

@@ -31,6 +31,10 @@
     }
   }
 
+  .form-help {
+    @apply mt-1 text-sm text-zinc-500 dark:text-zinc-400;
+  }
+
   .form-textarea {
     @apply rounded-lg px-4 py-2 border border-zinc-300/80 bg-white focus:border-zinc-500/80 focus:ring-4 focus:ring-zinc-50 focus:shadow-none focus:outline-hidden dark:bg-zinc-800 dark:border-zinc-500/80 dark:focus:border-zinc-500 placeholder-zinc-500/80 dark:focus:ring-zinc-500/40 dark:placeholder:text-zinc-300/60 invalid:focus:border-primary-300 invalid:focus:text-primary-600 invalid:focus:ring-primary-50 min-h-[100px] w-full;
 
@@ -170,13 +174,19 @@
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e");
     }
 
-    + label {
-      @apply select-none;
+    + label,
+    + .form-label {
+      @apply mb-0 select-none;
     }
   }
 
   .form-input-radio {
     @apply rounded-full border border-zinc-400 focus:ring-2 checked:ring-primary-200 checked:border-primary-600 checked:accent-primary-600 checked:shadow-primary-600 text-primary-600 focus-visible:text-primary-600 focus-visible:ring-primary-200 focus-visible:outline-hidden dark:bg-zinc-700 dark:border-zinc-600 dark:checked:border-primary-400 dark:checked:accent-primary-400;
+
+    + label,
+    + .form-label {
+      @apply mb-0 select-none;
+    }
   }
 
   .form-input-switch {