Personal finance AI (v1) (#2022)

* AI sidebar

* Add chat and message models with associations

* Implement AI chat functionality with sidebar and messaging system

- Add chat and messages controllers
- Create chat and message views
- Implement chat-related routes
- Add message broadcasting and user interactions
- Update application layout to support chat sidebar
- Enhance user model with initials method

* Refactor AI sidebar with enhanced chat menu and interactions

- Update sidebar layout with dynamic width and improved responsiveness
- Add new chat menu Stimulus controller for toggling between chat and chat list views
- Improve chat list display with recent chats and empty state
- Extract AI avatar to a partial for reusability
- Enhance message display and interaction styling
- Add more contextual buttons and interaction hints

* Improve chat scroll behavior and message styling

- Refactor chat scroll functionality with Stimulus controller
- Optimize message scrolling in chat views
- Update message styling for better visual hierarchy
- Enhance chat container layout with flex and auto-scroll
- Simplify message rendering across different chat views

* Extract AI avatar to a shared partial for consistent styling

- Refactor AI avatar rendering across chat views
- Replace hardcoded avatar markup with a reusable partial
- Simplify avatar display in chats and messages views

* Update sidebar controller to handle right panel width dynamically

- Add conditional width class for right sidebar panel
- Ensure consistent sidebar toggle behavior for both left and right panels
- Use specific width class for right panel (w-[375px])

* Refactor chat form and AI greeting with flexible partials

- Extract message form to a reusable partial with dynamic context support
- Create flexible AI greeting partial for consistent welcome messages
- Simplify chat and sidebar views by leveraging new partials
- Add support for different form scenarios (chat, new chat, sidebar)
- Improve code modularity and reduce duplication

* Add chat clearing functionality with dynamic menu options

- Implement clear chat action in ChatsController
- Add clear chat route to support clearing messages
- Update AI sidebar with dropdown menu for chat actions
- Preserve system message when clearing chat
- Enhance chat interaction with new menu options

* Add frontmatter to project structure documentation

- Create initial frontmatter for structure.mdc file
- Include description and configuration options
- Prepare for potential dynamic documentation rendering

* Update general project rules with additional guidelines

- Add rule for using `Current.family` instead of `current_family`
- Include new guidelines for testing, API routes, and solution approach
- Expand project-specific rules for more consistent development practices

* Add OpenAI gem and AI-friendly data representations

- Add `ruby-openai` gem for AI integration
- Implement `to_ai_readable_hash` methods in BalanceSheet and IncomeStatement
- Include Promptable module in both models
- Add savings rate calculation method in IncomeStatement
- Prepare financial models for AI-powered insights and interactions

* Enhance AI Financial Assistant with Advanced Querying and Debugging Capabilities

- Implement comprehensive AI financial query system with function-based interactions
- Add detailed debug logging for AI responses and function calls
- Extend BalanceSheet and IncomeStatement models with AI-friendly methods
- Create robust error handling and fallback mechanisms for AI queries
- Update chat and message views to support debug mode and enhanced rendering
- Add AI query routes and initial test coverage for financial assistant

* Refactor AI sidebar and chat layout with improved structure and comments

- Remove inline AI chat from application layout
- Enhance AI sidebar with more semantic HTML structure
- Add descriptive comments to clarify different sections of chat view
- Improve flex layout and scrolling behavior in chat messages container
- Optimize message rendering with more explicit class names and structure

* Add Markdown rendering support for AI chat messages

- Implement `markdown` helper method in ApplicationHelper using Redcarpet
- Update message view to render AI messages with Markdown formatting
- Add comprehensive Markdown rendering options (tables, code blocks, links)
- Enhance AI Financial Assistant prompt to encourage Markdown usage
- Remove commented Markdown CSS in Tailwind application stylesheet

* Missing comma

* Enhance AI response processing with chat history context

* Improve AI debug logging with payload size limits and internal message flag

* Enhance AI chat interaction with improved thinking indicator and scrolling behavior

* Add AI consent and enable/disable functionality for AI chat

* Upgrade Biome and refactor JavaScript template literals

- Update @biomejs/biome to latest version with caret (^) notation
- Refactor AI query and chat controllers to use template literals
- Standardize npm scripts formatting in package.json

* Add beta testing usage note to AI consent modal

* Update test fixtures and configurations for AI chat functionality

- Add family association to chat fixtures and tests
- Set consistent password digest for test users
- Enable AI for test users
- Add OpenAI access token for test environment
- Update chat and user model tests to include family context

* Simplify data model and get tests passing

* Remove structure.mdc from version control

* Integrate AI chat styles into existing prose pattern

* Match Figma design spec, implement Turbo frames and actions for chats controller

* AI rules refresh

* Consolidate Stimulus controllers, thinking state, controllers, and views

* Naming, domain alignment

* Reset migrations

* Improve data model to support tool calls and message types

* Tool calling tests and fixtures

* Tool call implementation and test

* Get assistant test working again

* Test updates

* Process tool calls within provider

* Chat UI back to working state again

* Remove stale code

* Tests passing

* Update openai class naming to avoid conflicts

* Reconfigure test env

* Rebuild gemfile

* Fix naming conflicts for ChatResponse

* Message styles

* Use OpenAI conversation state management

* Assistant function base implementation

* Add back thinking messages, clean up error handling for chat

* Fix sync error when security price has bad data from provider

* Add balance sheet function to assistant

* Add better function calling error visibility

* Add income statement function

* Simplify and clean up "thinking" interactions with Turbo frames

* Remove stale data definitions from functions

* Ensure VCR fixtures working with latest code

* basic stream implementation

* Get streaming working

* Make AI sidebar wider when left sidebar is collapsed

* Get tests working with streaming responses

* Centralize provider error handling

* Provider data boundaries

---------

Co-authored-by: Josh Pigford <josh@joshpigford.com>

app/views/chats/_ai_avatar.html.erb

@@ -0,0 +1,3 @@
+<div class="w-16 h-16 flex-shrink-0 -ml-3 -mt-3">
+  <%= image_tag "ai.svg", alt: "AI", class: "w-full h-full" %>
+</div>

app/views/chats/_ai_consent.html.erb

@@ -0,0 +1,33 @@
+<div class="flex flex-col items-center justify-start h-full p-6 text-center">
+  <div class="border border-gray-200 rounded-lg p-4 bg-white">
+    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+      <%= icon("sparkles") %>
+    </div>
+
+    <h3 class="text-lg font-medium text-gray-900 mb-2">Enable Personal Finance AI</h3>
+
+    <p class="text-gray-600 mb-6 text-sm">
+      <% if Current.user.ai_available? %>
+        Our personal finance AI can help answer questions about your finances and provide insights based on your data.
+        To use this feature, you'll need to explicitly enable it.
+      <% else %>
+        To use the AI assistant, you need to set the <code class="bg-gray-100 px-1 py-0.5 rounded font-mono text-xs">OPENAI_ACCESS_TOKEN</code>
+        environment variable in your self-hosted instance.
+      <% end %>
+    </p>
+
+    <% unless self_hosted? %>
+      <p class="text-gray-600 mb-6 text-sm">
+        NOTE: During beta testing, we'll be monitoring usage and AI conversations to improve the assistant.
+      </p>
+    <% end %>
+
+    <% if Current.user.ai_available? %>
+      <%= form_with url: user_path(Current.user), method: :patch, class: "w-full", data: { turbo: false } do |form| %>
+        <%= form.hidden_field "user[ai_enabled]", value: true %>
+        <%= form.hidden_field "user[redirect_to]", value: "home" %>
+        <%= form.submit "Enable AI Assistant", class: "cursor-pointer hover:bg-black w-full py-2 px-4 bg-gray-800 text-white rounded-lg text-sm font-medium" %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

app/views/chats/_ai_greeting.html.erb

@@ -0,0 +1,40 @@
+<div class="flex items-start gap-2 w-full">
+  <%= render "chats/ai_avatar" %>
+
+  <div class="max-w-[85%] text-sm space-y-4 text-primary">
+    <p>Hey <%= Current.user&.first_name || "there" %>! I'm an AI built by Maybe to help with your finances. I have access to the web and your account data.</p>
+
+    <p>
+      You can use <span class="bg-white border border-gray-200 px-1.5 py-0.5 rounded font-mono text-xs">/</span> to access commands
+    </p>
+
+    <div class="space-y-3">
+      <p>Here's a few questions you can ask:</p>
+
+      <% questions = [
+        {
+          icon: "bar-chart-2",
+          text: "Evaluate investment portfolio"
+        },
+        {
+          icon: "credit-card",
+          text: "Show spending insights"
+        },
+        {
+          icon: "alert-triangle",
+          text: "Find unusual patterns"
+        }
+      ] %>
+
+      <div class="space-y-2.5">
+        <% questions.each do |question| %>
+          <button data-action="chat#submitSampleQuestion"
+                  data-chat-question-param="<%= question[:text] %>"
+                  class="w-full flex items-center gap-2 border border-tertiary rounded-full py-1.5 px-2.5 hover:bg-gray-100">
+            <%= icon(question[:icon]) %> <%= question[:text] %>
+          </button>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

app/views/chats/_chat.html.erb

@@ -0,0 +1,16 @@
+<%# locals: (chat:) %>
+
+<%= tag.div class: "flex items-center justify-between px-4 py-3 bg-container shadow-border-xs rounded-lg" do %>
+  <div class="grow">
+    <%= render "chats/chat_title", chat: chat, ctx: "list" %>
+
+    <p class="text-sm text-secondary">
+      <%= time_ago_in_words(chat.updated_at) %> ago
+    </p>
+  </div>
+
+  <%= contextual_menu icon: "more-vertical" do %>
+    <%= contextual_menu_item("Edit chat", url: edit_chat_path(chat), icon: "pencil", turbo_frame: dom_id(chat, :title)) %>
+    <%= contextual_menu_destructive_item("Delete chat", chat_path(chat)) %>
+  <% end %>
+<% end %>

app/views/chats/_chat_nav.html.erb

@@ -0,0 +1,24 @@
+<%# locals: (chat:) %>
+
+<nav class="flex items-center justify-between">
+  <% path = chat.new_record? ? chats_path : chats_path(previous_chat_id: chat.id) %>
+
+  <div class="flex items-center gap-2 grow">
+    <%= link_to path, id: "chat-nav-back", class: "w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-hover" do %>
+      <%= icon("menu", color: "gray" ) %>
+    <% end %>
+
+    <div class="grow">
+      <%= render "chats/chat_title", chat: chat, ctx: "chat" %>
+    </div>
+  </div>
+
+  <%= contextual_menu icon: "more-vertical", id: "chat-menu" do %>
+    <%= contextual_menu_item "Start new chat", url: new_chat_path, icon: "plus" %>
+
+    <% unless chat.new_record? %>
+      <%= contextual_menu_item "Edit chat title", url: edit_chat_path(chat, ctx: "chat"), icon: "pencil", turbo_frame: dom_id(chat, "title") %>
+      <%= contextual_menu_destructive_item "Delete chat", chat_path(chat), turbo_confirm: "Are you sure you want to delete this chat?" %>
+    <% end %>
+  <% end %>
+</nav>

app/views/chats/_chat_title.html.erb

@@ -0,0 +1,11 @@
+<%# locals: (chat:, ctx: "list") %>
+
+<%= turbo_frame_tag dom_id(chat, :title), class: "block" do %>
+  <% if chat.new_record? || ctx == "chat" %>
+    <h3 class="text-sm font-medium text-primary"><%= chat.title || "New chat" %></h3>
+  <% else %>
+    <%= link_to chat_path(chat), data: { turbo_frame: chat_frame } do %>
+      <h3 class="truncate text-sm font-medium text-primary"><%= chat.title %></h3>
+    <% end %>
+  <% end %>
+<% end %>

app/views/chats/_error.html.erb

@@ -0,0 +1,17 @@
+<%# locals: (chat:) %>
+
+<div id="chat-error" class="px-3 py-2 bg-red-100 border border-red-500 rounded-lg">
+  <% if chat.debug_mode? %>
+    <div class="overflow-x-auto text-xs p-4 bg-red-200 rounded-md mb-2">
+      <code><%= chat.error %></code>
+    </div>
+  <% end %>
+
+  <div class="flex items-center justify-between gap-2">
+    <p class="text-xs text-red-500">Failed to generate response.  Please try again.</p>
+
+    <%= button_to retry_chat_path(chat), method: :post, class: "btn btn--primary" do %>
+      <span>Retry</span>
+    <% end %>
+  </div>
+</div>

app/views/chats/_thinking_indicator.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (chat:, message: "Thinking ...") -%>
+
+<div id="thinking-indicator" class="flex items-start">
+  <%= render "chats/ai_avatar" %>
+  <p class="text-sm text-secondary animate-pulse"><%= message %></p>
+</div>

app/views/chats/edit.html.erb

@@ -0,0 +1,8 @@
+<%= turbo_frame_tag dom_id(@chat, :title), class: "block" do %>
+  <% bg_class = params[:ctx] == "chat" ? "bg-white" : "bg-container-inset" %>
+  <%= styled_form_with model: @chat,
+                       class: class_names("p-1 rounded-md font-medium text-primary w-full", bg_class),
+                       data: { controller: "auto-submit-form", auto_submit_form_trigger_event_value: "blur" } do |f| %>
+    <%= f.text_field :title, data: { auto_submit_form_target: "auto" }, inline: true %>
+  <% end %>
+<% end %>

app/views/chats/index.html.erb

@@ -0,0 +1,31 @@
+<%= turbo_frame_tag chat_frame do %>
+  <div class="p-4 flex flex-col h-full">
+    <nav class="mb-6">
+      <% back_path = @last_viewed_chat ? chat_path(@last_viewed_chat) : new_chat_path %>
+      <%= link_to back_path, class: "w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-hover" do %>
+        <%= icon("arrow-left", color: "gray" ) %>
+      <% end %>
+    </nav>
+
+    <div class="grow">
+      <h1 class="text-xl font-medium mb-6">Chats</h1>
+
+      <% if @chats.any? %>
+        <div class="space-y-2 px-0.5">
+          <%= render @chats %>
+        </div>
+      <% else %>
+        <div class="text-center py-12 bg-white rounded-lg border border-gray-200">
+          <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <%= icon("message-square", size: "lg") %>
+          </div>
+          <h3 class="text-lg font-medium text-gray-900 mb-1">No chats yet</h3>
+          <p class="text-gray-500 mb-4">Start a new conversation with the AI assistant</p>
+          <%= link_to "Start a chat", new_chat_path, class: "inline-flex items-center gap-2 py-2 px-4 bg-gray-800 text-white rounded-lg text-sm font-medium" %>
+        </div>
+      <% end %>
+    </div>
+
+    <%= render "messages/chat_form" %>
+  </div>
+<% end %>

app/views/chats/new.html.erb

@@ -0,0 +1,11 @@
+<%= turbo_frame_tag chat_frame do %>
+  <div class="p-4 flex flex-col h-full">
+    <%= render "chats/chat_nav", chat: @chat %>
+
+    <div class="mt-auto py-8">
+      <%= render "chats/ai_greeting" %>
+    </div>
+
+    <%= render "messages/chat_form", chat: @chat %>
+  </div>
+<% end %>

app/views/chats/show.html.erb

@@ -0,0 +1,35 @@
+<%= turbo_frame_tag chat_frame do %>
+  <%= turbo_stream_from @chat %>
+
+  <h1 class="sr-only"><%= @chat.title %></h1>
+
+  <div class="flex flex-col h-full">
+    <div class="p-4">
+      <%= render "chats/chat_nav", chat: @chat %>
+    </div>
+
+    <div id="messages" class="grow overflow-y-auto p-4 space-y-6" data-chat-target="messages">
+      <% if @chat.conversation_messages.any? %>
+        <% @chat.conversation_messages.ordered.each do |message| %>
+          <%= render message %>
+        <% end %>
+      <% else %>
+        <div class="mt-auto">
+          <%= render "chats/ai_greeting", context: "chat" %>
+        </div>
+      <% end %>
+
+      <% if params[:thinking].present? %>
+        <%= render "chats/thinking_indicator", chat: @chat %>
+      <% end %>
+
+      <% if @chat.error.present? %>
+        <%= render "chats/error", chat: @chat %>
+      <% end %>
+    </div>
+
+    <div class="p-4">
+      <%= render "messages/chat_form", chat: @chat %>
+    </div>
+  </div>
+<% end %>