@linto-ai/transcript-ui-core 0.9.17 → 0.9.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linto-ai/transcript-ui-core",
-  "version": "0.9.17",
+  "version": "0.9.19",
   "description": "State layer and UI shell for @linto-ai/transcript-ui — core, stores, format adapters, and the TranscriptUI component",
   "keywords": [
     "vue",
@@ -39,8 +39,8 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@linto-ai/transcript-ui-i18n": "0.9.17",
-    "@linto-ai/transcript-ui-ui": "0.9.17",
+    "@linto-ai/transcript-ui-i18n": "0.9.19",
+    "@linto-ai/transcript-ui-ui": "0.9.19",
     "vue-stick-to-bottom": "^1.0.0"
   }
 }

package/src/components/Layout.vue

@@ -17,9 +17,11 @@ import { useCore, type LLMService } from "../core"
 const props = withDefaults(
   defineProps<{
     showHeader?: boolean
+    showVerbatim?: boolean
   }>(),
   {
     showHeader: true,
+    showVerbatim: true,
   },
 )
 
@@ -31,9 +33,13 @@ const shownPanels = ref<string[]>([TRANSCRIPTION_TAB])
 // The ?? never actually triggers — every shownPanels mutation keeps at least one entry — it's just satisfying noUncheckedIndexedAccess.
 const activeTab = computed(() => shownPanels.value[0] ?? TRANSCRIPTION_TAB)
 
+// Guarded by showVerbatim: split shows verbatim alongside a service, so it
+// makes no sense (and shouldn't be reachable) wherever verbatim itself is
+// turned off.
 const isSplit = computed({
-  get: () => shownPanels.value.length > 1,
+  get: () => props.showVerbatim && shownPanels.value.length > 1,
   set: (value: boolean) => {
+    if (!props.showVerbatim) return
     shownPanels.value = value
       ? [...shownPanels.value, VERBATIM_TAB]
       : shownPanels.value.filter((id) => id !== VERBATIM_TAB)
@@ -103,6 +109,19 @@ watch(
   },
 )
 
+// showVerbatim is a prop, not user-driven state, so this fires rarely (a
+// host re-rendering with a different noVerbatim) — but if it flips to false
+// while verbatim is showing (primary or split), drop it rather than leave
+// a panel the host just said it doesn't want reachable.
+watch(
+  () => props.showVerbatim,
+  (canShow) => {
+    if (canShow) return
+    const withoutVerbatim = shownPanels.value.filter((id) => id !== VERBATIM_TAB)
+    shownPanels.value = withoutVerbatim.length > 0 ? withoutVerbatim : [TRANSCRIPTION_TAB]
+  },
+)
+
 watch(
   () => core.activeChannelId.value,
   () => {
@@ -146,6 +165,7 @@ function onTranslationChange(translationId: string) {
       @redo="core.transcriptionEditor?.redo()" />
     <TabBar
       :model-value="activeTab"
+      :show-verbatim="props.showVerbatim"
       @update:model-value="(tab) => (shownPanels = [tab])" />
     <SelectionActionBar v-if="showTranscription" />
     <main

package/src/components/TabBar.vue

@@ -5,9 +5,15 @@ import { TRANSCRIPTION_TAB, VERBATIM_TAB } from "./TabBar.constants"
 import { useI18n } from "@linto-ai/transcript-ui-i18n"
 import { useCore } from "../core"
 
-const props = defineProps<{
-  modelValue: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    showVerbatim?: boolean
+  }>(),
+  {
+    showVerbatim: true,
+  },
+)
 
 const emit = defineEmits<{
   "update:modelValue": [value: string]
@@ -24,11 +30,15 @@ const tabs = computed<TabItem[]>(() => {
       label: t("tabs.transcription"),
       icon: "message-circle",
     },
-    {
-      value: VERBATIM_TAB,
-      label: t("tabs.verbatim"),
-      icon: "file-text",
-    },
+    ...(props.showVerbatim
+      ? [
+          {
+            value: VERBATIM_TAB,
+            label: t("tabs.verbatim"),
+            icon: "file-text",
+          },
+        ]
+      : []),
     ...services.map<TabItem>((service) => ({
       value: service.id,
       label: service.label.value,
@@ -44,7 +54,10 @@ function onSelect(value: string): void {
 </script>
 
 <template>
+  <!-- Nothing to switch between with a single tab (e.g. a live session with
+       verbatim hidden and no summaries) — no point showing the bar. -->
   <Tabs
+    v-if="tabs.length > 1"
     :tabs="tabs"
     :model-value="modelValue"
     @update:model-value="onSelect" />

package/src/components/TranscriptUI.vue

@@ -12,10 +12,15 @@ const props = withDefaults(
   defineProps<{
     locale?: string
     noHeader?: boolean
+    // Hides the Verbatim tab (and the tab bar entirely once that's the only
+    // tab left — see TabBar.vue) — a live session has no finished verbatim
+    // to show, see SessionLiveNG.vue.
+    noVerbatim?: boolean
   }>(),
   {
     locale: "fr",
     noHeader: false,
+    noVerbatim: false,
   },
 )
 
@@ -48,7 +53,8 @@ defineExpose({ core })
   <div class="transcript-ui-root">
     <Layout
       v-if="core.channels.size"
-      :show-header="!props.noHeader" />
+      :show-header="!props.noHeader"
+      :show-verbatim="!props.noVerbatim" />
     <EditorErrorOverlay v-if="error" :message="error" />
     <EditorLoadingOverlay v-else-if="isLoading" />
   </div>

package/src/components/TranscriptionPanel.vue

@@ -176,15 +176,16 @@ onBeforeUnmount(() => {
       </div>
 
       <Transition name="fade-slide">
-        <Button
-          v-if="showResumeButton"
-          size="sm"
-          icon="arrow-down"
-          class="resume-scroll-btn"
-          :aria-label="t('transcription.resumeScroll')"
-          @click="onResumeClick">
-          {{ t("transcription.resumeScroll") }}
-        </Button>
+        <div v-if="showResumeButton" class="resume-scroll-anchor">
+          <Button
+            size="sm"
+            icon="arrow-down"
+            class="resume-scroll-btn"
+            :aria-label="t('transcription.resumeScroll')"
+            @click="onResumeClick">
+            {{ t("transcription.resumeScroll") }}
+          </Button>
+        </div>
       </Transition>
     </div>
   </article>
@@ -231,13 +232,22 @@ onBeforeUnmount(() => {
   font-size: var(--font-size-sm);
 }
 
-/* Resume scroll button */
-.resume-scroll-btn {
+/* Resume scroll button — placement lives on this wrapper, never on the
+   button itself: Button.vue's `.editor-btn` base rule resets `position` via
+   `all: unset` (and, in the webcomponent build, gets re-injected a second
+   time after everything else to reach teleported popovers/dialogs — see
+   packages/webcomponent/src/index.ts), so any positioning put directly on
+   the button is one rebuild away from being silently overridden again. */
+.resume-scroll-anchor {
   position: sticky;
   bottom: var(--spacing-lg);
-  left: 50%;
-  translate: -50% 0;
   z-index: var(--z-sticky);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.resume-scroll-btn {
   /* No backdrop-filter: this button is sticky inside the tall scroll
      container, where a backdrop-filter makes WebRender allocate a render
      target spanning the whole scroll height — multi-GB on a long transcript. */
@@ -257,7 +267,7 @@ onBeforeUnmount(() => {
 .fade-slide-enter-from,
 .fade-slide-leave-to {
   opacity: 0;
-  translate: -50% 8px;
+  translate: 0 8px;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/composables/useFollowPlayback.ts

@@ -79,6 +79,13 @@ export function useFollowPlayback(
     },
   )
 
+  // Re-enable follow on any seek (widget scrub or click-to-read): the user
+  // just told the player where to be, which is exactly what follow means to
+  // track — symmetric with the isPlaying re-enable above.
+  const stopSeekListener = core.on("audio:seek", () => {
+    isFollowing.value = true
+  })
+
   function onManualScroll() {
     isFollowing.value = false
   }
@@ -89,12 +96,14 @@ export function useFollowPlayback(
     }
   }
 
+  // wheel/touchstart/keydown are real scroll gestures — a bare pointerdown
+  // isn't (clicking a word, a button, anything in the panel triggers it
+  // without ever moving the scroll position), so it's deliberately excluded.
   function setupScrollListener(handler: (e: Event) => void) {
     const el = scrollContainer.value
     if (!el) return
     el.addEventListener("wheel", handler, { passive: true })
     el.addEventListener("touchstart", handler, { passive: true })
-    el.addEventListener("pointerdown", handler, { passive: true })
     el.addEventListener("keydown", checkKeyDownIsScroll)
   }
 
@@ -103,7 +112,6 @@ export function useFollowPlayback(
     if (!el) return
     el.removeEventListener("wheel", handler)
     el.removeEventListener("touchstart", handler)
-    el.removeEventListener("pointerdown", handler)
     el.removeEventListener("keydown", checkKeyDownIsScroll)
   }
 
@@ -113,6 +121,7 @@ export function useFollowPlayback(
 
   onBeforeUnmount(() => {
     downScrollListener(onManualScroll)
+    stopSeekListener()
   })
 
   function resumeFollow() {

package/src/core/types.ts

@@ -30,6 +30,10 @@ export interface CoreEventMap {
   "speaker:add": { speaker: Speaker }
   "speaker:remove": { speakerId: string }
   "scroll:top": { translationId: string }
+  /** A seek was requested through core.audio.seekTo (widget scrub or
+   *  click-to-read) — the explicit "take me to this instant" gesture that
+   *  should resume follow-playback scrolling. */
+  "audio:seek": { time: number }
   "translation:sync": { translationId: string }
   "channel:sync": { channelId: string }
   "channel:reset": { channelId: string }