enhance illustration being taken into account in the response

2026-04-12 16:26:25 +02:00
parent 820734c251
commit 767d1e2dbc
6 changed files with 272 additions and 30 deletions
@@ -87,12 +87,37 @@ const isUser = computed(() => props.message.role === 'USER')
 const activeRef = ref<string | null>(null)
 const sourceListEl = ref<HTMLElement | null>(null)

-/** Replaces [S1]/[F1]-style labels in the rendered HTML with clickable badges. */
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+}
+
+/** Replaces [S1]/[F1]-style labels in the rendered HTML with clickable badges.
+ *  For figure citations, also injects an inline illustration below the badge. */
 const renderedWithBadges = computed(() => {
  const html = marked.parse(props.message.content) as string
+
+  const figureMap = new Map<string, ChatSource>()
+  for (const src of (props.message.sources ?? [])) {
+    if (src.type === 'FIGURE' && src.refLabel) {
+      figureMap.set(src.refLabel, src)
+    }
+  }
+
  return html.replace(/\[(S|F)\d+\]/g, (match) => {
-    const inner = match.slice(1, -1) // e.g. "S1"
-    return `<span class="citation-badge" data-ref="${inner}" title="Jump to source ${inner}">${match}</span>`
+    const inner = match.slice(1, -1) // e.g. "F1"
+    const badge = `<span class="citation-badge" data-ref="${inner}" title="Jump to source ${inner}">${match}</span>`
+
+    const fig = figureMap.get(inner)
+    if (fig?.imageUrl) {
+      const alt = escapeHtml(fig.caption || fig.label || 'Figure')
+      const captionText = [fig.label, fig.caption].filter(Boolean).map(escapeHtml).join(' — ')
+      const captionHtml = captionText
+        ? `<figcaption class="inline-figure-caption">${captionText}</figcaption>`
+        : ''
+      return `${badge}<figure class="inline-figure"><img src="${fig.imageUrl}" alt="${alt}" class="inline-figure-img" loading="lazy" onerror="this.parentElement.style.display='none'" />${captionHtml}</figure>`
+    }
+
+    return badge
  })
 })

@@ -426,6 +451,30 @@ function formatTime(iso: string): string {
  color: #276749;
 }

+.message-content--markdown :deep(.inline-figure) {
+  display: block;
+  margin: 0.75rem 0;
+  text-align: center;
+}
+
+.message-content--markdown :deep(.inline-figure-img) {
+  max-width: 100%;
+  max-height: 400px;
+  border-radius: 6px;
+  border: 1px solid #e2e8f0;
+  object-fit: contain;
+  display: block;
+  margin: 0 auto;
+}
+
+.message-content--markdown :deep(.inline-figure-caption) {
+  font-size: 0.78rem;
+  color: #718096;
+  font-style: italic;
+  margin-top: 0.3rem;
+  text-align: center;
+}
+
 .message-timestamp {
  font-size: 0.7rem;
  opacity: 0.6;
@@ -10,9 +10,15 @@ export interface Topic {
 }

 export interface SourceReference {
+  type?: 'TEXT' | 'FIGURE'
+  refLabel?: string
  bookId: string | null
  bookTitle: string
  page: number | null
+  figureId?: string
+  label?: string
+  caption?: string
+  imageUrl?: string
 }

 export interface TopicSummary {
@@ -97,17 +97,54 @@
              <span>{{ showSources ? '▲' : '▼' }}</span>
            </button>
            <div v-if="showSources" class="sources-list">
+              <!-- TEXT sources -->
              <div
-                v-for="(source, idx) in topicStore.activeSummary.sources"
-                :key="idx"
-                class="source-chip"
-                :class="{ 'source-chip--clickable': source.bookId && source.page }"
-                @click="source.bookId && source.page ? handleOpenSource(source.bookId, source.page) : undefined"
+                v-for="(source, idx) in textSources"
+                :key="'text-' + idx"
+                class="source-item"
+                :data-ref-label="source.refLabel"
              >
-                <span class="source-icon">📖</span>
-                <span class="source-book">{{ source.bookTitle }}</span>
-                <span v-if="source.page" class="source-page">p.&nbsp;{{ source.page }}</span>
-                <span v-if="source.bookId && source.page" class="source-open-hint">↗</span>
+                <div
+                  class="source-chip source-chip--text"
+                  :class="{ 'source-chip--clickable': source.bookId && source.page }"
+                  @click="source.bookId && source.page ? handleOpenSource(source.bookId, source.page) : undefined"
+                >
+                  <span class="source-icon">📖</span>
+                  <span v-if="source.refLabel" class="source-ref-label">{{ source.refLabel }}</span>
+                  <span class="source-book">{{ source.bookTitle }}</span>
+                  <span v-if="source.page" class="source-page">p.&nbsp;{{ source.page }}</span>
+                  <span v-if="source.bookId && source.page" class="source-open-hint">↗</span>
+                </div>
+              </div>
+
+              <!-- FIGURE sources -->
+              <div
+                v-for="(source, idx) in figureSources"
+                :key="'fig-' + idx"
+                class="source-item source-item--figure"
+                :data-ref-label="source.refLabel"
+              >
+                <div
+                  class="source-chip source-chip--figure"
+                  :class="{ 'source-chip--clickable': source.bookId && source.page }"
+                  @click="source.bookId && source.page ? handleOpenSource(source.bookId, source.page) : undefined"
+                >
+                  <span class="source-icon">🖼️</span>
+                  <span v-if="source.refLabel" class="source-ref-label source-ref-label--figure">{{ source.refLabel }}</span>
+                  <span class="source-figure-label">{{ source.label || 'Figure' }}</span>
+                  <span v-if="source.page" class="source-page">p.&nbsp;{{ source.page }}</span>
+                  <span v-if="source.bookId && source.page" class="source-open-hint">↗</span>
+                </div>
+                <div v-if="source.caption" class="source-caption">{{ source.caption }}</div>
+                <div v-if="source.imageUrl" class="source-figure-image">
+                  <img
+                    :src="source.imageUrl"
+                    :alt="source.caption || source.label || 'Figure'"
+                    class="figure-img"
+                    loading="lazy"
+                    @error="onImageError"
+                  />
+                </div>
              </div>
            </div>

@@ -146,7 +183,7 @@
 import { ref, computed, onMounted, inject } from 'vue'
 import { marked } from 'marked'
 import { RouterLink } from 'vue-router'
-import { useTopicStore, type SavedSummaryItem } from '@/stores/topicStore'
+import { useTopicStore, type SavedSummaryItem, type SourceReference } from '@/stores/topicStore'
 import { useBookStore } from '@/stores/bookStore'
 import TopicCard from '@/components/TopicCard.vue'
 import BookPagePanel from '@/components/BookPagePanel.vue'
@@ -166,10 +203,55 @@ const readerPanel = ref<ReaderPanel | null>(null)

 const summaryTopics = computed(() => topicStore.topics.filter(t => t.id !== 'free-form'))

+const textSources = computed(() =>
+  (topicStore.activeSummary?.sources ?? []).filter(s => s.type === 'TEXT' || !s.type)
+)
+
+const figureSources = computed(() =>
+  (topicStore.activeSummary?.sources ?? []).filter(s => s.type === 'FIGURE')
+)
+
+
+function onImageError(e: Event) {
+  const img = e.target as HTMLImageElement
+  img.style.display = 'none'
+  const wrapper = img.parentElement
+  if (wrapper) {
+    wrapper.innerHTML = '<span class="figure-missing">Image unavailable</span>'
+  }
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+}
+
 const renderedSummary = computed(() => {
  if (!topicStore.activeSummary) return ''
  const html = marked.parse(topicStore.activeSummary.summary) as string
-  return html.replace(/\[S(\d+)\]/g, '<span class="source-ref">[S$1]</span>')
+
+  const figureMap = new Map<string, SourceReference>()
+  for (const src of topicStore.activeSummary.sources) {
+    if (src.type === 'FIGURE' && src.refLabel) {
+      figureMap.set(src.refLabel, src)
+    }
+  }
+
+  return html.replace(/\[(S|F)\d+\]/g, (match) => {
+    const inner = match.slice(1, -1)
+    const badge = `<span class="source-ref" data-ref="${inner}" title="Jump to source ${inner}">${match}</span>`
+
+    const fig = figureMap.get(inner)
+    if (fig?.imageUrl) {
+      const alt = escapeHtml(fig.caption || fig.label || 'Figure')
+      const captionText = [fig.label, fig.caption].filter(Boolean).map(escapeHtml).join(' — ')
+      const captionHtml = captionText
+        ? `<figcaption class="inline-figure-caption">${captionText}</figcaption>`
+        : ''
+      return `${badge}<figure class="inline-figure"><img src="${fig.imageUrl}" alt="${alt}" class="inline-figure-img" loading="lazy" onerror="this.parentElement.style.display='none'" />${captionHtml}</figure>`
+    }
+
+    return badge
+  })
 })

 function handleSummaryClick(e: MouseEvent) {
@@ -484,19 +566,37 @@ function formatDateShort(iso: string): string {

 .sources-list {
  display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
  gap: 0.5rem;
 }

-.source-chip {
+.source-item {
  display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.source-item--figure {
  gap: 0.4rem;
+}
+
+.source-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 4px;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.78rem;
+}
+
+.source-chip--text {
  background: #ebf8ff;
  border: 1px solid #bee3f8;
-  border-radius: 6px;
-  padding: 0.3rem 0.7rem;
-  font-size: 0.8rem;
+}
+
+.source-chip--figure {
+  background: #f0fff4;
+  border: 1px solid #9ae6b4;
 }

 .source-chip--clickable {
@@ -504,20 +604,44 @@ function formatDateShort(iso: string): string {
  transition: background 0.15s, border-color 0.15s;
 }

-.source-chip--clickable:hover {
+.source-chip--text.source-chip--clickable:hover {
  background: #bee3f8;
  border-color: #90cdf4;
 }

+.source-chip--figure.source-chip--clickable:hover {
+  background: #c6f6d5;
+  border-color: #68d391;
+}
+
 .source-icon {
  font-size: 0.8rem;
 }

+.source-ref-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  background: #bee3f8;
+  color: #2b6cb0;
+  border-radius: 3px;
+  padding: 0 0.3rem;
+}
+
+.source-ref-label--figure {
+  background: #9ae6b4;
+  color: #276749;
+}
+
 .source-book {
  color: #2b6cb0;
  font-weight: 500;
 }

+.source-figure-label {
+  color: #276749;
+  font-weight: 600;
+}
+
 .source-page {
  color: #718096;
 }
@@ -528,6 +652,30 @@ function formatDateShort(iso: string): string {
  margin-left: 0.1rem;
 }

+.source-caption {
+  font-size: 0.78rem;
+  color: #4a5568;
+  font-style: italic;
+}
+
+.source-figure-image {
+  max-width: 100%;
+}
+
+.figure-img {
+  max-width: 100%;
+  max-height: 300px;
+  border-radius: 6px;
+  border: 1px solid #e2e8f0;
+  object-fit: contain;
+}
+
+.figure-missing {
+  font-size: 0.78rem;
+  color: #a0aec0;
+  font-style: italic;
+}
+
 .no-sources {
  font-size: 0.85rem;
  color: #a0aec0;
@@ -563,6 +711,30 @@ function formatDateShort(iso: string): string {
  font-style: italic;
 }

+.summary-text--markdown :deep(.inline-figure) {
+  display: block;
+  margin: 0.75rem 0;
+  text-align: center;
+}
+
+.summary-text--markdown :deep(.inline-figure-img) {
+  max-width: 100%;
+  max-height: 400px;
+  border-radius: 6px;
+  border: 1px solid #e2e8f0;
+  object-fit: contain;
+  display: block;
+  margin: 0 auto;
+}
+
+.summary-text--markdown :deep(.inline-figure-caption) {
+  font-size: 0.78rem;
+  color: #718096;
+  font-style: italic;
+  margin-top: 0.3rem;
+  text-align: center;
+}
+
 .summary-text--markdown :deep(.source-ref) {
  color: #3182ce;
  font-weight: 600;