@adminforth/agent 1.24.7 → 1.24.9
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/ChatSurface.vue +53 -52
- package/custom/CustomAutoScrollContainer.vue +3 -7
- package/custom/conversation_area/ConversationArea.vue +1 -5
- package/dist/custom/ChatSurface.vue +53 -52
- package/dist/custom/CustomAutoScrollContainer.vue +3 -7
- package/dist/custom/conversation_area/ConversationArea.vue +1 -5
- 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,354 bytes received 566 bytes 403,840.00 bytes/sec
|
|
42
|
+
total size is 199,080 speedup is 0.99
|
package/custom/ChatSurface.vue
CHANGED
|
@@ -105,66 +105,67 @@
|
|
|
105
105
|
transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
|
|
106
106
|
}"
|
|
107
107
|
>
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
<div
|
|
120
|
-
v-if="agentStore.availableModes.length > 1"
|
|
121
|
-
ref="modeMenu"
|
|
122
|
-
class="absolute bottom-2 left-4"
|
|
123
|
-
>
|
|
124
|
-
<button
|
|
125
|
-
aria-label="Select mode"
|
|
126
|
-
class="flex px-2 py-1 items-center text-sm justify-center
|
|
127
|
-
rounded-md bg-white text-lightListTableHeadingText
|
|
128
|
-
transition-colors duration-200 hover:bg-gray-100
|
|
129
|
-
dark:text-darkListTableHeadingText dark:bg-gray-700 dark:hover:bg-gray-800"
|
|
130
|
-
:class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
|
|
131
|
-
:disabled="agentStore.isResponseInProgress"
|
|
132
|
-
title="Select mode"
|
|
133
|
-
type="button"
|
|
134
|
-
@click="toggleModeMenu"
|
|
135
|
-
>
|
|
136
|
-
{{ agentStore.activeModeName }}
|
|
137
|
-
<IconAngleDownOutline
|
|
138
|
-
class="w-4 h-4 ml-1"
|
|
139
|
-
/>
|
|
140
|
-
</button>
|
|
141
|
-
|
|
108
|
+
<div class="w-full border rounded-lg pb-8">
|
|
109
|
+
<textarea
|
|
110
|
+
v-model="agentStore.userMessageInput"
|
|
111
|
+
ref="textInput"
|
|
112
|
+
@input="autoResize"
|
|
113
|
+
:class="[
|
|
114
|
+
'min-h-12 px-4 pt-4 w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
|
|
115
|
+
]"
|
|
116
|
+
:placeholder="agentStore.userMessagePlaceholder"
|
|
117
|
+
@keydown.enter.exact.prevent="sendMessage"
|
|
118
|
+
/>
|
|
142
119
|
<div
|
|
143
|
-
v-if="
|
|
144
|
-
|
|
120
|
+
v-if="agentStore.availableModes.length > 1"
|
|
121
|
+
ref="modeMenu"
|
|
122
|
+
class="absolute bottom-2 left-4"
|
|
145
123
|
>
|
|
146
124
|
<button
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
125
|
+
aria-label="Select mode"
|
|
126
|
+
class="flex px-2 py-1 items-center text-sm justify-center
|
|
127
|
+
rounded-md bg-white text-lightListTableHeadingText
|
|
128
|
+
transition-colors duration-200 hover:bg-gray-100
|
|
129
|
+
dark:text-darkListTableHeadingText dark:bg-gray-700 dark:hover:bg-gray-800"
|
|
130
|
+
:class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
|
|
131
|
+
:disabled="agentStore.isResponseInProgress"
|
|
132
|
+
title="Select mode"
|
|
151
133
|
type="button"
|
|
152
|
-
@click="
|
|
134
|
+
@click="toggleModeMenu"
|
|
153
135
|
>
|
|
154
|
-
{{
|
|
136
|
+
{{ agentStore.activeModeName }}
|
|
137
|
+
<IconAngleDownOutline
|
|
138
|
+
class="w-4 h-4 ml-1"
|
|
139
|
+
/>
|
|
155
140
|
</button>
|
|
141
|
+
|
|
142
|
+
<div
|
|
143
|
+
v-if="isModeMenuOpen"
|
|
144
|
+
class="absolute bottom-full left-0 mb-2 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"
|
|
145
|
+
>
|
|
146
|
+
<button
|
|
147
|
+
v-for="mode in agentStore.availableModes"
|
|
148
|
+
:key="mode.name"
|
|
149
|
+
class="block w-full px-3 py-2 text-left text-sm text-lightInputText transition-colors duration-150 hover:bg-gray-100 dark:text-darkInputText dark:hover:bg-gray-700"
|
|
150
|
+
:class="mode.name === agentStore.activeModeName ? 'bg-gray-100 dark:bg-gray-700' : ''"
|
|
151
|
+
type="button"
|
|
152
|
+
@click="selectMode(mode.name)"
|
|
153
|
+
>
|
|
154
|
+
{{ mode.name }}
|
|
155
|
+
</button>
|
|
156
|
+
</div>
|
|
156
157
|
</div>
|
|
158
|
+
<Button
|
|
159
|
+
class="absolute right-4 bottom-2 !p-0 h-9 w-9"
|
|
160
|
+
@click="sendMessage"
|
|
161
|
+
:disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
|
|
162
|
+
>
|
|
163
|
+
<IconArrowUpOutline
|
|
164
|
+
class="w-8 h-8 p-1
|
|
165
|
+
text-white"
|
|
166
|
+
/>
|
|
167
|
+
</Button>
|
|
157
168
|
</div>
|
|
158
|
-
<Button
|
|
159
|
-
class="absolute right-4 bottom-2 !p-0 h-9 w-9"
|
|
160
|
-
@click="sendMessage"
|
|
161
|
-
:disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
|
|
162
|
-
>
|
|
163
|
-
<IconArrowUpOutline
|
|
164
|
-
class="w-8 h-8 p-1
|
|
165
|
-
text-white"
|
|
166
|
-
/>
|
|
167
|
-
</Button>
|
|
168
169
|
</div>
|
|
169
170
|
</div>
|
|
170
171
|
</div>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
</template>
|
|
12
12
|
|
|
13
13
|
<script setup lang="ts">
|
|
14
|
-
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
|
14
|
+
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
|
|
15
15
|
import CustomScrollbar from 'custom-vue-scrollbar';
|
|
16
16
|
import 'custom-vue-scrollbar/dist/style.css';
|
|
17
17
|
import { useAgentStore } from './composables/useAgentStore';
|
|
@@ -50,7 +50,6 @@ function scrollToBottom(force = false): void {
|
|
|
50
50
|
if (!container) return
|
|
51
51
|
|
|
52
52
|
if (isUserScrolledUp.value && !force) return
|
|
53
|
-
|
|
54
53
|
container.scrollTo({
|
|
55
54
|
top: container.scrollHeight,
|
|
56
55
|
behavior: props.behavior
|
|
@@ -65,7 +64,7 @@ function hasScrollbar(): boolean {
|
|
|
65
64
|
}
|
|
66
65
|
|
|
67
66
|
|
|
68
|
-
function handleScroll(): void {
|
|
67
|
+
function handleScroll(detectScrollDown = true): void {
|
|
69
68
|
const container = containerRef.value.scrollEl
|
|
70
69
|
if (!container) return
|
|
71
70
|
|
|
@@ -80,12 +79,10 @@ function handleScroll(): void {
|
|
|
80
79
|
isUserScrolledUp.value = false
|
|
81
80
|
} else {
|
|
82
81
|
const isScrollingUp = scrollTop < lastScrollTop
|
|
83
|
-
const isScrollingDown = scrollTop > lastScrollTop
|
|
82
|
+
const isScrollingDown = detectScrollDown ? scrollTop > lastScrollTop : false
|
|
84
83
|
const isContentUnchanged = scrollHeight === lastScrollHeight
|
|
85
84
|
if ((isScrollingUp || isScrollingDown) && isContentUnchanged) {
|
|
86
85
|
isUserScrolledUp.value = true
|
|
87
|
-
} else if (!isNearBottom()) {
|
|
88
|
-
isUserScrolledUp.value = true
|
|
89
86
|
}
|
|
90
87
|
}
|
|
91
88
|
lastScrollTop = scrollTop
|
|
@@ -110,7 +107,6 @@ onMounted(() => {
|
|
|
110
107
|
}
|
|
111
108
|
|
|
112
109
|
lastScrollHeight = containerRef.value.scrollEl.scrollHeight
|
|
113
|
-
|
|
114
110
|
if (props.enabled && !isUserScrolledUp.value) {
|
|
115
111
|
scrollToBottom()
|
|
116
112
|
}
|
|
@@ -83,12 +83,11 @@ const showScrollToBottomButton = ref(false);
|
|
|
83
83
|
const innerScrollContainerRef = ref(null);
|
|
84
84
|
const agentStore = useAgentStore();
|
|
85
85
|
const agentTransitions = useAgentTransitions();
|
|
86
|
-
const clicks = ref(0);
|
|
87
86
|
const showScrollContainer = ref(true);
|
|
88
87
|
|
|
89
88
|
function recalculateScroll() {
|
|
90
89
|
if (scrollContainer.value) {
|
|
91
|
-
scrollContainer.value.handleScroll();
|
|
90
|
+
scrollContainer.value.handleScroll(false);
|
|
92
91
|
const isScrolledUp = scrollContainer.value.isUserScrolledUp();
|
|
93
92
|
showScrollToBottomButton.value = !!isScrolledUp;
|
|
94
93
|
}
|
|
@@ -121,9 +120,6 @@ watch(scrollContainer, () => {
|
|
|
121
120
|
}
|
|
122
121
|
})
|
|
123
122
|
|
|
124
|
-
watch(clicks, () => {
|
|
125
|
-
recalculateScroll();
|
|
126
|
-
})
|
|
127
123
|
|
|
128
124
|
|
|
129
125
|
</script>
|
|
@@ -105,66 +105,67 @@
|
|
|
105
105
|
transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
|
|
106
106
|
}"
|
|
107
107
|
>
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
<div
|
|
120
|
-
v-if="agentStore.availableModes.length > 1"
|
|
121
|
-
ref="modeMenu"
|
|
122
|
-
class="absolute bottom-2 left-4"
|
|
123
|
-
>
|
|
124
|
-
<button
|
|
125
|
-
aria-label="Select mode"
|
|
126
|
-
class="flex px-2 py-1 items-center text-sm justify-center
|
|
127
|
-
rounded-md bg-white text-lightListTableHeadingText
|
|
128
|
-
transition-colors duration-200 hover:bg-gray-100
|
|
129
|
-
dark:text-darkListTableHeadingText dark:bg-gray-700 dark:hover:bg-gray-800"
|
|
130
|
-
:class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
|
|
131
|
-
:disabled="agentStore.isResponseInProgress"
|
|
132
|
-
title="Select mode"
|
|
133
|
-
type="button"
|
|
134
|
-
@click="toggleModeMenu"
|
|
135
|
-
>
|
|
136
|
-
{{ agentStore.activeModeName }}
|
|
137
|
-
<IconAngleDownOutline
|
|
138
|
-
class="w-4 h-4 ml-1"
|
|
139
|
-
/>
|
|
140
|
-
</button>
|
|
141
|
-
|
|
108
|
+
<div class="w-full border rounded-lg pb-8">
|
|
109
|
+
<textarea
|
|
110
|
+
v-model="agentStore.userMessageInput"
|
|
111
|
+
ref="textInput"
|
|
112
|
+
@input="autoResize"
|
|
113
|
+
:class="[
|
|
114
|
+
'min-h-12 px-4 pt-4 w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
|
|
115
|
+
]"
|
|
116
|
+
:placeholder="agentStore.userMessagePlaceholder"
|
|
117
|
+
@keydown.enter.exact.prevent="sendMessage"
|
|
118
|
+
/>
|
|
142
119
|
<div
|
|
143
|
-
v-if="
|
|
144
|
-
|
|
120
|
+
v-if="agentStore.availableModes.length > 1"
|
|
121
|
+
ref="modeMenu"
|
|
122
|
+
class="absolute bottom-2 left-4"
|
|
145
123
|
>
|
|
146
124
|
<button
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
125
|
+
aria-label="Select mode"
|
|
126
|
+
class="flex px-2 py-1 items-center text-sm justify-center
|
|
127
|
+
rounded-md bg-white text-lightListTableHeadingText
|
|
128
|
+
transition-colors duration-200 hover:bg-gray-100
|
|
129
|
+
dark:text-darkListTableHeadingText dark:bg-gray-700 dark:hover:bg-gray-800"
|
|
130
|
+
:class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
|
|
131
|
+
:disabled="agentStore.isResponseInProgress"
|
|
132
|
+
title="Select mode"
|
|
151
133
|
type="button"
|
|
152
|
-
@click="
|
|
134
|
+
@click="toggleModeMenu"
|
|
153
135
|
>
|
|
154
|
-
{{
|
|
136
|
+
{{ agentStore.activeModeName }}
|
|
137
|
+
<IconAngleDownOutline
|
|
138
|
+
class="w-4 h-4 ml-1"
|
|
139
|
+
/>
|
|
155
140
|
</button>
|
|
141
|
+
|
|
142
|
+
<div
|
|
143
|
+
v-if="isModeMenuOpen"
|
|
144
|
+
class="absolute bottom-full left-0 mb-2 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"
|
|
145
|
+
>
|
|
146
|
+
<button
|
|
147
|
+
v-for="mode in agentStore.availableModes"
|
|
148
|
+
:key="mode.name"
|
|
149
|
+
class="block w-full px-3 py-2 text-left text-sm text-lightInputText transition-colors duration-150 hover:bg-gray-100 dark:text-darkInputText dark:hover:bg-gray-700"
|
|
150
|
+
:class="mode.name === agentStore.activeModeName ? 'bg-gray-100 dark:bg-gray-700' : ''"
|
|
151
|
+
type="button"
|
|
152
|
+
@click="selectMode(mode.name)"
|
|
153
|
+
>
|
|
154
|
+
{{ mode.name }}
|
|
155
|
+
</button>
|
|
156
|
+
</div>
|
|
156
157
|
</div>
|
|
158
|
+
<Button
|
|
159
|
+
class="absolute right-4 bottom-2 !p-0 h-9 w-9"
|
|
160
|
+
@click="sendMessage"
|
|
161
|
+
:disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
|
|
162
|
+
>
|
|
163
|
+
<IconArrowUpOutline
|
|
164
|
+
class="w-8 h-8 p-1
|
|
165
|
+
text-white"
|
|
166
|
+
/>
|
|
167
|
+
</Button>
|
|
157
168
|
</div>
|
|
158
|
-
<Button
|
|
159
|
-
class="absolute right-4 bottom-2 !p-0 h-9 w-9"
|
|
160
|
-
@click="sendMessage"
|
|
161
|
-
:disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
|
|
162
|
-
>
|
|
163
|
-
<IconArrowUpOutline
|
|
164
|
-
class="w-8 h-8 p-1
|
|
165
|
-
text-white"
|
|
166
|
-
/>
|
|
167
|
-
</Button>
|
|
168
169
|
</div>
|
|
169
170
|
</div>
|
|
170
171
|
</div>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
</template>
|
|
12
12
|
|
|
13
13
|
<script setup lang="ts">
|
|
14
|
-
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
|
14
|
+
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
|
|
15
15
|
import CustomScrollbar from 'custom-vue-scrollbar';
|
|
16
16
|
import 'custom-vue-scrollbar/dist/style.css';
|
|
17
17
|
import { useAgentStore } from './composables/useAgentStore';
|
|
@@ -50,7 +50,6 @@ function scrollToBottom(force = false): void {
|
|
|
50
50
|
if (!container) return
|
|
51
51
|
|
|
52
52
|
if (isUserScrolledUp.value && !force) return
|
|
53
|
-
|
|
54
53
|
container.scrollTo({
|
|
55
54
|
top: container.scrollHeight,
|
|
56
55
|
behavior: props.behavior
|
|
@@ -65,7 +64,7 @@ function hasScrollbar(): boolean {
|
|
|
65
64
|
}
|
|
66
65
|
|
|
67
66
|
|
|
68
|
-
function handleScroll(): void {
|
|
67
|
+
function handleScroll(detectScrollDown = true): void {
|
|
69
68
|
const container = containerRef.value.scrollEl
|
|
70
69
|
if (!container) return
|
|
71
70
|
|
|
@@ -80,12 +79,10 @@ function handleScroll(): void {
|
|
|
80
79
|
isUserScrolledUp.value = false
|
|
81
80
|
} else {
|
|
82
81
|
const isScrollingUp = scrollTop < lastScrollTop
|
|
83
|
-
const isScrollingDown = scrollTop > lastScrollTop
|
|
82
|
+
const isScrollingDown = detectScrollDown ? scrollTop > lastScrollTop : false
|
|
84
83
|
const isContentUnchanged = scrollHeight === lastScrollHeight
|
|
85
84
|
if ((isScrollingUp || isScrollingDown) && isContentUnchanged) {
|
|
86
85
|
isUserScrolledUp.value = true
|
|
87
|
-
} else if (!isNearBottom()) {
|
|
88
|
-
isUserScrolledUp.value = true
|
|
89
86
|
}
|
|
90
87
|
}
|
|
91
88
|
lastScrollTop = scrollTop
|
|
@@ -110,7 +107,6 @@ onMounted(() => {
|
|
|
110
107
|
}
|
|
111
108
|
|
|
112
109
|
lastScrollHeight = containerRef.value.scrollEl.scrollHeight
|
|
113
|
-
|
|
114
110
|
if (props.enabled && !isUserScrolledUp.value) {
|
|
115
111
|
scrollToBottom()
|
|
116
112
|
}
|
|
@@ -83,12 +83,11 @@ const showScrollToBottomButton = ref(false);
|
|
|
83
83
|
const innerScrollContainerRef = ref(null);
|
|
84
84
|
const agentStore = useAgentStore();
|
|
85
85
|
const agentTransitions = useAgentTransitions();
|
|
86
|
-
const clicks = ref(0);
|
|
87
86
|
const showScrollContainer = ref(true);
|
|
88
87
|
|
|
89
88
|
function recalculateScroll() {
|
|
90
89
|
if (scrollContainer.value) {
|
|
91
|
-
scrollContainer.value.handleScroll();
|
|
90
|
+
scrollContainer.value.handleScroll(false);
|
|
92
91
|
const isScrolledUp = scrollContainer.value.isUserScrolledUp();
|
|
93
92
|
showScrollToBottomButton.value = !!isScrolledUp;
|
|
94
93
|
}
|
|
@@ -121,9 +120,6 @@ watch(scrollContainer, () => {
|
|
|
121
120
|
}
|
|
122
121
|
})
|
|
123
122
|
|
|
124
|
-
watch(clicks, () => {
|
|
125
|
-
recalculateScroll();
|
|
126
|
-
})
|
|
127
123
|
|
|
128
124
|
|
|
129
125
|
</script>
|