@adminforth/agent 2.0.10 → 2.2.0

package/custom/conversation_area/ReasoningRenderer.vue

@@ -1,79 +0,0 @@
-<template>
-  <li 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 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
-      <div class="w-5 h-5 rounded-full flex items-center justify-center">
-        <IconBrainOutline class="w-4 h-4" />
-      </div>
-    </span>
-    <h3 
-      class=" flex items-center mb-1 text-sm ml-3 gap-1 cursor-pointer select-none hover:opacity-80 text-listTableHeadingText dark:text-darkListTableHeadingText"      
-      @click="isExpanded = !isExpanded"
-    >
-      <span class="font-semibold">{{ reasoningTitle }}</span>
-      <ThreeDotsAnimation v-if="isStreaming"/>
-      <IconAngleDownOutline           
-        :class="isExpanded ? 'rotate-180' : 'rotate-0'"
-        class="transition-transform duration-200"
-      />
-    </h3>
-    <transition name="expand">
-      <IncremarkContent
-        v-if="isExpanded" 
-        v-show="isExpanded"
-        class="pl-4 text-sm"
-        :content="reasoningText"
-      />
-    </transition>    
-  </li>
-</template>
-
-
-
-<script setup lang="ts">
-import { IconBrainOutline, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
-import type { IPart } from '../types';
-import { ref, computed, watch, defineAsyncComponent } from 'vue';
-import ThreeDotsAnimation from './ThreeDotsAnimation.vue';
-import { extractTitleAndTextFromReasoning } from '../utils';
-
-const props = defineProps<{
-  state?: IPart['state']
-  text?: string
-}>();
-
-const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
-
-const isExpanded = ref(true);
-const isStreaming = computed(() => props.state === 'streaming');
-const parsedReasoning = computed(() => extractTitleAndTextFromReasoning(props.text ?? ''));
-const reasoningTitle = computed(() => parsedReasoning.value.title ?? '');
-const reasoningText = computed(() => parsedReasoning.value.body);
-
-watch(() => props.state, (newValue: IPart['state']) => {
-  if ( newValue !== 'streaming') {
-    isExpanded.value = false;
-  } 
-});
-
-</script>
-
-
-<style scoped>
-.expand-enter-active,
-.expand-leave-active {
-  transition: all 300ms ease;
-}
-
-.expand-enter-from,
-.expand-leave-to {
-  opacity: 0;
-  max-height: 0;
-}
-
-.expand-enter-to,
-.expand-leave-from {
-  opacity: 1;
-  max-height: 256px;
-}
-
-</style>

package/custom/conversation_area/SystemMessageRenderer.vue

@@ -1,28 +0,0 @@
-<template>
-  <p :class="`${TEXT_CLASSES}`" v-if="message === RESERVED_SYSTEM_MESSAGE_CONTENT.START_AUDIO_CHAT">
-    <IconPhoneSolid class="inline-block w-4 h-4 mr-1" />
-    {{$t('Audio chat started')}}
-  </p>
-  <p :class="`${TEXT_CLASSES}`" v-else-if="message === RESERVED_SYSTEM_MESSAGE_CONTENT.END_AUDIO_CHAT">
-    <IconPhoneHangupSolid class="inline-block w-4 h-4 mr-1" />
-    {{$t('Audio chat ended')}}
-  </p>
-  <p :class="`${TEXT_CLASSES}`" v-else-if="message === RESERVED_SYSTEM_MESSAGE_CONTENT.AGENT_RESPONSE_ABORTED">
-    {{$t('Agent response aborted')}}
-  </p>
-
-</template>
-
-
-
-<script setup lang="ts">
-import { RESERVED_SYSTEM_MESSAGE_CONTENT } from '../composables/agentStore/constants';
-import { IconPhoneSolid, IconPhoneHangupSolid } from '@iconify-prerendered/vue-flowbite';
-
-const TEXT_CLASSES = 'text-center italic  text-lightListTableHeadingText dark:text-darkListTableHeadingText flex items-center justify-center';
-
-const props = defineProps<{ 
-  message: string
-}>();
-
-</script>

package/custom/conversation_area/TextRenderer.vue

@@ -1,182 +0,0 @@
-<template>
-  <div
-    class="flex rounded-xl border px-4 border-gray-200 dark:border-gray-700 min-w-0"
-    @click="handleMarkdownLinkClick"
-    :class="[
-      hasVegaLite ? 'w-full my-2' : 'm-2',
-      props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end max-w-[80%] mr-4' 
-        : 'border-none self-start max-w-full'
-    ]"
-  >
-    <IncremarkContent
-      class="text-wrap break-words w-full max-w-full"
-      v-if="content"
-      :content="content" 
-      :is-finished="isFinished" 
-      :components="incremarkComponents"
-      :incremark-options="incremarkOptions"
-    />
-    <!-- <p v-else class="text-red-500 py-2">
-      {{ $t('No content to render') }}
-    </p> -->
-  </div>
-</template>
-
-<script setup lang="ts">
-
-  import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
-  import { useRouter } from 'vue-router';
-  import { useAgentStore } from '../composables/useAgentStore';
-  import { useCoreStore } from '@/stores/core';
-  import type { IMessage } from '../types';
-
-  const props = defineProps<{
-    message: string | undefined,
-    state: string | undefined,
-    role: IMessage['role']
-  }>();
-
-  const emit = defineEmits(['toggle-thoughts']);
-
-  const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
-  const ShikiCodeBlock = defineAsyncComponent(() => import('../incremark_code_renderers/IncremarkShikiCodeBlock.vue'))
-
-  const agentStore = useAgentStore();
-  const coreStore = useCoreStore();
-  const router = useRouter();
-
-  const isThoughtsExpanded = ref(true);
-
-  const content = computed(() => props.message)
-  const isFinished = computed(() => props.state === 'done')
-  const hasVegaLite = computed(() => props.message?.includes('```vega-lite'))
-  const isStateStreaming = computed(() => props.state === 'streaming')
-
-  const incremarkComponents = {
-    code: ShikiCodeBlock,
-  };
-  const incremarkOptions = {
-		gfm: true,
-		math: { tex: true },
-		containers: true,
-		htmlTree: true,
-	};
-
-  onMounted(async () => {
-    void import('katex/dist/katex.min.css')
-  })
-
-  watch(isStateStreaming, (newValue: boolean) => {
-    if (!newValue) {
-      isThoughtsExpanded.value = false;
-    } 
-  })
-
-  watch(isThoughtsExpanded, (newValue: boolean) => {
-    emit('toggle-thoughts', newValue);
-  })
-
-  function handleMarkdownLinkClick(event: MouseEvent) {
-    if (event.defaultPrevented || event.button !== 0) {
-      return;
-    }
-    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
-      return;
-    }
-    const target = event.target;
-    if (!(target instanceof Element)) {
-      return;
-    }
-    const anchor = target.closest('a');
-    if (!(anchor instanceof HTMLAnchorElement)) {
-      return;
-    }
-    const href = anchor.getAttribute('href');
-    if (!href || href.startsWith('mailto:') || href.startsWith('tel:')) {
-      return;
-    }
-    event.preventDefault();
-    const internalRoute = resolveInternalRoute(href);
-    if (internalRoute !== null) {
-      if (agentStore.isFullScreen && !coreStore.isMobile) {
-        agentStore.setFullScreen(false);
-      } else if (coreStore.isMobile) {
-        agentStore.setIsChatOpen(false);
-      }
-      void router.push(internalRoute);
-      return;
-    }
-
-    window.location.assign(new URL(href, window.location.href).toString());
-  }
-
-  function resolveInternalRoute(href: string): string | null {
-    if (href.startsWith('#')) {
-      return `${window.location.pathname}${window.location.search}${href}`;
-    }
-
-    const isAbsoluteWithScheme = /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(href);
-    const baseUrl = isAbsoluteWithScheme
-      ? undefined
-      : `${window.location.origin}/`;
-    const resolvedUrl = new URL(href, baseUrl ?? window.location.href);
-    if (resolvedUrl.origin !== window.location.origin) {
-      return null;
-    }
-
-    return `${resolvedUrl.pathname}${resolvedUrl.search}${resolvedUrl.hash}`;
-  }
-
-</script>
-
-<style lang="scss">
-.incremark a.incremark-link,
-.incremark a.incremark-link:visited {
-  display: inline-block;
-  text-decoration: underline;
-  text-underline-offset: 4px;
-  text-decoration-style:dotted;
-  color: rgb(0, 0, 0);
-  transition: color 0.2s ease;
-}
-
-.incremark a.incremark-link:hover {
-  color: rgb(74, 74, 255);
-  text-decoration: underline;
-  text-underline-offset: 4px;
-  text-decoration-style:dotted;
-}
-
-html[data-theme="dark"] .incremark a.incremark-link,
-html[data-theme="dark"] .incremark a.incremark-link:visited {
-  color: rgb(220, 220, 220);
-}
-
-html[data-theme="dark"] .incremark a.incremark-link:hover {
-  color: rgb(147, 147, 255);
-}
-
-a.incremark-link::after {
-  content: "";
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  vertical-align: middle;
-  rotate: -45deg;
-  background-color: currentColor;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 12H2m12 0l-4 4m4-4l-4-4'/%3E%3C/svg%3E") no-repeat center;
-  mask-size: contain;
-}
-
-.incremark-table a.incremark-link {
-  word-break: break-word;
-}
-
-.incremark-list {
-  list-style: disc;
-}
-
-.incremark-paragraph {
-  margin: 8px 0;
-}
-</style>

package/custom/conversation_area/ThreeDotsAnimation.vue

@@ -1,35 +0,0 @@
-<template>
-  <span class="bounce-dot1 rounded-full w-2 h-2 bg-lightPrimary dark:bg-darkPrimary"></span>
-  <span class="bounce-dot2 rounded-full w-2 h-2 bg-lightPrimary dark:bg-darkPrimary"></span>
-  <span class="bounce-dot3 rounded-full w-2 h-2 bg-lightPrimary dark:bg-darkPrimary"></span>
-</template>
-
-<style scoped>
-  .bounce-dot1 {
-    animation: bounce 1.5s infinite;
-    animation-delay: 0s;
-  }
-
-  .bounce-dot2 {
-    animation: bounce 1.5s infinite;
-    animation-delay: 0.1s;
-  }
-
-  .bounce-dot3 {
-    animation: bounce 1.5s infinite;
-    animation-delay: 0.2s;
-  }
-
-  @keyframes bounce {
-    0%, 100% {
-      transform: translateY(20%);
-      opacity: 0.3;
-      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-    }
-    50% {
-      transform: none;
-      opacity: 1;
-      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    }
-  }
-</style>

package/custom/conversation_area/ToolApprovalRenderer.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="mx-4 my-3 max-w-[min(34rem,calc(100%-2rem))] rounded-lg border border-lightPrimary/30 bg-lightNavbar p-4 text-lightListTableHeadingText shadow-sm dark:border-darkPrimary/40 dark:bg-darkNavbar dark:text-darkListTableHeadingText">
-    <div class="flex items-start gap-3">
-      <div class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/15 dark:text-darkPrimary">
-        <IconExclamationCircleOutline class="h-5 w-5" />
-      </div>
-      <div class="min-w-0 flex-1">
-        <h3 class="text-sm font-semibold leading-5">{{ $t('Approval required') }}</h3>
-        <p class="mt-1 text-sm leading-5 text-lightListTableText dark:text-darkListTableText">
-          {{ $t('Review the agent message before continuing.') }}
-        </p>
-        <button
-          v-if="data.messages?.length"
-          type="button"
-          class="mt-3 inline-flex items-center gap-2 text-sm font-medium text-lightListTableHeadingText transition hover:opacity-80 dark:text-darkListTableHeadingText"
-          @click="isExpanded = !isExpanded"
-        >
-          <IconChevronDownOutline
-            class="h-4 w-4 transition-transform"
-            :class="isExpanded ? 'rotate-180' : ''"
-          />
-          {{ isExpanded ? $t('Hide details') : $t('Show details') }}
-          <span class="rounded-full bg-lightListTableText/10 px-2 py-0.5 text-xs text-lightListTableHeadingText dark:bg-darkListTableText/10 dark:text-darkListTableHeadingText">
-            {{ data.messages.length }}
-          </span>
-        </button>
-        <ul
-          v-if="isExpanded && data.messages?.length"
-          class="mt-3 space-y-1 text-sm leading-5 text-lightListTableHeadingText dark:text-darkListTableHeadingText"
-        >
-          <li
-            v-for="message in data.messages"
-            :key="message"
-            class="flex gap-2"
-          >
-            <span class="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-lightListTableHeadingText dark:bg-darkListTableHeadingText" />
-            <span>{{ message }}</span>
-          </li>
-        </ul>
-        <div class="mt-4 flex flex-wrap gap-2">
-          <template v-if="data.status === 'pending'">
-            <button
-              type="button"
-              class="inline-flex h-9 items-center gap-2 rounded-md border border-lightButtonsBorder bg-lightButtonsBackground px-3 text-sm font-medium text-lightButtonsText transition hover:bg-lightButtonsHover dark:border-darkButtonsBorder dark:bg-darkButtonsBackground dark:text-darkButtonsText dark:hover:bg-darkButtonsHover"
-              @click="submit('approve')"
-            >
-              <IconCheckOutline class="h-4 w-4" />
-              {{ $t('Approve') }}
-            </button>
-            <button
-              type="button"
-              class="inline-flex h-9 items-center gap-2 rounded-md border border-lightListTableText/20 bg-transparent px-3 text-sm font-medium text-lightListTableHeadingText transition hover:bg-lightListTableText/10 dark:border-darkListTableText/20 dark:text-darkListTableHeadingText dark:hover:bg-darkListTableText/10"
-              @click="submit('reject')"
-            >
-              <IconCloseOutline class="h-4 w-4" />
-              {{ $t('Reject') }}
-            </button>
-          </template>
-          <span
-            v-else
-            class="inline-flex h-8 items-center gap-2 rounded-md border px-2.5 text-sm font-medium"
-            :class="data.status === 'processing'
-              ? 'border-lightListTableText/20 bg-lightListTableText/10 text-lightListTableHeadingText dark:border-darkListTableText/20 dark:bg-darkListTableText/10 dark:text-darkListTableHeadingText'
-              : data.status === 'approved'
-              ? 'border-lightListTableText/20 bg-lightListTableText/10 text-lightListTableHeadingText dark:border-darkListTableText/20 dark:bg-darkListTableText/10 dark:text-darkListTableHeadingText'
-              : 'border-lightListTableText/20 bg-lightListTableText/10 text-lightListTableHeadingText dark:border-darkListTableText/20 dark:bg-darkListTableText/10 dark:text-darkListTableHeadingText'"
-          >
-            <IconCheckOutline v-if="data.status === 'approved'" class="h-4 w-4" />
-            <IconCloseOutline v-else-if="data.status === 'rejected'" class="h-4 w-4" />
-            {{ data.status === 'processing' ? $t('Processing') : data.status === 'approved' ? $t('Approved') : $t('Rejected') }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IPartData } from '../types';
-import { useAgentStore } from '../composables/useAgentStore';
-import { ref } from 'vue';
-import { IconCheckOutline, IconChevronDownOutline, IconCloseOutline, IconExclamationCircleOutline } from '@iconify-prerendered/vue-flowbite';
-
-const props = defineProps<{
-  data: IPartData;
-}>();
-
-const agentStore = useAgentStore();
-const isExpanded = ref(false);
-
-function submit(decision: 'approve' | 'reject') {
-  if (!props.data.sessionId || props.data.status !== 'pending') {
-    return;
-  }
-
-  agentStore.submitToolApproval(props.data.sessionId, decision);
-}
-</script>

package/custom/conversation_area/ToolRenderer.vue

@@ -1,178 +0,0 @@
-<template>
-  <div
-    ref="toolRendererRef" 
-    class="py-1 inline-flex justify-center m-2 max-w-full min-w-0
-      flex-col gap-3 rounded-xl px-2 text-lightListTableHeadingText
-      dark:text-darkListTableHeadingText select-none
-    "
-    :class="[
-      isInputOutputExpanded ? 'items-start border-none' : '', 
-      activateShrinkedStyle ? 'border items-center' : '',
-      activateFullWidth ? 'w-full' : '',
-    ]"
-    :style="{
-      maxWidth: activateShrinkedStyle ? toolRendererInitialWidth + 'px' : '',
-    }"
-  >
-    <div 
-      class="flex items-center gap-1 cursor-pointer"     
-      @click="toggleInputOutput()"
-    >
-      <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-lightNavbar dark:bg-darkNavbar">
-        <Spinner v-if="isRunning" class="h-4 w-4" />
-        <IconCheckOutline v-else-if="!props.data.toolInfo.error" class="h-4 w-4 text-lightPrimary dark:text-darkPrimary" />
-        <IconCloseOutline v-else class="h-4 w-4 text-red-500" />
-      </div>
-
-      <div class="min-w-0">
-        <p class="break-words font-mono text-sm leading-5">
-          {{ props.data?.toolInfo?.toolInfo ? props.data.toolInfo.toolInfo : props.data?.toolInfo?.toolName}}
-        </p>
-      </div>
-      <IconAngleDownOutline
-        v-if="hasToolSections"
-        :class="isInputOutputExpanded ? 'rotate-180' : 'rotate-0'"
-        @transitionend="finishTransition()"
-        class="shrink-0 cursor-pointer transition-transform duration-300 hover:scale-105"
-      />
-    </div>
-    <transition name="expand">
-      <div v-if="isInputOutputExpanded" v-show="isInputOutputExpanded" class="max-h-72 space-y-3 overflow-y-auto pr-1 w-full">
-        <section
-          v-for="section in toolSections"
-          :key="section.label"
-          class="overflow-hidden rounded-xl border border-black/5 bg-white/70 shadow-sm backdrop-blur-sm dark:border-white/10 dark:bg-slate-900/50"
-        >
-          <header class="border-b border-black/5 px-3 py-2 text-[0.7rem] font-semibold uppercase tracking-[0.22em] text-gray-500 dark:border-white/10 dark:text-gray-400">
-            {{ section.label }}
-          </header>
-          <div class="select-all grid grid-cols-[auto,1fr] gap-x-3 gap-y-1 px-3 py-3 font-mono text-xs leading-5 text-gray-700 dark:text-gray-200">
-            <template v-for="line in section.lines" :key="`${section.label}-${line.number}`">
-              <span class=" text-[0.7rem] text-gray-400 dark:text-gray-500 select-none">{{ line.number }}</span>
-              <span class="whitespace-pre-wrap break-words">{{ line.content || ' ' }}</span>
-            </template>
-          </div>
-        </section>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { computed, ref, watch, onMounted, nextTick } from 'vue';
-  import { type IFormattedToolCallPart } from '../types';
-  import { Spinner } from '@/afcl';
-  import { IconAngleDownOutline, IconCheckOutline, IconCloseOutline } from '@iconify-prerendered/vue-flowbite';
-
-  const props = defineProps<{
-    data: IFormattedToolCallPart
-  }>();
-
-  interface IToolSection {
-    label: string;
-    lines: Array<{
-      number: number;
-      content: string;
-    }>;
-  }
-
-  const isInputOutputExpanded = ref(false);
-  const activateShrinkedStyle = ref(true);
-  const toolRendererInitialWidth = ref<number | null>(null);
-  const toolRendererRef = ref<HTMLElement | null>(null);
-  const activateFullWidth = ref(false);
-  const blockClicksDuringAnimation = ref(false);
-  const ANIMATION_DURATION = 300;
-
-  const isRunning = computed(() => props.data?.toolInfo?.phase === 'start');
-  const toolSections = computed<IToolSection[]>(() => {
-    const sections = [
-      {
-        label: 'Input',
-        content: normalizeToolPayload(props.data.toolInfo.input),
-      },
-      {
-        label: 'Output',
-        content: normalizeToolPayload(props.data.toolInfo.output),
-      },
-    ];
-
-    return sections
-      .filter((section): section is { label: string; content: string } => Boolean(section.content))
-      .map(section => ({
-        label: section.label,
-        lines: section.content.split('\n').map((content, index) => ({
-          number: index + 1,
-          content,
-        })),
-      }));
-  });
-  const hasToolSections = computed(() => toolSections.value.length > 0);
-
-  onMounted(async () => {
-    await nextTick();
-    if (toolRendererRef.value && props.data.toolInfo) {
-      const contentWidth = Math.ceil(toolRendererRef.value.getBoundingClientRect().width);
-      const parentWidth = toolRendererRef.value.parentElement?.clientWidth ?? Infinity;
-      toolRendererInitialWidth.value = Math.min(contentWidth, parentWidth);
-    }
-  });
-
-  watch(isInputOutputExpanded, (newValue) => {
-    if (newValue) {
-      activateShrinkedStyle.value = false;
-      activateFullWidth.value = true;
-    }
-  });
-
-  function finishTransition() {
-    if (!isInputOutputExpanded.value) {
-      activateFullWidth.value = false;
-      activateShrinkedStyle.value = true;
-    }
-  }
-
-  function toggleInputOutput() {
-    if (blockClicksDuringAnimation.value) return;
-    isInputOutputExpanded.value = !isInputOutputExpanded.value;
-    blockClicksDuringAnimation.value = true;
-    setTimeout(() => {
-      blockClicksDuringAnimation.value = false;
-    }, ANIMATION_DURATION);
-  }
-
-  const normalizeToolPayload = (value: unknown): string | null => {
-    if (value === null || value === undefined || value === '') {
-      return null;
-    }
-
-    if (typeof value === 'string') {
-      return value.trim();
-    }
-
-    return JSON.stringify(value, null, 2);
-  };
-
-</script>
-
-
-<style scoped>
-
-.expand-enter-active,
-.expand-leave-active {
-  transition: all 300ms ease;
-}
-
-.expand-enter-from,
-.expand-leave-to {
-  opacity: 0;
-  max-height: 0;
-}
-
-.expand-enter-to,
-.expand-leave-from {
-  opacity: 1;
-  max-height: 288px;
-}
-
-</style>

package/custom/conversation_area/ToolsGroup.vue

@@ -1,59 +0,0 @@
-<template >
-  <template v-if="toolGroup.length > 0">
-    <li class="mb-6 ms-2 z-50">
-      <span class="text-listTableHeadingText dark:text-darkListTableHeadingText bg-lightNavbar dark:bg-darkNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
-        <div class="w-5 h-5 rounded-full flex items-center justify-center">
-          <IconWrenchSolid class="w-4 h-4" />
-        </div>
-      </span>
-      <h3 
-        class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText"      
-      >
-        <span class="font-semibold select-none ">{{ $t('Call tools') }}</span>
-      </h3>
-      <div class="flex flex-wrap">
-        <template v-for="group in props.toolGroup" :key="group.title">
-          <ToolRenderer
-            v-if="isExpanded" 
-            v-for="part in group.groupedTools" 
-            :key="part.toolInfo.toolCallId" 
-            :data="part"
-          />
-        </template> 
-      </div>
-    </li>
-  </template>
-</template>
-
-<script setup lang="ts">
-import ToolRenderer from './ToolRenderer.vue';
-import type { IToolGroup } from '../types';
-import { IconWrenchSolid } from '@iconify-prerendered/vue-heroicons';
-
-const props = defineProps<{
-  toolGroup: IToolGroup[]
-  isExpanded: boolean
-}>();
-
-</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: 288px;
-}
-
-</style>

package/custom/env.d.ts

@@ -1,7 +0,0 @@
-interface ImportMetaEnv {
-	readonly VITE_ADMINFORTH_PUBLIC_PATH?: string;
-}
-
-interface ImportMeta {
-	readonly env: ImportMetaEnv;
-}