diff --git a/.changeset/moody-wings-type.md b/.changeset/moody-wings-type.md new file mode 100644 index 000000000..94f0684f3 --- /dev/null +++ b/.changeset/moody-wings-type.md @@ -0,0 +1,5 @@ +--- +'@tanstack/ai-devtools-core': patch +--- + +Moves devtools theme to the component to avoid theme miss-match. diff --git a/examples/ts-react-chat/src/routeTree.gen.ts b/examples/ts-react-chat/src/routeTree.gen.ts index e8231d338..490145527 100644 --- a/examples/ts-react-chat/src/routeTree.gen.ts +++ b/examples/ts-react-chat/src/routeTree.gen.ts @@ -9,8 +9,8 @@ // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. import { Route as rootRouteImport } from './routes/__root' -import { Route as ImageGenRouteImport } from './routes/image-gen' import { Route as RealtimeRouteImport } from './routes/realtime' +import { Route as ImageGenRouteImport } from './routes/image-gen' import { Route as IndexRouteImport } from './routes/index' import { Route as GenerationsVideoRouteImport } from './routes/generations.video' import { Route as GenerationsTranscriptionRouteImport } from './routes/generations.transcription' @@ -19,24 +19,24 @@ import { Route as GenerationsSpeechRouteImport } from './routes/generations.spee import { Route as GenerationsImageRouteImport } from './routes/generations.image' import { Route as ApiTranscribeRouteImport } from './routes/api.transcribe' import { Route as ApiTanchatRouteImport } from './routes/api.tanchat' -import { Route as ApiImageGenRouteImport } from './routes/api.image-gen' import { Route as ApiSummarizeRouteImport } from './routes/api.summarize' +import { Route as ApiImageGenRouteImport } from './routes/api.image-gen' import { Route as ExampleGuitarsIndexRouteImport } from './routes/example.guitars/index' import { Route as ExampleGuitarsGuitarIdRouteImport } from './routes/example.guitars/$guitarId' import { Route as ApiGenerateVideoRouteImport } from './routes/api.generate.video' import { Route as ApiGenerateSpeechRouteImport } from './routes/api.generate.speech' import { Route as ApiGenerateImageRouteImport } from './routes/api.generate.image' -const ImageGenRoute = ImageGenRouteImport.update({ - id: '/image-gen', - path: '/image-gen', - getParentRoute: () => rootRouteImport, -} as any) const RealtimeRoute = RealtimeRouteImport.update({ id: '/realtime', path: '/realtime', getParentRoute: () => rootRouteImport, } as any) +const ImageGenRoute = ImageGenRouteImport.update({ + id: '/image-gen', + path: '/image-gen', + getParentRoute: () => rootRouteImport, +} as any) const IndexRoute = IndexRouteImport.update({ id: '/', path: '/', @@ -78,16 +78,16 @@ const ApiTanchatRoute = ApiTanchatRouteImport.update({ path: '/api/tanchat', getParentRoute: () => rootRouteImport, } as any) -const ApiImageGenRoute = ApiImageGenRouteImport.update({ - id: '/api/image-gen', - path: '/api/image-gen', - getParentRoute: () => rootRouteImport, -} as any) const ApiSummarizeRoute = ApiSummarizeRouteImport.update({ id: '/api/summarize', path: '/api/summarize', getParentRoute: () => rootRouteImport, } as any) +const ApiImageGenRoute = ApiImageGenRouteImport.update({ + id: '/api/image-gen', + path: '/api/image-gen', + getParentRoute: () => rootRouteImport, +} as any) const ExampleGuitarsIndexRoute = ExampleGuitarsIndexRouteImport.update({ id: '/example/guitars/', path: '/example/guitars/', @@ -254,13 +254,6 @@ export interface RootRouteChildren { declare module '@tanstack/react-router' { interface FileRoutesByPath { - '/image-gen': { - id: '/image-gen' - path: '/image-gen' - fullPath: '/image-gen' - preLoaderRoute: typeof ImageGenRouteImport - parentRoute: typeof rootRouteImport - } '/realtime': { id: '/realtime' path: '/realtime' @@ -268,6 +261,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof RealtimeRouteImport parentRoute: typeof rootRouteImport } + '/image-gen': { + id: '/image-gen' + path: '/image-gen' + fullPath: '/image-gen' + preLoaderRoute: typeof ImageGenRouteImport + parentRoute: typeof rootRouteImport + } '/': { id: '/' path: '/' @@ -324,13 +324,6 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof ApiTanchatRouteImport parentRoute: typeof rootRouteImport } - '/api/image-gen': { - id: '/api/image-gen' - path: '/api/image-gen' - fullPath: '/api/image-gen' - preLoaderRoute: typeof ApiImageGenRouteImport - parentRoute: typeof rootRouteImport - } '/api/summarize': { id: '/api/summarize' path: '/api/summarize' @@ -338,6 +331,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof ApiSummarizeRouteImport parentRoute: typeof rootRouteImport } + '/api/image-gen': { + id: '/api/image-gen' + path: '/api/image-gen' + fullPath: '/api/image-gen' + preLoaderRoute: typeof ApiImageGenRouteImport + parentRoute: typeof rootRouteImport + } '/example/guitars/': { id: '/example/guitars/' path: '/example/guitars' diff --git a/packages/typescript/ai-devtools/package.json b/packages/typescript/ai-devtools/package.json index 817ab2b89..108ad9f69 100644 --- a/packages/typescript/ai-devtools/package.json +++ b/packages/typescript/ai-devtools/package.json @@ -80,8 +80,8 @@ "dependencies": { "@tanstack/ai": "workspace:*", "@tanstack/ai-event-client": "workspace:*", - "@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" }, diff --git a/packages/typescript/ai-devtools/src/components/Shell.tsx b/packages/typescript/ai-devtools/src/components/Shell.tsx index f2aed43f8..fcb126a49 100644 --- a/packages/typescript/ai-devtools/src/components/Shell.tsx +++ b/packages/typescript/ai-devtools/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 ( - - - + + + + + ) } diff --git a/packages/typescript/preact-ai-devtools/package.json b/packages/typescript/preact-ai-devtools/package.json index 0fd1e43f1..1d4e69f6d 100644 --- a/packages/typescript/preact-ai-devtools/package.json +++ b/packages/typescript/preact-ai-devtools/package.json @@ -49,7 +49,7 @@ ], "dependencies": { "@tanstack/ai-devtools-core": "workspace:*", - "@tanstack/devtools-utils": "0.3.2" + "@tanstack/devtools-utils": "^0.4.0" }, "devDependencies": { "@vitest/coverage-v8": "4.0.14", diff --git a/packages/typescript/react-ai-devtools/package.json b/packages/typescript/react-ai-devtools/package.json index 9514f8786..0f56015ae 100644 --- a/packages/typescript/react-ai-devtools/package.json +++ b/packages/typescript/react-ai-devtools/package.json @@ -49,7 +49,7 @@ ], "dependencies": { "@tanstack/ai-devtools-core": "workspace:*", - "@tanstack/devtools-utils": "0.3.2" + "@tanstack/devtools-utils": "^0.4.0" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", diff --git a/packages/typescript/solid-ai-devtools/package.json b/packages/typescript/solid-ai-devtools/package.json index fbf0a3871..983f73011 100644 --- a/packages/typescript/solid-ai-devtools/package.json +++ b/packages/typescript/solid-ai-devtools/package.json @@ -48,7 +48,7 @@ ], "dependencies": { "@tanstack/ai-devtools-core": "workspace:*", - "@tanstack/devtools-utils": "0.3.2" + "@tanstack/devtools-utils": "^0.4.0" }, "peerDependencies": { "solid-js": ">=1.9.7" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a97456a34..204f414c9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -738,11 +738,11 @@ importers: specifier: workspace:* version: link:../ai-event-client '@tanstack/devtools-ui': - specifier: ^0.5.0 - version: 0.5.0(csstype@3.2.3)(solid-js@1.9.10) + specifier: ^0.5.1 + version: 0.5.1(csstype@3.2.3)(solid-js@1.9.10) '@tanstack/devtools-utils': - specifier: 0.3.2 - version: 0.3.2(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.2)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) + specifier: ^0.4.0 + version: 0.4.0(@types/react@19.2.7)(preact@10.28.2)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) goober: specifier: ^2.1.18 version: 2.1.18(csstype@3.2.3) @@ -1197,8 +1197,8 @@ importers: specifier: workspace:* version: link:../ai-devtools '@tanstack/devtools-utils': - specifier: 0.3.2 - version: 0.3.2(@types/react@19.2.7)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) + specifier: ^0.4.0 + version: 0.4.0(@types/react@19.2.7)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) preact: specifier: ^10.0.0 version: 10.28.1 @@ -1216,8 +1216,8 @@ importers: specifier: workspace:* version: link:../ai-devtools '@tanstack/devtools-utils': - specifier: 0.3.2 - version: 0.3.2(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.2)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) + specifier: ^0.4.0 + version: 0.4.0(@types/react@19.2.7)(preact@10.28.2)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) devDependencies: '@types/react': specifier: ^19.2.7 @@ -1359,8 +1359,8 @@ importers: specifier: workspace:* version: link:../ai-devtools '@tanstack/devtools-utils': - specifier: 0.3.2 - version: 0.3.2(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.2)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) + specifier: ^0.4.0 + version: 0.4.0(@types/react@19.2.7)(preact@10.28.2)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3)) devDependencies: '@vitest/coverage-v8': specifier: 4.0.14 @@ -3933,9 +3933,16 @@ packages: peerDependencies: solid-js: '>=1.9.7' - '@tanstack/devtools-utils@0.3.2': - resolution: {integrity: sha512-fu9wmE2bHigiE1Lc5RFSchgdN35wX15TqfB4O4vJa6SqX9JH2ov57J60u18lheROaBiteloPzcCbkLNpx0aacw==} + '@tanstack/devtools-ui@0.5.1': + resolution: {integrity: sha512-T9JjAdqMSnxsVO6AQykD5vhxPF4iFLKtbYxee/bU3OLlk446F5C1220GdCmhDSz7y4lx+m8AvIS0bq6zzvdDUA==} engines: {node: '>=18'} + peerDependencies: + solid-js: '>=1.9.7' + + '@tanstack/devtools-utils@0.4.0': + resolution: {integrity: sha512-KsGzYhA8L/fCNgyyMyoUy+TKtx+DjNbzWwqH6wXL48Llzo7kvV9RynYJlaO8Qkzwm+NdHXSgsljQNjQ3CKPpZA==} + engines: {node: '>=18'} + hasBin: true peerDependencies: '@types/react': '>=17.0.0' preact: '>=10.0.0' @@ -11645,29 +11652,30 @@ snapshots: transitivePeerDependencies: - csstype - '@tanstack/devtools-utils@0.3.2(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.2)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))': + '@tanstack/devtools-ui@0.5.1(csstype@3.2.3)(solid-js@1.9.10)': dependencies: - '@tanstack/devtools-ui': 0.5.0(csstype@3.2.3)(solid-js@1.9.10) + clsx: 2.1.1 + dayjs: 1.11.19 + goober: 2.1.18(csstype@3.2.3) + solid-js: 1.9.10 + transitivePeerDependencies: + - csstype + + '@tanstack/devtools-utils@0.4.0(@types/react@19.2.7)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))': optionalDependencies: '@types/react': 19.2.7 - preact: 10.28.2 + preact: 10.28.1 react: 19.2.3 solid-js: 1.9.10 vue: 3.5.25(typescript@5.9.3) - transitivePeerDependencies: - - csstype - '@tanstack/devtools-utils@0.3.2(@types/react@19.2.7)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))': - dependencies: - '@tanstack/devtools-ui': 0.5.0(csstype@3.2.3)(solid-js@1.9.10) + '@tanstack/devtools-utils@0.4.0(@types/react@19.2.7)(preact@10.28.2)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))': optionalDependencies: '@types/react': 19.2.7 - preact: 10.28.1 + preact: 10.28.2 react: 19.2.3 solid-js: 1.9.10 vue: 3.5.25(typescript@5.9.3) - transitivePeerDependencies: - - csstype '@tanstack/devtools-vite@0.5.3(vite@7.2.7(@types/node@24.10.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))': dependencies: