@linto-ai/transcript-ui-core 0.9.0

package/README.md

@@ -0,0 +1,46 @@
+# @linto-ai/transcript-ui-core
+
+The main piece of @linto-ai/transcript-ui — a Vue component for displaying and interacting with a transcript. It bundles the document state (`createCore`), the editor layout (`Layout`), and adapters that convert LinTO Studio API or WhisperX transcripts into a format it understands.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { TranscriptUI, mapApiDocument } from "@linto-ai/transcript-ui-core"
+</script>
+
+<template>
+  <TranscriptUI ref="editor" locale="en" />
+</template>
+```
+
+`TranscriptUI` handles everything on its own: it creates the document state, shows a loading spinner, then the transcript once a document is loaded.
+
+## Building your own layout instead
+
+If you don't want `TranscriptUI`'s default screen, `createCore`/`provideCore` and `Layout` are the two pieces it uses internally — use them directly to build your own.
+
+## Turning a transcript into something this package understands
+
+- `mapApiDocument` — for a transcript from the LinTO Studio API.
+- `mapWhisperXDocument` — for raw WhisperX output.
+
+## Data model
+
+A document (`EditorDocument`) has a flat list of speakers and one or more channels.
+
+- **Channel** — one audio/recording track (e.g. one microphone, one room). Has one or more `Translation`s.
+- **Translation** — one language track within a channel: the source language, or an auto-translated version. Exactly one per channel is the source (`isSource: true`). Holds an ordered list of `Turn`s and, for the source, the `AudioSource` to play.
+- **Turn** — one speech segment: a `speakerId` (pointing into the document's shared `speakers` map, or `null` if unassigned), a language, and either `text` (a plain string, e.g. from a live text-only source) or `words` (per-word timing, e.g. from ASR) — never both.
+- **Word** — one word inside a turn: its text, character offsets into the turn's plain text, and optional start/end time and confidence.
+- **Speaker** — id, display name, color. Stored once per document, referenced by id from every `Turn` — renaming a speaker updates every turn that points at them for free.
+
+```
+EditorDocument
+├── speakers: Map<id, Speaker>
+└── channels: Channel[]
+    └── translations: Translation[]   (one is the source; others are translations)
+        └── turns: Turn[]
+            ├── speakerId → looked up in EditorDocument.speakers
+            └── text (string) OR words (Word[]) — never both
+```

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@linto-ai/transcript-ui-core",
+  "version": "0.9.0",
+  "description": "State layer and UI shell for @linto-ai/transcript-ui — core, stores, format adapters, and the TranscriptUI component",
+  "keywords": [
+    "vue",
+    "vue3",
+    "transcript",
+    "transcription",
+    "linto"
+  ],
+  "sideEffects": [
+    "**/*.vue",
+    "**/*.css"
+  ],
+  "homepage": "https://github.com/linto-ai/linto-studio",
+  "bugs": "https://github.com/linto-ai/linto-studio/issues",
+  "author": "Tom Darboux <tdarboux@linagora.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/linto-ai/linto-studio.git",
+    "directory": "studio-sdk/components/transcript-ui/packages/core"
+  },
+  "type": "module",
+  "license": "AGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./test-utils": "./src/core/helpers/test/makeTestCore.ts"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@linto-ai/transcript-ui-i18n": "0.9.0",
+    "@linto-ai/transcript-ui-ui": "0.9.0",
+    "vue-stick-to-bottom": "^1.0.0"
+  }
+}

package/src/adapters/apiAdapter.ts

@@ -0,0 +1,44 @@
+import type { ApiDocument } from '../types/api'
+import type { EditorDocument, Speaker } from '../types/editor'
+import { mapApiTurns } from './mapApiTurns'
+
+export function mapApiDocument(raw: ApiDocument): EditorDocument {
+  const speakers = new Map<string, Speaker>()
+
+  for (const s of raw.speakers) {
+    speakers.set(s.speaker_id, {
+      id: s.speaker_id,
+      name: s.speaker_name,
+      color: '',
+    })
+  }
+
+  const turns = mapApiTurns(raw.text)
+
+  const sourceLanguage = raw.metadata.transcription.lang ?? raw.text[0]?.language ?? 'fr'
+
+  return {
+    title: raw.name,
+    description: raw.description,
+    speakers,
+    channels: [
+      {
+        id: 'default',
+        name: 'Canal 1',
+        duration: raw.metadata.audio.duration,
+        translations: [
+          {
+            id: 'source',
+            languages: [sourceLanguage],
+            isSource: true,
+            audio: {
+              src: raw.metadata.audio.filepath,
+              filename: raw.metadata.audio.filename,
+            },
+            turns,
+          },
+        ],
+      },
+    ],
+  }
+}

package/src/adapters/mapApiTurns.ts

@@ -0,0 +1,32 @@
+import type { ApiTurn } from "../types/api"
+import type { Turn } from "../types/editor"
+import { wordsFromApi } from "../utils/turnWords"
+
+/**
+ * Map backend turns (one translation's `text` array) onto editor Turns.
+ *
+ * This is where the editor's input invariants are enforced — positional word
+ * identity (`turnId#index`), offsets on the single-space layout shared with
+ * the server, silence placeholders dropped, wire wid ignored. Embedders fetch
+ * and assemble the document topology themselves, but the per-turn mapping
+ * must go through here.
+ */
+export function mapApiTurns(apiTurns: ApiTurn[]): Turn[] {
+  return apiTurns.map((t) => {
+    const words = wordsFromApi(t.turn_id, t.words)
+    const startTime = words[0]?.startTime ?? t.stime
+    const endTime =
+      words.length > 0 ? (words[words.length - 1]!.endTime ?? t.etime) : t.etime
+
+    return {
+      id: t.turn_id,
+      speakerId: t.speaker_id || null,
+      text: words.length > 0 ? null : t.segment,
+      words,
+      ...(startTime !== undefined && { startTime }),
+      ...(endTime !== undefined && { endTime }),
+      // The ApiTurn type says required; real payloads disagree.
+      language: t.language ?? "",
+    }
+  })
+}

package/src/adapters/test/mapApiTurns.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "bun:test"
+import { mapApiTurns } from "../mapApiTurns"
+
+describe("mapApiTurns", () => {
+  it("maps a turn with words: positional ids, offsets, turn times from words", () => {
+    const [turn] = mapApiTurns([
+      {
+        turn_id: "turn-1",
+        speaker_id: "spk-1",
+        segment: "Bonjour tout",
+        raw_segment: "Bonjour tout",
+        language: "fr",
+        words: [
+          { wid: "w-a", word: "Bonjour", stime: 0.5, etime: 0.8 },
+          { wid: "w-b", word: "tout", stime: 0.9, etime: 1.1 },
+        ],
+      },
+    ])
+    expect(turn).toMatchObject({
+      id: "turn-1",
+      speakerId: "spk-1",
+      text: null,
+      startTime: 0.5,
+      endTime: 1.1,
+      language: "fr",
+    })
+    expect(turn?.words.map((w) => w.id)).toEqual(["turn-1#0", "turn-1#1"])
+    expect(turn?.words[0]).toMatchObject({ charStart: 0, charEnd: 7 })
+    // The wire wid never reaches the editor model.
+    expect(turn?.words[0] && "wid" in turn.words[0]).toBe(false)
+  })
+
+  it("falls back to the segment and turn-level times for words-less turns", () => {
+    const [turn] = mapApiTurns([
+      {
+        turn_id: "turn-2",
+        speaker_id: "",
+        segment: "texte brut",
+        raw_segment: "texte brut",
+        language: "fr",
+        words: [],
+        stime: 3,
+        etime: 5,
+      },
+    ])
+    expect(turn).toMatchObject({
+      id: "turn-2",
+      speakerId: null,
+      text: "texte brut",
+      words: [],
+      startTime: 3,
+      endTime: 5,
+    })
+  })
+
+  it("drops silence placeholders (empty words) from the word list", () => {
+    const [turn] = mapApiTurns([
+      {
+        turn_id: "turn-3",
+        speaker_id: "spk-1",
+        segment: "mot",
+        raw_segment: "mot",
+        language: "fr",
+        words: [
+          { word: "", stime: 0, etime: 1 },
+          { word: "mot", stime: 1, etime: 2 },
+        ],
+      },
+    ])
+    expect(turn?.words.map((w) => w.text)).toEqual(["mot"])
+    expect(turn?.words[0]?.charStart).toBe(0)
+  })
+})

package/src/adapters/whisperXAdapter.ts

@@ -0,0 +1,73 @@
+import type { WhisperXDocument, WhisperXWord } from '../types/whisperx'
+import type { EditorDocument, Speaker, Turn, Word } from '../types/editor'
+import { layoutWords } from '../utils/turnWords'
+
+/** Positional identity + offsets over the single-space layout the doc is
+ *  seeded with — same convention as wordsFromApi. */
+function mapWords(turnId: string, whisperWords: WhisperXWord[]): Word[] {
+  return layoutWords(
+    turnId,
+    whisperWords.map((w) => ({
+      text: w.word ?? '',
+      startTime: w.start,
+      endTime: w.end,
+      confidence: w.score,
+    })),
+  )
+}
+
+export function mapWhisperXDocument(raw: WhisperXDocument): EditorDocument {
+  const speakers = new Map<string, Speaker>()
+
+  // Collect unique speakers from segments
+  for (const seg of raw.segments) {
+    if (seg.speaker && !speakers.has(seg.speaker)) {
+      speakers.set(seg.speaker, {
+        id: seg.speaker,
+        name: seg.speaker,
+        color: '',
+      })
+    }
+  }
+
+  const language = raw.language ?? 'fr'
+
+  const turns: Turn[] = raw.segments.map((seg, i) => {
+    const words = mapWords(`turn_${i}`, seg.words)
+
+    return {
+      id: `turn_${i}`,
+      speakerId: seg.speaker ?? null,
+      text: words.length > 0 ? null : seg.text,
+      words,
+      startTime: seg.start,
+      endTime: seg.end,
+      language,
+    }
+  })
+
+  // Compute total duration from last segment
+  const duration = raw.segments.length > 0
+    ? raw.segments[raw.segments.length - 1]!.end
+    : 0
+
+  return {
+    title: '',
+    speakers,
+    channels: [
+      {
+        id: 'default',
+        name: 'Canal 1',
+        duration,
+        translations: [
+          {
+            id: 'source',
+            languages: [language],
+            isSource: true,
+            turns,
+          },
+        ],
+      },
+    ],
+  }
+}

package/src/components/ChannelSelector.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { FormInput } from "@linto-ai/transcript-ui-ui"
+import { computed } from "vue"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+
+const props = defineProps<{
+  channels: { id: string; name: string }[]
+  selectedChannelId: string
+}>()
+
+const emit = defineEmits<{
+  "update:selectedChannelId": [id: string]
+}>()
+
+const { t } = useI18n()
+
+const options = computed(() =>
+  props.channels.map((c) => ({ value: c.id, label: c.name })),
+)
+
+const field = computed(() => ({ label: t("sidebar.channelSelectLabel") }))
+</script>
+
+<template>
+  <FormInput
+    select
+    :field="field"
+    :options="options"
+    :model-value="selectedChannelId"
+    @update:model-value="emit('update:selectedChannelId', $event)" />
+</template>

package/src/components/EditorErrorOverlay.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { EditorIcon } from "@linto-ai/transcript-ui-ui"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+
+defineProps<{
+  /** Technical reason (server message), shown as a muted detail line. */
+  message?: string | null
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="editor-error" role="alert">
+    <EditorIcon name="warning" :size="40" class="editor-error__icon" />
+    <p class="editor-error__title">{{ t("editor.loadError") }}</p>
+    <p v-if="message" class="editor-error__detail">{{ message }}</p>
+  </div>
+</template>
+
+<style scoped>
+.editor-error {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-xl);
+  text-align: center;
+  /* Opaque so the half-built layout never shows behind. No backdrop-filter:
+     it is banned in this package (WebRender GTT freeze). */
+  background-color: var(--color-background);
+  font-family: var(--font-family);
+}
+
+.editor-error__icon {
+  color: var(--color-danger);
+}
+
+.editor-error__title {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.editor-error__detail {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+</style>

package/src/components/EditorLoadingOverlay.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="editor-loading" role="status" aria-live="polite">
+    <span class="editor-loading__spinner" aria-hidden="true" />
+    <span class="editor-loading__label">{{ t("editor.loading") }}</span>
+  </div>
+</template>
+
+<style scoped>
+.editor-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  /* Opaque so the half-built layout never flashes behind while collab syncs.
+     No backdrop-filter: it is banned in this package (WebRender GTT freeze). */
+  background-color: var(--color-background);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+}
+
+.editor-loading__spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: editor-loading-spin 0.8s linear infinite;
+}
+
+@keyframes editor-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .editor-loading__spinner {
+    animation: none;
+  }
+}
+</style>

package/src/components/Header.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { Button, EditorIcon } from "@linto-ai/transcript-ui-ui"
+import { computed } from "vue"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+import * as utils from "../utils"
+
+const props = defineProps<{
+  title: string
+  date: string | number | null
+  duration: number
+  speakerCount: number
+  isMobile: boolean
+  canAsk?: boolean
+}>()
+
+defineEmits<{
+  toggleSidebar: []
+  openChat: []
+}>()
+
+const { t, locale } = useI18n()
+
+const formattedTitle = computed(() => props.title.replace(/-/g, " "))
+const formattedDate = computed(() =>
+  props.date != null ? utils.formatLongDate(props.date, locale.value) : "",
+)
+const formattedDuration = computed(() =>
+  utils.formatDurationMinutes(props.duration, locale.value),
+)
+const formattedSpeakerCount = computed(() =>
+  t("header.speakerCount", { count: props.speakerCount }),
+)
+
+const metaParts = computed(() =>
+  [
+    formattedDate.value,
+    formattedDuration.value,
+    formattedSpeakerCount.value,
+  ].filter(Boolean),
+)
+</script>
+
+<template>
+  <header class="editor-header">
+    <div class="header-main">
+      <h1 class="document-title">{{ formattedTitle }}</h1>
+      <div v-if="metaParts.length" class="document-meta">
+        <span v-for="(part, i) in metaParts" :key="i" class="document-meta__part">
+          {{ part }}
+        </span>
+      </div>
+    </div>
+    <div class="header-right">
+      <Button
+        v-if="isMobile"
+        variant="transparent"
+        :aria-label="t('header.openSidebar')"
+        @click="$emit('toggleSidebar')">
+        <template #icon><EditorIcon name="users" :size="16" /></template>
+      </Button>
+      <Button
+        variant="primary"
+        :aria-label="t('header.ask')"
+        :disabled="!props.canAsk"
+        @click="$emit('openChat')">
+        <template #icon><EditorIcon name="sparkles" :size="16" /></template>
+        <span v-if="!isMobile">{{ t("header.ask") }}</span>
+      </Button>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-lg);
+  min-height: var(--header-height);
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+  flex-shrink: 0;
+}
+
+.header-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.document-title {
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+.document-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+.document-meta__part {
+  text-box: cap alphabetic;
+}
+
+.document-meta__part + .document-meta__part::before {
+  content: "·";
+  margin-right: var(--spacing-xs);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex-shrink: 0;
+}
+
+@media (max-width: 767px) {
+  .editor-header {
+    padding: var(--spacing-xs) var(--spacing-md);
+  }
+
+  .document-title {
+    font-size: var(--font-size-base);
+  }
+}
+</style>