@adminforth/agent 1.24.5 → 1.24.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build.log +2 -2
- package/custom/CustomAutoScrollContainer.vue +6 -10
- package/custom/conversation_area/ConversationArea.vue +9 -9
- package/custom/conversation_area/ToolRenderer.vue +13 -18
- package/dist/custom/CustomAutoScrollContainer.vue +6 -10
- package/dist/custom/conversation_area/ConversationArea.vue +9 -9
- package/dist/custom/conversation_area/ToolRenderer.vue +13 -18
- package/package.json +1 -1
package/build.log
CHANGED
|
@@ -38,5 +38,5 @@ custom/skills/fetch_data/SKILL.md
|
|
|
38
38
|
custom/skills/mutate_data/
|
|
39
39
|
custom/skills/mutate_data/SKILL.md
|
|
40
40
|
|
|
41
|
-
sent 201,
|
|
42
|
-
total size is 199,
|
|
41
|
+
sent 201,370 bytes received 566 bytes 403,872.00 bytes/sec
|
|
42
|
+
total size is 199,062 speedup is 0.99
|
|
@@ -4,16 +4,16 @@
|
|
|
4
4
|
class="auto-scroll-container mask-y"
|
|
5
5
|
:wrapperStyle = "wrapperStyle"
|
|
6
6
|
:contentStyle = "contentStyle"
|
|
7
|
+
@scroll="handleScroll"
|
|
7
8
|
>
|
|
8
9
|
<slot />
|
|
9
10
|
</CustomScrollbar>
|
|
10
11
|
</template>
|
|
11
12
|
|
|
12
13
|
<script setup lang="ts">
|
|
13
|
-
import { ref,
|
|
14
|
+
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
|
14
15
|
import CustomScrollbar from 'custom-vue-scrollbar';
|
|
15
16
|
import 'custom-vue-scrollbar/dist/style.css';
|
|
16
|
-
import { useScroll } from '@vueuse/core'
|
|
17
17
|
import { useAgentStore } from './composables/useAgentStore';
|
|
18
18
|
|
|
19
19
|
const agentStore = useAgentStore();
|
|
@@ -33,11 +33,6 @@ const props = withDefaults(defineProps<{
|
|
|
33
33
|
const containerRef = ref<HTMLDivElement | null>(null)
|
|
34
34
|
const isUserScrolledUp = ref(false)
|
|
35
35
|
const scrollElement = ref<HTMLElement | null>(null)
|
|
36
|
-
const { y } = useScroll(scrollElement)
|
|
37
|
-
|
|
38
|
-
watch(y, () => {
|
|
39
|
-
handleScroll()
|
|
40
|
-
})
|
|
41
36
|
|
|
42
37
|
let lastScrollTop = 0
|
|
43
38
|
let lastScrollHeight = 0
|
|
@@ -75,7 +70,6 @@ function handleScroll(): void {
|
|
|
75
70
|
if (!container) return
|
|
76
71
|
|
|
77
72
|
const { scrollTop, scrollHeight, clientHeight } = container
|
|
78
|
-
|
|
79
73
|
if (scrollHeight <= clientHeight) {
|
|
80
74
|
isUserScrolledUp.value = false
|
|
81
75
|
lastScrollTop = 0
|
|
@@ -86,9 +80,11 @@ function handleScroll(): void {
|
|
|
86
80
|
isUserScrolledUp.value = false
|
|
87
81
|
} else {
|
|
88
82
|
const isScrollingUp = scrollTop < lastScrollTop
|
|
83
|
+
const isScrollingDown = scrollTop > lastScrollTop
|
|
89
84
|
const isContentUnchanged = scrollHeight === lastScrollHeight
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
if ((isScrollingUp || isScrollingDown) && isContentUnchanged) {
|
|
86
|
+
isUserScrolledUp.value = true
|
|
87
|
+
} else if (!isNearBottom()) {
|
|
92
88
|
isUserScrolledUp.value = true
|
|
93
89
|
}
|
|
94
90
|
}
|
|
@@ -9,14 +9,7 @@
|
|
|
9
9
|
class="absolute bg-black/10 backdrop-blur-md z-10 h-full w-full"
|
|
10
10
|
>
|
|
11
11
|
</div>
|
|
12
|
-
<div class="relative flex-1 min-h-0 overflow-hidden">
|
|
13
|
-
<button @click="scrollContainer.scrollToBottom(); recalculateScroll();">
|
|
14
|
-
<IconArrowDownOutline
|
|
15
|
-
class="absolute z-10 bottom-8 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in"
|
|
16
|
-
:class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
|
|
17
|
-
:disabled="!showScrollToBottomButton"
|
|
18
|
-
/>
|
|
19
|
-
</button>
|
|
12
|
+
<div class="relative flex-1 min-h-0 overflow-hidden" @click="recalculateScroll()">
|
|
20
13
|
<CustomAutoScrollContainer
|
|
21
14
|
v-if="showScrollContainer"
|
|
22
15
|
:enabled="!showScrollToBottomButton"
|
|
@@ -47,7 +40,7 @@
|
|
|
47
40
|
|
|
48
41
|
<div
|
|
49
42
|
v-for="(message, index) in props.messages" :key="message.id"
|
|
50
|
-
class="flex flex-col w-full"
|
|
43
|
+
class="flex flex-col w-full mt-2"
|
|
51
44
|
:class="message.role === 'user' ? 'self-end' : 'self-start'"
|
|
52
45
|
>
|
|
53
46
|
<MessageRenderer :message="message" :isLastMessageInChat="index === props.messages.length - 1"/>
|
|
@@ -60,6 +53,13 @@
|
|
|
60
53
|
<p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
|
|
61
54
|
</div>
|
|
62
55
|
</CustomAutoScrollContainer>
|
|
56
|
+
<button @click="scrollContainer.scrollToBottom();">
|
|
57
|
+
<IconArrowDownOutline
|
|
58
|
+
class="absolute z-10 bottom-8 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in"
|
|
59
|
+
:class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
|
|
60
|
+
:disabled="!showScrollToBottomButton"
|
|
61
|
+
/>
|
|
62
|
+
</button>
|
|
63
63
|
</div>
|
|
64
64
|
</template>
|
|
65
65
|
|
|
@@ -11,8 +11,7 @@
|
|
|
11
11
|
activateFullWidth ? 'w-full' : '',
|
|
12
12
|
]"
|
|
13
13
|
:style="{
|
|
14
|
-
maxWidth:
|
|
15
|
-
transition: 'max-width 0.3s ease',
|
|
14
|
+
maxWidth: activateShrinkedStyle ? toolRendererInitialWidth + 'px' : '',
|
|
16
15
|
}"
|
|
17
16
|
>
|
|
18
17
|
<div
|
|
@@ -29,18 +28,19 @@
|
|
|
29
28
|
{{ statusLabel }}
|
|
30
29
|
<span v-if="props.data?.toolInfo?.durationMs" class="text-xs">({{ (props.data.toolInfo.durationMs / 1000).toFixed(2) }}s)</span>
|
|
31
30
|
</p> -->
|
|
32
|
-
<p class="break-all font-mono text-sm leading-5">
|
|
33
|
-
{{ props.data?.toolInfo?.
|
|
31
|
+
<p class="break-all font-mono text-sm leading-5 text-nowrap">
|
|
32
|
+
{{ props.data?.toolInfo?.toolInfo }}
|
|
34
33
|
</p>
|
|
35
34
|
</div>
|
|
36
35
|
<IconAngleDownOutline
|
|
37
36
|
v-if="hasToolSections"
|
|
38
37
|
:class="isInputOutputExpanded ? 'rotate-180' : 'rotate-0'"
|
|
39
|
-
|
|
38
|
+
@transitionend="finishTransition()"
|
|
39
|
+
class="cursor-pointer transition-transform duration-300 hover:scale-105"
|
|
40
40
|
/>
|
|
41
41
|
</div>
|
|
42
42
|
<transition name="expand">
|
|
43
|
-
<div v-if="isInputOutputExpanded" v-show="isInputOutputExpanded" class="max-h-72 space-y-3 overflow-y-auto pr-1">
|
|
43
|
+
<div v-if="isInputOutputExpanded" v-show="isInputOutputExpanded" class="max-h-72 space-y-3 overflow-y-auto pr-1 w-full">
|
|
44
44
|
<section
|
|
45
45
|
v-for="section in toolSections"
|
|
46
46
|
:key="section.label"
|
|
@@ -82,19 +82,14 @@
|
|
|
82
82
|
}
|
|
83
83
|
});
|
|
84
84
|
|
|
85
|
+
function finishTransition() {
|
|
86
|
+
if (!isInputOutputExpanded.value) {
|
|
87
|
+
activateFullWidth.value = false;
|
|
88
|
+
activateShrinkedStyle.value = true;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
85
91
|
watch(isInputOutputExpanded, (newValue) => {
|
|
86
|
-
if (
|
|
87
|
-
setTimeout(() => {
|
|
88
|
-
activateFullWidth.value = false;
|
|
89
|
-
isAnimatingShrinkFinal.value = true;
|
|
90
|
-
}, ANIMATION_DURATION - 10)
|
|
91
|
-
setTimeout(() => {
|
|
92
|
-
isAnimatingShrinkFinal.value = false;
|
|
93
|
-
}, ANIMATION_DURATION);
|
|
94
|
-
setTimeout(() => {
|
|
95
|
-
activateShrinkedStyle.value = true;
|
|
96
|
-
}, ANIMATION_DURATION + 10);
|
|
97
|
-
} else {
|
|
92
|
+
if (newValue) {
|
|
98
93
|
activateShrinkedStyle.value = false;
|
|
99
94
|
activateFullWidth.value = true;
|
|
100
95
|
}
|
|
@@ -4,16 +4,16 @@
|
|
|
4
4
|
class="auto-scroll-container mask-y"
|
|
5
5
|
:wrapperStyle = "wrapperStyle"
|
|
6
6
|
:contentStyle = "contentStyle"
|
|
7
|
+
@scroll="handleScroll"
|
|
7
8
|
>
|
|
8
9
|
<slot />
|
|
9
10
|
</CustomScrollbar>
|
|
10
11
|
</template>
|
|
11
12
|
|
|
12
13
|
<script setup lang="ts">
|
|
13
|
-
import { ref,
|
|
14
|
+
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
|
14
15
|
import CustomScrollbar from 'custom-vue-scrollbar';
|
|
15
16
|
import 'custom-vue-scrollbar/dist/style.css';
|
|
16
|
-
import { useScroll } from '@vueuse/core'
|
|
17
17
|
import { useAgentStore } from './composables/useAgentStore';
|
|
18
18
|
|
|
19
19
|
const agentStore = useAgentStore();
|
|
@@ -33,11 +33,6 @@ const props = withDefaults(defineProps<{
|
|
|
33
33
|
const containerRef = ref<HTMLDivElement | null>(null)
|
|
34
34
|
const isUserScrolledUp = ref(false)
|
|
35
35
|
const scrollElement = ref<HTMLElement | null>(null)
|
|
36
|
-
const { y } = useScroll(scrollElement)
|
|
37
|
-
|
|
38
|
-
watch(y, () => {
|
|
39
|
-
handleScroll()
|
|
40
|
-
})
|
|
41
36
|
|
|
42
37
|
let lastScrollTop = 0
|
|
43
38
|
let lastScrollHeight = 0
|
|
@@ -75,7 +70,6 @@ function handleScroll(): void {
|
|
|
75
70
|
if (!container) return
|
|
76
71
|
|
|
77
72
|
const { scrollTop, scrollHeight, clientHeight } = container
|
|
78
|
-
|
|
79
73
|
if (scrollHeight <= clientHeight) {
|
|
80
74
|
isUserScrolledUp.value = false
|
|
81
75
|
lastScrollTop = 0
|
|
@@ -86,9 +80,11 @@ function handleScroll(): void {
|
|
|
86
80
|
isUserScrolledUp.value = false
|
|
87
81
|
} else {
|
|
88
82
|
const isScrollingUp = scrollTop < lastScrollTop
|
|
83
|
+
const isScrollingDown = scrollTop > lastScrollTop
|
|
89
84
|
const isContentUnchanged = scrollHeight === lastScrollHeight
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
if ((isScrollingUp || isScrollingDown) && isContentUnchanged) {
|
|
86
|
+
isUserScrolledUp.value = true
|
|
87
|
+
} else if (!isNearBottom()) {
|
|
92
88
|
isUserScrolledUp.value = true
|
|
93
89
|
}
|
|
94
90
|
}
|
|
@@ -9,14 +9,7 @@
|
|
|
9
9
|
class="absolute bg-black/10 backdrop-blur-md z-10 h-full w-full"
|
|
10
10
|
>
|
|
11
11
|
</div>
|
|
12
|
-
<div class="relative flex-1 min-h-0 overflow-hidden">
|
|
13
|
-
<button @click="scrollContainer.scrollToBottom(); recalculateScroll();">
|
|
14
|
-
<IconArrowDownOutline
|
|
15
|
-
class="absolute z-10 bottom-8 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in"
|
|
16
|
-
:class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
|
|
17
|
-
:disabled="!showScrollToBottomButton"
|
|
18
|
-
/>
|
|
19
|
-
</button>
|
|
12
|
+
<div class="relative flex-1 min-h-0 overflow-hidden" @click="recalculateScroll()">
|
|
20
13
|
<CustomAutoScrollContainer
|
|
21
14
|
v-if="showScrollContainer"
|
|
22
15
|
:enabled="!showScrollToBottomButton"
|
|
@@ -47,7 +40,7 @@
|
|
|
47
40
|
|
|
48
41
|
<div
|
|
49
42
|
v-for="(message, index) in props.messages" :key="message.id"
|
|
50
|
-
class="flex flex-col w-full"
|
|
43
|
+
class="flex flex-col w-full mt-2"
|
|
51
44
|
:class="message.role === 'user' ? 'self-end' : 'self-start'"
|
|
52
45
|
>
|
|
53
46
|
<MessageRenderer :message="message" :isLastMessageInChat="index === props.messages.length - 1"/>
|
|
@@ -60,6 +53,13 @@
|
|
|
60
53
|
<p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
|
|
61
54
|
</div>
|
|
62
55
|
</CustomAutoScrollContainer>
|
|
56
|
+
<button @click="scrollContainer.scrollToBottom();">
|
|
57
|
+
<IconArrowDownOutline
|
|
58
|
+
class="absolute z-10 bottom-8 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in"
|
|
59
|
+
:class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
|
|
60
|
+
:disabled="!showScrollToBottomButton"
|
|
61
|
+
/>
|
|
62
|
+
</button>
|
|
63
63
|
</div>
|
|
64
64
|
</template>
|
|
65
65
|
|
|
@@ -11,8 +11,7 @@
|
|
|
11
11
|
activateFullWidth ? 'w-full' : '',
|
|
12
12
|
]"
|
|
13
13
|
:style="{
|
|
14
|
-
maxWidth:
|
|
15
|
-
transition: 'max-width 0.3s ease',
|
|
14
|
+
maxWidth: activateShrinkedStyle ? toolRendererInitialWidth + 'px' : '',
|
|
16
15
|
}"
|
|
17
16
|
>
|
|
18
17
|
<div
|
|
@@ -29,18 +28,19 @@
|
|
|
29
28
|
{{ statusLabel }}
|
|
30
29
|
<span v-if="props.data?.toolInfo?.durationMs" class="text-xs">({{ (props.data.toolInfo.durationMs / 1000).toFixed(2) }}s)</span>
|
|
31
30
|
</p> -->
|
|
32
|
-
<p class="break-all font-mono text-sm leading-5">
|
|
33
|
-
{{ props.data?.toolInfo?.
|
|
31
|
+
<p class="break-all font-mono text-sm leading-5 text-nowrap">
|
|
32
|
+
{{ props.data?.toolInfo?.toolInfo }}
|
|
34
33
|
</p>
|
|
35
34
|
</div>
|
|
36
35
|
<IconAngleDownOutline
|
|
37
36
|
v-if="hasToolSections"
|
|
38
37
|
:class="isInputOutputExpanded ? 'rotate-180' : 'rotate-0'"
|
|
39
|
-
|
|
38
|
+
@transitionend="finishTransition()"
|
|
39
|
+
class="cursor-pointer transition-transform duration-300 hover:scale-105"
|
|
40
40
|
/>
|
|
41
41
|
</div>
|
|
42
42
|
<transition name="expand">
|
|
43
|
-
<div v-if="isInputOutputExpanded" v-show="isInputOutputExpanded" class="max-h-72 space-y-3 overflow-y-auto pr-1">
|
|
43
|
+
<div v-if="isInputOutputExpanded" v-show="isInputOutputExpanded" class="max-h-72 space-y-3 overflow-y-auto pr-1 w-full">
|
|
44
44
|
<section
|
|
45
45
|
v-for="section in toolSections"
|
|
46
46
|
:key="section.label"
|
|
@@ -82,19 +82,14 @@
|
|
|
82
82
|
}
|
|
83
83
|
});
|
|
84
84
|
|
|
85
|
+
function finishTransition() {
|
|
86
|
+
if (!isInputOutputExpanded.value) {
|
|
87
|
+
activateFullWidth.value = false;
|
|
88
|
+
activateShrinkedStyle.value = true;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
85
91
|
watch(isInputOutputExpanded, (newValue) => {
|
|
86
|
-
if (
|
|
87
|
-
setTimeout(() => {
|
|
88
|
-
activateFullWidth.value = false;
|
|
89
|
-
isAnimatingShrinkFinal.value = true;
|
|
90
|
-
}, ANIMATION_DURATION - 10)
|
|
91
|
-
setTimeout(() => {
|
|
92
|
-
isAnimatingShrinkFinal.value = false;
|
|
93
|
-
}, ANIMATION_DURATION);
|
|
94
|
-
setTimeout(() => {
|
|
95
|
-
activateShrinkedStyle.value = true;
|
|
96
|
-
}, ANIMATION_DURATION + 10);
|
|
97
|
-
} else {
|
|
92
|
+
if (newValue) {
|
|
98
93
|
activateShrinkedStyle.value = false;
|
|
99
94
|
activateFullWidth.value = true;
|
|
100
95
|
}
|