app/views/chats/show.html.erb

@@ -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>

app/views/chats/show.turbo_stream.erb

@@ -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%]">

app/views/messages/_message.html.erb

@@ -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>

app/views/messages/create.turbo_stream.erb

@@ -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>