<%= 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
index 1f99fd8ee..7940a085b 100644
--- 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 -%>
-
<%= footnote_item.short_citation_title %> ~ <%= footnote_item.nearest_timecode_formatted %>
+
<%= footnote_item.short_citation_title %>
<%- end -%>
<%- end -%>
diff --git a/app/frontend/entrypoints/application.js b/app/frontend/entrypoints/application.js
index 1b03b3efb..734efd2d1 100644
--- 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
new file mode 100644
index 000000000..f4756a239
--- /dev/null
+++ 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: `
`,
+ 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
index 704baaa51..6a8187c37 100644
--- 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
index 0727a4d62..47589b80a 100644
--- 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
index 58e821943..e2e0d42d8 100644
--- 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
index cf1b68110..a16e740d4 100644
--- a/app/views/oral_history_ai_conversation/new.html.erb
+++ b/app/views/oral_history_ai_conversation/new.html.erb
@@ -1,6 +1,7 @@
-
Ask ARCHOMAT the Robot Research Assistant about the contents of our Oral History collections
+
Use this software-powered research tool to ask about the contents of our Oral History collections
+
<%= 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 } %>
diff --git a/app/views/oral_history_ai_conversation/show.html.erb b/app/views/oral_history_ai_conversation/show.html.erb
index 2dfa3fc97..324e32c01 100644
--- 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 %>
-
Ask ARCHOMAT the Robot Research Assistant about the contents of our Oral History collections
+
Use this software-powered research tool to ask about the contents of our Oral History collections
<%= link_to new_oral_history_ai_conversation_path do %>
@@ -22,7 +22,7 @@
<% if !@conversation.complete? %>
- Computing...
+ Searching...
<% elsif @conversation.status_error? %>
diff --git a/spec/components/oral_history/ai_conversation_display_component_spec.rb b/spec/components/oral_history/ai_conversation_display_component_spec.rb
index f86c960fc..ff1fc6aef 100644
--- 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
index ab57e0d5d..bbcbd434d 100644
--- 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 '