From e69a78f34ca8cc08d95736964968ef8527a59776 Mon Sep 17 00:00:00 2001
From: Keith Schacht <krschacht@gmail.com>
Date: Fri, 12 Jan 2024 12:33:32 -0600
Subject: [PATCH] Improve tooltips

---
 .../stylesheets/application.tailwind.css      | 19 +++++++++++++++++++
 app/helpers/application_helper.rb             |  7 ++++---
 app/views/conversations/show.html.erb         |  4 ++--
 app/views/messages/_message.html.erb          |  8 ++++----
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 922a1c140..4d200191a 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -26,6 +26,25 @@
   scrollbar-width: none;
 }
 
+*, ::before, ::after {
+  --tooltip-tail: 7px;
+  --tooltip-tail-offset: calc(100% + 7px - var(--tooltip-tail));
+  --tooltip-offset: calc(100% + 7px + var(--tooltip-tail, 0px));
+  /* https://unused-css.com/blog/css-outer-glow/ */
+}
+
+.tooltip-bottom:before {
+  padding: 0.4rem 0.7rem !important;
+  box-shadow: 0px 3px 4px 0px #eeeeee29;
+}
+
+.tooltip-top:before {
+  padding: 0.4rem 0.7rem !important;
+  box-shadow: 0px -3px 4px 0px #eeeeee29;
+}
+
+
+
   /* Add this to center the modal */
   .modal-bg {
     background-color: rgba(0, 0, 0, 0.5);
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index b5f43ae45..8cce23658 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -16,11 +16,12 @@ def icon(name, opts = {})
     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]"
+    title = opts.delete(:title)
 
-    if opts[:title]
-      direction = opts[:tooltip] || 'top'
+    if title
+      direction = opts[:tooltip] || 'bottom'
 
-      content_tag(:div, class: classes + " tooltip tooltip-#{direction} hover:tooltip-open", data: { tip: opts[:title].to_s }) do
+      content_tag(:div, class: classes + " tooltip tooltip-#{direction} hover:tooltip-open", data: { tip: title.to_s }) do
         heroicon name, **opts
       end
     else
diff --git a/app/views/conversations/show.html.erb b/app/views/conversations/show.html.erb
index ec3330233..683e3a3f5 100644
--- a/app/views/conversations/show.html.erb
+++ b/app/views/conversations/show.html.erb
@@ -4,8 +4,8 @@
 
     <div id="left-content-container" class="flex flex-col flex-grow overflow-auto scrollbar-hide">
       <div id="left-content" class="flex-grow overflow-auto scrollbar-hide">
-        <div class="sticky top-0 pt-3 mb-1 bg-black">
-          <%= render 'gpt_sidebar', title: "ChatGPT but really long so it wraps", selected: false %>
+        <div class="sticky top-0 pt-3 mb-1 bg-black z-10">
+          <%= render 'gpt_sidebar', title: "ChatGPT", selected: false %>
         </div>
         <%= render 'gpt_sidebar', title: "Samantha" %>
         <%= render 'gpt_sidebar', title: "Samantha but really long so it wraps" %>
diff --git a/app/views/messages/_message.html.erb b/app/views/messages/_message.html.erb
index da707e32f..e5fac9ea0 100644
--- a/app/views/messages/_message.html.erb
+++ b/app/views/messages/_message.html.erb
@@ -14,12 +14,12 @@
         <%= message.content_text %>
       </div>
 
-      <div class="mt-2 flex justify-start gap-2 text-gray-400 invisible group-hover:visible">
+      <div class="mt-2 flex justify-start gap-2 text-gray-500 invisible group-hover:visible">
         <% if message.user? %>
-          <%= icon "pencil", variant: :micro, size: 18, class: 'hover:text-gray-600 cursor-pointer', title: "Edit", tooltip: :left %>
+          <%= icon "pencil-square", variant: :outline, size: 18, class: 'hover:text-gray-900 cursor-pointer stroke-2', title: "Edit" %>
         <% else %>
-          <%= 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 %>
+          <%= icon "clipboard", variant: :outline, size: 18, class: 'hover:text-gray-900 cursor-pointer stroke-2', title: "Copy" %>
+          <%= icon "arrow-path", variant: :outline, size: 18, class: 'hover:text-gray-900 cursor-pointer stroke-2', title: "Retry" %>
         <% end %>
       </div>
     </div>