@linto-ai/transcript-ui-plugin-chat 0.9.0

package/README.md

@@ -0,0 +1,37 @@
+# @linto-ai/transcript-ui-plugin-chat
+
+A chat panel for talking with an LLM assistant about the transcript — sessions, streaming responses, message history. No network calls: the UI emits intents (send, load session, …) and the host performs the actual requests, pushing results back in.
+
+## Usage
+
+```ts
+import { createChatPlugin } from "@linto-ai/transcript-ui-plugin-chat"
+
+core.use(createChatPlugin())
+
+core.on("chat:loadSessions", async () => {
+  core.chat!.setSessions(await api.listSessions())
+})
+
+core.on("chat:loadSession", async ({ sessionId }) => {
+  core.chat!.setActiveSession(sessionId)
+  core.chat!.setLoadingSession(true)
+  core.chat!.setMessages(await api.fetchMessages(sessionId))
+  core.chat!.setLoadingSession(false)
+})
+
+core.on("chat:send", async ({ content }) => {
+  const userMessage = { id: crypto.randomUUID(), role: "user" as const, content }
+  core.chat!.addMessage(userMessage)
+
+  core.chat!.streamStart()
+  let fullReply = ""
+  for await (const token of api.streamReply(content)) {
+    fullReply += token
+    core.chat!.streamAppend(token)
+  }
+  core.chat!.streamEnd(fullReply)
+})
+```
+
+The header's "ask" button already opens the drawer on its own once this plugin is active — call `core.chat!.setDrawerOpen(true)` yourself only if you're triggering it from your own UI instead.

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@linto-ai/transcript-ui-plugin-chat",
+  "version": "0.9.0",
+  "description": "Chat panel plugin for @linto-ai/transcript-ui — talk with an LLM assistant about the transcript",
+  "keywords": [
+    "vue",
+    "vue3",
+    "transcript",
+    "chat",
+    "llm",
+    "linto-plugin"
+  ],
+  "sideEffects": [
+    "**/*.vue"
+  ],
+  "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/plugin-chat"
+  },
+  "type": "module",
+  "license": "AGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@linto-ai/transcript-ui-core": "0.9.0",
+    "@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/ChatComposer.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { Button } from "@linto-ai/transcript-ui-ui"
+import { ref, useId, onMounted, useTemplateRef } from "vue"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+
+const props = defineProps<{
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  send: [content: string]
+}>()
+
+const textarea = useTemplateRef<HTMLTextAreaElement>("chat-composer__textarea")
+
+const { t } = useI18n()
+const text = ref("")
+const textareaId = useId()
+
+function submit(): void {
+  const content = text.value.trim()
+  if (!content || props.disabled) return
+  text.value = ""
+  emit("send", content)
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  // Let Escape bubble up so the drawer can close; keep every other key from
+  // reaching the global editor shortcuts.
+  if (event.key === "Escape") return
+  event.stopPropagation()
+  if (event.key === "Enter" && !event.shiftKey) {
+    event.preventDefault()
+    submit()
+  }
+}
+
+onMounted(() => {
+  textarea.value?.focus()
+})
+</script>
+
+<template>
+  <div class="chat-composer">
+    <label :for="textareaId" class="sr-only">{{ t("chat.placeholder") }}</label>
+    <textarea
+      :id="textareaId"
+      v-model="text"
+      class="chat-composer__textarea"
+      :placeholder="t('chat.placeholder')"
+      :disabled="disabled"
+      rows="2"
+      ref="chat-composer__textarea"
+      @keydown="onKeydown" />
+    <Button
+      icon="send"
+      variant="primary"
+      size="md"
+      :disabled="!text.trim() || disabled"
+      :aria-label="t('chat.send')"
+      @click="submit" />
+  </div>
+</template>
+
+<style scoped>
+.chat-composer {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  border-top: 1px solid var(--color-border);
+  flex-shrink: 0;
+  /* Match the message column width when the panel is expanded. */
+  width: 100%;
+  max-width: var(--chat-content-max-width, 760px);
+  margin-inline: auto;
+}
+
+.chat-composer__textarea {
+  flex: 1;
+  resize: none;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height);
+  color: var(--color-text-primary);
+  background-color: var(--color-surface);
+  outline: none;
+}
+
+.chat-composer__textarea:focus {
+  border-color: var(--color-primary);
+}
+
+.chat-composer__textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>

package/src/ChatDrawer.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { Button, EditorIcon } from "@linto-ai/transcript-ui-ui"
+import { ref, watch, onUnmounted, useId } from "vue"
+import { useCore } from "@linto-ai/transcript-ui-core"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+import ChatSessionList from "./ChatSessionList.vue"
+import ChatMessageList from "./ChatMessageList.vue"
+import ChatComposer from "./ChatComposer.vue"
+
+const core = useCore()
+const { t } = useI18n()
+// ChatDrawer is only rendered when the chat plugin is installed.
+const chat = core.chat!
+const titleId = useId()
+
+// Local-only: widens the panel to a near-full-width modal (desktop). Resets
+// every time the drawer is reopened.
+const expanded = ref(false)
+
+function close(): void {
+  chat.setDrawerOpen(false)
+}
+
+function toggleExpanded(): void {
+  expanded.value = !expanded.value
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key === "Escape" && chat.drawerOpen.value) close()
+}
+
+watch(
+  () => chat.drawerOpen.value,
+  (open) => {
+    if (open) {
+      expanded.value = false
+      core.emit("chat:loadSessions", undefined)
+      window.addEventListener("keydown", onKeydown)
+    } else {
+      window.removeEventListener("keydown", onKeydown)
+    }
+  },
+)
+
+onUnmounted(() => window.removeEventListener("keydown", onKeydown))
+
+function onSelect(sessionId: string): void {
+  core.emit("chat:loadSession", { sessionId })
+}
+function onCreate(): void {
+  core.emit("chat:createSession", undefined)
+}
+function onRename(sessionId: string, title: string): void {
+  core.emit("chat:renameSession", { sessionId, title })
+}
+function onDelete(sessionId: string): void {
+  core.emit("chat:deleteSession", { sessionId })
+}
+function onSend(content: string): void {
+  core.emit("chat:send", { content })
+}
+</script>
+
+<template>
+  <Transition name="chat-drawer">
+    <div
+      v-if="chat.drawerOpen.value"
+      class="chat-overlay"
+      @click.self="close">
+      <aside
+        class="chat-drawer"
+        :class="{ 'chat-drawer--expanded': expanded }"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="titleId">
+        <header class="chat-drawer__header">
+          <h2 :id="titleId" class="chat-drawer__title">
+            <EditorIcon name="sparkles" :size="18" />
+            {{ t("chat.title") }}
+          </h2>
+          <div class="chat-drawer__actions">
+            <Button
+              class="chat-drawer__expand"
+              :icon="expanded ? 'minimize' : 'maximize'"
+              variant="tertiary"
+              size="sm"
+              :aria-label="expanded ? t('chat.collapse') : t('chat.expand')"
+              @click="toggleExpanded" />
+            <Button
+              icon="x"
+              variant="tertiary"
+              size="sm"
+              :aria-label="t('chat.close')"
+              @click="close" />
+          </div>
+        </header>
+
+        <div class="chat-drawer__body">
+          <ChatSessionList
+            :sessions="chat.sessions.value"
+            :active-session-id="chat.activeSessionId.value"
+            @select="onSelect"
+            @create="onCreate"
+            @rename="onRename"
+            @delete="onDelete" />
+
+          <div class="chat-drawer__main">
+            <ChatMessageList
+              :messages="chat.allMessages.value"
+              :has-active-session="chat.activeSessionId.value !== null"
+              :is-loading="chat.isLoadingSession.value" />
+            <ChatComposer
+              :disabled="chat.isStreaming.value || chat.isLoadingSession.value"
+              @send="onSend" />
+          </div>
+        </div>
+      </aside>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.chat-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-drawer);
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.chat-drawer {
+  /* Centered reading column for messages + composer; cascades to the child
+     components through the DOM regardless of scoped styles. */
+  --chat-content-max-width: 760px;
+  --chat-session-list-width: 200px;
+  width: min(620px, 100vw);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-surface);
+  box-shadow: var(--shadow-md);
+  transition: width 0.2s ease;
+}
+
+/* Near-full-width: keeps a backdrop strip on the left so click-outside still
+   closes the panel. */
+.chat-drawer--expanded {
+  width: min(1400px, 96vw);
+  --chat-session-list-width: 300px;
+}
+
+.chat-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  min-height: var(--header-height);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.chat-drawer__title {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.chat-drawer__title :deep(.editor-icon) {
+  color: var(--color-primary);
+}
+
+.chat-drawer__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+/* The expand toggle is desktop-only: on phones the panel is already full-width. */
+@media (max-width: 640px) {
+  .chat-drawer__expand {
+    display: none;
+  }
+}
+
+.chat-drawer__body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.chat-drawer__main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Slide + fade transition ── */
+.chat-drawer-enter-active,
+.chat-drawer-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.chat-drawer-enter-active .chat-drawer,
+.chat-drawer-leave-active .chat-drawer {
+  transition: transform 0.25s ease;
+}
+
+.chat-drawer-enter-from,
+.chat-drawer-leave-to {
+  opacity: 0;
+}
+
+.chat-drawer-enter-from .chat-drawer,
+.chat-drawer-leave-to .chat-drawer {
+  transform: translateX(100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-drawer,
+  .chat-drawer-enter-active,
+  .chat-drawer-leave-active,
+  .chat-drawer-enter-active .chat-drawer,
+  .chat-drawer-leave-active .chat-drawer {
+    transition: none;
+  }
+}
+</style>

package/src/ChatMessage.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { MarkdownView, EditorIcon, CopyButton } from "@linto-ai/transcript-ui-ui"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+import type { ChatMessage } from "@linto-ai/transcript-ui-core"
+
+const props = defineProps<{
+  message: ChatMessage
+}>()
+
+const { t } = useI18n()
+
+function copyContent() {
+  return navigator.clipboard.writeText(props.message.content)
+}
+</script>
+
+<template>
+  <!-- User: compact bubble aligned right -->
+  <div v-if="message.role === 'user'" class="chat-message chat-message--user">
+    <div class="chat-message__bubble">{{ message.content }}</div>
+  </div>
+
+  <!-- Assistant: flat full-width markdown -->
+  <div v-else class="chat-message chat-message--assistant">
+    <span class="chat-message__marker" aria-hidden="true">
+      <EditorIcon name="sparkles" :size="16" />
+    </span>
+    <div class="chat-message__body">
+      <MarkdownView
+        v-if="message.content"
+        :source="message.content"
+        :streaming="message.streaming" />
+      <div
+        v-if="message.streaming"
+        class="chat-message__typing"
+        aria-hidden="true">
+        <span></span><span></span><span></span>
+      </div>
+
+      <!-- Action bar -->
+      <div
+        v-if="!message.streaming && message.content"
+        class="chat-message__actions">
+        <CopyButton
+          variant="secondary"
+          size="sm"
+          :copy-fn="copyContent"
+          :aria-label="t('chat.copy')">
+          {{ t("chat.copy") }}
+        </CopyButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chat-message {
+  display: flex;
+  padding: 0 var(--spacing-lg);
+}
+
+.chat-message:first-child {
+  padding-top: var(--spacing-lg);
+}
+
+.chat-message:last-child {
+  padding-bottom: var(--spacing-lg);
+}
+
+/* ── User ── */
+.chat-message--user {
+  justify-content: flex-end;
+}
+
+.chat-message__bubble {
+  max-width: 80%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm)
+    var(--radius-lg);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ── Assistant ── */
+.chat-message--assistant {
+  gap: var(--spacing-sm);
+  align-items: flex-start;
+}
+
+.chat-message__marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  margin-top: 2px;
+  border-radius: var(--radius-md);
+  color: var(--color-primary);
+  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+
+.chat-message__body {
+  min-width: 0;
+  flex: 1;
+}
+
+.chat-message__body :deep(.markdown-view) {
+  font-size: var(--font-size-sm);
+}
+
+/* ── Action bar ── */
+.chat-message__actions {
+  display: flex;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-xs);
+  margin-left: calc(var(--spacing-sm) * -1);
+  flex-direction: row-reverse;
+}
+
+/* ── Streaming typing indicator ── */
+.chat-message__typing {
+  display: inline-flex;
+  gap: 3px;
+  padding-top: var(--spacing-xs);
+}
+
+.chat-message__typing span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--color-primary);
+  animation: chat-typing 1.2s infinite;
+}
+
+.chat-message__typing span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.chat-message__typing span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes chat-typing {
+  0%,
+  60%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  30% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-message__typing span {
+    animation: none;
+  }
+}
+</style>

package/src/ChatMessageList.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { EditorIcon } from "@linto-ai/transcript-ui-ui"
+import { StickToBottom } from "vue-stick-to-bottom"
+import ChatMessage from "./ChatMessage.vue"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+import type { ChatMessage as ChatMessageType } from "@linto-ai/transcript-ui-core"
+
+defineProps<{
+  messages: ChatMessageType[]
+  hasActiveSession: boolean
+  isLoading: boolean
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="chat-message-list">
+    <!-- Loading the session history -->
+    <div v-if="isLoading" class="chat-message-list__state" role="status">
+      <EditorIcon name="spinner" :size="28" spin />
+      <span class="sr-only">{{ t("editor.loading") }}</span>
+    </div>
+
+    <!-- No session selected yet -->
+    <div v-else-if="!hasActiveSession" class="chat-message-list__state">
+      <p>{{ t("chat.emptyState") }}</p>
+    </div>
+
+    <!-- Active session but empty -->
+    <div v-else-if="messages.length === 0" class="chat-message-list__state">
+      <p>{{ t("chat.emptyChat") }}</p>
+    </div>
+
+    <!-- Messages -->
+    <StickToBottom
+      v-else
+      class="chat-message-list__scroll"
+      resize="smooth"
+      :initial="true">
+      <div class="chat-message-list__items">
+        <ChatMessage v-for="msg in messages" :key="msg.id" :message="msg" />
+      </div>
+    </StickToBottom>
+  </div>
+</template>
+
+<style scoped>
+.chat-message-list {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-message-list__state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-lg);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}
+
+.chat-message-list__state :deep(.editor-icon) {
+  color: var(--color-primary);
+}
+
+.chat-message-list__scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.chat-message-list__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  width: 100%;
+  max-width: var(--chat-content-max-width, 760px);
+  margin-inline: auto;
+}
+</style>