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
This commit is contained in:
Josh Pigford
2025-02-26 14:48:34 -06:00
parent 6b412c14cb
commit fbe90b79a0
4 changed files with 4 additions and 12 deletions

View File

@@ -27,9 +27,7 @@
<% else %>
<!-- Show welcome message when chat has no messages -->
<div class="flex items-start gap-3 mb-4 w-full">
<div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center flex-shrink-0 text-white">
<%= icon("bot") %>
</div>
<%= render "layouts/shared/ai_avatar" %>
<div class="p-4 max-w-[85%] text-gray-800">
<p>Hey <%= Current.user&.first_name || 'there' %>! I'm an AI built by Maybe to help with your finances. How can I assist you today?</p>
</div>

View File

@@ -2,9 +2,7 @@
<% @messages.each do |message| %>
<div class="flex items-start gap-3 <%= message.user? ? 'justify-end' : '' %> mb-4">
<% unless message.user? %>
<div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center flex-shrink-0 text-white">
<%= icon("bot") %>
</div>
<%= render "layouts/shared/ai_avatar" %>
<% end %>
<div class="<%= message.user? ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-800' %> rounded-lg p-4 max-w-[85%]">

View File

@@ -1,8 +1,6 @@
<div id="message_<%= message.id %>" class="flex items-start gap-3 <%= message.user? ? 'justify-end' : '' %> mb-4 w-full">
<% unless message.user? %>
<div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center flex-shrink-0 text-white">
<%= icon("bot") %>
</div>
<div class="p-1 max-w-[85%] text-gray-800">
<p><%= message.content %></p>
</div>

View File

@@ -5,9 +5,7 @@
<% if @message.user? %>
<%= turbo_stream.update "thinking" do %>
<div id="thinking" class="flex items-start gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center flex-shrink-0 text-white">
<%= icon("bot") %>
</div>
<%= render "layouts/shared/ai_avatar" %>
<div class="bg-gray-100 rounded-lg p-4 max-w-[85%] flex items-center">
<div class="flex gap-1">
<div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>