@sveda-ai/vue 0.1.0

package/src/composables/useSvedaChatPage.ts

@@ -0,0 +1,339 @@
+import { computed, onMounted, reactive, ref, watch, type ComputedRef, type Ref } from 'vue';
+import { useSvedaT } from '../i18n/index';
+import { useSvedaAgentTasks, type SvedaAgentTasksPayload } from './useSvedaAgentTasks';
+import { useSvedaBootstrap } from './useSvedaBootstrap';
+import { useSvedaChat } from './useSvedaChat';
+import { useSvedaChatLayout } from './useSvedaChatLayout';
+import { useSvedaContextWindow, SVEDA_CHAT_MAX_CONTEXT_TOKENS } from './useSvedaContextWindow';
+import { useSvedaDocuments } from './useSvedaDocuments';
+import { useSvedaMaxStepsContinue } from './useSvedaMaxStepsContinue';
+import { useSvedaMessaging } from './useSvedaMessaging';
+import { useSvedaModel, type SvedaChatModelOption } from './useSvedaModel';
+import { useSvedaPrompts, type SvedaQuickPromptItem } from './useSvedaPrompts';
+import { useSvedaScroll, type SvedaScrollContainer } from './useSvedaScroll';
+import { useSvedaShell, type SvedaBrandInfo } from './useSvedaShell';
+import { useSvedaStreaming } from './useSvedaStreaming';
+
+export const svedaErrorMessage = (error: unknown, fallback: string): string => {
+  if (error instanceof Error && error.message.trim()) {
+    return error.message;
+  }
+
+  if (error && typeof error === 'object' && 'message' in error) {
+    const message = (error as { message?: unknown }).message;
+    if (typeof message === 'string' && message.trim()) {
+      return message;
+    }
+  }
+
+  return fallback;
+};
+
+export interface SvedaChatPageOptions {
+  models?: ComputedRef<SvedaChatModelOption[]>;
+  quickPrompts?: ComputedRef<SvedaQuickPromptItem[]>;
+  brand?: ComputedRef<SvedaBrandInfo>;
+  pageUrl?: ComputedRef<string>;
+  pageContext?: ComputedRef<Record<string, unknown>>;
+  onNavigate?: (url: string) => void;
+  notify?: (kind: 'error', message: string) => void;
+  agentTasksSubscribe?: (
+    onPayload: (payload: SvedaAgentTasksPayload) => void
+  ) => void | (() => void);
+}
+
+export type SvedaChatPageRefs = {
+  messagesContainerRef: Ref<SvedaScrollContainer>;
+  chatCardRef: Ref<unknown>;
+};
+
+export function useSvedaChatPage(options: SvedaChatPageOptions, elementRefs: SvedaChatPageRefs) {
+  const t = useSvedaT();
+
+  const chatStore = useSvedaChat();
+  const {
+    currentChat,
+    sortedHistories,
+    isMinimized,
+    isLoading,
+    isLoadingChatHistory,
+    loadHistories,
+    createNewChat,
+    setCurrentChat,
+    setChatTitle,
+    refreshChatTitleFromServer,
+    setChatMessages,
+    incrementChatTokens,
+    setChatContextWindowTokens,
+    deleteChat,
+    renameChat,
+    maximizeChat,
+    minimizeChat,
+    setLoading,
+  } = chatStore;
+
+  const layout = useSvedaChatLayout(isMinimized);
+
+  const model = useSvedaModel(options.models ?? computed(() => []));
+  const documents = useSvedaDocuments({
+    onError: message => options.notify?.('error', message),
+  });
+  const prompts = useSvedaPrompts(currentChat, options.quickPrompts ?? computed(() => []));
+
+  const contextWindowMaxTokens = ref(SVEDA_CHAT_MAX_CONTEXT_TOKENS);
+  const contextWindow = useSvedaContextWindow(currentChat, contextWindowMaxTokens);
+
+  const activeChatId = computed(() => currentChat.value?.id ?? null);
+
+  const { agentTasks, hasActiveAgentTasks, clearAgentTasks, mergeAgentTasksPayload } =
+    useSvedaAgentTasks({ subscribe: options.agentTasksSubscribe });
+
+  const { messagesContainerRef } = elementRefs;
+  const showHistorySidebar = ref(false);
+
+  const scrollBridge: {
+    scrollToBottom?: (options?: { behavior?: string; onlyIfNearBottom?: boolean }) => void;
+  } = {};
+
+  const maxStepsBridge: {
+    mark: (chatId: string, data: { maxSteps: number }) => void;
+  } = {
+    mark: () => {},
+  };
+
+  const {
+    sendMessage: sendMessageStreaming,
+    continueAfterMaxSteps: continueStreamingAfterMaxSteps,
+    isStreaming,
+    isThinking,
+    thinkingMessage,
+    stopStreaming,
+    streamingChatIds,
+    unreadChatIds,
+    clearChatUnread,
+  } = useSvedaStreaming(
+    {
+      currentChat,
+      setChatMessages,
+      setChatTitle,
+      refreshChatTitleFromServer,
+      incrementChatTokens,
+      setChatContextWindowTokens,
+    },
+    scrollOptions => scrollBridge.scrollToBottom?.(scrollOptions),
+    {
+      newChatLabel: () => t('newChat'),
+      resolveSendOptions: model.resolveStreamingSendOptions,
+      onMaxStepsReached: (chatId, data) => maxStepsBridge.mark(chatId, data),
+      onToolProgress: (_chatId, event) => mergeAgentTasksPayload(event),
+      onContextUsage: (_chatId, event) => {
+        if (typeof event.maxTokens === 'number' && event.maxTokens > 0) {
+          contextWindowMaxTokens.value = event.maxTokens;
+        }
+      },
+      onError: (_chatId, error) => {
+        options.notify?.('error', svedaErrorMessage(error, t('errorSendingMessage')));
+      },
+    }
+  );
+
+  const maxStepsContinue = useSvedaMaxStepsContinue(
+    computed(() => currentChat.value?.id),
+    isStreaming,
+    isLoading
+  );
+  maxStepsBridge.mark = maxStepsContinue.markMaxStepsReached;
+
+  const maxStepsContinueMessage = computed(() =>
+    t('maxStepsReachedNotice', { limit: maxStepsContinue.maxStepsContinueLimit.value })
+  );
+
+  const scroll = useSvedaScroll(
+    messagesContainerRef,
+    computed(() => currentChat.value?.id),
+    options.pageUrl ?? computed(() => ''),
+    prompts.messages,
+    isStreaming
+  );
+  scrollBridge.scrollToBottom = scroll.scrollToBottom;
+
+  const pageContext = options.pageContext ?? computed(() => ({}));
+
+  const messaging = useSvedaMessaging({
+    isLoading,
+    currentChat,
+    pageContext,
+    sendMessageStreaming,
+    maximizeChat,
+    setLoading,
+    resetAgentCompletedNotice: scroll.resetAgentCompletedNotice,
+    resetMaxStepsContinueNotice: maxStepsContinue.resetMaxStepsContinueNotice,
+    extractingDocuments: documents.extractingDocuments,
+    extractChatDocuments: documents.extractChatDocuments,
+    buildChatDocumentSections: documents.buildChatDocumentSections,
+    onDocumentExtractError: documents.showDocumentExtractError,
+    clearAgentTasks,
+  });
+
+  const continueAfterMaxSteps = async () => {
+    const chatId = currentChat.value?.id;
+    if (!chatId || maxStepsContinue.maxStepsContinueDisabled.value) {
+      return;
+    }
+
+    maxStepsContinue.resetMaxStepsContinueNotice(chatId);
+    scroll.resetAgentCompletedNotice();
+    clearAgentTasks();
+    maximizeChat();
+
+    await continueStreamingAfterMaxSteps(pageContext.value);
+    scroll.scrollToBottom({ behavior: 'smooth', onlyIfNearBottom: false });
+  };
+
+  const shell = useSvedaShell(currentChat, options.brand ?? computed(() => ({})), layout);
+
+  const isImmersiveLandingLayout = computed(
+    () => layout.isImmersiveDesktop.value && !prompts.hasUserMessages.value
+  );
+
+  const chatInputStatusBanner = computed(() => documents.documentStatusBanner.value || '');
+
+  const { loadChatBootstrap } = useSvedaBootstrap({
+    loadHistories,
+    createNewChat,
+    setCurrentChat,
+    currentChat,
+    sortedHistories,
+    scrollToBottom: scroll.scrollToBottom,
+  });
+
+  const handleNewChat = () => {
+    clearAgentTasks();
+    maxStepsContinue.resetMaxStepsContinueNotice();
+    createNewChat();
+  };
+
+  const handleSelectChat = async (chatId: string) => {
+    clearChatUnread(chatId);
+    scroll.resetAgentCompletedNotice();
+    maxStepsContinue.resetMaxStepsContinueNotice();
+    await setCurrentChat(chatId);
+    scroll.scrollToBottom({ behavior: 'auto', onlyIfNearBottom: false });
+  };
+
+  const showDeleteChatDialog = ref(false);
+  const pendingDeleteChatId = ref<string | null>(null);
+
+  const handleDeleteChat = (chatId: string) => {
+    pendingDeleteChatId.value = chatId;
+    showDeleteChatDialog.value = true;
+  };
+
+  const confirmDeleteChat = () => {
+    const chatId = pendingDeleteChatId.value;
+    showDeleteChatDialog.value = false;
+
+    if (chatId) {
+      deleteChat(chatId);
+    }
+  };
+
+  const cancelDeleteChat = () => {
+    showDeleteChatDialog.value = false;
+  };
+
+  watch(showDeleteChatDialog, open => {
+    if (!open) {
+      pendingDeleteChatId.value = null;
+    }
+  });
+
+  const showRenameChatDialog = ref(false);
+  const pendingRenameChatId = ref<string | null>(null);
+  const pendingRenameChatTitle = ref('');
+
+  const handleRenameChat = (chatId: string) => {
+    const chat = sortedHistories.value.find(item => item.id === chatId);
+    pendingRenameChatId.value = chatId;
+    pendingRenameChatTitle.value = (chat?.title || '').trim();
+    showRenameChatDialog.value = true;
+  };
+
+  const confirmRenameChat = () => {
+    const chatId = pendingRenameChatId.value;
+    const title = pendingRenameChatTitle.value.trim();
+    showRenameChatDialog.value = false;
+
+    if (chatId && title) {
+      renameChat(chatId, title);
+    }
+  };
+
+  const cancelRenameChat = () => {
+    showRenameChatDialog.value = false;
+  };
+
+  watch(showRenameChatDialog, open => {
+    if (!open) {
+      pendingRenameChatId.value = null;
+      pendingRenameChatTitle.value = '';
+    }
+  });
+
+  const handleActivityLinkClick = async (link: string) => {
+    if (typeof link !== 'string' || link.trim() === '') {
+      return;
+    }
+    await layout.collapseImmersiveToDefaultFixedMode();
+    if (options.onNavigate) {
+      options.onNavigate(link);
+      return;
+    }
+    window.location.assign(link);
+  };
+
+  onMounted(async () => {
+    await loadChatBootstrap();
+  });
+
+  return reactive({
+    t,
+    showHistorySidebar,
+    ...chatStore,
+    ...layout,
+    ...model,
+    ...documents,
+    ...prompts,
+    ...contextWindow,
+    ...scroll,
+    ...messaging,
+    ...shell,
+    chatInputStatusBanner,
+    isStreaming,
+    isThinking,
+    thinkingMessage,
+    stopStreaming,
+    streamingChatIds,
+    unreadChatIds,
+    showMaxStepsContinueNotice: maxStepsContinue.showMaxStepsContinueNotice,
+    maxStepsContinueMessage,
+    maxStepsContinueDisabled: maxStepsContinue.maxStepsContinueDisabled,
+    continueAfterMaxSteps,
+    isImmersiveLandingLayout,
+    agentTasks,
+    hasActiveAgentTasks,
+    clearAgentTasks,
+    handleNewChat,
+    handleSelectChat,
+    handleDeleteChat,
+    showDeleteChatDialog,
+    confirmDeleteChat,
+    cancelDeleteChat,
+    handleRenameChat,
+    showRenameChatDialog,
+    pendingRenameChatTitle,
+    confirmRenameChat,
+    cancelRenameChat,
+    handleActivityLinkClick,
+  });
+}

package/src/composables/useSvedaContextWindow.ts

@@ -0,0 +1,31 @@
+import { computed, type Ref } from 'vue';
+
+export const SVEDA_CHAT_MAX_CONTEXT_TOKENS = 200000;
+
+export function useSvedaContextWindow(
+  currentChat: Ref<{ contextWindowTokens?: number } | null | undefined>,
+  maxTokens?: Ref<number>
+) {
+  const contextTokensUsed = computed(() => {
+    return Math.max(0, Math.round(Number(currentChat.value?.contextWindowTokens || 0)));
+  });
+
+  const contextWindowMaxTokens = computed(() => {
+    const value = Number(maxTokens?.value ?? SVEDA_CHAT_MAX_CONTEXT_TOKENS);
+    return Number.isFinite(value) && value > 0 ? value : SVEDA_CHAT_MAX_CONTEXT_TOKENS;
+  });
+
+  const contextWindowUsagePercent = computed(() => {
+    if (contextWindowMaxTokens.value <= 0) {
+      return 0;
+    }
+    const raw = (contextTokensUsed.value / contextWindowMaxTokens.value) * 100;
+    return Math.max(0, Math.min(100, Math.round(raw)));
+  });
+
+  return {
+    contextTokensUsed,
+    contextWindowMaxTokens,
+    contextWindowUsagePercent,
+  };
+}

package/src/composables/useSvedaDocuments.ts

@@ -0,0 +1,115 @@
+import { computed, inject, ref } from 'vue';
+import { useSvedaT } from '../i18n/index';
+import { SvedaClientKey } from '../plugin';
+
+export type SvedaExtractedDocumentItem = {
+  filename?: string;
+  ok?: boolean;
+  text?: string;
+  truncated?: boolean;
+  error?: string;
+};
+
+const DOCUMENT_ERROR_KEY_BY_CODE: Record<string, string> = {
+  read_failed: 'chatDocumentErrorReadFailed',
+  empty: 'chatDocumentErrorEmpty',
+  quota_exceeded: 'chatDocumentErrorQuotaExceeded',
+  unknown: 'chatDocumentErrorUnknown',
+};
+
+export function useSvedaDocuments(
+  options: {
+    endpoint?: string;
+    onError?: (message: string) => void;
+  } = {}
+) {
+  const t = useSvedaT();
+  const client = inject(SvedaClientKey, null);
+
+  const extractingDocuments = ref(false);
+  const documentStatusBanner = computed(() =>
+    extractingDocuments.value ? t('chatDocumentsExtracting') : ''
+  );
+
+  const resolveEndpoint = (): string | null =>
+    options.endpoint ?? client?.endpoints.documentsExtract ?? null;
+
+  const buildChatDocumentSections = (items: SvedaExtractedDocumentItem[]): string => {
+    const rows: string[] = [];
+    rows.push(t('chatDocumentsHeader'));
+    for (const item of items || []) {
+      rows.push('');
+      rows.push(`--- ${item.filename} ---`);
+      if (item.ok && item.text) {
+        rows.push(item.text);
+        if (item.truncated) {
+          rows.push(t('chatDocumentTruncatedNotice'));
+        }
+      } else {
+        const code = typeof item.error === 'string' ? item.error : 'unknown';
+        rows.push(t(DOCUMENT_ERROR_KEY_BY_CODE[code] ?? 'chatDocumentErrorUnknown'));
+      }
+    }
+    return rows.join('\n');
+  };
+
+  const extractChatDocuments = async (
+    rawFiles: File[]
+  ): Promise<{ items: SvedaExtractedDocumentItem[] }> => {
+    const endpoint = resolveEndpoint();
+    if (!endpoint || !client) {
+      throw new Error(t('chatDocumentsExtractFailed'));
+    }
+
+    const formData = new FormData();
+    for (const file of rawFiles) {
+      formData.append('files[]', file);
+    }
+
+    const response = await client.fetchImpl(endpoint, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        ...client.resolveHeaders(),
+      },
+      credentials: client.credentials,
+      body: formData,
+    });
+
+    const payload = (await response.json().catch(() => ({}))) as {
+      message?: string;
+      errors?: Record<string, unknown>;
+      items?: SvedaExtractedDocumentItem[];
+    };
+
+    if (!response.ok) {
+      let message = payload?.message || t('chatDocumentsExtractFailed');
+      const errors = payload?.errors;
+      if (errors && typeof errors === 'object') {
+        const values = Object.values(errors).flat();
+        const first = values[0];
+        if (first != null && String(first).trim() !== '') {
+          message = Array.isArray(first) ? String(first[0]) : String(first);
+        }
+      }
+
+      throw new Error(message);
+    }
+
+    return { items: Array.isArray(payload.items) ? payload.items : [] };
+  };
+
+  const showDocumentExtractError = (error: unknown) => {
+    options.onError?.(
+      error instanceof Error && error.message ? error.message : t('chatDocumentsExtractFailed')
+    );
+  };
+
+  return {
+    extractingDocuments,
+    documentStatusBanner,
+    buildChatDocumentSections,
+    extractChatDocuments,
+    showDocumentExtractError,
+  };
+}

package/src/composables/useSvedaMaxStepsContinue.ts

@@ -0,0 +1,68 @@
+import { computed, ref, type ComputedRef, type Ref } from 'vue';
+
+export type SvedaMaxStepsReachedData = {
+  maxSteps: number;
+};
+
+type PendingMaxSteps = Record<string, SvedaMaxStepsReachedData>;
+
+export function useSvedaMaxStepsContinue(
+  currentChatId: ComputedRef<string | null | undefined>,
+  isStreaming: Ref<boolean>,
+  isLoading: Ref<boolean>
+) {
+  const pendingByChatId = ref<PendingMaxSteps>({});
+
+  const showMaxStepsContinueNotice = computed(() => {
+    const chatId = currentChatId.value;
+    if (!chatId) {
+      return false;
+    }
+
+    return chatId in pendingByChatId.value;
+  });
+
+  const maxStepsContinueLimit = computed(() => {
+    const chatId = currentChatId.value;
+    if (!chatId) {
+      return 0;
+    }
+
+    return pendingByChatId.value[chatId]?.maxSteps ?? 0;
+  });
+
+  const markMaxStepsReached = (chatId: string, data: SvedaMaxStepsReachedData) => {
+    pendingByChatId.value = {
+      ...pendingByChatId.value,
+      [chatId]: { maxSteps: data.maxSteps },
+    };
+  };
+
+  const resetMaxStepsContinueNotice = (chatId?: string) => {
+    if (!chatId) {
+      pendingByChatId.value = {};
+
+      return;
+    }
+
+    if (!(chatId in pendingByChatId.value)) {
+      return;
+    }
+
+    const next = { ...pendingByChatId.value };
+    delete next[chatId];
+    pendingByChatId.value = next;
+  };
+
+  const maxStepsContinueDisabled = computed(
+    () => isStreaming.value || isLoading.value || !showMaxStepsContinueNotice.value
+  );
+
+  return {
+    showMaxStepsContinueNotice,
+    maxStepsContinueLimit,
+    maxStepsContinueDisabled,
+    markMaxStepsReached,
+    resetMaxStepsContinueNotice,
+  };
+}

package/src/composables/useSvedaMessaging.ts

@@ -0,0 +1,99 @@
+import { ref, type ComputedRef, type Ref } from 'vue';
+import type { SvedaExtractedDocumentItem } from './useSvedaDocuments';
+
+type SendMessageStreaming = (
+  payload: { displayText: string; promptText: string; attachmentNames?: string[] },
+  pageContext: Record<string, unknown>
+) => Promise<void>;
+
+export function useSvedaMessaging(deps: {
+  isLoading: Ref<boolean>;
+  currentChat: Ref<{ id?: string } | null | undefined>;
+  pageContext: ComputedRef<Record<string, unknown>>;
+  sendMessageStreaming: SendMessageStreaming;
+  maximizeChat: () => void;
+  setLoading: (value: boolean) => void;
+  resetAgentCompletedNotice: () => void;
+  resetMaxStepsContinueNotice?: (chatId?: string) => void;
+  extractingDocuments: Ref<boolean>;
+  extractChatDocuments: (files: File[]) => Promise<{ items: SvedaExtractedDocumentItem[] }>;
+  buildChatDocumentSections: (items: SvedaExtractedDocumentItem[]) => string;
+  onDocumentExtractError: (error: unknown) => void;
+  clearAgentTasks?: () => void;
+}) {
+  const inputMessage = ref('');
+  const pendingChatFiles = ref<File[]>([]);
+
+  const sendMessage = async () => {
+    if (deps.isLoading.value || !deps.currentChat.value) {
+      return;
+    }
+    const text = inputMessage.value.trim();
+    const files = [...(pendingChatFiles.value || [])].filter(file => file instanceof File);
+    if (!text && files.length === 0) {
+      return;
+    }
+
+    deps.resetAgentCompletedNotice();
+    deps.resetMaxStepsContinueNotice?.(deps.currentChat.value?.id);
+    deps.clearAgentTasks?.();
+    deps.maximizeChat();
+
+    let docSection = '';
+    if (files.length > 0) {
+      deps.extractingDocuments.value = true;
+      deps.setLoading(true);
+      try {
+        const extracted = await deps.extractChatDocuments(files);
+        docSection = deps.buildChatDocumentSections(extracted.items);
+      } catch (error) {
+        deps.onDocumentExtractError(error);
+        deps.setLoading(false);
+        deps.extractingDocuments.value = false;
+        return;
+      } finally {
+        deps.extractingDocuments.value = false;
+        deps.setLoading(false);
+      }
+    }
+
+    inputMessage.value = '';
+    pendingChatFiles.value = [];
+
+    const names = files.map(file => file.name).filter(Boolean);
+    const promptPieces: string[] = [];
+    if (text) {
+      promptPieces.push(text);
+    }
+    if (docSection !== '') {
+      promptPieces.push(docSection);
+    }
+    const promptText = promptPieces.join('\n\n');
+
+    await deps.sendMessageStreaming(
+      {
+        displayText: text,
+        promptText,
+        attachmentNames: names.length > 0 ? names : undefined,
+      },
+      deps.pageContext.value
+    );
+  };
+
+  const sendQuickPrompt = async (prompt: string) => {
+    if (!prompt || deps.isLoading.value || !deps.currentChat.value) {
+      return;
+    }
+
+    pendingChatFiles.value = [];
+    inputMessage.value = prompt;
+    await sendMessage();
+  };
+
+  return {
+    inputMessage,
+    pendingChatFiles,
+    sendMessage,
+    sendQuickPrompt,
+  };
+}