@sveda-ai/vue 0.1.0

package/src/components/chat/ChatMessageItem.vue

@@ -0,0 +1,357 @@
+<script setup>
+  import { buildAssistantMessageSegments, collectResourceLinks } from '../../lib/assistantMessage.js';
+  import { renderMarkdown } from '../../lib/markdown.js';
+  import { useAnimatedText } from '../../lib/useAnimatedText.js';
+  import { getUserMessageAttachmentNames, getUserMessageText } from '../../lib/userMessage.js';
+  import { useSvedaT } from '../../i18n/index.js';
+  import { Paperclip } from 'lucide-vue-next';
+  import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
+  import ChatMessageActivityBlock from './ChatMessageActivityBlock.vue';
+  import ReasoningStream from './ReasoningStream.vue';
+
+  const t = useSvedaT();
+
+  const props = defineProps({
+    message: {
+      type: Object,
+      required: true,
+    },
+    contentAnimationsEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    followWorkflowStream: {
+      type: Boolean,
+      default: false,
+    },
+    onResourceLinkClick: {
+      type: Function,
+      default: null,
+    },
+  });
+
+  defineEmits(['activity-link-click']);
+
+  const messageSegments = computed(() => {
+    if (props.message.role !== 'assistant') {
+      return [];
+    }
+    return buildAssistantMessageSegments(props.message);
+  });
+
+  const workflowSegments = computed(() =>
+    messageSegments.value.filter(segment => segment.kind === 'activity' || segment.kind === 'comment' || segment.kind === 'reasoning')
+  );
+
+  const answerSegments = computed(() => messageSegments.value.filter(segment => segment.kind === 'answer'));
+
+  const userMessageText = computed(() => (props.message.role === 'user' ? getUserMessageText(props.message) : ''));
+
+  const displayedContent = useAnimatedText(() => userMessageText.value, {
+    enabled: () => false,
+  });
+
+  const userAttachmentNames = computed(() => (props.message.role === 'user' ? getUserMessageAttachmentNames(props.message) : []));
+
+  const hasUserText = computed(() => userMessageText.value.length > 0);
+
+  const hasSegmentText = computed(() =>
+    messageSegments.value.some(segment => (segment.kind === 'comment' || segment.kind === 'answer' || segment.kind === 'reasoning') && segment.text.trim())
+  );
+
+  const hasActivity = computed(() => props.message.role === 'assistant' && messageSegments.value.some(segment => segment.kind === 'activity'));
+
+  const isMessageStreaming = computed(() => {
+    if (!props.contentAnimationsEnabled) {
+      return false;
+    }
+    if (props.message.streaming === true) {
+      return true;
+    }
+    return props.message.parts?.some(part => part.state === 'streaming') ?? false;
+  });
+
+  const shouldHideMessage = computed(() => {
+    if (props.message.role === 'assistant') {
+      const isError = props.message.isError;
+      if (!hasSegmentText.value && !hasActivity.value && !isError) {
+        return true;
+      }
+    }
+    return false;
+  });
+
+  const resourceLinks = computed(() => {
+    if (Array.isArray(props.message.resources) && props.message.resources.length > 0) {
+      return props.message.resources;
+    }
+    return collectResourceLinks(props.message);
+  });
+
+  const renderSegmentMarkdown = (text, { injectResources = false } = {}) =>
+    renderMarkdown(text, {
+      resources: resourceLinks.value,
+      injectResources: injectResources && !isMessageStreaming.value,
+    });
+
+  const handleContentClick = event => {
+    const link = event.target.closest('.resource-inline-link');
+    if (!link) {
+      return;
+    }
+    if (typeof props.onResourceLinkClick === 'function') {
+      event.preventDefault();
+      event.stopPropagation();
+      props.onResourceLinkClick(link.getAttribute('href'));
+    }
+  };
+
+  const showAnswerCursor = segment => segment.streaming || (props.contentAnimationsEnabled && isMessageStreaming.value && segment.kind === 'answer');
+
+  const workflowPanelRef = ref(null);
+  const workflowContentRef = ref(null);
+  let workflowResizeObserver = null;
+
+  const shouldFollowWorkflowStream = computed(() => props.followWorkflowStream);
+
+  const blockWorkflowPanelUserScroll = event => {
+    if (shouldFollowWorkflowStream.value) {
+      event.preventDefault();
+    }
+  };
+
+  const workflowScrollSignature = computed(() =>
+    JSON.stringify(
+      workflowSegments.value.map(segment => {
+        if (segment.kind === 'activity') {
+          return {
+            kind: segment.kind,
+            tools: segment.invocations.map(inv => [inv.toolCallId, inv.state, typeof inv.output === 'string' ? inv.output.length : 0]),
+          };
+        }
+
+        return {
+          kind: segment.kind,
+          length: segment.text?.length ?? 0,
+          streaming: segment.streaming,
+        };
+      })
+    )
+  );
+
+  const scrollWorkflowPanelToBottom = () => {
+    const applyScroll = () => {
+      const panel = workflowPanelRef.value;
+      if (!panel) {
+        return;
+      }
+      panel.scrollTop = Math.max(0, panel.scrollHeight - panel.clientHeight);
+    };
+
+    nextTick(() => {
+      requestAnimationFrame(() => {
+        applyScroll();
+        requestAnimationFrame(applyScroll);
+      });
+    });
+  };
+
+  const stopWorkflowResizeObserver = () => {
+    workflowResizeObserver?.disconnect();
+    workflowResizeObserver = null;
+  };
+
+  const startWorkflowResizeObserver = () => {
+    stopWorkflowResizeObserver();
+    const content = workflowContentRef.value;
+    if (!content) {
+      return;
+    }
+    workflowResizeObserver = new ResizeObserver(() => {
+      scrollWorkflowPanelToBottom();
+    });
+    workflowResizeObserver.observe(content);
+  };
+
+  watch(
+    [workflowScrollSignature, shouldFollowWorkflowStream],
+    ([, shouldFollowStream]) => {
+      if (!shouldFollowStream || workflowSegments.value.length === 0) {
+        return;
+      }
+      scrollWorkflowPanelToBottom();
+    },
+    { flush: 'post' }
+  );
+
+  watch(
+    [shouldFollowWorkflowStream, () => workflowSegments.value.length],
+    ([shouldFollowStream]) => {
+      stopWorkflowResizeObserver();
+      if (!shouldFollowStream) {
+        return;
+      }
+      nextTick(() => {
+        startWorkflowResizeObserver();
+        scrollWorkflowPanelToBottom();
+      });
+    },
+    { flush: 'post', immediate: true }
+  );
+
+  onUnmounted(() => {
+    stopWorkflowResizeObserver();
+  });
+</script>
+
+<template>
+  <div
+    v-if="shouldHideMessage"
+    class="hidden"
+  ></div>
+  <div
+    v-else-if="message.role === 'user'"
+    class="max-w-[80%] rounded-lg bg-brand-primary-purple p-3 text-white"
+  >
+    <div
+      v-if="userAttachmentNames.length"
+      class="mb-2 flex flex-col gap-1.5 border-b border-white/20 pb-2"
+    >
+      <p class="text-[11px] font-medium uppercase tracking-wide text-white/80">
+        {{ t('attachmentsLabel') }}
+      </p>
+      <div class="flex flex-wrap gap-1.5">
+        <span
+          v-for="(name, i) in userAttachmentNames"
+          :key="`${name}-${i}`"
+          class="inline-flex max-w-full items-center gap-1 rounded-md bg-white/15 px-2 py-1 text-xs [overflow-wrap:anywhere]"
+        >
+          <Paperclip class="h-3 w-3 shrink-0 opacity-90" />
+          <span>{{ name }}</span>
+        </span>
+      </div>
+    </div>
+    <p
+      v-if="hasUserText"
+      class="whitespace-pre-wrap break-words text-sm [overflow-wrap:anywhere]"
+    >
+      {{ displayedContent }}
+    </p>
+  </div>
+  <div
+    v-else
+    class="w-full max-w-full space-y-3"
+  >
+    <div
+      v-if="workflowSegments.length > 0"
+      ref="workflowPanelRef"
+      class="assistant-workflow-panel max-h-[25dvh] touch-pan-y overflow-y-auto overflow-x-hidden rounded-lg border border-border/50 bg-muted/20 p-2"
+      :class="{ 'assistant-workflow-panel--locked': shouldFollowWorkflowStream }"
+      @wheel="blockWorkflowPanelUserScroll"
+      @touchmove="blockWorkflowPanelUserScroll"
+    >
+      <div
+        ref="workflowContentRef"
+        class="space-y-1"
+      >
+        <template
+          v-for="segment in workflowSegments"
+          :key="segment.id"
+        >
+          <ChatMessageActivityBlock
+            v-if="segment.kind === 'activity'"
+            :invocations="segment.invocations"
+            :legacy-activity="segment.legacyActivity"
+            :content-animations-enabled="contentAnimationsEnabled"
+            @activity-link-click="$emit('activity-link-click', $event)"
+          />
+
+          <ReasoningStream
+            v-else-if="segment.kind === 'reasoning'"
+            :text="segment.text"
+            :animated="contentAnimationsEnabled"
+            @content-resize="scrollWorkflowPanelToBottom"
+          />
+
+          <div
+            v-else-if="segment.kind === 'comment'"
+            class="rounded-md border border-border/40 bg-muted/30 px-3 py-2"
+          >
+            <div
+              class="prose prose-sm dark:prose-invert max-w-none break-words text-sm text-muted-foreground [overflow-wrap:anywhere] [&_code]:rounded [&_code]:bg-muted/60 [&_code]:px-1 [&_code]:py-0.5 [&_p:last-child]:mb-0 [&_p]:my-1"
+              v-html="renderSegmentMarkdown(segment.text)"
+            ></div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <template
+      v-for="segment in answerSegments"
+      :key="segment.id"
+    >
+      <div :class="message.isError ? 'text-destructive' : ''">
+        <div
+          class="prose prose-sm dark:prose-invert max-w-none break-words text-sm text-foreground [overflow-wrap:anywhere] [&_code]:rounded [&_code]:bg-muted/60 [&_code]:px-1 [&_code]:py-0.5 [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-muted/50 [&_pre]:p-2 [&_pre]:text-xs"
+          @click="handleContentClick"
+        >
+          <div
+            class="[&_a]:break-all [&_blockquote]:break-words [&_h1]:break-words [&_h2]:break-words [&_h3]:break-words [&_h4]:break-words [&_img]:my-2 [&_img]:h-auto [&_img]:max-w-full [&_img]:rounded-md [&_li]:break-words [&_p:last-child]:mb-0 [&_p]:my-1 [&_p]:break-words"
+            v-html="renderSegmentMarkdown(segment.text, { injectResources: true })"
+          ></div>
+          <span
+            v-if="showAnswerCursor(segment)"
+            class="ml-1 inline-block h-4 w-2 animate-pulse bg-primary align-middle"
+          ></span>
+        </div>
+      </div>
+    </template>
+
+    <div
+      v-if="message.isError && messageSegments.length === 0"
+      class="text-sm text-destructive"
+    >
+      {{ message.content }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  :deep(.resource-inline-link) {
+    color: hsl(var(--primary));
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    text-underline-offset: 2px;
+    cursor: pointer;
+    transition:
+      color 0.15s ease,
+      text-decoration-color 0.15s ease;
+    font-weight: 500;
+  }
+
+  :deep(.resource-inline-link:hover) {
+    color: hsl(var(--primary) / 0.8);
+    text-decoration-style: solid;
+  }
+
+  :deep(.resource-link-icon) {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 2px;
+    margin-top: -2px;
+    opacity: 0.7;
+    transition:
+      opacity 0.15s ease,
+      transform 0.15s ease;
+  }
+
+  :deep(.resource-inline-link:hover .resource-link-icon) {
+    opacity: 1;
+    transform: translate(1px, -1px);
+  }
+
+  .assistant-workflow-panel--locked {
+    touch-action: none;
+    overscroll-behavior: contain;
+  }
+</style>

package/src/components/chat/ChatMessageList.vue

@@ -0,0 +1,178 @@
+<script setup>
+  import { ScrollArea } from '../../ui/scroll-area/index.js';
+  import { shouldShowChatPendingIndicator } from '../../lib/chatMessageVisibility.js';
+  import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
+  import ChatMessageItem from './ChatMessageItem.vue';
+  import ChatPendingIndicator from './ChatPendingIndicator.vue';
+
+  const props = defineProps({
+    messages: {
+      type: Array,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    isThinking: {
+      type: Boolean,
+      default: false,
+    },
+    contentAnimationsEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    thinkingMessage: {
+      type: String,
+      default: '',
+    },
+    pendingStatusMessages: {
+      type: Array,
+      default: () => [],
+    },
+    onResourceLinkClick: {
+      type: Function,
+      default: null,
+    },
+    noMtAuto: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const emit = defineEmits(['near-bottom-change', 'scroll-to-bottom', 'stop-generation', 'activity-link-click']);
+
+  const showPendingIndicator = computed(() => shouldShowChatPendingIndicator(props.isThinking && props.contentAnimationsEnabled, props.messages));
+
+  const messagesContainer = ref(null);
+  const bottomRef = ref(null);
+  const isNearBottom = ref(true);
+  const SCROLL_BOTTOM_THRESHOLD = 48;
+  let scrollViewport = null;
+
+  const setIsNearBottom = value => {
+    if (isNearBottom.value === value) {
+      return;
+    }
+
+    isNearBottom.value = value;
+    emit('near-bottom-change', value);
+  };
+
+  const getViewport = () => {
+    const root = messagesContainer.value?.$el;
+    if (!root) {
+      return null;
+    }
+
+    return root.querySelector('[data-radix-scroll-area-viewport], [data-reka-scroll-area-viewport]') || root.firstElementChild;
+  };
+
+  const updateIsNearBottom = () => {
+    const viewport = getViewport();
+    if (!viewport) {
+      setIsNearBottom(true);
+      return;
+    }
+
+    const remainingScroll = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+    setIsNearBottom(remainingScroll <= SCROLL_BOTTOM_THRESHOLD);
+  };
+
+  const detachScrollListener = () => {
+    if (scrollViewport) {
+      scrollViewport.removeEventListener('scroll', updateIsNearBottom);
+      scrollViewport = null;
+    }
+  };
+
+  const attachScrollListener = () => {
+    detachScrollListener();
+
+    const viewport = getViewport();
+    if (!viewport) {
+      return;
+    }
+
+    scrollViewport = viewport;
+    scrollViewport.addEventListener('scroll', updateIsNearBottom, { passive: true });
+    updateIsNearBottom();
+  };
+
+  const scrollToBottom = (options = {}) => {
+    const behavior = options.behavior || (options.onlyIfNearBottom ? 'auto' : 'smooth');
+    const applyScroll = () => {
+      if (options.onlyIfNearBottom && !isNearBottom.value) {
+        return;
+      }
+
+      const viewport = getViewport();
+      if (viewport) {
+        if (behavior === 'auto') {
+          viewport.scrollTop = viewport.scrollHeight;
+        } else {
+          viewport.scrollTo({
+            top: viewport.scrollHeight,
+            behavior,
+          });
+        }
+        setIsNearBottom(true);
+      } else if (bottomRef.value) {
+        bottomRef.value.scrollIntoView({ behavior, block: 'end' });
+        setIsNearBottom(true);
+      }
+    };
+
+    nextTick(() => {
+      applyScroll();
+      requestAnimationFrame(applyScroll);
+    });
+  };
+
+  onMounted(() => {
+    nextTick(attachScrollListener);
+  });
+
+  onUnmounted(detachScrollListener);
+
+  defineExpose({
+    scrollToBottom,
+  });
+</script>
+
+<template>
+  <ScrollArea
+    ref="messagesContainer"
+    class="min-h-0 flex-1"
+  >
+    <div class="flex min-h-full flex-col px-4 py-4">
+      <div
+        class="flex w-full flex-col space-y-4"
+        :class="{ 'mt-auto': !noMtAuto }"
+      >
+        <div
+          v-for="(message, index) in messages"
+          :key="message.id || index"
+          :class="['flex', message.role === 'user' ? 'justify-end' : 'justify-start']"
+        >
+          <ChatMessageItem
+            :message="message"
+            :content-animations-enabled="contentAnimationsEnabled"
+            :follow-workflow-stream="contentAnimationsEnabled && message.role === 'assistant' && index === messages.length - 1"
+            :on-resource-link-click="onResourceLinkClick"
+            @activity-link-click="$emit('activity-link-click', $event)"
+            @stop-generation="$emit('stop-generation', $event)"
+          />
+        </div>
+
+        <ChatPendingIndicator
+          :active="showPendingIndicator"
+          :status-messages="pendingStatusMessages"
+        />
+
+        <slot />
+        <div ref="bottomRef" />
+      </div>
+    </div>
+  </ScrollArea>
+</template>

package/src/components/chat/ChatPendingIndicator.vue

@@ -0,0 +1,163 @@
+<script setup>
+  import { SvedaI18nKey, useSvedaT } from '../../i18n/index.js';
+  import { buildPendingStatusRotation } from '../../lib/pendingStatusRotation.js';
+  import { computed, inject, onUnmounted, ref, watch } from 'vue';
+
+  const props = defineProps({
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    intervalMs: {
+      type: Number,
+      default: 3200,
+    },
+    statusMessages: {
+      type: Array,
+      default: () => [],
+    },
+  });
+
+  const t = useSvedaT();
+  const svedaI18n = inject(SvedaI18nKey, null);
+  const locale = computed(() => svedaI18n?.locale ?? '');
+
+  const sourceStatusMessages = computed(() => {
+    const provided = props.statusMessages.filter(
+      message => typeof message === 'string' && message.trim() !== ''
+    );
+    if (provided.length > 0) {
+      return provided;
+    }
+
+    const fallback = t('pendingStatus');
+    return fallback && fallback !== 'pendingStatus' ? [fallback] : [];
+  });
+
+  const rotationMessages = ref([]);
+  const currentIndex = ref(0);
+  let rotationTimer = null;
+
+  const rebuildRotationMessages = () => {
+    rotationMessages.value = buildPendingStatusRotation(sourceStatusMessages.value);
+    currentIndex.value = 0;
+  };
+
+  const currentMessage = computed(() => {
+    const messages = rotationMessages.value;
+    if (messages.length === 0) {
+      return '';
+    }
+
+    return messages[currentIndex.value % messages.length];
+  });
+
+  const stopRotation = () => {
+    if (rotationTimer !== null) {
+      clearInterval(rotationTimer);
+      rotationTimer = null;
+    }
+  };
+
+  const startRotation = () => {
+    stopRotation();
+    if (!props.active || rotationMessages.value.length <= 1) {
+      return;
+    }
+
+    rotationTimer = setInterval(() => {
+      currentIndex.value = (currentIndex.value + 1) % rotationMessages.value.length;
+    }, props.intervalMs);
+  };
+
+  watch(
+    () => props.active,
+    active => {
+      if (active) {
+        rebuildRotationMessages();
+        startRotation();
+      } else {
+        stopRotation();
+        rotationMessages.value = [];
+        currentIndex.value = 0;
+      }
+    },
+    { immediate: true }
+  );
+
+  watch(sourceStatusMessages, () => {
+    if (props.active) {
+      rebuildRotationMessages();
+      startRotation();
+    }
+  });
+
+  watch(locale, () => {
+    if (props.active) {
+      rebuildRotationMessages();
+      startRotation();
+    }
+  });
+
+  onUnmounted(stopRotation);
+</script>
+
+<template>
+  <div
+    v-if="active && currentMessage"
+    class="flex justify-start"
+    data-testid="chat-pending-indicator"
+  >
+    <div class="max-w-[85%] rounded-lg bg-muted px-4 py-3">
+      <div class="flex items-center gap-3">
+        <div
+          class="flex shrink-0 items-center space-x-1"
+          aria-hidden="true"
+        >
+          <div
+            class="h-2 w-2 animate-bounce rounded-full bg-foreground/40"
+            style="animation-delay: 0ms"
+          />
+          <div
+            class="h-2 w-2 animate-bounce rounded-full bg-foreground/40"
+            style="animation-delay: 150ms"
+          />
+          <div
+            class="h-2 w-2 animate-bounce rounded-full bg-foreground/40"
+            style="animation-delay: 300ms"
+          />
+        </div>
+        <Transition
+          name="pending-status"
+          mode="out-in"
+        >
+          <p
+            :key="currentMessage"
+            class="text-sm text-muted-foreground"
+          >
+            {{ currentMessage }}
+          </p>
+        </Transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .pending-status-enter-active,
+  .pending-status-leave-active {
+    transition:
+      opacity 0.22s ease,
+      transform 0.22s ease;
+  }
+
+  .pending-status-enter-from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  .pending-status-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+</style>