@tanstack/ai-devtools-core 0.3.12 → 0.3.15

package/README.md

@@ -49,6 +49,10 @@ A powerful, type-safe AI SDK for building AI-powered applications.
 
 ### <a href="https://tanstack.com/ai">Read the docs →</a>
 
+## Requirements
+
+- **Node.js v24+** is required to avoid compatibility issues with `isolated-vm`.
+
 ## Tree-Shakeable Adapters
 
 Import only the functionality you need for smaller bundle sizes:
@@ -87,8 +91,8 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
     <td>
       <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS" >
         <picture>
-          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-D643Zkrv.svg" height="40" />
-          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-CIzGLYU_.svg" height="40" />
+         <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-D643Zkrv.svg" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-CIzGLYU_.svg" />
           <img src="https://tanstack.com/assets/coderabbit-light-CIzGLYU_.svg" height="40" alt="CodeRabbit" />
         </picture>
       </a>
@@ -96,9 +100,9 @@ Available adapters: `openaiText`, `openaiEmbed`, `openaiSummarize`, `anthropicTe
     <td>
       <a href="https://www.cloudflare.com?utm_source=tanstack">
         <picture>
-          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" height="60" />
-          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-6Ojsn8yh.svg" height="60" />
-          <img src="https://tanstack.com/assets/cloudflare-black-6Ojsn8yh.svg" height="60" alt="Cloudflare" />
+           <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-6Ojsn8yh.svg" />
+          <img src="https://tanstack.com/assets/cloudflare-white-Co-Tyjbl.svg" height="60" alt="Cloudflare" />
         </picture>
       </a>
     </td>

package/dist/Shell/{TWTNN4SQ.js → E5BETLAK.js}

@@ -1,6 +1,6 @@
 import { delegateEvents, createComponent, insert, effect, className, setStyleProperty, memo, template, setAttribute } from 'solid-js/web';
 import { createContext, createSignal, onMount, onCleanup, createEffect, For, Show, useContext, batch, createMemo, Index, Switch, Match } from 'solid-js';
-import { MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
+import { ThemeContextProvider, MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
 import * as goober from 'goober';
 import { createStore, produce } from 'solid-js/store';
 import { aiEventClient } from '@tanstack/ai-event-client';
@@ -7452,10 +7452,17 @@ var ConversationDetails = () => {
 
 // src/components/Shell.tsx
 var _tmpl$40 = /* @__PURE__ */ template(`<div><div style=min-width:150px;max-width:800px><div>Active Conversations</div></div><div></div><div style=flex:1>`);
-function Devtools() {
-  return createComponent(AIProvider, {
+function Devtools(props) {
+  return createComponent(ThemeContextProvider, {
+    get theme() {
+      return props.theme;
+    },
     get children() {
-      return createComponent(DevtoolsContent, {});
+      return createComponent(AIProvider, {
+        get children() {
+          return createComponent(DevtoolsContent, {});
+        }
+      });
     }
   });
 }

package/dist/Shell/{SHJAKIOY.js → KINKIMWF.js}

@@ -1,6 +1,6 @@
 import { createComponent, ssr, ssrAttribute, escape, ssrStyleProperty } from 'solid-js/web';
 import { createContext, createSignal, onMount, onCleanup, createEffect, For, Show, useContext, batch, createMemo, Index, Switch, Match } from 'solid-js';
-import { MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
+import { ThemeContextProvider, MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
 import * as goober from 'goober';
 import { createStore, produce } from 'solid-js/store';
 import { aiEventClient } from '@tanstack/ai-event-client';
@@ -6156,10 +6156,17 @@ var ConversationDetails = () => {
 
 // src/components/Shell.tsx
 var _tmpl$40 = ["<div", "><div", ' style="', '"><div', ">Active Conversations</div>", '</div><div class="', '"></div><div', ' style="', '">', "</div></div>"];
-function Devtools() {
-  return createComponent(AIProvider, {
+function Devtools(props) {
+  return createComponent(ThemeContextProvider, {
+    get theme() {
+      return props.theme;
+    },
     get children() {
-      return createComponent(DevtoolsContent, {});
+      return createComponent(AIProvider, {
+        get children() {
+          return createComponent(DevtoolsContent, {});
+        }
+      });
     }
   });
 }

package/dist/dev.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/TWTNN4SQ.js')
+  () => import('./Shell/E5BETLAK.js')
 );
 
 // src/index.ts

package/dist/index.d.ts

@@ -6,7 +6,7 @@ declare const AiDevtoolsCore: new () => {
     "__#private@#isMounting": boolean;
     "__#private@#abortMount": boolean;
     "__#private@#dispose"?: () => void;
-    mount<T extends HTMLElement>(el: T, theme: "light" | "dark"): Promise<void>;
+    mount<T extends HTMLElement>(el: T, props: TanStackDevtoolsPluginProps): Promise<void>;
     unmount(): void;
 };
 

package/dist/index.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/TWTNN4SQ.js')
+  () => import('./Shell/E5BETLAK.js')
 );
 
 // src/index.ts

package/dist/production/Shell/{TWTNN4SQ.js → E5BETLAK.js}

@@ -1,6 +1,6 @@
 import { delegateEvents, createComponent, insert, effect, className, setStyleProperty, memo, template, setAttribute } from 'solid-js/web';
 import { createContext, createSignal, onMount, onCleanup, createEffect, For, Show, useContext, batch, createMemo, Index, Switch, Match } from 'solid-js';
-import { MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
+import { ThemeContextProvider, MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
 import * as goober from 'goober';
 import { createStore, produce } from 'solid-js/store';
 import { aiEventClient } from '@tanstack/ai-event-client';
@@ -7452,10 +7452,17 @@ var ConversationDetails = () => {
 
 // src/components/Shell.tsx
 var _tmpl$40 = /* @__PURE__ */ template(`<div><div style=min-width:150px;max-width:800px><div>Active Conversations</div></div><div></div><div style=flex:1>`);
-function Devtools() {
-  return createComponent(AIProvider, {
+function Devtools(props) {
+  return createComponent(ThemeContextProvider, {
+    get theme() {
+      return props.theme;
+    },
     get children() {
-      return createComponent(DevtoolsContent, {});
+      return createComponent(AIProvider, {
+        get children() {
+          return createComponent(DevtoolsContent, {});
+        }
+      });
     }
   });
 }

package/dist/production/Shell/{SHJAKIOY.js → KINKIMWF.js}

@@ -1,6 +1,6 @@
 import { createComponent, ssr, ssrAttribute, escape, ssrStyleProperty } from 'solid-js/web';
 import { createContext, createSignal, onMount, onCleanup, createEffect, For, Show, useContext, batch, createMemo, Index, Switch, Match } from 'solid-js';
-import { MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
+import { ThemeContextProvider, MainPanel, Header, HeaderLogo, useTheme, JsonTree } from '@tanstack/devtools-ui';
 import * as goober from 'goober';
 import { createStore, produce } from 'solid-js/store';
 import { aiEventClient } from '@tanstack/ai-event-client';
@@ -6156,10 +6156,17 @@ var ConversationDetails = () => {
 
 // src/components/Shell.tsx
 var _tmpl$40 = ["<div", "><div", ' style="', '"><div', ">Active Conversations</div>", '</div><div class="', '"></div><div', ' style="', '">', "</div></div>"];
-function Devtools() {
-  return createComponent(AIProvider, {
+function Devtools(props) {
+  return createComponent(ThemeContextProvider, {
+    get theme() {
+      return props.theme;
+    },
     get children() {
-      return createComponent(DevtoolsContent, {});
+      return createComponent(AIProvider, {
+        get children() {
+          return createComponent(DevtoolsContent, {});
+        }
+      });
     }
   });
 }

package/dist/production/dev.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/TWTNN4SQ.js')
+  () => import('./Shell/E5BETLAK.js')
 );
 
 export { AiDevtoolsCore };

package/dist/production/index.d.ts

@@ -5,7 +5,7 @@ declare const AiDevtoolsCore: new () => {
     "__#private@#isMounting": boolean;
     "__#private@#abortMount": boolean;
     "__#private@#dispose"?: () => void;
-    mount<T extends HTMLElement>(el: T, theme: "light" | "dark"): Promise<void>;
+    mount<T extends HTMLElement>(el: T, props: TanStackDevtoolsPluginProps): Promise<void>;
     unmount(): void;
 };
 

package/dist/production/index.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/TWTNN4SQ.js')
+  () => import('./Shell/E5BETLAK.js')
 );
 
 export { AiDevtoolsCore };

package/dist/production/server.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/SHJAKIOY.js')
+  () => import('./Shell/KINKIMWF.js')
 );
 
 export { AiDevtoolsCore };

package/dist/server.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/SHJAKIOY.js')
+  () => import('./Shell/KINKIMWF.js')
 );
 
 // src/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-devtools-core",
-  "version": "0.3.12",
+  "version": "0.3.15",
   "description": "Core TanStack AI Devtools",
   "author": "",
   "license": "MIT",
@@ -68,12 +68,12 @@
     "embeddings"
   ],
   "dependencies": {
-    "@tanstack/devtools-ui": "^0.5.0",
-    "@tanstack/devtools-utils": "0.3.2",
+    "@tanstack/devtools-ui": "^0.5.1",
+    "@tanstack/devtools-utils": "^0.4.0",
     "goober": "^2.1.18",
     "solid-js": "^1.9.10",
-    "@tanstack/ai": "0.8.1",
-    "@tanstack/ai-event-client": "0.1.1"
+    "@tanstack/ai": "0.9.2",
+    "@tanstack/ai-event-client": "0.1.4"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "4.0.14",

package/src/components/Shell.tsx

@@ -1,15 +1,28 @@
 import { createSignal, onCleanup, onMount } from 'solid-js'
-import { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'
+import {
+  Header,
+  HeaderLogo,
+  MainPanel,
+  ThemeContextProvider,
+} from '@tanstack/devtools-ui'
 import { useStyles } from '../styles/use-styles'
 import { AIProvider } from '../store/ai-context'
 import { ConversationsList } from './ConversationsList'
 import { ConversationDetails } from './ConversationDetails'
 
-export default function Devtools() {
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
+
+interface DevtoolProps {
+  theme: TanStackDevtoolsTheme
+}
+
+export default function Devtools(props: DevtoolProps) {
   return (
-    <AIProvider>
-      <DevtoolsContent />
-    </AIProvider>
+    <ThemeContextProvider theme={props.theme}>
+      <AIProvider>
+        <DevtoolsContent />
+      </AIProvider>
+    </ThemeContextProvider>
   )
 }