@adminforth/agent 1.16.0 → 1.16.1

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 +12 -9
  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 +12 -9
  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,388 bytes received 436 bytes 369,648.00 bytes/sec
35
+ total size is 182,599 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,7 +125,7 @@
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 h-9 w-9 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"
125
129
  :class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
126
130
  :disabled="agentStore.isResponseInProgress"
127
131
  title="Select mode"
@@ -148,7 +152,7 @@
148
152
  </div>
149
153
  </div>
150
154
  <Button
151
- class="absolute right-4 bottom-2 !p-0 h-[34px] w-[34px]"
155
+ class="absolute right-4 bottom-2 !p-0 h-9 w-9"
152
156
  @click="sendMessage"
153
157
  :disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
154
158
  >
@@ -193,7 +197,6 @@ const agentStore = useAgentStore();
193
197
  const agentTransitions = useAgentTransitions();
194
198
  const coreStore = useCoreStore();
195
199
  const isModeMenuOpen = ref(false);
196
-
197
200
  let startX = 0
198
201
  let startWidth = 0
199
202
 
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,7 +125,7 @@
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 h-9 w-9 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"
125
129
  :class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
126
130
  :disabled="agentStore.isResponseInProgress"
127
131
  title="Select mode"
@@ -148,7 +152,7 @@
148
152
  </div>
149
153
  </div>
150
154
  <Button
151
- class="absolute right-4 bottom-2 !p-0 h-[34px] w-[34px]"
155
+ class="absolute right-4 bottom-2 !p-0 h-9 w-9"
152
156
  @click="sendMessage"
153
157
  :disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
154
158
  >
@@ -193,7 +197,6 @@ const agentStore = useAgentStore();
193
197
  const agentTransitions = useAgentTransitions();
194
198
  const coreStore = useCoreStore();
195
199
  const isModeMenuOpen = ref(false);
196
-
197
200
  let startX = 0
198
201
  let startWidth = 0
199
202
 
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.1",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "type": "module",