@adminforth/agent 1.16.2 → 1.16.4

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 (10) hide show
  1. package/build.log +2 -2
  2. package/custom/SessionsHistory.vue +14 -7
  3. package/custom/ToolRenderer.vue +2 -2
  4. package/custom/ToolsGroup.vue +3 -3
  5. package/custom/composables/useAgentStore.ts +15 -1
  6. package/dist/custom/SessionsHistory.vue +14 -7
  7. package/dist/custom/ToolRenderer.vue +2 -2
  8. package/dist/custom/ToolsGroup.vue +3 -3
  9. package/dist/custom/composables/useAgentStore.ts +15 -1
  10. 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,526 bytes received 436 bytes 369,924.00 bytes/sec
35
- total size is 182,737 speedup is 0.99
34
+ sent 185,131 bytes received 436 bytes 371,134.00 bytes/sec
35
+ total size is 183,342 speedup is 0.99
package/custom/SessionsHistory.vue CHANGED
@@ -6,10 +6,16 @@
6
6
  "
7
7
  >
8
8
  <h3 :class="h3Style">{{ $t('Chat history') }}</h3>
9
- <Button @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();" :disabled="agentStore.isResponseInProgress" class="w-[360px] mx-4 my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200">
10
- <IconPlusOutline class="w-5 h-5" />
11
- {{ $t('New chat') }}
12
- </Button>
9
+ <div class="w-full flex items-center justify-center">
10
+ <Button
11
+ @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();"
12
+ :disabled="agentStore.isResponseInProgress"
13
+ class="w-[90%] my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200"
14
+ >
15
+ <IconPlusOutline class="w-5 h-5" />
16
+ {{ $t('New chat') }}
17
+ </Button>
18
+ </div>
13
19
  <div class="w-full border-b border-gray-200 dark:border-gray-700"/>
14
20
  <div class="absolute w-full h-full flex flex-col items-center justify-center bg-gray-100/50 dark:bg-gray-700/50 z-10" v-if="agentStore.isResponseInProgress">
15
21
  <Spinner class="w-8 h-8" v-if="agentStore.isResponseInProgress" />
@@ -23,11 +29,12 @@
23
29
  <button
24
30
  v-for="session in group.sessions"
25
31
  :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"
32
+ 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
33
  :class="{
28
34
  '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
- }"
35
+ 'cursor-default opacity-50 pointer-events-none': agentStore.isResponseInProgress,
36
+ 'pl-8': agentStore.isFullScreen
37
+ }"
31
38
  @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false);"
32
39
  :disabled="agentStore.isResponseInProgress"
33
40
  >
package/custom/ToolRenderer.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div
3
- class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl p-2 cursor-pointer text-lightListTableHeadingText dark:text-darkListTableHeadingText hover:opacity-75"
3
+ class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl px-2 cursor-pointer text-lightListTableHeadingText dark:text-darkListTableHeadingText hover:opacity-75"
4
4
  @click="isInputOutputExpanded = !isInputOutputExpanded"
5
5
  >
6
6
  <div class="flex items-center gap-3">
@@ -25,7 +25,7 @@
25
25
  />
26
26
  </div>
27
27
  <transition name="expand">
28
- <div v-show="isInputOutputExpanded" class="max-h-72 space-y-3 overflow-y-auto pr-1">
28
+ <div v-if="isInputOutputExpanded" v-show="isInputOutputExpanded" class="max-h-72 space-y-3 overflow-y-auto pr-1">
29
29
  <section
30
30
  v-for="section in toolSections"
31
31
  :key="section.label"
package/custom/ToolsGroup.vue CHANGED
@@ -1,8 +1,8 @@
1
1
  <template>
2
2
  <template v-for="group in props.toolGroup" :key="group.title">
3
3
  <div v-if="group.groupedTools.length > 1" class="flex flex-col">
4
- <div class="flex items-center gap-2 p-2 m-2 cursor-pointer hover:opacity-75 break-all font-mono text-sm leading-5 text-lightListTableHeadingText dark:text-darkListTableHeadingText" @click="toggleGroup(group.title)">
5
- <IconMinusOutline class="w-6 h-6 p-1"/>
4
+ <div class="flex items-center gap-2 px-2 m-2 cursor-pointer hover:opacity-75 break-all font-mono text-sm leading-5 text-lightListTableHeadingText dark:text-darkListTableHeadingText" @click="toggleGroup(group.title)">
5
+ <IconCheckOutline class="w-6 h-6 p-1"/>
6
6
  {{ group.title }} {{ 'x' + group.groupedTools.length }}
7
7
  <IconAngleDownOutline
8
8
  class="transition-transform duration-200 hover:scale-105 hover:opacity-75"
@@ -24,7 +24,7 @@
24
24
  import ToolRenderer from './ToolRenderer.vue';
25
25
  import type { IPart } from './types';
26
26
  import { ref } from 'vue';
27
- import { IconAngleDownOutline, IconMinusOutline } from '@iconify-prerendered/vue-flowbite';
27
+ import { IconAngleDownOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
28
28
 
29
29
  const props = defineProps<{
30
30
  toolGroup: {
package/custom/composables/useAgentStore.ts CHANGED
@@ -7,6 +7,7 @@ import { Chat } from '../chat';
7
7
  import { DefaultChatTransport } from 'ai';
8
8
  import { useCoreStore } from '@/stores/core';
9
9
  import { useAgentTransitions } from './useAgentTransitions';
10
+ import { useWindowSize } from '@vueuse/core';
10
11
 
11
12
  type AgentMode = {
12
13
  name: string;
@@ -48,6 +49,7 @@ export const useAgentStore = defineStore('agent', () => {
48
49
  const availableModes = ref<AgentMode[]>([]);
49
50
  const activeModeName = ref<string | null>(null);
50
51
  const hasTypedMessageInPageSession = ref(false);
52
+ const { width: windowWidth } = useWindowSize();
51
53
  let placeholderAnimationTimer: ReturnType<typeof setTimeout> | null = null;
52
54
 
53
55
  function setLocalStorageItem(key: string, value: string) {
@@ -56,6 +58,11 @@ export const useAgentStore = defineStore('agent', () => {
56
58
  function getLocalStorageItem(key: string) {
57
59
  return window.localStorage.getItem(`${coreStore.config.brandName || 'adminforth'}-${key}`);
58
60
  }
61
+ watch(windowWidth, (newWidth: number) => {
62
+ if (isFullScreen.value) {
63
+ setChatWidth(newWidth, false);
64
+ }
65
+ })
59
66
  watch(isTeleportedToBody, (newVal: boolean) => {
60
67
  setLocalStorageItem('isTeleportedToBody', newVal ? 'true' : 'false');
61
68
  })
@@ -85,7 +92,14 @@ export const useAgentStore = defineStore('agent', () => {
85
92
  if (chatWidthBeforeFullScreen) {
86
93
  chatWidth.value = chatWidthBeforeFullScreen;
87
94
  } else {
88
- chatWidth.value = parseInt(getLocalStorageItem('chatWidth') || DEFAULT_CHAT_WIDTH.toString(), 10);
95
+ const savedChatWidth = parseInt(getLocalStorageItem('chatWidth') || '0', 10);
96
+ if (savedChatWidth) {
97
+ if (savedChatWidth > MAX_WIDTH || savedChatWidth < MIN_WIDTH) {
98
+ chatWidth.value = DEFAULT_CHAT_WIDTH;
99
+ } else {
100
+ chatWidth.value = savedChatWidth;
101
+ }
102
+ }
89
103
  }
90
104
  isTeleportedToBody.value = getLocalStorageItem('isTeleportedToBody') === 'true';
91
105
  lastSessionId.value = getLocalStorageItem('lastSessionId');
package/dist/custom/SessionsHistory.vue CHANGED
@@ -6,10 +6,16 @@
6
6
  "
7
7
  >
8
8
  <h3 :class="h3Style">{{ $t('Chat history') }}</h3>
9
- <Button @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();" :disabled="agentStore.isResponseInProgress" class="w-[360px] mx-4 my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200">
10
- <IconPlusOutline class="w-5 h-5" />
11
- {{ $t('New chat') }}
12
- </Button>
9
+ <div class="w-full flex items-center justify-center">
10
+ <Button
11
+ @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();"
12
+ :disabled="agentStore.isResponseInProgress"
13
+ class="w-[90%] my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200"
14
+ >
15
+ <IconPlusOutline class="w-5 h-5" />
16
+ {{ $t('New chat') }}
17
+ </Button>
18
+ </div>
13
19
  <div class="w-full border-b border-gray-200 dark:border-gray-700"/>
14
20
  <div class="absolute w-full h-full flex flex-col items-center justify-center bg-gray-100/50 dark:bg-gray-700/50 z-10" v-if="agentStore.isResponseInProgress">
15
21
  <Spinner class="w-8 h-8" v-if="agentStore.isResponseInProgress" />
@@ -23,11 +29,12 @@
23
29
  <button
24
30
  v-for="session in group.sessions"
25
31
  :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"
32
+ 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
33
  :class="{
28
34
  '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
- }"
35
+ 'cursor-default opacity-50 pointer-events-none': agentStore.isResponseInProgress,
36
+ 'pl-8': agentStore.isFullScreen
37
+ }"
31
38
  @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false);"
32
39
  :disabled="agentStore.isResponseInProgress"
33
40
  >
package/dist/custom/ToolRenderer.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div
3
- class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl p-2 cursor-pointer text-lightListTableHeadingText dark:text-darkListTableHeadingText hover:opacity-75"
3
+ class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl px-2 cursor-pointer text-lightListTableHeadingText dark:text-darkListTableHeadingText hover:opacity-75"
4
4
  @click="isInputOutputExpanded = !isInputOutputExpanded"
5
5
  >
6
6
  <div class="flex items-center gap-3">
@@ -25,7 +25,7 @@
25
25
  />
26
26
  </div>
27
27
  <transition name="expand">
28
- <div v-show="isInputOutputExpanded" class="max-h-72 space-y-3 overflow-y-auto pr-1">
28
+ <div v-if="isInputOutputExpanded" v-show="isInputOutputExpanded" class="max-h-72 space-y-3 overflow-y-auto pr-1">
29
29
  <section
30
30
  v-for="section in toolSections"
31
31
  :key="section.label"
package/dist/custom/ToolsGroup.vue CHANGED
@@ -1,8 +1,8 @@
1
1
  <template>
2
2
  <template v-for="group in props.toolGroup" :key="group.title">
3
3
  <div v-if="group.groupedTools.length > 1" class="flex flex-col">
4
- <div class="flex items-center gap-2 p-2 m-2 cursor-pointer hover:opacity-75 break-all font-mono text-sm leading-5 text-lightListTableHeadingText dark:text-darkListTableHeadingText" @click="toggleGroup(group.title)">
5
- <IconMinusOutline class="w-6 h-6 p-1"/>
4
+ <div class="flex items-center gap-2 px-2 m-2 cursor-pointer hover:opacity-75 break-all font-mono text-sm leading-5 text-lightListTableHeadingText dark:text-darkListTableHeadingText" @click="toggleGroup(group.title)">
5
+ <IconCheckOutline class="w-6 h-6 p-1"/>
6
6
  {{ group.title }} {{ 'x' + group.groupedTools.length }}
7
7
  <IconAngleDownOutline
8
8
  class="transition-transform duration-200 hover:scale-105 hover:opacity-75"
@@ -24,7 +24,7 @@
24
24
  import ToolRenderer from './ToolRenderer.vue';
25
25
  import type { IPart } from './types';
26
26
  import { ref } from 'vue';
27
- import { IconAngleDownOutline, IconMinusOutline } from '@iconify-prerendered/vue-flowbite';
27
+ import { IconAngleDownOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
28
28
 
29
29
  const props = defineProps<{
30
30
  toolGroup: {
package/dist/custom/composables/useAgentStore.ts CHANGED
@@ -7,6 +7,7 @@ import { Chat } from '../chat';
7
7
  import { DefaultChatTransport } from 'ai';
8
8
  import { useCoreStore } from '@/stores/core';
9
9
  import { useAgentTransitions } from './useAgentTransitions';
10
+ import { useWindowSize } from '@vueuse/core';
10
11
 
11
12
  type AgentMode = {
12
13
  name: string;
@@ -48,6 +49,7 @@ export const useAgentStore = defineStore('agent', () => {
48
49
  const availableModes = ref<AgentMode[]>([]);
49
50
  const activeModeName = ref<string | null>(null);
50
51
  const hasTypedMessageInPageSession = ref(false);
52
+ const { width: windowWidth } = useWindowSize();
51
53
  let placeholderAnimationTimer: ReturnType<typeof setTimeout> | null = null;
52
54
 
53
55
  function setLocalStorageItem(key: string, value: string) {
@@ -56,6 +58,11 @@ export const useAgentStore = defineStore('agent', () => {
56
58
  function getLocalStorageItem(key: string) {
57
59
  return window.localStorage.getItem(`${coreStore.config.brandName || 'adminforth'}-${key}`);
58
60
  }
61
+ watch(windowWidth, (newWidth: number) => {
62
+ if (isFullScreen.value) {
63
+ setChatWidth(newWidth, false);
64
+ }
65
+ })
59
66
  watch(isTeleportedToBody, (newVal: boolean) => {
60
67
  setLocalStorageItem('isTeleportedToBody', newVal ? 'true' : 'false');
61
68
  })
@@ -85,7 +92,14 @@ export const useAgentStore = defineStore('agent', () => {
85
92
  if (chatWidthBeforeFullScreen) {
86
93
  chatWidth.value = chatWidthBeforeFullScreen;
87
94
  } else {
88
- chatWidth.value = parseInt(getLocalStorageItem('chatWidth') || DEFAULT_CHAT_WIDTH.toString(), 10);
95
+ const savedChatWidth = parseInt(getLocalStorageItem('chatWidth') || '0', 10);
96
+ if (savedChatWidth) {
97
+ if (savedChatWidth > MAX_WIDTH || savedChatWidth < MIN_WIDTH) {
98
+ chatWidth.value = DEFAULT_CHAT_WIDTH;
99
+ } else {
100
+ chatWidth.value = savedChatWidth;
101
+ }
102
+ }
89
103
  }
90
104
  isTeleportedToBody.value = getLocalStorageItem('isTeleportedToBody') === 'true';
91
105
  lastSessionId.value = getLocalStorageItem('lastSessionId');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adminforth/agent",
3
- "version": "1.16.2",
3
+ "version": "1.16.4",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "type": "module",