@adminforth/agent 2.9.1 → 3.0.0

package/dist/custom/conversation_area/ProcessingTimeline.vue

@@ -1,58 +1,69 @@
 <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' : '']"
+  <template v-if="timelineParts.length > 0 || inProgress">
+    <button
+      type="button"
+      class="z-20 self-start flex items-center gap-1 mx-4 mb-2 select-none text-[13px] font-medium transition-colors duration-150
+        text-lightInputIconColor dark:text-darkInputIconColor"
+      :class="timelineParts.length > 0 ? 'hover:text-lightInputText dark:hover:text-darkInputText' : 'cursor-default'"
       @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>
-      <ThreeDotsAnimation v-if="inProgress" />      
-      <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"
+      <IconChevronRight
+        v-if="timelineParts.length > 0"
+        class="w-3.5 h-3.5 transition-transform duration-200"
+        :class="isExpanded ? 'rotate-90' : 'rotate-0'"
       />
-    </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" 
+      <template v-if="inProgress">
+        <span
+          class="shine-text
+            bg-[linear-gradient(-65deg,currentColor,theme(colors.lightInputPlaceholderText)_50%,currentColor)]
+            dark:bg-[linear-gradient(-65deg,currentColor,theme(colors.darkInputText)_70%,currentColor)]"
+        >
+          {{ $t('Thinking') }}
+        </span>
+        <ThreeDotsAnimation />
+      </template>
+      <template v-else>
+        <span>{{ thinkingSeconds ? $t('Thought for {seconds}s', { seconds: thinkingSeconds }) : $t('Thoughts') }}</span>
+        <span v-if="toolCallsCount">
+          · {{ toolCallsCount === 1 ? $t('1 tool') : $t('{count} tools', { count: toolCallsCount }) }}
+        </span>
+      </template>
+    </button>
+    <transition name="expand">
+      <!-- the box is inset from the message edge, so its own scrollbar never sits on top of the conversation scrollbar -->
+      <div
+        v-if="timelineParts.length > 0"
         v-show="isExpanded"
-        :threshold="5"
-        :wrapperStyle="{
-          marginRight: '1rem',
-        }"
-        :scrollBarAutoHide="false"
+        class="z-20 mx-4 mb-3 overflow-hidden rounded-lg border
+          border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground"
       >
-        <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>
+        <CustomAutoScrollContainer
+          ref="scrollContainerRef"
+          class="max-h-48 sm:max-h-96 overflow-y-auto"
+          :enabled="isResponseInProgress"
+          behavior="smooth"
+          :threshold="5"
+          :scrollBarAutoHide="false"
+        >
+          <!-- wider right padding keeps the row chevrons clear of the box's scrollbar -->
+          <ul class="flex flex-col gap-1 pl-2.5 pr-5 py-2">
+            <template v-for="(part, index) in timelineParts" :key="index">
+              <ReasoningRenderer v-if="part.type === 'reasoning'" :state="part.state" :text="part.text" />
+              <ToolRenderer v-else-if="part.type === 'data-tool-call'" :data="formatToolCallPart(part)" />
+              <li
+                v-else-if="part.type === 'data-rendering'"
+                class="flex items-center gap-2 py-0.5 text-[0.8125rem] text-lightTableText dark:text-darkTableText"
+              >
+                <span class="flex items-center justify-center w-4 h-4 shrink-0">
+                  <span class="w-2 h-2 rounded-full bg-current animate-pulse" />
+                </span>
+                {{ part.data?.label ?? 'Rendering...' }}
                 <ThreeDotsAnimation />
-              </h3>
-            </li>
-          </template>
-        </ol>
-      </CustomAutoScrollContainer>
+              </li>
+            </template>
+          </ul>
+        </CustomAutoScrollContainer>
+      </div>
     </transition>
   </template>
 </template>
@@ -60,14 +71,13 @@
 
 
 <script setup lang="ts">
-  import type { IFormattedToolCallPart, IMessage, IPart, IToolGroup } from '../types';
+  import type { IFormattedToolCallPart, IMessage, IPart } from '../types';
   import { ref, computed, watch, onUnmounted, onMounted, defineAsyncComponent } from 'vue';
+  import { IconChevronRight } from '@iconify-prerendered/vue-lucide';
   import ReasoningRenderer from './ReasoningRenderer.vue';
-  import { IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
+  import ToolRenderer from './ToolRenderer.vue';
   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'));
 
@@ -83,17 +93,23 @@
   const innerScrollContainerRef = ref<HTMLElement | null>(null);
   const isExpanded = ref(true);
   let isUserScrolled = false;
-  const ToolOrReasoningParts = computed(() => {
+  // One step per reasoning block and per tool call (its 'start' part; the matching 'end'
+  // part is merged in by formatToolCallPart), plus a rendering step while it is running.
+  const timelineParts = computed(() => {
     return props.message.parts.filter((part: IPart) => {
-      return part.type === 'data-tool-call'
-        || part.type === 'reasoning'
+      return part.type === 'reasoning'
+        || (part.type === 'data-tool-call' && part.data?.phase === 'start')
         || isActiveRenderingPart(part);
     });
   });
+  const toolCallsCount = computed(() => timelineParts.value.filter(part => part.type === 'data-tool-call').length);
+  const thinkingSeconds = computed(() => (
+    thinkingDuration.value > 0 ? Math.max(1, Math.round(thinkingDuration.value / 1000)) : 0
+  ));
   const isResponseInProgress = computed(() =>{
-    return props.isLastMessageInChat && agentStore.isResponseInProgress; 
+    return props.isLastMessageInChat && agentStore.isResponseInProgress;
   });
-  
+
   const showFakeThinkingMessage = computed(() => {
     if (props.message.parts.length === 0 && props.isLastMessageInChat) return true;
     return false;
@@ -141,37 +157,28 @@
     }
   });
 
-  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 => {
+  function formatToolCallPart(part: IPart): IFormattedToolCallPart {
+    const data = part.data!;
+    const finishedPart = props.message.parts.find(candidate => {
       return candidate.type === 'data-tool-call'
-        && candidate.data?.toolCallId === part.data?.toolCallId
+        && candidate.data?.toolCallId === data.toolCallId
         && candidate.data?.phase === 'end';
     });
 
     return {
       type: 'data-tool-call',
       toolInfo: {
-        toolCallId: part.data.toolCallId,
-        toolName: part.data.toolName,
+        toolCallId: data.toolCallId,
+        toolName: data.toolName,
         phase: finishedPart ? 'end' : 'start',
         durationMs: finishedPart?.data?.durationMs,
-        input: part.data.input,
+        input: data.input,
         output: finishedPart?.data?.output,
-        toolInfo: part.data.toolInfo,
+        toolInfo: 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'
@@ -181,55 +188,8 @@
       });
   }
 
-  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) { 
+    if (isUserScrolled) {
       scrollContainerRef.value?.handleScroll();
     }
   }

package/dist/custom/conversation_area/ReasoningRenderer.vue

@@ -1,36 +1,33 @@
 <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"      
+  <li class="overflow-hidden">
+    <button
+      type="button"
+      class="flex items-center gap-2 w-full py-0.5 text-left text-[0.8125rem] leading-5 select-none"
       @click="isExpanded = !isExpanded"
     >
-      <span class="font-semibold">{{ reasoningTitle }}</span>
+      <IconBrain class="w-4 h-4 shrink-0 text-lightInputIconColor dark:text-darkInputIconColor" />
+      <span class="min-w-0 truncate font-medium text-lightTableText dark:text-darkTableText">{{ reasoningTitle || $t('Reasoning') }}</span>
       <ThreeDotsAnimation v-if="isStreaming"/>
-      <IconAngleDownOutline           
+      <IconChevronDown
         :class="isExpanded ? 'rotate-180' : 'rotate-0'"
-        class="transition-transform duration-200"
+        class="ml-auto w-3.5 h-3.5 shrink-0 text-lightInputIconColor transition-transform duration-200 dark:text-darkInputIconColor"
       />
-    </h3>
+    </button>
     <transition name="expand">
       <IncremarkContent
-        v-if="isExpanded" 
+        v-if="isExpanded"
         v-show="isExpanded"
-        class="pl-4 text-sm"
+        class="ml-6 mb-1 text-sm text-lightInputIconColor dark:text-darkInputIconColor"
         :content="reasoningText"
       />
-    </transition>    
+    </transition>
   </li>
 </template>
 
 
 
 <script setup lang="ts">
-import { IconBrainOutline, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconBrain, IconChevronDown } from '@iconify-prerendered/vue-lucide';
 import type { IPart } from '../types';
 import { ref, computed, watch, defineAsyncComponent } from 'vue';
 import ThreeDotsAnimation from './ThreeDotsAnimation.vue';

package/dist/custom/conversation_area/SystemMessageRenderer.vue

@@ -1,10 +1,10 @@
 <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" />
+    <IconPhone 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" />
+    <IconPhoneOff 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">
@@ -17,9 +17,9 @@
 
 <script setup lang="ts">
 import { RESERVED_SYSTEM_MESSAGE_CONTENT } from '../composables/agentStore/constants';
-import { IconPhoneSolid, IconPhoneHangupSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconPhone, IconPhoneOff } from '@iconify-prerendered/vue-lucide';
 
-const TEXT_CLASSES = 'text-center italic  text-lightListTableHeadingText dark:text-darkListTableHeadingText flex items-center justify-center';
+const TEXT_CLASSES = 'flex items-center justify-center text-center text-sm italic text-lightInputIconColor dark:text-darkInputIconColor';
 
 const props = defineProps<{ 
   message: string

package/dist/custom/conversation_area/TextRenderer.vue

@@ -1,12 +1,14 @@
 <template>
   <div
-    class="flex items-center justify-center rounded-xl border px-6 border-gray-200 dark:border-gray-700 min-w-0 transition-shadow duration-150 z-20"
+    class="flex items-center justify-center min-w-0 text-sm transition-shadow duration-150 z-20"
     @click="handleMarkdownLinkClick"
     :class="[
-      hasVegaLite ? 'w-full my-2' : 'my-2',
-      props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end max-w-[80%] mr-4'
-        : 'border-none self-start max-w-full',
-      props.editMode ? 'ring-2 ring-lightPrimary dark:ring-darkPrimary w-full max-w-[calc(100%-2rem)] flex-col items-stretch py-3' : ''
+      hasVegaLite && 'w-full',
+      props.role === 'user'
+        ? 'self-end max-w-[82%] mr-4 px-3 py-2 rounded-xl rounded-br [&_.incremark-paragraph]:leading-5 bg-lightSecondaryDarken dark:bg-darkSecondaryLighten'
+        : 'self-start max-w-full px-4',
+      props.editMode ? `w-full max-w-[calc(100%-2rem)] flex-col items-stretch py-3 border bg-lightInputBackground border-lightInputFocusBorder ring-[3px] ring-lightInputFocusRing
+        dark:bg-darkInputBackground dark:border-darkInputFocusBorder dark:ring-darkInputFocusRing` : ''
     ]"
   >
     <IncremarkContent
@@ -18,13 +20,10 @@
       :components="incremarkComponents"
       :incremark-options="incremarkOptions"
     />
-    <!-- <p v-else class="text-red-500 py-2">
-      {{ $t('No content to render') }}
-    </p> -->
     <template v-if="props.editMode">
       <textarea
         v-model="agentStore.userMessageInput"
-        class="w-full min-h-24 resize-y bg-transparent text-sm text-gray-900 dark:text-gray-100 border-none focus:outline-none focus:ring-0 p-0"
+        class="w-full min-h-24 resize-y bg-transparent text-sm text-lightInputText dark:text-darkInputText border-none focus:outline-none focus:ring-0 p-0"
         @keydown.esc.prevent="agentStore.cancelEditMessage"
       />
       <EditActionButtons
@@ -154,31 +153,55 @@
 </script>
 
 <style lang="scss">
+// the incremark theme ships its own fonts and palette, point them to the design tokens
+.incremark {
+  --incremark-typography-font-family-base: theme('fontFamily.sans');
+  --incremark-typography-font-family-mono: theme('fontFamily.mono');
+  --incremark-color-text-primary: theme('colors.lightListTableText');
+  --incremark-color-text-secondary: theme('colors.lightInputIconColor');
+  --incremark-color-text-tertiary: theme('colors.lightInputPlaceholderText');
+  --incremark-color-border-default: theme('colors.lightCardBorder');
+  --incremark-color-border-strong: theme('colors.lightCardBorder');
+  --incremark-color-border-subtle: theme('colors.lightCardBorder');
+  --incremark-color-background-base: theme('colors.lightCardBackground');
+  --incremark-color-background-elevated: theme('colors.lightCardBackgroundHover');
+  --incremark-color-code-inline-background: theme('colors.lightSecondaryDarken');
+  --incremark-color-code-inline-text: theme('colors.lightInputText');
+  --incremark-color-brand-primary: theme('colors.lightPrimary');
+  --incremark-color-interactive-link: theme('colors.lightPrimary');
+  --incremark-color-interactive-link-hover: theme('colors.lightPrimary');
+  --incremark-color-interactive-link-visited: theme('colors.lightPrimary');
+}
+
+.dark .incremark {
+  --incremark-color-text-primary: theme('colors.darkListTableText');
+  --incremark-color-text-secondary: theme('colors.darkInputIconColor');
+  --incremark-color-text-tertiary: theme('colors.darkInputPlaceholderText');
+  --incremark-color-border-default: theme('colors.darkCardBorder');
+  --incremark-color-border-strong: theme('colors.darkCardBorder');
+  --incremark-color-border-subtle: theme('colors.darkCardBorder');
+  --incremark-color-background-base: theme('colors.darkCardBackground');
+  --incremark-color-background-elevated: theme('colors.darkCardBackgroundHover');
+  --incremark-color-code-inline-background: theme('colors.darkSecondaryLighten');
+  --incremark-color-code-inline-text: theme('colors.darkInputText');
+  --incremark-color-brand-primary: theme('colors.darkPrimary');
+  --incremark-color-interactive-link: theme('colors.darkPrimary');
+  --incremark-color-interactive-link-hover: theme('colors.darkPrimary');
+  --incremark-color-interactive-link-visited: theme('colors.darkPrimary');
+}
+
 .incremark a.incremark-link,
 .incremark a.incremark-link:visited {
+  @apply text-lightPrimary dark:text-darkPrimary;
   display: inline-block;
   text-decoration: underline;
   text-underline-offset: 4px;
-  text-decoration-style:dotted;
-  color: rgb(0, 0, 0);
-  transition: color 0.2s ease;
+  text-decoration-style: dotted;
   word-break: break-all;
 }
 
 .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);
+  text-decoration-style: solid;
 }
 
 a.incremark-link::after {
@@ -197,11 +220,27 @@ a.incremark-link::after {
   word-break: break-word;
 }
 
-.incremark-list {
+// scoped under .incremark: the incremark theme is imported lazily and would win an equal selector
+.incremark .incremark-list {
   list-style: disc;
+  margin: 0 0 8px;
+  padding-left: 18px;
+}
+
+.incremark .incremark-list-item {
+  margin: 2px 0;
+}
+
+.incremark .incremark-paragraph {
+  margin: 0 0 8px;
+}
+
+.incremark .incremark-list-item > .incremark-paragraph {
+  margin: 0;
 }
 
-.incremark-paragraph {
-  margin: 8px 0;
+// the gap between messages comes from the conversation, not from the last block of a message
+.incremark > .incremark-block:last-child > :last-child {
+  margin-bottom: 0;
 }
 </style>