@elizaos/client 1.5.5-alpha.10

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 (209) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +350 -0
  3. package/dist/assets/empty-module-CLMscLYw.js +1 -0
  4. package/dist/assets/main-BBZ_3lkn.css +5999 -0
  5. package/dist/assets/main-C5zNUkXH.js +7 -0
  6. package/dist/assets/main-Dz64ENQg.js +614 -0
  7. package/dist/assets/react-vendor-DM5m98rr.js +545 -0
  8. package/dist/assets/ui-vendor-BQCqNqg0.js +1 -0
  9. package/dist/elizaos-avatar.png +0 -0
  10. package/dist/elizaos-icon.png +0 -0
  11. package/dist/elizaos-logo-light.png +0 -0
  12. package/dist/elizaos.webp +0 -0
  13. package/dist/favicon.ico +0 -0
  14. package/dist/images/agents/agent1.png +0 -0
  15. package/dist/images/agents/agent2.png +0 -0
  16. package/dist/images/agents/agent3.png +0 -0
  17. package/dist/images/agents/agent4.png +0 -0
  18. package/dist/images/agents/agent5.png +0 -0
  19. package/dist/index.html +14 -0
  20. package/index.html +24 -0
  21. package/package.json +159 -0
  22. package/postcss.config.js +3 -0
  23. package/public/elizaos-avatar.png +0 -0
  24. package/public/elizaos-icon.png +0 -0
  25. package/public/elizaos-logo-light.png +0 -0
  26. package/public/elizaos.webp +0 -0
  27. package/public/favicon.ico +0 -0
  28. package/public/images/agents/agent1.png +0 -0
  29. package/public/images/agents/agent2.png +0 -0
  30. package/public/images/agents/agent3.png +0 -0
  31. package/public/images/agents/agent4.png +0 -0
  32. package/public/images/agents/agent5.png +0 -0
  33. package/src/App.tsx +222 -0
  34. package/src/components/AgentDetailsPanel.tsx +147 -0
  35. package/src/components/ChatInputArea.tsx +196 -0
  36. package/src/components/ChatMessageListComponent.tsx +139 -0
  37. package/src/components/actionTool.tsx +186 -0
  38. package/src/components/add-agent-card.tsx +77 -0
  39. package/src/components/agent-action-viewer.tsx +816 -0
  40. package/src/components/agent-avatar-stack.tsx +121 -0
  41. package/src/components/agent-card.cy.tsx +259 -0
  42. package/src/components/agent-card.tsx +177 -0
  43. package/src/components/agent-creator.tsx +142 -0
  44. package/src/components/agent-log-viewer.tsx +645 -0
  45. package/src/components/agent-memory-edit-overlay.tsx +461 -0
  46. package/src/components/agent-memory-viewer.tsx +504 -0
  47. package/src/components/agent-settings.tsx +270 -0
  48. package/src/components/agent-sidebar.tsx +178 -0
  49. package/src/components/api-key-dialog.tsx +113 -0
  50. package/src/components/app-sidebar.tsx +685 -0
  51. package/src/components/array-input.tsx +116 -0
  52. package/src/components/audio-recorder.tsx +292 -0
  53. package/src/components/avatar-panel.tsx +141 -0
  54. package/src/components/character-form.tsx +1138 -0
  55. package/src/components/chat.tsx +1813 -0
  56. package/src/components/combobox.tsx +187 -0
  57. package/src/components/confirmation-dialog.tsx +59 -0
  58. package/src/components/connection-error-banner.tsx +101 -0
  59. package/src/components/connection-status.cy.tsx +73 -0
  60. package/src/components/connection-status.tsx +155 -0
  61. package/src/components/copy-button.tsx +35 -0
  62. package/src/components/delete-button.tsx +24 -0
  63. package/src/components/env-settings.tsx +261 -0
  64. package/src/components/group-card.tsx +160 -0
  65. package/src/components/group-panel.tsx +543 -0
  66. package/src/components/input-copy.tsx +21 -0
  67. package/src/components/logs-page.tsx +41 -0
  68. package/src/components/media-content.tsx +385 -0
  69. package/src/components/memory-graph.tsx +170 -0
  70. package/src/components/missing-secrets-dialog.tsx +72 -0
  71. package/src/components/onboarding-tour.tsx +247 -0
  72. package/src/components/page-title.tsx +8 -0
  73. package/src/components/plugins-panel.tsx +383 -0
  74. package/src/components/profile-card.tsx +66 -0
  75. package/src/components/profile-overlay.tsx +283 -0
  76. package/src/components/retry-button.tsx +28 -0
  77. package/src/components/secret-panel.tsx +1505 -0
  78. package/src/components/server-management.tsx +264 -0
  79. package/src/components/split-button.tsx +148 -0
  80. package/src/components/stop-agent-button.tsx +99 -0
  81. package/src/components/ui/alert-dialog.cy.tsx +333 -0
  82. package/src/components/ui/alert-dialog.tsx +115 -0
  83. package/src/components/ui/alert.tsx +49 -0
  84. package/src/components/ui/avatar.cy.tsx +180 -0
  85. package/src/components/ui/avatar.tsx +57 -0
  86. package/src/components/ui/badge.cy.tsx +146 -0
  87. package/src/components/ui/badge.tsx +43 -0
  88. package/src/components/ui/button.cy.tsx +177 -0
  89. package/src/components/ui/button.tsx +56 -0
  90. package/src/components/ui/card.cy.tsx +160 -0
  91. package/src/components/ui/card.tsx +73 -0
  92. package/src/components/ui/chat/animated-markdown.tsx +59 -0
  93. package/src/components/ui/chat/chat-bubble.tsx +178 -0
  94. package/src/components/ui/chat/chat-container.tsx +51 -0
  95. package/src/components/ui/chat/chat-input.cy.tsx +169 -0
  96. package/src/components/ui/chat/chat-input.tsx +47 -0
  97. package/src/components/ui/chat/chat-message-list.tsx +61 -0
  98. package/src/components/ui/chat/chat-tts-button.tsx +199 -0
  99. package/src/components/ui/chat/code-block.tsx +79 -0
  100. package/src/components/ui/chat/expandable-chat.tsx +131 -0
  101. package/src/components/ui/chat/hooks/useAutoScroll.ts +86 -0
  102. package/src/components/ui/chat/markdown.tsx +209 -0
  103. package/src/components/ui/chat/message-loading.tsx +48 -0
  104. package/src/components/ui/checkbox.cy.tsx +170 -0
  105. package/src/components/ui/checkbox.tsx +30 -0
  106. package/src/components/ui/collapsible.cy.tsx +283 -0
  107. package/src/components/ui/collapsible.tsx +9 -0
  108. package/src/components/ui/command.cy.tsx +313 -0
  109. package/src/components/ui/command.tsx +143 -0
  110. package/src/components/ui/dialog.cy.tsx +279 -0
  111. package/src/components/ui/dialog.tsx +104 -0
  112. package/src/components/ui/dropdown-menu.cy.tsx +273 -0
  113. package/src/components/ui/dropdown-menu.tsx +281 -0
  114. package/src/components/ui/input.cy.tsx +82 -0
  115. package/src/components/ui/input.tsx +27 -0
  116. package/src/components/ui/label.cy.tsx +157 -0
  117. package/src/components/ui/label.tsx +19 -0
  118. package/src/components/ui/resizable.tsx +42 -0
  119. package/src/components/ui/scroll-area.cy.tsx +242 -0
  120. package/src/components/ui/scroll-area.tsx +46 -0
  121. package/src/components/ui/select.cy.tsx +277 -0
  122. package/src/components/ui/select.tsx +155 -0
  123. package/src/components/ui/separator.cy.tsx +145 -0
  124. package/src/components/ui/separator.tsx +29 -0
  125. package/src/components/ui/sheet.cy.tsx +324 -0
  126. package/src/components/ui/sheet.tsx +119 -0
  127. package/src/components/ui/sidebar.tsx +734 -0
  128. package/src/components/ui/skeleton.cy.tsx +149 -0
  129. package/src/components/ui/skeleton.tsx +17 -0
  130. package/src/components/ui/split-button.cy.tsx +274 -0
  131. package/src/components/ui/split-button.tsx +112 -0
  132. package/src/components/ui/switch.tsx +28 -0
  133. package/src/components/ui/tabs.cy.tsx +271 -0
  134. package/src/components/ui/tabs.tsx +53 -0
  135. package/src/components/ui/textarea.cy.tsx +136 -0
  136. package/src/components/ui/textarea.tsx +26 -0
  137. package/src/components/ui/toast.cy.tsx +209 -0
  138. package/src/components/ui/toast.tsx +126 -0
  139. package/src/components/ui/toaster.tsx +29 -0
  140. package/src/components/ui/tooltip.cy.tsx +244 -0
  141. package/src/components/ui/tooltip.tsx +30 -0
  142. package/src/config/agent-templates.ts +349 -0
  143. package/src/config/voice-models.ts +181 -0
  144. package/src/constants.ts +23 -0
  145. package/src/context/AuthContext.tsx +44 -0
  146. package/src/context/ConnectionContext.tsx +194 -0
  147. package/src/entry.tsx +9 -0
  148. package/src/hooks/__tests__/use-agent-tab-state.test.ts +137 -0
  149. package/src/hooks/__tests__/use-agent-update.test.tsx +250 -0
  150. package/src/hooks/__tests__/use-character-convert.test.ts +102 -0
  151. package/src/hooks/__tests__/use-panel-width-state.test.ts +243 -0
  152. package/src/hooks/__tests__/use-sidebar-state.test.ts +117 -0
  153. package/src/hooks/use-agent-management.ts +130 -0
  154. package/src/hooks/use-agent-tab-state.ts +74 -0
  155. package/src/hooks/use-agent-update.ts +469 -0
  156. package/src/hooks/use-character-convert.ts +138 -0
  157. package/src/hooks/use-confirmation.ts +55 -0
  158. package/src/hooks/use-delete-agent.ts +123 -0
  159. package/src/hooks/use-dm-channels.ts +198 -0
  160. package/src/hooks/use-elevenlabs-voices.ts +83 -0
  161. package/src/hooks/use-file-upload.ts +224 -0
  162. package/src/hooks/use-mobile.tsx +19 -0
  163. package/src/hooks/use-onboarding.tsx +49 -0
  164. package/src/hooks/use-panel-width-state.ts +147 -0
  165. package/src/hooks/use-partial-update.ts +288 -0
  166. package/src/hooks/use-plugin-details.ts +462 -0
  167. package/src/hooks/use-plugins.ts +119 -0
  168. package/src/hooks/use-query-hooks.ts +1263 -0
  169. package/src/hooks/use-server-agents.ts +62 -0
  170. package/src/hooks/use-server-version.tsx +47 -0
  171. package/src/hooks/use-sidebar-state.ts +50 -0
  172. package/src/hooks/use-socket-chat.ts +264 -0
  173. package/src/hooks/use-toast.ts +260 -0
  174. package/src/hooks/use-version.tsx +64 -0
  175. package/src/index.css +146 -0
  176. package/src/lib/api-client-config.ts +53 -0
  177. package/src/lib/api-type-mappers.ts +196 -0
  178. package/src/lib/export-utils.ts +123 -0
  179. package/src/lib/logger.ts +19 -0
  180. package/src/lib/media-utils.ts +170 -0
  181. package/src/lib/pca.test.ts +17 -0
  182. package/src/lib/pca.ts +52 -0
  183. package/src/lib/socketio-manager.ts +664 -0
  184. package/src/lib/utils.ts +168 -0
  185. package/src/main.tsx +16 -0
  186. package/src/mocks/empty-module.ts +12 -0
  187. package/src/mocks/node-module.ts +57 -0
  188. package/src/polyfills.ts +37 -0
  189. package/src/routes/agent-detail.tsx +30 -0
  190. package/src/routes/agent-list.tsx +27 -0
  191. package/src/routes/agent-settings.tsx +48 -0
  192. package/src/routes/character-detail.tsx +52 -0
  193. package/src/routes/character-form.tsx +79 -0
  194. package/src/routes/character-list.tsx +38 -0
  195. package/src/routes/chat.tsx +128 -0
  196. package/src/routes/createAgent.tsx +13 -0
  197. package/src/routes/group-new.tsx +50 -0
  198. package/src/routes/group.tsx +29 -0
  199. package/src/routes/home.tsx +218 -0
  200. package/src/routes/not-found.tsx +71 -0
  201. package/src/test/setup.ts +154 -0
  202. package/src/types/crypto-browserify.d.ts +4 -0
  203. package/src/types/index.ts +13 -0
  204. package/src/types/rooms.ts +8 -0
  205. package/src/types.ts +84 -0
  206. package/src/vite-env.d.ts +40 -0
  207. package/tailwind.config.ts +90 -0
  208. package/tsconfig.json +10 -0
  209. package/vite.config.ts +102 -0
package/dist/assets/ui-vendor-BQCqNqg0.js ADDED
@@ -0,0 +1 @@
1
+ function u(n,t,{checkForDefaultPrevented:a=!0}={}){return function(e){if(n?.(e),a===!1||!e.defaultPrevented)return t?.(e)}}function c(n,[t,a]){return Math.min(a,Math.max(t,n))}export{c as a,u as c};
package/dist/elizaos-avatar.png ADDED
Binary file
package/dist/elizaos-icon.png ADDED
Binary file
package/dist/elizaos-logo-light.png ADDED
Binary file
package/dist/elizaos.webp ADDED
Binary file
package/dist/favicon.ico ADDED
Binary file
package/dist/images/agents/agent1.png ADDED
Binary file
package/dist/images/agents/agent2.png ADDED
Binary file
package/dist/images/agents/agent3.png ADDED
Binary file
package/dist/images/agents/agent4.png ADDED
Binary file
package/dist/images/agents/agent5.png ADDED
Binary file
package/dist/index.html ADDED
@@ -0,0 +1,14 @@
1
+ <!doctype html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <link rel="icon" type="image/x-icon" href="/favicon.ico" />
7
+ <title>ElizaOS - Client</title>
8
+ <script type="module" crossorigin src="/assets/main-C5zNUkXH.js"></script>
9
+ </head>
10
+ <body>
11
+ <div id="root"></div>
12
+ <!-- Minimal early Buffer/global/process bootstrap to avoid race before entry polyfills -->
13
+ </body>
14
+ </html>
package/index.html ADDED
@@ -0,0 +1,24 @@
1
+ <!doctype html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <link rel="icon" type="image/x-icon" href="/favicon.ico" />
7
+ <title>ElizaOS - Client</title>
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ <!-- Minimal early Buffer/global/process bootstrap to avoid race before entry polyfills -->
12
+ <script type="module">
13
+ import { Buffer as B } from 'buffer';
14
+ if (typeof globalThis.Buffer === 'undefined') globalThis.Buffer = B;
15
+ if (typeof globalThis.global === 'undefined') globalThis.global = globalThis;
16
+ if (typeof globalThis.process === 'undefined') {
17
+ globalThis.process = { env: {} };
18
+ } else if (!globalThis.process.env) {
19
+ globalThis.process.env = {};
20
+ }
21
+ </script>
22
+ <script type="module" src="/src/entry.tsx"></script>
23
+ </body>
24
+ </html>
package/package.json ADDED
@@ -0,0 +1,159 @@
1
+ {
2
+ "name": "@elizaos/client",
3
+ "version": "1.5.5-alpha.10",
4
+ "description": "Web client interface for ElizaOS agents",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/elizaos/eliza.git",
8
+ "directory": "packages/client"
9
+ },
10
+ "license": "MIT",
11
+ "keywords": [
12
+ "elizaos",
13
+ "ai",
14
+ "agent",
15
+ "client",
16
+ "react",
17
+ "web",
18
+ "chat",
19
+ "interface"
20
+ ],
21
+ "homepage": "https://elizaos.ai",
22
+ "bugs": {
23
+ "url": "https://github.com/elizaos/eliza/issues"
24
+ },
25
+ "sideEffects": false,
26
+ "type": "module",
27
+ "files": [
28
+ "dist",
29
+ "public",
30
+ "src",
31
+ "index.html",
32
+ "vite.config.ts",
33
+ "tsconfig.json",
34
+ "postcss.config.js",
35
+ "tailwind.config.ts",
36
+ "README.md",
37
+ "LICENSE"
38
+ ],
39
+ "scripts": {
40
+ "dev": "vite",
41
+ "start:client": "vite",
42
+ "dev:client": "vite --host 0.0.0.0 --port 5173",
43
+ "build": "tsc -b && vite build",
44
+ "preview": "vite preview",
45
+ "lint": "prettier --write ./src",
46
+ "format": "prettier --write ./src",
47
+ "format:check": "prettier --check ./src",
48
+ "clean": "rm -rf dist .turbo node_modules .turbo-tsconfig.json *.tsbuildinfo",
49
+ "test": "bun test",
50
+ "test:all": "./scripts/test-all.sh",
51
+ "test:quick": "./scripts/test-quick.sh",
52
+ "test:unit": "./scripts/run-bun-tests.sh --coverage",
53
+ "test:unit:watch": "./scripts/run-bun-tests.sh --watch",
54
+ "test:component": "cypress run --component",
55
+ "test:e2e": "cypress run --e2e",
56
+ "test:e2e:with-server": "./scripts/test-e2e-with-server.sh",
57
+ "cypress:open": "cypress open",
58
+ "type-check": "cd cypress && bunx tsc --noEmit --project tsconfig.json"
59
+ },
60
+ "publishConfig": {
61
+ "access": "public"
62
+ },
63
+ "dependencies": {
64
+ "@elizaos/api-client": "1.5.5-alpha.10",
65
+ "@elizaos/core": "1.5.5-alpha.10",
66
+ "@hookform/resolvers": "^5.1.1",
67
+ "@radix-ui/react-alert-dialog": "^1.0.5",
68
+ "@radix-ui/react-avatar": "^1.1.3",
69
+ "@radix-ui/react-checkbox": "^1.3.2",
70
+ "@radix-ui/react-collapsible": "^1.1.3",
71
+ "@radix-ui/react-dialog": "^1.1.6",
72
+ "@radix-ui/react-dropdown-menu": "^2.1.15",
73
+ "@radix-ui/react-label": "^2.1.2",
74
+ "@radix-ui/react-scroll-area": "^1.2.3",
75
+ "@radix-ui/react-select": "^2.1.6",
76
+ "@radix-ui/react-separator": "^1.1.2",
77
+ "@radix-ui/react-slot": "^1.2.3",
78
+ "@radix-ui/react-switch": "^1.2.5",
79
+ "@radix-ui/react-tabs": "^1.1.3",
80
+ "@radix-ui/react-toast": "^1.2.6",
81
+ "@radix-ui/react-tooltip": "^1.1.8",
82
+ "@react-spring/web": "^9.7.5",
83
+ "@tanstack/react-query": "^5.67.2",
84
+ "@uidotdev/usehooks": "^2.4.1",
85
+ "buffer": "^6.0.3",
86
+ "class-variance-authority": "^0.7.1",
87
+ "clsx": "2.1.1",
88
+ "cmdk": "^1.0.4",
89
+ "date-fns": "^4.1.0",
90
+ "dayjs": "^1.11.13",
91
+ "evt": "^2.5.9",
92
+ "lucide-react": "^0.469.0",
93
+ "react": "^19.1.0",
94
+ "react-aiwriter": "^1.0.0",
95
+ "react-dom": "^19.1.0",
96
+ "react-force-graph": "^1.47.6",
97
+ "react-force-graph-2d": "^1.27.1",
98
+ "react-joyride": "^2.9.3",
99
+ "react-markdown": "^10.1.0",
100
+ "react-resizable-panels": "^2.1.7",
101
+ "react-router": "^7.3.0",
102
+ "react-router-dom": "^7.3.0",
103
+ "remark-breaks": "^4.0.0",
104
+ "remark-gfm": "^4.0.1",
105
+ "semver": "^7.7.1",
106
+ "shiki": "^3.6.0",
107
+ "socket.io-client": "^4.8.1",
108
+ "tailwind-merge": "^2.6.0",
109
+ "tailwindcss-animate": "^1.0.7",
110
+ "use-stick-to-bottom": "^1.1.1",
111
+ "vite-plugin-compression": "^0.5.1"
112
+ },
113
+ "devDependencies": {
114
+ "@cypress/react": "^9.0.1",
115
+ "@cypress/vite-dev-server": "^6.0.3",
116
+ "@eslint/js": "^9.22.0",
117
+ "@happy-dom/global-registrator": "^18.0.1",
118
+ "@playwright/test": "^1.40.0",
119
+ "@radix-ui/react-direction": "^1.1.1",
120
+ "@rollup/plugin-inject": "^5.0.5",
121
+ "@tailwindcss/vite": "^4.1.0",
122
+ "@testing-library/cypress": "^10.0.3",
123
+ "@testing-library/jest-dom": "^6.6.3",
124
+ "@testing-library/react": "^14.0.0",
125
+ "@testing-library/react-hooks": "^8.0.1",
126
+ "@types/cypress": "^1.1.6",
127
+ "@types/node": "^24.0.1",
128
+ "@types/react": "^19.0.10",
129
+ "@types/react-dom": "^19.0.4",
130
+ "@types/semver": "^7.5.8",
131
+ "@typescript-eslint/eslint-plugin": "8.26.0",
132
+ "@typescript-eslint/parser": "8.26.0",
133
+ "@vitejs/plugin-react-swc": "^3.7.2",
134
+ "asn1.js": "^5.4.1",
135
+ "cypress": "^14.5.4",
136
+ "cypress-real-events": "^1.14.0",
137
+ "eslint": "^9.22.0",
138
+ "eslint-import-resolver-typescript": "^3.8.3",
139
+ "eslint-plugin-import": "^2.31.0",
140
+ "eslint-plugin-jsx-a11y": "^6.10.2",
141
+ "eslint-plugin-react": "^7.37.4",
142
+ "eslint-plugin-react-hooks": "^5.2.0",
143
+ "eslint-plugin-react-refresh": "^0.4.19",
144
+ "evp_bytestokey": "^1.0.3",
145
+ "globals": "^15.15.0",
146
+ "jsdom": "^26.1.0",
147
+ "postcss": "^8.5.3",
148
+ "prettier": "3.5.3",
149
+ "process": "^0.11.10",
150
+ "rollup-plugin-visualizer": "^5.14.0",
151
+ "tailwindcss": "^4.1.0",
152
+ "typescript": "5.8.2",
153
+ "typescript-eslint": "^8.26.0",
154
+ "vite": "6.1.6",
155
+ "vite-tsconfig-paths": "^5.1.4",
156
+ "wait-on": "^8.0.3"
157
+ },
158
+ "gitHead": "cdb82a9c67e2f3ea47f0a34584b68301d609f29a"
159
+ }
package/postcss.config.js ADDED
@@ -0,0 +1,3 @@
1
+ export default {
2
+ plugins: {},
3
+ };
package/public/elizaos-avatar.png ADDED
Binary file
package/public/elizaos-icon.png ADDED
Binary file
package/public/elizaos-logo-light.png ADDED
Binary file
package/public/elizaos.webp ADDED
Binary file
package/public/favicon.ico ADDED
Binary file
package/public/images/agents/agent1.png ADDED
Binary file
package/public/images/agents/agent2.png ADDED
Binary file
package/public/images/agents/agent3.png ADDED
Binary file
package/public/images/agents/agent4.png ADDED
Binary file
package/public/images/agents/agent5.png ADDED
Binary file
package/src/App.tsx ADDED
@@ -0,0 +1,222 @@
1
+ import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
2
+ import { QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query';
3
+ import { useEffect, useState } from 'react';
4
+ import { BrowserRouter, Route, Routes } from 'react-router-dom';
5
+ import AgentCreator from './components/agent-creator';
6
+ import { AppSidebar } from './components/app-sidebar';
7
+ import { ConnectionErrorBanner } from './components/connection-error-banner';
8
+ import EnvSettings from './components/env-settings';
9
+ import { AgentLogViewer } from './components/agent-log-viewer';
10
+ import OnboardingTour from './components/onboarding-tour';
11
+ import { Toaster } from './components/ui/toaster';
12
+ import { TooltipProvider } from './components/ui/tooltip';
13
+ import { AuthProvider } from './context/AuthContext';
14
+ import { ConnectionProvider, useConnection } from './context/ConnectionContext';
15
+ import { STALE_TIMES } from './hooks/use-query-hooks';
16
+ import useVersion from './hooks/use-version';
17
+ import './index.css';
18
+ import { createElizaClient } from './lib/api-client-config';
19
+ import Chat from './routes/chat';
20
+ import AgentCreatorRoute from './routes/createAgent';
21
+ import Home from './routes/home';
22
+ import NotFound from './routes/not-found';
23
+ import GroupChannel from './routes/group';
24
+ import { Menu } from 'lucide-react';
25
+ import { Sheet, SheetContent, SheetTrigger } from './components/ui/sheet';
26
+ import { Button } from './components/ui/button';
27
+ import CreateGroupPage from './routes/group-new';
28
+ import AgentSettingsRoute from './routes/agent-settings';
29
+ import clientLogger from '@/lib/logger';
30
+
31
+ // Create a query client with optimized settings
32
+ const queryClient = new QueryClient({
33
+ defaultOptions: {
34
+ queries: {
35
+ staleTime: STALE_TIMES.STANDARD,
36
+ // Default to no polling unless specifically configured
37
+ refetchInterval: false,
38
+ // Make queries retry 3 times with exponential backoff
39
+ retry: 3,
40
+ retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
41
+ // Refetch query on window focus
42
+ refetchOnWindowFocus: true,
43
+ // Enable refetch on reconnect
44
+ refetchOnReconnect: true,
45
+ // Fail queries that take too long
46
+ },
47
+ mutations: {
48
+ // Default to 3 retries for mutations too
49
+ retry: 3,
50
+ retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
51
+ },
52
+ },
53
+ });
54
+
55
+ // Prefetch initial data with smarter error handling
56
+ const prefetchInitialData = async () => {
57
+ try {
58
+ // Prefetch agents (real-time data so shorter stale time)
59
+ await queryClient.prefetchQuery({
60
+ queryKey: ['agents'],
61
+ queryFn: async () => {
62
+ const elizaClient = createElizaClient();
63
+ const result = await elizaClient.agents.listAgents();
64
+ return { data: result };
65
+ },
66
+ staleTime: STALE_TIMES.FREQUENT,
67
+ });
68
+ } catch (error) {
69
+ console.error('Error prefetching initial data:', error);
70
+ // Don't throw, let the app continue loading with fallbacks
71
+ }
72
+ };
73
+
74
+ // Execute prefetch immediately
75
+ prefetchInitialData();
76
+
77
+ // Component containing the core application logic and routing
78
+ function AppContent() {
79
+ useVersion();
80
+ const { status } = useConnection();
81
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
82
+ const [homeKey, setHomeKey] = useState(Date.now());
83
+ const queryClient = useQueryClient();
84
+
85
+ useEffect(() => {
86
+ clientLogger.info('[AppContent] Mounted/Updated');
87
+ prefetchInitialData();
88
+ }, []);
89
+
90
+ const refreshHomePage = () => {
91
+ clientLogger.info('[AppContent] refreshHomePage called. Current homeKey:', homeKey);
92
+ const newKey = Date.now();
93
+ setHomeKey(newKey);
94
+ clientLogger.info('[AppContent] New homeKey set to:', newKey);
95
+
96
+ clientLogger.info('[AppContent] Invalidating queries for Home page refresh.');
97
+ queryClient.invalidateQueries({ queryKey: ['agents'] });
98
+ queryClient.invalidateQueries({ queryKey: ['servers'] });
99
+ };
100
+
101
+ return (
102
+ <TooltipProvider delayDuration={0}>
103
+ <SidebarProvider>
104
+ <AppSidebar refreshHomePage={refreshHomePage} />
105
+ <SidebarInset className="h-screen flex flex-col md:ml-72 overflow-hidden">
106
+ {/* Mobile menu button */}
107
+ <div className="md:hidden absolute top-4 left-4 z-50">
108
+ <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
109
+ <SheetTrigger asChild>
110
+ <Button variant="ghost" size="icon" data-testid="mobile-menu-button">
111
+ <Menu className="h-5 w-5" />
112
+ <span className="sr-only">Toggle menu</span>
113
+ </Button>
114
+ </SheetTrigger>
115
+ <SheetContent side="left" className="w-80 p-0 z-50">
116
+ <AppSidebar isMobile={true} refreshHomePage={refreshHomePage} />
117
+ </SheetContent>
118
+ </Sheet>
119
+ </div>
120
+ <div className="flex w-full justify-center pt-16 md:pt-0 flex-shrink-0">
121
+ <div className="w-full md:max-w-4xl">
122
+ <ConnectionErrorBanner />
123
+ </div>
124
+ </div>
125
+ <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
126
+ <Routes>
127
+ <Route path="/" element={<Home key={homeKey} />} />
128
+ <Route
129
+ path="chat/:agentId/:channelId"
130
+ element={
131
+ <div className="flex-1 min-h-0 overflow-hidden">
132
+ <Chat />
133
+ </div>
134
+ }
135
+ />
136
+ <Route
137
+ path="chat/:agentId"
138
+ element={
139
+ <div className="flex-1 min-h-0 overflow-hidden">
140
+ <Chat />
141
+ </div>
142
+ }
143
+ />
144
+ <Route path="settings/:agentId" element={<AgentSettingsRoute />} />
145
+ <Route path="group/new" element={<CreateGroupPage />} />
146
+ <Route path="agents/new" element={<AgentCreatorRoute />} />
147
+ <Route
148
+ path="/create"
149
+ element={
150
+ <div className="flex w-full justify-center px-4 sm:px-6 overflow-y-auto">
151
+ <div className="w-full md:max-w-4xl">
152
+ <AgentCreator />
153
+ </div>
154
+ </div>
155
+ }
156
+ />
157
+ <Route
158
+ path="/logs"
159
+ element={
160
+ <div className="flex w-full justify-center">
161
+ <div className="w-full md:max-w-4xl">
162
+ <div className="flex items-center justify-between mb-4">
163
+ <h2 className="text-2xl p-4 font-bold">System Logs</h2>
164
+ </div>
165
+ <AgentLogViewer />
166
+ </div>
167
+ </div>
168
+ }
169
+ />
170
+ <Route
171
+ path="group/:channelId"
172
+ element={
173
+ <div className="flex-1 min-h-0 overflow-hidden">
174
+ <GroupChannel />
175
+ </div>
176
+ }
177
+ />
178
+ <Route
179
+ path="settings/"
180
+ element={
181
+ <div className="flex w-full justify-center overflow-y-auto">
182
+ <div className="w-full md:max-w-4xl">
183
+ <EnvSettings />
184
+ </div>
185
+ </div>
186
+ }
187
+ />
188
+ {/* Catch-all route for 404 errors */}
189
+ <Route path="*" element={<NotFound />} />
190
+ </Routes>
191
+ </div>
192
+ </SidebarInset>
193
+ </SidebarProvider>
194
+ <Toaster />
195
+ {status !== 'unauthorized' && <OnboardingTour />}
196
+ </TooltipProvider>
197
+ );
198
+ }
199
+
200
+ // Main App component setting up providers
201
+ function App() {
202
+ return (
203
+ <QueryClientProvider client={queryClient}>
204
+ <div
205
+ className="dark antialiased font-sans"
206
+ style={{
207
+ colorScheme: 'dark',
208
+ }}
209
+ >
210
+ <BrowserRouter>
211
+ <AuthProvider>
212
+ <ConnectionProvider>
213
+ <AppContent />
214
+ </ConnectionProvider>
215
+ </AuthProvider>
216
+ </BrowserRouter>
217
+ </div>
218
+ </QueryClientProvider>
219
+ );
220
+ }
221
+
222
+ export default App;
package/src/components/AgentDetailsPanel.tsx ADDED
@@ -0,0 +1,147 @@
1
+ import { Avatar, AvatarImage } from '@/components/ui/avatar';
2
+ import { Badge } from '@/components/ui/badge';
3
+ import { ScrollArea } from '@/components/ui/scroll-area';
4
+ import { Separator } from '@/components/ui/separator';
5
+ import type { Agent } from '@elizaos/core';
6
+ import { AgentStatus } from '@elizaos/core';
7
+
8
+ interface AgentDetailsPanelProps {
9
+ agent: Agent;
10
+ }
11
+
12
+ export default function AgentDetailsPanel({ agent }: AgentDetailsPanelProps) {
13
+ const isActive = agent.status === AgentStatus.ACTIVE;
14
+ // Extract avatar as string, handling various types
15
+ const avatarUrl =
16
+ typeof agent.settings?.avatar === 'string' ? agent.settings.avatar : '/elizaos-icon.png';
17
+
18
+ return (
19
+ <div className="h-full flex flex-col bg-background" data-testid="agent-details">
20
+ <div className="p-6 space-y-4">
21
+ {/* Agent Header */}
22
+ <div className="flex items-center gap-4">
23
+ <Avatar className="size-16 border">
24
+ <AvatarImage src={avatarUrl} />
25
+ </Avatar>
26
+ <div className="flex-1">
27
+ <h3 className="font-semibold text-lg">{agent.name}</h3>
28
+ <Badge variant={isActive ? 'default' : 'secondary'}>
29
+ {isActive ? 'Active' : 'Inactive'}
30
+ </Badge>
31
+ </div>
32
+ </div>
33
+
34
+ <Separator />
35
+
36
+ {/* Agent Details */}
37
+ <ScrollArea className="flex-1">
38
+ <div className="space-y-4">
39
+ {/* Bio */}
40
+ {agent.bio && (
41
+ <div>
42
+ <h4 className="font-medium text-sm mb-1">Bio</h4>
43
+ <p className="text-sm text-muted-foreground">
44
+ <span className="sm:hidden">
45
+ {/* Mobile: Show truncated bio */}
46
+ {((text) => (text.length > 150 ? `${text.substring(0, 150)}...` : text))(
47
+ Array.isArray(agent?.bio) ? agent?.bio.join(' ') : agent?.bio
48
+ )}
49
+ </span>
50
+ <span className="hidden sm:block">
51
+ {/* Desktop: Show full bio */}
52
+ {Array.isArray(agent?.bio) ? agent?.bio.join(' ') : agent?.bio}
53
+ </span>
54
+ </p>
55
+ </div>
56
+ )}
57
+
58
+ {/* Topics */}
59
+ {agent.topics && agent.topics.length > 0 && (
60
+ <div>
61
+ <h4 className="font-medium text-sm mb-2">Topics</h4>
62
+ <div className="flex flex-wrap gap-1">
63
+ {agent.topics.map((topic, idx) => (
64
+ <Badge key={idx} variant="outline" className="text-xs">
65
+ {topic}
66
+ </Badge>
67
+ ))}
68
+ </div>
69
+ </div>
70
+ )}
71
+
72
+ {/* Adjectives */}
73
+ {agent.adjectives && agent.adjectives.length > 0 && (
74
+ <div>
75
+ <h4 className="font-medium text-sm mb-2">Personality Traits</h4>
76
+ <div className="flex flex-wrap gap-1">
77
+ {agent.adjectives.map((adj, idx) => (
78
+ <Badge key={idx} variant="secondary" className="text-xs">
79
+ {adj}
80
+ </Badge>
81
+ ))}
82
+ </div>
83
+ </div>
84
+ )}
85
+
86
+ {/* Plugins */}
87
+ {agent.plugins && agent.plugins.length > 0 && (
88
+ <div>
89
+ <h4 className="font-medium text-sm mb-2">Enabled Plugins</h4>
90
+ <div className="space-y-1">
91
+ {agent.plugins.map((plugin, idx) => (
92
+ <div key={idx} className="text-xs text-muted-foreground">
93
+ • {plugin}
94
+ </div>
95
+ ))}
96
+ </div>
97
+ </div>
98
+ )}
99
+
100
+ {/* Settings */}
101
+ {agent.settings && Object.keys(agent.settings).length > 0 && (
102
+ <div>
103
+ <h4 className="font-medium text-sm mb-2">Settings</h4>
104
+ <div className="space-y-1">
105
+ {Object.entries(agent.settings)
106
+ .filter(([key]) => key !== 'avatar' && key !== 'secrets')
107
+ .map(([key, value]) => (
108
+ <div key={key} className="text-xs">
109
+ <span className="text-muted-foreground">{key}:</span>{' '}
110
+ <span className="font-mono">
111
+ {typeof value === 'object' ? JSON.stringify(value) : String(value)}
112
+ </span>
113
+ </div>
114
+ ))}
115
+ </div>
116
+ </div>
117
+ )}
118
+
119
+ {/* Message Examples */}
120
+ {agent.messageExamples && agent.messageExamples.length > 0 && (
121
+ <div>
122
+ <h4 className="font-medium text-sm mb-2">Example Messages</h4>
123
+ <div className="space-y-2">
124
+ {agent.messageExamples.slice(0, 3).map((examples, idx) => {
125
+ // messageExamples is an array of arrays, so we need to handle nested structure
126
+ if (Array.isArray(examples) && examples.length > 0) {
127
+ const firstExample = examples[0];
128
+ return (
129
+ <div key={idx} className="text-xs bg-muted p-2 rounded">
130
+ <div className="font-medium">{firstExample.name}</div>
131
+ <div className="text-muted-foreground mt-1">
132
+ {firstExample.content.text}
133
+ </div>
134
+ </div>
135
+ );
136
+ }
137
+ return null;
138
+ })}
139
+ </div>
140
+ </div>
141
+ )}
142
+ </div>
143
+ </ScrollArea>
144
+ </div>
145
+ </div>
146
+ );
147
+ }