@sveda-ai/vue 0.1.0

package/src/composables/useSvedaModel.ts

@@ -0,0 +1,85 @@
+import type { SvedaSendOptions } from '@sveda-ai/core';
+import { computed, ref, watch, type ComputedRef } from 'vue';
+import { useSvedaT } from '../i18n/index';
+
+const SVEDA_CHAT_MODEL_STORAGE_KEY = 'sveda.chat-model';
+const SVEDA_CHAT_THINKING_STORAGE_KEY = 'sveda.chat-thinking';
+
+export interface SvedaChatModelOption {
+  id: string;
+  label: string;
+  supportsThinking?: boolean;
+}
+
+export function useSvedaModel(models: ComputedRef<SvedaChatModelOption[]>) {
+  const t = useSvedaT();
+
+  const readStoredModel = (): string => {
+    if (typeof window === 'undefined') {
+      return models.value[0]?.id ?? '';
+    }
+    const savedModel = localStorage.getItem(SVEDA_CHAT_MODEL_STORAGE_KEY);
+    if (savedModel && models.value.some(option => option.id === savedModel)) {
+      return savedModel;
+    }
+    return models.value[0]?.id ?? '';
+  };
+
+  const readStoredThinking = (): boolean => {
+    if (typeof window === 'undefined') {
+      return true;
+    }
+    const savedThinking = localStorage.getItem(SVEDA_CHAT_THINKING_STORAGE_KEY);
+    if (savedThinking === '0') {
+      return false;
+    }
+    return true;
+  };
+
+  const selectedChatModel = ref(readStoredModel());
+  const thinkingEnabled = ref(readStoredThinking());
+
+  const chatModels = computed(() => models.value);
+
+  const selectedModelSupportsThinking = computed(
+    () =>
+      models.value.find(option => option.id === selectedChatModel.value)?.supportsThinking ??
+      false
+  );
+
+  const thinkingTooltipText = computed(() => t('thinkingTooltip'));
+
+  watch(models, list => {
+    if (list.length > 0 && !list.some(option => option.id === selectedChatModel.value)) {
+      selectedChatModel.value = list[0].id;
+    }
+  });
+
+  watch(selectedChatModel, newVal => {
+    if (typeof window !== 'undefined' && newVal) {
+      localStorage.setItem(SVEDA_CHAT_MODEL_STORAGE_KEY, newVal);
+    }
+  });
+
+  watch(thinkingEnabled, newVal => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(SVEDA_CHAT_THINKING_STORAGE_KEY, newVal ? '1' : '0');
+    }
+  });
+
+  const resolveStreamingSendOptions = (): Pick<SvedaSendOptions, 'model' | 'options'> => ({
+    model: selectedChatModel.value || undefined,
+    options: {
+      thinking: Boolean(selectedModelSupportsThinking.value && thinkingEnabled.value),
+    },
+  });
+
+  return {
+    selectedChatModel,
+    thinkingEnabled,
+    chatModels,
+    selectedModelSupportsThinking,
+    thinkingTooltipText,
+    resolveStreamingSendOptions,
+  };
+}

package/src/composables/useSvedaPrompts.ts

@@ -0,0 +1,59 @@
+import { computed, type ComputedRef, type Ref } from 'vue';
+import { userMessageHasVisibleContent, type SvedaUserMessageLike } from '../lib/userMessage';
+
+export interface SvedaQuickPromptItem {
+  label: string;
+  prompt: string;
+}
+
+type ChatWithMessages = {
+  id?: string;
+  messages?: SvedaUserMessageLike[];
+};
+
+export function useSvedaPrompts(
+  currentChat: Ref<ChatWithMessages | null | undefined>,
+  quickPrompts: ComputedRef<Array<SvedaQuickPromptItem | string> | undefined>
+) {
+  const messages = computed(() => currentChat.value?.messages || []);
+
+  const hasUserMessages = computed(() => messages.value.some(userMessageHasVisibleContent));
+
+  const quickPromptButtons = computed<SvedaQuickPromptItem[]>(() => {
+    const list = quickPrompts.value;
+    if (!Array.isArray(list)) {
+      return [];
+    }
+
+    return list
+      .map(item => {
+        if (typeof item === 'string') {
+          const label = item.trim();
+          return label ? { label, prompt: label } : null;
+        }
+        const label = String(item?.label ?? '').trim();
+        const prompt = String(item?.prompt ?? '').trim();
+        return label && prompt ? { label, prompt } : null;
+      })
+      .filter((item): item is SvedaQuickPromptItem => !!item);
+  });
+
+  const showQuickPromptButtons = computed(() => {
+    if (!currentChat.value) {
+      return false;
+    }
+
+    if (quickPromptButtons.value.length === 0) {
+      return false;
+    }
+
+    return !currentChat.value.messages?.some(userMessageHasVisibleContent);
+  });
+
+  return {
+    messages,
+    hasUserMessages,
+    quickPromptButtons,
+    showQuickPromptButtons,
+  };
+}

package/src/composables/useSvedaReadable.ts

@@ -0,0 +1,33 @@
+import { inject, onUnmounted, toValue, watch, type MaybeRefOrGetter } from 'vue';
+import { SvedaClientKey } from '../plugin';
+
+export function useSvedaReadable(
+  description: MaybeRefOrGetter<string>,
+  value: MaybeRefOrGetter<unknown>
+): void {
+  const client = inject(SvedaClientKey, null);
+  if (!client) {
+    return;
+  }
+
+  let unregister: (() => void) | null = null;
+
+  const register = () => {
+    unregister?.();
+    unregister = client.contextRegistry.register(toValue(description), () => toValue(value));
+  };
+
+  register();
+
+  watch(
+    () => toValue(description),
+    () => {
+      register();
+    }
+  );
+
+  onUnmounted(() => {
+    unregister?.();
+    unregister = null;
+  });
+}

package/src/composables/useSvedaScroll.ts

@@ -0,0 +1,93 @@
+import { nextTick, ref, watch, type ComputedRef, type Ref } from 'vue';
+
+export type SvedaScrollContainer = {
+  scrollToBottom?: (options?: { behavior?: string; onlyIfNearBottom?: boolean }) => void;
+} | null;
+
+export function useSvedaScroll(
+  messagesContainerRef: Ref<SvedaScrollContainer>,
+  currentChatId: ComputedRef<string | undefined>,
+  pageUrl: ComputedRef<string>,
+  messages: ComputedRef<unknown[]>,
+  isStreaming: Ref<boolean>
+) {
+  const isMessagesNearBottom = ref(true);
+  const showAgentCompletedNotice = ref(false);
+  const streamingScrollGuardEnabled = ref(false);
+
+  const scrollToBottom = (options: { behavior?: string; onlyIfNearBottom?: boolean } = {}) => {
+    nextTick(() => {
+      if (messagesContainerRef.value?.scrollToBottom) {
+        messagesContainerRef.value.scrollToBottom({
+          ...options,
+          onlyIfNearBottom:
+            options.onlyIfNearBottom ??
+            (streamingScrollGuardEnabled.value || showAgentCompletedNotice.value),
+        });
+      }
+    });
+  };
+
+  const handleMessagesNearBottomChange = (value: boolean) => {
+    isMessagesNearBottom.value = value;
+    if (value) {
+      showAgentCompletedNotice.value = false;
+    }
+  };
+
+  const scrollToCompletedAnswer = () => {
+    showAgentCompletedNotice.value = false;
+    scrollToBottom({ behavior: 'smooth', onlyIfNearBottom: false });
+  };
+
+  const resetAgentCompletedNotice = () => {
+    showAgentCompletedNotice.value = false;
+  };
+
+  watch(
+    isStreaming,
+    (value, oldValue) => {
+      streamingScrollGuardEnabled.value = value;
+      if (value) {
+        showAgentCompletedNotice.value = false;
+        return;
+      }
+
+      if (oldValue && !isMessagesNearBottom.value) {
+        showAgentCompletedNotice.value = true;
+      }
+    },
+    { flush: 'sync' }
+  );
+
+  watch(
+    () => currentChatId.value,
+    () => {
+      scrollToBottom();
+    }
+  );
+
+  watch(
+    () => pageUrl.value,
+    () => {
+      scrollToBottom();
+    }
+  );
+
+  watch(
+    () => messages.value,
+    () => {
+      scrollToBottom();
+    },
+    { deep: true }
+  );
+
+  return {
+    isMessagesNearBottom,
+    showAgentCompletedNotice,
+    scrollToBottom,
+    handleMessagesNearBottomChange,
+    scrollToCompletedAnswer,
+    resetAgentCompletedNotice,
+  };
+}

package/src/composables/useSvedaShell.ts

@@ -0,0 +1,91 @@
+import { computed, type ComputedRef, type Ref } from 'vue';
+import { useSvedaLauncher } from '../appearance';
+import { useSvedaT } from '../i18n/index';
+
+export interface SvedaBrandInfo {
+  name?: string;
+  logoUrl?: string | null;
+}
+
+type CurrentChat =
+  | {
+      title?: string;
+    }
+  | null
+  | undefined;
+
+export function useSvedaShell(
+  currentChat: Ref<CurrentChat>,
+  brand: ComputedRef<SvedaBrandInfo | undefined>,
+  layout: {
+    isMobile: ComputedRef<boolean>;
+    viewMode: Ref<string>;
+    chatHeight: Ref<number>;
+    fillHost?: boolean;
+  }
+) {
+  const t = useSvedaT();
+  const launcher = useSvedaLauncher();
+
+  const headerTitle = computed(() => currentChat.value?.title || t('chatTitle'));
+  const brandDisplayName = computed(() => brand.value?.name || 'Sveda');
+  const brandLogo = computed(() => brand.value?.logoUrl || null);
+  const launcherLabel = computed(() => {
+    const custom = launcher.label.trim();
+
+    return custom !== '' ? custom : brandDisplayName.value;
+  });
+  const launcherIcon = computed(() => launcher.icon);
+  const launcherImage = computed(() => {
+    const uploaded = launcher.image.trim();
+    if (uploaded !== '') {
+      return uploaded;
+    }
+
+    return brandLogo.value || '';
+  });
+
+  const nonImmersiveShellClass = computed(() => {
+    if (layout.isMobile.value || layout.viewMode.value === 'fixed') {
+      return 'relative flex h-full min-h-0 min-w-0 flex-1 flex-row';
+    }
+    if (layout.fillHost) {
+      return 'flex h-full min-h-0 min-w-0 w-full flex-row items-stretch';
+    }
+    return 'flex min-h-0 flex-row items-stretch gap-2';
+  });
+
+  const historyAsideSurfaceClass = computed(() => {
+    const base =
+      'sveda-chat-surface flex min-h-0 shrink-0 flex-col overflow-hidden bg-background';
+    if (layout.isMobile.value) {
+      return `${base} h-full w-[min(20rem,88vw)] border-r border-border`;
+    }
+    if (layout.viewMode.value === 'fixed') {
+      return `${base} absolute right-full top-0 z-10 h-full w-[min(20rem,40vw)] border-r border-border shadow-sm`;
+    }
+    return `${base} h-full w-[min(20rem,40vw)] rounded-[var(--sveda-radius)] border border-border shadow-sm`;
+  });
+
+  const floatNonImmersiveShellStyle = computed(() => {
+    if (layout.isMobile.value || layout.viewMode.value !== 'floating') {
+      return undefined;
+    }
+    if (layout.fillHost) {
+      return { height: '100%', minHeight: 0 };
+    }
+    return { height: `${layout.chatHeight.value}px`, minHeight: 0 };
+  });
+
+  return {
+    headerTitle,
+    brandDisplayName,
+    brandLogo,
+    launcherLabel,
+    launcherIcon,
+    launcherImage,
+    nonImmersiveShellClass,
+    historyAsideSurfaceClass,
+    floatNonImmersiveShellStyle,
+  };
+}