@adminforth/agent 2.0.9 → 2.1.0

package/custom/ChatSurface.vue

@@ -1,160 +0,0 @@
-<template>
-  <div 
-    class="relative w-6 h-6 cursor-pointer mr-1 mt-1
-      text-lightNavbarIcons hover:text-lightNavbarIcons/80 
-      dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80
-      hover:scale-110 transition-colors duration-200"       
-    @click="agentStore.setIsChatOpen(!agentStore.isChatOpen)"
-  >
-    <IconChatBubbleLeft20Solid 
-      class="w-6 h-6" 
-    />
-    <div class="absolute w-4 h-4 bg-lightNavbar dark:bg-darkNavbar rounded-full -top-1 -right-2">
-      <IconSparklesSolid 
-        class="w-4 h-4"
-      />
-    </div>
-  </div>
-
-  <Teleport to="body">
-    <div 
-      ref="chatSurface"
-      id="adminforth-agent-chat-surface"
-      class="fixed bg-lightNavbar dark:bg-darkNavbar top-0 right-0 border-x border-b border-gray-200 dark:border-gray-700 
-            flex flex z-40 h-screen"
-      :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody ? 'shadow-2xl' : '']"
-      :style="{ width: agentStore.chatWidth + 'rem' }"
-    > 
-      <div 
-        v-if="!(coreStore.isMobile || agentStore.isFullScreen)"
-        class="w-2 cursor-ew-resize absolute left-0 h-full top-0 z-30"
-        @mousedown="startResize"
-      ></div>
-      <div 
-        class="w-full min-h-0 max-h-full flex flex-col h-dvh"
-        :style="{
-          height: !coreStore.isIos ? dvh + 'px' : '100dvh',
-        }"
-      >
-        <ChatHeader />
-        <div 
-          class="relative flex-1 min-h-0 flex flex-col overflow-hidden"
-        >
-          <ConversationArea
-            ref="conversationArea" 
-            v-if="agentStore.isChatOpen"
-            :messages="agentStore.chatMessages"
-          />
-          <ChatFooter 
-            :meta="props.meta"
-            :adminUser="props.adminUser"
-            :conversationAreaRef="conversationArea"
-          />
-        </div>
-      </div>
-    </div>
-  </Teleport>
-
-</template>
-
-<script setup lang="ts">
-import { IconChatBubbleLeft20Solid, IconSparklesSolid } from '@iconify-prerendered/vue-heroicons';
-import { useTemplateRef, onMounted, ref, onUnmounted } from 'vue';
-import { onClickOutside } from '@vueuse/core'
-import ConversationArea from './conversation_area/ConversationArea.vue';
-import ChatHeader from './ChatHeader.vue';
-import ChatFooter from './ChatFooter.vue';
-import { useAgentStore } from './composables/useAgentStore';
-import { useAgentTransitions } from './composables/useAgentTransitions';
-import { useCoreStore } from '@/stores/core';
-import { remToPx } from './utils';
-
-const props = defineProps<{
-  meta: {
-    pluginInstanceId: string;
-    modes: Array<{
-      name: string;
-    }>;
-    defaultModeName: string | null;
-    stickByDefault: boolean;
-    hasAudioAdapter: boolean;
-  }
-  adminUser: any
-}>();
-
-const chatSurface = useTemplateRef('chatSurface');
-const conversationArea = useTemplateRef('conversationArea');
-const agentStore = useAgentStore();
-const agentTransitions = useAgentTransitions();
-const coreStore = useCoreStore();
-
-const dvh = ref(window.visualViewport?.height || window.innerHeight);
-
-let startX = 0
-let startWidth = 0
-
-onClickOutside(chatSurface as any, () => {if (!agentStore.isTeleportedToBody && !agentStore.isFullScreen) agentStore.setIsChatOpen(false);});
-
-onMounted(async () => {
-  window.addEventListener('resize', updateHeight)
-  const savedIsTeleportedToBody = agentStore.getLocalStorageItem('isTeleportedToBody');
-  const savedIsTeleportedToBodyBeforeFullScreen = agentStore.getLocalStorageItem('isTeleportedToBodyBeforeFullScreen');
-  let isTeleportedToBodyFromLocalStorage = true;
-  if (savedIsTeleportedToBody !== null || savedIsTeleportedToBodyBeforeFullScreen !== null) {
-    isTeleportedToBodyFromLocalStorage = savedIsTeleportedToBody === 'true' || savedIsTeleportedToBodyBeforeFullScreen === 'true';
-  }
-  if( coreStore.isMobile ) {
-    agentStore.setIsTeleportedToBody(false);
-  } else {
-    const shouldTeleportToBody = isTeleportedToBodyFromLocalStorage || props.meta.stickByDefault;
-    const savedIsChatOpen = agentStore.getLocalStorageItem('isChatOpen');
-
-    agentStore.setIsTeleportedToBody(shouldTeleportToBody);
-    if (shouldTeleportToBody && savedIsChatOpen === null) {
-      agentStore.setIsChatOpen(true);
-    }
-  }
-  await agentStore.fetchSessionsList();
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', updateHeight)
-})
-
-const startResize = (e: MouseEvent) => {
-  startX = e.clientX
-  startWidth = remToPx(agentStore.chatWidth)
-
-  document.body.style.userSelect = 'none'
-  document.body.style.cursor = 'ew-resize'
-
-  document.addEventListener('mousemove', onResize)
-  document.addEventListener('mouseup', stopResize)
-}
-
-const onResize = (e: MouseEvent) => {
-  const dx = startX - e.clientX
-  agentStore.setChatWidth(Math.min(Math.max(startWidth + dx, remToPx(agentStore.MIN_WIDTH)), remToPx(agentStore.MAX_WIDTH)))
-  agentTransitions.setChatSurfaceTransition(true);
-}
-
-const stopResize = () => {
-  document.body.style.userSelect = ''
-  document.body.style.cursor = ''
-
-  document.removeEventListener('mousemove', onResize)
-  document.removeEventListener('mouseup', stopResize)
-
-  const appRoot = document.getElementById('app');
-  const header = document.getElementById('af-header-nav');
-  if (appRoot && header) {
-    agentTransitions.setAppRootTransition(false);
-    agentTransitions.setChatSurfaceTransition(false);
-  }
-}
-
-function updateHeight() {
-  dvh.value = Math.round(window.visualViewport?.height || window.innerHeight);
-}
-
-</script>

package/custom/CustomAutoScrollContainer.vue

@@ -1,164 +0,0 @@
-<template>
-  <CustomScrollbar
-    ref="containerRef"
-    class="auto-scroll-container mask-y"
-    :wrapperStyle = "wrapperStyle" 
-    :contentStyle = "contentStyle"
-    :autoHide = "scrollBarAutoHide"
-    @scroll="handleScroll"
-  >
-    <slot />
-  </CustomScrollbar>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
-import CustomScrollbar from 'custom-vue-scrollbar';
-import 'custom-vue-scrollbar/dist/style.css';
-
-
-const props = withDefaults(defineProps<{
-  enabled?: boolean
-  threshold?: number
-  behavior?: ScrollBehavior
-  wrapperStyle?: Record<string, string>
-  contentStyle?: Record<string, string>
-  scrollBarAutoHide?: boolean
-}>(), {
-  enabled: true,
-  threshold: 50,
-  behavior: 'instant',
-  scrollBarAutoHide: true
-})
-
-const containerRef = ref<HTMLDivElement | null>(null)
-const isUserScrolledUp = ref(false)
-const scrollElement = ref<HTMLElement | null>(null)
-
-let lastScrollTop = 0
-let lastScrollHeight = 0
-let observer: MutationObserver | null = null
-
-const scrollParams = ref({
-  scrollTop: 0,
-  scrollHeight: 0,
-  clientHeight: 0
-});
-
-defineExpose({
-  scrollToBottom: () => scrollToBottom(true),
-  isUserScrolledUp: () => isUserScrolledUp.value,
-  container: containerRef,
-  handleScroll,
-  scrollParams
-})
-
-onMounted(() => {
-  if (!containerRef.value) return
-  
-  scrollElement.value = containerRef.value.scrollEl
-  lastScrollTop = containerRef.value.scrollEl.scrollTop
-  lastScrollHeight = containerRef.value.scrollEl.scrollHeight
-  
-  observer = new MutationObserver(() => {
-    nextTick(() => {
-      if (!containerRef.value?.scrollEl) return
-      
-      if (!hasScrollbar()) {
-        isUserScrolledUp.value = false
-      }
-      
-      lastScrollHeight = containerRef.value.scrollEl.scrollHeight
-      scrollParams.value.scrollTop = containerRef.value.scrollEl.scrollTop
-      scrollParams.value.scrollHeight = containerRef.value.scrollEl.scrollHeight
-      scrollParams.value.clientHeight = containerRef.value.scrollEl.clientHeight
-      if (props.enabled && !isUserScrolledUp.value) {
-        scrollToBottom()
-      }
-    })
-  })
-  
-  observer.observe(containerRef.value?.scrollEl, {
-    childList: true,
-    subtree: true,
-    characterData: true
-  })
-})
-
-onUnmounted(() => {
-  observer?.disconnect()
-})
-
-function isNearBottom(customThreshold?: number): boolean {
-  const container = containerRef.value?.scrollEl
-  if (!container) return true
-  
-  const { scrollTop, scrollHeight, clientHeight } = container
-  scrollParams.value.scrollTop = scrollTop
-  scrollParams.value.scrollHeight = scrollHeight
-  scrollParams.value.clientHeight = clientHeight
-  const threshold = customThreshold ?? props.threshold
-  return scrollHeight - scrollTop - clientHeight <= threshold
-}
-
-function scrollToBottom(force = false): void {
-  const container = containerRef.value?.scrollEl
-  if (!container) return
-  
-  if (isUserScrolledUp.value && !force) return
-  container.scrollTo({
-    top: container.scrollHeight,
-    behavior: props.behavior
-  })
-}
-
-
-function hasScrollbar(): boolean {
-  const container = containerRef.value?.scrollEl
-  if (!container) return false
-  return container.scrollHeight > container.clientHeight
-}
-
-
-function handleScroll(detectScrollDown = true, customThreshold?: number): void {
-  const container = containerRef.value.scrollEl
-  if (!container) return
-  
-  const { scrollTop, scrollHeight, clientHeight } = container
-  if (scrollHeight <= clientHeight) {
-    isUserScrolledUp.value = false
-    lastScrollTop = 0
-    lastScrollHeight = scrollHeight
-    return
-  }
-  if (isNearBottom(customThreshold)) {
-    isUserScrolledUp.value = false
-  } else {
-    const isScrollingUp = scrollTop < lastScrollTop
-    const isScrollingDown = detectScrollDown ? scrollTop > lastScrollTop : false
-    const isContentUnchanged = scrollHeight === lastScrollHeight
-    if ((isScrollingUp || isScrollingDown) && isContentUnchanged) {
-      isUserScrolledUp.value = true
-    }
-  }
-  lastScrollTop = scrollTop
-  lastScrollHeight = scrollHeight
-}
-
-</script>
-
-<style>
-  .mask-y {
-    mask-image: linear-gradient(
-      to bottom,
-      transparent,
-      black 1.25rem,
-      black calc(100% - 1.25rem),
-      transparent
-    );
-  }
-
-  .scrollbar__thumb {
-    border-radius: 0.25rem;
-  }
-</style>

package/custom/SessionsHistory.vue

@@ -1,88 +0,0 @@
-<template>
-  <div class="absolute top-0 left-0 transition-transform 
-    duration-200 ease-in-out border-y border-r dark:border-gray-600 z-20 
-    bg-lightNavbar dark:bg-darkNavbar w-96 h-full flex flex-col items-center
-    overflow-y-auto overflow-x-hidden
-    "
-  >
-    <h3 :class="h3Style">{{ $t('Chat history') }}</h3>
-    <div class="w-full flex items-center justify-center">
-    </div>
-    <div class="w-full border-b border-gray-200 dark:border-gray-700"/>
-    <div v-for="group in groupedSessions" :key="group.dayKey" class="w-full py-2">
-      <div class="px-4 pb-2 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">
-        {{ group.label }}
-      </div>
-
-      <button
-        v-for="session in group.sessions"
-        :key="session.sessionId"
-        class=" flex items-center justify-between w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-gray-800 dark:text-gray-200"
-        :class="{
-          'bg-lightPrimary/20 hover:bg-lightPrimary/20 dark:bg-darkPrimary/20 dark:hover:bg-darkPrimary/20': agentStore.activeSessionId === session.sessionId, 
-         }"
-        @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false);"
-      >
-        <p class="truncate">{{ session.title || session.sessionId }}</p>
-        <div @click.stop="agentStore.deleteSession(session.sessionId)" class="w-7 h-7 p-1 hover:scale-110 hover:bg-gray-200 dark:hover:bg-gray-500 flex items-center justify-center rounded">
-          <IconPlusOutline class="rotate-45 w-6 h-6"/>
-        </div>
-      </button>
-    </div>
-    <p
-      v-if="!groupedSessions || groupedSessions.length === 0"
-      class="w-full h-full flex items-center justify-center text-gray-800 dark:text-gray-200"
-    >
-      {{ $t('There are no previous chat sessions') }}
-    </p>
-  </div>
-</template>
-
-
-<script setup lang="ts">
-import { Button, Spinner } from '@/afcl'
-import { computed } from 'vue';
-import { IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
-import type { ISessionsListItem } from './types';
-import { useAgentStore } from './composables/useAgentStore';
-
-const agentStore = useAgentStore();
-
-const h3Style = "text-gray-800 dark:text-gray-200 font-medium text-xl tracking-widest my-2"
-const dayLabelFormatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' });
-const dayLabelWithYearFormatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
-
-const groupedSessions = computed(() => {
-  const groups = new Map<string, { dayKey: string; label: string; sessions: ISessionsListItem[] }>();
-
-  for (const session of agentStore.sessionList) {
-    const date = new Date(session.timestamp);
-    const dayKey = getLocalDayKey(date);
-    const label = date.getFullYear() === new Date().getFullYear()
-      ? dayLabelFormatter.format(date)
-      : dayLabelWithYearFormatter.format(date);
-
-    if (!groups.has(dayKey)) {
-      groups.set(dayKey, {
-        dayKey,
-        label,
-        sessions: [],
-      });
-    }
-
-    groups.get(dayKey)!.sessions.push(session);
-  }
-
-  return Array.from(groups.values());
-});
-
-
-function getLocalDayKey(date: Date) {
-  const year = date.getFullYear();
-  const month = `${date.getMonth() + 1}`.padStart(2, '0');
-  const day = `${date.getDate()}`.padStart(2, '0');
-
-  return `${year}-${month}-${day}`;
-}
-
-</script>

package/custom/chat.ts

@@ -1,82 +0,0 @@
-/**
- * This file is used to fix circular module initialization between ai and @ai-sdk/vue
- * These files are depending on each other, but vite put them in different chunks, so they are not initialized at the same time, which causes the circular module initialization issue
- * So I get rid of the @ai-sdk/vue only fixes are:
- * 1) Change vite config to put these files in the same chunk
- * 2) Get rid of the circular module initialization by moving the Chat class to this file
- * 
- * Maybe there is a better way to fix this issue
- * 
- * If you were updating "ai" package and plugin broke, probably you need to update this file as well
- * Or resolve the circular module initialization issue in a better way
- */
-
-import type {
-  ChatInit as BaseChatInit,
-  ChatState,
-  ChatStatus,
-  UIMessage,
-} from 'ai';
-import { AbstractChat } from 'ai'
-import { Ref, ref } from 'vue';
-
-class VueChatState<
-  UI_MESSAGE extends UIMessage,
-> implements ChatState<UI_MESSAGE> {
-  private messagesRef: Ref<UI_MESSAGE[]>;
-  private statusRef = ref<ChatStatus>('ready');
-  private errorRef = ref<Error | undefined>(undefined);
-
-  constructor(messages?: UI_MESSAGE[]) {
-    this.messagesRef = ref(messages ?? []) as Ref<UI_MESSAGE[]>;
-  }
-
-  get messages(): UI_MESSAGE[] {
-    return this.messagesRef.value;
-  }
-
-  set messages(messages: UI_MESSAGE[]) {
-    this.messagesRef.value = messages;
-  }
-
-  get status(): ChatStatus {
-    return this.statusRef.value;
-  }
-
-  set status(status: ChatStatus) {
-    this.statusRef.value = status;
-  }
-
-  get error(): Error | undefined {
-    return this.errorRef.value;
-  }
-
-  set error(error: Error | undefined) {
-    this.errorRef.value = error;
-  }
-
-  pushMessage = (message: UI_MESSAGE) => {
-    this.messagesRef.value = [...this.messagesRef.value, message];
-  };
-
-  popMessage = () => {
-    this.messagesRef.value = this.messagesRef.value.slice(0, -1);
-  };
-
-  replaceMessage = (index: number, message: UI_MESSAGE) => {
-    this.messagesRef.value[index] = { ...message };
-  };
-
-  snapshot = <T>(value: T): T => value;
-}
-
-export class Chat<
-  UI_MESSAGE extends UIMessage,
-> extends AbstractChat<UI_MESSAGE> {
-  constructor({ messages, ...init }: BaseChatInit<UI_MESSAGE>) {
-    super({
-      ...init,
-      state: new VueChatState(messages),
-    });
-  }
-}