WIP

app/views/chats/_ai_avatar.html.erb

@@ -1,3 +1,4 @@
 <div class="w-16 h-16 flex-shrink-0 -ml-3 -mt-3">
-  <%= image_tag "ai.svg", alt: "AI", class: "w-full h-full" %>
+  <%# Never use svg as an image tag, it appears blurry in Safari %>
+  <%= inline_svg_tag "ai.svg", alt: "AI", class: "w-full h-full" %>
 </div>

app/views/chats/_ai_greeting.html.erb

@@ -1,4 +1,4 @@
-<div class="flex items-start gap-2 w-full">
+<div class="flex items-start w-full">
   <%= render "chats/ai_avatar" %>
 
   <div class="max-w-[85%] text-sm space-y-4 text-primary">
@@ -13,11 +13,11 @@
 
       <% questions = [
         {
-          icon: "bar-chart-2",
+          icon: "chart-area",
           text: "Evaluate investment portfolio"
         },
         {
-          icon: "credit-card",
+          icon: "wallet-minimal",
           text: "Show spending insights"
         },
         {
@@ -31,7 +31,7 @@
           <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] %>
+            <%= icon(question[:icon], color: "gray") %> <%= question[:text] %>
           </button>
         <% end %>
       </div>

app/views/chats/index.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag chat_frame do %>
-  <div class="p-4 flex flex-col h-full">
+  <div class="flex flex-col h-full md:p-4">
     <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 %>
@@ -25,7 +25,5 @@
         </div>
       <% end %>
     </div>
-
-    <%= render "messages/chat_form" %>
   </div>
 <% end %>

app/views/chats/new.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag chat_frame do %>
-  <div class="p-4 flex flex-col h-full">
+  <div class="flex flex-col h-full md:p-4">
     <%= render "chats/chat_nav", chat: @chat %>
 
     <div class="mt-auto py-8">

app/views/chats/show.html.erb

@@ -4,7 +4,7 @@
   <h1 class="sr-only"><%= @chat.title %></h1>
 
   <div class="flex flex-col h-full">
-    <div class="p-4">
+    <div class="md:p-4">
       <%= render "chats/chat_nav", chat: @chat %>
     </div>
 

app/views/layouts/application.html.erb

@@ -5,6 +5,7 @@
        data-controller="sidebar"
        data-sidebar-user-id-value="<%= Current.user.id %>"
        data-sidebar-config-value="<%= sidebar_config.to_json %>">
+    <% unless controller_name == 'chats' %>
     <nav class="flex justify-between lg:justify-start lg:flex-col shrink-0 lg:w-[84px] p-3 lg:px-0 lg:py-4 lg:mr-3">
 
       <button data-action="sidebar#toggleLeftPanelMobile" class="lg:hidden inline-flex p-2 rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer">
@@ -54,6 +55,7 @@
         </div>
       </div>
     </nav>
+    <% end %>
 
     <div class="flex justify-between lg:justify-normal grow overflow-y-auto">
       <%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300 hidden lg:block"),

app/views/messages/_chat_form.html.erb

@@ -4,32 +4,25 @@
   <% model = chat && chat.persisted? ? [chat, Message.new] : Chat.new %>
 
   <%= form_with model: model,
-                class: "flex flex-col gap-2 bg-container px-2 py-1.5 rounded-lg shadow-border-xs",
+                class: "flex items-center gap-2 bg-container p-2 rounded-full shadow-sm border border-gray-100 h-11",
                 data: { chat_target: "form" } do |f| %>
 
     <%# In the future, this will be a dropdown with different AI models %>
     <%= f.hidden_field :ai_model, value: "gpt-4o" %>
+    
+    <button type="button" class="flex-shrink-0 text-secondary p-1">
+      <%= lucide_icon("plus", class: "w-5 h-5") %>
+    </button>
 
     <%= f.text_area :content, placeholder: "Ask anything ...", value: message_hint,
-                  class: "w-full border-0 focus:ring-0 text-sm resize-none px-1 bg-transparent",
+                  class: "w-full border-0 focus:ring-0 text-sm resize-none bg-transparent py-0",
                   data: { chat_target: "input", action: "input->chat#autoResize keydown->chat#handleInputKeyDown" },
                   rows: 1 %>
 
-    <div class="flex items-center justify-between gap-1">
-      <div class="flex items-center gap-1">
-        <%# These are disabled for now, but in the future, will all open specific menus with their own context and search %>
-        <% ["plus", "command", "at-sign", "mouse-pointer-click"].each do |icon| %>
-          <button type="button" title="Coming soon" class="cursor-not-allowed w-8 h-8 flex justify-center items-center hover:bg-surface-hover rounded-lg">
-            <%= icon(icon, color: "gray") %>
-          </button>
-        <% end %>
-      </div>
-
-      <button type="submit" class="w-8 h-8 flex justify-center items-center text-secondary hover:bg-surface-hover cursor-pointer rounded-lg">
-        <%= icon("arrow-up") %>
-      </button>
-    </div>
+    <button type="submit" class="flex-shrink-0 text-secondary bg-gray-50 rounded-full p-2">
+      <%= lucide_icon("arrow-up", class: "w-4 h-4") %>
+    </button>
   <% end %>
 
-  <p class="text-xs text-secondary">AI responses are informational only and are not financial advice.</p>
+  <p class="text-xs text-secondary mt-1">AI responses are informational only and are not financial advice.</p>
 </div>

app/views/pages/dashboard/_balance_sheet.html.erb

@@ -53,9 +53,9 @@
                     </div>
                     
                     <div class="md:hidden flex items-center gap-2">
-                      <div class="flex">
+                      <div class="flex gap-[3px]">
                         <% 10.times do |i| %>
-                          <div class="h-4 w-1 mx-0.5 rounded-sm <%= i < (account_group.weight / 10.0).ceil ? '' : 'opacity-20' %>" style="background-color: <%= account_group.color %>;"></div>
+                          <div class="w-[2px] h-[10px] rounded-lg <%= i < (account_group.weight / 10.0).ceil ? '' : 'opacity-20' %>" style="background-color: <%= account_group.color %>;"></div>
                         <% end %>
                       </div>
                       <p class="text-sm"><%= number_to_percentage(account_group.weight, precision: 2) %></p>