@adminforth/agent 2.0.10 → 2.2.0

package/custom/conversation_area/ConversationArea.vue

@@ -1,301 +0,0 @@
-<template>
-  <SessionsHistory 
-    :class="agentStore.isSessionHistoryOpen ? 'translate-x-0' : '-translate-x-full'"
-  />
-  <div 
-    v-if="agentStore.isSessionHistoryOpen"
-    @click="agentStore.setSessionHistoryOpen(false)"
-    class="absolute bg-black/10 backdrop-blur-md z-10 h-full w-full"
-  >
-  </div>
-  <div ref="chatContainerRef" class="relative flex-1 min-h-0 overflow-hidden" @click="recalculateScroll()">
-    <CustomAutoScrollContainer
-      v-if="showScrollContainer"
-      :enabled="!showScrollToBottomButton" 
-      class="relative h-full flex flex-col overflow-y-auto translate-x-[-50%] left-1/2"
-      ref="scrollContainer"
-      :threshold="THRESHOLD_TO_SHOW_BUTTON"
-      behavior="smooth"
-      :wrapperStyle = "{ 
-        height: '100%',
-        maxHeight: '100%',
-        maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'rem' : '100%',
-        width: '100%',
-        marginLeft: 'auto',
-        marginRight: 'auto',
-      }"
-      :style="{ 
-        maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'rem' : '100%',
-        transition: `
-          max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out,
-          transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out
-        `
-      }"
-    > 
-
-      <div 
-        v-for="(message, index) in props.messages" :key="index"
-        class="flex flex-col w-full mt-2 pb-2"
-        :class="message.role === 'user' ? 'self-end' : 'self-start'"
-        ref="messagesRefs"
-      >
-        <MessageRenderer :message="message" :isLastMessageInChat="index === props.messages.length - 1"/>
-      </div>
-      <div 
-        v-if="props.messages.length === 0"
-        class="flex-1 flex flex-col items-center justify-center text-gray-400 tracking-widest text-xl font-medium h-max"
-        :style="{
-          height: chatContainerRef ? chatContainerRef.clientHeight + 'px' : '100%',
-        }"
-      >
-        <p>{{ $t('Start the conversation') }}</p>
-        <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
-      </div>
-      <div v-if="showBottomSpacer" class="w-full" :style="{ height: spacerHeight + 'px' }"></div>
-    </CustomAutoScrollContainer>
-    <button @click="scrollContainer.scrollToBottom();">
-      <IconArrowDownOutline 
-        class="absolute z-10 bottom-8 left-1/2 -translate-x-1/2 bg-lightPrimary/20 dark:bg-darkPrimary/10
-          border border-lightPrimary dark:border-darkPrimary text-lightPrimary dark:text-darkPrimary p-2 w-10 h-10
-          rounded-full transition-opacity duration-100 ease-in backdrop-blur-sm" 
-        :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
-        :disabled="!showScrollToBottomButton"
-      />
-    </button>
-  </div>
-</template>
-
-
-<script setup lang="ts">
-import type { IMessage } from '../types';
-import { useTemplateRef, ref, onMounted, onUnmounted, watch, nextTick, defineAsyncComponent } from 'vue';
-import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
-import SessionsHistory from '../SessionsHistory.vue';
-import { useAgentStore } from '../composables/useAgentStore';
-import { useAgentTransitions } from '../composables/useAgentTransitions';
-import MessageRenderer from './MessageRenderer.vue';
-
-const CustomAutoScrollContainer = defineAsyncComponent(() => import('../CustomAutoScrollContainer.vue'));
-
-const props = defineProps<{
-  messages: IMessage[]
-}>();
-
-defineExpose({
-  handleSendMessage
-});
-
-const scrollContainer = useTemplateRef('scrollContainer');
-const showScrollToBottomButton = ref(false);
-const innerScrollContainerRef = ref<HTMLElement | null>(null);
-const agentStore = useAgentStore();
-const agentTransitions = useAgentTransitions();
-const showScrollContainer = ref(true);
-const chatContainerRef = ref<HTMLElement | null>(null);
-const messagesRefs = ref<Array<HTMLElement | null>>([]);
-/*
-* Whenever user sends a message, it adds a bottom spacer, that takes the remaining height
-* without last user and last agent message. 
-* 
-* On send message, happens the following logic: 
-* 1) showBottomSpacer is set to true
-* 2) updateSpacerHeight is called, which calculates the height for spacer based on scroll container height and messages height
-* 3) Spacer moves text up  
-*/
-const showBottomSpacer = ref(false);
-const spacerHeight = ref(0);
-const MASK_HEIGHT = 20;
-const EMPTY_MESSAGE_HEIGHT = 18;
-const THRESHOLD_TO_SHOW_BUTTON = 10;
-let messageResizeObserver: ResizeObserver | null = null;
-let observedLastUserMessageElement: HTMLElement | null = null;
-let observedLastAgentMessageElement: HTMLElement | null = null;
-let updateSpacerFrameId: number | null = null;
-let pendingSpacerUpdate: Promise<void> | null = null;
-let spacerUpdateQueued = false;
-
-onMounted(async () => {
-  messageResizeObserver = new ResizeObserver(() => {
-    scheduleSpacerHeightUpdate();
-  });
-
-  await import('@incremark/theme/styles.css')
-  await agentStore.fetchPlaceholderMessages()
-  await refreshSpacerTracking();
-});
-
-onUnmounted(() => {
-  if (innerScrollContainerRef.value) {
-    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
-  }
-
-  stopObservingLastMessages();
-  messageResizeObserver?.disconnect();
-  if (updateSpacerFrameId !== null) {
-    cancelAnimationFrame(updateSpacerFrameId);
-    updateSpacerFrameId = null;
-  }
-  agentStore.stopPlaceholderAnimation();
-});
-
-watch(() => agentStore.activeSessionId, () => {
-  resetSpacer();
-});
-
-watch(() => agentStore.activeSessionId, async () => {
-  showScrollContainer.value = false;
-  await nextTick();
-  showScrollContainer.value = true;
-  await refreshSpacerTracking();
-  recalculateScroll();
-});
-
-watch(() => props.messages.length, async () => {
-  await refreshSpacerTracking();
-});
-
-watch(scrollContainer, async () => {
-  if (innerScrollContainerRef.value) {
-    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
-  }
-
-  if (scrollContainer.value) {
-    innerScrollContainerRef.value = scrollContainer.value.container.scrollEl;
-
-    innerScrollContainerRef.value.addEventListener('scroll', recalculateScroll);
-    await refreshSpacerTracking();
-  }
-})
-
-function resetSpacer() {
-  showBottomSpacer.value = false;
-  spacerHeight.value = 0;
-}
-
-function getLastMessageElement(role: 'user' | 'assistant') {
-  const lastMessageIndex = props.messages.findLastIndex((message: IMessage) => message.role === role);
-  return messagesRefs.value[lastMessageIndex] ?? null;
-}
-
-function getHeightOfLastUserMessage() {
-  return getLastMessageElement('user')?.clientHeight ?? 0;
-}
-
-function getHeightOfLastAgentMessage() {
-  return getLastMessageElement('assistant')?.clientHeight ?? 0;
-}
-
-function getScrollClientHeight() {
-  return scrollContainer.value?.container.scrollEl.clientHeight ?? scrollContainer.value?.scrollParams.clientHeight ?? 0;
-}
-
-async function updateSpacerHeight() {
-  if (!showBottomSpacer.value) {
-    return;
-  }
-
-  const clientHeight = getScrollClientHeight();
-
-  if (!clientHeight) {
-    return;
-  }
-
-  const lastUserMessageHeight = getHeightOfLastUserMessage();
-  const lastAgentMessageHeight = getHeightOfLastAgentMessage();
-
-  spacerHeight.value = Math.max(0, clientHeight - (lastUserMessageHeight + MASK_HEIGHT + lastAgentMessageHeight));
-}
-
-function scheduleSpacerHeightUpdate() {
-  spacerUpdateQueued = true;
-
-  if (updateSpacerFrameId !== null) {
-    return;
-  }
-
-  updateSpacerFrameId = requestAnimationFrame(() => {
-    updateSpacerFrameId = null;
-
-    if (pendingSpacerUpdate) {
-      return;
-    }
-
-    spacerUpdateQueued = false;
-    pendingSpacerUpdate = updateSpacerHeight().finally(() => {
-      pendingSpacerUpdate = null;
-
-      // Auto-scroll to bottom if response generation is in progress
-      if (agentStore.isResponseInProgress) {
-        nextTick(() => {
-          scrollContainer.value?.scrollToBottom();
-        });
-      }
-
-      if (spacerUpdateQueued) {
-        scheduleSpacerHeightUpdate();
-      }
-    });
-  });
-}
-
-function stopObservingLastMessages() {
-  if (!messageResizeObserver) {
-    return;
-  }
-
-  if (observedLastUserMessageElement) {
-    messageResizeObserver.unobserve(observedLastUserMessageElement);
-    observedLastUserMessageElement = null;
-  }
-
-  if (observedLastAgentMessageElement) {
-    messageResizeObserver.unobserve(observedLastAgentMessageElement);
-    observedLastAgentMessageElement = null;
-  }
-}
-
-function observeLastMessages() {
-  if (!messageResizeObserver) {
-    return;
-  }
-
-  stopObservingLastMessages();
-
-  observedLastUserMessageElement = getLastMessageElement('user');
-  observedLastAgentMessageElement = getLastMessageElement('assistant');
-
-  if (observedLastUserMessageElement) {
-    messageResizeObserver.observe(observedLastUserMessageElement);
-  }
-
-  if (observedLastAgentMessageElement) {
-    messageResizeObserver.observe(observedLastAgentMessageElement);
-  }
-}
-
-async function refreshSpacerTracking() {
-  await nextTick();
-  observeLastMessages();
-  await updateSpacerHeight();
-}
-
-async function handleSendMessage() {
-  const clientHeight = getScrollClientHeight();
-
-  if (clientHeight) {
-    showBottomSpacer.value = true;
-    await updateSpacerHeight();
-    await nextTick();
-    scrollContainer.value?.scrollToBottom();
-  }
-}
-
-function recalculateScroll() {
-  if (scrollContainer.value) {
-    scrollContainer.value.handleScroll(false,spacerHeight.value + THRESHOLD_TO_SHOW_BUTTON);
-    const isScrolledUp = scrollContainer.value.isUserScrolledUp();
-    showScrollToBottomButton.value = !!isScrolledUp;
-  }
-}
-
-</script>

package/custom/conversation_area/MessageRenderer.vue

@@ -1,49 +0,0 @@
-<template>
-  <ProcessingTimeline 
-    :message="message"
-    :isLastMessageInChat="isLastMessageInChat"
-  />
-  <template 
-    v-for="(part, index) in getMessageParts(message)"
-    :key="part.type"
-  > 
-    <TextRenderer 
-      v-if="part.type === 'text' && !checkIfMessageSystemMessage(part.text ?? '')" 
-      :message="part.text" 
-      :role="props.message.role" 
-      :state="part.state ?? (props.message.role === 'user' ? 'done' : undefined)"
-    />
-    <ToolApprovalRenderer
-      v-else-if="part.type === 'data-tool-approval'"
-      :data="part.data ?? {}"
-    />
-    <SystemMessageRenderer 
-      v-else-if="part.type === 'text'"
-      :message="part.text" 
-    />
-  </template>
-
-</template>
-
-
-
-
-<script setup lang="ts">
-  import TextRenderer from './TextRenderer.vue';
-  import type { IMessage } from '../types';
-  import { getMessageParts } from '../utils';
-  import ProcessingTimeline from './ProcessingTimeline.vue';
-  import SystemMessageRenderer from './SystemMessageRenderer.vue';
-  import ToolApprovalRenderer from './ToolApprovalRenderer.vue';
-  import { RESERVED_SYSTEM_MESSAGE_CONTENT } from '../composables/agentStore/constants';
-
-  const props = defineProps<{ 
-    message: IMessage 
-    isLastMessageInChat: boolean
-  }>();
-
-  function checkIfMessageSystemMessage(message: IMessage): boolean {
-    const isReserved = Object.values(RESERVED_SYSTEM_MESSAGE_CONTENT).includes(message as RESERVED_SYSTEM_MESSAGE_CONTENT);
-    return isReserved;
-  }
-</script>

package/custom/conversation_area/ProcessingTimeline.vue

@@ -1,286 +0,0 @@
-<template>
-  <template v-if="ToolOrReasoningParts.length > 0 || inProgress">
-    <div 
-      class="shine-text-container ml-2 px-4 flex items-center gap-1 select-none hover:opacity-80 tracking-wide font-medium text-sm text-listTableHeadingText dark:text-darkListTableHeadingText"
-      :class="[ToolOrReasoningParts.length > 0 ? 'cursor-pointer' : '']"
-      @click="isExpanded = !isExpanded"
-    >
-      <p 
-        :class="[
-          inProgress ? `
-            shine-text text-listTableHeadingText dark:text-darkListTableHeadingText 
-            bg-[linear-gradient(-65deg,currentColor,_rgb(120,120,120)_50%,currentColor)] 
-            dark:bg-[linear-gradient(-65deg,currentColor,_rgb(250,250,250,0.8)_70%,currentColor)]
-            ` 
-          : '']"
-      >
-        {{ inProgress ? $t('Thinking') : $t('Thoughts') }} 
-      </p>
-      
-      <span v-if="thinkingDuration > 0">({{ (thinkingDuration/1000).toFixed(2) }} s)</span>
-      <IconAngleDownOutline 
-        v-if="ToolOrReasoningParts.length > 0"
-        :class="isExpanded ? 'rotate-180' : 'rotate-0'"
-        class="transition-transform duration-200"
-      />
-    </div>
-    <transition name="expand" class="sm:max-h-96 max-h-48 overflow-y-auto mb-4 pt-1">
-      <CustomAutoScrollContainer
-        ref="scrollContainerRef"
-        :enabled="isResponseInProgress"
-        behavior="smooth"
-        v-if="ToolOrReasoningParts.length > 0" 
-        v-show="isExpanded"
-        :threshold="5"
-        :wrapperStyle="{
-          marginRight: '1rem',
-        }"
-        :scrollBarAutoHide="false"
-      >
-        <ol class="ml-8 my-2 relative border-l border-l-2 border-black border-default border-listTableHeadingText dark:border-darkListTableHeadingText">
-          <template v-for="(part, index) in ToolOrReasoningParts" :key="index">
-            <ReasoningRenderer v-if="part.type === 'reasoning'" :state="part.state" :text="part.text" />
-            <ToolsGroup v-else-if="part.type==='data-tool-call'" :toolGroup="groupToolCallParts(message, part)" :isExpanded="isExpanded" />
-            <li v-else-if="part.type === 'data-rendering'" class="mb-6 mx-2 mt-2 px-2 z-50 overflow-hidden">
-              <span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText justify-center w-5 h-5 rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar">
-                <div class="w-2 h-2 rounded-full bg-current animate-pulse"></div>
-              </span>
-              <h3 class="flex items-center mb-1 text-sm ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText">
-                <span class="font-semibold">{{ part.data?.label ?? 'Rendering...' }}</span>
-                <ThreeDotsAnimation />
-              </h3>
-            </li>
-          </template>
-        </ol>
-      </CustomAutoScrollContainer>
-    </transition>
-  </template>
-</template>
-
-
-
-<script setup lang="ts">
-  import type { IFormattedToolCallPart, IMessage, IPart, IToolGroup } from '../types';
-  import { ref, computed, watch, onUnmounted, onMounted, defineAsyncComponent } from 'vue';
-  import ReasoningRenderer from './ReasoningRenderer.vue';
-  import { IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
-  import ThreeDotsAnimation from './ThreeDotsAnimation.vue';
-  import { useAgentStore } from '../composables/useAgentStore';
-  import { getMessageParts } from '../utils';
-  import ToolsGroup from './ToolsGroup.vue';
-
-  const CustomAutoScrollContainer = defineAsyncComponent(() => import('../CustomAutoScrollContainer.vue'));
-
-  const props = defineProps<{
-    message: IMessage
-    isLastMessageInChat: boolean
-  }>()
-
-  const agentStore = useAgentStore();
-  const thinkingStartTime = ref<number | null>(null);
-  const thinkingDuration = ref(0);
-  const scrollContainerRef = ref<InstanceType<typeof CustomAutoScrollContainer> | null>(null);
-  const innerScrollContainerRef = ref<HTMLElement | null>(null);
-  const isExpanded = ref(true);
-  let isUserScrolled = false;
-  const ToolOrReasoningParts = computed(() => {
-    return props.message.parts.filter((part: IPart) => {
-      return part.type === 'data-tool-call'
-        || part.type === 'reasoning'
-        || isActiveRenderingPart(part);
-    });
-  });
-  const isResponseInProgress = computed(() =>{
-    return props.isLastMessageInChat && agentStore.isResponseInProgress; 
-  });
-  
-  const showFakeThinkingMessage = computed(() => {
-    if (props.message.parts.length === 0 && props.isLastMessageInChat) return true;
-    return false;
-  })
-
-  const inProgress = computed(() => {
-    return isResponseInProgress.value || showFakeThinkingMessage.value;
-  })
-
-  onMounted(() => {
-    thinkingStartTime.value = Date.now();
-    if (isResponseInProgress.value) {
-      isExpanded.value = true;
-    } else {
-      isExpanded.value = false;
-    }
-  })
-
-  onUnmounted(() => {
-    scrollContainerRef.value?.container.scrollEl?.removeEventListener('scroll', handleScroll);
-    scrollContainerRef.value?.container.scrollEl?.removeEventListener('wheel', toggleIsUserScrolled);
-    scrollContainerRef.value?.container.scrollEl?.removeEventListener('touchmove', toggleIsUserScrolled);
-  })
-
-  watch(scrollContainerRef, async () => {
-    if (innerScrollContainerRef.value) {
-      innerScrollContainerRef.value.removeEventListener('scroll', handleScroll);
-      innerScrollContainerRef.value.removeEventListener('wheel', toggleIsUserScrolled);
-      innerScrollContainerRef.value.removeEventListener('touchmove', toggleIsUserScrolled);
-    }
-
-    if (scrollContainerRef.value) {
-      innerScrollContainerRef.value = scrollContainerRef.value.container.scrollEl;
-      innerScrollContainerRef.value.addEventListener('scroll', handleScroll);
-      innerScrollContainerRef.value.addEventListener('wheel', toggleIsUserScrolled);
-      innerScrollContainerRef.value.addEventListener('touchmove', toggleIsUserScrolled);
-
-    }
-  })
-
-  watch(isResponseInProgress, (newValue: boolean) => {
-    if (!newValue) {
-      isExpanded.value = false;
-      thinkingDuration.value = Date.now() - (thinkingStartTime.value ?? Date.now());
-    }
-  });
-
-  const formatToolCallPart = (part: IPart, currentMessage: IMessage): IFormattedToolCallPart | null => {
-    if (part.type !== 'data-tool-call' || part.data?.phase !== 'start') {
-      return null;
-    }
-
-    const finishedPart = currentMessage.parts.find(candidate => {
-      return candidate.type === 'data-tool-call'
-        && candidate.data?.toolCallId === part.data?.toolCallId
-        && candidate.data?.phase === 'end';
-    });
-
-    return {
-      type: 'data-tool-call',
-      toolInfo: {
-        toolCallId: part.data.toolCallId,
-        toolName: part.data.toolName,
-        phase: finishedPart ? 'end' : 'start',
-        durationMs: finishedPart?.data?.durationMs,
-        input: part.data.input,
-        output: finishedPart?.data?.output,
-        toolInfo: part.data.toolInfo,
-        error: finishedPart?.data?.error,
-      }
-    };
-  };
-
-  const getVisibleTimelineParts = (message: IMessage) => {
-    return getMessageParts(message).filter(part => {
-      return part.type === 'reasoning' || (part.type === 'data-tool-call' && part.data?.phase === 'start');
-    });
-  };
-
-  function isActiveRenderingPart(part: IPart) {
-    return part.type === 'data-rendering'
-      && part.data?.phase === 'start'
-      && !props.message.parts.some((candidate: IPart) => {
-        return candidate.type === 'data-rendering' && candidate.data?.phase === 'end';
-      });
-  }
-
-  const groupToolCallParts = (message: IMessage, currentPart: IPart): IToolGroup[] => {
-    if (currentPart.type !== 'data-tool-call') {
-      return [];
-    }
-
-    const visibleParts = getVisibleTimelineParts(message);
-    const currentPartIndex = visibleParts.findIndex(part => part === currentPart);
-
-    if (currentPartIndex === -1) {
-      return [];
-    }
-
-    if (currentPartIndex > 0 && visibleParts[currentPartIndex - 1]?.type === 'data-tool-call') {
-      return [];
-    }
-
-    const groupedParts: IToolGroup[] = [];
-
-    for (let index = currentPartIndex; index < visibleParts.length; index += 1) {
-      const part = visibleParts[index];
-
-      if (part.type === 'reasoning') {
-        break;
-      }
-
-      const formattedPart = formatToolCallPart(part, message);
-
-      if (!formattedPart) {
-        continue;
-      }
-
-      const lastGroup = groupedParts[groupedParts.length - 1];
-
-      if (lastGroup?.title === formattedPart.toolInfo.toolName) {
-        lastGroup.groupedTools.push(formattedPart);
-        continue;
-      }
-
-      groupedParts.push({
-        title: formattedPart.toolInfo.toolName,
-        groupedTools: [formattedPart],
-      });
-    }
-
-    return groupedParts;
-  };
-
-  function handleScroll() {
-    if (isUserScrolled) { 
-      scrollContainerRef.value?.handleScroll();
-    }
-  }
-
-  function toggleIsUserScrolled() {
-    isUserScrolled = true;
-    setTimeout(() => {
-      isUserScrolled = false;
-    }, 100);
-  }
-</script>
-
-<style scoped>
-  .expand-enter-active,
-  .expand-leave-active {
-    transition: all 0.3s ease;
-  }
-
-  .expand-enter-from,
-  .expand-leave-to {
-    opacity: 0;
-    max-height: 0;
-  }
-
-  .expand-enter-to,
-  .expand-leave-from {
-    opacity: 1;
-    max-height: 384px;
-
-    @media (max-width: 640px) {
-      max-height: 192px;
-    }
-  }
-
-
-.shine-text {
-
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-position: -12rem;
-}
-
-.shine-text {
-  animation: shineText 6s infinite linear;
-}
-
-@keyframes shineText {
-  to {
-    background-position: -100%;
-  }
-}
-
-</style>