AI sidebar

app/controllers/users_controller.rb

@@ -60,7 +60,7 @@ class UsersController < ApplicationController
 
     def user_params
       params.require(:user).permit(
-        :first_name, :last_name, :email, :profile_image, :redirect_to, :delete_profile_image, :onboarded_at, :show_sidebar,
+        :first_name, :last_name, :email, :profile_image, :redirect_to, :delete_profile_image, :onboarded_at, :show_sidebar, :show_ai_sidebar,
         family_attributes: [ :name, :currency, :country, :locale, :date_format, :timezone, :id, :data_enrichment_enabled ]
       )
     end

app/javascript/controllers/sidebar_controller.js

@@ -2,16 +2,52 @@ import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="sidebar"
 export default class extends Controller {
-  static values = { userId: String };
-  static targets = ["panel", "content"];
+  static values = {
+    userId: String,
+    side: { type: String, default: "left" } // "left" or "right"
+  };
+  static targets = ["leftPanel", "rightPanel", "content"];
 
-  toggle() {
-    this.panelTarget.classList.toggle("w-0");
-    this.panelTarget.classList.toggle("opacity-0");
-    this.panelTarget.classList.toggle("w-80");
-    this.panelTarget.classList.toggle("opacity-100");
-    this.contentTarget.classList.toggle("max-w-4xl");
-    this.contentTarget.classList.toggle("max-w-5xl");
+  toggle(event) {
+    // Determine which sidebar to toggle based on the event or default to the side value
+    const side = event.currentTarget.dataset.side || this.sideValue;
+
+    // Get the appropriate panel based on the side
+    const panel = side === "left" ? this.leftPanelTarget : this.rightPanelTarget;
+
+    // Toggle the sidebar visibility
+    panel.classList.toggle("w-0");
+    panel.classList.toggle("opacity-0");
+    panel.classList.toggle("w-80");
+    panel.classList.toggle("opacity-100");
+
+    // Determine sidebar states
+    const leftSidebarOpen = !this.leftPanelTarget.classList.contains("w-0");
+    const rightSidebarOpen = !this.rightPanelTarget.classList.contains("w-0");
+
+    // Adjust content width based on sidebar states
+    this.adjustContentWidth(leftSidebarOpen, rightSidebarOpen);
+
+    // Save user preference
+    this.saveUserPreference(side, side === "left" ? leftSidebarOpen : rightSidebarOpen);
+  }
+
+  adjustContentWidth(leftSidebarOpen, rightSidebarOpen) {
+    // Remove all possible width classes first
+    this.contentTarget.classList.remove("max-w-3xl", "max-w-4xl", "max-w-5xl");
+
+    // Apply the appropriate width class based on sidebar states
+    if (leftSidebarOpen && rightSidebarOpen) {
+      this.contentTarget.classList.add("max-w-3xl");
+    } else if (leftSidebarOpen || rightSidebarOpen) {
+      this.contentTarget.classList.add("max-w-4xl");
+    } else {
+      this.contentTarget.classList.add("max-w-5xl");
+    }
+  }
+
+  saveUserPreference(side, isOpen) {
+    const preferenceField = side === "left" ? "show_sidebar" : "show_ai_sidebar";
 
     fetch(`/users/${this.userIdValue}`, {
       method: "PATCH",
@@ -21,7 +57,7 @@ export default class extends Controller {
         Accept: "application/json",
       },
       body: new URLSearchParams({
-        "user[show_sidebar]": !this.panelTarget.classList.contains("w-0"),
+        [`user[${preferenceField}]`]: isOpen,
       }).toString(),
     });
   }

app/models/user.rb

@@ -84,6 +84,10 @@ class User < ApplicationRecord
     last_alerted_upgrade_commit_sha == upgrade.commit_sha
   end
 
+  def show_ai_sidebar?
+    show_ai_sidebar
+  end
+
   # Deactivation
   validate :can_deactivate, if: -> { active_changed? && !active }
   after_update_commit :purge_later, if: -> { saved_change_to_active?(from: true, to: false) }

app/views/layouts/application.html.erb

@@ -1,5 +1,5 @@
 <%= render "layouts/shared/htmldoc" do %>
-  <div class="flex h-full bg-gray-50">
+  <div class="flex h-full bg-gray-50" data-controller="sidebar" data-sidebar-user-id-value="<%= Current.user.id %>">
     <nav class="flex flex-col shrink-0 w-[84px] py-4 mr-3">
       <div class="pl-2 mb-3">
         <%= link_to root_path, class: "block" do %>
@@ -26,7 +26,7 @@
       </div>
     </nav>
 
-    <%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300", Current.user.show_sidebar? ? "w-80" : "w-0"), data: { sidebar_target: "panel" } do %>
+    <%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300", Current.user.show_sidebar? ? "w-80" : "w-0"), data: { sidebar_target: "leftPanel" } do %>
       <% if content_for?(:sidebar) %>
         <%= yield :sidebar %>
       <% else %>
@@ -36,6 +36,18 @@
       <% end %>
     <% end %>
 
+    <% 
+      left_sidebar_open = Current.user.show_sidebar?
+      right_sidebar_open = Current.user.respond_to?(:show_ai_sidebar?) && Current.user.show_ai_sidebar?
+      content_width_class = if left_sidebar_open && right_sidebar_open
+                              "max-w-3xl"
+                            elsif left_sidebar_open || right_sidebar_open
+                              "max-w-4xl"
+                            else
+                              "max-w-5xl"
+                            end
+    %>
+
     <%= tag.main class: class_names("px-10 py-4 grow h-full", require_upgrade? ? "relative overflow-hidden" : "overflow-y-auto") do %>
       <% if require_upgrade? %>
         <div class="absolute inset-0 px-10 h-full w-full z-50">
@@ -43,7 +55,7 @@
         </div>
       <% end %>
 
-      <%= tag.div class: class_names("mx-auto w-full h-full", Current.user.show_sidebar? ? "max-w-4xl" : "max-w-5xl"), data: { sidebar_target: "content" } do %>
+      <%= tag.div class: class_names("mx-auto w-full h-full", content_width_class), data: { sidebar_target: "content" } do %>
         <% if content_for?(:breadcrumbs) %>
           <%= yield :breadcrumbs %>
         <% else %>
@@ -57,5 +69,9 @@
         <%= yield %>
       <% end %>
     <% end %>
+
+    <%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300 border-l border-gray-200", right_sidebar_open ? "w-80" : "w-0"), data: { sidebar_target: "rightPanel" } do %>
+      <%= render "layouts/shared/ai_sidebar" %>
+    <% end %>
   </div>
 <% end %>

app/views/layouts/shared/_ai_sidebar.html.erb

@@ -0,0 +1,29 @@
+<div class="px-4">
+  <h2 class="text-lg font-semibold mb-4">Financial AI</h2>
+  
+  <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
+    <p class="text-gray-500 text-sm mb-3">Your AI assistant is ready to help with your financial questions.</p>
+    
+    <div class="flex items-center gap-2 text-sm text-gray-600">
+      <span class="w-2 h-2 bg-green-500 rounded-full"></span>
+      <span>Ready to assist</span>
+    </div>
+  </div>
+  
+  <div class="bg-white rounded-lg p-4 shadow-sm">
+    <div class="flex items-start gap-3 mb-4">
+      <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
+        <%= icon("bot", color: "primary") %>
+      </div>
+      <div>
+        <p class="text-sm text-gray-600">Ask me about your finances, budgeting, or investment strategies.</p>
+      </div>
+    </div>
+    
+    <div class="mt-3">
+      <button class="w-full py-2 px-3 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm text-gray-700 text-left">
+        Ask a question...
+      </button>
+    </div>
+  </div>
+</div> 

app/views/layouts/shared/_breadcrumbs.html.erb

@@ -2,7 +2,7 @@
 
 <nav class="flex items-center gap-2 mb-6">
   <% if sidebar_toggle_enabled %>
-    <button data-action="sidebar#toggle" class="p-2 inline-flex rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer">
+    <button data-action="sidebar#toggle" data-side="left" class="p-2 inline-flex rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer">
       <%= icon("panel-left", color: "gray") %>
     </button>
   <% end %>
@@ -22,4 +22,10 @@
       <% end %>
     <% end %>
   </div>
+  
+  <div class="ml-auto">
+    <button data-action="sidebar#toggle" data-side="right" class="p-2 inline-flex rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer" title="Toggle AI Assistant">
+      <%= icon("panel-right", color: "gray") %>
+    </button>
+  </div>
 </nav>

db/migrate/20250226022326_add_show_ai_sidebar_to_users.rb

@@ -0,0 +1,5 @@
+class AddShowAiSidebarToUsers < ActiveRecord::Migration[7.2]
+  def change
+    add_column :users, :show_ai_sidebar, :boolean, default: true
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.2].define(version: 2025_02_20_200735) do
+ActiveRecord::Schema[7.2].define(version: 2025_02_26_022326) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "pgcrypto"
   enable_extension "plpgsql"
@@ -675,6 +675,7 @@ ActiveRecord::Schema[7.2].define(version: 2025_02_20_200735) do
     t.boolean "otp_required", default: false, null: false
     t.string "otp_backup_codes", default: [], array: true
     t.boolean "show_sidebar", default: true
+    t.boolean "show_ai_sidebar", default: false
     t.index ["email"], name: "index_users_on_email", unique: true
     t.index ["family_id"], name: "index_users_on_family_id"
     t.index ["otp_secret"], name: "index_users_on_otp_secret", unique: true, where: "(otp_secret IS NOT NULL)"