@adminforth/agent 1.16.0 → 1.16.2

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.
Files changed (12) hide show
  1. package/build.log +2 -2
  2. package/custom/ChatSurface.vue +20 -11
  3. package/custom/ConversationArea.vue +13 -11
  4. package/custom/SessionsHistory.vue +6 -3
  5. package/custom/composables/useAgentTransitions.ts +1 -1
  6. package/dist/custom/ChatSurface.vue +20 -11
  7. package/dist/custom/ConversationArea.vue +13 -11
  8. package/dist/custom/SessionsHistory.vue +6 -3
  9. package/dist/custom/composables/useAgentTransitions.ts +1 -1
  10. package/dist/index.js +1 -1
  11. package/index.ts +1 -1
  12. package/package.json +1 -1
package/build.log CHANGED
@@ -31,5 +31,5 @@ custom/skills/fetch_data/SKILL.md
31
31
  custom/skills/mutate_data/
32
32
  custom/skills/mutate_data/SKILL.md
33
33
 
34
- sent 184,204 bytes received 436 bytes 369,280.00 bytes/sec
35
- total size is 182,411 speedup is 0.99
34
+ sent 184,526 bytes received 436 bytes 369,924.00 bytes/sec
35
+ total size is 182,737 speedup is 0.99
package/custom/ChatSurface.vue CHANGED
@@ -33,11 +33,13 @@
33
33
 
34
34
  <div
35
35
  class="w-full h-full flex flex-col"
36
- :class="{ 'ml-4': agentStore.isFullScreen }"
37
36
  >
38
- <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
37
+ <div
38
+ class="flex items-center justify-between h-14 border-b border-gray-200 dark:border-gray-700"
39
+ :class="{ 'pl-4': agentStore.isFullScreen }"
40
+ >
39
41
  <div
40
- class="flex items-center h-[55px]"
42
+ class="flex items-center"
41
43
  >
42
44
  <IconBarsOutline
43
45
  class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
@@ -99,9 +101,11 @@
99
101
  />
100
102
 
101
103
  <div
102
- class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative"
103
- :class="agentStore.isFullScreen ? 'mx-auto' : ''"
104
- :style="{ maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%' }"
104
+ class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative translate-x-[-50%] left-1/2"
105
+ :style="{
106
+ maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
107
+ transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
108
+ }"
105
109
  >
106
110
  <textarea
107
111
  v-model="agentStore.userMessageInput"
@@ -121,14 +125,20 @@
121
125
  >
122
126
  <button
123
127
  aria-label="Select mode"
124
- class="flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 bg-white text-lightNavbarIcons transition-colors duration-200 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-darkNavbarIcons dark:hover:bg-gray-700"
128
+ class="flex px-2 py-1 items-center text-sm justify-center
129
+ rounded-md bg-white text-lightListTableHeadingText
130
+ transition-colors duration-200 hover:bg-gray-100
131
+ dark:text-darkListTableHeadingText dark:bg-gray-700 dark:hover:bg-gray-800"
125
132
  :class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
126
133
  :disabled="agentStore.isResponseInProgress"
127
134
  title="Select mode"
128
135
  type="button"
129
136
  @click="toggleModeMenu"
130
137
  >
131
- <IconBrainOutline class="h-4 w-4" />
138
+ {{ agentStore.activeModeName }}
139
+ <IconAngleDownOutline
140
+ class="w-4 h-4 ml-1"
141
+ />
132
142
  </button>
133
143
 
134
144
  <div
@@ -148,7 +158,7 @@
148
158
  </div>
149
159
  </div>
150
160
  <Button
151
- class="absolute right-4 bottom-2 !p-0 h-[34px] w-[34px]"
161
+ class="absolute right-4 bottom-2 !p-0 h-9 w-9"
152
162
  @click="sendMessage"
153
163
  :disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
154
164
  >
@@ -167,7 +177,7 @@
167
177
 
168
178
  <script setup lang="ts">
169
179
  import { IconChatBubbleLeft20Solid, IconSparklesSolid, IconArrowsPointingOut, IconArrowsPointingIn } from '@iconify-prerendered/vue-heroicons';
170
- import { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconBrainOutline } from '@iconify-prerendered/vue-flowbite';
180
+ import { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
171
181
  import { useTemplateRef, onMounted, ref,computed } from 'vue';
172
182
  import { onClickOutside } from '@vueuse/core'
173
183
  import ConversationArea from './ConversationArea.vue';
@@ -193,7 +203,6 @@ const agentStore = useAgentStore();
193
203
  const agentTransitions = useAgentTransitions();
194
204
  const coreStore = useCoreStore();
195
205
  const isModeMenuOpen = ref(false);
196
-
197
206
  let startX = 0
198
207
  let startWidth = 0
199
208
 
package/custom/ConversationArea.vue CHANGED
@@ -1,5 +1,12 @@
1
1
  <template>
2
-
2
+ <button @click="scrollContainer.scrollToBottom()">
3
+ <IconArrowDownOutline
4
+ class="absolute z-10 bottom-32 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in"
5
+ :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
6
+ :disabled="!showScrollToBottomButton"
7
+ />
8
+ </button>
9
+
3
10
  <SessionsHistory
4
11
  :class="agentStore.isSessionHistoryOpen ? 'translate-x-0' : '-translate-x-full'"
5
12
  />
@@ -12,24 +19,19 @@
12
19
  </div>
13
20
  <AutoScrollContainer
14
21
  :enabled="!showScrollToBottomButton"
15
- class="relative flex flex-col overflow-y-auto"
22
+ class="relative flex flex-col overflow-y-auto translate-x-[-50%] left-1/2"
16
23
  ref="scrollContainer"
17
24
  :threshold="10"
18
25
  behavior="smooth"
19
- :class="agentStore.isFullScreen ? 'mx-auto' : ''"
20
26
  :style="{
21
27
  maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
22
- transition: `max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
28
+ transition: `
29
+ max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out,
30
+ transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out
31
+ `
23
32
  }"
24
33
  >
25
34
 
26
- <button @click="scrollContainer.scrollToBottom()">
27
- <IconArrowDownOutline
28
- class="fixed bottom-32 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in"
29
- :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
30
- :disabled="!showScrollToBottomButton"
31
- />
32
- </button>
33
35
  <div
34
36
  v-for="message in props.messages" :key="message.id"
35
37
  class="flex flex-col w-full"
package/custom/SessionsHistory.vue CHANGED
@@ -23,12 +23,15 @@
23
23
  <button
24
24
  v-for="session in group.sessions"
25
25
  :key="session.sessionId"
26
- class="flex items-center justify-between w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-gray-800 dark:text-gray-200 overflow-hidden text-nowrap"
27
- :class="{'bg-lightPrimary/20 hover:bg-lightPrimary/20 dark:bg-darkPrimary/20 dark:hover:bg-darkPrimary/20': agentStore.activeSessionId === session.sessionId, 'cursor-default opacity-50 pointer-events-none': agentStore.isResponseInProgress}"
26
+ class="flex items-center justify-between w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-gray-800 dark:text-gray-200"
27
+ :class="{
28
+ 'bg-lightPrimary/20 hover:bg-lightPrimary/20 dark:bg-darkPrimary/20 dark:hover:bg-darkPrimary/20': agentStore.activeSessionId === session.sessionId,
29
+ 'cursor-default opacity-50 pointer-events-none': agentStore.isResponseInProgress
30
+ }"
28
31
  @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false);"
29
32
  :disabled="agentStore.isResponseInProgress"
30
33
  >
31
- {{ session.title || session.sessionId }}
34
+ <p class="truncate">{{ session.title || session.sessionId }}</p>
32
35
  <div @click.stop="agentStore.deleteSession(session.sessionId)" class="w-7 h-7 p-1 hover:scale-110 hover:bg-gray-200 dark:hover:bg-gray-500 flex items-center justify-center rounded">
33
36
  <IconPlusOutline class="rotate-45 w-6 h-6"/>
34
37
  </div>
package/custom/composables/useAgentTransitions.ts CHANGED
@@ -4,7 +4,7 @@ import { useAgentStore } from './useAgentStore';
4
4
 
5
5
 
6
6
  export const useAgentTransitions = defineStore('agentTransitions', () => {
7
- const TRANSITION_DURATION = 200;
7
+ const TRANSITION_DURATION = 300;
8
8
 
9
9
  const agentStore = useAgentStore();
10
10
  const appRoot = ref<HTMLElement | null>(null);
package/dist/custom/ChatSurface.vue CHANGED
@@ -33,11 +33,13 @@
33
33
 
34
34
  <div
35
35
  class="w-full h-full flex flex-col"
36
- :class="{ 'ml-4': agentStore.isFullScreen }"
37
36
  >
38
- <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
37
+ <div
38
+ class="flex items-center justify-between h-14 border-b border-gray-200 dark:border-gray-700"
39
+ :class="{ 'pl-4': agentStore.isFullScreen }"
40
+ >
39
41
  <div
40
- class="flex items-center h-[55px]"
42
+ class="flex items-center"
41
43
  >
42
44
  <IconBarsOutline
43
45
  class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
@@ -99,9 +101,11 @@
99
101
  />
100
102
 
101
103
  <div
102
- class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative"
103
- :class="agentStore.isFullScreen ? 'mx-auto' : ''"
104
- :style="{ maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%' }"
104
+ class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative translate-x-[-50%] left-1/2"
105
+ :style="{
106
+ maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
107
+ transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
108
+ }"
105
109
  >
106
110
  <textarea
107
111
  v-model="agentStore.userMessageInput"
@@ -121,14 +125,20 @@
121
125
  >
122
126
  <button
123
127
  aria-label="Select mode"
124
- class="flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 bg-white text-lightNavbarIcons transition-colors duration-200 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-darkNavbarIcons dark:hover:bg-gray-700"
128
+ class="flex px-2 py-1 items-center text-sm justify-center
129
+ rounded-md bg-white text-lightListTableHeadingText
130
+ transition-colors duration-200 hover:bg-gray-100
131
+ dark:text-darkListTableHeadingText dark:bg-gray-700 dark:hover:bg-gray-800"
125
132
  :class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
126
133
  :disabled="agentStore.isResponseInProgress"
127
134
  title="Select mode"
128
135
  type="button"
129
136
  @click="toggleModeMenu"
130
137
  >
131
- <IconBrainOutline class="h-4 w-4" />
138
+ {{ agentStore.activeModeName }}
139
+ <IconAngleDownOutline
140
+ class="w-4 h-4 ml-1"
141
+ />
132
142
  </button>
133
143
 
134
144
  <div
@@ -148,7 +158,7 @@
148
158
  </div>
149
159
  </div>
150
160
  <Button
151
- class="absolute right-4 bottom-2 !p-0 h-[34px] w-[34px]"
161
+ class="absolute right-4 bottom-2 !p-0 h-9 w-9"
152
162
  @click="sendMessage"
153
163
  :disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
154
164
  >
@@ -167,7 +177,7 @@
167
177
 
168
178
  <script setup lang="ts">
169
179
  import { IconChatBubbleLeft20Solid, IconSparklesSolid, IconArrowsPointingOut, IconArrowsPointingIn } from '@iconify-prerendered/vue-heroicons';
170
- import { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconBrainOutline } from '@iconify-prerendered/vue-flowbite';
180
+ import { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
171
181
  import { useTemplateRef, onMounted, ref,computed } from 'vue';
172
182
  import { onClickOutside } from '@vueuse/core'
173
183
  import ConversationArea from './ConversationArea.vue';
@@ -193,7 +203,6 @@ const agentStore = useAgentStore();
193
203
  const agentTransitions = useAgentTransitions();
194
204
  const coreStore = useCoreStore();
195
205
  const isModeMenuOpen = ref(false);
196
-
197
206
  let startX = 0
198
207
  let startWidth = 0
199
208
 
package/dist/custom/ConversationArea.vue CHANGED
@@ -1,5 +1,12 @@
1
1
  <template>
2
-
2
+ <button @click="scrollContainer.scrollToBottom()">
3
+ <IconArrowDownOutline
4
+ class="absolute z-10 bottom-32 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in"
5
+ :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
6
+ :disabled="!showScrollToBottomButton"
7
+ />
8
+ </button>
9
+
3
10
  <SessionsHistory
4
11
  :class="agentStore.isSessionHistoryOpen ? 'translate-x-0' : '-translate-x-full'"
5
12
  />
@@ -12,24 +19,19 @@
12
19
  </div>
13
20
  <AutoScrollContainer
14
21
  :enabled="!showScrollToBottomButton"
15
- class="relative flex flex-col overflow-y-auto"
22
+ class="relative flex flex-col overflow-y-auto translate-x-[-50%] left-1/2"
16
23
  ref="scrollContainer"
17
24
  :threshold="10"
18
25
  behavior="smooth"
19
- :class="agentStore.isFullScreen ? 'mx-auto' : ''"
20
26
  :style="{
21
27
  maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
22
- transition: `max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
28
+ transition: `
29
+ max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out,
30
+ transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out
31
+ `
23
32
  }"
24
33
  >
25
34
 
26
- <button @click="scrollContainer.scrollToBottom()">
27
- <IconArrowDownOutline
28
- class="fixed bottom-32 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in"
29
- :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
30
- :disabled="!showScrollToBottomButton"
31
- />
32
- </button>
33
35
  <div
34
36
  v-for="message in props.messages" :key="message.id"
35
37
  class="flex flex-col w-full"
package/dist/custom/SessionsHistory.vue CHANGED
@@ -23,12 +23,15 @@
23
23
  <button
24
24
  v-for="session in group.sessions"
25
25
  :key="session.sessionId"
26
- class="flex items-center justify-between w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-gray-800 dark:text-gray-200 overflow-hidden text-nowrap"
27
- :class="{'bg-lightPrimary/20 hover:bg-lightPrimary/20 dark:bg-darkPrimary/20 dark:hover:bg-darkPrimary/20': agentStore.activeSessionId === session.sessionId, 'cursor-default opacity-50 pointer-events-none': agentStore.isResponseInProgress}"
26
+ class="flex items-center justify-between w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-gray-800 dark:text-gray-200"
27
+ :class="{
28
+ 'bg-lightPrimary/20 hover:bg-lightPrimary/20 dark:bg-darkPrimary/20 dark:hover:bg-darkPrimary/20': agentStore.activeSessionId === session.sessionId,
29
+ 'cursor-default opacity-50 pointer-events-none': agentStore.isResponseInProgress
30
+ }"
28
31
  @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false);"
29
32
  :disabled="agentStore.isResponseInProgress"
30
33
  >
31
- {{ session.title || session.sessionId }}
34
+ <p class="truncate">{{ session.title || session.sessionId }}</p>
32
35
  <div @click.stop="agentStore.deleteSession(session.sessionId)" class="w-7 h-7 p-1 hover:scale-110 hover:bg-gray-200 dark:hover:bg-gray-500 flex items-center justify-center rounded">
33
36
  <IconPlusOutline class="rotate-45 w-6 h-6"/>
34
37
  </div>
package/dist/custom/composables/useAgentTransitions.ts CHANGED
@@ -4,7 +4,7 @@ import { useAgentStore } from './useAgentStore';
4
4
 
5
5
 
6
6
  export const useAgentTransitions = defineStore('agentTransitions', () => {
7
- const TRANSITION_DURATION = 200;
7
+ const TRANSITION_DURATION = 300;
8
8
 
9
9
  const agentStore = useAgentStore();
10
10
  const appRoot = ref<HTMLElement | null>(null);
package/dist/index.js CHANGED
@@ -407,7 +407,7 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
407
407
  handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, adminUser }) {
408
408
  const triggerMessage = body.triggerMessage;
409
409
  const userId = adminUser.pk;
410
- const title = triggerMessage ? (triggerMessage.length > 40 ? triggerMessage.slice(0, 40) + '...' : triggerMessage) : 'New Session';
410
+ const title = triggerMessage ? (triggerMessage.length > 40 ? triggerMessage.slice(0, 40) : triggerMessage) : 'New Session';
411
411
  const newSession = {
412
412
  [this.pluginOptions.sessionResource.idField]: randomUUID(),
413
413
  [this.pluginOptions.sessionResource.titleField]: title,
package/index.ts CHANGED
@@ -447,7 +447,7 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
447
447
  handler: async ({body, adminUser }) => {
448
448
  const triggerMessage = body.triggerMessage;
449
449
  const userId = adminUser.pk;
450
- const title = triggerMessage ? (triggerMessage.length > 40 ? triggerMessage.slice(0, 40) + '...' : triggerMessage) : 'New Session';
450
+ const title = triggerMessage ? (triggerMessage.length > 40 ? triggerMessage.slice(0, 40) : triggerMessage) : 'New Session';
451
451
  const newSession = {
452
452
  [this.pluginOptions.sessionResource.idField]: randomUUID(),
453
453
  [this.pluginOptions.sessionResource.titleField]: title,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adminforth/agent",
3
- "version": "1.16.0",
3
+ "version": "1.16.2",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "type": "module",