sciencehistory · eddierubeiz · Dec 22, 2025 · Dec 18, 2025 · Dec 18, 2025 · Dec 18, 2025
diff --git a/app/components/oral_history/ai_conversation_display_component.html.erb b/app/components/oral_history/ai_conversation_display_component.html.erb
@@ -3,19 +3,30 @@
 </div>
 
 <% if footnote_list.present? %>
-  <hr class="mt-4 mb-4">
+  <h3 class="fw-bold mt-5 mb-4">Interviews Referenced</h3>
 
   <% footnote_list.each do |footnote_item_data| %>
-    <p id="<%= footnote_item_data.anchor %>">
-      <span class="badge bg-primary rounded-pill"><%= footnote_item_data.number %></span>
-
-      <%= link_to(link_from_ai_conversation_footnote(footnote_item_data), class: "fs-5", target: "_blank") do  %>
-        <%= footnote_item_data.short_citation_title %>
-        ¶<%= footnote_item_data.short_citation_paragraphs %>
-        <%= footnote_item_data.nearest_timecode_formatted.present? ? " near <code>#{footnote_item_data.nearest_timecode_formatted}</code>".html_safe :  "" -%>:
-      <%- end %>
-      “<%= footnote_item_data.quote %>”
-    </p>
+    <div id="<%= footnote_item_data.anchor %>" class="mb-3">
+
+      <h4 class="fs-6 fw-semibold text-decoration-underline mb-1 mt-4">
+        <%= link_to "##{footnote_item_data.ref_anchor}", class: "default-link-style" do %>
+          <span class="badge bg-primary rounded-pill"><%= footnote_item_data.number %></span>
+        <% end %>
+
+        <%= link_to(link_from_ai_conversation_footnote(footnote_item_data),
+                    target: "_blank",
+                    "data-shi-slot" => "footnote-title",
+                    class: "default-link-style") do  -%>
+          <%= footnote_item_data.short_citation_title -%> —
+          ¶<%= footnote_item_data.short_citation_paragraphs -%>
+          <%= footnote_item_data.nearest_timecode_formatted.present? ? " near <span>#{footnote_item_data.nearest_timecode_formatted}</span>".html_safe :  "" -%>
+        <%- end %>
+      </h4>
+
+      <div data-shi-slot="footnote-quote">
+        “<%= footnote_item_data.quote %>”
+      </div>
+    </div>
   <% end %>
 <% end %>
 
@@ -42,9 +53,9 @@
     </dl>
 
     <h3>Chunks (passages) retrieved</h3>
-    <% debug_chunks_list.each do |chunk| %>
+    <% debug_chunks_list.each_with_index do |chunk, index| %>
         <details class="mt-2">
-          <summary><%= chunk.id %>: <%= chunk.oral_history_content.work.title %>: paragraphs <%= chunk.start_paragraph_number %> - <%= chunk.end_paragraph_number %>, cosine_distance: <%= cosine_distance_for_chunk(chunk.id) %></summary>
+          <summary><%= index + 1 %> (<%= chunk.id %>) <%= chunk.oral_history_content.work.title %>: paragraphs <%= chunk.start_paragraph_number %> - <%= chunk.end_paragraph_number %>, cosine_distance: <%= cosine_distance_for_chunk(chunk.id) %></summary>
 
             <div class="ms-5 mt-2">
               <%= simple_format chunk.text %>

diff --git a/app/components/oral_history/ai_conversation_footnote_reference_component.html.erb b/app/components/oral_history/ai_conversation_footnote_reference_component.html.erb
@@ -4,11 +4,9 @@
   <%- end -%>
   <%= link_to(link_from_ai_conversation_footnote(footnote_item),
               target: "_blank",
-              "data-bs-toggle" => "popover",
-              "data-bs-content" => "“#{footnote_item.quote}”",
-              "data-bs-trigger" => "hover focus",
-              "data-bs-placement" => "bottom"
+              "data-shi-toggle" => "oh-ai-footnote-popover",
+              "data-shi-footnote-ref" => footnote_item.anchor,
               ) do -%>
-    <span class="badge bg-secondary-subtle rounded-pill"><%= footnote_item.short_citation_title %> ~ <%= footnote_item.nearest_timecode_formatted %></span>
+    <span class="badge bg-secondary-subtle rounded-pill"><%= footnote_item.short_citation_title %></span>
   <%- end -%>
 <%- end -%>
diff --git a/app/frontend/entrypoints/application.js b/app/frontend/entrypoints/application.js
@@ -89,3 +89,4 @@ import "../javascript/main_nav_collapse_toggle.js";
 import "../javascript/lazy_member_images.js"
 import "../javascript/transcript_toggle.js"
 import "../javascript/admin/extent_converter.js"
+import "../javascript/oh_ai_footnote_popover.js"
diff --git a/app/frontend/javascript/oh_ai_footnote_popover.js b/app/frontend/javascript/oh_ai_footnote_popover.js
@@ -0,0 +1,34 @@
+import domready from 'domready';
+import { Popover } from 'bootstrap';
+
+
+domready(function() {
+  // Find things noted for our custom popover. Look up citation quote and refernece from
+  // footnote later in com, and use bootstrap popover to make it a popover here!
+  //
+  // Use a custom template to make the "title" slot actually at the bottom, and not
+  // a header -- we use it for citation referece.
+
+  document.querySelectorAll('[data-shi-toggle=oh-ai-footnote-popover]').forEach( element => {
+    const footnote_id = element.getAttribute("data-shi-footnote-ref");
+
+    const footnoteEl = document.getElementById(footnote_id);
+
+    const reference_title = footnoteEl.querySelector("[data-shi-slot=footnote-title]");
+    const reference_quote = footnoteEl.querySelector("[data-shi-slot=footnote-quote]");
+
+    const popover = new Popover(element, {
+      content: reference_quote,
+      title: reference_title,
+      trigger: "hover focus",
+      placement: "bottom",
+      template: `<div class="popover" role="tooltip">
+        <div class="popover-arrow"></div>
+        <div class="popover-body"></div>
+        <div class="popover-header"></div>
+      </div>`,
+      customClass: "oh-ai-footnote-popover popover-deep-shadow"
+    });
+
+  });
+});
diff --git a/app/frontend/stylesheets/local/ai_conversation_display.scss b/app/frontend/stylesheets/local/ai_conversation_display.scss
@@ -2,11 +2,11 @@
 .ai-conversation-display-footnote-reference {
   display: inline-flex;
   margin-left: 0.25em;
-  margin-right: 0;
+  margin-right: 0.25em;
 
   // raise it up a bit to more footnotey, but there isn't tons of room
   position: relative;
-  bottom: 0.2em;
+  bottom: 0.1em;
 
   a:nth-child(1) .badge {
     border-top-right-radius: 0 !important;
@@ -20,3 +20,14 @@
     border-bottom-left-radius: 0 !important;
   }
 }
+
+
+// We put the so-called "header" on bottom, so need to fix corners
+.oh-ai-footnote-popover {
+  .popover-header {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: var(--bs-popover-inner-border-radius);
+    border-bottom-right-radius: var(--bs-popover-inner-border-radius);
+  }
+}
diff --git a/app/frontend/stylesheets/local/oh_audio.scss b/app/frontend/stylesheets/local/oh_audio.scss
@@ -337,7 +337,7 @@
 }
 
 .transcript-footnote-popover {
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  @extend .popover-deep-shadow;
 
   a {
     // Make it look like a link, not sure why it wasn't looking like any kind

diff --git a/app/frontend/stylesheets/local/site_wide.scss b/app/frontend/stylesheets/local/site_wide.scss
@@ -101,6 +101,9 @@ hr.brand {
   margin-bottom: 3em;
 }
 
+.emphasis-color {
+  color: $shi-red;
+}
 
 // meant to be on a font-awesome icon
 .social-media-link {
@@ -166,7 +169,7 @@ hr.brand {
     margin-bottom: 1rem;
   }
 
-  a {
+  a:not(.default-link-style) {
     @extend .text-link;
   }
 }
@@ -353,6 +356,10 @@ hr.brand {
   }
 }
 
+.popover-deep-shadow {
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+}
+
 // override bootstrap a bit for modals with embedded alert coloring
 .modal-body.alert {
   margin-bottom: 0;

diff --git a/app/views/oral_history_ai_conversation/new.html.erb b/app/views/oral_history_ai_conversation/new.html.erb
@@ -1,6 +1,7 @@
 
 <div class="text-page">
-  <h2>Ask <code>ARCHOMAT</code> the Robot Research Assistant about the contents of our Oral History collections</h2>
+  <h2>Use this software-powered research tool to <span class="emphasis-color">ask about</span> the contents of our <span class="emphasis-color">Oral History</span> collections</h2>
+
   <%= simple_form_for :"", url: oral_history_ai_conversation_index_path, method: :post do |f| %>
     <%= f.input :q, as: :text, label: "Question", hint: "\"List interviewees who…?\"; \"I'm looking for experiencies about…\"; \"Which scientists were…?\"", input_html: { rows: 3 } %>
     <div class="d-flex justify-content-end">

diff --git a/app/views/oral_history_ai_conversation/show.html.erb b/app/views/oral_history_ai_conversation/show.html.erb
@@ -6,7 +6,7 @@
 <% end %>
 
 <div class="text-page">
-  <h2>Ask <code>ARCHOMAT</code> the Robot Research Assistant about the contents of our Oral History collections</h2>
+  <h2>Use this software-powered research tool to <span class="emphasis-color">ask about</span> the contents of our <span class="emphasis-color">Oral History</span> collections</h2>
 
   <p>
     <%= link_to new_oral_history_ai_conversation_path do %>
@@ -22,7 +22,7 @@
   <% if [email protected]? %>
     <div class="d-flex align-items-center">
       <i class="fa fa-circle-o-notch fa-spin fa-2x me-2" aria-hidden="true"></i>
-      Computing...
+      Searching...
     </div>
   <% elsif @conversation.status_error? %>
     <div class="alert alert-danger">

diff --git a/spec/components/oral_history/ai_conversation_display_component_spec.rb b/spec/components/oral_history/ai_conversation_display_component_spec.rb
@@ -71,10 +71,10 @@
   end
 
   it "includes footnotes" do
-    render_inline(component)
+    rendered = render_inline(component)
 
     component.footnote_list.each do |footnote_data|
-      expect(page).to have_css("p##{footnote_data.anchor}")
+      expect(page).to have_css("##{footnote_data.anchor}")
     end
   end
 end
diff --git a/spec/controllers/oral_history_ai_conversation_controller_spec.rb b/spec/controllers/oral_history_ai_conversation_controller_spec.rb
@@ -44,7 +44,7 @@
         get :show, params: { id: conversation.external_id }
 
         expect(response).to have_http_status(:success)
-        expect(response.body).to include "Computing..."
+        expect(response.body).to include "Searching..."
         # cheesy way to do it for now
         expect(response.body).to include '<meta http-equiv="refresh"'
       end