Migrate to new icons w/ helper

app/helpers/application_helper.rb

@@ -1,2 +1,32 @@
 module ApplicationHelper
+  def icon(name, opts = {})
+    opts = opts.symbolize_keys
+
+    variant = opts[:variant]&.to_sym || :solid
+    default_size = case variant
+      when :outline, :solid
+        24
+      when :mini
+        20
+      when :micro
+        16
+      end
+
+    size = opts[:size] || default_size
+    classes = opts[:class] || ""
+    raise "Do not include w-# or h-# in the class, use :size instead" if classes.match?(/(\bw-|\bh-)/)
+    classes += " w-[#{size}px] h-[#{size}px]"
+
+    if opts[:title]
+      direction = opts[:tooltip] || 'top'
+
+      content_tag(:div, class: classes + " tooltip tooltip-#{direction} hover:tooltip-open", data: { tip: opts[:title].to_s }) do
+        heroicon name, **opts
+      end
+    else
+      content_tag(:div, class: classes) do
+        heroicon name, **opts
+      end
+    end
+  end
 end

app/views/conversations/_conversation_sidebar.html.erb

@@ -1,17 +1,13 @@
 
 <div class="h-9 flex pr-2 rounded-lg hover:bg-zinc-400 hover:bg-opacity-25 <%= defined?(selected) && selected ? 'bg-zinc-400 bg-opacity-25' : '' %> justify-between items-center group cursor-pointer mr-5">
-<div class="flex-1 ml-2 text-white truncate text-sm text-opacity-80">
+<div class="flex-1 ml-2 text-white truncate text-sm text-opacity-80 w-5">
     Some long text that might be too long and needs to be truncated
   </div>
   <div class="<%= defined?(selected) && selected ? 'flex' : 'hidden' %> group-hover:flex gap-2 pl-2">
     <% if !defined?(settings) || settings %>
-      <div class="inline tooltip tooltip-top hover:tooltip-open" data-tip="More">
-        <%= heroicon("dots-horizontal", variant: :solid, options: { class: 'ml-1 h-4 w-4 text-gray-400 invisible group-hover:visible hover:text-white cursor-pointer' }) %>
-      </div>
+      <%= icon "ellipsis-horizontal", variant: :micro, size: 18, class: "inline ml-1 text-gray-400 invisible group-hover:visible hover:text-white cursor-pointer", title: "More" %>
     <% end %>
 
-    <div class="inline tooltip tooltip-top hover:tooltip-open" data-tip="Archive">
-      <%= heroicon("archive", variant: :solid, options: { class: "ml-1 h-4 w-4 text-gray-400 cursor-pointer #{defined?(selected) && selected ? 'text-white' : 'invisible group-hover:visible hover:text-white'}" }) %>
-    </div>
+    <%= icon "archive-box", variant: :outline, size: 16, class: "inline ml-1 text-gray-400 cursor-pointer #{defined?(selected) && selected ? 'text-white' : 'invisible group-hover:visible hover:text-white'}", title: "Archive" %>
   </div>
 </div>

app/views/conversations/_gpt_header.html.erb

@@ -1,4 +1,4 @@
 <div class="hover:bg-gray-100 cursor-pointer inline-flex px-3 py-2 rounded-xl items-center text-bold">
   <%= conversation.assistant.name %>
-  <%= heroicon("chevron-down", variant: :solid, options: { class: 'ml-1 h-4 w-4 inline text-gray-500' }) %>
+  <%= icon "chevron-down", variant: :mini, class: 'text-gray-500 ml-[2px]' %>
 </div>

app/views/conversations/_gpt_sidebar.html.erb

@@ -5,13 +5,9 @@
     </div>
     <div class="<%= defined?(selected) && selected ? 'flex' : 'hidden' %> group-hover:flex gap-2 pl-2">
       <% if !defined?(settings) || settings %>
-        <div class="inline tooltip tooltip-top hover:tooltip-open" data-tip="More">
-          <%= heroicon("dots-horizontal", variant: :solid, options: { class: 'ml-1 h-4 w-4 inline text-gray-400 invisible group-hover:visible hover:text-white cursor-pointer' }) %>
-        </div>
+        <%= icon "ellipsis-horizontal", variant: :micro, size: 18, class: "inline ml-1 text-gray-400 invisible group-hover:visible hover:text-white cursor-pointer", title: "More" %>
       <% end %>
 
-      <div class="inline tooltip tooltip-top hover:tooltip-open" data-tip="New chat">
-        <%= heroicon("pencil-alt", variant: :solid, options: { class: "ml-1 h-4 w-4 inline text-gray-400 #{defined?(selected) && selected ? 'text-white' : 'invisible group-hover:visible hover:text-white'}" }) %>
-      </div>
+      <%= icon "pencil-square", variant: :micro, size: 18, class: "inline ml-1 text-gray-400 cursor-pointer #{defined?(selected) && selected ? 'text-white' : 'invisible group-hover:visible hover:text-white'}", title: "New chat" %>
     </div>
   </div>

app/views/conversations/show.html.erb

@@ -53,8 +53,8 @@
     <div id="wide-header" class="flex-none justify-between ml-2 mt-2 mb-3 h-10 text-black dark:text-white text-lg hidden md:flex">
       <%= render 'gpt_header', conversation: @conversation %>
 
-      <div id="right-aligned-content" class="hover:bg-gray-100 cursor-pointer inline-flex mr-3 border border-grey-200 rounded-xl px-2 py-2">
-        <%= heroicon "logout", variant: :outline, options: { class: 'h-5 w-5 text-gray-500 rotate-[270deg]' } %>
+      <div id="right-aligned-content" class="hover:bg-gray-100 cursor-pointer inline-flex mr-5 border border-gray-300 rounded-lg px-2 py-2 mt-1">
+        <%= icon "arrow-up-tray", variant: :outline, size: 18, class: 'text-black', title: "Share", tooltip: :bottom %>
       </div>
     </div>
 

app/views/messages/_message.html.erb

@@ -16,10 +16,10 @@
 
       <div class="mt-2 flex justify-start gap-2 text-gray-400 invisible group-hover:visible">
         <% if message.user? %>
-          <%= heroicon "pencil", variant: :outline, options: { class: 'h-4 w-4 hover:text-black cursor-pointer' } %>
+          <%= icon "pencil", variant: :micro, size: 18, class: 'hover:text-gray-600 cursor-pointer', title: "Edit", tooltip: :left %>
         <% else %>
-          <%= heroicon "clipboard", variant: :outline, options: { class: 'h-4 w-4 hover:text-black cursor-pointer' } %>
-          <%= heroicon "refresh", variant: :outline, options: { class: 'h-4 w-4 hover:text-black cursor-pointer' } %>
+          <%= icon "clipboard", variant: :micro, size: 18, class: 'hover:text-gray-600 cursor-pointer', title: "Copy", tooltip: :left %>
+          <%= icon "arrow-path", variant: :micro, size: 18, class: 'hover:text-gray-600 cursor-pointer', title: "Retry", tooltip: :right %>
         <% end %>
       </div>
     </div>