@sveda-ai/vue 0.1.0

package/src/lib/chatI18nKeys.ts

@@ -0,0 +1,62 @@
+export const chatComponentI18nKeys: Record<string, Record<string, string>> = {
+  en: {
+    typeMessage: 'Ask AI to help you...',
+    chatAttachFiles: 'Attach files (PDF, Word, Excel, presentations, images…)',
+    chatRemoveFile: 'Remove file',
+    attachmentsLabel: 'Attachments',
+    attachmentOnlyPlaceholder: 'Documents: {names}',
+    chatHistory: 'Chat History',
+    searchChats: 'Search chats...',
+    noChatsFound: 'No chats found',
+    today: 'Today',
+    yesterday: 'Yesterday',
+    dayBeforeYesterday: 'Day before yesterday',
+    daysAgo: '{count} days ago',
+    renameChat: 'Rename chat',
+    cancel: 'Cancel',
+    delete: 'Delete',
+    pendingStatus: 'Processing your request...',
+    phaseToolCalling: 'Using tools',
+    activityGroupSteps: '{label}: {count}',
+    voiceInputStart: 'Voice input',
+    voiceInputStop: 'Stop recording',
+    voiceInputUnsupported: 'Voice input is not supported in this browser.',
+    voiceInputError: 'Voice input',
+    voiceInputPermissionDenied: 'Microphone access was denied.',
+    voiceInputErrorGeneric: 'Something went wrong. Try again.',
+    voiceInputBrowserWarningTitle: 'Voice input in this browser',
+    voiceInputBrowserWarningDescription:
+      'Speech recognition may be inaccurate or unstable. For best results, use Google Chrome or Microsoft Edge. You can still continue in your current browser.',
+    voiceInputBrowserWarningContinue: 'Continue anyway',
+  },
+  ru: {
+    typeMessage: 'Попросите AI помочь вам...',
+    chatAttachFiles: 'Прикрепить файлы (PDF, Word, Excel, презентации, изображения…)',
+    chatRemoveFile: 'Убрать файл',
+    attachmentsLabel: 'Вложения',
+    attachmentOnlyPlaceholder: 'Документы: {names}',
+    chatHistory: 'История чатов',
+    searchChats: 'Поиск по чатам...',
+    noChatsFound: 'Чаты не найдены',
+    today: 'Сегодня',
+    yesterday: 'Вчера',
+    dayBeforeYesterday: 'Позавчера',
+    daysAgo: '{count} дней назад',
+    renameChat: 'Переименовать чат',
+    cancel: 'Отмена',
+    delete: 'Удалить',
+    pendingStatus: 'Обрабатываем ваш запрос...',
+    phaseToolCalling: 'Вызов инструментов',
+    activityGroupSteps: '{label}: {count}',
+    voiceInputStart: 'Голосовой ввод',
+    voiceInputStop: 'Остановить запись',
+    voiceInputUnsupported: 'Голосовой ввод не поддерживается в этом браузере.',
+    voiceInputError: 'Голосовой ввод',
+    voiceInputPermissionDenied: 'Доступ к микрофону запрещён.',
+    voiceInputErrorGeneric: 'Не получилось. Попробуйте ещё раз.',
+    voiceInputBrowserWarningTitle: 'Голосовой ввод в этом браузере',
+    voiceInputBrowserWarningDescription:
+      'Распознавание речи может работать неточно или нестабильно. Для лучшего результата используйте Google Chrome или Microsoft Edge. Вы всё равно можете продолжить в текущем браузере.',
+    voiceInputBrowserWarningContinue: 'Всё равно продолжить',
+  },
+};

package/src/lib/chatMessageVisibility.ts

@@ -0,0 +1,50 @@
+import { isAssistantToolPart, type SvedaChatMessageLike } from './assistantMessage.js';
+
+export function messageHasVisibleAssistantContent(
+  message: SvedaChatMessageLike | null | undefined
+): boolean {
+  if (!message || message.role !== 'assistant') {
+    return false;
+  }
+
+  if (Array.isArray(message.parts) && message.parts.length > 0) {
+    return message.parts.some(part => {
+      if (part.type === 'text' && part.text?.trim()) {
+        return true;
+      }
+      if (part.type === 'reasoning' && part.text?.trim()) {
+        return true;
+      }
+      if (part.type === 'tool-call' || part.type === 'tool-result') {
+        return true;
+      }
+      if (isAssistantToolPart(part)) {
+        return true;
+      }
+
+      return false;
+    });
+  }
+
+  return Boolean(message.content?.trim() || message.reasoningStream?.trim());
+}
+
+export function shouldShowChatPendingIndicator(
+  isThinking: boolean,
+  messages: SvedaChatMessageLike[]
+): boolean {
+  if (!isThinking) {
+    return false;
+  }
+
+  const lastMessage = messages[messages.length - 1];
+  if (!lastMessage) {
+    return true;
+  }
+
+  if (lastMessage.role === 'user') {
+    return true;
+  }
+
+  return !messageHasVisibleAssistantContent(lastMessage);
+}

package/src/lib/chatTabs.ts

@@ -0,0 +1,54 @@
+import { userMessageHasVisibleContent, type SvedaUserMessageLike } from './userMessage';
+
+export type SvedaTabChat = {
+  id: string;
+  title?: string;
+  messages?: SvedaUserMessageLike[];
+};
+
+export const isNewChatPlaceholder = (chat: SvedaTabChat, newChatLabel: string): boolean => {
+  const messages = chat.messages || [];
+  if (messages.some(userMessageHasVisibleContent)) {
+    return false;
+  }
+
+  const title = (chat.title || '').trim();
+  if (!title || title === '__NEW_CHAT__' || title === 'New Chat') {
+    return true;
+  }
+
+  if (title === newChatLabel) {
+    return true;
+  }
+
+  if (title.startsWith(`${newChatLabel} `)) {
+    const suffix = title.slice(newChatLabel.length).trim();
+    return /^\d+$/.test(suffix);
+  }
+
+  return false;
+};
+
+export const buildChatTabTitleMap = (
+  tabs: SvedaTabChat[],
+  translate: (key: string, params?: Record<string, unknown>) => string
+): Map<string, string> => {
+  const newChatLabel = translate('newChat');
+  const placeholderTabs = tabs.filter(tab => isNewChatPlaceholder(tab, newChatLabel));
+  const titles = new Map<string, string>();
+
+  tabs.forEach(tab => {
+    if (!isNewChatPlaceholder(tab, newChatLabel)) {
+      titles.set(tab.id, (tab.title || '').trim() || newChatLabel);
+      return;
+    }
+
+    const index = placeholderTabs.findIndex(item => item.id === tab.id) + 1;
+    titles.set(
+      tab.id,
+      placeholderTabs.length > 1 ? translate('newChatNumbered', { number: index }) : newChatLabel
+    );
+  });
+
+  return titles;
+};

package/src/lib/chatTitle.ts

@@ -0,0 +1,30 @@
+export const isChatTitlePlaceholder = (title: string, newChatLabel: string): boolean => {
+  const normalized = (title || '').trim();
+  if (!normalized || normalized === '__NEW_CHAT__' || normalized === 'New Chat') {
+    return true;
+  }
+
+  if (normalized === newChatLabel) {
+    return true;
+  }
+
+  if (normalized.startsWith(`${newChatLabel} `)) {
+    const suffix = normalized.slice(newChatLabel.length).trim();
+    return /^\d+$/.test(suffix);
+  }
+
+  return false;
+};
+
+export const deriveProvisionalChatTitle = (userRequest: string): string => {
+  const text = userRequest.replace(/\s+/g, ' ').trim();
+  if (!text) {
+    return '';
+  }
+
+  if (text.length > 80) {
+    return text.slice(0, 80).trimEnd();
+  }
+
+  return text;
+};

package/src/lib/chatUiStorage.ts

@@ -0,0 +1,33 @@
+export const SVEDA_CHAT_MINIMIZED_STORAGE_KEY = 'sveda.chat-minimized';
+
+export const readPersistedMinimized = (): boolean => {
+  if (typeof window === 'undefined') {
+    return true;
+  }
+
+  try {
+    const saved = localStorage.getItem(SVEDA_CHAT_MINIMIZED_STORAGE_KEY);
+    if (saved === 'true') {
+      return true;
+    }
+    if (saved === 'false') {
+      return false;
+    }
+  } catch {
+    return true;
+  }
+
+  return true;
+};
+
+export const writePersistedMinimized = (isMinimized: boolean): void => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  try {
+    localStorage.setItem(SVEDA_CHAT_MINIMIZED_STORAGE_KEY, isMinimized ? 'true' : 'false');
+  } catch {
+    return;
+  }
+};

package/src/lib/finalizeMessages.ts

@@ -0,0 +1,81 @@
+export type SvedaFinalizableMessage = {
+  parts?: Array<{
+    type?: string;
+    state?: string;
+    output?: unknown;
+    result?: unknown;
+    [key: string]: unknown;
+  }>;
+  streaming?: boolean;
+  activity?: {
+    phase?: string;
+    steps?: Array<{ status?: string; [key: string]: unknown }>;
+    [key: string]: unknown;
+  };
+  [key: string]: unknown;
+};
+
+const TERMINAL_ACTIVITY_PHASES = new Set(['done', 'error', 'stopped']);
+
+const TOOL_COMPLETE_STATES = new Set([
+  'result',
+  'output-available',
+  'output-error',
+  'output-denied',
+  'done',
+]);
+
+const isToolPart = (part: { type?: string } | undefined): boolean =>
+  part?.type === 'dynamic-tool' ||
+  (typeof part?.type === 'string' && part.type.startsWith('tool-'));
+
+function finalizeActivity<T extends SvedaFinalizableMessage>(message: T): T {
+  if (!message.activity) {
+    return message;
+  }
+
+  const activity = { ...message.activity };
+  if (activity.phase && !TERMINAL_ACTIVITY_PHASES.has(activity.phase)) {
+    activity.phase = 'done';
+  }
+
+  if (Array.isArray(activity.steps)) {
+    activity.steps = activity.steps.map(step => ({
+      ...step,
+      status: step.status === 'running' ? 'success' : step.status,
+    }));
+  }
+
+  return { ...message, activity };
+}
+
+function finalizeParts<T extends SvedaFinalizableMessage>(message: T): T {
+  if (!Array.isArray(message.parts)) {
+    if (message.streaming === true) {
+      return { ...message, streaming: false };
+    }
+    return message;
+  }
+
+  const parts = message.parts.map(part => {
+    if (part?.state === 'streaming') {
+      return { ...part, state: 'done' };
+    }
+    if (isToolPart(part) && part.state && !TOOL_COMPLETE_STATES.has(part.state)) {
+      if (part.output !== undefined || part.result !== undefined) {
+        return { ...part, state: 'output-available' };
+      }
+    }
+    return part;
+  });
+
+  return {
+    ...message,
+    parts,
+    streaming: false,
+  };
+}
+
+export function finalizeMessagesForDisplay<T extends SvedaFinalizableMessage>(messages: T[]): T[] {
+  return messages.map(message => finalizeActivity(finalizeParts(message)));
+}

package/src/lib/markdown.ts

@@ -0,0 +1,90 @@
+import DOMPurify from 'dompurify';
+import hljs from 'highlight.js';
+import { Marked, Renderer } from 'marked';
+import type { SvedaResourceLink } from './assistantMessage.js';
+
+const escapeHtml = (value: string): string =>
+  value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+
+const renderer = new Renderer();
+renderer.code = ({ text, lang }): string => {
+  const language = lang && hljs.getLanguage(lang) ? lang : '';
+  const value = language ? hljs.highlight(text, { language }).value : escapeHtml(text);
+  const className = language ? ` class="hljs language-${language}"` : '';
+  return `<pre><code${className}>${value}</code></pre>`;
+};
+
+const markedInstance = new Marked({ gfm: true, breaks: true });
+markedInstance.use({ renderer });
+
+export function injectResourceLinks(html: string, resources: SvedaResourceLink[]): string {
+  if (!Array.isArray(resources) || resources.length === 0) {
+    return html;
+  }
+
+  const sorted = [...resources].sort((a, b) => b.label.length - a.label.length);
+
+  for (const resource of sorted) {
+    if (!resource.label || !resource.url) {
+      continue;
+    }
+    const escaped = resource.label.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const pattern = new RegExp(
+      `(?<=^|[^a-zA-Zа-яА-ЯёЁ])(«${escaped}»|„${escaped}"|"${escaped}"|«${escaped}|${escaped}»|${escaped})(?=$|[^a-zA-Zа-яА-ЯёЁ])`,
+      'gu'
+    );
+    const safeLink = resource.url.replace(/"/g, '&quot;');
+    const icon =
+      '<svg class="resource-link-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>';
+    html = html.replace(pattern, `<a href="${safeLink}" class="resource-inline-link">$1${icon}</a>`);
+  }
+
+  return html;
+}
+
+export interface SvedaMarkdownOptions {
+  resources?: SvedaResourceLink[];
+  injectResources?: boolean;
+}
+
+export function renderMarkdown(text: string, options: SvedaMarkdownOptions = {}): string {
+  const body = text || '';
+  if (!body.trim()) {
+    return '';
+  }
+
+  const raw = markedInstance.parse(body, { async: false });
+  let html = DOMPurify.sanitize(raw, {
+    ALLOWED_TAGS: [
+      'p',
+      'br',
+      'strong',
+      'em',
+      'code',
+      'pre',
+      'ul',
+      'ol',
+      'li',
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'a',
+      'blockquote',
+      'hr',
+      'span',
+      'img',
+    ],
+    ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'target', 'rel', 'loading'],
+  });
+
+  if (options.injectResources && Array.isArray(options.resources) && options.resources.length > 0) {
+    html = injectResourceLinks(html, options.resources);
+  }
+
+  return html;
+}

package/src/lib/modelLabels.ts

@@ -0,0 +1,24 @@
+export function humanizeModelId(raw: string): string {
+  const part = raw.includes('/') ? (raw.split('/').pop() as string) : raw;
+  const cleaned = part.replace(/-preview$/i, '').replace(/_/g, '-');
+  return cleaned
+    .split('-')
+    .map(seg => {
+      if (/^\d+(\.\d+)?$/.test(seg)) {
+        return seg;
+      }
+      if (seg.length === 0) {
+        return '';
+      }
+      return seg[0].toUpperCase() + seg.slice(1).toLowerCase();
+    })
+    .join(' ');
+}
+
+export function getSvedaModelDisplayName(model: string | null | undefined): string {
+  if (!model) {
+    return '—';
+  }
+
+  return humanizeModelId(model);
+}

package/src/lib/pendingStatusRotation.ts

@@ -0,0 +1,26 @@
+export function shuffleArray<T>(items: T[]): T[] {
+  const copy = [...items];
+
+  for (let index = copy.length - 1; index > 0; index -= 1) {
+    const swapIndex = Math.floor(Math.random() * (index + 1));
+    [copy[index], copy[swapIndex]] = [copy[swapIndex], copy[index]];
+  }
+
+  return copy;
+}
+
+export function buildPendingStatusRotation(allMessages: string[]): string[] {
+  const messages = allMessages.filter(message => message.trim() !== '');
+
+  if (messages.length === 0) {
+    return [];
+  }
+
+  if (messages.length === 1) {
+    return [messages[0]];
+  }
+
+  const [firstMessage, ...remainingMessages] = messages;
+
+  return [firstMessage, ...shuffleArray(remainingMessages)];
+}

package/src/lib/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

package/src/lib/useAnimatedText.ts

@@ -0,0 +1,78 @@
+import { onUnmounted, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from 'vue';
+
+const CHAR_INTERVAL_MS = 12;
+const CHARS_PER_TICK = 2;
+
+export interface UseAnimatedTextOptions {
+  intervalMs?: number;
+  charsPerTick?: number;
+  enabled?: MaybeRefOrGetter<boolean>;
+}
+
+export function useAnimatedText(
+  getSource: MaybeRefOrGetter<string>,
+  options: UseAnimatedTextOptions = {}
+): Ref<string> {
+  const intervalMs = options.intervalMs ?? CHAR_INTERVAL_MS;
+  const charsPerTick = options.charsPerTick ?? CHARS_PER_TICK;
+  const getEnabled = options.enabled ?? (() => true);
+  const displayedText = ref('');
+  let tickId: ReturnType<typeof setInterval> | null = null;
+
+  function animateTowardsTarget() {
+    const target = toValue(getSource);
+    const targetStr = typeof target === 'string' ? target : '';
+    if (displayedText.value.length >= targetStr.length) {
+      if (tickId) {
+        clearInterval(tickId);
+        tickId = null;
+      }
+      return;
+    }
+    const remaining = targetStr.length - displayedText.value.length;
+    const toAdd = Math.min(charsPerTick, remaining);
+    displayedText.value = targetStr.slice(0, displayedText.value.length + toAdd);
+  }
+
+  watch(
+    () => {
+      const source = toValue(getSource);
+      const enabled = toValue(getEnabled);
+      return { source, enabled };
+    },
+    ({ source, enabled }) => {
+      const newText = typeof source === 'string' ? source : '';
+      if (!enabled) {
+        displayedText.value = newText;
+        if (tickId) {
+          clearInterval(tickId);
+          tickId = null;
+        }
+        return;
+      }
+      if (newText.length <= displayedText.value.length) {
+        displayedText.value = newText;
+        if (tickId) {
+          clearInterval(tickId);
+          tickId = null;
+        }
+        return;
+      }
+      if (!tickId) {
+        tickId = setInterval(() => {
+          animateTowardsTarget();
+        }, intervalMs);
+      }
+    },
+    { immediate: true }
+  );
+
+  onUnmounted(() => {
+    if (tickId) {
+      clearInterval(tickId);
+      tickId = null;
+    }
+  });
+
+  return displayedText;
+}

package/src/lib/userMessage.ts

@@ -0,0 +1,55 @@
+export type SvedaUserMessageLike = {
+  role?: string;
+  content?: string;
+  attachmentNames?: string[];
+  metadata?: {
+    attachmentNames?: string[];
+  };
+  parts?: Array<{
+    type?: string;
+    text?: string;
+    name?: string;
+  }>;
+};
+
+export const getUserMessageText = (message: SvedaUserMessageLike): string => {
+  if (typeof message.content === 'string' && message.content.trim()) {
+    return message.content.trim();
+  }
+
+  if (!Array.isArray(message.parts)) {
+    return '';
+  }
+
+  return message.parts
+    .filter(part => part?.type === 'text')
+    .map(part => String(part.text || '').trim())
+    .filter(Boolean)
+    .join(' ');
+};
+
+export const getUserMessageAttachmentNames = (message: SvedaUserMessageLike): string[] => {
+  const raw = message.attachmentNames ?? message.metadata?.attachmentNames;
+  if (Array.isArray(raw)) {
+    return raw.map(name => String(name).trim()).filter(Boolean);
+  }
+
+  if (!Array.isArray(message.parts)) {
+    return [];
+  }
+
+  return message.parts
+    .filter(part => part?.type === 'file')
+    .map(part => String(part.name || '').trim())
+    .filter(Boolean);
+};
+
+export const userMessageHasVisibleContent = (message: SvedaUserMessageLike): boolean => {
+  if (message.role !== 'user') {
+    return false;
+  }
+
+  return (
+    getUserMessageText(message).length > 0 || getUserMessageAttachmentNames(message).length > 0
+  );
+};

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}