@tanstack/ai-devtools-core 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,131 @@
+<div align="center">
+  <img src="./media/header_ai.png" >
+</div>
+
+<br />
+
+<div align="center">
+<a href="https://npmjs.com/package/@tanstack/ai" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" />
+</a>
+<a href="https://github.com/TanStack/ai" target="\_parent">
+	  <img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" />
+</a>
+<a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" />
+</a>
+</div>
+
+<div align="center">
+<a href="#badge">
+  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+</a>
+	<a href="#badge">
+		<img src="https://img.shields.io/github/v/release/tanstack/ai" alt="Release"/>
+	</a>
+<a href="https://twitter.com/tan_stack">
+  <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
+</a>
+</div>
+
+<div align="center">
+  
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+</div>
+
+# TanStack AI
+
+A powerful, type-safe AI SDK for building AI-powered applications.
+
+- Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.)
+- **Multimodal content support** - Send images, audio, video, and documents
+- Chat completion, streaming, and agent loop strategies
+- Headless chat state management with adapters (SSE, HTTP stream, custom)
+- Isomorphic type-safe tools with server/client execution
+- **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions
+
+### <a href="https://tanstack.com/ai">Read the docs →</b></a>
+
+## Bonus: TanStack Start Integration
+
+TanStack AI works with **any** framework (Next.js, Express, Remix, etc.).
+
+**With TanStack Start**, you get a bonus: share implementations between AI tools and server functions with `createServerFnTool`:
+
+```typescript
+import { createServerFnTool } from '@tanstack/ai-react'
+
+// Define once, get AI tool AND server function (TanStack Start only)
+const getProducts = createServerFnTool({
+  name: 'getProducts',
+  inputSchema: z.object({ query: z.string() }),
+  execute: async ({ query }) => db.products.search(query),
+})
+
+// Use in AI chat
+chat({ tools: [getProducts.server] })
+
+// Call directly from components (no API endpoint needed!)
+const products = await getProducts.serverFn({ query: 'laptop' })
+```
+
+No duplicate logic, full type safety, automatic validation. The `serverFn` feature requires TanStack Start. See [docs](https://tanstack.com/ai) for details.
+
+## Get Involved
+
+- We welcome issues and pull requests!
+- Participate in [GitHub discussions](https://github.com/TanStack/ai/discussions)
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
+- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+
+## Partners
+
+<table align="center">
+  <tr>
+    <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-CMcuvjEy.svg" height="40" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" />
+          <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
+        </picture>
+      </a>
+    </td>
+    <td>
+      <a href="https://www.cloudflare.com?utm_source=tanstack">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" />
+          <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
+        </picture>
+      </a>
+    </td>
+  </tr>
+</table>
+
+<div align="center">
+<img src="./media/partner_logo.svg" alt="AI & you?" height="65">
+<p>
+We're looking for TanStack AI Partners to join our mission! Partner with us to push the boundaries of TanStack AI and build amazing things together.
+</p>
+<a href="mailto:partners@tanstack.com?subject=TanStack AI Partnership"><b>LET'S CHAT</b></a>
+</div>
+
+## Explore the TanStack Ecosystem
+
+- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
+- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
+- <a href="https://github.com/tanstack/devtools">TanStack Devtools</a> – Unified devtools panel
+- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
+- <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching
+- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
+- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
+- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
+- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
+- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
+- <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids
+- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
+
+… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>
+
+<!-- USE THE FORCE LUKE -->

package/dist/esm/components/ConversationDetails.d.ts

@@ -0,0 +1,2 @@
+import { Component } from 'solid-js';
+export declare const ConversationDetails: Component;

package/dist/esm/components/ConversationDetails.js

@@ -0,0 +1,134 @@
+import { createComponent, template, insert, effect, className } from "solid-js/web";
+import { createSignal, createEffect, Show } from "solid-js";
+import { useStyles } from "../styles/use-styles.js";
+import { useAIStore } from "../store/ai-context.js";
+import { ConversationHeader } from "./conversation/ConversationHeader.js";
+import { ConversationTabs } from "./conversation/ConversationTabs.js";
+import { MessagesTab } from "./conversation/MessagesTab.js";
+import { ChunksTab } from "./conversation/ChunksTab.js";
+import { EmbeddingsTab } from "./conversation/EmbeddingsTab.js";
+import { SummariesTab } from "./conversation/SummariesTab.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div>Select a conversation to view details`), _tmpl$2 = /* @__PURE__ */ template(`<div><div>`);
+const ConversationDetails = () => {
+  const {
+    state
+  } = useAIStore();
+  const styles = useStyles();
+  const [activeTab, setActiveTab] = createSignal("messages");
+  const activeConversation = () => {
+    if (!state.activeConversationId) return void 0;
+    return state.conversations[state.activeConversationId];
+  };
+  createEffect(() => {
+    const conv = activeConversation();
+    if (conv) {
+      if (conv.type === "server") {
+        if (conv.chunks.length > 0) {
+          setActiveTab("chunks");
+        } else if (conv.hasEmbedding || conv.embeddings && conv.embeddings.length > 0) {
+          setActiveTab("embeddings");
+        } else if (conv.hasSummarize || conv.summaries && conv.summaries.length > 0) {
+          setActiveTab("summaries");
+        } else {
+          setActiveTab("chunks");
+        }
+      } else {
+        setActiveTab("messages");
+      }
+    }
+  });
+  return createComponent(Show, {
+    get when() {
+      return activeConversation();
+    },
+    get fallback() {
+      return (() => {
+        var _el$ = _tmpl$();
+        effect(() => className(_el$, styles().conversationDetails.emptyState));
+        return _el$;
+      })();
+    },
+    children: (conv) => (() => {
+      var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
+      insert(_el$2, createComponent(ConversationHeader, {
+        get conversation() {
+          return conv();
+        }
+      }), _el$3);
+      insert(_el$2, createComponent(ConversationTabs, {
+        get conversation() {
+          return conv();
+        },
+        get activeTab() {
+          return activeTab();
+        },
+        onTabChange: setActiveTab
+      }), _el$3);
+      insert(_el$3, createComponent(Show, {
+        get when() {
+          return activeTab() === "messages";
+        },
+        get children() {
+          return createComponent(MessagesTab, {
+            get messages() {
+              return conv().messages;
+            }
+          });
+        }
+      }), null);
+      insert(_el$3, createComponent(Show, {
+        get when() {
+          return activeTab() === "chunks";
+        },
+        get children() {
+          return createComponent(ChunksTab, {
+            get chunks() {
+              return conv().chunks;
+            },
+            get messages() {
+              return conv().messages;
+            }
+          });
+        }
+      }), null);
+      insert(_el$3, createComponent(Show, {
+        get when() {
+          return activeTab() === "embeddings";
+        },
+        get children() {
+          return createComponent(EmbeddingsTab, {
+            get embeddings() {
+              return conv().embeddings ?? [];
+            }
+          });
+        }
+      }), null);
+      insert(_el$3, createComponent(Show, {
+        get when() {
+          return activeTab() === "summaries";
+        },
+        get children() {
+          return createComponent(SummariesTab, {
+            get summaries() {
+              return conv().summaries ?? [];
+            }
+          });
+        }
+      }), null);
+      effect((_p$) => {
+        var _v$ = styles().conversationDetails.container, _v$2 = styles().conversationDetails.contentArea;
+        _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+        _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$2;
+    })()
+  });
+};
+export {
+  ConversationDetails
+};
+//# sourceMappingURL=ConversationDetails.js.map

package/dist/esm/components/ConversationDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationDetails.js","sources":["../../../src/components/ConversationDetails.tsx"],"sourcesContent":["import { Show, createEffect, createSignal } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useAIStore } from '../store/ai-context'\nimport {\n  ChunksTab,\n  ConversationHeader,\n  ConversationTabs,\n  EmbeddingsTab,\n  MessagesTab,\n  SummariesTab,\n} from './conversation'\nimport type { TabType } from './conversation'\nimport type { Conversation } from '../store/ai-context'\nimport type { Component } from 'solid-js'\n\nexport const ConversationDetails: Component = () => {\n  const { state } = useAIStore()\n  const styles = useStyles()\n  const [activeTab, setActiveTab] = createSignal<TabType>('messages')\n\n  const activeConversation = (): Conversation | undefined => {\n    if (!state.activeConversationId) return undefined\n    return state.conversations[state.activeConversationId]\n  }\n\n  // Update active tab when conversation changes\n  createEffect(() => {\n    const conv = activeConversation()\n    if (conv) {\n      // For server conversations, always use chunks (messages tab is hidden)\n      if (conv.type === 'server') {\n        if (conv.chunks.length > 0) {\n          setActiveTab('chunks')\n        } else if (\n          conv.hasEmbedding ||\n          (conv.embeddings && conv.embeddings.length > 0)\n        ) {\n          setActiveTab('embeddings')\n        } else if (\n          conv.hasSummarize ||\n          (conv.summaries && conv.summaries.length > 0)\n        ) {\n          setActiveTab('summaries')\n        } else {\n          setActiveTab('chunks')\n        }\n      } else {\n        // For client conversations, default to messages tab\n        setActiveTab('messages')\n      }\n    }\n  })\n\n  return (\n    <Show\n      when={activeConversation()}\n      fallback={\n        <div class={styles().conversationDetails.emptyState}>\n          Select a conversation to view details\n        </div>\n      }\n    >\n      {(conv) => (\n        <div class={styles().conversationDetails.container}>\n          <ConversationHeader conversation={conv()} />\n          <ConversationTabs\n            conversation={conv()}\n            activeTab={activeTab()}\n            onTabChange={setActiveTab}\n          />\n          <div class={styles().conversationDetails.contentArea}>\n            <Show when={activeTab() === 'messages'}>\n              <MessagesTab messages={conv().messages} />\n            </Show>\n            <Show when={activeTab() === 'chunks'}>\n              <ChunksTab chunks={conv().chunks} messages={conv().messages} />\n            </Show>\n            <Show when={activeTab() === 'embeddings'}>\n              <EmbeddingsTab embeddings={conv().embeddings ?? []} />\n            </Show>\n            <Show when={activeTab() === 'summaries'}>\n              <SummariesTab summaries={conv().summaries ?? []} />\n            </Show>\n          </div>\n        </div>\n      )}\n    </Show>\n  )\n}\n"],"names":["ConversationDetails","state","useAIStore","styles","useStyles","activeTab","setActiveTab","createSignal","activeConversation","activeConversationId","undefined","conversations","createEffect","conv","type","chunks","length","hasEmbedding","embeddings","hasSummarize","summaries","_$createComponent","Show","when","fallback","_el$","_tmpl$","_$effect","_$className","conversationDetails","emptyState","children","_el$2","_tmpl$2","_el$3","firstChild","_$insert","ConversationHeader","conversation","ConversationTabs","onTabChange","MessagesTab","messages","ChunksTab","EmbeddingsTab","SummariesTab","_p$","_v$","container","_v$2","contentArea","e","t"],"mappings":"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"}

package/dist/esm/components/ConversationsList.d.ts

@@ -0,0 +1,2 @@
+import { Component } from 'solid-js';
+export declare const ConversationsList: Component;

package/dist/esm/components/ConversationsList.js

@@ -0,0 +1,30 @@
+import { template, insert, createComponent, effect, className } from "solid-js/web";
+import { For } from "solid-js";
+import { useStyles } from "../styles/use-styles.js";
+import { useAIStore } from "../store/ai-context.js";
+import { ConversationRow } from "./list/ConversationRow.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+const ConversationsList = () => {
+  const {
+    state
+  } = useAIStore();
+  const styles = useStyles();
+  const conversations = () => Object.values(state.conversations);
+  return (() => {
+    var _el$ = _tmpl$();
+    insert(_el$, createComponent(For, {
+      get each() {
+        return conversations();
+      },
+      children: (conv) => createComponent(ConversationRow, {
+        conversation: conv
+      })
+    }));
+    effect(() => className(_el$, styles().utilList));
+    return _el$;
+  })();
+};
+export {
+  ConversationsList
+};
+//# sourceMappingURL=ConversationsList.js.map

package/dist/esm/components/ConversationsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationsList.js","sources":["../../../src/components/ConversationsList.tsx"],"sourcesContent":["import { For } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useAIStore } from '../store/ai-context'\nimport { ConversationRow } from './list'\nimport type { Conversation } from '../store/ai-context'\nimport type { Component } from 'solid-js'\n\nexport const ConversationsList: Component = () => {\n  const { state } = useAIStore()\n  const styles = useStyles()\n\n  const conversations = () => Object.values(state.conversations)\n\n  return (\n    <div class={styles().utilList}>\n      <For each={conversations()}>\n        {(conv: Conversation) => <ConversationRow conversation={conv} />}\n      </For>\n    </div>\n  )\n}\n"],"names":["ConversationsList","state","useAIStore","styles","useStyles","conversations","Object","values","_el$","_tmpl$","_$insert","_$createComponent","For","each","children","conv","ConversationRow","conversation","_$effect","_$className","utilList"],"mappings":";;;;;;AAOO,MAAMA,oBAA+BA,MAAM;AAChD,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAUC,WAAAA;AAClB,QAAMC,SAASC,UAAAA;AAEf,QAAMC,gBAAgBA,MAAMC,OAAOC,OAAON,MAAMI,aAAa;AAE7D,UAAA,MAAA;AAAA,QAAAG,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,gBAEKC,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAER,cAAAA;AAAAA,MAAe;AAAA,MAAAS,UACvBA,CAACC,SAAkBJ,gBAAMK,iBAAe;AAAA,QAACC,cAAcF;AAAAA,MAAAA,CAAI;AAAA,IAAA,CAAI,CAAA;AAAAG,WAAA,MAAAC,UAAAX,MAFxDL,OAAAA,EAASiB,QAAQ,CAAA;AAAA,WAAAZ;AAAAA,EAAA,GAAA;AAMjC;"}

package/dist/esm/components/Shell.d.ts

@@ -0,0 +1 @@
+export default function Devtools(): import("solid-js").JSX.Element;

package/dist/esm/components/Shell.js

@@ -0,0 +1,94 @@
+import { createComponent, template, insert, effect, className, setStyleProperty, delegateEvents } from "solid-js/web";
+import { createSignal, onMount, onCleanup } from "solid-js";
+import { MainPanel, Header, HeaderLogo } from "@tanstack/devtools-ui";
+import { useStyles } from "../styles/use-styles.js";
+import { AIProvider } from "../store/ai-context.js";
+import { ConversationsList } from "./ConversationsList.js";
+import { ConversationDetails } from "./ConversationDetails.js";
+var _tmpl$ = /* @__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, {
+    get children() {
+      return createComponent(DevtoolsContent, {});
+    }
+  });
+}
+function DevtoolsContent() {
+  const styles = useStyles();
+  const [leftPanelWidth, setLeftPanelWidth] = createSignal(300);
+  const [isDragging, setIsDragging] = createSignal(false);
+  let dragStartX = 0;
+  let dragStartWidth = 0;
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    dragStartX = e.clientX;
+    dragStartWidth = leftPanelWidth();
+  };
+  const handleMouseMove = (e) => {
+    if (!isDragging()) return;
+    e.preventDefault();
+    const deltaX = e.clientX - dragStartX;
+    const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX));
+    setLeftPanelWidth(newWidth);
+  };
+  const handleMouseUp = () => {
+    setIsDragging(false);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  };
+  onMount(() => {
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  });
+  onCleanup(() => {
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+  });
+  return createComponent(MainPanel, {
+    get children() {
+      return [createComponent(Header, {
+        get children() {
+          return createComponent(HeaderLogo, {
+            flavor: {
+              light: "#ec4899",
+              dark: "#ec4899"
+            },
+            children: "TanStack AI"
+          });
+        }
+      }), (() => {
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.nextSibling;
+        insert(_el$2, createComponent(ConversationsList, {}), null);
+        _el$4.$$mousedown = handleMouseDown;
+        insert(_el$5, createComponent(ConversationDetails, {}));
+        effect((_p$) => {
+          var _v$ = styles().mainContainer, _v$2 = styles().leftPanel, _v$3 = `${leftPanelWidth()}px`, _v$4 = styles().shell.sectionHeader, _v$5 = `${styles().dragHandle} ${isDragging() ? "dragging" : ""}`, _v$6 = styles().rightPanel;
+          _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+          _v$3 !== _p$.a && setStyleProperty(_el$2, "width", _p$.a = _v$3);
+          _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+          _v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
+          _v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0,
+          n: void 0
+        });
+        return _el$;
+      })()];
+    }
+  });
+}
+delegateEvents(["mousedown"]);
+export {
+  Devtools as default
+};
+//# sourceMappingURL=Shell.js.map

package/dist/esm/components/Shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shell.js","sources":["../../../src/components/Shell.tsx"],"sourcesContent":["import { createSignal, onCleanup, onMount } from 'solid-js'\nimport { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'\nimport { useStyles } from '../styles/use-styles'\nimport { AIProvider } from '../store/ai-context'\nimport { ConversationsList } from './ConversationsList'\nimport { ConversationDetails } from './ConversationDetails'\n\nexport default function Devtools() {\n  return (\n    <AIProvider>\n      <DevtoolsContent />\n    </AIProvider>\n  )\n}\n\nfunction DevtoolsContent() {\n  const styles = useStyles()\n  const [leftPanelWidth, setLeftPanelWidth] = createSignal(300)\n  const [isDragging, setIsDragging] = createSignal(false)\n\n  let dragStartX = 0\n  let dragStartWidth = 0\n\n  const handleMouseDown = (e: MouseEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDragging(true)\n    document.body.style.cursor = 'col-resize'\n    document.body.style.userSelect = 'none'\n    dragStartX = e.clientX\n    dragStartWidth = leftPanelWidth()\n  }\n\n  const handleMouseMove = (e: MouseEvent) => {\n    if (!isDragging()) return\n\n    e.preventDefault()\n    const deltaX = e.clientX - dragStartX\n    const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX))\n    setLeftPanelWidth(newWidth)\n  }\n\n  const handleMouseUp = () => {\n    setIsDragging(false)\n    document.body.style.cursor = ''\n    document.body.style.userSelect = ''\n  }\n\n  onMount(() => {\n    document.addEventListener('mousemove', handleMouseMove)\n    document.addEventListener('mouseup', handleMouseUp)\n  })\n\n  onCleanup(() => {\n    document.removeEventListener('mousemove', handleMouseMove)\n    document.removeEventListener('mouseup', handleMouseUp)\n  })\n\n  return (\n    <MainPanel>\n      <Header>\n        <HeaderLogo flavor={{ light: '#ec4899', dark: '#ec4899' }}>\n          TanStack AI\n        </HeaderLogo>\n      </Header>\n\n      <div class={styles().mainContainer}>\n        <div\n          class={styles().leftPanel}\n          style={{\n            width: `${leftPanelWidth()}px`,\n            'min-width': '150px',\n            'max-width': '800px',\n          }}\n        >\n          {/* Section header */}\n          <div class={styles().shell.sectionHeader}>Active Conversations</div>\n\n          <ConversationsList />\n        </div>\n\n        <div\n          class={`${styles().dragHandle} ${isDragging() ? 'dragging' : ''}`}\n          onMouseDown={handleMouseDown}\n        />\n\n        <div class={styles().rightPanel} style={{ flex: 1 }}>\n          <ConversationDetails />\n        </div>\n      </div>\n    </MainPanel>\n  )\n}\n"],"names":["Devtools","_$createComponent","AIProvider","children","DevtoolsContent","styles","useStyles","leftPanelWidth","setLeftPanelWidth","createSignal","isDragging","setIsDragging","dragStartX","dragStartWidth","handleMouseDown","e","preventDefault","stopPropagation","document","body","style","cursor","userSelect","clientX","handleMouseMove","deltaX","newWidth","Math","max","min","handleMouseUp","onMount","addEventListener","onCleanup","removeEventListener","MainPanel","Header","HeaderLogo","flavor","light","dark","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_$insert","ConversationsList","$$mousedown","ConversationDetails","_$effect","_p$","_v$","mainContainer","_v$2","leftPanel","_v$3","_v$4","shell","sectionHeader","_v$5","dragHandle","_v$6","rightPanel","_$className","t","a","_$setStyleProperty","o","i","n","undefined","_$delegateEvents"],"mappings":"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"}

package/dist/esm/components/conversation/ChunkBadges.d.ts

@@ -0,0 +1,7 @@
+import { Component } from 'solid-js';
+import { Chunk } from '../../store/ai-store.js';
+interface ChunkBadgesProps {
+    chunks: Array<Chunk>;
+}
+export declare const ChunkBadges: Component<ChunkBadgesProps>;
+export {};

package/dist/esm/components/conversation/ChunkBadges.js

@@ -0,0 +1,54 @@
+import { createComponent, template, effect, className, insert } from "solid-js/web";
+import { Show } from "solid-js";
+import { useStyles } from "../../styles/use-styles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<span>🔧 Tool Calls`), _tmpl$2 = /* @__PURE__ */ template(`<span>❌ Error`), _tmpl$3 = /* @__PURE__ */ template(`<span>⚠️ Approval`), _tmpl$4 = /* @__PURE__ */ template(`<span>✓ `);
+const ChunkBadges = (props) => {
+  const styles = useStyles();
+  const hasToolCalls = () => props.chunks.some((c) => c.type === "tool_call");
+  const hasErrors = () => props.chunks.some((c) => c.type === "error");
+  const hasApproval = () => props.chunks.some((c) => c.type === "approval");
+  const finishReason = () => props.chunks.find((c) => c.type === "done")?.finishReason;
+  return [createComponent(Show, {
+    get when() {
+      return hasToolCalls();
+    },
+    get children() {
+      var _el$ = _tmpl$();
+      effect(() => className(_el$, `${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeTool}`));
+      return _el$;
+    }
+  }), createComponent(Show, {
+    get when() {
+      return hasErrors();
+    },
+    get children() {
+      var _el$2 = _tmpl$2();
+      effect(() => className(_el$2, `${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeError}`));
+      return _el$2;
+    }
+  }), createComponent(Show, {
+    get when() {
+      return hasApproval();
+    },
+    get children() {
+      var _el$3 = _tmpl$3();
+      effect(() => className(_el$3, `${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeApproval}`));
+      return _el$3;
+    }
+  }), createComponent(Show, {
+    get when() {
+      return finishReason();
+    },
+    get children() {
+      var _el$4 = _tmpl$4();
+      _el$4.firstChild;
+      insert(_el$4, finishReason, null);
+      effect(() => className(_el$4, `${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeSuccess}`));
+      return _el$4;
+    }
+  })];
+};
+export {
+  ChunkBadges
+};
+//# sourceMappingURL=ChunkBadges.js.map

package/dist/esm/components/conversation/ChunkBadges.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChunkBadges.js","sources":["../../../../src/components/conversation/ChunkBadges.tsx"],"sourcesContent":["import { Show } from 'solid-js'\nimport { useStyles } from '../../styles/use-styles'\nimport type { Component } from 'solid-js'\nimport type { Chunk } from '../../store/ai-store'\n\ninterface ChunkBadgesProps {\n  chunks: Array<Chunk>\n}\n\nexport const ChunkBadges: Component<ChunkBadgesProps> = (props) => {\n  const styles = useStyles()\n\n  const hasToolCalls = () => props.chunks.some((c) => c.type === 'tool_call')\n  const hasErrors = () => props.chunks.some((c) => c.type === 'error')\n  const hasApproval = () => props.chunks.some((c) => c.type === 'approval')\n  const finishReason = () =>\n    props.chunks.find((c) => c.type === 'done')?.finishReason\n\n  return (\n    <>\n      <Show when={hasToolCalls()}>\n        <span\n          class={`${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeTool}`}\n        >\n          🔧 Tool Calls\n        </span>\n      </Show>\n      <Show when={hasErrors()}>\n        <span\n          class={`${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeError}`}\n        >\n          ❌ Error\n        </span>\n      </Show>\n      <Show when={hasApproval()}>\n        <span\n          class={`${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeApproval}`}\n        >\n          ⚠️ Approval\n        </span>\n      </Show>\n      <Show when={finishReason()}>\n        <span\n          class={`${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeSuccess}`}\n        >\n          ✓ {finishReason()}\n        </span>\n      </Show>\n    </>\n  )\n}\n"],"names":["ChunkBadges","props","styles","useStyles","hasToolCalls","chunks","some","c","type","hasErrors","hasApproval","finishReason","find","_$createComponent","Show","when","children","_el$","_tmpl$","_$effect","_$className","conversationDetails","chunkBadge","chunkBadgeTool","_el$2","_tmpl$2","chunkBadgeError","_el$3","_tmpl$3","chunkBadgeApproval","_el$4","_tmpl$4","firstChild","_$insert","chunkBadgeSuccess"],"mappings":";;;;AASO,MAAMA,cAA4CC,CAAAA,UAAU;AACjE,QAAMC,SAASC,UAAAA;AAEf,QAAMC,eAAeA,MAAMH,MAAMI,OAAOC,KAAMC,CAAAA,MAAMA,EAAEC,SAAS,WAAW;AAC1E,QAAMC,YAAYA,MAAMR,MAAMI,OAAOC,KAAMC,CAAAA,MAAMA,EAAEC,SAAS,OAAO;AACnE,QAAME,cAAcA,MAAMT,MAAMI,OAAOC,KAAMC,CAAAA,MAAMA,EAAEC,SAAS,UAAU;AACxE,QAAMG,eAAeA,MACnBV,MAAMI,OAAOO,KAAML,CAAAA,MAAMA,EAAEC,SAAS,MAAM,GAAGG;AAE/C,SAAA,CAAAE,gBAEKC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEX,aAAAA;AAAAA,IAAc;AAAA,IAAA,IAAAY,WAAA;AAAA,UAAAC,OAAAC,OAAAA;AAAAC,aAAA,MAAAC,UAAAH,MAEf,GAAGf,SAASmB,oBAAoBC,UAAU,IAAIpB,OAAAA,EAASmB,oBAAoBE,cAAc,EAAE,CAAA;AAAA,aAAAN;AAAAA,IAAA;AAAA,EAAA,CAAA,GAAAJ,gBAKrGC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEN,UAAAA;AAAAA,IAAW;AAAA,IAAA,IAAAO,WAAA;AAAA,UAAAQ,QAAAC,QAAAA;AAAAN,aAAA,MAAAC,UAAAI,OAEZ,GAAGtB,SAASmB,oBAAoBC,UAAU,IAAIpB,OAAAA,EAASmB,oBAAoBK,eAAe,EAAE,CAAA;AAAA,aAAAF;AAAAA,IAAA;AAAA,EAAA,CAAA,GAAAX,gBAKtGC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEL,YAAAA;AAAAA,IAAa;AAAA,IAAA,IAAAM,WAAA;AAAA,UAAAW,QAAAC,QAAAA;AAAAT,aAAA,MAAAC,UAAAO,OAEd,GAAGzB,SAASmB,oBAAoBC,UAAU,IAAIpB,OAAAA,EAASmB,oBAAoBQ,kBAAkB,EAAE,CAAA;AAAA,aAAAF;AAAAA,IAAA;AAAA,EAAA,CAAA,GAAAd,gBAKzGC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEJ,aAAAA;AAAAA,IAAc;AAAA,IAAA,IAAAK,WAAA;AAAA,UAAAc,QAAAC;AAAAD,YAAAE;AAAAC,aAAAH,OAInBnB,cAAY,IAAA;AAAAQ,aAAA,MAAAC,UAAAU,OAFR,GAAG5B,SAASmB,oBAAoBC,UAAU,IAAIpB,OAAAA,EAASmB,oBAAoBa,iBAAiB,EAAE,CAAA;AAAA,aAAAJ;AAAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAO/G;"}

package/dist/esm/components/conversation/ChunkItem.d.ts

@@ -0,0 +1,9 @@
+import { Component } from 'solid-js';
+import { Chunk } from '../../store/ai-store.js';
+interface ChunkItemProps {
+    chunk: Chunk;
+    index: number;
+    variant?: 'small' | 'large';
+}
+export declare const ChunkItem: Component<ChunkItemProps>;
+export {};