@linto-ai/transcript-ui-ui 0.9.0

package/src/index.ts

@@ -0,0 +1,36 @@
+// ── Atoms ──────────────────────────────────────────────────────────────
+export { default as Badge } from './atoms/Badge.vue'
+export { default as Button } from './atoms/Button.vue'
+export { default as CodeBlock } from './atoms/CodeBlock.vue'
+export { default as CopyButton } from './atoms/CopyButton.vue'
+export { default as EditableText } from './atoms/EditableText.vue'
+export { default as EditorCheckbox } from './atoms/EditorCheckbox.vue'
+export { default as EditorIcon } from './atoms/EditorIcon.vue'
+export { default as MarkdownEditor } from './atoms/MarkdownEditor.vue'
+export { default as MarkdownView } from './atoms/MarkdownView.vue'
+export { default as PopoverList } from './atoms/PopoverList.vue'
+export { default as SelectableListItem } from './atoms/SelectableListItem.vue'
+export { default as SpeakerIndicator } from './atoms/SpeakerIndicator.vue'
+export { default as SwitchToggle } from './atoms/SwitchToggle.vue'
+export { default as UserAvatar } from './atoms/UserAvatar.vue'
+export { resolveIcon, iconMap, ICON_SIZES } from './atoms/icons'
+
+// ── Molecules ──────────────────────────────────────────────────────────
+export { default as DocumentArticle } from './molecules/DocumentArticle.vue'
+export type { DocumentArticleStatus } from './molecules/DocumentArticle.vue'
+export { default as DownloadMenu } from './molecules/DownloadMenu.vue'
+export type { DownloadFormat } from './molecules/DownloadMenu.vue'
+export { default as FormInput, EMPTY_FIELD } from './molecules/FormInput.vue'
+export type { FormField } from './molecules/FormInput.vue'
+export { default as SpeakerMenu } from './molecules/SpeakerMenu.vue'
+export { default as Tabs } from './molecules/Tabs.vue'
+export type { TabItem } from './molecules/Tabs.vue'
+export { default as TurnTextEditor } from './molecules/TurnTextEditor.vue'
+
+// ── Utils ──────────────────────────────────────────────────────────────
+export { renderMarkdown, renderMarkdownSegments } from './utils/markdown'
+export { computeInitials } from './utils/computeInitials'
+export { placeCaretAt } from './utils/placeCaretAt'
+export { computeSelectionOffset } from './utils/computeSelectionOffset'
+export { computeTextOffsetInContainer } from './utils/computeTextOffsetInContainer'
+export { getShadowAwareSelection, getSelectionFocus } from './utils/shadowAwareSelection'

package/src/molecules/DocumentArticle.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import EditorIcon from "../atoms/EditorIcon.vue"
+import Button from "../atoms/Button.vue"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+
+export type DocumentArticleStatus = "done" | "processing" | "error"
+
+const props = withDefaults(
+  defineProps<{
+    status?: DocumentArticleStatus
+    progress?: number
+    errorMessage?: string
+  }>(),
+  { status: "done" },
+)
+
+const emit = defineEmits<{
+  retry: []
+}>()
+
+const { t } = useI18n()
+
+const errorText = computed(
+  () => props.errorMessage || t("llmService.errorTemporary"),
+)
+
+const progressValue = computed(() => {
+  const v = props.progress
+  if (v == null || !Number.isFinite(v)) return null
+  return Math.max(0, Math.min(100, Math.round(v)))
+})
+</script>
+
+<template>
+  <article class="document-article" :data-status="props.status">
+    <div
+      class="document-article__toolbar"
+      role="toolbar"
+      v-if="
+        $slots['toolbar-left'] ||
+        $slots['toolbar-center'] ||
+        $slots['toolbar-right']
+      ">
+      <div class="document-article__toolbar-left">
+        <slot name="toolbar-left" />
+      </div>
+      <div class="document-article__toolbar-center">
+        <slot name="toolbar-center" />
+      </div>
+      <div class="document-article__toolbar-right">
+        <slot name="toolbar-right" />
+      </div>
+    </div>
+
+    <div class="document-article__body">
+      <div
+        v-if="props.status === 'processing'"
+        class="document-article__center document-article__center--processing"
+        role="status"
+        aria-live="polite">
+        <EditorIcon name="spinner" spin :size="24" />
+        <progress
+          class="document-article__progress"
+          :max="100"
+          :value="progressValue ?? undefined" />
+        <span
+          v-if="progressValue !== null"
+          class="document-article__progress-value">
+          {{ progressValue }}%
+        </span>
+      </div>
+      <div
+        v-else-if="props.status === 'error'"
+        class="document-article__center document-article__center--error"
+        role="alert">
+        <p class="document-article__error-text">{{ errorText }}</p>
+        <Button variant="primary" icon="refresh-cw" @click="emit('retry')">
+          {{ t("llmService.retry") }}
+        </Button>
+      </div>
+      <slot v-else />
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.document-article {
+  width: 100%;
+  max-width: 760px;
+  margin: var(--spacing-lg) auto;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  display: flex;
+  flex-direction: column;
+}
+
+.document-article__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  background-color: var(--color-surface);
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  z-index: 1;
+}
+
+.document-article__toolbar-left,
+.document-article__toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-shrink: 0;
+}
+
+.document-article__toolbar-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 0;
+}
+
+.document-article__body {
+  flex: 1;
+  min-height: 0;
+}
+
+.document-article__center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-xl) var(--spacing-md);
+  text-align: center;
+}
+
+.document-article__center--processing {
+  color: var(--color-primary);
+}
+
+.document-article__center--error {
+  color: var(--color-danger, #d33);
+}
+
+.document-article__progress {
+  width: min(280px, 100%);
+  height: 6px;
+}
+
+.document-article__progress-value {
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-muted);
+}
+
+.document-article__error-text {
+  margin: 0;
+  max-width: 480px;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height);
+  color: var(--color-text-secondary);
+}
+</style>

package/src/molecules/DownloadMenu.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import PopoverList from "../atoms/PopoverList.vue"
+import Button from "../atoms/Button.vue"
+import { useI18n, type TranslationKey } from "@linto-ai/transcript-ui-i18n"
+
+export interface DownloadFormat {
+  format: string
+  labelKey: TranslationKey
+}
+
+const props = defineProps<{
+  formats: DownloadFormat[]
+  disabled?: boolean
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  select: [format: string]
+}>()
+
+const { t } = useI18n()
+
+function onSelect(item: DownloadFormat): void {
+  emit("select", item.format)
+}
+</script>
+
+<template>
+  <PopoverList
+    :items="props.formats"
+    :item-key="(f: DownloadFormat) => f.format"
+    align="end"
+    @select="onSelect">
+    <template #trigger>
+      <Button
+        variant="primary"
+        icon="download"
+        icon-right="chevron-down"
+        :disabled="disabled"
+        :loading="loading">
+        {{ t("llmService.download") }}
+      </Button>
+    </template>
+    <template #item="{ item }">
+      <span>{{ t(item.labelKey) }}</span>
+    </template>
+  </PopoverList>
+</template>